{"@attributes":{"version":"2.0"},"channel":{"title":"xfsnowind","link":"https:\/\/xfsnowind.github.io\/","description":"Recent content on xfsnowind","generator":"Hugo -- gohugo.io","language":"en","lastBuildDate":"Mon, 11 Mar 2024 14:55:29 +0800","item":[{"title":"China Map With Google and Autonavi","link":"https:\/\/xfsnowind.github.io\/blogs\/china-map-with-google-and-autonavi\/","pubDate":"Mon, 11 Mar 2024 14:55:29 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/china-map-with-google-and-autonavi\/","description":"\nThese days I am investigating the map used in Hongkong and China mainland since it uses the different standard according to Chinese law. There are some several interesting points can be discussed here:\nChinese Coordinate System GCJ-02 vs GPS WGS-84 Today most of the world uses the World Geodetic System WGS-84, where 84 is the latest vision of the standard applied in 1984. It's definitely created by US and used by GPS, and apparently google uses this standard for its map."},{"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":"PR Review Feedback","link":"https:\/\/xfsnowind.github.io\/blogs\/pr-review-feedback\/","pubDate":"Tue, 16 May 2023 09:25:59 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/pr-review-feedback\/","description":"\nI do not have a good memory and cannot remember all the mistakes I made in the previous PR reviewing. Since The palest ink is better than the best memory, so let me summarize the mistakes I have made here to reminder myself, hope it may help.\nReact Necessary of useEffect? When we use the useEffect, we need to think about if it's necessary, especially for the initial mount effect. Instead of updating some values based on the dependency of useEffect, we should check if it's possible to set the value initially directly."},{"title":"Learning Notes about Image in Frontend","link":"https:\/\/xfsnowind.github.io\/blogs\/blob-buffer-arraybuffer-image\/","pubDate":"Thu, 02 Mar 2023 16:27:42 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/blob-buffer-arraybuffer-image\/","description":"\nThese days when I handle the image in the frontend, there are some concepts make me confusing. How can we handle the image when saving, uploading and transfering the files? So I want to write some notes about the learning processing here.\nWhat is Blob, Buffer, ArrayBuffer and Base64 format? How to convert them among one another? How can they be used with Image? Concept ArrayBuffer ArrayBuffer is an build-in object in Javascript that represents a generic, fixed-length binary data buffer."},{"title":"Frontend Video Learning Notes","link":"https:\/\/xfsnowind.github.io\/blogs\/frontend-video-learning-notes\/","pubDate":"Mon, 20 Feb 2023 14:20:52 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/frontend-video-learning-notes\/","description":"\nThese days I am interested at the Frontend video technologies, so did some investigation and want to write learning notes here.\nThis article would only focus on the frontend technologies, maybe I will write something about the backend in the future maybe, but let's focus frontend here. So to play a frontend html5 video\/audio, we need to get familiar with some concepts first.\nOK, let's begin from the start point, video."},{"title":"Draw a scalable line with React Konva","link":"https:\/\/xfsnowind.github.io\/blogs\/react-konva-draw-line\/","pubDate":"Wed, 15 Feb 2023 16:20:25 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/react-konva-draw-line\/","description":"\nThese 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.\nKonva Definitely we need canvas to complete it, but instead of using canvas directly, it's better to use some mature library, like Konva\nan HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications."},{"title":"Powerful type-checking of React-hook-form and Learning Notes","link":"https:\/\/xfsnowind.github.io\/blogs\/react-hook-form-notes\/","pubDate":"Sat, 28 Jan 2023 16:05:09 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/react-hook-form-notes\/","description":"\nThe 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 that time. It is because it uses React latest concept Hooks. And React was our fundamental framework in my previous company, so we didn't need to think about the compatibility."},{"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":"Learning Notes - Git rebase vs Git merge","link":"https:\/\/xfsnowind.github.io\/blogs\/git-rebase\/","pubDate":"Tue, 01 Nov 2022 20:47:47 +0800","guid":"https:\/\/xfsnowind.github.io\/blogs\/git-rebase\/","description":"\nGit merge Normally, to get the latest update from main branch during development the feature or fix branch, I would checkout to the main branch and git pull the latest commits and then checkout back and run the merge command.\n1git checkout main 2git pull 3git checkout FEATURE-BUG-BRANCH 4git merge --no-ff development 5 6or 7 8git checkout main 9git pull 10git merge FEATURE-BUG-BRANCH main It works and will create a MERGE commit in the feature branch."},{"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 - Azure Challenge","link":"https:\/\/xfsnowind.github.io\/blogs\/azure-challenge\/","pubDate":"Thu, 18 Aug 2022 13:48:36 +0200","guid":"https:\/\/xfsnowind.github.io\/blogs\/azure-challenge\/","description":"\nThis blog is about the Azure developer challenge from Sparebanken Vest. I would like to write the learning notes here.\nExplore Azure App Service Target: Learn about the key components of Azure App Service and how App Service can help you create, maintain, and deploy web apps more efficiently.\nAzure App Service So what is Azure App Service? It's a Http-based service, which would server for web application, REST APIs and mobile backends."},{"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."},{"title":"Learning Plan","link":"https:\/\/xfsnowind.github.io\/blogs\/learning-plan\/","pubDate":"Thu, 28 Jul 2022 21:56:39 +0200","guid":"https:\/\/xfsnowind.github.io\/blogs\/learning-plan\/","description":"\nThe techniques and some project I plan to learn or finish:\ngRPC vs REST -- get some knowledge of gRPC Esbuild, vite, svelte -- understand the difference of vite and esbuild, apply esbuild for develop and webpack for production webpack hotload ES6 ES7 -- get overview of ES6 and ES7 Command kitty -- get familiar with kitty Material UI -- get to know how to use material design Flutter vs React Native -- get some overview of mobile development React-hook-form website with react -- use react-hook-form to generate a full form again Hugo personal github page -- xfsnowind React long lists -- react-window, react-virtual-window Go through test framework of js, jest, react-testing-library -- review the test library of js Blog for learning geektime -- learning some topics throught geektime http headers -- go through the http headers to get an overview Regular express forward -- deep learn the regex forward again Terraform -- get knowledge of it Promise -- write promise self with different js tech until not forget it any more Kubernetes Folderflip and version 2 Google map knowledge Monorepo vs polyrepo Micro Frontend - module federation VIM Advanced GoLang Cloud Font vs SVG react list key with id Typescript"}]}}