#648 — July 20, 2023
JavaScript Weekly
pkg-size: Find the True, Current Size of an npm Package Without Leaving Your Browser — A beautifully designed site that can show you the true size of an npm package (including dependencies) using the actual packages which are ‘installed’ in a browser-based WebContainers-powered environment. Hiroki has 🐦 a Twitter thread where he explains more about how it works.
Hiroki Osame
TypeScript and the Dawn of Gradual Types — From GitHub’s ReadME project comes a thorough journalistic take on how static typing made it into the JavaScript world, what TypeScript offers, some alternative approaches, and the possibility of adding type annotations to JavaScript iself.
Mike Melanson (GitHub)
Create a Real-Time Multi-Host Livestream with Amazon IVS — Amazon Interactive Video Service (Amazon IVS) enables developers to create dynamic video experiences, such as collaborative livestreams with multiple hosts. Click here to learn more.
Amazon Web Services (AWS) sponsor
Storybook 7.1: The Workshop for Building UI Components — v7.1 introduces in-app onboarding for your newest team members, zero-config styling support for Tailwind, MUI, styled-components and MUI, Vue 3 source snippets, and more.
Storybook Team
Five Inconvenient Truths about TypeScript — A brief dose of reality for a world seemingly obsessed with TypeScript: “If you want to get into TypeScript, don’t think you can leave JavaScript behind. It will find you, and it will get you.”
Stefan Baumgartner
🎉 RELEASES:
Fresh 1.3 – The Deno web framework. Plugins can now inject routes and middleware into apps, there’s Deno.serve support, and you can create async route components.
Downshift 8.0 – Primitives to build WAI-ARIA compliant React autocomplete, combobox & select components.
Node.js v18.17.0 (LTS) – Node 18 gets the Ada 2.0 WHATWG URL parser.
Fastify 4.20 – The fast, low overhead web Node.js framework.
⚡️ IN BRIEF:
The Promise.withResolvers proposal has progressed from stage 2 to 3 at TC39, as has the array grouping proposal, as well as source phase imports.
🗣 The folks on Hacker News discussed why the site isn’t being indundated with links to new JavaScript frameworks recently. Has React ‘won’? Has AI stolen the limelight? Or is a JavaScript revolution quietly brewing..?
👴🏻 A blog post from 1996 popped up telling us about the newest JavaScript features in Netscape 3.0 – definitely a blast from the past. Say hello to the typeof operator!
📒 Articles & Tutorials
‘How We Generate JS and Python SDKs from a Canonical Rust SDK’ — PostgresML is an extension that adds machine learning functions into Postgres. Its team loves and prefers Rust but most of its users are using JavaScript or Python. What to do? Simultaneously write multi-language libraries using Rust..
Silas Marvin (PostgresML)
💡 Psst.. if you use Postgres at all, we have a Postgres newsletter too!
Updating Code with jscodeshift — TypeORM is an ORM for Node that introduced some breaking changes requiring the author to update lots of calls in his code. A perfect time to use a ‘codemod’ to automate the job. Even if you don’t use TypeORM, this post might give you some ideas for other places to use such an approach.
Clinton Blackburn
AI-Proofing Your Career For Tomorrow: Free Session by Interview Kickstart — Discover Your AI Career Path (AI/ML vs Data Science). Take an informed decision: Insights from FAANG+ AI/ML Engineers. Register for a free session.
Interview Kickstart sponsor
How React 18 Improves App Performance — If you’ve not entirely kept up with how things have changed or developed in React with regards to concurrent rendering, transitions, Suspense, and even React Server Components, this is a fantastic review and primer to get up to speed on how React’s newer features dramatically help with performance.
Lydia Hallie (Vercel)
300ms Faster: Measures Taken to Reduce Wikipedia’s Total Blocking Time (TBT)
Nicholas Ray
On the Origins of JSX and Why It Exists
Hristiyan Dodov
🛠 Code & Tools
wavesurfer.js 7: Audio Waveform Player — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. GitHub repo.
katspaugh and contributors
TOAST UI Grid: A Customizable Grid Control for the Web — A powerful MIT-licensed grid-style control for the display, editing, and management of data. It comes from the same folks as TUI Editor and TUI Calendar and while it’s happy on its own, there are wrappers for Vue and React too. GitHub repo.
NHN
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
Pines: A Library of UI Components for Alpine.js and Tailwind Projects — Includes sliders, tooltips, accordions, modals, and others. The CSS-only components are usable in any Tailwind project while the ones that require JS are designed for use with Alpine.js.
devdojo
YouTube.js 5.5: A Wrapper Around YouTube’s Private API — One of those things you’d expect to be quickly blocked somehow, but it’s 18 months old, so… 😆 The fun isn’t just for Node or Deno users – it’ll work in the browser if you can proxy the requests through your own server.
LuanRT
Eruda 3.0: A Console for Mobile Browsers — If you’re in a situation where you have no access to DevTools, you can add Eruda to your page and it provides a sort of virtual devtools you can use from any browser, including on mobile.
LiriLiri
Reagraph 4.10: WebGL Graph Visualization Library for React — Here’s a basic code example. This week’s release adds support for three dimensional clustering. GitHub repo.
REAGRAPH
brotli-wasm 2.0: A Brotli Compressor and Decompressor — Covers both Node and the browser by means of WebAssembly.
HTTP Toolkit
Pacquet: A New, Experimental Package Manager for Node — From a Node.js core member, no less.
Yagiz Nizipli
Shareon 2.2
↳ Lightweight, stylish ‘share’ buttons for social networks.
Helipopper 8.0
↳ Tooltips and popovers for Angular. (Demos.)
Ink 4.3
↳ React for interactive command-line apps.
💻 Jobs
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.
🎵 Thank you for the music..
Chip Player JS: Browser-Based MIDIs, MODs and Game Music — The creator of this site has, like me, a fascination with old digital music – MIDI files, trackers, and the like. Rather than keep an old computer running, he decided to build a browser based music player for such files.
Matt Montag
P.S. If you’re looking for something specific to listen to, the music by famed Norwegian tracker Jogeir Liljedahl is well worth a try – particularly Overture or Guitar Slinger. Or how about Donkey Kong Country’s dreamy Aquatic Ambience? It’s striking how trackers managed to squeeze so much down into a few hundred kilobytes by the heavy reuse and manipulation of samples.