Posts

List of blog posts

Explore in-depth articles on modern web development — JavaScript, React, Next.js, CSS, HTML, Python, Ruby on Rails, animations, and SVG. Learn concepts, patterns, and real-world techniques for building better software.

• CSS Cascade Layers (@layer): End Specificity Wars in Large Codebases

  Control CSS priority with layer order, not specificity.
  Learn how CSS cascade layers (@layer) set priority by layer order instead of specificity — unlayered styles, the !important reversal, revert-layer, layering third-party CSS, the full cascade sort order, migrating a large codebase and putting utility classes last.

• CSS Container Queries Deep Dive: Named Containers, cqi Units, and Style Queries

  Make components respond to their container, not the viewport.
  Go beyond basic @container: inline-size vs size containment, named containers, cqi/cqb/cqmin/cqmax units, and style queries, with diagrams and a live sandbox.

• Mastering CSS z-index: Stacking Contexts, isolation, and Layering Bugs

  Layer confidently with z-index, stacking contexts, and isolation.
  Learn how CSS z-index really works — painting order, stacking contexts, negative z-index, isolation: isolate, the top layer, a scalable z-index scale, and a step-by-step way to debug layering bugs.

• HTML5 Canvas Guide: Drawing, Animation, and Best Practices

  Draw, animate, and optimise graphics with the Canvas API.
  Learn the HTML5 Canvas API from first shapes to advanced techniques — paths, transforms, animation, input, high-DPI, OffscreenCanvas, pixels, and 3D.

• An Interactive Guide to the CSS linear() Easing Function

  Chain custom stops into springs, bounces, and elastics.
  A deep, interactive guide to CSS's linear() easing function — comma-separated stops, percentage positions, and building spring and bounce curves cubic-bezier() can't express.