Katherine Kato
@kathykato.bsky.social
UI/UX Designer & Front-End Web Developer
Website: https://www.katherinekato.com
CodePen: https://codepen.io/kathykato
Website: https://www.katherinekato.com
CodePen: https://codepen.io/kathykato
Pinned
Katherine Kato
@kathykato.bsky.social
· Nov 9
👋Hello Bluesky! I'm Katherine Kato, a web developer who is into fun CSS animations, interactive design, and web accessibility. In my free time, you'll usually find me playing video games, watching anime, or enjoying a cup of matcha green tea. See you around!
Reposted by Katherine Kato
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
webkit.org/blog/17660/i...
webkit.org/blog/17660/i...
Introducing CSS Grid Lanes
It’s here!
webkit.org
December 19, 2025 at 9:33 PM
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
webkit.org/blog/17660/i...
webkit.org/blog/17660/i...
Reposted by Katherine Kato
Reposted by Katherine Kato
I've set up a small monthly newsletter called Focus State.
With accessibility support shrinking in a lot of orgs, I wanted to create something that divides that gap, builds community, and makes the internet a bit more fun.
If you dig digital accessibility give it a look:
annaecook.com/newsletter
With accessibility support shrinking in a lot of orgs, I wanted to create something that divides that gap, builds community, and makes the internet a bit more fun.
If you dig digital accessibility give it a look:
annaecook.com/newsletter
Subscribe to Focus State — Anna E. Cook
Focus state is a newsletter about building better products through accessibility and systems thinking.
annaecook.com
December 16, 2025 at 5:17 PM
I've set up a small monthly newsletter called Focus State.
With accessibility support shrinking in a lot of orgs, I wanted to create something that divides that gap, builds community, and makes the internet a bit more fun.
If you dig digital accessibility give it a look:
annaecook.com/newsletter
With accessibility support shrinking in a lot of orgs, I wanted to create something that divides that gap, builds community, and makes the internet a bit more fun.
If you dig digital accessibility give it a look:
annaecook.com/newsletter
Reposted by Katherine Kato
You too can make a tiny, fixed-width website in the year of our lord 2025 ⚡️ lynnandtonic.com
Lynn Fisher
Lynn Fisher is a web designer, CSS developer, and artist from Phoenix, Arizona.
lynnandtonic.com
December 8, 2025 at 3:47 PM
You too can make a tiny, fixed-width website in the year of our lord 2025 ⚡️ lynnandtonic.com
Reposted by Katherine Kato
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 8, 2025 at 5:08 PM
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
Reposted by Katherine Kato
Love this, UIs can be actual _fun_ to use while also being useful colorpalette.pro
Color Palette Pro — A Synthesizer for Color Palettes
Generate customizable color palettes in advanced color spaces that can be easily shared, downloaded, or exported.
colorpalette.pro
November 29, 2025 at 11:56 PM
Love this, UIs can be actual _fun_ to use while also being useful colorpalette.pro
Reposted by Katherine Kato
✨ I just published a new post, and it’s all about one of the most mind-blowing new CSS features: subgrid.
Honestly, when I first heard about subgrid, I figured it’d be a convenient little utility. I had no idea it would solve one of the most longstanding issues I’ve had with CSS. 😮
Check it out:
Honestly, when I first heard about subgrid, I figured it’d be a convenient little utility. I had no idea it would solve one of the most longstanding issues I’ve had with CSS. 😮
Check it out:
Brand New Layouts with CSS Subgrid • Josh W. Comeau
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful conven...
www.joshwcomeau.com
November 25, 2025 at 4:40 PM
✨ I just published a new post, and it’s all about one of the most mind-blowing new CSS features: subgrid.
Honestly, when I first heard about subgrid, I figured it’d be a convenient little utility. I had no idea it would solve one of the most longstanding issues I’ve had with CSS. 😮
Check it out:
Honestly, when I first heard about subgrid, I figured it’d be a convenient little utility. I had no idea it would solve one of the most longstanding issues I’ve had with CSS. 😮
Check it out:
Reposted by Katherine Kato
last night at a bar I learned that they improved pinball by making machines that are entirely computers and they’re much better than what we had before
November 16, 2025 at 6:43 PM
last night at a bar I learned that they improved pinball by making machines that are entirely computers and they’re much better than what we had before
Reposted by Katherine Kato
Dithering - Part 1
Understanding how dithering works, visually.
visualrambling.space
November 8, 2025 at 7:41 AM
Reposted by Katherine Kato
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
Reposted by Katherine Kato
Did we all celebrate that `::details-content` works in all major browsers now? 🎉
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
![details::details-content {
opacity: 0;
transition:
opacity 600ms,
content-visibility 600ms allow-discrete;
}
details[open]::details-content {
opacity: 1;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:w2nz7d2phfbrzyembuw7oxjj/bafkreicqynvlulygnc4o2vb64ez5nb25yhw67punbqlart3yg2bjr52zoe@jpeg)
October 20, 2025 at 5:32 PM
Did we all celebrate that `::details-content` works in all major browsers now? 🎉
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
Reposted by Katherine Kato
responsive CSS pinned sidebar transition 📌
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
October 14, 2025 at 2:01 PM
responsive CSS pinned sidebar transition 📌
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
Reposted by Katherine Kato
It's here. JavaScript for Everyone is now available to…everyone!
The amount of effort and experience packed into this course is unbelievable and we know you're going to love it.
Get yours for £189, down from £249, for 2 weeks and super-charge your career prospects
piccalilli.link/js4e-launch-...
The amount of effort and experience packed into this course is unbelievable and we know you're going to love it.
Get yours for £189, down from £249, for 2 weeks and super-charge your career prospects
piccalilli.link/js4e-launch-...
JavaScript for Everyone
A high quality, expansive written course that will elevate your JavaScript skills to a level you never thought was achievable.
piccalilli.link
October 14, 2025 at 8:21 AM
It's here. JavaScript for Everyone is now available to…everyone!
The amount of effort and experience packed into this course is unbelievable and we know you're going to love it.
Get yours for £189, down from £249, for 2 weeks and super-charge your career prospects
piccalilli.link/js4e-launch-...
The amount of effort and experience packed into this course is unbelievable and we know you're going to love it.
Get yours for £189, down from £249, for 2 weeks and super-charge your career prospects
piccalilli.link/js4e-launch-...
Reposted by Katherine Kato
Why I 🧡 the web.
This #WebGL game where you deliver messages on a tiny planet is amazing. Smooth animation. Peaceful vibes (and i didn't even play, I wondered around).
messenger.abeto.co
#JavaScript #chillvibe #game
This #WebGL game where you deliver messages on a tiny planet is amazing. Smooth animation. Peaceful vibes (and i didn't even play, I wondered around).
messenger.abeto.co
#JavaScript #chillvibe #game
September 27, 2025 at 5:25 PM
Why I 🧡 the web.
This #WebGL game where you deliver messages on a tiny planet is amazing. Smooth animation. Peaceful vibes (and i didn't even play, I wondered around).
messenger.abeto.co
#JavaScript #chillvibe #game
This #WebGL game where you deliver messages on a tiny planet is amazing. Smooth animation. Peaceful vibes (and i didn't even play, I wondered around).
messenger.abeto.co
#JavaScript #chillvibe #game
Reposted by Katherine Kato
SVGOMG has been updated to use SVGO 4! (thanks Adrien Crivelli!)
This is the URL for SVGOMG. Unfortunately someone maintains a fork with ads, so, err, don't use that 😀
jakearchibald.github.io/svgomg/
This is the URL for SVGOMG. Unfortunately someone maintains a fork with ads, so, err, don't use that 😀
jakearchibald.github.io/svgomg/
SVGOMG - SVGO's Missing GUI for minifying SVGs
Easy & visual compression of SVG images.
jakearchibald.github.io
September 29, 2025 at 8:37 AM
SVGOMG has been updated to use SVGO 4! (thanks Adrien Crivelli!)
This is the URL for SVGOMG. Unfortunately someone maintains a fork with ads, so, err, don't use that 😀
jakearchibald.github.io/svgomg/
This is the URL for SVGOMG. Unfortunately someone maintains a fork with ads, so, err, don't use that 😀
jakearchibald.github.io/svgomg/
Reposted by Katherine Kato
We’re live!! My brand-new course, “Whimsical Animations”, is now available. 🥳🎉
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
whimsy.joshwcomeau.com
September 24, 2025 at 2:56 PM
We’re live!! My brand-new course, “Whimsical Animations”, is now available. 🥳🎉
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
Reposted by Katherine Kato
September 16, 2025 at 2:50 PM
Reposted by Katherine Kato
I've been using a "follow-the-leader" pattern with CSS anchor positioning lately so I decided to write about it!
You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective.
Read more with demos!:
👀➡️ una.im/follow-the-a...
You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective.
Read more with demos!:
👀➡️ una.im/follow-the-a...
una.im | Follow-the-leader pattern with CSS anchor positioning
Learn how to create a dynamically re-anchored pointer element.
una.im
September 11, 2025 at 6:14 PM
I've been using a "follow-the-leader" pattern with CSS anchor positioning lately so I decided to write about it!
You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective.
Read more with demos!:
👀➡️ una.im/follow-the-a...
You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective.
Read more with demos!:
👀➡️ una.im/follow-the-a...
Reposted by Katherine Kato
✍️ How modern browsers work addyo.substack.com/p/how-modern... - my write-up on browser internals for web developers
How modern browsers work
A web developers guide to browser internals
addyo.substack.com
September 13, 2025 at 7:05 PM
✍️ How modern browsers work addyo.substack.com/p/how-modern... - my write-up on browser internals for web developers
Reposted by Katherine Kato
gradient.style has finally
- come out of beta
- offers multiple background editing
- is open source
🎉 nerdy.dev/gradient.sty...
- come out of beta
- offers multiple background editing
- is open source
🎉 nerdy.dev/gradient.sty...
August 28, 2025 at 9:06 PM
gradient.style has finally
- come out of beta
- offers multiple background editing
- is open source
🎉 nerdy.dev/gradient.sty...
- come out of beta
- offers multiple background editing
- is open source
🎉 nerdy.dev/gradient.sty...
Reposted by Katherine Kato
🛠️ New Article: The Basics of Anchor Positioning
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
August 28, 2025 at 7:41 AM
🛠️ New Article: The Basics of Anchor Positioning
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
Reposted by Katherine Kato
August 25, 2025 at 6:43 PM
Reposted by Katherine Kato
A gentle introduction to #CSS anchor positioning by @saron.bsky.social
webkit.org/blog/17240/a...
—
I'm loving all the simple guides to new CSS features that are now being published on the webkit blog. It's slowly becoming a great resource to stay up-to-date with the latest in #CSS.
webkit.org/blog/17240/a...
—
I'm loving all the simple guides to new CSS features that are now being published on the webkit blog. It's slowly becoming a great resource to stay up-to-date with the latest in #CSS.
A gentle introduction to anchor positioning
Anchor positioning allows you to place an element on the page based on where another element is.
webkit.org
August 25, 2025 at 4:36 PM
A gentle introduction to #CSS anchor positioning by @saron.bsky.social
webkit.org/blog/17240/a...
—
I'm loving all the simple guides to new CSS features that are now being published on the webkit blog. It's slowly becoming a great resource to stay up-to-date with the latest in #CSS.
webkit.org/blog/17240/a...
—
I'm loving all the simple guides to new CSS features that are now being published on the webkit blog. It's slowly becoming a great resource to stay up-to-date with the latest in #CSS.
Reposted by Katherine Kato
New in Chrome DevTools: Instantly check CSS feature compatibility with Baseline!
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
August 22, 2025 at 6:04 PM
New in Chrome DevTools: Instantly check CSS feature compatibility with Baseline!
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
Reposted by Katherine Kato
✨ I just published a brand-new post! It’s about the notorious SVG <path> element.
With its compact Regex-style syntax, <path> can be super intimidating. But they’re also *incredibly* powerful, letting us draw (and animate!) curved lines.
You can read it here, and I’ll share more info in thread. 🧵
With its compact Regex-style syntax, <path> can be super intimidating. But they’re also *incredibly* powerful, letting us draw (and animate!) curved lines.
You can read it here, and I’ll share more info in thread. 🧵
An Interactive Guide to SVG Paths • Josh W. Comeau
SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tut...
www.joshwcomeau.com
August 18, 2025 at 3:27 PM
✨ I just published a brand-new post! It’s about the notorious SVG <path> element.
With its compact Regex-style syntax, <path> can be super intimidating. But they’re also *incredibly* powerful, letting us draw (and animate!) curved lines.
You can read it here, and I’ll share more info in thread. 🧵
With its compact Regex-style syntax, <path> can be super intimidating. But they’re also *incredibly* powerful, letting us draw (and animate!) curved lines.
You can read it here, and I’ll share more info in thread. 🧵