Steven Spriggs's Avatar

Steven Spriggs

@stevenspriggs.bsky.social

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

26 Followers  |  62 Following  |  22 Posts  |  Joined: 18.09.2023  |  2.2487

Latest posts by stevenspriggs.bsky.social on Bluesky

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 β€” πŸ‘ 112    πŸ” 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 β€” πŸ‘ 101    πŸ” 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 β€” πŸ‘ 2039    πŸ” 326    πŸ’¬ 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
Preview
Layout & Grid in Design Systems Simply saying the word "grid" conjures up strong and confusing feelings. Kinda like puberty! With so much history and so many different (and sometimes competing) paradigms, it's no wonder conversation...

β€œthe β€˜grid’ the designers wield (those … light pink lines superimposed over a whitespace-rich design comp) is a different beast than the β€˜grid’ that developers wield (which includes CSS Grid, Flexbox, and a slew of other modern CSS techniques).” -
@bradfrost.bsky.social

🍻 I’m here for this

06.03.2024 17:45 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

Wow sorry to hear this abookapart are prized possessions on my bookshelf. Attended event aparts are great memories as well.

05.03.2024 02:33 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

Attempting to learn to use and configure neovim (again).

05.03.2024 02:28 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

Seems more and more people are popping on now that flood gates opened.

10.02.2024 23:07 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

πŸ’―

10.02.2024 23:05 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

Been awhile since I checked back in on bluesky looks like more action. Might start cross posting from mastadon

01.02.2024 02:00 β€” πŸ‘ 4    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

@stevenspriggs is following 20 prominent accounts