Jamie's tech blog-DingYu的一些筆記

[Frontend Note] What are macrotasks and microtasks in the EventLoop

Use macrotasks and microtasks to fully understand asynchronous behavior in Javascript

When asynchronous behavior is mentioned in Javascript, names like `setTimeout`, `Promise`, and `async/await` immediately come to mind. However, while learning about V8 and the browser recently, I realized that although these three are all asynchronous on a macro level, they are actually quite different on a micro level.

Posted byJamie Monday, October 31, 2022

[Frontend Note] Frontend performance optimization from the browser's perspective

Analyzing frontend performance optimization through the browser rendering principles

After the browser receives the HTML data from the Network Process, it hands it off to the Render Process for rendering. From a frontend engineering perspective, performance optimization is about tuning the code during the Render Process rendering to speed up rendering.

Posted byJamie Wednesday, October 26, 2022

[Frontend Note] What happens after entering a URL in the browser?

Walking through the page loading flow from Chrome's multi-process architecture

A common interview question — what actually happens when you enter a URL? Walking through Chrome's multi-process architecture, the network request, and the rendering flow.

Posted byJamie Tuesday, October 25, 2022

[Frontend Note] Path Aliases in Typescript + Webpack5 + Jest

How to set up Typescript, Webpack and Jest path aliases once and for all in a project?

In a project I originally only used path aliases in webpack, but vscode still couldn't resolve those paths, and Jest unit tests had the same issue. Eventually I found that Typescript and Jest each need their own alias configuration.

Posted byJamie Wednesday, October 12, 2022

[Frontend Note] How Vue implements reactive data

Combining Virtual DOM, data hijacking, and side effect functions to implement reactive data in Vue

Since Vue3 was released, many people have shared that they are often asked in interviews: 'What is the principle of reactive data in Vue2 and Vue3?' This article references a book published by the Vue team to implement Vue's reactive data.

Posted byJamie Thursday, October 6, 2022

[Frontend Note] Smoother multilingual frontend development with i18next/vue-i18n + Typescript

When the translation files get large and have lots of keys, Typescript can help!

I previously took over a frontend project with Chinese, Japanese, and English versions, where the translations had multiple levels of nesting. It was easy to mistype a single character during development, causing i18n to fail to find the key and the wrong text to show on screen.

Posted byJamie Friday, September 30, 2022

[Frontend Note] Conventions for a Vue project

Project setup: Vue3+Typescript+Webpack5+Eslint+Prettier

How to configure ESLint+Prettier in a Vue3+Typescript+Webpack5 project?

Posted byJamie Sunday, September 18, 2022

[Frontend Note] Conventions for a React project

Project setup: React+Typescript+Webpack5+Eslint+Prettier

How to configure ESLint+Prettier in a React+Typescript+Webpack5 project?

Posted byJamie Wednesday, September 14, 2022

[Frontend Note] Frontend engineering: ESLint + Prettier

Set up ESLint and Prettier as the foundation of your frontend project conventions

When working on a frontend team, having a basic set of conventions established up front makes code more readable, easier to maintain, and reduces friction during code review.

Posted byJamie Saturday, September 10, 2022

[Frontend Note] Two-timing the frontend: from Vue to React, the basics

Things to watch out for when crossing from Vue3 into a React project

Most of my work projects use Vue, and I'm pretty used to writing Vue. But people always look at the other bowl while eating from their own --- the freedom of React's JSX style has caught my eye too.

Posted byJamie Wednesday, August 10, 2022

Jamie's tech blog