Month: May 2024

#​689 — May 23, 2024

Read on the Web

JavaScript Weekly

Creating Realistic Handwriting with p5.js — Amy wanted to programatically bring her (cursive) handwriting into some diagrams she was making and figured out how to make it happen with p5.js. Here’s how.

Amy Goodchild

SolidStart 1.0: The Shape of Frameworks to Come? — SolidJS is a React-inspired declarative UI library but with a performance focus and templates compiled to real DOM nodes receiving direct DOM updates – no VDOM. SolidStart is a framework for building and deploying SolidJS apps with many compelling features right out of the box.

SolidJS Core Team

WorkOS: Enterprise-Grade Auth You Can Implement in Minutes — Like an enterprise plan in a box: WorkOS provides flexible, easy-to-use APIs to integrate SSO, SCIM, Audit Logs, User Management, and more. Used by some of the hottest startups including Perplexity, Vercel, & Webflow. Future-proof your auth stack with WorkOS.

WorkOS sponsor

Angular v18 Released — The large-scale framework got a big public revival last year with Angular 17 and its new homepage. Things continue to progress with experimental support for zoneless change detection and the new built-in control flow approach becoming stable.

Minko Gechev

IN BRIEF:

Ever considered trying the Go language? One JavaScript developer did and shared their first impressions.

Remix’s Ryan Florence has posted an update to clear up any confusion around the so-called ‘merging’ of React Router and Remix.

Vercel has raised $250m in a Series E round, valuing it at $3.25bn.

The maintainer of the Node LDAP library has decommissioned it after vile abuse. If you’re having trouble with an open source project, be nice.

🗳️ The 2024 Stack Overflow Developer Survey is now live until June 7.

RELEASES:

Next.js 15 Release Candidate

ESLint v9.3.0

Node.js v18.20.3 (LTS)

📒 Articles & Tutorials

City in a Bottle: Raycasting in 256 Bytes — Frank has a great reputation for putting together stunning visual demos with the tiniest amounts of JavaScript. This is no exception. He goes into a lot of detail about how it works; you’ll learn a few things and/or come away awe-struck.

Frank Force

🌆 His dissection of a similar visual demo a few years ago is fantastic too.

5 Easy Tips to Improve Your Personal Website Performance — Salma Alam-Naylor shares easy ways to give your personal website (and all other websites, in fact) a performance boost.

Sentry sponsor

▶  The React Compiler: Going In-Depth — Last week we mentioned the open sourcing of the new React Compiler, but if you want to see it in action, this is for you. Jack’s excitement is palpable.

Jack Herrington

💡 Ricky Hanlon of the React team has put together a fantastic recap of last week’s React Conf 2024 if you want to get up to speed.

Chrome DevTools Offers AI for Understanding Errors and Warnings — Not everyone is going to like this, but it’s optional. Also: the first Chrome feature that requires you be over 18?

Guo, Emelianova, and Yeen (Google)

📊 A Guide to JS Performance Analysis with Chrome DevTools — If your prefer your debugging experience AI-free, rest easy. This is a thorough walkthrough of the practicalities of using the Chrome DevTools for digging into performance issues.

Jiayi Hu

Software Consultants Your Team Actually Wants to Work with 🥳 — Test Double solves tough problems from strategy to execution. Weekly rates. Open contracts. No management required.

Test Double sponsor

📄 Creating a Virtual DOM in 200 Lines of JavaScript – A way to understand the basics behind the concept. Marcelo Lazaroni

📄 ECMAScript Proposal: Duplicate Named Capturing Groups for Regular Expressions Dr. Axel Rauschmayer

📄 Digging Into an Arbitrary JS Execution Vulnerability in PDF.js Codean Labs

📄 The Dilemmas You’ll Face When Creating a Component Library Andrico Karoulla

📄 Branded Types for TypeScript Carlos Menezes

🛠 Code & Tools

🖋️ Signature Pad 5.0: Smooth Signature Drawing Control — If you need people to give you their John Hancock on the web, use this to let them make their unintelligible, but legally binding, scribbles. GitHub repo.

Szymon Nowak

VitePress 1.2: Vite & Vue Powered Static Site Generator — From the creator of both Vue.js and Vite, a Markdown-oriented static site generator with a particularly smooth developer experience.

Evan You

Ditch Passwords for Good: Embrace the Future of Secure Login with Passkeys — Ditch passwords for passkeys, the secure biometric login solution eliminating password pain while fortifying user accounts.

