@layers in CSS
A small interactive demo showing how cascade layers beat specificity when the order is set up properly.
- CSS
- Architecture
- @layer
Senior Front-End Engineer
Standards first.
Fundamentals led.
Building maintainable front-end work for the web with a bias for standards, simplicity, and code that earns its place.
Don't take “standards first” on faith — see the contrast ratios for yourself.
Pens
-
-
3 CSS Grid Layouts That You'll Ever Need
Three CSS Grid layout patterns, with notes on responsive cards, holy-grail layouts, and full-bleed content.
- CSS
- Grid
- Layout
-
Customisable Select Patterns
Accessibility-focused customisable select and listbox patterns using modern CSS primitives.
- CSS
- Forms
- Accessibility
-
Scroll-Driven Progress Indicator
A reading progress bar driven entirely by CSS scroll-driven animations. No JavaScript, no scroll listeners.
- CSS
- Scroll-Driven Animations
- Progress
Articles
-
Why I reach for vanilla first
When I start a new project, I reach for vanilla first. I try to solve the problem with native HTML, CSS, and JavaScript before I consider adding a framework or library.
- HTML
- CSS
- JavaScript
- Philosophy
-
rscss: the pattern I was already using
Discovering a methodology that names something you've been doing instinctively for years creates a strange feeling. Part validation, part annoyance that you did not find it sooner. That was my reaction when I came across rscss, through a LinkedIn post shared by Lionel Péramo.
- CSS
- Methodology
- RSCSS
-
bundle outdated is lying to you, sort of
bundle outdated shows gemspec runtime dependencies, but mixes them with transitive dependencies. bundle outdated --only-explicit removes the noise, but also drops gemspec runtime dependencies entirely. A practical workaround is to mirror core runtime dependencies in a dedicated:maintenance Gemfile group so explicit-only checks stay useful.
- Ruby
- Bundler
- Dependency Management
Projects
-
WCAG Contrast Checker
WCAG contrast ratio checker built with semantic HTML5, vanilla CSS (native nesting, custom properties, fluid type) and ES modules. Calculates relative luminance per the W3C spec, returning AA and AAA compliance for normal and large text. Pair programmed with Claude as a deliberate, interview-ready, dependency-free front-end demonstration.
- JavaScript
-
Sticky Header
A container-type: scroll-state demo — detects when a sticky header is "stuck" using native CSS where supported, falling back to IntersectionObserver everywhere else.
- CSS
- Vanilla JS