Flash blocked by Firefox

In an interesting turn of events, Firefox has blocked Flash until Adobe plug the securities vulnerabilities. This means most advertisements wouldn’t be able to run in Firefox.

The mob is turning against Flash. Mozilla has blocked every version of Adobe’s Flash plugin from running within its Firefox browser, while Facebook’s head of security has called for Adobe to kill it off.The moves come following a series of vulnerabilities in Flash being actively exploited, including those exposed by the Hacking Team compromise.Firefox users seeking to view Flash-based content, such as videos, adverts or more complex web tools for uploading images and other actions, will need to click again and accept a warning that “Flash is known to be vulnerable. Use with caution”.That means users of Firefox cannot use Flash by default and will not be able to until Adobe patches the security bugs and updates the plugin. Adobe has struggled to keep up with the number of bugs and vulnerabilities being exposed within Flash.

Source: Facebook calls for end to Flash as Firefox blocks it over hacking holes | Technology | The Guardian

How to specify xcode-select for Command Line Tools

This is more of a personal note. It happens when I am install Node.js 0.10.3. It seems like xcode-select is triggered by GYP. I get an error message like this:

I’m on a system that doesn’t have XCode installed fully and instead I just install the Command Line Tools provided by Apple.

To solve this issue, run:

[code lang=”bash”]sudo xcode-select -switch /Library/Developer/[/code]

Then you can now run:

[code lang=”bash”]./configure
sudo make install[/code]

Hope it helps!

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){


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.


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.


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 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 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 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 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.


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));

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.

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”]
<string>Embedded Source</string>
<string>string source, text source</string>

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.