James Stuckey Weber
@jamessw.com
Web Developer and builder of tools Web Developers use.
@oddbird.dev
@oddbird.dev
I'm excited to talk with Eric Meyer from Igalia and
@miriam.codes this Thursday about the patterns, problems and possibilities we're seeing as CSS Anchor Positioning becomes available across browsers. Join us on Thursday- what questions do you have for us?
Get notified when we go live!
@miriam.codes this Thursday about the patterns, problems and possibilities we're seeing as CSS Anchor Positioning becomes available across browsers. Join us on Thursday- what questions do you have for us?
Get notified when we go live!
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 18, 2025 at 9:20 PM
I'm excited to talk with Eric Meyer from Igalia and
@miriam.codes this Thursday about the patterns, problems and possibilities we're seeing as CSS Anchor Positioning becomes available across browsers. Join us on Thursday- what questions do you have for us?
Get notified when we go live!
@miriam.codes this Thursday about the patterns, problems and possibilities we're seeing as CSS Anchor Positioning becomes available across browsers. Join us on Thursday- what questions do you have for us?
Get notified when we go live!
Reposted by James Stuckey Weber
There are many goodies that are newly and widely available in Baseline. backdrop-filter is so much fun to work with and I am obsessed with AVIF images and the ability to animate from display: none with @starting-style. And how easy is it to lazy load images now? web.dev/articles/bas...
How to implement an image gallery using Baseline features | Articles | web.dev
Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features.
web.dev
November 14, 2025 at 7:25 PM
There are many goodies that are newly and widely available in Baseline. backdrop-filter is so much fun to work with and I am obsessed with AVIF images and the ability to animate from display: none with @starting-style. And how easy is it to lazy load images now? web.dev/articles/bas...
So far this morning, I have dealt with Python environment issues after an OS upgrade and timezone issues. I think I'm probably due for a good old fashioned git disaster.
November 13, 2025 at 3:41 PM
So far this morning, I have dealt with Python environment issues after an OS upgrade and timezone issues. I think I'm probably due for a good old fashioned git disaster.
Anchor Positioning is in Firefox 145, released today (but behind a flag)! To celebrate, join me, @miriam.codes and Eric Meyer next Thursday for Winging It. We'll be discussing patterns that are emerging and rough edges that are still getting worked out.
Subscribe to get notified when we go live!
Subscribe to get notified when we go live!
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 11, 2025 at 9:51 PM
Anchor Positioning is in Firefox 145, released today (but behind a flag)! To celebrate, join me, @miriam.codes and Eric Meyer next Thursday for Winging It. We'll be discussing patterns that are emerging and rough edges that are still getting worked out.
Subscribe to get notified when we go live!
Subscribe to get notified when we go live!
Reposted by James Stuckey Weber
The @firefoxdevtools.bsky.social JSON viewer got better in @firefoxnightly.bsky.social : the console offers access to the original json data via `$json`.
This allows to easily manipulate the underlying data to get what you want
This allows to easily manipulate the underlying data to get what you want
![Firefox JSON Viewer opened for the html entites JSON file
We can see the various properties of the JSON file, which are all objects containing a "characters" and a "codepoints" properties.
The Console is opened at the bottom. In it, we can see a console message explaining that some data is available (`$json.data` - the parsed JSON object, $json.text` - the original JSON text and `$json.headers` - HTTP request and response headers)
There's a console evaluation done with the following snippet:
```js
Object.entries($json.data)
.filter(([k, v]) => v.codepoints.length > 1)
.map(([k, v]) => ({characters: v.characters, htmlEntity: k, codepoints: v.codepoints}))
```
and the result shows an array of objects containing "characters", "htmlEntity" and "codepoints" properties.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:l6jizqbrtfnhnrd7vmsqmi3n/bafkreigizqr72frwj6qa53onh2tskqmcmrydexkzeydrkrarwiuoyulcmq@jpeg)
November 7, 2025 at 11:40 AM
The @firefoxdevtools.bsky.social JSON viewer got better in @firefoxnightly.bsky.social : the console offers access to the original json data via `$json`.
This allows to easily manipulate the underlying data to get what you want
This allows to easily manipulate the underlying data to get what you want
Reposted by James Stuckey Weber
Preparing to film the first module of my new #CSS course. There will also be text for the sickos who like to read.
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
October 29, 2025 at 8:32 PM
Preparing to film the first module of my new #CSS course. There will also be text for the sickos who like to read.
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
Monday me will be unhappy, but I have a document.querySelector crashing Safari so... Have a good weekend!
October 24, 2025 at 10:48 PM
Monday me will be unhappy, but I have a document.querySelector crashing Safari so... Have a good weekend!
Reposted by James Stuckey Weber
If you missed it, @sondrae.bsky.social and I chatted with
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 24, 2025 at 6:16 PM
If you missed it, @sondrae.bsky.social and I chatted with
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
Reposted by James Stuckey Weber
Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.
css-tip.com/position-area/
Example with position-area: top 👇
css-tip.com/position-area/
Example with position-area: top 👇
October 22, 2025 at 11:50 AM
Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.
css-tip.com/position-area/
Example with position-area: top 👇
css-tip.com/position-area/
Example with position-area: top 👇
Reposted by James Stuckey Weber
Tomorrow @stacykvernmo.com & @sondrae.bsky.social will be Winging It Live with @clayton.social.coop.ap.brid.gy to take on Bad UX Design Patterns. Join live, and bring your UX questions!
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 22, 2025 at 6:07 PM
Tomorrow @stacykvernmo.com & @sondrae.bsky.social will be Winging It Live with @clayton.social.coop.ap.brid.gy to take on Bad UX Design Patterns. Join live, and bring your UX questions!
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
By the time you finish this email course, CSS anchor positioning will likely be Baseline Newly Available. So, the best time to start learning was about 3 weeks ago, but the second best time is today.
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
October 21, 2025 at 8:08 PM
By the time you finish this email course, CSS anchor positioning will likely be Baseline Newly Available. So, the best time to start learning was about 3 weeks ago, but the second best time is today.
Reposted by James Stuckey Weber
🌈 Color.js is growing so much, we had to automate updating the millions of npm downloads counter in its readme. Currently at 84M total / 3M per week. 🤩
Speaking of, v0.6.0-beta.1 is fresh out the oven! github.com/color-js/col...
Aiming for a stable next week if no issues 🤞🏼
Speaking of, v0.6.0-beta.1 is fresh out the oven! github.com/color-js/col...
Aiming for a stable next week if no issues 🤞🏼
Release v0.6.0 Beta 1 · color-js/color.js
We hear you, it’s been a while, and v0.6.0 is long overdue. Assuming any significant issues come up in this beta, we plan to release a stable v0.6.0 in 1-2 weeks or so.
⬇️ 84 million downloads!
Col...
github.com
October 21, 2025 at 4:04 PM
🌈 Color.js is growing so much, we had to automate updating the millions of npm downloads counter in its readme. Currently at 84M total / 3M per week. 🤩
Speaking of, v0.6.0-beta.1 is fresh out the oven! github.com/color-js/col...
Aiming for a stable next week if no issues 🤞🏼
Speaking of, v0.6.0-beta.1 is fresh out the oven! github.com/color-js/col...
Aiming for a stable next week if no issues 🤞🏼
Reposted by James Stuckey Weber
Today's lunch video is "#CSS Anchor Positioning in Practice" - "What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join us as we talk through these questions and answer yours." www.youtube.com/watch?v=76hI...
CSS Anchor Positioning in Practice - Winging It Live
Miriam Suzanne and James Stuckey Weber of OddBird talk about CSS Anchor Positioning
Thu, May 30 @ 1pm ET / 11am MT
What is Anchor Positioning? Why is it exciting? What can you use it for? How does…
www.youtube.com
October 17, 2025 at 6:30 PM
Today's lunch video is "#CSS Anchor Positioning in Practice" - "What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join us as we talk through these questions and answer yours." www.youtube.com/watch?v=76hI...
As we tiptoe towards anchor positioning becoming baseline with the upcoming release of Firefox 145, there has been a flurry of updates and improvements. Here's a few things you should know.
Anchor Positioning Updates for Fall 2025
Overflowing content, browser support, and polyfill updates
oddbird.dev
October 14, 2025 at 5:37 PM
As we tiptoe towards anchor positioning becoming baseline with the upcoming release of Firefox 145, there has been a flurry of updates and improvements. Here's a few things you should know.
Shadow DOM in the CSS anchor positioning polyfill! v0.7.0 supports anchor and target in the same shadow root. anchor-positioning.oddbird.dev/shadow-dom
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
CSS Anchor Positioning Polyfill
anchor-positioning.oddbird.dev
October 7, 2025 at 4:44 PM
Shadow DOM in the CSS anchor positioning polyfill! v0.7.0 supports anchor and target in the same shadow root. anchor-positioning.oddbird.dev/shadow-dom
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
Ok, it's pretty nifty that if you put `loading="lazy"` on an image in a popover or dialog, the image doesn't load until you open it.
October 6, 2025 at 1:57 PM
Ok, it's pretty nifty that if you put `loading="lazy"` on an image in a popover or dialog, the image doesn't load until you open it.
Anchor positioning is out in Safari, and I just played around with it in Firefox Nightly, where it's pretty darn close. Now is the time to learn anchor positioning!
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
September 30, 2025 at 4:57 PM
Anchor positioning is out in Safari, and I just played around with it in Firefox Nightly, where it's pretty darn close. Now is the time to learn anchor positioning!
Reposted by James Stuckey Weber
In addition to the CSS Tips & Tricks series, we run a monthly show called Winging It LIVE. We interview experts and dig into front-end web development. Topics range from htmx to #CSS to #UX to fluid type and more.
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
September 29, 2025 at 5:15 PM
In addition to the CSS Tips & Tricks series, we run a monthly show called Winging It LIVE. We interview experts and dig into front-end web development. Topics range from htmx to #CSS to #UX to fluid type and more.
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
All you need to know about my college experience 20 years ago is that the campus security guard still remembers my name, even though I was never caught.
September 27, 2025 at 9:57 PM
All you need to know about my college experience 20 years ago is that the campus security guard still remembers my name, even though I was never caught.
Reposted by James Stuckey Weber
For spacing values on a website – is it better to respond to font-size, or available space, or stick with static units?
You don't have to choose! Sometimes the best unit in #CSS is a combination – with calc()/clamp() or min()/max() or round() & other math functions.
www.oddbird.net/2025/09/23/t...
You don't have to choose! Sometimes the best unit in #CSS is a combination – with calc()/clamp() or min()/max() or round() & other math functions.
www.oddbird.net/2025/09/23/t...
The Best CSS Unit Might Be a Combination
We don't have to choose between px and rem for spacing
www.oddbird.net
September 23, 2025 at 4:45 PM
For spacing values on a website – is it better to respond to font-size, or available space, or stick with static units?
You don't have to choose! Sometimes the best unit in #CSS is a combination – with calc()/clamp() or min()/max() or round() & other math functions.
www.oddbird.net/2025/09/23/t...
You don't have to choose! Sometimes the best unit in #CSS is a combination – with calc()/clamp() or min()/max() or round() & other math functions.
www.oddbird.net/2025/09/23/t...
Reposted by James Stuckey Weber
Color fonts are really interesting. You can see the font-palette options using a tool like wakamaifondue.com or the type designer's site is often helpful.
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
Exploring Color Fonts (COLRv1)
COLRv1 fonts have limited support at the time of this pens creation, but are fun to experiment with in a supported browser. Check the list here: https:...
codepen.io
September 20, 2025 at 2:46 AM
Color fonts are really interesting. You can see the font-palette options using a tool like wakamaifondue.com or the type designer's site is often helpful.
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
Good bird migration the last couple nights, but managed to botch recording both nights. Ah well, I took a nice walk in the woods and saw a few warblers and thrushes.
September 19, 2025 at 1:33 PM
Good bird migration the last couple nights, but managed to botch recording both nights. Ah well, I took a nice walk in the woods and saw a few warblers and thrushes.
Reposted by James Stuckey Weber
The WebDX Community Group is hosting an AMA on the r/webdev subreddit tomorrow. This is the group behind the "State of ..." surveys and Baseline, so if you have questions about those initiatives—or anything else around developer experience, join us!
web.dev/blog/baselin...
web.dev/blog/baselin...
Join the WebDX CG for an AMA on Reddit | Blog | web.dev
Join the AMA on r/webdev on September 18 and ask us anything!
web.dev
September 17, 2025 at 7:43 PM
The WebDX Community Group is hosting an AMA on the r/webdev subreddit tomorrow. This is the group behind the "State of ..." surveys and Baseline, so if you have questions about those initiatives—or anything else around developer experience, join us!
web.dev/blog/baselin...
web.dev/blog/baselin...
Reposted by James Stuckey Weber
I have a CSS workshop coming up soon at @smashingconf.com in NY, where we'll talk more about units & layouts & naming conventions – using Poetic CSS:
smashingconf.com/ny-2025
I'm also working on a video course, and happy to send you updates if you're interested:
www.oddbird.net/courses/desi...
smashingconf.com/ny-2025
I'm also working on a video course, and happy to send you updates if you're interested:
www.oddbird.net/courses/desi...
Designing With Code
CSS video course waitlist signup
www.oddbird.net
September 17, 2025 at 9:15 PM
I have a CSS workshop coming up soon at @smashingconf.com in NY, where we'll talk more about units & layouts & naming conventions – using Poetic CSS:
smashingconf.com/ny-2025
I'm also working on a video course, and happy to send you updates if you're interested:
www.oddbird.net/courses/desi...
smashingconf.com/ny-2025
I'm also working on a video course, and happy to send you updates if you're interested:
www.oddbird.net/courses/desi...
Oh fun, Voiceover reads the `menuitem` ARIA role as mah-NEW-adum.
September 17, 2025 at 6:04 PM
Oh fun, Voiceover reads the `menuitem` ARIA role as mah-NEW-adum.