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 …

CodeSwing — Interactive Coding Playground (like CodePen, JSFiddle, etc.) Extension for Visual Studio Code

The Visual Studio Code extension named “CodeSwing” just blew my socks off. CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications (“swings”). It’s like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but in Visual Studio Code! Using the Command Palette you can create …

Partytown: Run Third-Party Scripts off the Main Thread in a Web Worker

The folks from builder.io set out to create a way to prevent Third-Party Scripts from blocking the main thread. The result is Partytown, which runs Third-Party Scripts Within a Web Worker. Partytown is able to sandbox and isolate third-party scripts within a web worker and allow, or deny, access to main thread APIs. This includes …

Motion One — WAAPI Powered Animation Library

A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance. import { animate } from “motion” const boxes = document.querySelectorAll(".box"); animate(boxes, { backgroundColor: "red" }); Motion One → Be sure to also read the “Improvements over WAAPI” page.

“Learn Alpine.js“ Free Video Course

Over at Codecourse you can follow a free video course covering the aforementioned Alpine.js. Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along …

perfect-freehand — Draw perfect pressure-sensitive freehand lines

What a wonderful package by Steve Ruiz: Draw perfect pressure-sensitive freehand lines The results are stunning imo. In the recording above you can see me write hello using the trackpad on my Mac. Yep, that’s without a stylus! Embedded below you can find a Vanilla JS demo, inspired upon the code from the React code …

Support Import Maps in any browser with es-module-shims

JavaScript Import Maps – which I wrote about earlier here — are a great addition to the web. Unfortunately they’re only supported in Chromium 89+. Thankfully there’s a polyfill available: es-module-shims. As long as your browser has baseline ES Module Support (Chrome 61+, Firefox 60+, Safari 10.1+, and Edge 17+) the polyfill will work. To …

Don’t attach tooltips to document.body

Very good performance deep dive on why you shouldn’t attach tooltips to document.body, but to a div that’s a direct child of the <body>. Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything. The main reason for the slowness of Tooltip was “Recalculate …

Random Paint Effects with Houdini

Speaking of George Francis in the previous post: in the latest episode of HTTP 203 Jake talks Surma through recreating these Houdini-powered “Fleck Patterns” George created before. Generative Houdini Stuff! ✨Create always-unique, responsive, “fleck” patterns — all without leaving your CSS 🎨Pass in a seed value, up to 8 colors of your choice, and a …