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.

The new Nokia Lumia 1020

The new Nokia Lumia 1020 is armed with a 41 megapixel camera sensor. Amazingly high megapixel value leads to you zooming after your shot is taken. Quite a nice feature in my opinion.

NOKIA LUMIA 1020 Nothing gets this close

Zoom. Reinvented.

Nokia Pro Camera on the Nokia Lumia 1020 lets you shoot in super high resolution, which means you can zoom in close to your shot after you’ve taken it. Then rotate, reframe, crop and share new images as many times as you want.

I just wonder if the new Nokia Lumia 1020 is fast enough when taking shots.

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.

Review: Learning Raphaël JS Vector Graphics

I’ve been reading on JavaScript library — Raphaël — on the weekends. I work for a advertising analytics company working on web user interfaces so I got interested in data visualization in the process.

The key take away from this book is to create vector graphics and data visualizations in your browser using Raphael.js.

Raphael is a API that provides an excellent abstration over SVG. It allows you to add animation and interactivity to your web applications.

To learn more, there’s a good book by Packt Publishing — Learning Raphaël JS Vector Graphics which is written by Damian Dawber.

Learning Raphaël JS Vector Graphics

The book contains a good introduction to Raphael. It goes on to cover quite a bit on SVG and paths as well. The fourth chapter, Transformation and Event Handling gave good insights to prepare you for animations in the next chapter. The book eventually leads you to create an social media visualization.

If you’re interested in learning more about Raphael, check out the book from Packt.

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.

Interesting discoveries #08

Less busy this month.

1. Discovering Dev Tools

Google Chrome has one of the best debugging and development tools for the web development. Learn more by trying out the tutorials here. It’s really well down.

2. The Stockdale Paradox

Haven’t heard of this paradox till my director made a brief mention of it. The paradox states that while you must have faith that you will prevail in the end you must also act in a manner where you are aware of the current situation. In times of trouble, it can seem like being in denial while confronting the reality of things.

3. Stephen Fry

This statement makes me feel like tearing:

The strange thing is, if you see me in the street and engage in conversation I will probably freeze into polite fear and smile inanely until I can get away to be on my lonely ownsome. Make of that what you will.
– See more at: http://www.stephenfry.com/2013/06/24/only-the-lonely/#sthash.DkZYF7H7.dpuf

4. Optimism being just as dangerous as pessimism

There’s no difference between a pessimist who says, “Oh, it’s hopeless, so don’t bother doing anything,” and an optimist who says, “Don’t bother doing anything, it’s going to turn out fine anyway.” Either way, nothing happens. –- Yvon Chouinard

This could go real wrong either ways. The key is not to be too extreme in either ends. Know the types but don’t bother too much with the definition for you can’t categorically decide where a person fits.

5. Grunt.js

I’m using more of Grunt.js at work and there’s been a huge gain in productivity. These grunt processes are a little troublesome to set up but once they are there they made web development so much saner.

6. Our broken web development flow

And about sane web development, Kenneth Auchenberg articulated this situation well.

I can’t agree more to that, I’m using a combination of LiveReload, Sublime Text and Grunt’s JSHint plugin to make improve web development process. It is not perfect and there’s some resistance to introducing these workflow to my colleagues at first but they’re seeing the benefits gradually.

7. Shortcat app for Mac

Shortcat’s pretty cool. Get it here. I’ll leave you with a video to look at:

What is Shortcat? from chendo on Vimeo.

8. Dash app for Mac

I’ve been using Dash for Mac. It’s basically offline documentation. It’s great for people who are on the go. How many times do you need to check on something and the internet connection is just horrible or non-existent? This is a life saver for me. It’s a free app but the paid version removes the nag screens.