Month: January 2024

#​672 — January 25, 2024

Read on the Web

JavaScript Weekly

Better JavaScript Shell Scripting with Bun Shell — Performance-focused server-side runtime Bun continues its rapid evolution with a side quest into the world of shell scripting by making it easier, cross-platform friendly, and less verbose. zx offers similar (but less integrated and focused) functionality to Node users, if you should prefer.

Jarred Sumner (Bun)

Announcing AdonisJS v6 — If you want a backend Web framework with amazing docs and packed with features, Adonis is a good choice. v6 is a big step forward moving to ESM by default, with more type safety overall (including for routes and middleware references), a new validation library, and more.

Harminder Virk

Learn Vite, The Fast Build Tool for Modern Web Projects — Join Steve Kinney for this video course tour of Vite’s capabilities, including a look at bundling, optimizing static assets, hot module reloading, and its plugin ecosystem. You’ll come away proficient at using Vite to build scalable, performant apps.

Frontend Masters sponsor

QuickJS: The Small, Embeddable JavaScript Engine — Several years ago, Fabrice Bellard, the genius behind FFMPEG and JSLinux, built a tiny and complete JavaScript engine in C. It now supports ES2023 and its latest release adds top-level await in modules and its REPL, as well as support for some cutting edge JS features (changelog).

Fabrice Bellard

IN BRIEF:

@npm_malware on Twitter/X shares malicious packages detected in real time.

JetBrains has opened up its Early Access Program for WebStorm 2024.1, its commercial JS/TS IDE.

📅 React Conf 2024 takes place this May 15-16 online and at Lake Las Vegas.

RELEASES:

Astro 4.2 – The framework that never ceases to amaze.

Node.js 21.6.1 (Current) – A bug fix for Undici.

Puppeteer 21.9 – Now using Chromium 121.

Next.js 14.1, Qwik 1.4, Expo Router v3, Redux Toolkit 2.1

📒 Articles & Tutorials

Web Components in Earnest — This is.. epic! If you want to really get a walk through the journey of building an entire app using Web Components and JavaScript, this is it. The app in this case is simple, but complete, and the author shows off the realities of going all in with Web Components here.

David Bryant Copeland

▶  An Alpine, HTMX, and Astro-Based Wordle App — Popular dev YouTuber Jack demonstrates building a Wordle clone with a modern Alpine, HTMX and Astro-based stack. Or you can go straight to the code, if you prefer.

Jack Herrington

Complete Your AI Coding Experience with Wallaby.js — Get instant test feedback and powerful debugging for AI code suggestions.

Wallaby Team sponsor

How to Start a React Project in 2024 — Robin explains the pros and cons of a few common approaches, including using Vite, Astro, and Next.js.

Robin Wieruch

Build a Next.js App in Storybook with React Server Components and Mock Service Worker — How to develop, document, and test RSC apps in isolation, while using MSW to mock network requests.

Michael Shilman

Reversing and Tooling a Signed Request Hash in Obfuscated JS

Brett Buerhaus

Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

Esther Vaati

🛠 Code & Tools

Jint 3.0: A JavaScript Interpreter for .NET — Run JavaScript within a .NET app and expose .NET objects and functions to JavaScript code. v3 arrives after seven years of work and is the most standards-compliant JS engine running entirely within .NET.

Sébastien Ros

Mutative: A Library for Efficient Immutable Updates — A library for efficient immutable updates, boasting being 2-6x faster than naive handcrafted reducers, and even more than 10x faster than Immer. GitHub repo.

Michael Lin

Auth Without Complexity — Authentication in a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

React Email 2.0: Build Better Emails with React — React Email is a collection of unstyled components for creating emails using JSX and React (this example shows you the basic idea).

Gabriel Miranda (Resend)

workerpool 9.1: Offload Tasks to a Pool of Workers — A long established thread pool library that works not only on Node but also in the browser.

Jos de Jong

Microsoft TypeSpec: A TypeScript-Inspired Way to Define APIs — A language for concisely describing cloud service APIs and generating other API description languages (e.g. OpenAPI), client and service code, docs, and more. Formerly known as CADL. – GitHub repo.

Microsoft

Receive, Authenticate, Transform, Filter, Route, and Deliver Webhooks — The Hookdeck Event Gateway is a reliable platform to support event-driven application development across the full development lifecycle.

Hookdeck sponsor

Partytown 0.9: Run Third Party Scripts in a Web Worker — A way to run resource intensive scripts on a separate thread (in a web worker) to let the main thread remain responsive. GitHub repo.

Partytown

pretty-ms 9.0: Convert Milliseconds to Readable Strings — 1337000000 → 15d 11h 23m 20s

Sindre Sorhus

nmea.js: A Library to Parse Maritime Electronics Data — I’d never even heard of NMEA till now, but if you work with sonars, gyrocompasses, and similar marine electronics, this is for you.

Bruno Vieira

Zustand 4.5 – Barebones flux-y state management.

Mongoose 8.1 – MongoDB object modelling approach.

EverShop 1.0 – Node.js-based ecommerce platform.

pretty-quick 4.0 – Run Prettier on changed files.

wavesurfer.js 7.7 – Waveform rendering and playback.

Flatbush 4.3 – Fast spatial index for 2D points/rectangles.

Culori 4.0 – Comprehensive color library.

#​671 — January 18, 2024

Read on the Web

JavaScript Weekly

console.delight — You use console.log to output text, but did you know that in the browser console it can be used to render other things, like SVGs and HTML? This post is packed with examples and goes deeper into the creative options opened up by the technique than you’ll probably ever need 😅

Zach Saucier

The AHA Stack: Another Way to Build Modern Webapps — The AHA Stack is a full-stack webapp approach that brings together Astro, htmx, and Alpine.js, and where you send HTML over the wire. This is a fantastic showcase site that sells the idea well, complete with explanations and examples.

Flavio Copes

Transform the Way You Handle Forms with SurveyJS Form Libraries — With SurveyJS UI components you can set up a powerful form management system fully integrated into your IT. Effortlessly build, edit and style dynamic JSON-based forms in the drag & drop form builder with an integrated CSS-based theme editor.

SurveyJS sponsor

React Libraries for 2024 — The latest update of a popular, opinionated, annual guide to libraries and tools suitable for various tasks when building React apps, covering areas like state management, UI libraries, authentication, and testing.

Robin Wieruch

IN BRIEF:

htmx has just become 0 clause BSD-licensed. It was 2 clause BSD before – the main change being attribution is no longer required on redistribution.

Yagiz Nizipli ▶️ went on the Syntax․fm podcast to talk about all things JS performance related.

A showcase of what PWAs can do today.

A look at how to compile a standalone executable using modern JavaScript runtimes.

RELEASES:

Prettier 3.2 – The popular code formatter gains support for JSONC and Angular ICU expressions.

Knip 4.0 – Find and remove unused files and dependencies.

ReScript 11.0 – OCaml-inspired, typed ‘compile to JS’ language.

Node.js v21.6.0 (Current)

Node.js v20.11.0 (LTS) – Now with import.meta.dirname and import.meta.filename

📒 Articles & Tutorials

The Golden Rule of Assertions — Artem shares a tip that helps him write better tests or, as he calls it, the ‘Golden Rule of Assertions’: “A test must fail if, and only if, the intention behind the system is not met.”

Artem Zakharchenko

▶  Let’s Code Minesweeper in JavaScript — Ania is back with another of her fantastic step-by-step walkthrough videos. Now you can actually implement Minesweeper, rather than waste time playing it.. 😁

Ania Kubów

JavaScript Frontend Error Monitoring 101 — Take a crash (pun intended) course on JavaScript error monitoring and debugging with Sentry. Read on.

Sentry sponsor

5 CSS Snippets Every Frontend Developer Should Know in 2024 — Adam did a similar roundup last year, now he’s back with more toolbelt-worthy, powerful, CSS tips worth knowing.

Adam Argyle

Migrating from Zod to Valibot: A Comparative Experience — Zod and Valibot both provide a mechanism to validate data using types, and Matthew looks at how he found Valibot better for validating his contact form.

Matthew Kwong

A Difference Between getElementByID and querySelector — IDs with leading digits pose problems when it comes to CSS selectors.

Kiru from Switzerland

Kind of Annoyed at React — “Just a little ranty rant about my fave JS library”

Cassidy Williams

The Building Blocks of a Greenfield Vue App in 2024

Fotis Adamakis

Manually Dispatching an Event to a Target

Chris Coyier

🛠 Code & Tools

Heat.js: A Heat Map Visualization Library — It has no dependencies, and is small, responsive, and themeable. GitHub repo.

William Troup

Some Top Frontend Tools of 2023 — Louis walks through a collection of tools that he found useful in the past year. It’s a rather eclectic selection – I certainly hadn’t heard of many of them – and you’re sure to find some that could help in your day-to-day work.

Louis Lazaris

Drop-In Authentication & User Management for Next.js — Add auth in minutes with Clerk’s prebuilt components, hooks, and helpers for Next.js 14.

Clerk sponsor

Tinybench: A Tiny, Simple Benchmarking Library — No dependencies – it uses whatever timing capabilities are available (e.g. process.hrtime or peformance.now). You can then benchmark whatever functions you want, specify how long/how many times to benchmark, and get a variety of stats back.

Tinylibs

🛰  Orbital Object Toolkit: Orbital Mechanics Made Easier — This is miles above my paygrade (about 100 miles in fact) but if determining the positions of satellites and terms like ‘SGP4 propagation’ and ‘TLE parsing’ make sense to you..

Theodore Kruczek

worker-timers: setInterval/setTimeout for Unfocused Windows — When a tab loses focus, any timers used within can be throttled. A workaround is to use a Web Worker.

Christoph Guttandin

A Reliable Event Gateway for Asynchronous Applications — Receive, send, and route messages across your event-driven architecture with Hookdeck’s platform for engineering teams.

Hookdeck sponsor

Sutra.js: A Behavior Tree Library for Managing Behavior Patterns — Primarily targeting game development use cases, Sutra lets you define and model complex behavior patterns in code.

Yantra

🗓 Schedule-X 1.9 – Event calendar/date picker (above).

🤖 LangChain 0.1.0 – A popular LLM app framework available in both Python and JavaScript variants.

Frappe 15.10 – Low code Python + JavaScript web framework.

React Redux 9.1 – Adds a new syntax for pre-typing hooks.

NanoPop 2.4 – Fast, minimal positioning engine.

🧊 d3-3d 1.0 – D3-powered visualizations, but 3D.

Angular 17.1 – 🐦 More context here.

#​670 — January 11, 2024

Read on the Web

JavaScript Weekly

Is htmx Just Another JavaScript Framework? — Despite being four years old, htmx has seen a surge in popularity recently, parly due to fatigue with ‘big frameworks’ and also because its simple HTML-based approach to adding functionality to a page appeals to an increasingly diverse group. But is it just another framework itself? Yes. And no.

Alexander Petros

▶  HTMX for React Developers in 10 Minutes — You’re not interested in discussions about semantics.. you just want to get something done with htmx? Here, Jack takes ten minutes to show off the essentials.

Jack Herrington

Add Excel-like Spreadsheet Functionality to Your JavaScript Apps — SpreadJS is the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View demos now.

SpreadJS from MESCIUS inc sponsor

33 JavaScript Concepts Every Developer Should Know — A curated collection of links to tutorials on 33 different areas worth understanding well, including: types, closures, equality, scope, and different engines. We linked this two years ago, but it remains frequently updated.

Leonardo Maldonado

Introducing fsx: A Modern Filesystem API for JavaScript — Filesystem APIs in JavaScript runtimes haven’t been great for a long time. This is one prominent JavaScript expert’s attempt to make a better one.

Nicholas C. Zakas

IN BRIEF:

CodePen shares its top 100 ‘pens’ of 2023. Lots of fantastic bits and pieces to look through and learn from here.

Bored? The Deno team is running a little hackathon over the next week.

jsfree.org is a new effort to catalog web services that can work without JavaScript.

🌼 Enjoy the drawing.garden.

RELEASES:

Docusaurus 3.1 – Popular site generator/framework.

Rspack 0.5 – Fast Rust-based web bundler.

MikroORM 6 – TypeScript ORM for Node.js.

Node.js v20.11.0 (LTS), Bun 1.0.22, npm 10.3 and Astro 4.1.

📒 Articles & Tutorials

The Website vs. Web App Dichotomy Doesn’t Exist — An interesting think piece that will help you flesh out your own opinions on the matter: “If there’s one takeaway from all this, it’s that the web is a flexible medium where any number of technologies can be combined in all sorts of interesting ways.”

Jake Lazaroff

