#671 — January 18, 2024
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 😅
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.
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.
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.
Yagiz Nizipli ▶️ went on the Syntax․fm podcast to talk about all things JS performance related.
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.”
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.
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.
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”
The Building Blocks of a Greenfield Vue App in 2024
Manually Dispatching an Event to a Target
🛠 Code & Tools
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.
Drop-In Authentication & User Management for Next.js — Add auth in minutes with Clerk’s prebuilt components, hooks, and helpers for Next.js 14.
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.
🛰 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..
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.
A Reliable Event Gateway for Asynchronous Applications — Receive, send, and route messages across your event-driven architecture with Hookdeck’s platform for engineering teams.
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.
🗓 Schedule-X 1.9 – Event calendar/date picker (above).
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.