Build dropdown list with RxJS

Dropdown list is one of the most common web UI component, but yet one of the most difficult to implement. Recently I was working on a navigation dropdown list with animation. But this time, I implemented it with RxJS, wh

Read More...

Let's build react.js

Recently React is growing to become the de facto standard for web components. And it is also pretty straight forward to learn and use React.

I recommand to start with the official website for documentations, also some examples on github and Todomvc

However, for people already know how to write React, they might still wondering why React is built in a certain way, like React DOM, state, how React update and manipulate the DOM elements.

For those who are curious, this article is going to rebuild React from scratch and create a workable basic React-like framework, by going through the logics in React source code. I hope you can understand how React works after reading this post.

Read More...

Source code odyssey: angular.js injector

Angular.js

Angular.js is a fasnating framework that including a lots of interesting features.
One of the unique feature in Angular.js is dependency injection,
instead of requiring and injecting the dependencies, Angular.js creates a special component to find the dependencies according to parameter names and pass it through the function:

1
2
3
4
5
6
7
8

var injector = angular.injector();

injector.invoke(function($http) {
//get http service from service providers
$http.ping('http://angularjs.org');
});

Read More...

Learn jQuery from jqLite

JQuery

Jquery is a great library, it makes manipulating DOM element and browser really simple and easy.
As a web developer, jQuery is our day to day tool. However, sometimes it just too convenience that
we forget how to make web page without it. It is important to go back to see how jQuery handle and wrap
the DOM api and provide the simple interface for us.

JQLite

JQLite

Angular.js comes with a simple compatible implementation of jQuery, called JQLite.
JQLite is used internally for angular.element if user doesn’t include jQuery, as a
replacement for jQuery. It only have 1000 lines of code with lots comments,
So it’s a good starting point to understand how jQuery works.

Read More...

Understand node stream (what I learned when fixing Aws sdk bug)

Node.js stream

Node.js provides asynchronous I/O base on event loop.
When reading and writing from filesystem or sending http request,
Node.js can process other events when waiting for response, which we called it non-blocking I/O.
Stream is an extend of this concept, it provides an event base I/O interface to
save memory buffers and bandwidth.

Read More...

Announcing Code-Warrior

Recently I am preparing the interview with some companies in West Coast.
One of the problem I have during the preparation, which is because I am a vim user,
It is uncomfortable to practice algorithm questions on TopCoder, so I think it would be great if I have a npm tool that can
download algorithm problems and provide some skeleton test case for practice.
Therefore I created Code-Warrior

Read More...

Bacon.js for dummies

Bacon.js is an FRP module for events on javascript. Which can transform
your event listener/handler to a functional event stream. After servey a few blogs and example project,
I found it is a really interesting concept and can make event handling speghetti code into clear functional logics.

Event stream

First, what is event stream?
Actually it is nothing special, it is just an event listener that listen to specific event.

For example,

$("#clickme").on('click', function(event){ alert(event.target)})

Can transfer to event stream by Bacon.js’s asEventStream helper:

clicked = $("#clickme").asEventStream('click')

And add handler to event stream, listen to click event:

clicked.onValue(function(event){ alert(event.target) })

Read More...

express bigpipe experiment

Bigpipe

Bigpipe is an unique frontend technique used by Facebook to increase their page rendering speed.

When I read the article talk about bigpipe on facebook, I was pretty shocked about how facebook implements those unique ideas to
increase their page rendering speed.

Recently I am using node.js for web development, I think the async structure of node is a perfect environment to use this technique, so I wrote a small experiments app with express:

Read More...

Understand event loops

Event loop is the core feature in node.js,
and is also the reason why it is better on handling requests and realtime communication like long polling.

The Obstacle of IO

The reason is on this is because the I/O is expensive:

Read More...

Announcing N37 url shortener

Few days ago, I started to work on a simple url shortener. The original idea was from one of my friends, he mentioned about the idea of implement a simple and deployable url shortener. This idea just popout my head when I was working on other side project. So I spend a few days working on it and it turns out to be an interesting project that I want to blog about:

A Url Shortener

A url shortener, as its name, is a application that provide user a shorter version of url. Like the most famous one: tinyurl.com, which map the url address into a short sequence of code, like tinyurl.com/ccxngqo. Make user easier to share the link on social media like twitter or forum.

Read More...