Rolling back a pushed commit in git

January 20, 2015

On the unfortunate occasion where you have to change your git history to revert. This is how to move back one commit and do a force push to master.

The other solution is to do a revert and commit it.

Try ES6 when you’re free

January 7, 2015

ECMAScript 6 (ES6) is coming and if you can like to use some of the features, you will need a transpiler for this. Try using 6to5.

From this:

To this:

Try it using

Start your product with Node.js

January 6, 2015

RisingStack discusses some of the benefits of Node.js in the enterprise. One of the highlights is productivity:

When PayPal started using Node.js they reported an 2x increase in productivity compared to the previous Java stack. How is that even possible?

First of all – as I already mentioned – NPM has an incredible amount of modules that can be used instantly. This saves a lot of development effort on your part.

Secondly, as Node.js applications are written using JavaScript, front-end developers can also easily understand what’s going on, and make changes as necessary. This saves you valuable time again as developers will use thesame language on the entire stack.

This really resonated. Coming from the background of working on non-Node.js environment, the biggest problem is understanding and sharing business logic with backend’s code. We found ourselves often coding it twice. Sometimes rules that are applied in frontend is not added in the backend.

We run a primarily Java stack and the paradigm is so different from another Express.js stack we run. Each time there are bugs, triage on whether it is a backend and frontend problem takes longer too.

Keep this in mind when you’re starting a product and consider using Node.js for that.

Packt books at just $5

December 24, 2014

It’s really time to pick a book and learn something!

Following the success of last year’s festive offer, Packt Publishing will be celebrating the holiday season with an even bigger $5 offer.

From Thursday 18th December, every eBook and video will be available on the publisher’s website for just $5. Customers are invited to purchase as many as they like before the offer ends on Tuesday January 6th, making it the perfect opportunity to try something new or to take your skills to the next level as 2015 begins.

With all $5 products available in a range of formats and DRM-free, customers will find great value content delivered exactly how they want it across Packt’s website this Xmas and New Year.

Learn more here!

jQuery makes release due to Safari bug

December 22, 2014

jQuery has made a release to curb possible issues relating with Safari’s querySelector. This CSS selector is failing for Safari:

It turned out that Apple is aware of this and has fixed it in the trunk. However the fix has not arrived to users yet, perhaps because it is not highly prioritized. There were several other issues including the inability to target the iOS version due to iOS 8 reporting the user agent incorrectly. jQuery took the path of fixing the bug though the jQuery library and is not waiting for a new Safari release.

It’s unfortunate that this has to happen although this incident shows two things:

  • Apple’s lack of feedback to web developers is potentially damaging. As an opensource project, I would have assumed there’s more transparency on release ETAs.
  • jQuery, being a libary, normalizes browser quirks and this defends your code base indirectly. Cases like this shouldn’t be common and it validates the importance of a library.

Braces do not introduce scope in for loops

December 21, 2014

Scoping isn’t hard to understand in JavaScript, in fact it’s quite predictable.

What do you think is the result for i?

It’s 4.

Take a look at the same example in PHP:

Similarly, the result through PHP is also 4.

Why shouldn’t it result in the value being 999?

Because they are all in the same scope.

Let’s go through the different brackets:

  • (): parentheses (curved brackets)
  • []: brackets (square brackets)
  • {}: braces (curly brackets)

Braces is used to group zero or more statements. In JavaScript, this style is called a block statement.

The typical syntax is:

This is often used in control flows.

Block statements do not introduce a scope.

Let’s try another example:

What do you think is the value of j?

If you’re think it’s 12, you’re right. Again, block statements do not introduce a new scope to house variables out.

The common mistake

This brings potential pitfalls when you reuse control flows in the same scope with the same variables.

A possible scenario is having a coworker edit that function and add his / her for loop before your for loop and thereby introducing a defect due to the lack of scope.

It’s good to be more defensive when it comes to this by enforcing a no function can be more than 100 lines rule.

Which browsers do I support?

December 20, 2014

This is one question that you cannot simply ask a product manager or a developer.

Product managers want to achieve the greatest customer coverage and it’s natural for them to choose to support, if possible, all browsers.

Developers want to use the most cutting edge technologies and they do not want legacy code to support the older browsers.

Each time this question is posed, the two groups frown at each other’s decisions. I generally go with supporting the latest 2 versions of Safari, Firefox, Chrome and Internet Explorer. That means I support Internet Explorer 10 and 11 only, and once Internet Explorer 12 is released, I drop support for Internet Explorer 10.

Faster testing

