TypeScript 5.2, Node 20.6, and Astro 3.0

#​653 — September 7, 2023

Read on the Web

😅 We’re back! After two weeks enjoying the blistering desert heat of Las Vegas and downpours of Storm Hilary, I’m ready to get back to the weekly JavaScript roundups – fingers crossed we’re here each week till Christmas now 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Astro 3.0 Released: The All-in-One Web Framework — An increasingly popular, turbo-charged site generator comfortable with not just static sites, but dynamic and interactive ones too by way of its ‘islands’ approach. You can use React, Vue, Svelte, Solid, and others, with it, and v3 adds View Transitions API support (more on that here) which can result in striking creations like this Spotify ‘clone’. It requires a play to really ‘get it’ but it’s great.

Astro Team

Good news – now SvelteKit supports the View Transitions API too 😉

Node.js 20.6 Released with Built-In Support for .env Files — The official release post covers everything new in 20.6, but the highlight is support for .env environment files to set environment variables dynamically when a script is run without requiring a third-party library like dotenv.

Phil Nash

Simplify Security and Compliance for Your Apps — Introducing Pangea: comprehensive API-based security services for developers. Effortlessly integrate foundational security services like Authentication, Authorization, and Audit Logging to create a safer app experience and accelerate your time to market.

Pangea sponsor

Bye to Rome and Hi to Biome for JS Formatting and Linting — First announced in 2020, Rome is/was an ambitious effort to create a unified frontend dev tool to bring ideas from Babel, ESLint, webpack, etc. into one place. After forming a company around Rome and raising money two years ago, things seem to have gone awry, with its key maintainers forking the project as Biome.

Emanuele Stoppa and the Biome Team

⚡️ IN BRIEF:

Version 1.0 of Bun, the notably fast JavaScriptCore-based JS runtime, is due to launch in the coming hours. There’s a livestream and, we assume, a launch post due to land here very soon.

In other ‘alternative runtime news’, the Deno team has announced native npm support on its Deno Deploy platform. They’ve also announced Deno KV is in open beta.

Mozilla: “Over the course of the year Firefox has improved by around 40% on the Vue.js benchmark” – find out why.

David Heinemeier Hansson, the creator of Ruby on Rails, announced that they’re dropping TypeScript from Turbo (a library commonly used with Rails) in favor of plain old JavaScript. Social media drama ensued.

What’s going on with the Gatsby React framework? Folks are noticing there’s not a lot going on with it lately and that 🐦 Netlify layoffs had a big impact. Netlify does, however, say 🐦 updates are coming.

GitHub has made changes to its homepage feeds. Quite a few people are unhappy about it, though.

“The CSS-in-JS sector has plateaued,” says the latest State of CSS survey.

What’s new in Svelte as of September 2023? Quite a lot.

🎉 RELEASES:

TypeScript 5.2 – Complete with the much awaited using declarations..

Node-RED 3.1 – The powerful low-code/visual programming environment gets some key improvements in its editor.

jq 1.7 – It’s not JavaScript, but surely the best JSON processing tool to exist.

Ky 1.0 – Simple HTTP client based upon Fetch for browsers, Node & Deno.

jQuery 3.7.1 – Oh yes indeedy 🎉

Cypress 13

📒 Articles & Tutorials

Making Sense of React Server Components — This is fantastic and exactly what it says on the tin, – we’ll be focusing on it more in next week’s React Status newsletter though 😉

Josh W Comeau

You Don’t Need to Learn Svelte – Here’s Why — I mean.. you kinda do, but Kavii’s excitement is infectious and Svelte’s approach remains refreshing.

Kavii Suri

item: Using Labeled Loops in JavaScript — If using labels gives you flashbacks to BASIC and GOTO statements, I sympathize, but in JavaScript, labels open up an interesting control flow technique. More about this on MDN. continue item;

Ben Nadel

Build a Documentation Chatbot with ChatGPT and EdgeDB — Let’s do it using EdgeDB’s intuitive data model & query language, as well as its powerful TypeScript query builder.

EdgeDB sponsor

A Wide View of Automated Testing in React Apps — A straightforward and to the point introduction to why you might use automated testing, how to get going in the scope of a React app, and what to be testing.

