Steven Spriggs's Avatar

Steven Spriggs

@stevenspriggs

UX Engineer at Red Hat working with web standards Web Components and Design Systems. I am a skiing, hiking, climbing, and general outdoors enthusiast

27
Followers
68
Following
27
Posts
18.09.2023
Joined
Posts Following

Latest posts by Steven Spriggs @stevenspriggs

I considered building a diy rope tow this year for my side/back yard. Snow cover being great for my 4year old son to practice his stopping and turning.

24.02.2026 12:28 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

This post is full of TIL

19.02.2026 15:55 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Musk advocates white monoculturalism

Musk advocates white monoculturalism

We must speak plainly about the agenda Elon Musk & other MAGA leaders are pushing. It’s white nationalism.

There’s no room for Black, Hispanic/Latino, Asian, Native, Jewish or all other Americans in Musk’s monocultural vision.

Multiculturalism is superior. We can’t allow Musk & others to end it.

15.02.2026 14:51 πŸ‘ 5290 πŸ” 1501 πŸ’¬ 550 πŸ“Œ 394

Lots missing, always want more. Secret vetos sounds shady.

13.02.2026 04:38 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

So nice!

06.02.2026 03:25 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).

This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.

Demo: codepen.io/una/pen/ByzY...

05.02.2026 20:08 πŸ‘ 206 πŸ” 31 πŸ’¬ 9 πŸ“Œ 6

Do you work with DTCG-formatted design tokens in CSS? Check out the recently improved Design Tokens Language Server: github.com/bennypowers/... by @bennypowers.dev.web.brid.gy

Rewritten in Go for a 96.2% speed increase while using 89.4% less memory and 89.2% smaller binary. Happy coding!

28.10.2025 18:35 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

Happy October! 🍁
Cotton grass at Dolly Sods Wilderness Area, West Virginia
#landscape #nature #photography #art

01.10.2025 17:55 πŸ‘ 3 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0
Preview
Lit is Joining the OpenJS Foundation! Lit is officially joining the OpenJS Foundation as an Impact Project!

Lit is joining @openjsf.org! πŸŽ‰

Today at JSConf, The OpenJS Foundation announced Lit is officially joining as an Impact Project!

We're beyond excited for this move and look forward to continuing our work to build the open web with OpenJS!

Read more on our blog: lit.dev/blog/2025-10...

14.10.2025 13:35 πŸ‘ 120 πŸ” 40 πŸ’¬ 0 πŸ“Œ 1
A screenshot of Firefox Nightly, with the Codepen https://codepen.io/keithamus/pen/wBaZVaX open. The page showing 6 heading levels, showing the CSS, HTML and the rendered page. Each heading is styled differently using the provided CSS selectors, `:heading` (which styles all headers), `:heading(-2n+3)` (styles h1 and h3 elements), `:heading(5, 6)` (styles the h5 and h6 elements). Another Firefox Nightly window is open, showing the `layout.css.heading-selector.enabled` flag is set to `true`, making the rendered page styled using the new selectors.

A screenshot of Firefox Nightly, with the Codepen https://codepen.io/keithamus/pen/wBaZVaX open. The page showing 6 heading levels, showing the CSS, HTML and the rendered page. Each heading is styled differently using the provided CSS selectors, `:heading` (which styles all headers), `:heading(-2n+3)` (styles h1 and h3 elements), `:heading(5, 6)` (styles the h5 and h6 elements). Another Firefox Nightly window is open, showing the `layout.css.heading-selector.enabled` flag is set to `true`, making the rendered page styled using the new selectors.

Hot off the presses! Firefox Nightly (www.mozilla.org/en-GB/firefo...) adds the new :heading pseudo! Easily style all headings, or use nth-child-like AnB syntax to select a range of headings! Needs `layout.css.heading-selector.enabled` flag enabled. Try it out and let me know your thoughts.

01.07.2025 15:13 πŸ‘ 100 πŸ” 29 πŸ’¬ 3 πŸ“Œ 3

Proposal to rename "dependencies" in package.json to "liabilities”.

So the new structure would be:

```
{
"liabilities": {
"react": "^19.0.0",
"typescript": "^5.0.0"
},
"devLiabilities": {...}
}
```

17.04.2025 02:36 πŸ‘ 65 πŸ” 8 πŸ’¬ 1 πŸ“Œ 1

