‘It’s a miracle anything about this ecosystem works at all.’

#​637 — May 4, 2023

Read on the Web

Psst.. if you’re wondering about the context of today’s subject line, see the first ⚡️ In Brief.

JavaScript™ Weekly

Angular v16 Released — With the “biggest release since the initial rollout of Angular”, v16 of the extensive framework introduces a preview of a new signals-based reactivity model (a.k.a. Angular Signals), RxJS interop, improved SSR and hydration, experimental esbuild support, Jest unit testing, and more.

Minko Gechev

???? See the end of this issue where Minko makes the case for Angular in 2023.

Qwik Reaches v1.0 — In “other big JS frameworks that aren’t React” news, Qwik has hit a major milestone too. Qwik’s selling point remains performance through serving up as little code as needed on initial page load. “Think of it as streaming for your JavaScript,” they say. Nonetheless, you get the JSX, directory-based routing, and middleware options you may be familiar with.

Qwik Team

Bring Your Team from Zero to 100 Deploys a Day — Curious about how companies such as Atlassian, Google, and Netflix deploy hundreds of times a day? What strategies do they use to achieve efficiency? This guide provides you with tips and tricks on how these companies scaled their deployments so that you can do the same.

Sleuth sponsor

????????  The German Government Invests in JavaScript — Sort of. Germany’s Sovereign Tech Fund has made a big investment in the OpenJS Foundation, a Linux Foundation project that supports the JS ecosystem and hosts projects including Electron, jQuery, Node.js, Node-RED, and webpack.

Robin Ginn (OpenJS Foundation)

⚡️ IN BRIEF:

Mark Erikson (Redux) wrote a Twitter thread about ???? things he has to keep in mind when publishing a library in 2023 – it’s a lot. He summarized: “It’s a miracle anything about this ecosystem works at all.”

We plan to write about this in a future issue, but Deno KV is a new in beta key value store now baked into both the Deno runtime (as of Deno 1.33) and available in the cloud.

The latest VS Code release is out, with improvements to the terminal, new default dark and light color themes, support for profile templates, a built-in color picker, and support for strict nulls for JavaScript in HTML script blocks.

A roundup of what’s new in the Svelte world.

Node.js can now run on every major browser engine as WebContainers now run on Safari, iOS and iPadOS, as well as Chrome and Firefox. Live demo.

Chrome is to replace the ???? icon in the location bar with a vaguer ‘tune’ icon.

Popular app hosting platform Vercel has added three new first-class storage options for files, Postgres databases, and Redis-like key/value stores.

RELEASES:

Capacitor 5.0 – Build cross-platform native PWAs.

Node.js v20.1.0 (Current)

pnpm 8.4 – Efficient package manager.

React Native macOS 0.71

Electron 24.2

???? Articles & Tutorials

A Practical Guide to Not Blocking the Event Loop — Engines typically run JavaScript in a single thread with an event loop. However, the nature of mixing synchronous and asynchronous tasks, along with the increasing popularity of workers for running code on separate threads, makes the landscape harder to navigate than it used to be.

Slava Knyazev

The Interactive Guide to Rendering in React — An interactive, illustrated guide exploring why, when and how React renders, complete with a series of well thought out animations.

Tyler McGinnis

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby.js sponsor

The const ‘Deception’ — If the exact role of const has confused you in the past, this will be a handy primer that digs into the distinction between “assignment” and “mutation” in JavaScript.

Josh W Comeau

Write Better CSS by Borrowing Ideas from JS? — A curious look at taking best practices from the JavaScript space for writing better CSS.

Yaphi Berhanu

Crafting the Next.js Website — The official Next.js site is impressive, but what went into it? One of the designers shares some of the implementation details which aren’t particularly React-y but may prove inspiring to you.

Rauno Freiberg

Exposing a Rust Library to Node with NAPI-RS

John Murray

???? Code & Tools

date-fns 2.30: A Modern Date Utility Library — It’s been a couple of years since we linked to this “lodash for dates” that’s packed with over 200 date and time manipulation functions, but it continues to get updates and a v3 is on the way. GitHub repo.

Sasha Koss

