@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.
About
Jon Humphrey
Senior Front-End Engineer
I'm a senior front-end engineer with a standards-first approach: semantic HTML, modern CSS, and vanilla JavaScript as the foundation every project starts from, with the appropriate framework and tooling where the complexity genuinely calls for them.
Knowing when to reach for the right library, and which one, is as important as knowing how to use one. That judgement has held across the full spectrum, from founding-team startups to nationally critical public sector services, owning architecture end to end, leading teams, and holding a high bar for accessibility and user-centred delivery.
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