There’s significant test effort involved in testing over multiple browsers and if we need a product to ship fast, we need to work to simplify the implementation process. Let the QA testers have lesser to test so more features can be tested. Modern day browsers are more closely aligned, the chance of CSS not working is lower.

Faster development

Developers benefit from having to write lesser code, more importantly, they maintain lesser code. I can’t reiterate the hidden effort of having the maintain the code that is written. Code don’t just stay there are work for till the end of product lifeline; it needs to be kept up to date to the latest browser. Having legacy code coexist with current code requires developers to be really disciplined in maintaining.

Smaller file delivery size

Supporting lesser browsers mean cutting out the legacy code. This point is harder to sell to product managers because developers cannot answer how much larger will the JavaScript file be if a legacy browser is supported. It’s even less convincing to convey that the 30 kilobytes you save makes the app JavaScript download 20 ms faster.

What about customers who are using an old browser

Customers are important. We need to identify the customer that is using the older browser.

The questions to ask are:

  1. Can we afford to lose the customer to make product development go faster?
  2. Can we help the customer with upgrading to browser that is more modern?

If the answer to question 1 is a straight no, you may need to reconsider dropping support your customer’s favorite browser. To gently push the customer to upgrade, one way is to invite them to upgrade to use the newer features. For example, the product team plan for a new Live Analytics page, you can make that exclusive to modern browsers and urge your customers to upgrade. This way you can support the customer through the upgrade path while implementing the feature quicker.

Removing a class in an element

December 20, 2014

Isn’t it common to remove class from HTML? For example, I want to remove the class “foo”.

Removing class through jQuery:

To do this in JavaScript, you will need:

  1. Select the ID “mydiv”
  2. Get the class list of the selected element
  3. Remove the class “foo”

Let’s do this one by one.

1. Select the ID “mydiv”

There are many ways to select #mydiv. The most straightforward one will be:

If you prefer something more like jQuery, there is the document query selector that allows you to use a CSS-based syntax, similar to what jQuery lets you do:

2. Get the class list of the selected element

This is support by all modern browsers, including Internet Explorer 10.0. If you’re in the unfortunate situation of developing for Internet Explorer 9.0, you will need a shim (get it from Mozilla).

classList returns a token list of the class attribute of the element. It contains methods such as

  • add – Adds a class to an element’s list of classes. If class already exists in the element’s list of classes, it will not add the class again.
  • remove – Removes a class from an element’s list of classes. If class does not exist in the element’s list of classes, it will not throw an error or exception.
  • toggle – Toggles the existence of a class in an element’s list of classes
  • contains – Checks if an element’s list of classes contains a specific class

3. Remove the class “foo”

Now we can remove the class “foo” easily.

When to use jQuery and when not to?

Compare this jQuery solution:

to the vanilla JavaScript solution:

It’s obvious that jQuery is a lot more concise here. In most cases, jQuery’s shorter way is easier to read and understand, and if you’re adopting the jQuery library, you should go ahead to use jQuery’s solution. You do not need to worry on Internet Explorer 9.0 support as well.

However, the vanilla JavaScript solution has a significant performance benefit (unsurprisingly). You should consider using the non-jQuery solution in areas where it is within a loop. For example, if you need to loop through a set of table rows and adding or removing classes over many rows, the performance gained starts to become obvious.

In my organization, we encourage the usage of jQuery to get the nice benefits of chaining and the solution is often less alien to newer developers. It does look cleaner and more consistent with the larger part of our codebase. However we need to be mindful of performance tradeoffs when using jQuery; remember that performance matters most to users.

Slight change of directions

October 26, 2014

Previously I wanted JavaScript.sg to be more of a post-based blog of my every day development work however it may not be relevant to much people. I started to give more thought how this blog can be more relevant and also receive more organic visitors.

A few things I deem as important:

  1. Code quality and syntax highlighting
    Syntax highlighting previously just isn’t there. It makes things harder to read. This is corrected. Code are reduced to be more concise now.
  2. More lists
    Lists are always easier to maintain and it suits my work style. Typically I grow an article over time and it was looking like a list before it becomes a full article.
  3. Less of a blog, more of a magazine
    I’ll be queuing more posts rather than just publishing randomly from 2015.
  4. Better indexing by search engines
    I want search engines to be able to locate my articles better. That means a better set of maintained tags.

Other nice-to-haves:

  1. Twitter shares
    I want people to share my articles on Twitter. Perhaps a share button would be good although the previous time I have that, almost nobody clicks on them.
%d bloggers like this: