Plus Node.js 21, a retro 80s graphic library, and some Base64 nuances. |

#​659 — October 19, 2023

Read on the Web

Together with  WorkOS

JavaScript Weekly

ApexCharts: Interactive Charting and Dataviz Library — A mature and frequently updated charting library for building interactive data visualizations, whether with sparklines, heatmaps, line charts, funnel charts, pies, and others. There are many visual demos and code samples – or check out their homepage.

Juned Chhipa

Node.js 21 Released — In the next week or so, Node v21 replaces v20 as the ‘current’ release that gets the new features first, with Node v20 becoming the 'active' LTS version. v21 introduces V8 11.8, npm 10.2, stable Web Streams support, and an experimental browser-compatible WebSocket implementation.

The Node.js Project

Need SAML Auth? Use WorkOS — WorkOS lets you quickly build enterprise features like SAML & SCIM. Integration is seamless with beautiful API docs and SDKs. Join hundreds of companies using WorkOS—including Vercel, PlanetScale & Webflow—and make your app Enterprise Ready today.

WorkOS sponsor

Eight Options to Reduce JavaScript Code — Solid.js creator Ryan Carniato thinks it’s time to reduce the footprint of JavaScript code. Here’s a two part series covering several approaches, covering areas from code splitting to progressive hydration and hybrid routing.

Loraine Lawson (The New Stack)

🎉 RELEASES:

📒 Articles & Tutorials

The Nuances of Base64 Encoding Strings in JavaScript — Base64 provides a way to represent binary data in ASCII strings which may be safer to share and store in certain situations. Matt looks at how to do Base64 encoding and decoding in JavaScript and some areas where you need to take special care.

Matt Joseph

event.target.closest — If you’ve not used closest, it’s worth being aware of this way to return the closest DOM node that matches a specified CSS selector (based upon traversal of the DOM tree up towards the root).

Jeremy Keith

UI Component Library for Project Management and Resource Planning — Level up your UI with advanced data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

▶  Prototyping a JavaScript JIT Compiler — It almost feels like building a JIT compiler has become the new “hello world” (ok, slight exaggeration) but this 80 minute screencast is fascinating (and, amazingly, demystifies some of the magic) if you have the time and inclination.

Andreas Kling

🤩 Andreas is such a top notch developer, he's developed a JavaScript-capable browser called Ladybird for his own OS: SerenityOS.

New Angular 17 Feature: Deferred Loading — Next level lazy-loading demonstrated by using a Signal-based and other examples.

Gergely Szerovay

Do We Need State Management in Angular?
Balázs Kovács

How to Escape CSS Selectors in JavaScript
Stefan Judis

🛠 Code & Tools

Postgres.js 3.4: A Full-Featured Postgres Client for All — Now working with several JavaScript platforms (Node, Deno, Bun, and, as of this release, Cloudflare), this high performance Postgres library offers realtime change subscription, dynamic query building via special template literals, high availability support via multi-host connection URLs, async cursors, and more.

Rasmus Porsager

New Wallaby.js Logpoints: Quick & Easy Logging, Simply Set a Breakpoint — No setup needed, real-time feedback in your editor. Class & function support allows you to quickly log runtime values for all lines in a class or function.

Wallaby Team sponsor

PureImage: A Pure JS HTML Canvas 2D for Node.js — If you want a browser-like 2D canvas experience in Node but without any native dependencies, this is for you. You can then save the output to PNG or JPEG. (node-canvas is the long-standing popular choice in this same area but relies upon Cairo as a dependency.)

Josh Marinacci

Cronicle: A Cron System with a Web Front End — Describing itself as ‘a fancy cron replacement’, Cronicle is a task scheduler and runner built in Node.js with a web-based UI.

Joseph Huckaby

Timeline JS: Create Useful Timelines for the Web — Built by a journalism lab at a university, this is not aimed at expert developers but folks focused on telling a story or presenting some data online. Here’s an example showing a timeline of ‘revolutionary user interfaces.’

Northwestern University Knight Lab

Add Figma Like Collaborative Features Without Re-Architecting Your App

Ably sponsor

table-saw: A Small Web Component for Responsive HTML Tables — Inspired by a jQuery plugin with a similar name. Check out some some demos.

Zach Leatherman

🎁 And one for luck..

QX82: Retro-Inspired Computing in a JavaScript Library — With a name riffing on the ZX81 computer, QX82’s goal is to let you create retro-feeling (mid 80s, to be precise) games and experiences with JavaScript. It’s not a runtime or emulator - you could bake this into your own web site, if you wanted.

Bruno Oliveira

n