Building a brand

Perhaps I should be taking what I learn from work to apply it on my personal life. It’s time for a rebrand for myself. I’ll start online.

Rough plans:

  1. July: Launch kw.sg.
  2. August: Position this blog slightly different. It will be where I gather things I read from all around. kw.sg will focus on my profession more.
  3. September: Moving resume to kw.sg and identity building.
  4. October: This blog will move to top level domain.

Might go for a short vacation in between too.

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:

➜  node git:(e32660a) ./configure
{ 'target_defaults': { 'cflags': [],
                       'default_configuration': 'Release',
                       'defines': [],
                       'include_dirs': [],
                       'libraries': []},
  'variables': { 'clang': 1,
                 'host_arch': 'x64',
                 'node_install_npm': 'true',
                 'node_prefix': '',
                 'node_shared_cares': 'false',
                 'node_shared_http_parser': 'false',
                 'node_shared_libuv': 'false',
                 'node_shared_openssl': 'false',
                 'node_shared_v8': 'false',
                 'node_shared_zlib': 'false',
                 'node_tag': '',
                 'node_unsafe_optimizations': 0,
                 'node_use_dtrace': 'true',
                 'node_use_etw': 'false',
                 'node_use_openssl': 'true',
                 'node_use_perfctr': 'false',
                 'python': '/usr/local/Cellar/python/2.7.5/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python',
                 'target_arch': 'x64',
                 'v8_enable_gdbjit': 0,
                 'v8_no_strict_aliasing': 1,
                 'v8_use_snapshot': 'true'}}
creating  ./config.gypi
creating  ./config.mk
xcode-select: Error: No Xcode is selected. Use xcode-select -switch <path-to-xcode>, or see the xcode-select manpage (man xcode-select) for further information.

gyp: Error 2 running xcodebuild
Error running GYP

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:

sudo xcode-select -switch /Library/Developer/

Then you can now run:

./configure
make
sudo make install

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:

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.

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.

(function(navigator, window, document, undefined) {
	"use strict";

	/**
	 * Query selector.
	 * Do not use .bind due to lack of IE8 support.
	 * Shortform.
	 */
	window.qs = function(expr) {
		return document.querySelector(expr);
	};

	/**
	 * Query selector all
	 * Do not use .bind due to lack of IE8 support.
	 * Shortform.
	 */
	window.qsa = function(expr) {
		return document.querySelectorAll(expr);
	};

	/**
	 * For getComputedStyle.
	 * Shortform.
	 */
	window.cs = function(expr) {
		return window.getComputedStyle(expr);
	};
})(navigator, window, document);

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.

All things observable