Tags: modules

Using the platform

Elise Hein documents what it was like to build a website (or web app, if you prefer) the stackless way:

• use custom elements (for modular HTML without frameworks)
• use the in-browser package manager (for JavaScript packages without build tools)
• match pages with files (to avoid routing and simplify architecture)
• stick to standards (to avoid obsolescence and framework fatigue)

Her conclusions are similar to my own: ES6 modules mean you can kiss your bundler goodbye; web components are a mixed bag—it’s frustrating that Apple are refusing to allow native elements to be extended. Interestingly, Elise feels that a CSS preprocessor is still needed for her because she wants to be able to nest selectors …but even that’s on its way now!

Perhaps we might get to the stage where it isn’t an automatic default to assume you’ll need bundling, concatenation, transpiling, preprocessing, and all those other tasks that we’ve become dependent on build tools for.

I have a special disdain for beginner JavaScript tutorials that have you run create-react-app as the first step, and this exercise has only strengthened my conviction that every beginner programmer should get to grips with HTML, CSS and vanilla JS before delving into frameworks. Features native to the web are what all frameworks share, and knowing the platform makes for a stronger foundation in the face of change.

The beauty of progressive enhancement - Manuel Matuzović

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.

Some great practical examples of progressive enhancement on one website:

• using grid layout in CSS,
• using type="module" to enhance a form with JavaScript,
• using the picture element to provide webp images in HTML.

All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.

Using ES6 modules for progressive enhancement | Blog | Decade City

It looks like modules could be a great way to serve modern JavaScript to modern browsers, and serve polyfills or older code to older browsers.

Bulb Design System

I really like the way that this pattern library includes research insights to provide justification for design decisions.

Bad Month for the Main Thread - daverupert.com

JavaScript is CPU intensive and the CPU is the bottleneck for performance.

I’m on Team Dave.

But darn it all, I just want to build modular websites using HTML and a little bit of JavaScript.

Designing Systems, Part 3: Components and Composition / Paul Robert Lloyd

Paul finishes up his excellent three part series by getting down to the brass tacks of designing and building components on the web …and in cities. His closing provocation has echoes of Heydon’s rallying cry.

If you missed the other parts of this series, they are:

1. Theory, Practice, and the Unfortunate In-between,
2. Layers of Longevity, and
3. Components and Composition

Maintaining and organising a pattern library - FutureLearn

Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.

Patterns & Modules: The Toast — 2015 Redesign

I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.

littleBits

This is such a brilliant and empowering idea: an open-source object-oriented to electronics, like LEGO bricks for circuit-building.

Newsvine - Newsvine Relaunches... Announcing Evergreen

Mike and the team have redesigned/realigned Newsvine with some nice customisation of the front page.