{"@attributes":{"version":"2.0"},"channel":{"title":"Javascript on xfsnowind","link":"https:\/\/xfsnowind.github.io\/tags\/javascript\/","description":"Recent content in Javascript on xfsnowind","generator":"Hugo -- gohugo.io","language":"en","lastBuildDate":"Sat, 10 Jun 2023 16:06:56 +0800","item":[{"title":"Learning Notes From New React Website","link":"https:\/\/xfsnowind.github.io\/blogs\/learning-notes-from-new-react-website\/","pubDate":"Sat, 10 Jun 2023 16:06:56 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/learning-notes-from-new-react-website\/","description":"\nIt has been a while after React published its new webiste, I would write down what I learnt from the new webiste.\nDescribe 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:\nWhy do we have to use key for the list item? Because the item in the list could be modified, such as insert, deleted or re-sorted, so the React need to know which item the component is responible to."},{"title":"How to convert an existing project to MicroFrontend with Module Federation","link":"https:\/\/xfsnowind.github.io\/blogs\/micro-frontend-module-federation\/","pubDate":"Sat, 10 Dec 2022 16:50:28 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/micro-frontend-module-federation\/","description":"\nNowadays, I joined a frontend team in a new company in Singapore, the project is based on monorepo (you can find more about monorepo here) and the tech lead maintains the project very well, keeping updating the main libraries to the latest version and keeping an eye on the new technology to improve the solution and codes.\nWhen I invested the project, I found the project was not just a monorepo, but also a monolith frontend project which involves other project which is kidn of a historical problem."},{"title":"How to implement Virtualized Grid\/List in React","link":"https:\/\/xfsnowind.github.io\/blogs\/react-virtualized\/","pubDate":"Sat, 03 Dec 2022 22:22:49 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/react-virtualized\/","description":"\nAround 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 once I was asked how to implement such thing during an interview, it remindered me."},{"title":"How to implement a FolderFlip 2","link":"https:\/\/xfsnowind.github.io\/blogs\/folderflip-version2\/","pubDate":"Thu, 13 Oct 2022 22:55:11 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/folderflip-version2\/","description":"\nUpdate 2022-11-15: add the images to explain the steps\nAs 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.\nThe Problem But it only allows limited number, if it comes more items or the screen is smaller, the items would not be able to scroll. So how would we display if the items are more and the titles take most of the screen."},{"title":"How to implement a FolderFlip with React","link":"https:\/\/xfsnowind.github.io\/blogs\/folderflip\/","pubDate":"Tue, 27 Sep 2022 11:15:24 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/folderflip\/","description":"\nHaven'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 name FolderFlip.\nThe original idea was come up with by the UX designer in our team, she would like to develop a fancy component which can be used to present the company culture."},{"title":"Learning Notes - React Hooks","link":"https:\/\/xfsnowind.github.io\/blogs\/geektime\/react-hooks\/","pubDate":"Sun, 07 Aug 2022 14:50:28 +0200","guid":"https:\/\/xfsnowind.github.io\/blogs\/geektime\/react-hooks\/","description":"\nThis article is a summary when I learned the React Hooks course in GeekTime. Even though we all use React Hooks in the frontend development, I cannot say I understand the internal core and logic of it. So this is a good time to re-learn it through this course. According to my experience, it's definitely better to write down the idea and thoughts down -- The palest ink is better than the best memory."},{"title":"Promise implementation","link":"https:\/\/xfsnowind.github.io\/blogs\/promise\/","pubDate":"Sat, 06 Aug 2022 22:30:08 +0200","guid":"https:\/\/xfsnowind.github.io\/blogs\/promise\/","description":"\nPromise is a general concept to handle the asynchronize development in javascript. It's not hard to use, but when it comes with some other concepts, like react's hook, its internal chain etc. It always takes me some time to think through it. Especially when check the code of some open-source libraries, find the way they use Promise is quite fancy and also hard to understand, which reminders me that I am still stay on the level of using, far away from deep understanding."}]}}