Introduction

While making some performance adjustments at work, I accidentally discovered a strange phenomenon. After investigating further, I found a bug that seemed to have gone unnoticed by anyone, and I found the cause quite interesting. So I thought I’d write a post to share it with everyone.

This post is not very technical, so you can read it with a story-telling mindset, which will make it more interesting.

The Beginning of the Story

The origin of the story is that I was making some adjustments to a website at work, trying to improve its loading speed. When it comes to performance optimization, there are many things that can be done. For example, with regard to the server, the following are more relevant:

1. Use HTTP/2
2. Use gzip or brotli for compression
3. Use Cache (to speed up revisits)
4. Use CDN
5. Reduce TTFB time

However, all of the above require assistance from the backend or SRE, and are not very relevant to the frontend. With regard to the frontend, there are many aspects to consider. For example, from the perspective of “reducing resources,” the following can be done:

1. Image format adjustment (compression + webp or other formats)
2. JS size (ugligy, code splitting, dynamic import)
3. CSS size (minify, remove unnecessary CSS)

From the perspective of “accelerating the loading of important resources,” preload or preconnect hints can be added to indicate to the browser which things should be loaded first.

You can also look at it from the perspective of “reducing JS execution time.” For example, if you are writing React, you can use shouldComponentUpdate, PureComponent, or memo to reduce unnecessary re-renders.

Since the title of this post is “styled components,” the main topic is, of course, centered around CSS.

Read More

Introduction

To learn something new, it’s not very useful to just read about it. The best way is to get your hands dirty and start doing it. Since React hooks had just come out when I was about to leave my previous job, I had never written hooks before, only seen some basic tutorials. But after starting my new job, I finally started writing function components + hooks.

Although I initially missed the class syntax, I found hooks to be quite good after writing them for a while. In the process of using hooks, I also encountered some common problems that people who are new to them often face. After careful study, I found that the case I want to discuss in this article is quite good. If you can understand this case, you should be able to grasp the fundamental differences between class and function components. Therefore, I wrote this article to record my experience.

By the way, if you have been writing function components for a while, are quite used to hooks, and have read the official documentation and Dan Abramov’s articles carefully, you probably won’t gain any new knowledge from this article. This article is suitable for those who have just switched to function components and are not sure what the differences are between them and class components.

Read More

Introduction

If you have written functions in other programming languages that are not first-class, you may experience some pain when writing JavaScript and wonder what you are doing - at least that’s how I feel.

When I first discovered that functions can be passed around as parameters, I had to think hard about more complex code, and other behaviors of functions also confused me, such as the fact that functions are also objects, and what exactly is this.

This article mainly wants to share some interesting aspects of functions. However, it is too boring to start talking about a lot of knowledge directly. I hope to arouse everyone’s curiosity about this knowledge. The best way to arouse curiosity is to provide a “question that you will also be interested in”. You will have the motivation to continue reading.

Therefore, the following uses a few small questions as the opening. Although they are in the form of questions, it doesn’t matter if you can’t answer them. If you are interested in the answers to these questions, please continue reading. If you are not interested, just go straight ahead and turn left at the end.

By the way, the title of this article was originally intended to be called “How much do you know about JavaScript functions” or “Interesting JavaScript functions”, but these titles are too boring, so I thought of this light novel-style (?) title.

Read More

Introduction

If there is one concept in JavaScript that is important and commonly used but often confused by beginners, it is undoubtedly “Asynchronous”. Compared to other concepts such as this, closure, prototype, or hoisting, asynchronous is used much more frequently in practical development and is often a pitfall for beginners.

Is asynchronous really that difficult?

I don’t think so. As long as you follow a correct context, you can gradually understand why asynchronous is needed and how it is handled in JavaScript.

I actually wrote about a similar topic four years ago, but looking back now, it was not well written. Therefore, four years later, I am revisiting this topic and hoping to write a better quality article to clarify the concept of asynchronous.

