Books I Read in 2015

| Comments

I don’t actually have a habit of reading books, but I read a lot of articles from blog. I got into a habit of reading physical books late in 2013 & the feeling was unique.

You watch a movie, you are feeding your mind with the visuals you see. But when you read a book it let your mind imagine the scene happing on that particular sentence and that’s why I hope most of the people love reading books over movies.

I always believe in small and progressive goals than setting something high and end up with an disappointment of not winning(which may sometimes let you not to try that goal every again in your life), So I set a goal of reading 6 books in 2015. It wasn’t a tough challenge but I kinda feel happy when I complete my goal.

I’m planning to set a reading challenge every year and write about my accomplishment, the books I read & my opinion. This is first post in the series. Here is the set of books I read in 2015

1. Javascript: The Good Parts

by Douglas Crockford

I love Javascript like most web developer does, The first book I bought for learning Javascript is ‘Javascript The Definitive Guide’ a big book of course holds many useful information, but I feel that I made a mistake by purchasing a big book rather than starting with a small one. Reason being I got bored when I read the definitive guide as its so massive explain things in a detailed manner than a short understandable manner for beginner.

Good parts is fairly small book which holds nearly the main concepts of Javascript and of course only the good parts. I thought that’s enough for a beginner to learn the great things first and then try to optimise the way they code by skipping the bad parts.

2. You Don’t Know JS: Up & Going

by Kyle Simpson

You Don’t Know JS - That’s kinda pointing at me, I took it not in a negative but treat it as positive that If I read the book I can say “I Know JS”. So I bought first three books in the series of YDKJS

Another small book and very interesting indeed, Kyle had a style of explaining things short and provide with a nice example for the user to get a grasp of what he is trying to communicate.

3. Scope and Closures

by Kyle Simpson

After reading the first book of YDKJS by Kyle I can’t stop to open the next book in the series which turn out to be a good treasure to find out some nitty gritty parts about the scope and closures which is the most important part of Javascript.

4. Eat That Frog!: 21 Great Ways to Stop Procrastinating and Get More Done in Less Time

by Brain Tracy

Man this book is one master piece, it changed my life. One of my client recommended this book I just bought it to check what’s in it, which turned out to be a best book I read after “Rework" by Jason Fred. Everything in the book is organised and it will make you organise in your tasks, Focus on major things and the 21 ways is the way to success.

I strongly recommend this book to people in all fields to grow up to the next level in their career.

5. Learning Javascript Design Patterns

by Addy Osmani

After learning good parts, know how things work from YDKJS first two books, I took the Design patterns book which I purchased but not read for sometime. I feel that it’s correct time to read about design patterns and apply in some of my code. The book is not only for learning design patterns, it gives me ideas to think of the way I should write the code before even coding.

“You follow a design pattern which suits your need and you are already avoiding problems and writing a well organized code”

6. Wings of Fire: An Autobiography

by A.P.J. Abdul Kalam, Arun Tiwari (Contributor)

Pretty inspiring story of boy from small village in Tamilnadu growing to rocket man who put India in the top countries which excels in Missile & Rocket Technology.

PS: This is just quick post which I manage to do it, Will add more details soon.

Polyfilling and Transpiling

| Comments

Before we go into Polyfilling and Transpiling, let’s understand a few things. The current version of javascript at the time of writing this post is ES5; although the next version of javascript ES6 specification is approved we can’t use it just like that today cause of the following reasons

a) New syntax is not recognized in older browsers. b) Some of the new features in the specification aren’t even implemented in any stable browsers yet.

So, what do you do with the new stuffs? Do you just have to wait around for years for all the old browsers to fade away & be patience for browser vendors to implement the new features. Well it’s not a good idea right?

To resolve this problem comes two main techniques you can use to bring the newer JavaScript stuff to the older browsers: polyfilling and transpiling.

Polyfilling

The word “Polyfill” is an invented term (by Remy Sharp) used to refer talking the definition of a newer feature and producing a piece of code that’s equivalent to the behavior, but is able to run in older JS environments.

For example, ES6 defines a utility called Number.isNaN(..) to provide accurate, non-buggy check for NaN values, deprecating the original isNaN(..) utility. But it’s easy to polyfill that utility so that you can start using it in your code regardless of whether the end user is an ES6 browser or not.

Consider:

1
2
3
4
5
if (!Number.isNaN) {
    Number.isNaN = function isNaN(x) {
        return x !== x;
    };
}

The if statement guards against applying the polyfill definition in ES6 browsers where it will already exist. If it’s not already present, we define Number.isNaN(..).

Note: The check we do here takes advantage of a quirk with NaN values, which is that they’re the only value in the whole language that is not equal to itself. So the NaN value is the only one that would make x !== x be true.

Not all new features are fully polyfillable. Sometimes most of the behavior can be polyfilled, but there are still small deviations. You should be really, really careful in implementing a polyfill yourself, to make sure you are adhering to the specification as strictly as possible.

Or better yet, use an already vetted set of polyfills that you can trust, such as those provided by ES5-Shim and ES6-Shim.

Transpiling

There’s no way to polyfill new syntax that has been added to the language. The new syntax would throw an error in the old JS engine as unrecognized/invalid.

So the better option is to use a tool that converts your newer code into older code equivalents. This process is commonly called “transpiling,” a term for transforming + compiling.

Essentially, your source code is authored in the new syntax form, but what you deploy to the browser is the transpiled code in old syntax form. You typically insert the transpiler into your build process, similar to your code linter or your minifier.

You might wonder why you’d go to the trouble to write new syntax only to have it transpiled away to older code – why not just write the older code directly?

There are several important reasons you should care about transpiling: - The new syntax added to the language is designed to make your code more readable and maintainable. The older equivalents are often much more convoluted. You should prefer writing newer and cleaner syntax, not only for yourself but for all other members of the development team. - If you transpile only for older browsers, but serve the new syntax to the newest browsers, you get to take advantage of browser performance optimizations with the new syntax. This also lets browser makers have more real-world code to test their implementations and optimizations on. - Using the new syntax earlier allows it to be tested more robustly in the real world, which provides earlier feedback to the JavaScript committee (TC39). If issues are found early enough, they can be changed/fixed before those language design mistakes become permanent.

Here’s a quick example of transpiling. ES6 adds a feature called “default parameter values.” It looks like this:

1
2
3
4
5
6
function foo(a = 2) {
    console.log( a );
}

foo();      // 2
foo( 42 );  // 42

Simple, right? Helpful, too! But it’s new syntax that’s invalid in pre-ES6 engines. So what will a transpiler do with that code to make it run in older environments?

1
2
3
4
function foo() {
    var a = arguments[0] !== (void 0) ? arguments[0] : 2;
    console.log( a );
}

As you can see, it checks to see if the arguments[0] value is void 0 (aka undefined), and if so provides the 2 default value; otherwise, it assigns whatever was passed.

In addition to being able to now use the nicer syntax even in older browsers, looking at the transpiled code actually explains the intended behavior more clearly.

You may not have realized just from looking at the ES6 version that undefined is the only value that can’t get explicitly passed in for a default-value parameter, but the transpiled code makes that much more clear.

The last important detail to emphasize about transpilers is that they should now be thought of as a standard part of the JS development ecosystem and process. JS is going to continue to evolve, much more quickly than before, so every few months new syntax and new features will be added.

If you use a transpiler by default, you’ll always be able to make that switch to newer syntax whenever you find it useful, rather than always waiting for years for today’s browsers to phase out.

There are quite a few great transpilers for you to choose from. Here are some good options at the time of this writing:

Babel (formerly 6to5): Transpiles ES6+ into ES5 Traceur: Transpiles ES6, ES7, and beyond into ES5

