James Stuckey Weber
@jamessw.com
Web Developer and builder of tools Web Developers use.
@oddbird.dev
@oddbird.dev
Dialogs and Popovers are super useful for making layered UIs, and Baseline features simplify the implementation. Great article from fellow @oddbird.dev David Herron.
<dialog> and popover: Baseline layered UI patterns | Articles | web.dev
Learn how to build UI patterns for modal windows and prompts using the <dialog> and popover web features.
web.dev
November 25, 2025 at 4:53 PM
Dialogs and Popovers are super useful for making layered UIs, and Baseline features simplify the implementation. Great article from fellow @oddbird.dev David Herron.
I opened a bug on an open source package. Someone quickly creates a PR that claims to fix the problem, but doesn't really, and is almost certainly generated by AI. I don't want that merged into a tool I use, but I also don't want to engage with the AI troll by giving it feedback. What to do...
November 25, 2025 at 12:40 AM
I opened a bug on an open source package. Someone quickly creates a PR that claims to fix the problem, but doesn't really, and is almost certainly generated by AI. I don't want that merged into a tool I use, but I also don't want to engage with the AI troll by giving it feedback. What to do...
I highly recommend this course- I've learned a ton!
📣 Hear hear! The biggest savings on the Practical Accessibility course start *today*—for a limited time only.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
The Practical Accessibility Course
A get-right-down-to-it online course for Web designers and developers who want to start creating more accessible Web user interfaces and digital products today
practical-accessibility.today
November 22, 2025 at 4:34 PM
I highly recommend this course- I've learned a ton!
Just published v0.8.0 of the Anchor Positioning polyfill, with support for inset properties, some bug fixes and some updates to match the spec. Try it out, and let me know if there's anything from keeping you from using the polyfill.
Release v0.8.0 · oddbird/css-anchor-positioning
What's Changed
🚀 BREAKING: Update self logical keywords by @jamesnw in #364
🚀 NEW: Add support for inset-* properties by @jamesnw in #366
🐛 BUGFIX: Missing anchor should be invalid and not fallbac...
github.com
November 21, 2025 at 8:14 PM
Just published v0.8.0 of the Anchor Positioning polyfill, with support for inset properties, some bug fixes and some updates to match the spec. Try it out, and let me know if there's anything from keeping you from using the polyfill.
Reposted by James Stuckey Weber
You may have missed my #CSS anchor positioning livestream with @miriam.codes and @jamessw.com earlier today, but that’s okay! The geeks at YouTube figured out some kinda magic capture thing that lets you play back live events whenever you want. Here’s ours: www.youtube.com/watch?v=qOXY...
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 20, 2025 at 7:37 PM
You may have missed my #CSS anchor positioning livestream with @miriam.codes and @jamessw.com earlier today, but that’s okay! The geeks at YouTube figured out some kinda magic capture thing that lets you play back live events whenever you want. Here’s ours: www.youtube.com/watch?v=qOXY...
I'm Winging It live with @meyerweb.com and @miriam.codes in 10 minutes to talk anchor positioning- join us with your questions!
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 20, 2025 at 5:50 PM
I'm Winging It live with @meyerweb.com and @miriam.codes in 10 minutes to talk anchor positioning- join us with your questions!
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 (@[email protected]) for the PR and being an awesome open source contributor!
Thanks to William Killer (@[email protected]) 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 (@[email protected]) for the PR and being an awesome open source contributor!
Thanks to William Killer (@[email protected]) 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.