ECMAScript Proposals Overview

Saad Quadri created a handy website that lists all ECMAScript Proposals. On one single page you can get a quick glimpse of all proposals and the current stage they are in. Great to see that the various stages of the TC39 Development Process themselves —something I always mention in my ever-evolving talk on ESNext— get …

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)

🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes. Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please …

Yes, we use a Joy-Con to change slides. Here’s how… | HTTP 203

In this episode of HTTP 203 Jake and Surma go over the code that’s needed to use a Joy-Con (a Nintendo Switch Controller) on the web, which they also use for their own slide decks. As mentioned it’s not possible to get the orientation of the Joy-Con via (the current version of) the Gamepad API. …

Tonic — A thin wrapper around Web Components

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free. Basic component definition is really simple: import Tonic from "https://cdn.skypack.dev/@optoolco/tonic" class MyGreeting extends Tonic { render () { return this.html`<div>Hello, ${this.props.name ?? 'Stranger'}.</div>` } } Tonic.add(MyGreeting); Tonic will automatically convert the CamelCased class name to the proper custom element name. <my-greeting></my-greeting> …

Alpha Paintlet

Dave Rupert created a little lovely Houdini Paint Worklet that allows you set a background color with an alpha on elements. The Worklet’s code is as simple as this: registerPaint(‘alpha’, class { static get inputProperties() { return [‘–bg-alpha’, ‘–bg-color’] } paint(ctx, size, props) { ctx.globalAlpha = props.get(‘–bg-alpha’); ctx.fillStyle = props.get(‘–bg-color’); ctx.fillRect(0, 0, size.width, size.height); } …

Natively Format JavaScript Dates and Times

Elijah Manor digs into Date’s toLocaleDateString() and toLocaleTimeString() methods to format Dates and Times in JavaScript, with respect to a passed locale. const date = new Date(); console.log(date.toLocaleDateString(‘en-US’)); // 7/19/2020 const dateOptions = { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’, }; console.log(date.toLocaleDateString(‘en-US’, dateOptions)); // Sunday, July 19, 2020 console.log( date.toLocaleDateString(‘fr-FR’, { month: ‘long’, …

Tachometer – Statistically rigorous benchmark runner for the web

From the Polymer team: Tachometer is a tool for running benchmarks in web browsers. It uses repeated sampling and statistics to reliably identify even tiny differences in runtime. To compare two files, run it like so: npx tachometer variant1.html variant2.html Tachometer will open Chrome and load each HTML file, measuring the time between bench.start() and …

ESNext: Import Assertions (JSON Modules, CSS Modules, …)

Did you know you can import JSON and CSS files just like you import JavaScript Modules? Thanks to Import Assertions, it’s as easy as this: Building upon "Import Assertions" we recently saw JSON Modules land in V8/Chromium 91: “`import json from './foo.json' assert { type: 'json' };“` In Chromium 93 the same thing for CSS …

Google Maps JavaScript API WebGL

I’m a huge mapping nerd, so I’m a sucker for the Maps JavaScript API WebGL beta which was announced at Google I/O back in May: Introduced are three new features: WebGL Overlay View lets you add custom 2D and 3D graphics and animated content to your maps. Tilt and heading can now be adjusted programmatically, …

Percollate — A command-line tool to turn web pages into beautiful, readable PDF, EPUB, or HTML docs.

Percollate is a command-line tool that turns web pages into beautifully formatted PDF, EPUB, or HTML files. Installation per NPM npm install -g percollate Once installed you can, for example, run this: percollate epub https://brm.us/at-layer -o css-at-layer.epub Percollate will automatically extract the main content (powered by Mozilla’s Readability.js), perform some enhancements on it (such as …