Rust-Based JavaScript Linters: Fast, But No Typed Linting Right Now — An explanation of why the speed gains from Rust-powered linters aren’t comparable to the full feature set of typescript-eslint.

Josh Goldberg

Reduce 80%+ Latency with Vercel Edge Functions — Learn how TiDB Serverless + Vercel Edge Functions can significantly reduce latency for global users. Read now!

TiDB sponsor

The State of Benchmarking in Node.js — While Node has always been fast (thanks largely to its V8 underpinnings), there’s a renewed focus on performance in the face of benchmarks and claims from alternatives like Deno and Bun. Lars looks at the ecosystem of benchmarking options in the space.

Lars Kappert

A CSS Media Query for Scripting Support — A new media query (e.g. @media (scripting: none)) was just added to Chrome (and Edge) to let you to define styles upon whether scripting languages are available. It’s supported in all major browsers now – a rare case of Chromium playing catch-up!

Stephanie Stimac

▶  What is Remix Exactly? — As in Remix, the full-stack web framework.

Alem Tuzlak

🛠 Code & Tools

zip.js: Library to Zip and Unzip Files — Sounds simple, and it is, but it supports a couple of different formats and can generate password protected ZIPs. There are a few demos, but the simplest one sold me on its own. GitHub repo.

Gildas Lormeau

Element Plus: Vue 3 Component Library — Out of the box you get a large variety of clean components with a minimal vibe. You can see them in action here.

Element Plus Team

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

RE2JS: Linear Time Matching for Regular Expressions — RE2 is a regex engine built by Google designed to operate in time proportional to the size of the input, in order to avoid so-called ‘ReDoS’ problems backtracking can cause. There are bindings for Node.js, but this version works in the browser.

Oleksii Vasyliev

Penrose: Beautiful Math Diagrams by Writing Plain Text — It might sound a little like Mermaid (indeed, their homepages are strikingly similar) but its scope feels somewhat more math-focused – there are many examples.

Penrose Contributors

DOMPurify 3.0.8: A Fast, Tolerant XSS Sanitizer for HTML — Supports all modern browsers and is heavily tested. There’s a live demo here.

Cure53

remoteStorage: Cross Browser/Device Persistence — Combines the localStorage API with a remote server to persist data across browsers and devices – so basically, imagine localStorage but remote. Here’s the server part.

Frigade

eslint-plugin-vue 9.20.0 – The official ESLint plugin for Vue.js now supports Vue 3.4. Homepage.

file-type 19.0 – Detect file type from a Buffer, Uint8Array, or ArrayBuffer.

React Unity WebGL 9.5 – Embed Unity WebGL builds in React apps.

htmlparser2 9.1 – A fast and forgiving HTML/XML parser.

YouTube.js 8.2 – Wrapper around YouTube’s internal API.

React-PDF 7.7 – React component to display PDFs.

HLS.js 1.5 – HTTP Live Streaming client library.

React Icons 5.0 – Easily use popular icons in React apps.

Chai 5.0 – BDD / TDD assertion library.

#​669 — January 4, 2024

Read on the Web

JavaScript Weekly

🌟 The 2023 JavaScript Rising Stars — At the start of each year, Michael rounds up the projects that gained the most popularity on GitHub in the prior year. Rocketing to #1 is the shadcn/ui suite of React components, but there are a lot of fresh entries. Bun and Next.js stay on the list, while htmx and Drizzle ORM make their first appearances in the top ten.

Michael Rambeau et al.

10 Interview Questions Every JS Developer Should Know in 2024 — I’d usually shy away from a list-based post on Medium, but this is a good exception. As a rare example of a top-notch developer who’s also involved in hiring other developers, Eric provides useful advice.

Eric Elliott

Authentication & User Management for the Modern Web — Clerk is the easiest way to add authentication and user management to your app.
With prebuilt UI components and feature-rich SDKs & APIs, Clerk is purpose-built for React, Next.js, and the modern web. Get started with Clerk for free.

Clerk sponsor

Vue 3.4 Released — Vue 2 went ‘end of life’ last week, but never fear, we got a new version of Vue 3 to make up for it, complete with a rewritten, faster template parser, and a more efficient reactivity system. If you prefer a screencast tour, ▶️ Erik Hanchett has one for you.

Evan You

