Month: December 2023

#​668 — December 21, 2023

Read on the Web

🎄 Welcome to the final issue of 2023! We’re taking a week off for Christmas, so this issue focuses on looking back at the past year and the items that intrigued you the most. We’re back at full steam on January 4, 2024 and we hope you have a fantastic holiday season.
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

🎉  V8 is Faster and Safer Than Ever — The V8 team wants to end the year on a high and they’ve certainly pulled it off performance-wise. This post covers the highlights for the V8 engine in 2023, including the new Maglev mid-tier JIT compiler, the faster HTML parser, and support for several new JS features.

Victor Gomes (V8)

Announcing SvelteKit 2 — SvelteKit’s first official release was a year ago, and despite its relative youth, the framework has been quickly embraced by the community. This 2.0 release is an incremental one, adding support for Vite 5, and laying the groundwork for Svelte 5 which is due for release in 2024.

Svelte

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.

Bosch sponsor

date-fns v3 Released — The hugely popular suite of 200+ functions for working with dates in JavaScript has been rewritten in TypeScript, reintroduces String date arguments, has ESM support on Node, and all functions now export via named exports. GitHub repo.

Sasha Koss

v0: Vercel’s AI-Powered React Component Creator — The AI-powered v0 looked fascinating on its release, but has been stuck behind a waitlist till now. Vercel has dropped that list, opening it to all users. Even Larry David would admit it’s pretty, pretty good.

Vercel Labs

IN BRIEF:

RIP Vue 2.x: If you’re using Vue 2, be prepared: Vue 2 goes ‘End of Life’ (EOL) on December 31st, 2023.

We’ve revisited Robin Wieruch’s 10 Web Development Trends in 2023 from January 2023 – he was on the money with all of them.

Linus Schlumberger took a look back at all the main new JS and TS features of the past three years.

Conversely, The New Stack took to looking at what’s next for JavaScript.

Remote Workshop: Svelte & SvelteKit – Afternoons of Jan 30 to Feb 1

Mainmatter sponsor

▶  TypeScript Origins: The Documentary — Videos don’t tend to do well in JavaScript Weekly, but this was the most popular one, so I wanted to feature it again! I truly enjoyed watching all of this; it’s so well made. It digs into the motivations and process behind TypeScript’s creation and release, and could easily replace Die Hard in your Christmas rotation. Maybe.

OfferZen

26 Web Dev Terms You May Not Have Heard Of

Jens Oliver Meiert

📒 Top Articles & Tutorials of 2023

As determined by their popularity in JavaScript Weekly.

Deep Cloning Objects in JavaScript, The Modern Way — I’m as surprised as you, but this was the top-clicked link in 2023. If you’ve been leaning on something like Lodash for deep cloning, we “finally now have the built-in structuredClone function to make deep cloning objects in JavaScript a breeze.”

Steve Sewell

Web Components Will Outlive Your JavaScript Framework — Web Components have been having ‘quite a moment’ this year and this looks set to continue in 2024. This was a spicy opinion piece but the points raised provoked a lot of discussion and remain highly relevant in the JS zeitgeist.

Jake Lazaroff

What Is Deeper SAST in JavaScript? — Read about the expanded capabilities of Sonar’s SAST to help detect security vulnerabilities in your JavaScript apps.

Sonar sponsor

You’ve Got Options for Removing Event Listeners — A review of some of the most common approaches available to remove event listeners in JavaScript.

Alex MacArthur

Things You Forgot (or Never Knew) Because of React — The item that was popular in both this newsletter and our React newsletter and easily one of the ‘classics’ of the year.

Josh Collinsworth

Writing JavaScript Without a Build System — Using a variety of build tools for things like bundling and transpiling is reasonably standard in modern JavaScript development, but what if you want to keep things simple? For simple things, it’s not necessary, says Julia. This led to a lot of discussion on Hacker News.

Julia Evans

Julia didn’t mention them, but 2023 was also the year that import maps became broadly supported in browsers, opening up extra opportunities for build-free JavaScript. The whole topic remains a little up in the air, though, judging by the reaction to DHH’s (he of Ruby on Rails fame) excitement about the ‘no build’ experience.

🛠 Top Code & Tools of 2023

As determined by their popularity in JavaScript Weekly.

UnsuckJS: Comparing Lightweight JavaScript Options — A list of frontend JS libraries in a table on a single, fast page. It remains a handy way to see the relative popularity, file size, and latest versions of libraries as diverse as Preact, Bau, htmx, Hyperapp, and Mithril.

Adam Hill

React Libraries for 2023 — The React ecosystem is so large that there’s often a problem of being spoiled for choice, so opinionated guides to different solutions tend to do well, like this annual list from Robin.

