Decorator is very powerful feature in Typescript. It can add additional information or steps to support annotating or modifying. It empowers Typescript with AOP(Aspect-oriented-programming), DI (Dependency Injection) or even meta programming. It's widely used in Angular and…

The state from NgRx store is an observable stream. It is a little bit tricky to access it. This post provides a better way to handle it.

ControlContainer solves the issue how the parent form accesses or controls and child form when they reside in different components.

Shortcut Restrict single-character shortcuts. Make shortcuts consistent with convention. Focus change the default color of the outline change the default color of the element remove the box and underline text Focus order Elements must receive focus in an order that preserves…

Key concepts of Webpack

React component lifecycle is a very important part of React. I created a demo to illustrate how it works with full details

Browser compatibility is a pain in the arse for many front-end developers. Although most modern browsers have supported the new features or syntax which mitigates the issues, the notorious IE browser is likely to be haunting around for a couple of years. Thus it is essential for…

Let's use flex-box layout to create a tab bar

Gatsby is a blazing-fast static site generator for React.

The core concepts of React Router

This document is my attempt to formally explain my mental model of React. The intention is to describe this in terms of deductive reasoning that lead us to this design. There may certainly be some premises that are debatable and the actual design of this example may have bugs and…

JavaScript allows us make new method available to a specific type. For example, we can augment Function.prototype with a new method like this: Morever, we can augment a specific type with a new method like this: This method help us convert a Number type to integer.

Recently I got a job as a front-end developer. It's very interesting and exciting. But working in a group is different from working individually. Currently, we are working on a project of developing an online course platform. It's a big project. The programs are intricate and…

Linter is a tool for identifying and reporting on whether the patterns or code adhere to certain style guidelines. Most of programming languages has linter, some compilers incorporate linting into the compilation process. JavaScript, being a dynamic and loosely-typed language, is…

AJAX( Asynchronous Javascript and XML), is a web development technique for creating interactive web application. In conventional web applications, it transmits information to and from the server using synchronous requests. It means that when you fill out a form and submit, you…

Inheritance is a big topic in JavaScript. Unlike Java or C++ which are object-oriented languages and they can inherit other classes, JavaScript is a prototypal by nature. So the inheritance pattern in JavaScript is far more complicated for me. I still couldn't totally understand…

A module is a function or object that presents an interface but that hides its state and implementation. The module pattern takes advantage of function scope and closure to create relationships that are binding and private. The general pattern of a module is a function that…

Currying is a good way to process multiple arguments flexibly. It allows us to produce a new function by combining a function and an argument: JavaScript does not have a curry method, we can fix that by augmenting Funcion.prototype. The curry method works by creating a closure…

Functions can use objects to remember the results of previous operations, making it possible to avoid unnecessary work. This optimization is called memoization. JavaScript’s objects and arrays are very convenient for this. In JavaScript we can keep our momoized results in a memo…

Before talking about closure, let's start with scope first. Scope is a programming language controls the visibility and lifetimes of variables and parameters. Most languages have block scope, which means that a block of statements wrapped with curly braces are not visible from…

JavaScript allows us make new method available to the basic type lick arrays, strings, numbers, regular expressions, strings, functions. For example, we can augment Function.prototype with a new method like this: Morever, we can augment a specific type with a new method like this…

From today on, I will write down some notes about the book JavaScript The Good Parts. Global variables are horrible in JavaScript. If you don't use them wisely, they will lurk in your code until break down your application. Because when your unconciously create a local variable…

Because Jekyll is a static website engine. So we cannot implement tradition dynamic searching through traversing database. In this case, I looked for other searching configurations applicable to Jekyll blog to solve the problem. Firstly, what comes up to my head is using Google…

Because Jekyll doesn't fully support tagging feature. I learned how to feature tags into my blogs. I found several ways. Fianlly I made it work by following the guides given by MIDDUST. This method need no plugin but you have to generate a separate page everytime you create a…

I created a button style with some fancy effects. It only depends on HTML + CSS. It shows the power of CSS transform and transition properties. However the CSS code is somehow redundant and prolix. I am going to learn a CSS preprocessor like SCSS to improve efficiency. Ghost…

I added a tooltip for my social links. I use jQuery to set the tooltip. jQuery is an amazing framework that make my work more efficient.

The Holy Grail Layout is a classic CSS problem with various solutions presented over time. Many people are searching for the best method and several goot templates are presented. Most CSS solutions for Holy Grail aim to meet a few goals: They should have a fluid center with fixed…

Today I tried to figure out how to use some pretty icon to show my contact at footer. Then I found Font-awesome. It has a vast variety of useful website icons which is designed for Bootstrap. It is controlled by CSS that can create many amazing effects. It satifies all I need and…

Today I set up the music player and slide show modal for my blog. I generate the music player from Netease Music. It's very easy, you could create an external link from an album. For carousel, it's kinda complicated and challenging. But with the help of Jekyll tips, I did…

Today I set up the paginator[1,2] and comment[3] modal on my blog. Besides I fixed some layout glitches, too. It looks much better now.

Another step Tonight I create a post template. It's not a easy task. I was quite confused about the usage of jekyll. I thought some of the features were out of work. Then I took a gander with other blogs and their source. It is very useful. And I finally found a way to solve my…

This is my first blog I start this blog on 12/08/2015. This is really amazing. I can see my webpage everywhere. And I learned some new stuffs like: github page jekyll liquid ruby on rails I hope I could get the hang of github pages soon

I migrated my bootstrap blog to GitHub pages. Now I build my GitHub blog from cratch. I will try to perfect it.

Hello world