Shader Park: Create Interactive 2D and 3D Shaders with JavaScript — An open source Web-based platform, community, and library for simplifying the mystifying world of shaders and GPUs by letting you create them procedurally with JavaScript. Lots to play with and explore here. Note: This site is heavy on the browser given its use of WebGL, so may not be suitable for every device.

Blankensmith and Whidden

Prettier 2.6 Released — The popular code formatting tool now has a singleAttributePerLine option to only place one attribute per line (as is common in certain types of template), adds TypeScript 4.6 support, and better formats JS code in various contexts (e.g. decorators, inline await in JSX, end-of-line comments).

Sosuke Suzuki

Tired of Explaining Why Your Big Tech Cloud Bill Keeps Growing? — Vultr offers cloud compute and bare metal at a fraction of the cost of the other guys. Redeem your $150 credit today.

Vultr sponsor

How npm Packages Were Used in a Protest Against the War in Ukraine — A few days ago, users of projects reliant upon node-ipc (such as Vue CLI) began to notice odd behaviors, including files being overwritten on systems geolocated to Russia (or Belarus) and protest messages. This is a complex story and another reminder of how fragile the package supply chain can be. The Register has a shorter and news-ier writeup, if you prefer.

Liran Tal (Snyk)

Deno 1.20 Released — A pretty big release for the JavaScript / TypeScript runtime with increased performance, new commands for running benchmarks and test suites, timeouts for AbortSignal, plus an upgrade to V8 10.0 and TypeScript 4.6. If only all projects wrote release posts as thorough as this.

The Deno Core Team

How To Make a Drag-and-Drop File Uploader with Vue.js 3 — A whole four years ago, we linked to Joseph’s guide to making a drag-and-drop file uploader with vanilla JavaScript, but now he’s back to take on the same challenge with the latest version of Vue.js.

Joseph Zimmerman

A Delightful React File/Directory Structure — We have featured a number of these types of articles, but there’s always room for another perspective on the ‘right’ way to lay out a project, particularly as React itself is reasonably unopinionated on the matter.

Josh W. Comeau

How to Use JavaScript to Extend the Functionality of Your Chatbot — Create custom actions and extend the functionality of your NLU chatbot builder with JavaScript.

Botpress sponsor

The 'Double-Assignment Pattern' in jQuery's Source Code — The author found an interesting technique in jQuery’s code and set out to figure out its benefits.

Zhenghao He

Next.js's New Official 'Foundations' Course — Next.js released a new foundational course that covers the essentials of React, how it relates to Next.js, and building a first Next.js app.

Next.js

Remix vs Next.js — Remix is a relatively new React-based full-stack framework created by the original team behind React Router. It takes a different approach to the better known Next.js. This is a detailed guide to the key differences.

David Herbert

Creating a Simple Table Sorting and Pagination Feature — Rendering a sortable, paginated table with some help from JavaScript.

Raymond Camden

Announcing Build Matrix — See how we reduced a 402-line pipeline YAML down to 160 lines 📉

Buildkite sponsor

Upgrading Next.js for Instant Performance Improvements — A case study of how the Vercel team brought a Next.js 8 demo up to Next.js 12 standards and saw huge improvements in the process.

Lydia Hallie

Peaks 1.0: UI Component for Interacting with Audio Waveforms — Let’s say you’re building an audio editor of some kind - this is the sort of control you might want to use. And it’s from the BBC too, which is cool.

BBC

Wave.js 2.0: An Audio Visualization Library — If you don’t need to create an audio editor and just want a music go wub wub, lines go wiggle wiggle type of visualization, this is for you. There are some live demos here.

Austin Michaud

Faker 6.0: Generate Massive Amounts of Fake Data in Node or Browser — After an issue of a maintainer going 'rogue', a community team took over the popular Faker project and their first major release is now out, complete with ESM support. v5 to v6 migration instructions.

Faker.js Team

Pulumi: Developer-First Infrastructure with JavaScript

Pulumi sponsor

sysend.js: Send Messages Between Open Pages or Tabs in Same Browser — A small library that abstracts a mechanism for sending messages between pages open in the same browser. Supports cross-domain communication and is based on localStorage and the BroadcastChannel API. Here’s a demo (if you open it twice).

Jakub T. Jankiewicz

Chrome Extension CLI: The CLI for Your Next Chrome Extension — Want to get building an extension for Chrome as quickly as possible? This tool aims to get you on the right path ASAP.

Dutiyesh Salunkhe

js2xml: Convert JavaScript Code to an XML Document — Why? To make it easier to extract things from elsewhere using XPath, apparently.

Scrapinghub

Emoji Button: A Vanilla JavaScript Emoji Picker — Turns a button element into an emoji picker (similar to that some operating systems provide). GitHub repo.

Joe Attardi

Liqvid 2.1: Create Interactive Videos with React, HTML, CSS, and JS — Now lets you use the Web Animations API in videos too.

Yuri Sulyma