Category: modules

Understanding ES6 Modules

This article explores ES6 modules, showing how they can be used today with the help of a transpiler. Almost every language has a concept of modules — a way to include functionality declared in one file within another. Typically, a developer creates an encapsulated library of code responsible for handling related task...

How to Bundle a Simple Static Site Using Webpack

Webpack is all the rage right now. It has over 30,000 stars on GitHub and has been embraced by some of the big guns in the JavaScript world, such as the React and Angular. However, you don’t need to be working on a large-scale project to take advantage of Webpack. Webpack is primarily a bundler, and as such you c...

Introduction to FuseBox — a Faster, Simpler webpack Alternative

webpack has arguably become the de facto JavaScript module bundler, but it has a reputation for being confusing and difficult to learn. In this article, I want to present a faster, simpler webpack alternative — FuseBox. In today’s rapidly evolving front-end landscape, it’s vital to have a solid grasp of the Java...

ECMAScript Modules in Browsers

As Jake Archibald says, they are starting to land! The support landscape is already: Safari 10.1. Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags. Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config. Edge 15 – behind the Experimental JavaScript Features setting...

ES6 modules support lands in browsers: is it time to rethink bundling?

Modules, as in, this kind of syntax right in JavaScript: import { myCounter, someOtherThing } from 'utilities'; Which we’d normally use Webpack to bundle, but now is supported in Safari Technology Preview, Firefox Nightly (flag), and Edge. It’s designed to support progressive enhancement, as you can safely...

A Beginner’s Guide to Webpack 4 and Module Bundling

Webpack is a module bundler Webpack has become one of the most important tools for modern web development. Primarily it’s a module bundler for your JavaScript but it can be taught to transform all of your front-end assets like HTML and CSS, even images. It can give you more control over the number of HTTP req...

10 Tips to Become a Better Node Developer in 2017

I started working with Node full-time in 2012 when I joined Storify. Since then, I have never looked back or felt that I missed Python, Ruby, Java or PHP — languages with which I had worked during my previous decade of web development. Storify was an interesting job for me, because unlike many other companies, Storif...

Learning from Lego: A Step Forward in Modular Web Design

Samantha Zhang: When web components are modular like Lego bricks down to the elements level, they become more versatile and easier to maintain. We believe it’s the next step to take in modular web design. It’s a clever system: put a half-gutter around all elements and a half-gutter around the containers. That...

Building Resizeable Components with Relative CSS Units

The following is a guest post by Ahmad Shadeed. Ahmad has put together a ton of examples to show off how using relative units can benefit us. I think a lot of us think of units like em as being for font-size, which it is, but can also be for lots of other things, tying together typographic sizing and other visual eleme...

Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp

ECMAScript 6 (a.k.a ECMAScript 2015 or ES6), the specification for next version of JavaScript has been approved and browser vendors are hard at work implementing it Unlike the previous versions of ECMAScript, ES6 comes with a huge set of changes to the language to make it a good fit for the scale at which it is used t...