On the origin of packages
#635 — April 20, 2023
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 and where it will be beneficial.
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 20 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
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 (and that of Relay) appears to have been affected by Meta’s latest round of layoffs, though Dan Abramov recently noted Meta’s continued investment into the library.
Introducing the TERN Stack & How to Migrate from MERN to TERN
Tigris sponsor
RELEASES:
Shoelace 2.4
↳ Popular library of well designed Web components.
📒 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 API — React 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 Move — Deno 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
