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

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