Writing asynchronous JavaScript

This library — async.js — is excellent in writing asynchronous JavaScript. It’s one of JavaScript’s strengths and it’s only that often get really messy.

In my use case, there are a several data sets to fetch and populate into graphs. One way is to perform a for each loop and just AJAX requests to get dataset from the web server and adding it one by one. But why do that when you can do so asynchronously. Ideally, all sets of data should be downloaded at the same time and not one after another. Some data sets are larger than others and will take a longer time to complete, so we can always add the completed sets into the graph first.

With that library we can do something like:

[code language=”javascript”]
async.map([‘url1′,’url2′,’url3’], getUrl, function(err, results){

});
[/code]

I’ll write more as I explore. Really nice library if you’re looking to do more than jQuery’s Defered.

What’s hot in JavaScript today

What’s really hot in JavaScript these days? Glad you asked. Okay, I asked.

Bower

A package manager for the web, created at Twitter. Bower has helped me managed by JavaScript libraries better. One good side effect that came out of it is that it kinda prevents developers from altering the libraries. Remember those times where you upgrade a library and then realized your library is somehow a custom build version? This get detected much earlier because each we check out code from the SVN repository we also do a fresh install of components in bower_components.

More information at Bower.io.

Modernizr

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.

More information at Modernizr.

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

More information at D3.

jQuery

jQuery isn’t new but it still is really popular. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

More information at jQuery.

Mocha

Mocha is a feature-rich JavaScript test framework running on node and the browser, making asynchronous testing simple and fun. Mocha is easily my test suite of choice. I’ll write more about Mocha is there’s more interest.

More information at jQuery.

Lodash

Lodash is a drop-in replacement for Underscore.js, from the devs behind jsPerf.com, that delivers performance improvements, bug fixes, and additional features. It adds some additional functions too. Their collection tools are more comprehensive than Underscore.js’s. Currently it is at version 1.3.1.

More information at Lodash.

Angular.js

Something is really paradigm shifting is Angular.js. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. However I find it hard to integrate this into existing work. It’s probably great for new projects though! I use Backbone.js and Marionette combination for most of my JavaScript works.

More information at Angular.

Shortcuts for query selections and getComputedStyle

Here are some shortcuts for query selector, query selector all as well as getComputedStyle. These are helpful when you don’t have tools such as jQuery. During my JavaScript development work at Tremor Video, I have instances where I need to manipulate the DOM really quickly and it is better to rely on vanilla JavaScript for these rather than to call a library for this.

The caveat is that query selector and query selector all is only supported by Internet Explorer 8 and above. For getComputedStyle, it is not available for IE8 unless you have a shim. I use the getComputedStyle in Aight to provide for IE8. Firefox and Chrome aren’t affected by these.

Have fun, hope it’s helpful to you as it is to me.

The better utility belt Lodash

We switched from Underscore.js to Lodash compatibility mode and never been happier. (I’m a Web UI Developer situated in Singapore.)

Lodash is a drop-in replacement for Underscore.js, from the devs behind jsPerf.com, that delivers performance improvements, bug fixes, and additional features.

It adds some additional functions too. Their collection tools are more comprehensive than Underscore.js’s. I had some issues doing a _.where through a mix of array and objects during web JavaScript programming. Lodash was the answer for it.

JSON.stringify then JSON.parse

I realized we keep doing JSON stringify then eventually parsing it back again and again to copy over objects. This does a dump “clone”, it ignores references and functions but is really fast. I wrote a Underscore.js or Lodash mixin just to do this.

[code lang=”javascript”]
/**
* This is the shortcut for JSON.stringify then parsing it back.
* Quick access to simple object copying.
* It does not copy functions!
*
* @author KahWee Teng
* @return {Object} Lodash mixin object.
*/
_.mixin((function() {
"use strict";
return {
copy: function(object) {
return JSON.parse(JSON.stringify(object));
}
};
}()));
[/code]

There’s just so many ways to doing a clone but this is by far the fastest but then again it depends on your needs. Dump clone I call this.