The React Handbook

How to Create a Dual-Mode Cross-Runtime JavaScript Package — Specifically, supporting both ESM and CommonJS, and across runtimes like Node, Deno and the browser.

Hexagon

Benchmarking 24 CSV Parsing Approaches — The most extensive CSV parsing benchmark I’ve seen. The author is himself the creator of the μDSV CSV parsing library and wanted to check out the common ‘lightning fast performance’ claims of other libaries.

Leon Sorokin

The Complexity of Building an Efficient Node.js Docker Image — It’s possible to get huge reductions in image size and build time and Samuel shares his approach here, but he also questions whether all this work should be necessary.

Samuel Bodin

Learn High-Level Compilers, Tools, & Techniques – in JavaScript!

Dmitry Soshnikov Education sponsor

14 Linting Rules To Help You Write Asynchronous JS Code

Maxim Orlov

How to Create a Chrome Extension in 10 Minutes Flat

James Hibbard

🛠 Code & Tools

Peaks.js 3.0: View and Interact with Audio Waveforms — A JavaScript component for browser-based audio waveform visualization that comes from the BBC’s R&D department. There’s a live example on the homepage. GitHub repo.

BBC

🎸 SVGuitar: Create SVG-Based Guitar Chord Charts — Why not continue with the musical theme? 😁 You can experiment with this one via this live demo.

Raphael Voellmy

FormKit 1.0: The Open-Source Form Framework for Vue — Ships with production-ready scaffolding like inputs, forms, submission and error handling, and validation rules.

FormKit, Inc.

Add Authorization, MFA, Biometrics and More to Your JavaScript App in Just Minutes — It’s about time that somebody talked some sense about OAuth and JavaScript. So we did. You’re welcome.

FusionAuth sponsor

Plate: Roll Your Own Slate-Based Rich-Text Editor — A framework for building React-based rich text editors where you can select the specific features and functionality you need. GitHub repo.

Ziad Beyens

Math.js: An Extensive Math Library for Node and Browser — Work with complex numbers, fractions, units, matrices, symbolic computation, etc. A long standing library now, but continuing to get frequent updates. GitHub repo.

Jos de Jong

Calendar.js: A Calendar Control with Drag and Drop — A responsive calendar with no dependencies, full drag and drop support (even between calendars) and many ways to manage events with recurring events, exporting, holidays, and more.

William Troup

💻 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.

npm-to-yarn – Convert npm commands to yarn and vice versa.

export-to-csv – Export arrays of objects to CSV.

Marked 8.0 – Fast Markdown parsing library. (Demo.)

Perfectionist 2.0 – ESLint plugin for sorting various data.

React Native Vision Camera 3.0
↳ Powerful camera control for React Native apps.

YouTube.js 6.3
↳ Client library for YouTube’s internal API.

Ink 4.4 – Use React to build CLI apps.

Prisma 5.2

ffmpeg.wasm 0.12.6

Astro 2.0 and TypeScript 5.0 beta

#​623 — January 27, 2023

Read on the Web

JavaScript Weekly

Astro 2.0: The Next-Gen ‘Islands’-Oriented Web Framework — 2.0 includes hybrid rendering (mixing of SSR and SSG outputs), type safety for Markdown & MDX, and an upgrade to Vite 4.0. Astro is worth exploring when performance is key as it works with popular frameworks but lets you deliver the least JS possible to get pages rendered.

Fred Schott

Prefer a talk? Nate Moore’s ViteConf talk ▶️ Islands Architecture, Astro, and You will bring you up to speed.

Deep Cloning Objects in JavaScript, The Modern Way — If you’ve been leaning on something like Lodash for deep cloning, you might not need to any longer. “It’s been a long time coming, but we finally now have the built-in structuredClone function to make deep cloning objects in JavaScript a breeze.”

Steve Sewell

Go From Professional Web Developer to Lead Engineer — Aspiring lead developer? Our collection of comprehensive video courses cover the fundamentals of JavaScript, TypeScript, React, web performance, and more.

Frontend Masters sponsor

Announcing TypeScript 5.0 Beta — A new major version number, but users of the popular typed JS superset will face a ‘similar upgrade experience’ to previously. Decorators make it in as a first class feature, significant performance and package size optimizations are present, export type * is supported, all enums are now union enums, and much more.

Daniel Rosenwasser (Microsoft)

AlaSQL.js 3.0: Isomorphic JavaScript SQL Database — A SQL database you can use in the browser, Node.js or mobile apps. An interesting bit of functionality is you can use SQL to query JavaScript objects – example. “The library adds the comfort of a full database engine to your JavaScript app. No, really.”

Andrey Gershun

IN BRIEF:

🏅 If you’re really into Vue.js, you’ll soon be able to become officially certified in it.

If you’re using React, you should be using a React framework, 🐦 says Andrew Clark of the core team.

The creator of alternative JS runtime Bun asks: “If there’s one thing missing from Bun for you to switch, what is it?” You can reply on Twitter.

jQAPI.com is an amazing meeting of old and new JavaScript – it’s an Astro powered version of jQuery’s documentation!

RELEASES:

Shoelace 2.0
↳ Agnostic library of web components.

μFuzzy 1.0
↳ Tiny fuzzy search library.

React Router 6.8

Node.js 19.5.0

📒 Articles & Tutorials

Getting Started with SvelteKit — SvelteKit only recently hit 1.0 and this is a comprehensive overview of how to build a site using the Svelte-oriented app framework. It covers topics like routing, layouts, data, props and more.

Adam Rackis

Using .NET Code from JavaScript using WebAssembly“Starting with .NET 7, you can easily run any .NET method from JavaScript without needing the whole Blazor framework.”

Gérald Barré

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

scrollend: A New JavaScript Event — Finally an event you won’t need a hotel booking for. scrollend provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? Surprisingly not – Firefox 109+ supports it too.

Adam Argyle (Chrome Team)

Packaging Rust Apps for the npm Registry — Isn’t npm just for JavaScript projects? Nope. Node is required to make this technique work, but as long as you can package and execute a binary, you’re good to go.

Orhun Parmaksız

Making Sense of TypeScript using Set Theory — This article certainly doesn’t hang around. Neat diagrams too.

Vladimir Klepov

React Authentication, Simplified

Userfront sponsor

Accessible Hamburger Buttons without JavaScript — Sometimes you need to consider if modern techniques allow you to avoid JavaScript. Here’s a CodePen if you want to play.

Pausly

While we’re on the topic of less JavaScript, the latest episode of the Stack Overflow podcast ▶️ ‘The less JavaScript, the better’ focuses on Astro.

🛠 Code & Tools

Uppy 3.4: Powerful, Modular JavaScript File Uploader — Upload not just from local sources but even Dropbox or Instagram. Integrates with popular frameworks and supports resumable uploads. GitHub repo.

Transloadit

Nut.js 3.0: Desktop Automation from Node — Take control of your desktop (Windows, macOS or Linux) in code with control over keyboard + pointer, along with image matching functionality. GitHub repo.

Simon Hofmann

Optimize Your Systems’ Performance With TelemetryHub – Real-Time Data Monitoring & Analysis — An advanced data visualization and analysis tool that can help you identify and resolve unseen issues in your environment. Try free.

TelemetryHub by Scout sponsor

Eleventy v2.0: First Beta of the Popular Site GeneratorEleventy is a popular Node.js static site generator and v2.0 includes enough major changes that a thorough beta is needed. The creator ▶️ made this quick video about the release.

Zach Leatherman

Mock Service Worker 1.0: API Mocking Library for Browser and Node — 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

Drift: A Self-Hostable Gist-Like / Pastebin Service — Built with Next.js 13.

Max Leiter

Dygraphs 2.2
↳ Interactive charts of time series data.

actions/github-script 6.4
↳ Write GitHub Actions workflows in JS.

Playwright 1.30
↳ Browser automation framework.

Faast.js 6.4
↳ Serverlessly call JS functions on AWS Lambda & Google Cloud Functions.

Cypress 12.4
↳ Testing framework for anything in a browser.

D3plus 2.1
↳ Extend D3.js with more visualization types.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Senior Full-Stack Engineer – React + TypeScript — Come help Qwire modernize how studios, composers, artists, publishers, labels, and the rest of the industry manage music rights.

Qwire

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired