It has been a while after React published its new webiste, I would write down what I learnt from the new webiste. Describe the UI List Key I know this is an old issue, but I used to use index as the key of list. To summarize it, I will note the correct way to use the key: Why do we have to use key for the list item? …

These days I need to implement a component to draw a line on the given image and this line should be scalable, draggable and limited within the image. So here are the steps to implement it. Konva Definitely we need canvas to complete it, but instead of using canvas directly, it's better to use some mature library, like …

The first time I touched the React-hook-form was in 2020 and it also was the first time I learned React's new concept Hooks. During that time we compared all the popular form libraries, Formik, react-form, final form and etc, but we finally chose the React-hook-form even though it was still under the development during …

Around 2018, one of my colleague was working on creating a list component which only renders a limited amount of items in the list instead of the whole one to improve the performance if the list is in large or huge scale. I was always interested at how he did that, but I did not do any investment, just an idea. Then …

Update 2022-11-15: add the images to explain the steps As we presented in the previous article, we have showed how to implement the FolderFlip with limited number (like 3) items with the position: sticky and IntersectionObserver. The Problem But it only allows limited number, if it comes more items or the screen is …

Haven't updated the blogs for a long time. Just had been struggling on the house work during the whole summer time, painting external and internal wall, new bathroom and etc. But there is still the good news, implemented an interesting frontend component with React, which would inspired by lifeatspotify - borrow the …