My blogs website

As a developer, I like learning and sharing new technology. However, I find it wastes a lot of time to copy my notes and post them on blogs websites like medium. So, I decided to create my own blog site.

My blog site should publish my notes automatically, without posing them by hand. That means, when I take some notes, these notes should be presented on my blog sites without extra action. Awesome, right? Let’s do it.


Before coding, let’s think about what I gonna build.

First of all, I need a place to store my notes. Github is the…


Nowadays, there is so much information around us. It’s impossible to read all of them. String matching algorithm becomes indispensable. It helps us grab the pieces we want.

There are so many algorithms to do that. I’ve found KMP is the most efficient one and “easiest” to understand. I would like to share it with you.


Before talking about KMP, let’s understand how to get a string match. There are 2 strings, the Main string, and the Pattern string. We need to find the pattern in the main.

We check both of them, character by character. …

a sliding block controlled by mouse


Nowadays, more and more animation is applied on Front-end. It’s interesting to understand how JavaScript controls the animation.

In this article, I will talk about:

  • what is the animation in the browser
  • how to build a timeline
  • how to build an animation
  • how to control a timeline (pause / resume)

Animation in browser

Animation is a method in which frames are manipulated to appear as moving images. In browser, we can write a function to move images, and call this function repeatedly to achieve animation.

There are 3 ways.

setInterval : It can repeatedly call a function or executes a code snippet, with…

In Front-end Development, one of the most important and cumbersome parts is State Management. Although there are a lot of awesome tools, such as NgRx, Redux, Vuex, etc, it’s still hard to understand and use them in the project.

Inspired by the Simple App State Management of Flutter, I wrote a similar one in TypeScript. The aim is to help beginners understand the state management, and learn the more powerful state management tools.

The state management tool I wrote focus on a simple situation: add an item and show it on the lists in different components. …

Because our company chose Angular as the front-end framework, I started to using TypeScript instead of JavaScript. Now, I completely love TypeScript. It gives us some powerful weapons that JavaScript can’t provide:

  • Type System: TypeScript consistently checks variables’ type. This feature significantly lowers the chance of bugs
  • OOP: Although JavaScript has class since ES6, it still lacks a lot of useful concepts, such as abstract class, interface, generic, etc. These existed in TypeScript.
  • meta programming: TypeScript provides decorator , which can add extra configuration or extra logic to a function or a class. …

Introduction: [Toy Browser] Introduction

Previous article: [Toy Browser] HTML parsing and CSS computing

Keywords: CSS, DOM Tree, image rendering

In previous article, the toy browser parsed and tokenized a HTML file. After that, it built a DOM Tree mounted with all the computed CSS rules. A question is remained: How to render a div having a CSS flex: 1 ?

In this article, the last one of toy browser series, I will resolve this problem, and render an image from DOM Tree.

CSS Layout

There are several kinds of CSS layouts:

  • Normal flow
  • Flexbox
  • Grid layout

To make the toy browser simple…

Introduction: [Toy Browser] Introduction

Previous article: [Toy Browser] HTTP Request and Response Parse

Keywords: HTML, CSS, DOM Tree, Finite-state machine

In previous article, toy browser can send a request to the server, receive its response, and parse the response. Now, HTML file is extracted. Next step, we need to create a DOM Tree by parsing HTML. It’s the most tricky and interesting part of toy browser. The codes of HTML Parser will help you understand it. In general, the HTML Parser does following things in the order:

  1. parse HTML character by character
  2. tokenize HTML tag by tag
  3. create the nodes…

Introduction: [Toy Browser] Introduction

Keywords: HTTP request and response, Finite-state machine, response parse

As we have discussed in previous article, the first step of creating a toy browser is to establish connection with the server and parse the response. In specific, the toy browser should ask the server a response, and extract the HTML file from it.

Therefore, before getting started, we need to prepare a server. I used node.js to create a simple one.

As a web developper, my daily work is to present data in the browser. Browser, I use it everyday, but how does the browser work ? I don’t really understand.

To learn it, I created a toy browser. It can send a http request, receive the response, and render the response.

There will have several articles to show the toy browser, and this one will give a quick introduction and set up of the toy browser.

Shout out to wintercn. I learned the toy browser from his videos.


When we want to visite some websites, we use a browser. We…

the comparison between Flutter and Angular

It’s common that a company needs not only the web, but also the mobile application to present its products. Building the mobile app can be cumbersome because we need to target 2 platforms, IOS and Android. Now, Flutter solves this problem for us.

Flutter generates both IOS and Android App at one time. We don’t need to create the same app twice just for 2 different platforms. The application is native. That means the performance of the app is just like the native IOS or Android apps. Because of these 2 advantages, the developer can build the high qualified mobile…

Jijie Liu

Developper in Paris, interested in Big Front-end, Full Stack, Explainable AI. Try to introduce AI into Full Stack workflow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store