Chart.js 4.3: Canvas-Based Charts for the Web — One of those libraries that feels like it’s been there forever but still looks fresh and continues to get good updates. Bar, line, area, bubble, pie, fonut, scatter, and radar charts are all a piece of cake to render. Samples and GitHub repo.

Chart.js Contributors

Beautiful Security and License Compliance Reports for Your App’s Dependencies — Free & Open Source: Try the Better NPM Audit for Your App Now.

Sandworm․dev sponsor

Axios 1.4: Promise-Based HTTP Client for Browser and Node — A long standing project and still getting frequent updates despite rapidly being seen as the ‘jQuery of HTTP request libraries.’ If you need it, you’ll know.

Matt Zabriskie

Marked.js 5.0: A Fast Markdown Parser and Compiler — A low-level Markdown compiler built for speed and available as a client-side library, server-side library, and even a CLI. v5.0 deprecates some options in favor of using external plugins. Here’s a live demo.

Christopher Jeffrey

Mock Service Worker 1.2: REST/GraphQL API Mocking Library — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

The Fastest JavaScript Data Grid Component

Bryntum Grid sponsor

Pretty TypeScript Errors: Make Errors Prettier and Human-Readable in VS Code

Yoav Balasiano

next-sitemap: Sitemap Generator for Next.js Apps

Vishnu Sankar

???? Jobs

Team Lead Web Development — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors.

Komoot

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

QUICK RELEASES:

Tremor 2.4 – React library to build dashboards.

oclif 3.9 – Node.js CLI app framework.

github-script 2.1 – GitHub Actions workflows in JS.

Highlight.js 11.8 – Syntax highlighter.

Plotly.js 2.22 – Data visualization library.

ngx-stripe 16.0 – Angular wrapper for Stripe Elements.

???? A quick word from Angular’s Minko Gechev

When Minko reached out to remind us of the Angular v16 launch, we decided we’d remind him that most JavaScript Weekly readers aren’t using Angular (sorry Minko!) but to ask if he’d like to make the case as to why JavaScript developers shouldn’t sleep on Angular in 2023. Here’s what he had to say:

The problem in the JavaScript ecosystem we’re solving with Angular is to provide a reliable, integrated solution that gives you all the core libraries and tools you need to focus on building apps, rather than fixing incompatible dependencies/API changes, etc. I understand that’s what most technologies claim, the difference with Angular is that:

We’re testing all core modules such as framework, router, forms, etc. on over 4,000 Google projects on every commit to guarantee stability and integration.
We’re sharing updates in a predictable release schedule (twice a year) where we evolve everyone via the same mechanism we use to keep every project at Google to the HEAD commit on the main branch on GitHub. It’s integrated as part of the ng update command of the CLI.

With the recent updates we’ve been:

Catching up with some of the use cases we were missing.
Advancing the performance and developer experience, while setting the foundation for more advancements throughout 2023 and 2024.

On the second point, we’re expecting lots of more improvements in reactivity and SSR in the next 12 months.

So there you have it.

On the origin of packages

#​635 — April 20, 2023

Read on the Web

JavaScript Weekly

Introducing npm Package Provenance — As stewards of the official npm registry, GitHub has been keen to improve its security. As of this week, if you build npm packages through GitHub Actions, you can publish the provenance of a package which gives users a way to verify which repo a package was built from and how. The folks at Socket took a closer look at how it works.

DeHamer and Harrison (GitHub)

What’s New in ECMAScript 2023, Briefly — Last week we mentioned the progression of the ECMAScript 2023 spec but it’s hardly bedtime reading. This post looks more briefly at a few of the new additions including Array#findLast, hashbangs, and Array#toSorted.

Pawel Grzybek

New Course by Kyle Simpson: Practical Problem Solving with Algorithms — Walk through four fun challenges with Kyle in this new video course. You’ll learn how to apply algorithms with techniques like recursion, traversals, and acyclic paths, cover memoization to avoid garbage collection, and come away writing more performant code.

Frontend Masters sponsor

Node.js v20 (Current) Released — Released just two days ago, the newest major version of Node.js includes a variety of interesting updates, including:

An experimental permissions model. This is a feature Deno has at its core but now you can restrict access to certain capabilities in Node too.

V8 11.3 (which includes Regexp /v flag support)
The node:test test runner goes stable.
Official support for Windows on ARM64.
Improvements to the single executable packaging mechanism.

