Astro + htmx + Alpine.js == AHA

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

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

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

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