Exploring Modern Web Development: 3D Voxel Scenes, Focus Animations, and Advanced CSS Selectors

Heerich.js: CSS-Styled 3D Voxel Scenes

Inspired by the geometric sculptures of Erwin Heerich, developer David Aerne has created Heerich.js—a compact engine for generating 3D voxel scenes. What makes it truly remarkable is that these scenes are rendered as SVG, and because SVG allows the use of CSS variables, the entire scene becomes styleable through standard CSS. This means you can tweak colors, lighting, and even structural aspects without touching JavaScript—opening up new possibilities for interactive 3D graphics directly in the browser.

Polypane’s Snippet Store and the De-crapulator

Polypane, widely regarded as one of the best browsers for web development, has launched a snippet store. Among the most intriguing entries is the “1-Click De-crapulator,” a tool that lets you click on a component and copy only its basic HTML structure—free of the “bloaty crap” that often comes with modern frameworks. The humorous name aside, it’s a practical addition for developers who need clean, minimal markup quickly.

Animating Focus with View Transitions

Chris Coyier recently demonstrated how to animate focus states using the View Transitions API. In his exploration, he contrasted “unnecessary motion” with WebAIM’s conditional implementation of prefers-reduced-motion, arguing that even when focus is highly visible, it can still be difficult to track. The result is a nuanced approach that respects user preferences while enhancing accessibility.

Interestingly, in the comments section, Kilian Valkhof (founder of Polypane) shared a CSS-only technique for achieving what he calls “floating focus”—an effect Chris referred to as “flying focus.” This technique requires no JavaScript and relies purely on CSS transitions and pseudo-elements.

The of <selector> Syntax in CSS

Many developers were unaware that the :nth-child(n of selector) syntax now enjoys broad browser support (Baseline). Paweł Grzybek highlighted this on social media, pointing out its compatibility with CSS nesting. For example:

div:nth-child(2 of .intro) {
  /* Selects the second .intro that is also a <div> */
}

.intro {
  :nth-child(2 of &) {
    /* Nested: selects the second .intro within .intro */
  }
}

The first rule selects the second .intro among siblings, but only if it is a <div>. This is more flexible than div:nth-of-type(2) because of <selector> works with any selector—not just element types. The nested version leverages the parent selector (&), making it easy to target specific descendant structures.

This is just one example of the rapid evolution of CSS. Interestingly, Preethi Sam published a comprehensive article on this syntax just over a week ago, further confirming its growing relevance. For anyone keeping up with modern CSS, the of selector is a powerful addition worth mastering.