~javascriptweekly | Issue 671 - Astro + htmx + Alpine.js == AHA (15)

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.

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.”

▶  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.. 😁

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

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.

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

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.

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.