FusionAuth sponsor

Jira.js 4.0: A Wrapper for Atlassian Jira’s Cloud APIs — Love Jira? Become even happier by interacting with it with code. Docs and examples.

Vladislav Tupikin

Brainchop 4.0 (above) – An in-browser 3D MRI rendering system. (Demo.)

Redwood 7.6 – GraphQL-driven React framework. Now with experimental React Compiler support.

Axios 1.7 – Long-standing, promise-based isomorphic HTTP client.

Safe Units 2.0 – Type-safe library for using units of measurement.

🖋️ Atrament 4.4 – Library for smooth drawing on HTML canvases.

♟︎ React Chessboard 4.6 – Render chess boards with React. (Demo.)

ka-table 10.0 – Lightweight React table component. (Demos.)

jQuery Terminal Emulator 2.42 – For web-based terminal experiences. (Demo.)

Abracadabra 9.2 – Automated JS and TS refactorings for VS Code.

#​688 — May 16, 2024

Read on the Web

JavaScript Weekly

📄  How to Document Your JavaScript Package — You’ve written some useful code, you want to distribute it.. what next? Useful docs! The Deno team demonstrates the value of JSDoc and writing documentation alongside your usual source code.

The Deno Team

Digging Into the Promise.withResolvers() Proposal — It’s so good to see Dr. Axel blogging again after a year away. He digs into the proposed Promise.withResolvers feature (now at stage 4) and why you might prefer to use it to create promises in a more elegant way.

Dr. Axel Rauschmayer

WorkOS: Enterprise-Grade Auth You Can Implement in Minutes — Like an enterprise plan in a box: WorkOS provides flexible, easy-to-use APIs to integrate SSO, SCIM, Audit Logs, User Management, and more. Used by some of the hottest startups including Perplexity, Vercel, & Webflow. Future-proof your auth stack with WorkOS.

WorkOS sponsor

Now You Can Try the React Compiler — A big item at this week’s React Conf was the open sourcing of React’s experimental compiler to optimize React code at build time. They’ve also created a React Compiler Playground to experiment with.

The React Team

IN BRIEF:

At Google I/O, the Google team unveiled the Web Platform Dashboard (above), a way to see the web platform mapped as a set of features, along with their cross browser support.

⭐ Remix and React Router have a shared history (and, increasingly, features) and that’s culminating in the merging of Remix and React Router: “What we planned to release as Remix v3 is now going to be released as React Router v7.”

The Deno Standard Library is now available on JSR.

RELEASES:

zx 8.1 – Google’s tool for better Node shell scripting. Both CommonJS and ESM now supported, increased Node version support, and Deno 1.x support.

Node.js 22.2 (Current), Storybook 8.1, Astro 4.8, Bun 1.1.8

ReacType v21 – Visual prototyping tool for React apps.

📒 Articles & Tutorials

Make Your GitHub Profile Dynamic with Bun and TypeScript — GitHub offers the ability to upload a profile README file that’s rendered at the top of your user page. If you want to have it dynamically update with links to your latest blog posts, statistics, or other bits of info, you can do it with a little JavaScript and GitHub Actions.

Duy Ng

Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Render sponsor

▶  Learn with Me: Hono — I’m biased, since I think Takuya’s videos are amazing and am a huge fan of his note taking app, Inkdrop, but it’s neat to see someone sink their teeth into trying the Hono JS app framework.

Takuya Matsuyama

📄 Build Your Own React.js in 400 Lines of Code – A learning exercise. Zachary Lee

📄 The Carcinization of Web Frameworks – Are frameworks all starting to look alike? Jacob Kofoed

📄 Five Basic Things About JavaScript to Help Non JavaScript-Focused Web Designers Chris Coyier

📄 Personal-Scale Web Scraping for Fun and Profit Sean Morrissey

🛠 Code & Tools

🕹️ Athena Crisis: A Quality, JS-Powered Game — A commercial, turn-based strategy game available on the Steam Store, but now with an open sourced engine and tooling. The game is published by Null, an indie game publisher founded by GitHub cofounder Chris Wanstrath.

Christoph Nakazawa

fuzzysort 3.0: Fast Fuzzy Search Library — Check out the live example – it certainly feels quick.

Stephen Kamenar

Make the Scary Things Boring 😅 — Been told to do more with less? Talk to Test Double about how to deliver with fewer people without losing quality.

Test Double sponsor

