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

Introduction

Recently, I started a side project called Lidemy Mentor Program, hoping to train students to become employable engineers within four months.

As Git is one of the essential skills for engineers, it is reasonable to use Git to submit homework and cultivate students’ familiarity with Git.

But the question is: how to submit homework using Git?

Read More

Recently, while refactoring a project at my company, I tried some things and found that I didn’t really understand React’s rendering mechanism and when render would be triggered. Later, I found that not only me, but many people were not familiar with the whole mechanism, so I decided to write this article to share my experience.

Actually, it’s not too bad if you don’t know how to optimize, but the worse thing is that you think you’re optimizing, but you’re actually slowing down performance, and the root cause is that you’re not familiar enough with the whole mechanism of React. The “optimized” component is slower! This is serious.

Therefore, this article will cover the following topics:

1. The difference between Component and PureComponent
2. The role of shouldComponentUpdate
3. React’s rendering mechanism
4. Why use Immutable data structures

To determine how much you understand the above, let’s take a few quizzes right away! Some of them have traps, so please keep your eyes open!

Read More

Introduction

I have been interested in RxJS for quite some time. I first learned about it through redux-observable, a middleware for Redux that Netflix uses to solve complex asynchronous problems. At that time, I hadn’t even figured out redux-saga, and I didn’t expect another new thing to come out.

Half a year ago, I spent some time searching for information on the internet, trying to understand the whole thing. However, for me, many of the tutorials were either too fast-paced or too detailed, making it difficult for beginners to follow.

This time, I had the opportunity to try to introduce redux-observable into a new project at work. As someone who advocates for its adoption, I must have a certain understanding of this thing. With this idea in mind, I spent some time last week studying the relevant resources again and gradually came up with a method of “I think I can explain RxJS more clearly” and share it with you here.

Before we begin, I want to give a big shoutout to last year’s iT 邦幫忙鐵人賽 Web group champion: 30 Days to Master RxJS. This series of articles is very comprehensive, and you can feel that the author has put a lot of effort into it. If you are interested in more applications after reading this article, you can read the entire series of articles.

Okay, let’s get started!

Read More

Introduction

I came across an article on Hacker News about Payment Request API — Now Being Implemented in All Major Browsers, which means that Payment Request API will be implemented in mainstream browsers.

Before that, I had never heard of it and had no idea what it was doing. But after a little research, I found out that it is the future of web payment interface.

Read More