Learning JavaScript, for beginners

Some good links to get started with JavaScript:

Try not to use W3Schools!

Modernizer’s documentation gives really good context to why certain things are done today. I was just reading it yesterday and it got me thinking quite a bit. Skim through though! It only is meaningful when you encounter the cases before.

How to add string interpolation highlighting for Sublime

To add general string interpolation highlighting for Sublime Text 2, you need to edit your .tmTheme file. It can be found in your SublimeText 2, go to Preferences, then Browse Packages. This will open up your finder or Windows Explorer. Look for the folder “Color Scheme – Default”, you should be able to find themes like Monokai and others inside.

In order to add the syntax highlight for CoffeeScript #{} in strings, for example:

[code language=”coffeescript”]c.url("#{vhaAppAddress}saaa", done)[/code]

Open up your .tmTheme file and add the following lines:

[code language=”xml”]
<dict>
<key>name</key>
<string>Embedded Source</string>
<key>scope</key>
<string>string source, text source</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#9bca3c</string>
<key>background</key>
<string>#444</string>
</dict>
</dict>
[/code]

You can change the colors of background and foreground to your liking too. Hope you’ll find this useful!

Notes on frontend development

I’m a Web UI Developer in Singapore and I realized frontend development has gotten really complex. It wasn’t far long ago when users were bitching about Internet Explorer. Today’s Internet Explorer is becoming a better citizen and whoever still screaming about its deficiencies apparently aren’t realizing the bigger issues with UI design in general.

Your pixel is not a pixel

The new issues are resolution independences. Much of the web is still defined by pixels and this no longer makes a lot of sense given Apple having their Retina displays and Samsung having their high resolution Samsung Galaxy S4 coming to Singapore soon. One pixel is no longer one pixel any more.

And given the higher resolutions, the devices do deserve better images. Sometimes this acts as a competitive advantages, your icons are prettier than your competitor, it shows dedication. The issue is not every device support such high resolutions and sending these images to them is just a waste of their bandwidth. Lower end devices might not have LTE either. There’re lots of CSS tricks and JavaScript detection methods to deduce the device capabilities and these workarounds aren’t the most elegant.

DevOps dude says lower number of requests per page

Mobile also has a new priority, to come up with icons all embedded into one image file. This lets the server only load your sprites just one. Sounds like a good deal? It really is, only problem is putting up with the hassle of doing background-position. It’s just too tedious. UI developers struggled and there are better tools to automate this process now.

Backend development might be a little easier these days

Contrasting to backend development, frontend has a different sort of complexity. The challenges of UI development is always learning new technologies and how to achieve productivity through embracing these technologies. There’s often a set back initially and we have to discover (or even make our own) automation tools to remain as agile while still delivering within our deadlines. If you don’t do that, you just can’t survive for long.

Tools of the trade

This is a quick update of the tools I used these days. I am a web user interface developer now so some of these tools might be kinda niche!

  • Text editor: SublimeText 2, because it loads fast and I swear by its open by file name feature
  • Computer: MacBook Air 13″, a decent screen size with good portability. I like working at cafés and this gadget fits my lifestyle.
  • Browser: Chrome 25. I lost track of Chrome’s version, comes with Chrome is the excellent debugger I cannot live without.
  • CSS generator: Less, because Less can be compiled by JavaScript on the client side. It’s easy to get started developing.
  • Revision control: Git or SVN. My vote is to Git but my company is on SVN.
  • Image editor: Photoshop. We use Photoshop for general slicing.
  • Programming and markup languages: Mainly JavaScript, HTML and CSS. We have quite a bit of Handlebars.js stuff as well. We use JavaScript extensively these days.
  • JavaScript framework: Backbone.js and Marionette.
  • Web server: Apache Tomcat. We have a Java stack.
  • Page profiling: Just Chrome.
  • Automation: Ruby Guard and Grunt.js. There’s a bit of LiveReload as well, but only when I develop on a Mac.
  • Quality checks: JShint and Chrome Audit in the console.

I can see what I use previously as a more general web developer.