Concise walkthroughs for modern web fundamentals. Expect pragmatic techniques, CodePen proofs, and links you can drop straight into your next build.
Popovers, anchor positioning, scroll-driven animations and stylable selects now ship in real browsers. What each one replaces, the code to use, and where you still need a fallback.
On October 27, Firefox 159 shipped scroll-driven animations. That was the last major browser to turn them on, so reading progress bars and reveal-on-scroll effects now work in Chrome, Edge, Safari and Firefox with no JavaScript at all.
Read article: CSS Can Replace More of Your JavaScript in 2026
An AI agent migrated my site, and every automated check came back green. Then I opened the page. What I check now when an agent writes front-end code.
I had Claude Code, an AI coding agent, move this blog from JavaScript-rendered pages to static HTML. It was a real job: new build tool, new templates, five posts converted, redirects for old links, a sitemap, a feed and structured data.
Every post on this blog used to look like the same page to search engines and link previews. What moving to Eleventy fixed, and the bugs that showed up along the way.
Until this month, every post on this blog lived inside one JavaScript file. blogData.js held an array of posts, and each post was a list of blocks: paragraphs, headings, lists and code. A single page, article.html, loaded that file, read the slug from the URL (article.html?slug=css-box-model-basics), found the matching post…
Read article: Moving My Blog from JavaScript to Static Pages with Eleventy
Students remember what they use, not what they merely hear.
In many classrooms, knowledge is treated as the final destination. In reality, it should be the starting point. When students build something real, solve a problem, or apply a concept to a practical task, the learning changes shape. It becomes durable.
Read article: Teaching for Application: Reframing Education Around Use, Not Just Knowledge
A pragmatic look at responding to breakpoints in JS—where it shines, and where pure CSS should stay in charge.
CSS alone should drive most responsive behavior, but there are times when business logic depends on the viewport. matchMedia lets you subscribe to those breakpoint changes without polling the window size.
Read article: When to Use matchMedia for CSS Media Queries in JavaScript
Understanding the box model in 2025 is still the fastest way to debug layout drift and build responsive cards with confidence.
Every element you ship is a box, even if it does not look like one. When layout bugs appear, I inspect padding, border, and content measurements before touching anything else.
Read article: CSS Box Model: Border, Padding & Content in Practice
A step-by-step playbook for shipping polished theme toggles that respect user preference and stay accessible.
Dark mode is no longer an optional theme—it is a core part of brand perception and accessibility. The key is to lead with semantics: define tokens, respect user preferences, and avoid one-off overrides when something feels misaligned.
Read article: Designing Flawless Dark & Light Modes with CSS
How modern tooling and native nesting unlock maintainable, future-proof style layers without the preprocessor overhead.
Native CSS nesting finally shipped in stable browsers in the last couple of years, and it is already reshaping how teams organize their design systems. Instead of duplicating selectors or relying on preprocessors, you can express relationships directly in the stylesheet and keep components portable across frameworks.
Read article: Nested CSS: Cleaner Style Architectures in 2025
No articles found for this tag yet. Try another filter.