GraphQL Yoga: A Full-Featured GraphQL Server — Create a schema, spin up a server, and you’re good to go (then you get to wire everything up). Supports GraphQL subscriptions via SSE. Designed to run across environments from Node to AWS Lambda, Deno, Bun, etc. GitHub repo.

The Guild

Vue Fluid DnD: An Animated Drag-and-Drop Library for Vue — Designed for lists of items and you can view a variety of examples here, including one where the items are draggable using handles. GitHub repo.

Carlos Jorge Rodriguez

Transformational Auth & Identity | Userfront — “Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use.”

Userfront sponsor

🗾 React Google Maps 1.0: Components and Hooks for Google Maps — Provides a way to integrate Google’s Maps API into a React app, with components to lay down markers, draw over maps, etc. GitHub repo.

OpenJS Foundation

alphaTab 1.3 (above) – Music notation and guitar tablature rendering library. It’s able to play the music, too, although the vibrato on the guitar sounded rather odd on my machine.. 😅

React Awesome Query Builder 6.5 – Logical query builder control. (Demo.)

🎨 jquery-color 3.0 – jQuery plugin for color manipulation and transitions.

Jdenticon 3.3 – Library for generating geometric ‘identicons’.

OverlayScrollbars 2.8 – JS custom scrollbar plugin.

NodeBB 3.8 – Node.js based forum system.

🎁 And one for fun..

Code Screenshot: A VS Code Extension to Create Code Screenshots — It basically loads your code into this site (which you can use directly, if you’d rather not install an extension) where you can tweak settings/theme and export to either a PNG or SVG.

Vkrsi / Visual Studio Marketplace

💡 Carbon remains a great option for this task, too.

#​687 — May 9, 2024

Read on the Web

JavaScript Weekly

Development Notes from xkcd’s ‘Machine’ — I bet many of you are fans of xkcd! For this year’s April Fools’ joke, they published ‘Machine’, a giant Rube Goldberg machine of sorts (explained here). With a lot of TypeScript up front and Haskell in the back, here’s how it works at a technical level. (GitHub repo.)

Max Goodhart

Figma’s Journey to TypeScript — How the team at Figma automatically migrated code written in their own Skew programming language over to TypeScript — without disrupting a single day of development.

Brandon Lin (Figma)

Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.

MESCIUS inc sponsor

Gulp Never Went Away; Take the Gulp Developer Survey? — It’s easy to forget many great tools that got a lot of press years ago are still going and doing well. So it goes for Gulp, a build system and toolkit first released in 2013. Gulp 5.0 came out last month and the team is on a mission to make it even better. If you want to help, you can take their survey here.

Clarissa Abidog

IN BRIEF:

Ben Hong presents a helpful look at the Vue ecosystem as of 2024.

📅 React Conf 2024 takes place next week. No tickets, but you can register for the free livestream to enjoy it from afar.

The Node.js core invites you to take part in the latest Node.js Next 10 survey to help them make decisions about where to take Node next.

Last week we featured a fun ▶️ talk about the use of let vs const, but it seems Jack Herrington wasn’t a big fan of the approach, so he ▶️ spent 10 minutes analyzing the talk and its claims.

The Bun folks are seeking a systems engineer to join their team, as part of their push into making Bun 🐦 even more production-friendly.

RELEASES:

⭐️ esbuild 0.21.0 – A more significant release than the version number lets on, as it introduces support for the decorators proposal (so extra testing is recommended when you upgrade).

Docusaurus 3.3 – The React powered site builder.

Ionic 8.1 – Cross-platform UI toolkit for building native-quality apps.

pnpm 9.1, AdonisJS 6.9, Playwright 1.44.0, Bun 1.1.7

📒 Articles & Tutorials

▶  Seamless Drag and Drop Between Applications — A fantastic demonstration of using browser APIs to create more elegant drag and drop experiences that even work across different browser windows or IFRAMEs, with Atlassian’s Pragmatic Drag and Drop library doing the heavy lifting.

Alex Reardon

Why Patching Globals is Harmful — Modifying global APIs to extend their features is common, but not particularly desirable if readability, maintenance, and predictability are qualities you enjoy.

Artem Zakharchenko

Your Background Images Might Be Causing CLS by Salma Alam-Naylor — In this post, learn how to to avoid unexpected cumulative layout shift (CLS) with tried and tested solutions.

Sentry sponsor

Five Node Version Managers Compared — Ideally, we could use the latest LTS version of Node for everything, but in reality we often need to switch versions. Numerous tools let you do this. NVM is the best known, but N, FNM, Volta, or even pnpm could suit you better?

Pavel Romanov

‘At Some Point, JavaScript Got Good’ — The author notes JavaScript got a “big ‘boost’” with ES6, and commends the continuous improvements made since. Perhaps unsurprisingly, an associated lively discussion on Hacker News highlighted some lingering overall disdain.

Jonathan Beebe

📺 Exploring What’s New in Node 22 – 90-minutes for true completionists. Matteo Collina

📄 How to Securely Send a Request When Closing Tabs – The oft-forgotten sendBeacon() to the rescue. Zachary Lee

📄 Exploring a 3D Text Distortion Effect with React Three Fiber Nine / Codrops

📄 Autogenerating Podcast Show Notes with yt-dlp, Whisper.cpp, and Node Anthony Campolo

📄 A React Developer’s Guide to Learning SolidJS Tristan Dyer

📄 Why React Query? UI․dev

🛠 Code & Tools

Pintora: An Extensible Text-to-Diagram Rendering Library — A similar idea to Mermaid but with a different attitude to extensibility as well as no requirement for a headless browser server-side. The intro docs have both visual and code examples.

Hikerpig

Headless UI v2.0 for React — From the Tailwind folks, Headless UI is a suite of unstyled, accessible UI React (and Vue, though at a lower version for now) components, designed to integrate well with Tailwind CSS.

Wathan and Reinink

Make Your Dev Experience Even Faster — 🥷 Console Ninja now logs network requests (fetch, XMLHttpRequest) for your app! Visually linking network activity directly to your code provides immediate insights into network behavior.

Wallaby Team sponsor

jQuery to JavaScript Converter — A browser-based tool to quickly convert jQuery scripts over to, well, non-jQuery-using code. Repo here.

lightGallery

DerbyJS 4: The Mature MVC Web Framework — Derby has lived through most of Node.js’s history and remains a viable option for building realtime, collaborative apps in particular. GitHub repo.

Nate Smith et al.

graphql-request 7.0: Minimal GraphQL Client — Now a pure ESM package with first class TypeScript support for both client and server-side.

Jason Kuhrt

Fabric.js: SVG-to-Canvas and Canvas-to-SVG Library — Provides an interactive object model on top of the HTML canvas to make it easier to work with multiple visual elements. A long standing project, v6 has been in the pipeline for a while and the first release candidate recently dropped.

Fabric.js

MSW (Mock Service Worker) 2.3 – API mocking library.

Mantine 7.9 – Popular React components library.

node-oracledb 6.5 – Oracle’s own official Node.js database driver, now with support for Oracle’s latest vector search functionality.

js-bson 6.7 – MongoDB BSON parser for Node and browsers.

d3-graphviz 5.4 – Render SVGs from Graphviz DOT graphs.

validator.js 13.12.0 – String validation functions.

#​686 — May 2, 2024

Read on the Web

JavaScript Weekly

React 19 Now in Beta — While designed to get library developers prepared for the eventual React 19 release, this is nonetheless a huge step, with full support for Custom Elements (Custom Element support has long been a thorn in React’s side), all the latest React Server Components goodies, Actions, use, and more besides.

The React Team

💡 If you want to upgrade ASAP, there’s a thorough upgrade guide available, but consider upgrading via React 18.3 first.

▶  Let Me Be: “const … Is Stupid and You’re Using It Wrong” — An entertaining 12-minute talk on misunderstandings around the use of const vs let. This was bound to provoke some strong reactions (see the Twitter thread) but let him make his point!

Ryan Florence

Start Coding for Free! Build Real-Time Chat Messaging in Days — Looking to quickly integrate your desired combination of low-level API access and pre-built Stream libraries and components? Find out how to get started with Stream today.

Stream sponsor

Announcing TypeScript 5.5 Beta — It’s not even the final release (expect that in a month or two) but 5.5 has many people excited as it has many major enhancements, including inferred type predicates, the ability to import types in JSDoc via comments, regex syntax checking, isolated declarations, and more. If you want more practical examples, Matt Pocock 🐦 wrote a good Twitter thread.

Microsoft

IN BRIEF:

The New Stack has a feature on Ryan Dahl and his opinions on packaging, JSR, and even TypeScript.

MoonBit is a WebAssembly driven cloud platform and it now has a JavaScript backend too that claims to be very fast.

