a full stack enthusiast interested in Javascript / Typescript / Kotlin / Python / React / React Native / (Android & iOS) native / Cloud

Valgrind is a famous tool to debug your memory leak, but what sad is it only supports Linux, yeah, not a perfect support even on Mac. But with the new Windows 10 Anniversary update, it’s happening. And works way much better than Mac with OS X. Let’s rock!

There are two ways to use React, the old createClass or the fancy ES6 extend way. We should go the ES6 way since it gives much more native JavaScript feeling rather than react feeling when you coding. But there are so much examples out there which follows the classic way. It is good to give a look to both of them side by side to provide a more clear understanding. Yes, you can apply ES6 syntax to createClass as well, but we won’t cover that here.

If you use a static blog system as me or a static site. You may consider which deployment suits you better, sftp maybe a stable old-school way. Today let’s use git to complete this quest. No, not push-then-pull, you can actually push only :)
Furthermore, via this approach, you have a taste to the world of continuous deployment. :) Let’s do this.

The last time, we have installed a linux system and have done some preparation to make it ready to use. Now we will install a Nginx on it, and then your private server will become a web server and you can broadcast your ideas to the whole internet :)

Still, I will use Ubuntu 16.4.1, but solutions here still adoptable to the other linux distro.

Do you know JSLint? A tool which can help you write quality JavaScript code, it is developed by Douglas Crockford. Who is the father of JavaScript, he surely has sufficient background to judge. :) And JSLint is very strict, and you can call it rigid sometimes, but he always has the point. If you have used the tool before, you may have noticed some errors, one of them may look like this : “Don’t make functions within a loop”. OK, let’s fix it, wait, what?

Yes, it may sound absurd at first, let’s dive into to find out what the father wants to say xD

when you have a linux server and a newly installed system, what’s first thing you will do? Just dive into and play with the bash, no, never, it is not a windows desktop system. It needs some configurations first. Today, let’s see how many basic steps do we need to take before we can actually use a fresh new linux system. Yes, I use ubuntu 16.04.1 in this tutorial, but it should adopted to other linux distros as well. You just need to change apt-get part to the other package management system, like Yum in Cent OS.

At the below steps, i will not only show the commands, but also explain the detail behind it, so you can know why we use it.

Let’s from the very beginning, let’s say you just bought it…

JavaScript is a de facto dominance in the modern web development. And its dynamic nature makes it very easy to learn, and, and very easy to fail :) One of the most famous confusion out there is the concept of closure. And in fact, you really shouldn’t read the accepted answer on the stack overflow. Because it doesn’t explain well as many other posts on the internet. Through this post, I will explain closure in a very straightforward way and tell you why they are wrong. Let’s begin.

Front end world has an incredible evolution speed. Especially for the tooling, new kids jump out everyday. Webpack is one of them and seems it will dominate for a while. You may hear its complexity and how it is going to replace your current toolchain. Today, let’s bundle webpack like it bundle scripts for us xD

CSS has lots of layout skills to master. position, float, multi-column, flexbox. Sometimes you can use them as you like, but sometimes you should choose wisely according to the situation. Let’s take a look at the position property. To look over some interesting behaviors among the different values.

In ES5, we can very easy bind a event to DOM using the native way: document.addEventListener() , or a jQuery way, $(element).bind() , $(element).click() or $(element).on() , use them according to different situations.

But in the ES6 or Typescript, you will face some pitfall if you don;t care the details. Suppose you have the following code: