--- title: "Ways to serve up less JavaScript" publication: "JavaScript Weekly" issue: 659 published_at: "2023-10-19" canonical_url: "https://javascriptweekly.com/issues/659" --- Plus Node.js 21, a retro 80s graphic library, and some Base64 nuances. | #​659 — October 19, 2023 [Read on the Web](https://javascriptweekly.com/issues/659) Together with [![WorkOS\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_514,h_98/e_make_transparent/co_white,e_outline:9/tdfxwgk852ui9leli4wm.png)](https://workos.com/?utm_source=cooperjava&utm_medium=newsletter&utm_campaign=q42023) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/purgvblwkmpddwkqa8or.jpg)](https://github.com/apexcharts/apexcharts.js#readme) [ApexCharts: Interactive Charting and Dataviz Library](https://github.com/apexcharts/apexcharts.js#readme) — A mature and frequently updated charting library for building interactive data visualizations, whether with sparklines, heatmaps, line charts, [funnel charts](https://apexcharts.com/javascript-chart-demos/funnel-charts/), pies, and others. There are [many visual demos](https://apexcharts.com/javascript-chart-demos/) and [code samples](https://github.com/apexcharts/apexcharts.js/tree/main/samples) – or check out [their homepage](https://apexcharts.com/). Juned Chhipa [Node.js 21 Released](https://nodejs.org/en/blog/announcements/v21-release-announce) — 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 [![\](https://copm.s3.amazonaws.com/dcd5145a.png)](https://workos.com/?utm_source=cooperjava&utm_medium=newsletter&utm_campaign=q42023) [Need SAML Auth? Use WorkOS](https://workos.com/?utm_source=cooperjava&utm_medium=newsletter&utm_campaign=q42023) — 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](https://thenewstack.io/solid-js-creator-outlines-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) - 🔢 [TC39 has started a new task group](https://www.ecma-international.org/news/ecma-tc39-ecmascript-initiates-a-new-task-group-to-standardize-source-maps/) to standardize source maps. - 📊 Colin Eberhardt goes over [The State of WebAssembly 2023 results](https://blog.scottlogic.com/2023/10/18/the-state-of-webassembly-2023.html). - 🕹 The latest [React Jam gamedev event](https://reactjam.com/) began today. You get ten days to create a game that uses React in some way. Here are [previous winning entries](https://summer-2023.reactjam.com/winners). - 👾 In other gamedev news, you can [see the latest js13kGames winners](https://github.blog/2023-10-13-js13k-2023-winners/) too. It's amazing what some people can put together in such little space. - 😆 It turns out [obfuscating JavaScript and then compressing it](https://github.com/mgarciaisaia/JavaScript-Is-Weird-as-a-compressor) doesn't have a great outcome in terms of size reduction. Fun though? - 🎨 The Node.js project [has an official mascot design contest](https://twitter.com/nodejs/status/1713984983566610540). **🎉 RELEASES:** - [TanStack Query v5](https://tanstack.com/blog/announcing-tanstack-query-v5) – Query-led declarative state management and data fetching. - [Storybook 7.5](https://storybook.js.org/blog/storybook-7-5/) – Frontend component dev tool. Now with Vite 5 and Lit 3 support, faster starts, and Angular-focused improvements. - [Lit 3.0](https://lit.dev/blog/2023-10-10-lit-3.0/) – Build agnostic components on top of modern Web standards. - [Rockpack 4.0](https://github.com/AlexSergey/rockpack) – React app starter/generator. - [Astro 3.3](https://astro.build/blog/astro-330/), [Biome 1.3](https://biomejs.dev/internals/changelog/#130), and [Bun 1.0.6](https://bun.sh/blog/bun-v1.0.6). 📒 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/beoyjfxl548kydkjwtv3.jpg)](https://web.dev/articles/base64-encoding) [The Nuances of Base64 Encoding Strings in JavaScript](https://web.dev/articles/base64-encoding) — 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`](https://adactio.com/journal/20551) — 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](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=jsweekly-link-20231013) — Level up your UI with advanced data grids, calendars, schedulers, and Gantt charts. Bryntum sponsor ▶[Prototyping a JavaScript JIT Compiler](https://www.youtube.com/watch?v=8mxubNQC5O8) — 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](https://www.theregister.com/2023/10/17/serenity_os_turns_five/) for his _own_ OS: [SerenityOS.](https://serenityos.org/) [New Angular 17 Feature: Deferred Loading](https://www.angularaddicts.com/p/angular-17-feature-deferred-loading-with-signals) — Next level lazy-loading demonstrated by using a Signal-based and other examples. Gergely Szerovay [Do We Need State Management in Angular?](https://medium.com/@kobalazs/do-we-need-state-management-in-angular-baf612823b16) Balázs Kovács [How to Escape CSS Selectors in JavaScript](https://www.stefanjudis.com/today-i-learned/how-to-escape-css-selectors-in-javascript/) Stefan Judis 🛠 Code & Tools [Postgres.js 3.4: A Full-Featured Postgres Client for All](https://github.com/porsager/postgres) — Now working with several JavaScript platforms (Node, Deno, Bun, and, as of [this release](https://github.com/porsager/postgres/releases/tag/v3.4.0), _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](https://wallabyjs.com/whatsnew/logpoints.html?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — 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](https://github.com/joshmarinacci/node-pureimage) — 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](https://github.com/Automattic/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](https://github.com/jhuckaby/Cronicle) — 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](https://timeline.knightlab.com/) — 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](https://timeline.knightlab.com/examples/user-interface/index.html) showing a timeline of ‘revolutionary user interfaces.’ Northwestern University Knight Lab [Add Figma Like Collaborative Features Without Re-Architecting Your App](https://hubs.la/Q024C5V20) Ably sponsor [table-saw: A Small Web Component for Responsive HTML Tables](https://github.com/zachleat/table-saw) — Inspired by a jQuery plugin with a similar name. Check out some [some demos](https://zachleat.github.io/table-saw/demo.html). Zach Leatherman [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/e3ztgaec6xwuawqgnw0g.jpg)](https://github.com/ota-meshi/eslint-plugin-regexp) - [eslint-plugin-regexp 2.0](https://github.com/ota-meshi/eslint-plugin-regexp) – ESLint plugin to find regex related issues. ([Interactive demo](https://ota-meshi.github.io/eslint-plugin-regexp/playground/).) - [little-rat](https://github.com/dnakov/little-rat) – Chrome extension to monitor (and block) other extensions' network calls. - [Sortable 3.0](https://github.com/tofsjonas/sortable) – Make tables sortable with `class="sortable"` - [AdminJS 7.3](https://github.com/SoftwareBrothers/adminjs) – Automatic admin interface for Node apps. - [Shoelace 2.10](https://shoelace.style/) – Suite of elegant web components. - [Recharts 2.9](https://github.com/recharts/recharts/releases/tag/v2.9.0) – React and D3 charting library. - [Fable 4.3](https://github.com/fable-compiler/Fable) – F# to JavaScript compiler. 🎁 And one for luck.. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/r0ksqndgxpkhrc2rw0zi.jpg)](https://btco.github.io/qx82/) [QX82: Retro-Inspired Computing in a JavaScript Library](https://btco.github.io/qx82/) — With a name riffing on the [ZX81 computer](https://en.wikipedia.org/wiki/ZX81), 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 Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom