UI of signature detection https://seasonliu.com/station/signature-detection

Introduction

Recently, I’ve worked on an innovation project, signature detection. It judges whether a document is signed. It’s a very interesting project. I would like to share this experience, bringing an innovation project from the lab to production.

This project is split into several phases.

This article will walk through all these stages. Let’s go!

Do experiments

In this stage, The…


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.

Structure

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

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


Introduction

Recently, the cryptocurrency market is very interesting. We enjoy making profits from it. But, how can we maximize the profit?

As a developer, I believe there have some algorithms that can pull this job. And I find it in my notebook of a college course, which, of course, I’ve already forgotten how it works :).

It’s time to pick it up. The algorithm that seeks the optimal solution is Dynamic Programming.

Dynamic Programming

The best way to find the optimal solution is to backtrack the path of getting this solution.

Suppose that the best solution is f(n) , we need to know…


Introduction

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.

Background

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

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:

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:


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:

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:


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.

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