bbioonThemes
  • Home
  • Blog

Category: Front-end

Development, Front-end

Fixed-height cards break the moment content changes

Fixed-height cards look tidy in a mockup and fall apart when an editor doubles the copy or a translation runs long. I go through what breaks, and how Flexbox and intrinsic sizing hold the same grid together without hard-coded heights.

Read Article
Accessibility, Development, Front-end

Streaming content interfaces that don’t fight the user

Appending text to a container is the easy part. This post covers the scroll flag that stops snap-back, batching renders to keep layout shift down, ARIA live regions for screen readers, and cleaning up after a broken stream.

Read Article
Development, Front-end

Modern CSS and HTML APIs: what I’d ship and what I’d wait on

Notes on the newer platform features: HTML-in-Canvas behind a Chrome flag, the CSS content property for swapping an image source, sizes=auto for lazy-loaded images, and why e-ink browsers still lag behind.

Read Article
Accessibility, Design, Front-end

CSS contrast-color(): let the browser pick readable text

The CSS contrast-color() function returns black or white text for whatever background color a user picks. How the syntax works, why the @supports fallback still matters, and the cases it does not cover.

Read Article
Accessibility, Design, Front-end

Streaming UI stability: fixing scroll jumps and layout shifts

Streaming interfaces jump around and drag the scrollbar back to the bottom. What fixes it: tracking whether the user scrolled away, batching renders into the animation frame, and marking the container up as an ARIA log region.

Read Article
Development, Front-end

Native CSS randomness: random() instead of JavaScript hacks

CSS Values Level 5 adds random() and random-item(), which the browser resolves at render time. Why that beats Sass build-time randomization, PHP inline styles and Math.random() for scattered layouts and varying animation delays.

Read Article
Development, Front-end

Polyfilling the ::nth-letter selector with a JavaScript shim

The ::nth-letter selector still is not in any browser, and hand-wrapping every character in a span wrecks the DOM. A shim that rewrites the raw CSS into :nth-child and lets SplitText handle the markup and the ARIA.

Read Article
Development, Front-end

justify-self in CSS grid, block and absolute layouts

justify-self aligns one element along the inline axis and overrides the justify-items value its parent set. This covers how it behaves in grid, in block layouts, and on absolutely positioned items, plus the inset rule that trips people up.

Read Article
Development, Front-end

How I replaced the Astro Markdown component in v3

Astro 3.0 removed the built-in Markdown component and left developers choosing between raw HTML and heavy MDX. Ahmad Wael covers the community replacement he uses, how it handles indentation, and the Prettier habit that breaks it.

Read Article
Development, Front-end

Modern CSS features that let me delete the hacks

Browsers are shipping faster than most of us can refactor. A look at clip-path rounded polygons, element-scoped view transitions, subgrid and @scope, and which JavaScript libraries they let you drop from a WordPress project.

Read Article

Posts navigation

Previous 1 2 3 4 … 10 Next

bbioonThemes

Senior WordPress Engineer
Toptal & Codeable Expert

Connect

  • GitHub
  • Twitter
  • LinkedIn
  • Codeable

Explore

  • Expertise
  • Work
  • Insights
  • Blog

Resources

  • bbioonThemes
  • Contact
  • Privacy Policy
© 2026 bbioonThemes. All rights reserved.
Privacy