Before writing this article, I referred to the official documentation of Node.js and found that it actually explains asynchronous quite well. Therefore, this article will start with a similar approach to discuss this issue. If you don’t know Node.js, it’s okay, I will provide a brief introduction below.

It is recommended that you have a basic understanding of JavaScript, know how to use JavaScript to manipulate the DOM, and know what ajax is before reading this article.

Let’s get started!

Read More

Introduction

In recent years, front-end frameworks have been flourishing, and many beginners who have just learned JavaScript have directly learned the three major frameworks (although React is not a framework, the entire ecosystem is actually no different from the framework, so I think it can be classified as a framework).

These three major frameworks are usually used to write SPA (Single Page Application). I have always believed that some basic knowledge should be possessed before learning these frameworks, especially the understanding of front-end and back-end. Otherwise, you will definitely encounter many problems that you don’t know where to start.

Therefore, this article uses a problem that I have encountered myself and that students often come to ask me as an example. You can also think about whether you can answer this question:

Suppose I have an SPA, using a library of some routers to implement routing, so /list will go to the list page, and /about will go to the about me page.

But strange, when I uploaded the SPA to GitHub Pages, the homepage is good, and when I go to /list from the homepage, it is also good, but when I refresh /list, it shows 404 not found. Why is this?

To answer this question, you must first review some basic knowledge related to front-end and back-end networks.

Read More

(The original article was written on Medium, and I’m backing it up here.)

Although I have always been clear about my preferred learning methods and paths, and have turned what I think is suitable into a course outline for teaching, few people seem to look at that outline, and it does not explain the reasons behind it in detail. Therefore, I feel it is necessary to write this article to describe what I think is a “solid” front-end learning path.

Read More

Introduction

Recently, a student asked me a question about the difference between keyPress and keyDown events in React, as well as the difference between keyCode and charCode. Sometimes, they could get the values, but sometimes they couldn’t, and they were confused.

At first, I thought React had done some processing, so I looked at the source code. Later, I found that React did indeed do some processing, but in fact, this problem had nothing to do with React. The difference between keyPress and keyDown is a native JavaScript event mechanism.

Although this problem has nothing to do with React, it is still a good thing to be able to refer to React’s implementation through an actual problem, and React’s comments are well written.

Therefore, this article will first show you the differences between these two events, and finally, we will see how React handles them.

Read More

Introduction

In JavaScript, there is a topic that is very difficult for beginners and even experienced developers to fully understand: “What is this?”. As a front-end engineer who uses JavaScript as a tool for a living, I have been struggling with this issue for a long time.

I originally thought that I would never write an article about this.

There are two reasons for this. First, there are already a lot of articles explaining this topic, and each one is written very well. After reading the What’s THIS in JavaScript ? series, I felt that the explanation was very complete. If I am not confident that I can explain it more clearly or from a different perspective, it seems unnecessary to write another article. The second reason is that if you want to “completely” understand this, the cost may be much higher than you think.

Read More

Introduction

In terms of CSS architecture, there are three mainstream methods: OOCSS, SMACSS, and BEM. The purpose of introducing these architectures is to make CSS easier to maintain. You can refer to @arvinh’s Introduction to CSS Methodology and Atomic CSS for an introduction and comparison of these methods.

However, today we are not going to talk about the above three methods, but another method that is not as mainstream (but seems to be slowly gaining popularity) and is not easily accepted at first glance: functional CSS.

Read More

Introduction

A few days ago, I read this article by Dan Abramov, the creator of Redux: Things I Don’t Know as of 2018. After reading it, I felt quite touched. I had been thinking about things related to confidence recently and had made a simple summary in Can I Be Called a Senior Engineer Two Years Later?.

Coincidentally, I also saw some updated learning roadmaps for 2019 these days. Some comments still say things like “Why do front-end developers have to learn so much?” “How can we learn everything?” “Front-end is so difficult,” etc. Although these two things seem unrelated, I think they are actually related.

Read More