Image for post
Image for post
a sliding block controlled by mouse

Introduction

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.

: It can repeatedly call a function or executes a code snippet, with a fixed time delay between each call. …


Image for post
Image for post

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. …


Image for post
Image for post

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 since ES6, it still lacks a lot of useful concepts, such as , , , etc. These existed in TypeScript.
  • meta programming: TypeScript provides , which can add extra configuration or extra logic to a function or a class. …


Image for post
Image for post

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 having a CSS ?

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, I will focus on Flexbox, which is very useful in daily work. There is an awesome article that explains how Flexbox works: A Complete Guide to Flexbox. If you are not familiar with Flexbox, please read it. The code of the function will help you to understand this part, too. …


Image for post
Image for post

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 of DOM Tree from the tokens, and mount the nodes on the…


Image for post
Image for post

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 to create a simple one.

Image for post
Image for post
simple server created by Node.js

The server will put a html file into the body of a response, and sent it back to the client when the client asks for one. …


Image for post
Image for post

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.

Introduction

When we want to visite some websites, we use a browser. We enter the url of the website, and wait for the homepage presented in the browser. Well, this scenario includes the basic functions of a browser. …


Image for post
Image for post
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 app quickly, and let the company decides whether they need to go further on building mobile app. …


Image for post
Image for post

After a quick setup of the Angular + Symfony Application, the first feature I want to create is the login system. This system has 2 tasks: create an account and login with an account. This article will focus on the second task.

JWT Authentication is the mechanism I used. This article will, first, introduce JWT Authentication, then, present how to apply it in Angular + Symfony Application.

JWT Authentication Introduction

Before talking about JWT Authentication, let’s talk about the most popular authentication mechanism: session-based authentication. It brings us the whole picture of authentication.

After the user sends his username and password to the server, the server checks them by looking up database. If the login is successful, a session ID will be created for the user. This session ID is stocked on the server, and sent back to the user. Next time, the user uses the application, he doesn’t need to send his username and password again, instead, he sends his session ID, and the server checks it to decide if the user can continue using the application. …


Image for post
Image for post

Sometimes, our web application needs use the third-party application, such as Google Maps, on live. For example, we want to track our trucks on live.

Image for post
Image for post

What we need to do is, first, install a third-party application on the trucks, which can send the trucks Geo-Information to the back-end of our application on live. Then, our back-end transforms these information and present them on the front-end.

This function we build is a Webhook The third-party application keeps sending data to our webhook. Our webhook keeps receiving and transforming data. Attention, these actions are on live.

So, in brief, a webhook consumer is a Controller in back-end using the third-party services on live. “On live” makes this kind of the Controller hard to develop on local server (usually, a server on the local virtual machine). I want to share the way to develop Webhooks Consumer in 2 steps. …

About

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