Some JavaScript (ECMAScript) features are easier to understand than others. look weird — like pointers in C/C++. manage to look like both primitives and objects at the same time.

These features are all inter-related and build on each other. So you can’t understand one thing without understanding the other.

So in this article, I’ll cover ,,, , , and . I’ll explain “why” they are there in the first place and also show how they work with some useful examples.

This is relatively advanced subject, but it’s not rocket science. …


It’s hard to keep track of what’s new in JavaScript (ECMAScript). And it’s even harder to find useful code examples.

So in this article, I’ll cover all 18 features that are listed in the TC39’s finished proposals that were added in ES2016, ES2017, and ES2018 (final draft) and show them with useful examples.

This is a pretty long post but should be an easy read. Think of this as “Netflix binge reading.” By the end of this, I promise that you’ll have a ton of knowledge about all these features.

OK, let’s go over these one by one.


Photo by Glenn Carstens-Peters on Unsplash

EcmaScript 2015 (aka ES6) has been around for couple of years now, and various new features can be used in clever ways. I wanted to list and discuss some of them, since I think you’ll find them useful.

If you know of other tips, please let me know in the comment and I’ll be happy to add them.

1. Enforcing required parameters

ES6 provides default parameter values that allow you to set some default value to be used if the function is called without that parameter.

In the following example, we are setting the function as the default value for both and…


In this blog I’ll cover installing ITerm2, ZSH shell, “oh my ZSH”, Themes, ITerm2 color schemes, “oh my ZSH” plugins and enable “ligature” support to help create a beautiful and powerful Terminal.

If you want to just make your regular Bash Terminal powerful, take a look at my previous blog: “Jazz Up Your Bash Terminal”. But ZSH explained in this blog is more powerful stuff.

Summary:

We’ll be covering a lot of things. This may be confusing, so here is the summary of what we will be doing.

  1. Install ITerm2 — This is a better alternative to the default Terminal
  2. Install…


In this blog I’ll go over steps to add Themes, Powerline, fonts, and powerline-gitstatus to make your regular Bash Terminal look beautiful and useful as shown in the picture above.

It turns out, if you are using Mac, you’ll need to jump through a lot of hoops to get this working as many instructions are for linux, or, is out of date, so I thought of blogging it, hopefully it help you.

Notes:

1. Follow the steps carefully as any mistake will cause a lot of headache. 😱

2. This is for MacOS and for regular bash in the Terminal.app…


The history of the web and JavaScript is truly fascinating. 😲

So I created this 19-minute video to help web developers understand it and learn from it.

In summary, you’ll learn the following:

  • What JavaScript, the DOM, and CSS are, and how they came about.
  • What ECMAScript, W3C, and TC39 are, and how they came about.
  • That the evolution of these technologies didn’t happen in straight lines. There will be periods of chaos, periods of stagnation, periods of innovation, and so on.
  • Contrary to the myth that “startups innovate and big companies don’t do much”, big companies do innovate…


Flow-chart showing how VDOM works in Preact

Virtual DOM (VDOM aka VNode) is magical ✨ but is also complex and hard to understand😱. React, Preact and similar JS libraries use them in their core. Unfortunately I couldn’t find any good article or doc that explains it in a detailed-yet-simple-to-understand fashion. So I thought of writing one myself.

Note: This is a LONG post. I’ve added tons of pictures to make it simple but it also makes the post appear even longer.

I’m using Preact’s code and VDOM as it is small and you can look at it yourself with ease in the future.


If you are concerned about React’s size and performance (especially for mobile-web apps), there are several React clone libraries that have exact same APIs as React but with tiny size and claim to perform better than React. Preact is one such library.

As for as the performance goes (for a Todo app), it looks pretty AMAZING! Almost same as Mithril is just incredible!


If you are building a React + Redux App that has Webpack, then you might have noticed that the size of the final bundle.js (the dev version) for a simple app itself could be 1MB- 2MB!

For example: Below is a picture from Webpack stats analyzer for the simple react-redux-blog (live). It shows that total size is 1.5MB and 90% (1.2MB) is just libraries in node_modules!

It could be scary😱 but Webpack and Node.js has all the tools you need to reduce the size.

I could reduce the size from 1.5MB …


You may have heard that Redux depends on “pure functions” from functional programming. Well, what exactly does that mean?

The picture below shows a simple Todo app from Redux examples. It currently has four tasks. It shows the fourth one as completed, and is set to show “All” Tasks — both completed and not completed.

The right-hand side shows the current state stored in Redux. It’s a simple JavaScript object that captures all the details in one place.

That’s the beauty of Redux.

rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store