The Node.js Team

As per policy, Node v20 will become the main LTS release this October.

Vite 4.3: Now It’s Even ‘Faaaaster’ — A minor release of the popular frontend toolchain, but one that focuses on performance. The creatively titled How we made Vite 4.3 faaaaster digs into the details.

Evan You and Contributors

IN BRIEF:

TypeScript 5.1 Beta has been released which allows undefined-returning functions to have no return statement, to have unrelated types for get and set accessor properties, namespaced attribute names when using JSX, and more.

The React core team appears to have been affected by Meta’s latest round of layoffs (as has that of Relay), though Dan Abramov recently noted Meta’s continued investment into the ecosystem.

Introducing the TERN Stack & How to Migrate from MERN to TERN

Tigris sponsor

RELEASES:

Shoelace 2.4
↳ Popular library of well designed Web components.

Node.js v18.16.0 (LTS)

Gatsby 5.9

???? Articles & Tutorials

Richer Install UI for PWAs Available in Chrome — Gives progressive web app developers a new opportunity to encourage end users to install their app.

Adriana Jara (Chrome Developers)

Passkeys: What and Why? — The author has been experimenting with passkeys and the associated WebAuthn API that opens them up to the Web. A primer for an increasingly common security approach.

Neal Fennimore

Build Complex Automations 10x Faster, Without Fighting APIs — The flexible workflow automation platform for technical people who want to build complex workflows faster — without struggling with manual scripts.

n8n sponsor

Integrating React Flow and the Web Audio APIReact Flow is a component for building node-based editors and interactive diagrams, which makes it well suited for building audio signal chains. There’s a lot of depth here, some nice examples, and these techniques could prove useful for a lot of other use cases.

Hayleigh Thompson

Ways to Create an Enum in JavaScript — An enum is a set of named constants. Plain objects, frozen objects, proxied objects or a class-based approach provide some ways to create enums in JavaScript.

Dmitri Pavlutin

Deno vs. Node: No One is Ready for the MoveDeno has a lot going for it as an alternative to Node, but Node has time, maturity and a huge, established userbase on its side (and continues to develop, as seen with this week’s Node v20).

Piumi Liyana Gunawardhana (Honeypot)

How to Work with Dates and Times in Vanilla JavaScript

Chris Ferdinandi

???? Code & Tools

Tachyon 2.0: A Bite-Sized Script to Make Page Navigation Faster — It does this by prerendering pages before a user navigates to them, making page transitions as quick as can be.

Tachyon

instant.page is another well known option in this space.

Iconoir: 1300+ Open Source SVG Icons — A vast array of clean and simple icons, complete with ways to quickly integrate them into React, React Native, Figma, and other apps – or just using CSS, if you prefer.

Luca Burgio

Tuple – One-Click Code Reviews for Remote Devs — Why waste hours setting up Zoom just to review a couple lines of code? Tuple brings your team together in seconds.

Tuple sponsor

Ark UI: A Headless Library of Customizable, Accessible, and Unstyled UI Components — Compatible with React, Vue, and Solid and powered by Zag.js. All components are built with accessibility standards and are easy to theme in line with your own design system.

Chakra Systems

next-route-visualizer: Visualize Next.js App Routes — A package for visualizing Next.js app directory routes, as seen in this demo.

Alexander Vencel

ohash: Super Fast Hashing Library in Plain JS

UnJS

<relative-time> Element 4.3
↳ Web component extension of <time>

Fable 4.1
↳ F# to JavaScript/TypeScript compiler.

useHotkeys 4.4
↳ React hook for keyboard shortcuts.

AdminJS 7.0 – Admin panel for Node webapps.

lowdb 6.0 – Simple, local JSON database.

imaskjs 6.6 – Vanilla JS input masking.

CKEditor 5 37.1 – Rich text editor framework.

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

???? Let’s get it arted..

DPaint JS: A Deluxe Paint-Inspired Image Editor — Sometimes we like to link to impressive projects built with JavaScript, and if you were ever into the Commodore Amiga, you’ll love this one. It’s a Web-based image editor inspired by Deluxe Paint, itself a hugely inspirational graphics editing tool from 1980s. Now we’re just waiting for a NeoPaint clone.. 🙂

Steffest