When I work in the frontend, we can always release any change whenever we want (the only risk is that during the release, there might be…
Sometimes SEO (Search Engine Optimization) seems a bit far from technical stuff, and in many companies, SEO is in the marketing's scope. It…
Graphql has its own type system, and converting it to typescript will make life easier. There are many tools to do that, including graphql…
Strangler pattern is a useful pattern when we refactor the code base behind without touching the API. Recently I have touched two totally…
Recently I am working on a refactor of api. Doing the API in the right way might slightly bring performance issues, so I have worked on the…
Improving web performance sounds easy, but it's a difficult subject because it's not easy to find ideas for the improvement. In this article…
With NextJS, it's not easy to detect if a piece of code (for example, lodash) is really included in the JS bundle for two reasons: Code is…
Periodically QA testing is a very important way to monitor the website's healthiness. It's one of the most efficient and the most rapid ways…
It's a small article about a recent learning on how to choose a technical solution, which works well in my life when I take non technical…
Recently we met a problem of a disappearing element on the web. Finally we found that it is because of a lack of data from graphql query…
I have been working on front-end development for more than 4 years, and I keep learning technical things (you can check my blogs as evidence…
Customized hooks are like helper functions in React, they encapsulate logics with different React native hooks: useState, useEffect…
Several practical ways to improve site performance with React. For months, we have worked on web performance for our site. It is a tough…
Some quick FAQs to share my test results. 1. Does then clean up function only occur on componentUnMount? No. It occurs not just when a…
It is a summary on how to use children props, HOC (Higher Order Component), and render props to create layout components. They are not…
Dependencies make tests complicated. Mock them help us concentrate on the things we really want to test. There are two possibilities of…
Read this article on medium In this article, I will talk about writing test for react component, connected component, hoc, react hooks…
React.Lazy is a React official API for lazy load component / dynamic import bundle. In this article, I will show a real simple example on…
Intro In the beginning of development with React, Redux has been a great tool for managing data with certain drawbacks. The drawbacks…
As a big fan of Hong kong films, I had always wanted to make a website for it, mainly for myself, to list all the Hong kong films from 197…
Read this article on medium React.memo, PureComponent, React.useMemo, React.useCallback are React APIs for optimizing web performance…
This is a research project for discovering the possibility of tracking web performances with Google Analytics. In this project, we have…
Cypress is a popular end to end test tool. It can be used to test on localhost during the development, and it can also be used to test the…
Read this article on medium A design system should serve two things: export shared components, and show what shared components we have. In…
Some data should be shared throughout the whole application, for example, the site language, the device size. A common solution is to use…
According to Gatsby, data is something outside of the component. React doesn't have its officiel way to fetch and manage data, and it only…
As mentioned by the first part of tutorial from Gatsby: Components become the base building blocks of your site. Instead of being limited to…
Recently I remade my blog with GatsbyJS. The main reason is that I don't want to create blog by writing html anymore. Gatsby has its support…
A questionnaire about the agility in the development team. Development and delivery 1. How do you test in your team ? 0 - Manual test…
It is quite useful to create our own callApi method in the application. In this article, I will talk about three ways to implement it with…
Form is one of the most important part in web application. When we work with a form, there are so many things that are quite similar, for…
In order to work with react, we need an environment for compiling es6 and jsx, besides that, we need to support import css and images into…
Working in a development team is quite different from working alone or working with only one person. Without shared configurations, rules…
Thanks to the experience in La Maison du Bitcoin, I had the opportunity for designing the whole website and then implementing it. In this…
During the last two months, I did an internship as a front-end developer for Angular. The project is well-structured, and strictly follow…
Recently, I start to discover the common practice for web design and web development. I find that almost all the articles about web design…
It is my note about how to deploy node server to DigitalOcean. 1. Create a virtual server in DigitalOcean DigitalOcean provides service for…
Recently one of our customer asked us to use https instead of http for their node based website. The logic is simple: buy the ssl…
MEAN stack(MongoDB, Express.js, AngularJS, Node.js) is a very inspiring topic nowadays for front-end developers, because we can become full…
It is a demo for une application full-stack with NodeJS and PassportJS. The demo supports login, signup and forget password. The…
First of all, what is gulp? Gulp helps front-end programmers enhance their workflows, but how? Gulp have a lot of plugins to help front-end…