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

Preface

Two years ago, I wrote this self-reflection of a junior engineer at the end of the year, mainly to review what I had learned that year and express my thoughts and feelings, and raised some questions about my career development.

The reason why the title is “junior” engineer is that at that time I felt that I couldn’t even touch the edge of being a senior engineer, so I used the word “junior” to describe myself.

Two years have passed, and my job title has changed from engineer to senior engineer, and even further to Front-end Team Lead. Although job titles don’t represent everything, I think they at least “represent something”. When you reach that position, you must take responsibility. If you feel that your ability is not enough, you must try your best to catch up until you can take on that responsibility.

This article will first review my development in the past two years, and finally share some of my thoughts and feelings.

Before that, I would like to wish all readers a happy new year!

Read More

Introduction

Please forgive me for using a somewhat sensational title, because I really can’t think of any other title that is better. In the end, I chose a controversial title, but it is also interesting to use such a title to stimulate discussion. Moreover, what I said is based on facts.

Before reading this article, please read the previous article: I know you understand hoisting, but do you understand it deeply?, because the content of the article is partly related, so you must have the concept of Execution Context and Variable Object before you can absorb the content of this article.

If you are only interested in the sentence in the article title: “All Functions are Closures”, you can scroll down directly, because to talk about closures, we must start with scope, so this article will not be too short according to convention, and there will be a certain degree of elaboration in the front.

Okay, let’s start with scope.

Read More

Preface

Supplement on June 9, 2021:

Thanks to the reader blackr1234 for leaving a comment. This article was published in November 2018, and the output results of the code below are probably based on Node.js v8.17.0, so the output of some situations may be different from now. For example, accessing the let variable before declaration, the result at that time was: ReferenceError: a is not defined, and the result using Node.js v14 now is: ReferenceError: Cannot access 'a' before initialization.

Recently, I have been busy with some teaching-related things, and after preparing some materials, I taught my students about hoisting in JavaScript, which is the concept of “lifting”. For example, the following code:

console.log(a)
var a = 10

will output undefined instead of ReferenceError: a is not defined. This phenomenon is called Hoisting, and the declaration of the variable is “lifted” to the top.

If you only want to understand the basics of hoisting, it’s almost like this, but later I also taught some knowledge related to let and const. However, the day before I just finished teaching, the next day I immediately saw a related technical article and found that I had taught it wrong. Therefore, I spent some time planning to understand hoisting well.

Many things may not seem like much before you delve into them. You will find that you still have a lot of concepts that you don’t understand when you really jump in and look deeply.

Many people know hoisting, but the degree of understanding is different. I have listed 10 items. If you don’t know any of them, congratulations, this article should bring you some gains.

1. You know what hoisting is
2. You know that hoisting only lifts declarations, not assignments
3. You know the priority of hoisting when function declarations, function parameters, and general variable declarations appear at the same time
4. You know that let and const do not have hoisting
5. You know that the fourth point is wrong, in fact, there is hoisting, but the expression is different
6. You know that there is a concept called TDZ (Temporal Dead Zone) related to the fifth point
7. You have read the ES3 specification and know how it is described inside
8. You have read the ES6 specification and know how it is described inside
9. You know the principle behind hoisting
10. You have seen the code compiled by V8

You may ask, “Why do I need to know so deeply? What’s the use?” In fact, I also think that for hoisting, it is enough to know the basics. As long as you declare variables properly, even if you don’t know those, it will not have much impact on daily life or work.

But if you, like me, want to put “proficient in JavaScript” on your resume one day, you cannot escape these things. At the same time, if you are more familiar with these underlying details, you will encounter fewer problems, and you will also understand why hoisting appears. When you want to go further and climb higher on the technical road, I think these details are very important.

Next, let’s take a look at hoisting step by step!

Read More

Preface

Recently, I was busy with the product redesign of my company, switching from the original PHP to backend Go + frontend React SPA. It was divided into two different projects, desktop version and mobile version. Since we were redesigning, we naturally wanted to include the latest and coolest PWA in our goals. Although I had heard of PWA for a long time, I had never implemented it before, so I had the opportunity to try it out.

Now that the product has been redesigned and has been online for two or three months, it has gradually stabilized. In the process of optimizing PWA, I have gained some experience that I can share with everyone.

Before giving some practical examples, let’s talk about what PWA is.

Read More

Introduction

During the past year, I have conducted several teaching experiments in my spare time, hoping to improve my teaching materials through continuous teaching and gain some insights from student feedback.

When conducting these teaching experiments, I often think about which existing services can reduce my workload. After all, as an engineer, I want to automate some trivial tasks, and the time saved in the long run is considerable.

Half a year ago, I made my first attempt and shared my experience here: Using Github Classroom and Travis CI to Build a Homework Grading System. After having an automated homework grading system, it did save me a lot of trouble.

This time, I want to share an automated sign-in system that I implemented in about one or two days two weeks ago.

Read More

Introduction

CORS (Cross-Origin Resource Sharing) has always been a classic problem in front-end development. Simply put, due to some security considerations of the browser, you will encounter some restrictions when loading resources from other domains. The solution is simple, just add some response headers such as Access-Control-Allow-Origin on the server side. With this header, the browser will recognize that you have been verified and there will be no problem.

I have written an article about this problem before: Understanding Ajax and Cross-Origin Requests, which details the problems encountered and their solutions.

I thought that since I had delved into this problem last time, CORS would never be a problem for me again, and I would never see the error of “forbidden to access cross-origin” in the console.

But I was wrong.

This time, I stumbled in a specific use case, but I also learned a lot from it. This experience also reminded me of what I wrote before: The most difficult cookie problem I have ever encountered.

Great, there is something to share with you again!

Read More

Introduction

Originally, I was planning to write about the differences and implementations of shallow and deep copying. However, while researching, I stumbled upon articles related to call by value and call by reference, and the more I delved into it, the more interesting it became. I thought I had understood this issue, but the more I read, the more confused I became.

There are two ways to write this article. One is to record in detail my process of researching this issue, my doubts, and how I arrived at a solution, essentially writing in chronological order. The other is to organize my findings and express them in a simpler and more understandable way.

In the past, I have mostly taken the second approach, reorganizing and summarizing my findings to write an article that is relatively easy to understand, leading readers step by step through my thought process to arrive at a solution.

However, this time I want to try the first approach, taking readers through the materials I usually read when writing articles and explaining my thought process. This should be quite interesting.

Let’s go!

Read More

Introduction

Although I’ve heard about React replacing its internal reconciler with something called Fiber for a long time, I’ve never studied it in detail and didn’t know what impact this change would have on higher-level components.

I only began to understand it more deeply when I encountered a related bug while using Redux Form. I learned that since React officially switched to Fiber, there have been some changes to higher-level components.

The title of this article, “A Brief Introduction,” is not a lie. I won’t talk about the underlying operation of Fiber (because I haven’t studied it seriously yet). I will only use plain language to explain what Fiber is, what problems it was created to solve, and its impact on React lifecycles.

Read More

Introduction

I recently came across this article on Hacker News: Show HN: A CSS Keylogger, which opened my eyes and inspired me to study it in depth and write an article to share with everyone.

This article will cover the following topics:

1. What is a keylogger
2. The principle of CSS keylogger
3. CSS keylogger and React
4. Defense methods

Alright, let’s get started!

Read More