Robin Wieruch

Session Replay Basics – Debug Web App Issues Faster — Join us on Jan 11 to learn how Session Replay can help find and resolve the most difficult-to-repro issues in JavaScript.

Sentry sponsor

A Huge Year for Playwright — The popular Web testing and automation framework took some serious steps forward in 2023, particularly with v1.32.0 (linked above) offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with built-in watch mode. ▶️ This video provides a good introduction.

Microsoft

You Don’t (May Not) Need Lodash or Underscore — Inspired by the popular You Might Not Need jQuery, this extensive document provides pure JS alternatives to almost 100 different functions as you’d find in popular utility libraries like Lodash.

You Don’t Need

Driver.js: Tours, Highlights, Contextual Help, and More — A no-dependency library for putting together on-page tours and contextual help. The project is a few years old but was rewritten in TypeScript in 2023, gained numerous enhancements, and got a fresh lick of paint.

Kamran Ahmed

Transformers.js: Running ML Models in Your Browser — Transformers are a type of machine learning model often used in language or visual processing and while running these in the browser remains in its infancy, Transformers.js opens up some ML models to you with some impressive demos here.

Xenova

DeviceScript: Microsoft’s Even-Tinier TypeScript — DeviceScript brings the TypeScript experience to low-resource microcontroller devices. It’s compiled to a custom VM bytecode that can run in such constrained environments (a la Go’s TinyGo.) It’s aimed at VS Code users but there’s a CLI option.

Microsoft

Please note that these are the items that got the most clicks in the newsletter, but as we’ve covered throughout the year, many projects have had significant releases this year, including Deno, Astro, TypeScript, Node.js, Ember and Bun.

That’s all for now, and we’ll see you again in 2024! ❄️

#​667 — December 14, 2023

Read on the Web

✍️ Christmas is almost here, so we’re preparing our annual roundup issue for next week, before we take some time off! Keep an eye out for that next Thursday 🙂
__
Your editor, Peter Cooper

JavaScript Weekly

Oxlint: A New JS Linter ’50-100x Faster’ than ESLint? — Making tools as fast as possible is a common theme in the JavaScript world, and it’s the MO for the JavaScript Oxidation Compiler toolkit. Oxlint is one of their tools that’s now GA. It’s still early days, but when Evan You says “the performance is absolutely nuts” when running against the Vue 3 codebase, we sit up and listen.

Boshen

Bun v1.0.18: The JS Runtime Preparing to Take Over the World — I might have overegged the headline, but Bun is on a serious mission to replace Node.js, at least, with their ‘one goal for 2024’ being to “flip the default backend JavaScript runtime from Node.js to Bun.” They are also placing a focus on shipping Windows support ASAP.

Jarred Sumner et al.

New TypeScript Courses: Take the Learning Path — Join Mike North (Tech Lead at Stripe) for this series of brand new TypeScript courses. You’ll get hands-on practice covering both the fundamentals and advanced features like utility types and advanced generics. Learn best practices to configure and evolve your TS codebase!

Frontend Masters sponsor

Visual Studio Code November 2023 — The latest VS Code release has some handy enhancements for JS developers, including a V8 heap snapshot visualizer, the ability to drag tabs into their own new windows (a.k.a. ‘floating editor windows’), and TypeScript 5.3.

Microsoft

Deno 1.39: The Return of WebGPU — Deno introduced WebGPU support in Deno 1.8 but it was removed for various reasons. It’s back and gives you a tidy way to work with the GPU directly from JavaScript (behind the –unstable-webgpu flag, at least). Improvements to Node.js compatibility and various Deno APIs, as well as TypeScript 5.3, are included.

The Deno Team

IN BRIEF:

🎁 GitHub Unwrapped is a fun project that renders your GitHub activity into a video (a la Spotify’s “Wrapped” roundups). The source is available. It uses the React-based Remotion to dynamically create the videos.

Safari 17.2 is a particularly jam-packed release of Apple’s browser, but on the JavaScript side it has added support for import attributes.

There’s only a day or two left to take the State of JS 2023 survey.

The latest Storybook beta has added support for React Server Components.

A handy list of JavaScript engines, runtimes, and interpreters.

RELEASES:

Million 3.0 – VDOM replacement for faster React.

Croner 8.0 – Trigger functions using cron syntax.

Rollup 4.9, Ember.js 5.5, Expo Router 3.0 beta, Remix 2.4.

📄 Articles & Tutorials

The Await Event Horizon in JavaScript — You know someone’s getting heavy when they start a JavaScript article by talking about the event horizon around black holes and how “a similar boundary exists around every JavaScript Promise.” Enjoy.

Charles Lowell

Benchmarking, Profiling, and Optimizing JS Libraries — As part of this year’s Web Performance Calendar, take a journey with Stéphane to learn about optimizing a library (globalize, in his case) by way of benchmarking and profiling.

Stéphane Goetz

[Live Today] Fix Slow Code and Improve Browser JavaScript Performance

Sentry sponsor

The New TC39 FAQs — TC39 is the committee responsible for evolving and maintaining the ECMAScript spec, the standardized form of JavaScript, and its members have started a disclaimer-riddled FAQ. You can suggest new topics by opening an issue, or learn a little from the nine questions covered so far, including Will JS ever add JSX notation? and Will WebAssembly replace JS?

Ecma TC39

You Don’t Need JavaScript for That — “Just because you know something needs JavaScript, doesn’t mean it still does. You can make better websites if you test those assumptions every now and then.”

Killian Valkhof

What Vue’s Creator Learned the Hard Way with Vue 3 — Evan You shared some of the lessons he learned from the release and reception of Vue 3 around things like including a lot of small breaking changes, to choosing deprecation over breaking changes.

Loraine Lawson (The New Stack)

▶  Deploying Node.js with Google’s Duet AI — Duet AI is Google’s AI-based assistive agent that works both in the IDE and within Google Cloud.

Google Cloud

Stop Nesting Ternaries in JavaScript

Phil Nash

🛠 Code & Tools

RE:DOM 4.0: The 2K UI Library — We first linked to this library over 6 years ago but it’s still going, so if you want something to help with creating and syncing DOM elements that’s ‘close to the metal’, it’s worth a look. v4.0 enables tree shaking and adds viewFactory.

Juha Lindstedt and contributors

TS Docs: Online Reference Docs for npm Packages — Browse reference TypeScript documentation for any package or version of a library.

Shubham Kanodia

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

Seroval 1.0: Stringify JS Values — A handy utility library for turning JavaScript values into strings that can handle far more complex things than JSON, say.

Alexis H. Munsayac

SpaceTime 7.5: A Lightweight Timezone Library — Use this to calculate times in other timezones. Has a Moment-like API but is immutable. No dependencies. GitHub repo.

Spencer Kelly

React Responsive Pagination: Component for Smart Pagination — A responsive pagination component which intelligently adjusts to the available width. The homepage is a live demo, or you can hit the GitHub repo.

Jon Elantha

Svelte SPA Router: A Router for Svelte 3 and 4 SPAs — Previously for Svelte 3 only, Svelte 4 support has now been added. Upgrade guide.

Alessandro (Ale) Segala

📊 vue-chartjs: A Vue.js Wrapper for Chart.js — Using Vue? Want charts? Consider this. Demos here.

Jakub

Bringing Performance, Reliability, and CI/CD to Data — Managed infrastructure for versioning, access controls, and performance. Subscribe now.

Patch sponsor

Facebook Relay 16.1 – The React GraphQL framework.

React PDF 7.6 – Display PDFs in your React apps.

Reactotron 3.0 – React Native debugging tool.

jest-image-snapshot 6.4 – Jest matcher for image comparisons.

pnpm 8.12 – Fast, efficient package manager.

ws 8.15 – Fast Node.js WebSocket library.

np 9.2 – A better npm publish.

😍 Beautiful Planets

Three.js Procedural Planets — This is gorgeous! You can have a lot of fun adjusting the parameters to change the outcome, or you can spin up and play with your own copy using the source code. If you don’t want to stress out your browser, you can see how it looks ▶️ in this video.

Daniel Greenheck

#​666 — December 7, 2023

Read on the Web

JavaScript Weekly

Learn How Modern JS Frameworks Work by Building One — Building things is a great way to learn, even if you don’t end up using what you built. Even better is when someone who’s already built something successful introduces you to the process. Nolan doesn’t go super deep but far enough to whet your appetite and for you to learn a few things by taking it further.

Nolan Lawson

🚀  Astro 4.0 Released — The new major release of the Astro content-site framework is just out, including a new dev toolbar, automatic i18n routing, new view transition APIs, and more. There’s also, experimentally, incremental content caching. Upgrading is simple – an npx @astrojs/upgrade away for most folks.

Astro

Streamline API Development With Postman Workspaces — Postman workspaces give teams shared access to the API tools they need to solve problems together. They are the go-to place for development teams to collaborate and move quickly while staying on the same page.

Postman sponsor

Maglev: V8’s Fastest Optimizing JIT — An interesting look under the hood of how the V8 JavaScript engine (as used in Chrome, Node.js and elsewhere) continues to get faster thanks to work on its Maglev JIT compiler which sits between the existing Sparkplug and TurboFan compilers (which both have distinct compilation speed vs code performance tradeoffs).

The V8 Team

IN BRIEF:

📊 The WebAssembly vs JavaScript (PDF) paper compares the energy requirements and performance of JS and WASM on the Web. Spoiler: “WebAssembly is faster than JavaScript and even more energy efficient.”

A recap of the Electron ecosystem in 2023.

The New Stack weighs up the pros and cons of using React today.

Talk about going down a rabbit hole, but did you know it’s possible to use Nuxt, Vue and Tailwind CSS to build an Adobe Premier Pro plugin?

Popular ingress service ngrok has unveiled a JavaScript SDK to add secure ingress to Node apps.

The Construct 3 2D game engine now supports TypeScript.

RELEASES:

Electron 28 – Now with ESM support, Chromium 120 & Node.js 18.18.2.

Fresh 1.6 – The Deno-based web framework.

React Native 0.73 – Now with full Android 14 support, Kotlin becomes the recommended language for Android, and more.

HTML5 Boilerplate v9.0 – Blast from the past!

Redux 5.0, Redux Toolkit 2.0, and more.

Node.js v21.4.0 (Current), Qwik 1.3, and Redwood 6.5

📄 Articles & Tutorials

Prettier’s CLI: A Performance Deep Dive — We’ve recently written about the bounty the Prettier project put up (and how Biome won it) but Prettier has also been working on itself by hiring the author of this post to find and implement performance improvements, all while sticking with JavaScript.

Fabio Spampinato

The Complete Puppeteer Cheatsheet — If you want to control a headless Chrome browser from JavaScript, Puppeteer is for you.

Mohan Ganesan

Accelerate Your API Development with Postman Collection Templates — Browse 70+ free and customizable templates to jump-start your API design, documentation, development, and testing workflows.

Postman sponsor

How Marketing Changed OOP in JavaScript — A look at JavaScript’s earliest history and its prototypal nature.

Juan Diego Rodríguez

Goodbye, Clean Code — Much as Donald Knuth warned us away from premature optimization, here Dan Abramov tells us to beware of premature refactoring and de-duplication. (A golden oldie post from 2020.)

Dan Abramov

I Replaced npm, yarn and nvm with pnpm — npm hasn’t been the only package manager in town for many years.

Pawel Grzybek

Advanced Patterns for Taking Page Element Screenshots with Playwright

Liran Tal

TypeScript’s Hidden Feature: Subtypes

Tim Johns

🛠 Code & Tools

TSDiagram: Diagrams as Code with TypeScript — Draft diagrams quickly with TypeScript. Define data models through top-level type aliases and interfaces and it automatically lays out things out in an efficient way. GitHub repo.

Andrei Neculaesei

StyleX: Meta’s CSS-in-JS Styling System — A newly open sourced “CSS-in-JS” library from Meta made up of a JavaScript syntax and compiler for styling web apps. Jack Herrington has ▶️ a 13-minute screencast taking a practical look.

Goel and Gallagher (Meta)

Simplify Debugging with Console Ninja’s Predictive Logging — Smart predictions and ahead of time logging saves you multiple iterations of adding logs and re-running your app to get the values you need.

Wallaby Team sponsor

tsParticles 3.0: Particles, Confetti and Fireworks for Your Pages — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support.

Matteo Bruni

Culori: A General-Purpose Color Manipulation Library — Supports most color spaces and formats defined in the CSS Colors Level 4 spec and can parse, convert, mix, create color differences, and more. GitHub repo.

Moqups

Perfume.js 9.2: Web Performance Library for Measuring User-Centric Metrics — A tiny web perf monitoring library that reports data back to your favorite analytics tool and supports the latest browser performance APIs for precise metrics on things like first paint, total blocking time, etc.

Leonardo Zizzamia

Timenames: A Unique Name for Each Second of the Day — The author had an app and wanted to create more interesting unique filenames without using the time directly. There’s a live demo showing the names in action.

Ankur Seth

YouTube.js 8.0: A Wrapper Around YouTube’s Private ‘InnerTube’ API — It uses the same behind the scenes API as official YouTube clients, rather than the official developer API, so, as always, your mileage may vary.

LuanRT

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch

Bosch sponsor

Storybook 7.6 – The frontend UI component workshop.

Mantine 7.3 – Full featured React component suite.

swup 4.5 – Page transition library for server-rendered sites.

wavesurfer.js 7.5 – Audio waveform rendering and playing.

Nano Events 9.0 – An event emitter library in 107 bytes.

AdminJS 7.5 – Admin interface for webapps.

AVA 6.0 – Popular test runner for Node.