Looking forward to more YouTube videos on the firefox code base πŸŽ‰ πŸ˜€

15.04.2025 18:48 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Without words. Sorry to hear this. Sounds like a terrible decision on googles part. Hope you find something that makes you forget about β€œmega corp” & makes you feel appreciated as much as I know the web community appreciates you! Enjoyed speaking with you in person late night after frostapalooza.

15.04.2025 17:43 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Asterisks are ****ing great. I swear by them.

07.01.2025 09:47 πŸ‘ 2033 πŸ” 325 πŸ’¬ 39 πŸ“Œ 5

Day 2 of the little man shredding the hill. This time no photos, but is incredible to watch things start to click for him. Going to be an incredibly fun season. #blueski #ski

23.12.2024 19:57 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image Post image Post image Post image

Proud papa today. Took my three year old skiing with his first lift ticket. He did amazing and had a blast. #blueski #ski #skiwv #timberlinemountain

21.12.2024 19:48 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Java applet walks into the room

18.12.2024 12:33 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

None IMHO are great representations. Not really sure I have an explicit favorite either… I know I’m super helpful here and definitely not being vague.

11.12.2024 22:41 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I’ve personally never cared for the idea of skeleton loaders either. I want to do better by the end user. The middle ground often feels missing or impractical.

05.12.2024 15:59 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Balancing building complex web components and the desire for progressive enhancement is hard. Hiding content from users until components load brings up ptsd memories of flash load screens.

05.12.2024 15:58 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Twinkly - Innovative Smart LED Lighting Solutions for Home and Busines App-controlled decoration lights. Mappable RGB lighting. Map, control, amaze, repeat. Light up your life.

twinkly.com

30.11.2024 18:55 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Dunno about color reproduction value but like the twinkly icicle lights I bought this year.

30.11.2024 18:55 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Because of having to deal with *both* the state of the existence of the psuedo and without. The psuedo also needs display contents. πŸ˜…

Big thanks to @bram.us and @ldavidbaron.bsky.social for walking my broken 🧠 through that 🍻

22.11.2024 18:42 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Oh good call and that does indeed work. Well thank you, and now thinking through it makes sense.

22.11.2024 18:38 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

My understanding of the pseudo element is it wraps the content region of the details a child element. I need the details itself to be display contents. So that summary and ::details-content can take part in the parent grid.

22.11.2024 17:04 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
grid with display: contents child (chrome 131 bug?) ...

With the update to chrome 131 and the stated styling improvements for details summary.

developer.chrome.com/blog/new-in-...

I can no longer use details as display contents in a grid. Works in chrome 130/ Firefox / Safari.

codepen.io/zeroedin/pen...

Introduced bug?

@chromium.social

22.11.2024 14:51 πŸ‘ 2 πŸ” 1 πŸ’¬ 2 πŸ“Œ 0
:empty {
	/* only selects elements without element children  
	 * and without any text content whatsoever, 
	 * including whitespace */
}

:not(:has(*)) {
	/* selects elements without element children, 
	 * even if they have any kind of text content */
}

:empty { /* only selects elements without element children * and without any text content whatsoever, * including whitespace */ } :not(:has(*)) { /* selects elements without element children, * even if they have any kind of text content */ }

#tinyCSStip One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.

`:has()` fixes this problem.

`:not(:has(*))` selects elements that don't have element children, even if they have text content.

12.03.2024 09:18 πŸ‘ 56 πŸ” 9 πŸ’¬ 3 πŸ“Œ 0
Preview
GitHub - proposal-signals/proposal-signals: A proposal to add signals to JavaScript. A proposal to add signals to JavaScript. Contribute to proposal-signals/proposal-signals development by creating an account on GitHub.

The Proposal to bring Reactive Primitives to all of JS is now public:

github.com/proposal-sig...

Please have a read and provide feedback πŸŽ‰

31.03.2024 18:00 πŸ‘ 5 πŸ” 4 πŸ’¬ 1 πŸ“Œ 0

This is sweet. A random select would be cool for ultimate combos. #fatality

04.04.2024 23:23 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

As an owner of a 4Runner and someone that just reserved the R2 I definitely get the sentiment. Just couldnt justify or afford the R1S even though I’d love that to replace the 4Runner. R2 will be a daily drive replacement for wife’s aging Elantra and will see if it replaces the 4Runner long term.

08.03.2024 00:41 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0