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

By

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.

Related Articles

• Anthropic's Mythos AI Stirs Cybersecurity Alarm: Advanced Vulnerability Detection Withheld, Experts Warn of Dual-Edged Threat
• 10 Ways Bumble Is Revolutionizing Dating by Ditching the Swipe
• Stack Overflow Co-Founder Issues Urgent Warning to AI Companies: Protect the Human Communities That Fuel Your Models
• The Demise of Instagram's End-to-End Encryption: What Went Wrong?
• Canonical Confirms Ubuntu 26.10 'Stonking Stingray' Launch for October 2026 – Feature Freeze Set for August
• Grafana 13: Accelerating Insights and Scaling Operations with Ease
• DeepMind Staff Vote to Unionize, Citing Concerns Over AI Use in Military Operations
• Benchmarking Compiler Speed: A Step-by-Step Guide to Comparing GCC 16, GCC 15, and LLVM Clang 22