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

About a year ago, I directly put my blog on GitHub Issues. Although few people in Taiwan do this, many Chinese developers use this method to build their blogs.

The reason why I chose GitHub Issues at that time was simple: convenience.

1. GitHub Issues perfectly supports Markdown syntax.
2. Uploading images is super easy.
3. When someone mentions your article using Issues, a reference will be automatically generated.
4. The comment system is super convenient.
5. You can use emojis.
6. You can watch the GitHub repo to receive notifications when it is updated.

In summary, I chose GitHub Issues at that time.

However, I recently discovered a big problem that I didn’t pay attention to at the beginning, which is that the SEO of GitHub Issues is extremely poor. Even if you directly search for the title of an issue on Google, you may not be able to find it.

Because this problem is quite serious, I finally moved back to Hexo.

Actually, two years ago, I had already moved my blog once, from Logdown to Hexo. But at that time, I didn’t continue to use Hexo because I thought the layout of that blog was not very good-looking.

And this time, the reason why I moved back was largely because I saw Askie Lin‘s blog. When I saw it, I was amazed and thought, “Wow, this blog is also beautifully done!” Later, I found out that it was modified using the ready-made theme Minos, so I thought I could try to switch to this theme.

After a whole day of adjustments today, I fixed a lot of things myself and tried to make the layout look the way I wanted it to. I found it quite smooth. Maybe it’s because the original code was written well, and there were no major problems in fixing it. I only changed the font size and the display of categories and article lists, and didn’t do much else.

Unless there are any unexpected circumstances, I have decided to settle down here in the future, and use GitHub as a backup place for my articles.

Long live Hexo, long live Minos 🎉

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

This is a series of three articles that I call the Session and Cookie Trilogy. The goal of the series is to discuss this classic topic from shallow to deep, from understanding concepts to understanding implementation methods. This is the last article in the series, and the complete links to the three articles are as follows:

1. Plain Talk on Session and Cookie: Starting with Running a Grocery Store
2. Shallow Talk on Session and Cookie: Let’s Read RFC Together
3. In-depth Session and Cookie: Implementation in Express, PHP, and Rails

The first article talks about Session and Cookie in plain language without too many technical terms. The second article directly looks at the three RFCs of Cookie to understand what Session is, and also supplements some knowledge related to Cookie. This article will delve into Session and take a look at three different Session implementation methods.

These three are Node.js Web framework Express, PHP, and Ruby on Rails. I chose these three because their implementation of Session mechanism is different, and I think they are suitable objects for reference.

Read More

Introduction

This is a series of three articles, which I call the “Session and Cookie Trilogy”. The goal of this series is to discuss this classic topic from shallow to deep, from understanding concepts to understanding implementation methods. This is the second article in the series, and the complete links to the three articles are as follows:

1. Plain Talk on Session and Cookie: Starting with Running a Grocery Store
2. A Brief Discussion on Session and Cookie: Reading RFC Together
3. In-depth Session and Cookie: Implementation in Express, PHP, and Rails

Read More

Introduction

A few days ago, I posted an article on Medium titled Medium Chinese Writers’ Follower Ranking and Unprofessional Data Analysis, in which I used Node.js to write a simple web scraper and analyzed the data.

Although I briefly mentioned the data source of the web scraper in the original article, I did not elaborate much on the technical aspects. In fact, I encountered some difficulties while writing the Medium web scraper. Instead of teaching everyone how to write a Medium web scraper, I think it would be more interesting to share my experience and the solutions I found to the problems I encountered while writing the web scraper.

Therefore, this article is intended to document my experience of writing the Medium web scraper, and also includes some tutorial elements. After reading this article, you should be able to write a similar web scraper, or at least not be confused when looking at the source code.

Although the web scraper I eventually wrote was related to user data, I actually started with the article list because I had a need to scrape all of my own articles.

The reason for this need is that the built-in functionality of Medium is actually quite poor. It is difficult to find all the articles posted by an author, or it is difficult to see them at a glance. Therefore, early articles were difficult to find except through Google.

So I manually created an index of articles and organized all the articles I had previously posted. But as an engineer, this is clearly something that can be done with code! So I wanted to try writing a web scraper for the article list.

Read More

Introduction

There are many HTTP Status Codes that we are all familiar with, such as 404 Not Found, 500 Internal Server Error, and 200 OK, among others.

Among the many status codes, there is one that is clearly meant to be humorous: 418 I’m a teapot.

But did you know that it is not part of the HTTP standard, so it is not a standard HTTP status code? You might say, “I’ve read the RFC, how can it not be?” But that RFC has nothing to do with HTTP, and many people have not noticed this.

I didn’t notice this at first either, and I thought 418 was part of the HTTP standard until someone posted an issue on Node.js’s GitHub in August 2017: 418 I’m A Teapot.

The issue mentioned that they wanted to remove support for 418, and when the author of the issue was told that Go was doing the same thing, they also posted an issue on Go.

At the time, the request to remove the 418 status code actually caused quite a stir, and most people were actually against removing this status code. There was even a save418.com created to try to save 418.

Recently, I spent some time studying the whole thing, and in the process of organizing it, I found that whether you are for or against it, the reasons behind it are worth thinking about, so I summarized it into an article to share with everyone.

Read More

Introduction

Recently, I created a small game called Lidemy HTTP Challenge to help my students become more familiar with HTTP and API integration. The game requires players to obtain the correct token according to the instructions of each level. There are a total of fifteen levels, with the first ten being basic and the last five being advanced.

After some testing by friends and some adjustments and improvements, I let my students test it and found that the response was good. So I officially released this game to the front-end community so that everyone could participate.

If you haven’t played it yet, I strongly recommend that you don’t read this article because it will spoil the fun of playing the game (like a movie spoiler). I suggest you play it first, then come back and read this article to get a different experience.

Next, I will talk about the process of creating this game and the design of each level.

Read More

Preface

Recently, I started my teaching project again. In the first phase, I wrote this article: Using Github Classroom and Travis CI to Build a Homework Submission System. In the second phase, I wrote this article: AWS Lambda + GitHub API + Google Sheet = Automatic Sign-in System. Both of them use existing tools to quickly create systems that meet my needs.

Before the third phase, I hoped that the course could have a discussion forum where students could easily ask questions. I have always used Slack, but the biggest disadvantage of Slack is that the free version eats messages, and many good information is washed away, which is a pity. I hope there is a forum or discussion forum that would be better.

Two years ago, I also wrote an article: Self-hosted Forum Solutions: Flarum, Github Issue, NodeBB, Discourse, studied several solutions, and finally chose GitHub Issue. Because it is the simplest and most convenient, but the biggest disadvantage is that students don’t seem to be used to it, because it doesn’t look like a forum when you look left, right, up, and down.

Read More