Book review: JavaScript Allongé “Six” Edition

July 25, 2015

Reg “raganwald” Braithwaite updated his book, JavaScript Allongé, to include ES6 in it.

javascript-allonge

In the new “Six” Edition, brand new chapters are added specific to ES6 (or ECMAScript 2015 if you prefer). If you’re looking for a book to start learning JavaScript, this is an excellent book too begin with.

If you had the previous JavaScript Allongé book, you will definitely be delighted that all previous examples have been rewritten to use “const”, “let” and other ES6 goodness. I consider this an almost full rewrite.

The focus is largely on functions and ES6’s new function syntax made things so much more readable.

There is a section on composing class behaviors which introduces ES6 classes and mixin patterns that I learnt a lot from.

Buy his book here. You can also begin with a free sample here.

Why should you not use semicolons

July 20, 2015

I went through this discussions a lot, whether you should use semicolons or not. After a while it felt like a lot of unnecessary discussions was coming through. Most people are arguing are arguing on familiarity and that’s hard to sell.

This video provides a good explanation why you should probably not have semicolons:

I’ve been coding JavaScript in my day job of the past 2 years and I just switch my company to not use semicolons. There was initial confusion but within 2 weeks, everyone pretty much goes on just fine.

Overview of Babel

July 16, 2015

Cool explanation of how Babel works. A must-watch if Babel’s already part of your workflow and you want to learn more:

Sebastian McKenzie speaks on improving Your Workflow With Code Transformation.

Testing default and rest parameters

June 7, 2015

Take a look at this example. I set default parameters for ‘a’ and ‘b’ in the function.

If the parameter is not set with a default value, it behaves very much like how it would in ECMAScript 5.1 — undefined. See the parameter c.

The final parameter is a rest parameter ...d, i.e. 3 periods followed by the variable name. This is supposed to take over the older arguments variable. It will always be defaulted to an empty array.

Happy 2nd birthday React.js

May 31, 2015

Happy 2nd birthday React.js. Kind of:

I didn’t realized React.js has been 2 years of fun. At my workplace we shifted to React.js and then out. It’s unfortunate but till the next time we meet!

io.js 2.2.0 released

May 31, 2015

There’s a new io.js release:

Speed-up require() by replacing usage of fs.statSync() and fs.readFileSync() with internal variants that are faster for this use-case and do not create as many objects for the garbage collector to clean up. The primary two benefits are: significant increase in application start-up time on typical applications and better start-up time for the debugger by eliminating almost all of the thousands of exception events.

Full changelog

Grab it here.

[UPDATE: requests changes broke npm and bower on Windows, Linux and Mac OS X. You should wait for the 2.2.1 version.]

Using Uglify’s screw-ie8 option in gulp

May 30, 2015

UglifyJS tries to be IE-proof, you can pass a flag in Uglify if you don’t care about full compliance with Internet Explorer 6-8 quirks. Previously I wrote about how to screw IE8 in grunt.

You can run

However if you are using gulp.js, this is how you can do that:

Several things to notice here:

  1. I use gulp-uglify/minifier so that I can specify my own version of uglify-js
  2. I use gulp-rename to add a suffix to the filename
  3. The screw_ie8 parameter needs to be passed into compress and mangle as options.

It’s really time to move on and ignore IE8.

Share with me other tricks if you have any.

Using npm for browserify and uglify

May 24, 2015

Previously I use gulp.js a lot; I’ll have a gulp file that does everything.

Why you should keep gulp tasks to the minimal

  • Gulp provides another interface to your actual toolchain, it’s much easier to understand the command line since those are pretty well documented.
  • You can trapped by the version of your toolchain supported by the gulp friendly plugin. For example, gulp-less may have an older or newer version of LESS.js that you want to use.
  • Lesser dependencies is makes things neater.

You should keep gulp where more complex tasks comes in.

Using just command line

Here’s an example of my typical toolchain. Let’s start with LESS.

LESS to CSS generation

This one is pretty straightforward:

I didn’t need JS and Internet Explorer compatibility and I want to be able to compress the CSS. This requires you to do:

Browserify

Browserify is a module bundler. I use React.js and browserify brings in the dependencies into one file.

The command itself:

You can also run the corresponding watchify command

Minifying JavaScript through uglify

You can uglify using the following command. The following command does compression and mangling:

Using npm to manage your scripts

You can put the less, browserify and uglify script into package.json’s scripts.

Now that they are in the scripts, you can do these:

Notice that you are also combine npm script commands by using &&.

If you use React.js, you will need babelify as well. You can add the following transform in package.json:

Browserify will use the transform in package.json and you do not need to specify the transform in the command line all the time.

In React.js you should compile the production version this way.

Using uglify, you can remove dead code.

%d bloggers like this: