Reading

Catergroy

Miscellany
Angular
User Interface
JavaScript

User Interface

Remix Icon, an open source icon library, link.

JavaScript

Best practices on Node.js, github repo.
List of (Advanced) Javascript Questions, helps you to understand JavaScript deepeer, doucment link, which updated weekly.
Basics about how the Turbofan works as an optimize compiler in v8 engine, video link.
Inside look at modern web browser: This is a 4-part blog series looking inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you, here is the first article.

Angular

Understanding Zone: on how zones works, link. There are many articles in this series.
Change Detection in Angular: detail explanation on how Angular dirty check works, link.
zone helps angular to better performance: link1, link2.
Compodoc: Generate a static documentation site to illustrate the Angular Project, a wonderful but powerful tool, link.
Angular Tools for High Performance: This post contains a list of new tools and practices that can help us build faster Angular apps and monitor their performance over time. Article.
Managing State in Angular Applications using NgRx: Article.

Miscellany

Password hashing: Which encryption you want to use to hash the account password? article.
WebGL fundamentals, an amazing collection of articles that teach WebGL from ground up. website.
Change And Its Detection In JavaScript Frameworks, a small peek on how frontend frameworks managing the synchronization of app state and the UI parts, link.
A blog on how to create a garbage collector, written in C.
On event loop.
- The must-watch talk on event loop, youtube video
- The wonderful illustration on Event Loop from IBM, blog.
Learning v8: a Github project help for understanding V8 internals, link.
Change Detection Reinvented Victor Savkin: a talk on change detection upgrade from Angular 1 to Angular 2, youtube video.
项目脚手架: 利用node开发类似于vue的项目脚手架，微信文章.
I18n Translation Search, a website for you to enhance your i18n locale text, web link.
An ideal project structure for express.js server project, article.
Scalability problems in nodejs project, and how to solve them, article.
Demystifying Containers 101: deep dive into container technology for beginners, article blog.
Use background-image wisely: An article explains the anti pattern uning background-image, and it usggests a better way using <picture> and object-fit. Relative article on image compression

Contemporary Front-end Architectures: An article on how the Front-end architectures evolves. It started with original MVC and explored famous desktop pattern, then moved to Web application and applied same principles to arrive at popular patterns. Over the course, it then moved to early independent client-side patterns before fully discussing SPA frameworks. The important take-away is that today’s front-end frameworks are component oriented and they abstract away MVC/MVVM concerns as just one of the aspect while addressing newer environments and challenges.

<!-- bad -->
<div style="background-image: url('/some/man-with-a-dog.jpg');
            background-size: cover;">
</div>

<!-- good -->
<picture>
  <img src="/some/man-with-a-dog.jpg"
       alt="Man with a dog"
       style="object-fit: cover;"
  />
</picture>

<!-- using object-fit   -->
<picture>
  <source
      srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
              /some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
              /some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
              /some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
      sizes="100vw"
      type="image/webp"
  />
  <source
      srcset="/some/_1170x658_crop_center-center/man-with-a-dog.jpg 1170w,
              /some/_970x545_crop_center-center/man-with-a-dog.jpg 970w,
              /some/_750x562_crop_center-center/man-with-a-dog.jpg 750w,
              /some/_320x240_crop_center-center/man-with-a-dog.jpg 320w"
      sizes="100vw"
  />
  <img
      src="/some/man-with-a-dog-placeholder.jpg"
      alt="Man with a dog"
      style="object-fit: cover;"
      loading="lazy"
  />
</picture>

Detect the incognito mode: Though Chrome provide the FileSystem API using memory in incognito mode, there are still some ways to detect it, like i/o timing, and file volume size.
The real difference between CI and CD: article
Build your own React: This great blog goes through from the beginning of how react works (creating elements, fiber reconsiling, etc), which is very helpful if you want to understand react well.