Big list of things to get started with frontend development

Quickly ran though "Getting Good with JavaScript", this is a very short and basic introduction to JavaScript for someone new to the language. Deep and difficult concepts are avoided or explained in an easy to understand way for the reader to explore further by him/herself.

I found these two resources in the "Further Study" section very helpful and interesting, both are from Rey Bango's blog:

1. What to read to get up to speed in JavaScript
2. The big list of JavaScript, CSS, and HTML development tools, libraries, projects and books

display Apple keys in HTML

Just saw an interesting kbd tag supported on Stackoverflow and started wondering how to display Apple keys like command, shift, control, option, etc. on the Web page.

And it actually is very straightforward using HTML character entities. The concept is well explained in this Wikipedia article. There are two forms: numeric character reference and character entity reference:


numeric character reference: either in decimal form (&#dddd;) or in hexadecimal form (&#xhhhh;), e.g. "less than" character can be expressed as < or <

character entity reference: in the form of &name; the same "less than" character can be expressed as <

Now, it is very clear how to display these special Apple keys with the help of entity tables such as this unicode table. Somehow I could not find the corresponding character entity reference table for the same keys.

These are the most common Apple keys you might use:

⌘ Command: ⌘
⇧ Shift: ⇧
⌃ Control: ⌃
⌥ Option: ⌥
⎋ Esc: ⎋

If you use TextMate, there is a convenient HTML bundle feature that helps to insert these special characters in an HTML document. Create a new HTML document, then goto Bundles menu => HTML => Entities => Pick the character you want. You can also use the autocomplete, e.g. type "command" and press tab.

migrate from TextMate to Vim/MacVim

Choosing text editor is like choosing your religion. One popular/natural choice on Mac is TextMate. However, since I do lots of work on the server/dev linux box directly, I had to switch back and forth from Vim. Probably it is time to migrate to use Vim on Mac as well, especially given the fact that there are nice distro made for Mac specifically: MacVim and a customized MacVim packaged with many useful plugins called Janus.

Here are two good testimony from other migrants:

• TextMate to Vim with training wheels
• A Starting Guide to Vim from TextMate

Here are several useful learning resources:

• Vim Commands Cheat Sheet (for good reference, there are multiple other similar cheat sheets)
• vimtutor (simply open your terminal and type vimtutor)
• A Byte of Vim
• Vim Recipes
• Essential Vim Plugins (plugins are very helpful to create your effective workflow)

Plugins shipped with Janus:

Spend 5 minutes to go through the brief introduction for all the plugins that ships with Janus. Janus also includes a handy way to allow you to create/edit ~/.janus.rake file to add more plugins and you can run rake inside ~/.vim to update these plugins.

Sample ~/.janus.rake

vim_plugin_task "zencoding", "git://github.com/mattn/zencoding-vim.git"
vim_plugin_task "minibufexpl", "git://github.com/fholgado/minibufexpl.vim.git"

NERDTree: provides a file browser, use \n to show/hide.

Command-T: provides an efficient way to search for files in current working directory. Use ⌘+T to show/hide.

snipMate: provides the same Textmate Snippet feature. As you do in TextMate, you can simply type snippet keywords and press tab to expand to code snippets and use tab to jump through various locations in the snippets. You can find all snippet definitions for various languages in ~/.vim/snippets.

ctags: TagList plugin is shipped with Janus. Use :Tlist to show/hide it. But I like Tagbar better than TagList (see below for installation instructions).

Other handy plugins I installed:

Syntastic: syntax checker, you can also go to the jslint route. This Stackoverflow post covers the setup in details.

Tagbar: displays tags of the current file in a sidebar, sorta like TagList, but more comprehensive and orders tags under correct scope/context.

doctorjs: previously known as jstags, provides a set of static analysis tools for JavaScript. Combined with Tagbar, it provides a more detailed code structure navigation than TagList. See this Stackoverflow post for instructions how to set it up. Note that you need to install NodeJS as a prerequisite.

There are two issues to get doctorjs set up properly that is not covered in that Stackoverflow post:

1. It seems that installing doctorjs needs sudo (sudo make install inside doctorjs git clone directory) to get around permission issue.
2. I also got errors about underscore module and ctags NodeJS module cannot be found. They are located at /usr/local/lib/jsctags/ after doctorjs is installed. But node cannot locate them somehow. To fix it, I installed underscore using npm (npm install underscore -g), then I updated my NODE_PATH environment variable to include /usr/local/lib/jsctags/.

file system based on a single file and loop device

Worked on a task to test performance of read/write on various file system options on my RHEL5 box:

• native ext3
• virtual ext3 based on a zero-filled image file
• virtual ext3 based on a sparse image file
• virtual ext2 based on a sparse image file

The virtual file system is basically based on a big file connected as a loop device. This tutorial about setting up disk quota based on virtual file system has more details. For example, this is the basic steps to set up a virtual ext3 file system based on a sparse file:

dd if=/dev/null of=/tmp/vfs/sparse.image bs=1M seek=100
mkfs -t ext3 -q /tmp/vfs/sparse.image -F
mkdir /tmp/quota
sudo mount -t ext3 -o rw,loop /tmp/vfs/full.image /tmp/quota

The experiment is quite preliminary: basically, I copy over files in different sizes (1, 5, 10, 25, 50MB) into the mounted file system directory or the native file system directory to test write latency, then read the copied files to test read latency. The read/write latency is averaged over 10 iterations.

A couple of quick points from the experiments:

• read latency is similar for all four cases.
• write latency for native ext3 is around half of the virtual ext3 based either on a sparse file or a zero-filled file.
• write latency for native ext3 is roughly the same as virtual ext2, maybe because ext2 gets rid of the journaling overhead.
• creating a virtual file system based on a sparse file has many advantages over a zero-filled file: the creation time is way much faster 6-8 order of magnitude for the file sizes we tried, the bigger the file, the bigger the difference; the sparse file does not occupy physical disk space and grows when content is actually written to disc.
• virtual ext3 has spikes for write, sometimes as big as 80x the average write latency, not exactly what caused it.

This is final the performance graph for comparison. I am using the average number here, notice that the high average latency for write on virtual ext3 is caused by the spikes mentioned above.

After removing the spikes, using virtual ext3 based on a sparse file or zero-filled file creates around 2X the latency for native ext2 or ext2 based on a sparse file, as show in the second graph:

Multi-language support for a website

I am not a frontend developer, just stumbled upon this problem helping out my friend to set up a website that is supposed to serve multi-language content based on the language setting of the user. This is actually an interesting problem (maybe already solved and I did not know).

There are several different solutions that I found through after doing some study:

- Server side detection based on Accept-Language request header. 

For example, apache mod_negotiation allows you to define a set of html pages in different languages (index.html.en, index.html.zh, etc.) and based on the user preferences from Accept-Language header, apache picks the right index.html language page to return.

You can also use mod_rewrite to perform the similar trick. Just set up the rewrite condition based on the value of the AL header and map to the correct language.

- Client side detection and action using JavaScript and navigator object.

In IE, navigator.userLanguage returns the operating system region and language setting, in Firefox, Opera, Safari and Chrome, navigator.language returns the browser application language setting. So, we can use them to get the user language and decide what language content to return.

For example, this code snippet (borrowed from an example on jsfiddle) defines multi-language content on the same page and use JavaScript to show or hide it based on the detected language.



The drawback of this approach is that a large part of the content is not needed and invisible. It is a waste of time to download.

Another approach is to use JavaScript to redirect to individual language content pages using window.location.href="redirected_page_url" or window.location.replace("redirected_page_url"). See Location object for more details on how to use them. The downside is this approach may not be search engine friendly (spiders may not be able to follow redirection).

One last note how to test multi-lang website. I tried in Firefox, simple change the language ranking in Preferences->Content Tab->Language Choose button and FF will start sending different Accept-Language headers based on the ranking. You can also play with the operating system language settings.

node.js testing frameworks

There are so many testing frameworks for node.js, start to evaluate some most mentioned/used ones. Criteria that I am looking for:

1. easy to understand concept and constructs
2. nice support for async calls and flow control
3. easy integration with CI tools such as Hudson
4. code coverage report
5. mocks and stubs

• Vows+APIeasy
• Expresso+node-jscoverage: really like its code coverage feature
• YUITest: somehow had issues writing async operations in setUp and tearDown, also had issues using flow control libraries such as async inside each test
• Jasimine: very clean and easy to understand concept and constructs
• Nodeunit: a detailed tutorial from the author
• node-qunit+jscoverage, qunit is used for JQuery testing and has fairly good async support, here is a fairly detailed article for async testing with qunit
• testosterone+gently
• Sinon.JS

Among those, I like Jasimine most, it is easy to understand and has rich feature set. The only feature missing is lack of code coverage report. jasimine-reporters supports output of JUnit format unit test results. jasimine-node brings Jasimine to node.js. You can check out "Testing Backbone applications with Jasimine and Sinon" for a practical example.

dealing with multiple nesting callbacks in asynchronous code

If you are annoyed that you have to write multiple nesting asynchronous callback functions when you work with Node.js, you are not alone. Getting used to the asynchronous programming style and always keep in mind everything runs in the event loop is a bit tricky at the beginning.

There are many libraries and articles that addresses this nesting callback issue. This should help you to avoid those ugly pyramid shaped code now ;-)

InfoQ: how to survive asynchronous programming in JavaScript (includes a list of libraries with comparisons and Q&A from their developers)

Stackoverflow post about how to deal with the nesting callbacks (also includes a list of libraries)

Isaacs's presentation on the topic and his library Slide (he is the author of npm)

Tim Caswell (creationix)'s series on control flow in Node (II and III can be found on the right column, other articles by the same author)

CommonJS Promises is another way trying to address this issue by defining a standard interface for interacting with the result object of asynchronous actions. Roughly speaking, a promise object is a placeholder for the value for the asynchronous action. And you can treat is as normal object, assign values to another variable, pass it around, etc. Right now, FuturesJS implements this and it is not solely for server-side JS. dojo.Deferred is another similar effort. This SitePen blog post has some easier to understand coverage about the promises.

StratifiedJS extends the JavaScript language to achieve similar goals of allowing asynchronous control flow to be expressed in a synchronous way. Very neat work indeed. This is a short overview presentation about it.