Gavyn McKenzie
@gavmck.bsky.social
Front-end developer at etch.co
Will try and convert you to diamond.etch.co
Design systems nerd. Writing websites since before we had CSS.
Will try and convert you to diamond.etch.co
Design systems nerd. Writing websites since before we had CSS.
TIL you have to set `color-scheme: light dark;` (or the equivalent meta tag) to stop Chrome auto adjusting colours in auto dark mode so you can take it over manually.
November 28, 2025 at 9:27 AM
TIL you have to set `color-scheme: light dark;` (or the equivalent meta tag) to stop Chrome auto adjusting colours in auto dark mode so you can take it over manually.
New article: we've got to get away from thinking about creating components in design systems and instead focus on the system principles. The components should be an expression of the system, not the focus. etch.co/blog/systema...
Systematic thinking for design systems | Etch Software Studio
Design systems thrive on systematic principles, not just a growing list of components.
etch.co
October 21, 2025 at 3:21 AM
New article: we've got to get away from thinking about creating components in design systems and instead focus on the system principles. The components should be an expression of the system, not the focus. etch.co/blog/systema...
Super interesting to see @bell.bz's Cube CSS cube.fyi. Some real similarities with Diamond UI diamond.etch.co, but some distinct differences as you get deeper. Love to see how different people solve the same problem and see if we can get any takeaways from that.
CUBE CSS | CUBE CSS
A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.
cube.fyi
September 2, 2025 at 8:39 AM
Super interesting to see @bell.bz's Cube CSS cube.fyi. Some real similarities with Diamond UI diamond.etch.co, but some distinct differences as you get deeper. Love to see how different people solve the same problem and see if we can get any takeaways from that.
Reposted by Gavyn McKenzie
etch.co moved from Next.js to 11ty and decreased their npm dependency count from 1115 to 13! 🤯
“It feels like the tooling has gotten out of the way, and the website is just a website again ❤️”
etch.co/blog/we-migr...
“It feels like the tooling has gotten out of the way, and the website is just a website again ❤️”
etch.co/blog/we-migr...
July 16, 2025 at 2:03 PM
etch.co moved from Next.js to 11ty and decreased their npm dependency count from 1115 to 13! 🤯
“It feels like the tooling has gotten out of the way, and the website is just a website again ❤️”
etch.co/blog/we-migr...
“It feels like the tooling has gotten out of the way, and the website is just a website again ❤️”
etch.co/blog/we-migr...
I'm so over lumbering javascript frameworks, bring back the web.
We migrated our site to Eleventy and increased performance by 24% - How choosing the right tool for the job led to faster load times and fewer dependencies.
etch.co/blog/we-migr...
We migrated our site to Eleventy and increased performance by 24% - How choosing the right tool for the job led to faster load times and fewer dependencies.
etch.co/blog/we-migr...
We migrated our site to Eleventy and increased performance by 24% | Etch Software Studio
How choosing the right tool for the job led to faster load times and fewer dependencies.
etch.co
July 16, 2025 at 6:58 AM
I'm so over lumbering javascript frameworks, bring back the web.
We migrated our site to Eleventy and increased performance by 24% - How choosing the right tool for the job led to faster load times and fewer dependencies.
etch.co/blog/we-migr...
We migrated our site to Eleventy and increased performance by 24% - How choosing the right tool for the job led to faster load times and fewer dependencies.
etch.co/blog/we-migr...
When creating Design Systems, it’s easy to become focused on the components, but the internet is fundamentally about information. Users visit to consume content and complete tasks, not just to admire the UI. This approach helps to design systems that put data first. etch.co/blog/designi...
Designing for data | Etch Software Studio
Identify your constants and context before designing UI
etch.co
July 14, 2025 at 12:38 PM
When creating Design Systems, it’s easy to become focused on the components, but the internet is fundamentally about information. Users visit to consume content and complete tasks, not just to admire the UI. This approach helps to design systems that put data first. etch.co/blog/designi...
The worst thing about changing frameworks is you have to figure out how to replicate all those clever things you did over the months/years again, but all at the same time.
June 30, 2025 at 12:01 PM
The worst thing about changing frameworks is you have to figure out how to replicate all those clever things you did over the months/years again, but all at the same time.
CSS attr() types have landed in Chrome and Edge, opening up the opportunity to make really clean grid column selectors, amongst other things codepen.io/Gavyn-McKenz...
CSS attr function
...
codepen.io
May 22, 2025 at 2:31 PM
CSS attr() types have landed in Chrome and Edge, opening up the opportunity to make really clean grid column selectors, amongst other things codepen.io/Gavyn-McKenz...
We're on a storybook addon roll! This time we've dropped design token tables to (almost) automatically document your design tokens. www.npmjs.com/package/@etc...
@etchteam/storybook-addon-design-token-tables
Storybook addon for design token tables. Latest version: 1.2.2, last published: 2 days ago. Start using @etchteam/storybook-addon-design-token-tables in your project by running `npm i @etchteam/storyb...
www.npmjs.com
April 10, 2025 at 11:09 AM
We're on a storybook addon roll! This time we've dropped design token tables to (almost) automatically document your design tokens. www.npmjs.com/package/@etc...
We just released some a11y interaction tests for Storybook based on the W3C aria authoring practices. Great way to make sure you caught all those little keyboard interactions and invisible ria roles. www.npmjs.com/package/@etc...
@etchteam/storybook-addon-a11y-interaction-tests
Storybook addon for accessibility interaction tests. Latest version: 0.3.0, last published: 15 hours ago. Start using @etchteam/storybook-addon-a11y-interaction-tests in your project by running `npm i...
www.npmjs.com
April 2, 2025 at 5:16 AM
We just released some a11y interaction tests for Storybook based on the W3C aria authoring practices. Great way to make sure you caught all those little keyboard interactions and invisible ria roles. www.npmjs.com/package/@etc...
Oh boy, I am trying out some 'vibe coding' and it is surprisingly productive. Is this the beginning of the end?
February 26, 2025 at 6:31 AM
Oh boy, I am trying out some 'vibe coding' and it is surprisingly productive. Is this the beginning of the end?
Accessibility gold from @heydonworks.bsky.social github.com/Heydon/princ... I particularly enjoyed "less is less".
GitHub - Heydon/principles-of-web-accessibility: How to approach accessible web interface design
How to approach accessible web interface design. Contribute to Heydon/principles-of-web-accessibility development by creating an account on GitHub.
github.com
January 30, 2025 at 11:48 AM
Accessibility gold from @heydonworks.bsky.social github.com/Heydon/princ... I particularly enjoyed "less is less".
"Code is not an asset, it’s a liability." - ain't that the truth.
kellysutton.com/2025/01/18/m...
kellysutton.com/2025/01/18/m...
Moving on from React, a Year Later
A retrospective on making the switch from React to StimulusJS at Scholarly
kellysutton.com
January 22, 2025 at 1:09 PM
"Code is not an asset, it’s a liability." - ain't that the truth.
kellysutton.com/2025/01/18/m...
kellysutton.com/2025/01/18/m...
I needed a ::stuck state on an element just a few weeks ago and here they come! developer.chrome.com/blog/css-scr...
CSS scroll-state() | Blog | Chrome for Developers
Like container queries; but for stuck, snapped, and overflowing queries.
developer.chrome.com
January 16, 2025 at 5:03 AM
I needed a ::stuck state on an element just a few weeks ago and here they come! developer.chrome.com/blog/css-scr...
The state of UX this year is absolutely savage trends.uxdesign.cc/2025
The State of UX in 2025
From design tools, to our design process, to the user behaviors that will change the way we design — a list of what to expect for User Experience (UX) Design in the next year.
trends.uxdesign.cc
January 13, 2025 at 11:48 AM
The state of UX this year is absolutely savage trends.uxdesign.cc/2025
This is such an accurate feeling of how we have layered up our lives on the internet.
Wednesday procrastination: hi, do you need stimulation? And, how much of it?
Here you go (warning this plays sound, a lot of it eventually and gets a lot of things moving around on the screen): neal.fun/stimulation-...
Here you go (warning this plays sound, a lot of it eventually and gets a lot of things moving around on the screen): neal.fun/stimulation-...
January 8, 2025 at 9:44 AM
This is such an accurate feeling of how we have layered up our lives on the internet.
This year will mark over £20K donated to environmental charities by etch.co via 1% for the planet. That's pretty awesome.
Etch Software Studio – Web App Design & Development
Hardworking team of Designers and Developers. Our services include UX Consultancy, UI Design, Front-end Development, Software Engineering, Maintenance and Support.
etch.co
January 6, 2025 at 5:08 PM
This year will mark over £20K donated to environmental charities by etch.co via 1% for the planet. That's pretty awesome.
Custom select dropdowns at last! www.linkedin.com/posts/wesbos...
Wes Bos on LinkedIn: One of the biggest problems with UI development is about to be solved!… | 62 comments
One of the biggest problems with UI development is about to be solved!
Customizable <select> brings allows us to create totally custom dropdowns with HTML… | 62 comments on LinkedIn
www.linkedin.com
January 6, 2025 at 5:03 AM
Custom select dropdowns at last! www.linkedin.com/posts/wesbos...
Finally, someone added an ability for a washing machine to choose its own cycle. www.lg.com/uk/lg-ai-cor... Been banging on about this problem for years in my "nobody wants to use your website" argument etch.co/blog/nobody-...
LG AI Core-Tech in Washing Machine & Dryer l LG UK
LG AI technology has merged with Core-Tech, evolving into LG AI Core-Tech, which drives innovation in LG washing machines and tumble dryers, the AI DD motor, and AI DUAL Inverter heat pump technology.
www.lg.com
January 6, 2025 at 5:02 AM
Finally, someone added an ability for a washing machine to choose its own cycle. www.lg.com/uk/lg-ai-cor... Been banging on about this problem for years in my "nobody wants to use your website" argument etch.co/blog/nobody-...
Some really interesting discourse here on how social media is causing social problems in our society (he says, posting on social media. Damn.) www.theatlantic.com/magazine/arc...
Why the Past 10 Years of American Life Have Been Uniquely Stupid
It’s not just a phase.
www.theatlantic.com
January 6, 2025 at 5:00 AM
Some really interesting discourse here on how social media is causing social problems in our society (he says, posting on social media. Damn.) www.theatlantic.com/magazine/arc...
Back from paternity leave, what did I miss?
January 6, 2025 at 4:44 AM
Back from paternity leave, what did I miss?
Reposted by Gavyn McKenzie
If you want a really good deep dive into testing with screen readers, I strongly advise reading this guide by @sarasoueidan.com
www.sarasoueidan.com/blog/testing...
#a11y #screenReaders #accessibility
www.sarasoueidan.com/blog/testing...
#a11y #screenReaders #accessibility
Setting up a screen reader testing environment on your computer
– The personal website of Sara Soueidan, inclusive design engineer
www.sarasoueidan.com
November 23, 2024 at 5:21 PM
If you want a really good deep dive into testing with screen readers, I strongly advise reading this guide by @sarasoueidan.com
www.sarasoueidan.com/blog/testing...
#a11y #screenReaders #accessibility
www.sarasoueidan.com/blog/testing...
#a11y #screenReaders #accessibility
@bradfrost.bsky.social we've been playing around with an alternative (or extension) to atomic design for organising UI components. It was heavily influenced by using atomic, would love to know what you think if you've got a sec. diamond.etch.co
November 21, 2024 at 8:16 AM
@bradfrost.bsky.social we've been playing around with an alternative (or extension) to atomic design for organising UI components. It was heavily influenced by using atomic, would love to know what you think if you've got a sec. diamond.etch.co
I'm not sure React is that hard, but we're definitely trending away from it and towards native web and web components as time goes on. Upgrading these lumbering JS Frameworks is a nightmare.
November 21, 2024 at 8:12 AM
I'm not sure React is that hard, but we're definitely trending away from it and towards native web and web components as time goes on. Upgrading these lumbering JS Frameworks is a nightmare.
Reposted by Gavyn McKenzie
CTA to Nav 🗺️
taking the CSS container query for stuck position: sticky elements for a spin 🔥
nav { container-type: scroll-state; }
@container scroll-state(stuck: top) {
.nav__content { --expand: 1; }
}
trick here is to transition grid-template-columns with the custom property value to morph
taking the CSS container query for stuck position: sticky elements for a spin 🔥
nav { container-type: scroll-state; }
@container scroll-state(stuck: top) {
.nav__content { --expand: 1; }
}
trick here is to transition grid-template-columns with the custom property value to morph
November 21, 2024 at 2:44 AM
CTA to Nav 🗺️
taking the CSS container query for stuck position: sticky elements for a spin 🔥
nav { container-type: scroll-state; }
@container scroll-state(stuck: top) {
.nav__content { --expand: 1; }
}
trick here is to transition grid-template-columns with the custom property value to morph
taking the CSS container query for stuck position: sticky elements for a spin 🔥
nav { container-type: scroll-state; }
@container scroll-state(stuck: top) {
.nav__content { --expand: 1; }
}
trick here is to transition grid-template-columns with the custom property value to morph