10 Must Watch - Courses for Web Developers

| Comments

Curated top list of useful screencast and courses

1. JavaScript Best Practices

From Code School: “Become a more informed, conscientious user of JavaScript as you explore time-tested, useful techniques that will improve legibility, performance quality, and safety in your scripts.”

2. DevFreeCasts

A huge collection of free screencast for developers ranging from nodes.js, angular, web technologies to app development to application development languages like java, etc.,

3. Learn to Code Advanced HTML & CSS

Learn to Code Advanced HTML & CSS takes a deeper look at front-end design and development, expanding on what is covered in the beginner’s guide. Studying modern front-end development, this guide teaches the latest for any designer looking to round out their front-end skills.

4. Code Avengers

Why just use technology? When you can create it. Learn to build websites, apps and games with HTML, CSS & JavaScript. That’s what they say!

Choose from 100 hours of lessons on how to code.

5. JS Must Watch

A GitHub repo with a collection of JavaScript videos, categorized by year.

6. Must-Watch CSS

Another useful repo, this time focused on CSS videos, again listed by year.

7. An Introduction to APIs

An 8-part series on the concepts of APIs, with stuff here from beginner to advanced.

8. Web Performance Crash Course

A YouTube playlist of Fluent 2013 videos by Ilya Grigorik on website performance.

9. A to Z CSS

A really well produced screencast series covering various topics on CSS.

10. The Magic of CSS

CSS is a mess. We all love it, but it’s a mess. I liken it to English: there are a bunch of rules, and you can learn them. But sometimes you’re better off just trying shit and seeing what works and what doesn’t. Magic is a codification of what I’ve learned in that crazy process.

If you think you have a better list or something which I miss, sharing it with me on Twitter would be of great help!

SublimeText Plugins — I Use

| Comments

My favorite, timesaving & productive plugins

I know Sublime Text from the very beginning when they release it’s first public beta version. The best parts of sublime text is the performance, light weight, minimal layout, last and the best one is the ‘plugins’ — which saves a lot of time and helps use the IDE very effectively to boost the productivity

This article I’m sharing the plugins which I use everyday. You can have a look at the plugin repo here here

1. Package Control

I don’t know why sublime text app doesn’t comes with this as it’s a necessary feature to install plugins. I mostly use Package control for couple of things

a) To install plugins, all you need to type is “cmd + shift+ p” then “install” to load the repository. Once the repository is loaded you can start typing the plugin name, Hit the return/Enter key; when u find your plugin to install. You can check the installation progress on the status bar in the bottom.

b) To highlight syntax of CSS for SCSS files. Open the file you want to highlight the syntax, type “shift + cmd + p” and type “css” to highlight the opened file

2. Emmet

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

In simple words, its just a shorthand for HTML & CSS which saves you from writing more coding. The cheatsheet show how your shorthand codes will be complied. If you use Emmet, I bet you will never go back.

3. Browser Refresh

Save the file you are working on and refresh your browser with one keystroke. Very handy plugin, which does the browser refresh in a clever way.

No need for live reload, no need of any configuration in your project. After editing your code in the editor just press “cmd + shift + r” Browser Refresh will save the current file and refresh the last active tab in the browser for you.

4. Git Gutter

A plugin to see git diff in your gutter. If you don’t have this plugin you would have doing in the terminal.

GitGutter is very useful to identify the piece of code you have written after the last commit right inside the editor.

5. Bracket Highlighter

Bracket Highlighter matches a variety of brackets such as: [], (), {}, <tag></tag>, and even custom brackets. It will show the visual hint of where your bracket is ending.

This helps a lot in debugging the code by highlighting the scope.


I use some other common plugins like JSLint, SublimeLinter, SodaDarkTheme, Dracula Color Schema, etc,. but I just want to write the most useful top 5 plugins from my preference.

Tweet me your favorite SublimeText Plugin