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
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. 🧵
Reposted by Katherine Kato
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
una.im | 5 Useful CSS functions using the new @function rule
CSS custom functions are a gamechanger. Here are 5 really useful examples.
una.im
August 13, 2025 at 6:00 PM
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
Reposted by Katherine Kato
Reposted by Katherine Kato
July 24, 2025 at 2:33 PM
Reposted by Katherine Kato
🚀 The #StateOfHTML 2025 survey is now open!
➡️ Take it now: survey.devographics.com/en-US/survey...
💡 Spending time to fill these out is an investment into your craft, as browsers are using the results to make prioritization decisions.
You don't have to do it in one sitting (or even one device).
➡️ Take it now: survey.devographics.com/en-US/survey...
💡 Spending time to fill these out is an investment into your craft, as browsers are using the results to make prioritization decisions.
You don't have to do it in one sitting (or even one device).
State of HTML 2025
Take the State of HTML survey
survey.devographics.com
July 22, 2025 at 3:21 PM
🚀 The #StateOfHTML 2025 survey is now open!
➡️ Take it now: survey.devographics.com/en-US/survey...
💡 Spending time to fill these out is an investment into your craft, as browsers are using the results to make prioritization decisions.
You don't have to do it in one sitting (or even one device).
➡️ Take it now: survey.devographics.com/en-US/survey...
💡 Spending time to fill these out is an investment into your craft, as browsers are using the results to make prioritization decisions.
You don't have to do it in one sitting (or even one device).
Reposted by Katherine Kato
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most imp...
www.joshwcomeau.com
July 21, 2025 at 3:11 PM
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out: