The return of ECMAScript 2023 (and Angular)

#​634 — April 13, 2023

Read on the Web

JavaScript Weekly

The JavaScript Equality Table GameMinesweeper will feel like a walk in the park after this reminder of the horrors of JavaScript’s ==. If you need to go in depth, Section 7.2.14 of the ECMAScript spec will help, but otherwise? Stick to three equals (===) unless you have a good reason not to.

Reinis Ivanovs

htmx 1.9 Released — htmx (homepage) is an increasingly popular library outside of the JavaScript space as it lets folks use things like WebSockets, SSE, AJAX, and CSS transitions by marking up HTML rather than writing lots of JavaScript. v1.9 adds support for view transitions and generalized inline event handling. The code examples are worth a look – htmx makes a lot possible, with rather little tooling or markup needed.

htmx team

Supercharge AWS S3 Video Streaming with ImageKit’s Video API — Get adaptive bitrate streaming, video optimizations, format conversions, and real-time transformations and watermarking by attaching ImageKit with your AWS S3 bucket.

ImageKit sponsor

The ECMAScript® 2023 Language Spec Steps Forward — After prematurely announcing the progression of the ES2023 spec in February, we can now announce: TC39 has approved the ECMAScript 2023 spec, and while it remains a candidate, it’s now a step closer to eventual ECMA General Assembly approval. The finished proposals list for 2023 now includes Array find from last, hashbang support, Symbols as WeakMap keys, and change Array by copy.

ECMA International

IN BRIEF:

▶️ Angular is back with a vengeance, says Fireship.

Serverless platform AWS Lambda has introduced response streaming on its JS runtime (for now) so you can send response data as it becomes available rather than all at once. (→ Via Serverless Status)

/[]/ A look at a seemingly JS-specific quirk in regular expressions when empty character classes are used.

An analysis of languages used in GitHub pull requests shows JavaScript/TypeScript leading the way with Python just slightly behind. The comments went in lots of odd directions here.

Seven folks at Vue Amsterdam 2023 shared their ▶️ tips on getting started with Vue.js.

▶️ An hour-long chat on the State of Node.js with some leading figures.

Node v18.16.0 (LTS) has been released with backported support for compiling JavaScript code into a single executable app. Node 19’s Ada URL parser also appears.

A striking visual introduction to React and its fundamental concepts.

RELEASES:

Node.js v19.9 (Current)

Puppeteer v19.9 – It’s the week for almost 20s.

pnpm 8.2 – Efficient npm alternative.

Redwood 4.5 – Popular app framework.

Storybook 7.0 – With an official release post this time.

???? Articles & Tutorials

Ranger: Use a Range-Like Syntax for Anything? — const numbers = 1[[…8]], anyone? This is a neat trick for a bit of syntatic sugar, but I’m not sure it would pass the sniff test for most teams. You might find the implementation interesting to check out though. Long may this sort of experimentation continue.

Jon Randy

???? A proposal for JavaScript to get built-in range support is at stage 2.

????  Build and Deploy ‘23: May 3rd – Save the Date! — The ultimate CI/CD virtual conference – best practices and end-user success stories from DevOps experts. Plus, a keynote from Emily Freeman, author of DevOps for Dummies.

Codefresh sponsor

Trying Node’s Built-In Test Runner — In 2022, Node gained an experimental built-in test runner (node:test). It’s going to become stable in the forthcoming Node v20, so it’s a good time to look at how it works and how it compares to other solutions you might already be using.

Gleb Bahmutov

▶  The Right Way To Merge JavaScript Objects — In just one minute, too.

Jack Herrington

Ref vs. Reactive: What to Choose When Using Vue 3 Composition API?

Michael Hoffmann

How to Stream File Uploads to S3 Object Storage from Node.js

Austin Gil

How to Contribute to a Project You Have No Idea About

Michal Warda

???? Code & Tools

Reveal.js 4.5: An HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v4.5 was just released with support for jumping to specific slides, a few new themes, and with live reload working with files in subfolders.

Hakim El Hattab

List.js: Add Search, Sort, Filters, and More to Tables and Lists — A handy library for adding search, sort, filters and flexibility to tables, lists or other HTML elements. Want an example? Why, of course.

Jonny Strömberg

????Quokka.js – #1 JavaScript Scratchpad for VS Code — With 2M+ downloads, Quokka.js is the #1 tool for exploring and testing JavaScript/TypeScript. Code runs immediately as you type.

Wallaby.js sponsor

Queue: Async Function Queue with Adjustable Concurrency — Exports a class Queue that implements most of the Array API.

Jesse Tane

Yet Another React Lightbox — Add a lightbox component to your projects “in minutes” – there are several examples to try, as well as a playground with adjustable settings. GitHub repo.

Igor Danchenko

Sandpack 2.6: Component Toolkit for Creating Live Code Editing Experiences — Created by the folks at CodeSandbox, so they surely know what they’re doing in this space. GitHub repo.

CodeSandbox

Easy to Use, Full-Stack Application Monitoring

TelemetryHub sponsor

TS Writer: A Template String Template Engine for Generating Code at Runtime — Rather niche, but aimed at situations where you might need to generate code at runtime in TypeScript.

tinylibs

Minimatch 9.0
↳ Glob matcher library.
     minimatch(“bar.foo”, “*.foo”)

hls.js 1.4
↳ Play HLS in browsers with support for MSE.

Partytown 0.8
↳ Relocate third-party scripts off the main thread.

Plasmo 0.68
“It’s like Next.js for browser extensions”

Obsidian 8.0 – GraphQL, built for Deno.

MUI X 6.1 – React component suite.

TestCafe 2.5 – Automate end-to-end web testing.

Maquette 3.6 – Lightweight virtual DOM library.

Venom 5.0 – WhatsApp bot library.

???? 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

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

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

Why document.write() is bad

#​622 — January 20, 2023

Read on the Web

JavaScript Weekly

Why Not document.write()? — Many moons ago, document.write was a mainstay of client-side JavaScript code, but it’s long been considered a bad practice – why? Harry digs in, noting that it “guarantees both a blocking fetch and a blocking execution, which holds up the parser for far longer than necessary”.

Harry Roberts

New: The WebAssembly JavaScript Promise Integration API — A technical explanation from the V8 team on a new API to let WebAssembly apps bridge the synchronous / asynchronous gap of expectations around external functionality (consider that many apps are written synchronously, but modern Web APIs are usually asynchronous). JSPI helps bridge both worlds and can be tested via a flag in Chrome.

McCabe, Michaud, Rezvov, Dahl / V8 Team

Break the Programming Mold with Dependency Injection — Keep your code on the cutting edge with dependency injection in JavaScript. Check out Snyk’s guide that gives a breakdown of what dependency injection is, when you should use it, and what popular JavaScript frameworks it’s implemented.

Snyk sponsor

Why Is My Jest Suite So Slow?Jest is known for its speed and simplicity so the author was surprised at how quickly his team’s test suite was slowing down. This is a write up of the ensuing investigation along with the improvements that slashed test running time.

Steven Lemon

Bun v0.5 ReleasedBun is another JavaScript runtime taking the world by storm and a level of Node compatibility has been baked in from the start. v0.5 adds support for node:readline, workspaces, a node:dns shim, and network socket creation support such that more Node.js-based database libraries work out of the box.

Ashcon Partovi

IN BRIEF:

The ▶️ latest episode of the JS Party podcast tackles ‘the rise and fall’ of JavaScript frameworks and the modern trend towards smaller ones.

The folks at NodeSource have put together a top 10 list of Node open-source projects ‘to keep an eye on’ in 2023.

Aurelia 2 is now in beta.

RELEASES:

⭐️ esbuild 0.17.0
↳ Popular bundler. Note that this is a key release with backwards incompatible changes.

Inertia.js 1.0
↳ Build SPAs for any backend.

React Native 0.71

Remix 1.10.0
↳ Popular full stack framework.

📒 Articles & Tutorials

🎨  Building an Accessible Theme Picker — An attractively presented, easy to follow tutorial for a handy site feature.

Sarah L. Fossheim

Fixing a Memory Leak in a Production Node.js App — Kent encountered a variety of weird memory and CPU usage spikes in his Node-powered app and decided to figure out what was going on. This post walks through his complete journey, with plenty of side problems encountered along the way, before discovering the root cause was where he least expected it.

Kent C Dodds

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

📊  A Beginner’s Guide to Chrome Tracing — For when you want to go deeper than the Performance tab. With tracing, you can record what a browser is up to far behind the scenes.

Nolan Lawson

Handling Errors Like a Pro in TypeScript“Learn the design pattern I use to handle errors and write cleaner code.”

Kolby Sisk

A Beginner’s Guide to async/await with Examples

James Hibbard

10 Mistakes to Avoid When Starting with Vue 3

Fotis Adamakis

🛠 Code & Tools

RoughNotation: Cute Animated ‘Rough’ Text Annotations — Uses Rough.js (itself a project worth checking out) to get a hand-drawn look. Lots of nice interactive examples on the page showing a variety of annotation styles (boxes, underlines, circles..)

Preet Shihn

Free Website Speed Test: Does Your Site Meet Google’s Core Web Vitals? — Get an in-depth technical analysis of your site and learn how to make it fast. Rank higher in Google & deliver great UX.

DebugBear sponsor

Modern Errors: Handle Errors in a Simple, Stable, Consistent Way — Create error classes, wrap or aggregate errors, or use one of several plugins to do things like print bug reporting info, print stack traces, or more. Happy in both Node and the browser.

ehmicky

Shifty: A Small, Fast Tweening EngineAll it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. GitHub repo.

Jeremy Kahn

Barba.js: For Smooth Visual Transitions Between Pages — You certainly can’t say the project’s homepage doesn’t show off all of its features! For such a dramatic set of effects, things feel smooth and.. surprisingly tolerable 😁 GitHub repo.

De Rosa, Michel, et al.

Rete.js 1.5: A Framework for Visual Programming — Create a node-based editor in the browser and apply logic. Check out these demos on CodePen. GitHub repo.

Vitaliy Stoliarov

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

gpu-io: GPU-Accelerated Computing Library — for physics simulations and other mathematical calculations. A neat look at the power of WebGL. Several examples.

Amanda Ghassaei

Chart.js 4.2
↳ Simple Canvas-based charts. (Samples.)

Serialize JavaScript 6.0.1
↳ Serialize JS to a JSON superset.

axios-retry 3.4
↳ Axios plugin that retries failed requests.

Axios 1.2.3 – Popular HTTP client library.

Commander.js 10.0 – Node.js CLIs made easy.

Mineflayer 4.7 – JS API for Minecraft bots.

Wretch 2.4 – Fetch API wrapper with niceties.

💻 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

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