Hey, I’m Chen! A Web & App Developer.

As React apps grow bigger and more complex, performance becomes more and more of a problem. As components become larger and contain more and more sub-components, rendering becomes slow and turns into a bottleneck.

How do we tackle this? If you haven’t used useMemo and useCallback, we can start with those.

When developers first start their journey, sometimes syntax is easy. You’ve memorized a few commands, classes, and method names, and you can make simple applications quite easily. Also, there is plenty of docs and tutorials online - as well as Stack Overflow - surely copying-and-pasting your way through would be enough, right?

Let’s try to answer the question: how to start approaching problem solving for any given task?

When prototyping UI designs or code, we often need images to put in places when we have no finalized images in the design, or in order to test out different sizes and colors when only some are provided.

I find myself needing to find an image to use when developing websites and apps often, and finding a mock image to upload is time consuming - not to mention leaves possibly unwanted files in your code or design.

So what do we do?

Enter: placeholder.photo.

Flutter is an amazing framework for app development, and gaining popularity every second. Being component and composition based, and with the fact that it includes many built-in widgets to work with, it’s really easy to create beautiful widgets, either simple or complex.

Today we’ll be learning how to create a real-world case widget for updating a numeric value - a pitch-knob-like control. Like the ones you can usually find in a studio. It will also support letting the finger go to keep rolling in the same direction, and using the velocity it was left with.

As most people who have been working a lot in front-end development, I will acknowledge that no matter what framework, library set or tools you work with, you end up replicating a lot of files, especially with modern component-based frameworks, such as React, Angular and Vue.js.

They usually grow to be very different, but they almost always start with the same some sort of base-skeleton, which gets built-upon later. A lot of pipeline code written, and time wasted.