Issue 105 June 13th 2025

Accessibility

Apple’s "Liquid Glass” and What It Means for Accessibility

What does it mean when the world’s most influential tech company prioritizes aesthetics over readability?

Here we have a company that positions accessibility as a human right introducing a design system that seems at odds with basic accessibility principles. Like they built a glass house and forgot that not everyone can walk in it without bumping into walls.

CSS

What We Know (So Far) About CSS Reading Order

The reading-flow and reading-order proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You’d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility Guidelines (WCAG 2.2).

Exploring the CSS contrast-color() Function… a Second Time

The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.

classic-stylesheets: Classic stylesheets for web applications.

5 themes and a combined 205 skins from Common Desktop Environment, Windows 3.x, Windows 9x/Me/2000, Windows XP, and Mac OS 9.

Demos:

There's also 7.css for Windows 7.

8 CSS & JavaScript Snippets for Creating Sticky Elements

Learn how to use CSS and JavaScript to build sticky headers, navigation bars, and UI elements. Includes working examples and practical tips.

Safe align your content

Do you know the safe keyword? In some specific cases, your content may overflow the container and you won't be able to scroll to it. It happens with some alignment configurations such as center andend.

safe can prevent this behavior.

Partial Keyframes - Creating dynamic, composable CSS keyframe animations

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic.

The future of hexagon shapes

A new and easy way to create hexagon shapes using corner-shape. As a bonus, you can add a border to it. It's the only method that works with borders.

Very limited support at the time of this writing (Chrome-only with experimental flag enabled). Until better support use this: A Modern way to create hexagon shapes.

HTML

HTML-native accordions

Today, I wanted to share a little approach you can use to create accessible, HTML-native accordions (sort of), without any JavaScript using the <details> and <summary> native HTML elements.

The <output> element

Pretty much everyone knows about the <input> element, but we don’t hear about <output> nearly as often.

The <output> element is designed for showing the results of calculations and other types of user interactions.

It’s perfect for things like calculators, or in form where you’re adding several fields together, as well as other places where you want to provide users with real-time feedback based on their inputs.

Creating an Auto-Closing Notification With an HTML Popover

The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Most popovers can be light-dismissed, closing when the user clicks or taps outside the popup. Currently, HTML popover lacks built-in auto-close functionality, but it’s easy to add. Auto closing popups are useful for user interfaces like banner notifications — the new-message alerts in phones, for instance.

JavaScript

Odyc.js - a tiny JavaScript library designed to create narrative games by combining pixels, sounds, text, and a bit of logic

Everything is built through code, but without unnecessary complexity: your entire game can fit in a single file.

Creating a game with Odyc.js is as simple as calling createGame(). You provide your sprites, dialogs, sounds, and interactions — and the engine takes care of the rest.

rimmel.js - a Streams-Oriented UI library for the Rx.Observable Universe

Rimmel is a powerful, fast and lightweight JavaScript UI library for creating web applications with event streams.

It implements the RML/Reactive Markup specification, which means everything in your code is a stream: it takes an input, you apply your business logic and it takes care of the rest.

Scroll-driven camera animation

This details how to make a camera move around a three.js scene as the user scrolls.

SOLID Design Principles Every JavaScript Deveveloper Should Know

Writing clean, maintainable code is key to building scalable applications. The SOLID principles, introduced by Robert C. Martin (Uncle Bob), are five essential design rules that help developers organize their code better, reduce bugs, and ease future modifications.

In this article, we’ll break down each principle, show simple examples in JavaScript, and explain why it matters.

document.currentScript is more useful than I thought

After discovering and being unsure of its value, I just realized how useful document.currentScript can be in exposing configuration properties to <script> elements (and other things too).

6 advanced TypeScript tricks

TypeScript is sometimes ridiculed for being too strict, noisy, and overall slowing down development. I believe this sentiment comes mostly from a lack of experience. If you’re not used to typing your code, it can be tedious to please the TypeScript compiler. But besides making your code less prone to errors (which on its own is a huge benefit), TS has great potential to make development easier and improve your developer experience. Today we’ll go over 6 loosely related TypeScript concepts and tricks that can improve your codebase.

react-spring - a spring physics based React animation library

react-spring is a cross-platform spring-physics first animation library.

Cross-Platform: We support react-dom, react-native, react-three-fiber, react-konva & react-zdog.
Versatile: Be declarative with your animations or if you prefer, imperative.
Spring-Physics First: By default animation use springs for fluid interactivity, but we support durations with easings as well.

Github repo here.

React Icons - Explore 47,348+ icons from 24 popular icon libraries

Effortlessly integrate popular icons into your React projects with React-Icons.com. It leverages ES6 imports, ensuring you only load the icons your project actually uses-keeping your bundle lightweight and efficient.

React Interviews

A comprehensive guide to mastering React interviews by covering essential concepts, question types, and tailored strategies for front end engineers.

The content is pretty light and you should be able to complete reading cover to cover within an afternoon.

Quick Start Guide to Front End Interviews - Everything to Know

Kickstart your front end interview preparation with this quickstart guide. Explore interview formats, essential tips, and question types asked by by company.

Miscellaneous

Vibe Debt: The Hidden Crisis Coming for Your Product Team

The arrival of these vibe coding systems is a genuine inflection point for the craft of product development. But like all inflection points, it comes with second-order consequences we need to talk about.

"Vibe coding" lets non-engineers, or engineers working at creative speed, produce functional prototypes, often with generated code under the hood, and deliver them in minutes or hours.

But there is a ceiling, and it comes fast. It is the inevitable cleanup work that professional engineers have to do when a vibe-coded product:

Becomes a victim of its own success
Gets handed over for industrialisation
Has to meet real-world security, privacy, or scale requirements
Starts touching customer data
Gets adopted beyond its intended prototype audience

It is the hidden cost of moving from “It looks great and it works!” to “Now it is safe, scalable, compliant, maintainable, and ready for real users.”