Penny
@digitaltransient.bsky.social
Epic nerd. 🤓 Cat lady. 😽
PM WebUI @Google Chrome
Tell me what you need from HTML & CSS!
Prev: co-founder @mobify
PM WebUI @Google Chrome
Tell me what you need from HTML & CSS!
Prev: co-founder @mobify
Reposted by Penny
Good news!
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
una.im | Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
una.im
November 12, 2025 at 10:55 PM
Good news!
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Reposted by Penny
At the CSS WG meeting, we're discussing possibly natively doing fit-text in CSS. Send us your use cases (with screenshots/links)!
Do you ever need to fit multi-line text?
Do you ever need to fit non-text inline elements (e.g. icons)?
Do you adjust font-size, letter-spacing, or both?
Do you ever need to fit multi-line text?
Do you ever need to fit non-text inline elements (e.g. icons)?
Do you adjust font-size, letter-spacing, or both?
November 13, 2025 at 1:20 AM
At the CSS WG meeting, we're discussing possibly natively doing fit-text in CSS. Send us your use cases (with screenshots/links)!
Do you ever need to fit multi-line text?
Do you ever need to fit non-text inline elements (e.g. icons)?
Do you adjust font-size, letter-spacing, or both?
Do you ever need to fit multi-line text?
Do you ever need to fit non-text inline elements (e.g. icons)?
Do you adjust font-size, letter-spacing, or both?
Reposted by Penny
Good morning and happy Sunday 🐴 🥰
November 9, 2025 at 1:18 PM
Good morning and happy Sunday 🐴 🥰
TPAC 2025!
Say hello if you see me there.
Say hello if you see me there.
November 10, 2025 at 12:48 AM
TPAC 2025!
Say hello if you see me there.
Say hello if you see me there.
Reposted by Penny
Just witnessed Pixel, having emerged from the cat room after taking a particularly noxious dump, sniff the air dubiously then turn tail and return to her litter box to bury matters further.
Thanks for the courtesy flush, Pixel!
Thanks for the courtesy flush, Pixel!
November 5, 2025 at 12:22 AM
Just witnessed Pixel, having emerged from the cat room after taking a particularly noxious dump, sniff the air dubiously then turn tail and return to her litter box to bury matters further.
Thanks for the courtesy flush, Pixel!
Thanks for the courtesy flush, Pixel!
Reposted by Penny
✨ It’s that time of year! The State of JavaScript 2025 survey is currently running. 😄
I take the survey every year. It’s a great way to keep up with all of the new features and APIs that have come to browsers in the past year.
stateofjs.com/en-US
I take the survey every year. It’s a great way to keep up with all of the new features and APIs that have come to browsers in the past year.
stateofjs.com/en-US
State of JavaScript
stateofjs.com
November 3, 2025 at 3:45 PM
✨ It’s that time of year! The State of JavaScript 2025 survey is currently running. 😄
I take the survey every year. It’s a great way to keep up with all of the new features and APIs that have come to browsers in the past year.
stateofjs.com/en-US
I take the survey every year. It’s a great way to keep up with all of the new features and APIs that have come to browsers in the past year.
stateofjs.com/en-US
Reposted by Penny
We often hear that folks want "wrap detection" in CSS (i.e. when a flex item shifts into a position where it wraps over to the next line)
What is a real-world example of a use-case you would need this for?
What is a real-world example of a use-case you would need this for?
November 3, 2025 at 7:43 PM
We often hear that folks want "wrap detection" in CSS (i.e. when a flex item shifts into a position where it wraps over to the next line)
What is a real-world example of a use-case you would need this for?
What is a real-world example of a use-case you would need this for?
Reposted by Penny
I flipped the flag on this one today and it’s now enabled by default. Expect it in tomorrow’s Chrome Canary build.
(If you can’t wait to try it out, you can manually flip the flag in today’s Canary/Beta/Dev builds. Go to chrome://flags and look for starting-style)
(If you can’t wait to try it out, you can manually flip the flag in today’s Canary/Beta/Dev builds. Go to chrome://flags and look for starting-style)
October 21, 2025 at 6:48 PM
I flipped the flag on this one today and it’s now enabled by default. Expect it in tomorrow’s Chrome Canary build.
(If you can’t wait to try it out, you can manually flip the flag in today’s Canary/Beta/Dev builds. Go to chrome://flags and look for starting-style)
(If you can’t wait to try it out, you can manually flip the flag in today’s Canary/Beta/Dev builds. Go to chrome://flags and look for starting-style)
Reposted by Penny
At #fronteers #DarkMode, @utilitybend.com proposed the HTML Element.
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
October 3, 2025 at 4:24 PM
At #fronteers #DarkMode, @utilitybend.com proposed the HTML Element.
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
Reposted by Penny
I’ll be speaking in Toronto in a couple of weeks! It’ll be on animation design, and some of the cool things we can do to make our websites/webapps more whimsical. ✨
fitc.ca/event/webu25...
fitc.ca/event/webu25...
Web Unleashed 2025 // October 21-22 // Toronto & Online
The ultimate conference for front-end dev experts
fitc.ca
October 2, 2025 at 6:43 PM
I’ll be speaking in Toronto in a couple of weeks! It’ll be on animation design, and some of the cool things we can do to make our websites/webapps more whimsical. ✨
fitc.ca/event/webu25...
fitc.ca/event/webu25...
Reposted by Penny
🤩 View Transitions excitement! Goooooo Ladybird!
> This month, a lot of the underlying machinery for this has been implemented. It's going to take a bit longer before it's usable, but it's a good start to an exciting new web feature.
buttondown.com/ladybird/arc...
> This month, a lot of the underlying machinery for this has been implemented. It's going to take a bit longer before it's usable, but it's a good start to an exciting new web feature.
buttondown.com/ladybird/arc...
This Month in Ladybird: September 2025
September wrapped up with 207 merged PRs from 40 contributors. Let’s take a look at some highlights: Welcoming new sponsors Ladybird is entirely funded by...
buttondown.com
October 2, 2025 at 6:44 PM
🤩 View Transitions excitement! Goooooo Ladybird!
> This month, a lot of the underlying machinery for this has been implemented. It's going to take a bit longer before it's usable, but it's a good start to an exciting new web feature.
buttondown.com/ladybird/arc...
> This month, a lot of the underlying machinery for this has been implemented. It's going to take a bit longer before it's usable, but it's a good start to an exciting new web feature.
buttondown.com/ladybird/arc...
Accessible CSS carousels are here!
Our new post, co-authored with @flackr.bsky.social and Lucas Radaelli (x.com/lucasradaelli), walks you through building them with the new APIs.
The APIs are Interop 2026 proposals, soon on their way to all browsers. 🤞
developer.chrome.com/blog/accessi...
Our new post, co-authored with @flackr.bsky.social and Lucas Radaelli (x.com/lucasradaelli), walks you through building them with the new APIs.
The APIs are Interop 2026 proposals, soon on their way to all browsers. 🤞
developer.chrome.com/blog/accessi...
Make accessible carousels | Blog | Chrome for Developers
How the features in CSS Overflow 5 can help you create more accessible carousel patterns.
developer.chrome.com
October 1, 2025 at 4:52 PM
Accessible CSS carousels are here!
Our new post, co-authored with @flackr.bsky.social and Lucas Radaelli (x.com/lucasradaelli), walks you through building them with the new APIs.
The APIs are Interop 2026 proposals, soon on their way to all browsers. 🤞
developer.chrome.com/blog/accessi...
Our new post, co-authored with @flackr.bsky.social and Lucas Radaelli (x.com/lucasradaelli), walks you through building them with the new APIs.
The APIs are Interop 2026 proposals, soon on their way to all browsers. 🤞
developer.chrome.com/blog/accessi...
Reposted by Penny
There's a nice series from @sturobson.com getting into *why* and *how* to "un-Sass" CSS.
www.alwaystwisted.com/articles/UnS...
@jeffbridgforth.com is making a similar leap and shares how he's approaching it:
css-tricks.com/is-it-time-t...
www.alwaystwisted.com/articles/UnS...
@jeffbridgforth.com is making a similar leap and shares how he's approaching it:
css-tricks.com/is-it-time-t...
Is it Time to Un-Sass? | CSS-Tricks
Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgworth is thinking about it.
css-tricks.com
September 17, 2025 at 2:09 PM
There's a nice series from @sturobson.com getting into *why* and *how* to "un-Sass" CSS.
www.alwaystwisted.com/articles/UnS...
@jeffbridgforth.com is making a similar leap and shares how he's approaching it:
css-tricks.com/is-it-time-t...
www.alwaystwisted.com/articles/UnS...
@jeffbridgforth.com is making a similar leap and shares how he's approaching it:
css-tricks.com/is-it-time-t...
Reposted by Penny
This is such a great enhancement. Being able to have any tool that talks MCP have the ability to deeply introspect your pages is huge.
Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent→ goo.gle/4pDE6Tk
With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.
With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.
September 23, 2025 at 3:43 PM
This is such a great enhancement. Being able to have any tool that talks MCP have the ability to deeply introspect your pages is huge.
Reposted by Penny
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 Penny
CSS Excitement!
> RESOLVED: Add `color-scheme()` test to both `@container` queries and `if()`.
github.com/w3c/csswg-dr...
This means you can do a light-dark() that works with any type of value 🤩🤩
```
background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg));
```
> RESOLVED: Add `color-scheme()` test to both `@container` queries and `if()`.
github.com/w3c/csswg-dr...
This means you can do a light-dark() that works with any type of value 🤩🤩
```
background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg));
```
[css-values-5] Using `if()` to do dark/light switching of image urls. · Issue #10577 · w3c/csswg-drafts
Please forgive me if this one's a bit vague as I'm adding an issue here at Chris Lilley's request, and I'm not familiar with the process too much. There are times when I need to swap the background...
github.com
September 24, 2025 at 4:24 PM
CSS Excitement!
> RESOLVED: Add `color-scheme()` test to both `@container` queries and `if()`.
github.com/w3c/csswg-dr...
This means you can do a light-dark() that works with any type of value 🤩🤩
```
background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg));
```
> RESOLVED: Add `color-scheme()` test to both `@container` queries and `if()`.
github.com/w3c/csswg-dr...
This means you can do a light-dark() that works with any type of value 🤩🤩
```
background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg));
```
Reposted by Penny
This is amazing! The company behind it is uniQure and it's a type of gene therapy. Does anyone know the story about the preclinical work leading up to it? It know a lot about the discovery of the HTT mutation (an amazing story!). I'm curious about this specific microRNA approach: who developed it?
September 24, 2025 at 4:16 PM
This is amazing! The company behind it is uniQure and it's a type of gene therapy. Does anyone know the story about the preclinical work leading up to it? It know a lot about the discovery of the HTT mutation (an amazing story!). I'm curious about this specific microRNA approach: who developed it?
Reposted by Penny
guidelines for building interfaces on the web
interactions, animations, layout, content, forms, performance, design & copywriting
includes an AGENTS.md
interactions, animations, layout, content, forms, performance, design & copywriting
includes an AGENTS.md
September 23, 2025 at 5:15 PM
guidelines for building interfaces on the web
interactions, animations, layout, content, forms, performance, design & copywriting
includes an AGENTS.md
interactions, animations, layout, content, forms, performance, design & copywriting
includes an AGENTS.md
Reposted by Penny
Memories of Fiery sunsets.
Grundy, Ontario
Sept 2016
#WeekMforMemories #AlphabetChallenge #EastCoastKin #sunset #ShareCanGeo #blueskyphotography #GrundyPP
Grundy, Ontario
Sept 2016
#WeekMforMemories #AlphabetChallenge #EastCoastKin #sunset #ShareCanGeo #blueskyphotography #GrundyPP
September 23, 2025 at 2:30 PM
Memories of Fiery sunsets.
Grundy, Ontario
Sept 2016
#WeekMforMemories #AlphabetChallenge #EastCoastKin #sunset #ShareCanGeo #blueskyphotography #GrundyPP
Grundy, Ontario
Sept 2016
#WeekMforMemories #AlphabetChallenge #EastCoastKin #sunset #ShareCanGeo #blueskyphotography #GrundyPP
Reposted by Penny
Blink: Intent to Ship: Interest Invokers (the `interestfor` attribute)
Blink: Intent to Ship: Interest Invokers (the `interestfor` attribute)
Blink: Intent to Ship: Interest Invokers (the `interestfor` attribute)
groups.google.com
September 18, 2025 at 8:40 PM
Blink: Intent to Ship: Interest Invokers (the `interestfor` attribute)
Reposted by Penny
Blink: Intent to Ship: :target-before and :target-after pseudo-classes
Blink: Intent to Ship: :target-before and :target-after pseudo-classes
Blink: Intent to Ship: :target-before and :target-after pseudo-classes
groups.google.com
September 3, 2025 at 4:12 PM
Blink: Intent to Ship: :target-before and :target-after pseudo-classes
Reposted by Penny
Blink: Intent to Prototype: Overscroll Gestures
Blink: Intent to Prototype: Overscroll Gestures
Blink: Intent to Prototype: Overscroll Gestures
groups.google.com
September 8, 2025 at 2:55 PM
Blink: Intent to Prototype: Overscroll Gestures
Reposted by Penny
Blink: Intent to Ship: Respect overscroll-behavior on non-scrollable scroll containers
Blink: Intent to Ship: Respect overscroll-behavior on non-scrollable scroll containers
Blink: Intent to Ship: Respect overscroll-behavior on non-scrollable scroll containers
groups.google.com
September 11, 2025 at 8:06 PM
Blink: Intent to Ship: Respect overscroll-behavior on non-scrollable scroll containers
Reposted by Penny
To do this with the (upcoming) interest invoker API, it's 1 line of code:
.parent:has(:interest-source) button {
interest-show-delay: 0s;
}
You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).
codepen.io/una/pen/LEpw...
.parent:has(:interest-source) button {
interest-show-delay: 0s;
}
You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).
codepen.io/una/pen/LEpw...
September 15, 2025 at 7:01 PM
To do this with the (upcoming) interest invoker API, it's 1 line of code:
.parent:has(:interest-source) button {
interest-show-delay: 0s;
}
You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).
codepen.io/una/pen/LEpw...
.parent:has(:interest-source) button {
interest-show-delay: 0s;
}
You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).
codepen.io/una/pen/LEpw...