Native ECMAScript modules - the first overview

The 2016 year was incredible in terms of the browser and Node.js applying the ECMAScript 2015 specification. Now we are facing the situation when the support amongst them is close to 100%:

But the standard actually introduced also ECMAScript modules (today also often named ES or ES6 modules). It’s the only part which took (and still taking) the most time to implement as none browser published it yet in the stable version.

Recently Safari 10.1 (Safari Beta), Firefox 54 (Nighly) and Edge 15 (next EDGE version) shipped the native implementation out of the box or behind a flag, so the time we can use this without module bundlers is coming.

To understand better how we come to this point let’s start from the JS modules history and then take a look at the current Native ES modules features and implementations.

...

Node.js debugging with Chrome DevTools (in parallel with browser JavaScript)

Recently Paul Irish described how you can debug Node.js applications with Chrome DevTools.

Since that time Chrome DevTools have evolved and the step, where you had to open the separate page with a specific URL to debug the Node.js code, was removed.

It means, today you can debug your browser JavaScript files and Node.js ones in the same DevTools window in parallel, which makes the perfect sense.

Let’s take a look how it works.

...

Progressive Web Apps: How to migrate to HTTPS

This is the first of articles where I want to describe how to migrate/extend your web app to being a Progressive Web App

Main points of a Progressive Web App are:

  • it’s secure (uses HTTPS)
  • app install banners give users an easy way to add the app to their home screen/launchpad
  • service worker makes the app load nearly instantly and work offline
  • application is responsive (phones, tablets and laptops)
  • ability to send users web push notifications
  • smooth and great user experience

Let’s start from the first item and add security (HTTPS).

...

CSS @apply rule (native CSS mixins)

In my previous article CSS custom properties (variables) In-Depth I described CSS custom properties (variables) and variations of their usages.

If you started thinking to move from CSS preprocessors to plain CSS after that- next your question might be: “what about mixins”?

And voilà- there is not only an editor’s draft- https://tabatkins.github.io/specs/css-apply-rule/

but even working implementation in Chrome- https://www.chromestatus.com/feature/5753701012602880

Before continuing reading, make sure you understand the terms of CSS custom properties and CSS mixins.

...