#671 — January 18, 2024
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 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.