If you noticed the JSDelivr CDN went down earlier, here’s why.

Zachary Lee has a quick guide to React 19 Beta taking more of a code-led approach than the release notes.

RELEASES:

⭐️ Svelte 5 Release Candidate – “no anticipated breaking changes between now and the stable release.” In a quick talk, ▶️ Rich Harris explains what’s new.

React 18.3 – The beta of 19 may be more exciting, but 18.3 will help your app’s transition by not breaking anything that works on 18.2 while providing more deprecation warnings.

Bun 1.1.6 – Now supports UDP sockets, Array#sort gets a lot faster, and 1.1.5 introduced cross-compilation for standalone executables.

Astro 4.7 – There’s also a roundup of what’s new with the project overall.

Node.js 22.1 (Current) and Deno 1.43

📒 Articles & Tutorials

‘I Reviewed 1,000s of Opinions on HTMX’ — htmx is an increasingly popular way to use modern, dynamic browser features through creative use of HTML attributes, rather than hand writing JS for everything. Dylan looks at the pros and cons through the lens of community sentiment.

Dylan Huang

Maybe MOAR Is Not the Answer 🫠 — Turns out a relentless push for MOAR features and developers was wrong. Leaders could do with some reflection on less.

Test Double sponsor

Native Support for CJS/ESM Interoperability Begins in Node 22 — An overview of a new era for Node developers when working with both CommonJS and ECMAScript modules.

Zachary Lee

Finally Understanding How Array.sort(comparator) Works — “After 13 years of JavaScript, I finally have a way to remember how the comparator function in Array.sort() works..”

James Kerr

Detecting JavaScript Support in CSS — A way to provide alternative CSS rules depending on whether or not JavaScript is available in the user’s browser.

Ryan Mulligan

Build Advanced Interactive Experiences with the StackBlitz SDK — Join our live stream on programmatically embedding interactive dev environments on your site.

StackBlitz sponsor

📄 Digging Tunnels out of a JS Sandbox – “.. the journey of unearthing a few different vulnerabilities in Deno.” Secfault Security

📄 How to Build Well-Documented and Authenticated APIs with Node and Fastify Julían Duque (Heroku)

📄 Using Vite to Rebuild Local Dependencies in an NPM Workspace Prosopo

📄 What is Vite (and Why is it So Popular)? – Eric Simons

📄 Cheat Sheet for Moving from jQuery to Vanilla JavaScript Tobias Ahlin

📄 When to Use Bun Instead of Node.js Antonello Zanini

🛠 Code & Tools

extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple as a npx extension create my-extension to get started with building your own browser extensions. GitHub repo.

Cezar Augusto

Layer Cake: A Graphics Framework for Svelte — This library gives you a baseline for creating responsive web graphics via common elements (e.g. a coordinate system and scales). See numerous example components here.

Layer Cake

Happy World Password Day! Curious About How We Got Here? — Learn about the history of passwords in this timeline that spans millenniums, and find out why passwords are history.

FusionAuth sponsor

Tagify 4.26: An Elegant Input Component for Tags — The polished demos show a lot of effort has been put in here. GitHub repo.

Yair Even-Or

Journey.js: No-Dependency Library to Create Interactive Guided Tours — The live examples are basic, but the focus on accessibility and built-in support for 51 languages are pluses.

William Troup

📺 YouTube.js: Unofficial YouTube API Client Library — ‘InnerTube’ is an API used by YouTube’s clients, and you can use it too, although they might not like it. It runs on Node.js, Deno, and modern browsers.

LuanRT

😀 Emoji Mart 5.6 – Emoji selection component for the Web (above).

✍️ Atrament 4.2 – Elegant drawing and handwriting on Canvas.

📄 React-PDF 8.0 – React component to display PDFs. Now supports React 19.

TanStack Virtual 3.5 – Headless UI for virtualizing scrollable elements.

TestCafe 3.6 – Automated end-to-end web testing framework.

Preact 10.21 – The 3KB React compatible alternative.

jQuery UI 1.13.3 – Yes!

🎁 And one for fun..

Virtual x86: x86 Virtualization with JS and WASM — Run Linux, numerous older versions of Windows, BSD, MS-DOS, and other systems right in the browser (and quickly, too). Not a new project, but I’m always impressed how it’s constantly getting updates. GitHub repo.

Fabian Hemmer

The BASIC programming language has just turned 60 years old, so why not fire up the MS-DOS image (above) and have some fun in QBasic? 😉