😢 If the loss of Vue 2 stings, you might enjoy Fotis Adamakis’ tribute.

IN BRIEF:

Oracle is introducing JavaScript support in MySQL.

Some 2024 predictions from JS framework maintainers.

While I was still busy eating turkey, someone created an ‘everything‘ npm package (complete with an 80MB package.json) that turned every public package into a dependency, preventing any of them from being unpublished. Unsurprisingly, this resulted in much drama. 😅

Minko Gechev walks through the results of the Angular Developer Survey 2023.

A look at both the current and future state of Storybook in 2024.

RELEASES:

Dependency Cruiser 16.0 – Validate and visualize dependencies.

VueFire – A first-class Vue + Firebase experience.

Effection 3.0 – Structured concurrency and effects.

Parcel 2.11 – The zero config build tool.

Node.js v21.5.0 (Current)

📒 Articles & Tutorials

Let’s Bring Back JavaScript’s with Statement..? — Famously roasted in JavaScript: The Good Parts before its deprecation, with isn’t a popular language feature at all, so Alex’s appeal here is partly tongue in cheek. Nonetheless, with has some potentially interesting uses in modern JavaScript.

Alex MacArthur

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-reproduce issues in JavaScript.

Sentry sponsor

Making Sense of ‘Senseless’ JavaScript Features — We’ve tackled with (above), now Juan Diego Rodriguez looks at several other seemingly “absurd” JS eccentricities, explains how they came into existence, and tries to help you avoid the problems they cause.

Juan Diego Rodriguez

A Look at 2023’s New Array Methods — A look at toReversed(), toSplice(), toSorted(), and with() (no, not that with.. 😆)

Chris Ferdinandi

What the Heck is a Homomorphic Mapped Type? — “Let’s try to understand what the TypeScript guys mean when they talk about homomorphic mapped types.”

Andrea Simone Costa

React Server Components: The Good, The Bad, and The Ugly — “I’d argue that adding server capabilities to React is much less important than fixing its many existing issues.”

Mayank

Try a Lightning-Fast Pairing Tool Built with You in Mind — Tuple will change the way you think about pair programming. Try it with your team free for 14 days, no card required.

Tuple sponsor

Introduction to HTMX — htmx is an interesting library for imbuing your HTML with dynamic functionality in a lightweight, dependency-free way.

Refine

🔥 Simulating Fluids, Fire, and Smoke in Real-Time — Only tangentially JavaScript related, but a fantastic article nonetheless.

Andrew Chan

The Complete Playwright Cheatsheet

Mohan Ganesan

🛠 Code & Tools

React Aria 1.0: 40+ Accessible Components, Your Way — Anyone who follows Devon Govett (also of Parcel fame) on social media will know just how much he’s put into this suite of components, and v1.0 is now here. If you’re building your own components and want to get accessibility right, this is for you. Devon explains a little more here.

Adobe

📆  Schedule-X: A Material Design Calendar and Date Picker — Available in the form of React, Vue or plain JS components. GitHub repo.

Tom Österlund

Auth Without Complexity — React Auth in a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

quick-lint-js 3.0: Tool to Find JavaScript Bugs As You Code — We first linked this two years ago when it hit 1.0. It’s an interesting alternative to tools like ESLint and aims to give you instant feedback while coding. v3.0 introduces TypeScript support.

Matthew Glazar

Plotteus: A JavaScript Library for Data Storytelling — Looks to be a powerful solution not just for creating static visualizations (graphs, plots, etc.) but interactive ones that visualize data changes via scrolling, UI controls, or other user interactions.

Bartosz Prusinowski

LIPS: A Scheme-Style Lisp in JavaScript — A Lisp interpreter written in JavaScript that also has good integration with JavaScript both in the browser or atop Node.js.

Jakub T. Jankiewicz

💡 Prefer Smalltalk to Lisp? Amber might be for you.

vue-concurrency 5.0 – Concurrency ops for Vue and Composition API.

Secretlint 8.1 – Tool to prevent committing credentials/secrets.

Wretch 2.8 – Tiny, fluent wrapper built around fetch.

∿ wavesurfer.js 7.6 – Waveform renderer and player.

DOCX 8.5 – Generate .docx/Word files from JS/TS.

jest-dom 6.2 – Jest matchers to test DOM state.

lowdb 7.0 – Simple, fast JSON database.