The Static Site Churns!
A peek into my eclectic static site generator – built from scripts, GitHub snippets, and now including Hono. The ongoing JavaScript refactoring adventure continues!
By David Bushell11 May 2025Easier layout with margin-trim
Simplify margin management with the `margin-trim` property – avoiding hacks like `:last-child { margin-block-end: 0; }` to prevent margin collapsing issues. A handy CSS enhancement.
By Frontend Masters08 May 2025Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)
A deep dive into refactoring CSS animations, showcasing the thought process behind optimizing and improving code efficiency.
By CSS-Tricks08 May 2025JavaScript, what is this?
Delving into JavaScript's `this` binding, global scope, and arrow functions – clarifying how and when objects are bound during execution. A detailed breakdown for understanding scope and context in JS.
By Piccalilli08 May 2025Integrating Design And Code With Native Design Tokens In Penpot
Penpot introduces native design tokens in its latest release, enhancing integration with code and modern development workflows.
By Mikołaj Dobrucki08 May 2025shape(): A New Powerful Drawing Syntax in CSS
Don't overlook `shape()` – the CSS feature that brings SVG-like shape capabilities into CSS, opening new possibilities for creative styling.
By Frontend Masters07 May 2025On-Scroll 3D Carousel
Exploring a 3D carousel animation that rotates as you scroll, creating an engaging and immersive visual experience.
By Codrops07 May 2025Why is Nobody Using the hwb() Color Function?
Investigating the decline of the hwb() color function in CSS and exploring possible reasons behind its reduced usage.
By CSS-Tricks07 May 2025Glossary Web Component
Hidden gem: a secret glossary on my blog, accessible via hover-over links. A fun Easter egg-styled subtly to keep the focus on content.
By David Bushell07 May 2025Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS
Discover how retro cartoon animation techniques inspired modern CSS animations, bringing websites to life with minimal frame changes and looping backgrounds.
By Andy Clarke07 May 2025Using Container Query Units Relative to an Outer Container
Container units (e.g., `cqi`) reference the nearest container, but registering custom properties higher up allows access to other container units – expanding layout flexibility.
By Frontend Masters06 May 2025Towards React Server Components in Clojure, Part 1
Documenting the journey of integrating React Server Components into Clojure JVM via the UIx library – bridging React's server-side rendering with Clojure's ecosystem.
By Roman Liutikov06 May 2025GSAP is Now Completely Free, Even for Commercial Use!
GSAP and its plugins are now completely free for everyone, making powerful animation tools accessible for all projects.
By CSS-Tricks06 May 2025Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?
An overview of recent proposals for CSS masonry layouts, including extensions to CSS Grid, standalone modules, and the new Apple WebKit “Item Flow” approach.
By Gabriel Shoyombo06 May 2025RSC for Astro Developers
Visualize intricate fractal islands – complex, self-similar structures that captivate with their recursive beauty.
By Overreacted06 May 2025Color models for humans and devices
Understanding how images are perceived across devices and color spaces, with insights into human vision and color theory.
By Polina Gurtovaia06 May 2025Are 'CSS Carousels' accessible?
An objective look at CSS Carousels, their accessibility challenges, and browser-handled best practices. Aiming to raise awareness and improve assistive technology experiences with CSS-only widgets.
By Sara Soueidan06 May 2025Modern Scroll Shadows Using Scroll-Driven Animations
Exploring a new approach to creating scroll shadows on mobile devices using scroll-driven animations, enhancing subtle UX cues.
By CSS-Tricks05 May 2025Matrix Sentinels: Building Dynamic Particle Trails with TSL
Step-by-step tutorial on building particle trails with Three.js Shader Language, simulating dynamic 3D movement.
By Codrops05 May 2025
Create a mesmerizing 3D particle trail animation using Three.js. Your task is to simulate a dynamic movement that responds to user interactions, such as mouse movements or scroll events. Feel free to use a combination of HTML, CSS, and JavaScript, with the option to integrate WebGL for added depth. Aim to create a visually stunning and fluid experience that captivates users and showcases your creativity in 3D environments.
Why do JavaScript developers prefer using 'let' when they throw a party? Because it allows for block-level scope!