Sliderland: A Minimalist Coding Playground — No obvious top feature this week so I’m leading with a little project I’ve enjoyed playing with. It’s a slider-style visualization you can code with simple formulas (check out this one). The code is simple but packs in some neat features such as a WebAssembly-powered MP4 recorder, courtesy of ffmpeg.wasm.

blinry

Playwright Can Now Test React, Vue and Svelte Components — Playwright, Microsoft’s browser control library for Node.js, takes an interesting step in allowing you to programattically test your components using all of Playwright's features using Playwright Test (Playwright's own test runner). Here are the docs.

Microsoft

Headless CMS with World-Class TypeScript Support — Kontent handles all your content management. Streamline your code using TypeScript SDK, CLI, Rich Text resolver, and strongly typed Model Generator and scale with no problems when your project grows. Have you seen our UI?

Kontent by Kentico sponsor

Web Applications 101 — A single article that touches on a lot of structural concepts involved in building a modern Web site from the simplest of HTML pages through to server-side rendering (SSR) and static-site generation (SSG). Not a tutorial but paints the architectural picture for you.

Robin Wieruch

Building an Animated Piano Keyboard with JavaScript and MIDI — If you liked Tania Rascia’s accordion last week, this beautifully presented post is for you. The work Jamie is doing is feeding into his jazz piano training site too.

Jamie Smith

Rust for JavaScript Developers: Preorders Closing Soon — A comprehensive course that teaches you everything you need to know to get productive in Rust via text, interactive visualizations and videos.

Rust for JavaScript Developers sponsor

Why You Don't Need void 0 — JavaScript’s void operator has been used in some interesting ways over the years versus undefined but Lars thinks undefined is now the better option.

Lars Grammel

RFC 9239: Updates to ECMAScript Media Types — One of those “do I need to know this, even though it sounds important?” topics. Dr. Axel keeps it simple but essentially JavaScript’s MIME type is now unambiguously text/javascript and .mjs is a registered file extension for JS modules.

Dr. Axel Rauschmayer

Software Supply Chain Attacks Are No Joke — Industry experts expect supply chain attacks to increase by a factor of four over the course of 2022. Get the guide to Preventing JavaScript Supply Chain Attacks.

Feroot Security sponsor

Deploying Node-RED to Google App Engine — Node-RED is a JavaScript-powered low-code event-driven programming environment commonly associated with IoT and bringing together hardware devices in various ways. But you can deploy it in the cloud, too, to create your own automation systems.

CodeREVUE

JSON Mask: A Way to Select Specific Parts of a JS Object — Give JSON Mask an object and a (XPath-esque) query and you get back an object with the same structure but only the required parts included with the rest ‘masked’ (hence the name).

Yuriy Nemtsov

Fontkit: An Advanced Font Engine for Node and Browser — Works with TrueType, OpenType, WOFF, and other formats - supports mapping characters to glyphs, substitutions, reading metrics, laying out glyphs, font subsetting, and more. Used as part of the PDFKit PDF generation library.

foliojs

PushIn.js: A Lightweight Parallax / Dolly / Push In Effect for Web Pages — Simulates an interactive dolly-in or push-in animation when scrolling. The homepage is itself a live demo.

Nathan Blair

Vuestic 1.4.0: An Open Source UI Library for Vue 3 — A library of more than 50 customizable components. 1.4.0 brings Nuxt 3 support plus new carousel and counter components.

Epicmax

Free Activity Feeds & Chat APIs for Qualifying Teams

Stream sponsor

Timewave: A Tiny Clock and Date Library (with Simulation Support) — Boasting “much of the same functionality as MomentJS and its replacement Luzxon in a smaller package”, this library also lets you run multiple clocks in parallel at different speeds. GitHub repo.

Simon Y. Blackwell

Elder.js: An SEO-Focused Svelte-Based Static Site Generator — Designed for building SEO-friendly sites at scale and the name isn’t just random, it’s used in production to run a site about finding senior housing.

Elder.js Team

minimatch: A Glob Matcher — Converts glob-style expressions to regexes. Used internally by npm.

Isaac Z. Schlueter

A React Router Implemented in Under 100 LOC — One of those sorts of experiments that anyone can learn from.

Ashok Khanna