James Stuckey Weber
@jamessw.com
📤 314
📥 130
📝 183
Web Developer and builder of tools Web Developers use.
@oddbird.dev
reposted by
James Stuckey Weber
Eric Meyer
about 14 hours ago
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...
loading . . .
Cross-browser Anchor Positioning
YouTube video by Winging It
https://www.youtube.com/watch?v=qOXY8UYSgAc
1
16
6
I'm Winging It live with
@meyerweb.com
and
@miriam.codes
in 10 minutes to talk anchor positioning- join us with your questions!
loading . . .
Cross-browser Anchor Positioning
YouTube video by Winging It
https://www.youtube.com/watch?v=qOXY8UYSgAc
about 15 hours ago
0
2
1
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!
loading . . .
Cross-browser Anchor Positioning
YouTube video by Winging It
https://www.youtube.com/watch?v=qOXY8UYSgAc
2 days ago
0
6
2
reposted by
James Stuckey Weber
Stacy Kvernmo
7 days ago
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...
loading . . .
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.
https://web.dev/articles/baseline-in-action-image-gallery
1
17
9
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.
8 days ago
0
0
0
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!
loading . . .
Cross-browser Anchor Positioning
YouTube video by Winging It
https://www.youtube.com/watch?v=qOXY8UYSgAc
9 days ago
1
13
3
reposted by
James Stuckey Weber
Nicolas Chevobbe
14 days ago
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
4
97
29
reposted by
James Stuckey Weber
Mia (online)
23 days ago
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...
2
29
4
Monday me will be unhappy, but I have a document.querySelector crashing Safari so... Have a good weekend!
27 days ago
1
7
0
reposted by
James Stuckey Weber
Stacy Kvernmo
28 days ago
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...
loading . . .
Bad UX Design Patterns
YouTube video by Winging It
https://www.youtube.com/watch?v=2RcF550Pcqc
0
4
4
reposted by
James Stuckey Weber
CSS by T. Afif
30 days ago
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 👇
add a skeleton here at some point
0
21
7
reposted by
James Stuckey Weber
Mia (online)
30 days ago
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...
loading . . .
Bad UX Design Patterns
YouTube video by Winging It
https://www.youtube.com/watch?v=2RcF550Pcqc
0
12
7
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.
loading . . .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
https://oddbird.dev/courses/anchor-positioning/
about 1 month ago
0
4
3
reposted by
James Stuckey Weber
Lea Verou, PhD
about 1 month ago
🌈 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 🤞🏼
loading . . .
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...
https://github.com/color-js/color.js/releases/tag/v0.6.0-beta.1
1
24
2
reposted by
James Stuckey Weber
Friday Front-End
about 1 month ago
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...
loading . . .
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…
https://www.youtube.com/watch?v=76hIB2L_vs4&t=1s
0
4
2
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.
loading . . .
Anchor Positioning Updates for Fall 2025
Overflowing content, browser support, and polyfill updates
https://oddbird.dev/2025/10/13/anchor-position-area-update/
about 1 month ago
0
8
3
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!
loading . . .
CSS Anchor Positioning Polyfill
https://anchor-positioning.oddbird.dev/shadow-dom
about 1 month ago
0
3
2
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.
about 2 months ago
0
4
1
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!
loading . . .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
https://oddbird.dev/courses/anchor-positioning/
about 2 months ago
0
8
3
reposted by
James Stuckey Weber
OddBird
about 2 months ago
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...
0
12
5
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.
about 2 months ago
0
2
0
reposted by
James Stuckey Weber
Mia (online)
about 2 months ago
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...
loading . . .
The Best CSS Unit Might Be a Combination
We don't have to choose between px and rem for spacing
https://www.oddbird.net/2025/09/23/type-units/
0
28
5
reposted by
James Stuckey Weber
Stacy Kvernmo
2 months ago
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
loading . . .
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:...
https://codepen.io/stacy/pen/vENWpOX
0
4
2
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.
2 months ago
0
0
0
reposted by
James Stuckey Weber
Rachel Andrew
2 months ago
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...
loading . . .
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!
https://web.dev/blog/baseline-ama
0
15
12
reposted by
James Stuckey Weber
Mia (online)
2 months ago
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...
loading . . .
Designing With Code
CSS video course waitlist signup
https://www.oddbird.net/courses/design-with-code/
0
9
4
Oh fun, Voiceover reads the `menuitem` ARIA role as mah-NEW-adum.
2 months ago
1
2
0
reposted by
James Stuckey Weber
Sara Soueidan
2 months ago
While making an update to a course chapter that includes the use of CSS-generated content in the accName computation, I noticed that support for alt text in CSS has improved since I gave a talk about CSS & a11y at CSS Day last year. So I thought it's time to do a proper, long overdue writeup!
loading . . .
CSS to speech: alternative text for CSS-generated content
— The personal website of Sara Soueidan, inclusive Web UI engineer
https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/
1
38
12
Tip: When you're using anchor positioning, consider how scrolling or screen size might make your positioned element overflow, and then add a backup with `position-try`. Get more tips by signing up for my free weekly course on anchor positioning!
loading . . .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
https://oddbird.dev/courses/anchor-positioning/
2 months ago
1
3
3
reposted by
James Stuckey Weber
Patrick Brosset
2 months ago
Curious about what we do on the WebDX community group (i.e Baseline and web-features)? We're organizing a Reddit AMA on Thursday. Ask your questions here:
www.reddit.com/r/webdev/com...
loading . . .
From the webdev community on Reddit: We are the W3C WebDX Community Group, working to improve developer experience with projects like Baseline. Ask Us Anything!
Explore this post and more from the webdev community
https://www.reddit.com/r/webdev/comments/1ncq269/we_are_the_w3c_webdx_community_group_working_to/
1
5
5
I had about 600 warbler call detections overnight, with 38 calls in just 30 seconds.
#nfc
#migration
#birds
2 months ago
0
0
0
reposted by
James Stuckey Weber
Una Kravets
2 months ago
I've been using a "follow-the-leader" pattern with CSS anchor positioning lately so I decided to write about it! You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective. Read more with demos!: 👀➡️
una.im/follow-the-a...
loading . . .
una.im | Follow-the-leader pattern with CSS anchor positioning
Learn how to create a dynamically re-anchored pointer element.
https://una.im/follow-the-anchor/
2
107
23
reposted by
James Stuckey Weber
OddBird
2 months ago
In the latest Winging It,
@miriam.codes
&
@stacykvernmo.com
chat with
#CSS
expert
@kizu.dev
about how to create reusable and flexible CSS using mixins & functions, what happened in the CSSWG meetings, and what's coming in CSS!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
loading . . .
Mixins & Functions to Streamline CSS
With special guest Roma Komarov
https://www.oddbird.net/2025/08/27/winging-it-24/
1
14
7
This was such a fun project to work on!
add a skeleton here at some point
2 months ago
0
6
0
Have you played with `anchor-size()`? It's more flexible then `anchor()` and can be used for sizing and margins in addition to the inset. It's been fun to play around with and make demos like this but I'm curious- what use cases have you found for it?
loading . . .
CSS Anchor Positioning- Anchor Size with Calc
...
https://codepen.io/jamessw/pen/OJYWorB
2 months ago
0
6
3
reposted by
James Stuckey Weber
OddBird
2 months ago
There are tools for generating responsive type in CSS, but the result is a clamp() function with mysterious numbers.
@miriam.codes
explores what those numbers do with her visualizer using
#CSS
gradients. Level up your CSS with more free demos like this in your inbox!
www.oddbird.net/oddnews/
0
5
3
Tailwind class names are too short. I would much prefer the ergonomics of "align-self_end" over guessing which part of the property name gets dropped...
3 months ago
3
2
0
reposted by
James Stuckey Weber
Stacy Kvernmo
3 months ago
We mentioned on Winging It that we might show some of our favorite browser tips. Here's one of many that I find delightful. If you are working with shape-outside, then Firefox has a great path editor. I made a quick video to show how it works.
loading . . .
1
20
7
reposted by
James Stuckey Weber
Mia (online)
3 months ago
Please stop inheriting the box-model. The supposed use-case for that is extremely out-dated, inheritance doesn't really help, and it actively makes real box-sizing use-cases more difficult! This
#CSS
best practice was never the best to begin with:
www.oddbird.net/2025/09/04/b...
loading . . .
Don't Inherit the Box Model
It's time to stop spreading this out-dated practice
https://www.oddbird.net/2025/09/04/box-model/
7
112
23
reposted by
James Stuckey Weber
Nathan Knowler
3 months ago
Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>
loading . . .
An intro to manual slot assignment – Nathan Knowler
https://knowler.dev/blog/an-intro-to-manual-slot-assignment
2
33
11
Tip 1: If you're using anchor positioning in a reusable component, add an anchor-scope to the component to help your positioned element find the right anchor. Tip 2: Sign up for my free email course on anchor positioning .
loading . . .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
https://oddbird.dev/courses/anchor-positioning/
3 months ago
0
5
4
reposted by
James Stuckey Weber
Ahmad Shadeed
3 months ago
This demo helped me visualize how `position-try` works in CSS Anchor Positioning. It was so much fun to design & build! 😄 Learn more in the article:
ishadeed.com/article/anch...
loading . . .
1
65
8
reposted by
James Stuckey Weber
Thomas Broyer
3 months ago
Not yet baseline, but part of Interop 2025 so should soon reach baseline "newly available". Now is a good time to adopt anchor positioning (with the polyfill) in place of JS calculations, and then just remove the polyfill when anchor positioning reaches your baseline threshold.
add a skeleton here at some point
0
6
1
reposted by
James Stuckey Weber
Kevin Powell
3 months ago
Almost everything I know about anchor-positioning is thanks to James' articles on it, and this email course. It's definitely worth learning (I still get excited with how easy it makes a lot of things), and this is as good a resource as you'll find on the topic.
add a skeleton here at some point
1
21
5
Anchor positioning is not yet baseline, but you can use it in production with a polyfill -
anchor-positioning.oddbird.dev
(and in fact, we're using it on
oddbird.dev
). If you're curious about anchor positioning, now is a great time to learn, and my email course will help you dive deep!
loading . . .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
https://oddbird.dev/courses/anchor-positioning/
3 months ago
1
29
13
reposted by
James Stuckey Weber
Andy Bell
3 months ago
My policy of "wait until Ahmad writes about it before you try to fully understand it" paying dividends again
ishadeed.com/article/anch...
loading . . .
The Basics of Anchor Positioning
Learn the basics of Anchor Positioning in CSS
https://ishadeed.com/article/anchor-positioning/
2
99
7
reposted by
James Stuckey Weber
Mia (online)
3 months ago
I'll be Winging It live with
@kizu.dev
&
@stacykvernmo.com
in an hour (11am MT) to talk about future
#CSS
features like mixins, functions, and masonry!
youtube.com/live/ER4APBN...
loading . . .
What's coming in CSS? Mixins, Functions, Progress, and more…
YouTube video by Winging It
https://youtube.com/live/ER4APBNgV88
0
14
7
reposted by
James Stuckey Weber
Mia (online)
3 months ago
I went down a rabbit hole trying to understand and visualize how fluid typography calculations work in
#CSS
. Here's a video and interactive codepen with the results:
www.oddbird.net/2025/08/26/t...
Adjust the values to see how they impact the rate of change, the viewport-size range, and page zoom!
loading . . .
Visualizing Responsive Typography
What do all the numbers in our clamp() do?
https://www.oddbird.net/2025/08/26/type-visual/
0
89
20
reposted by
James Stuckey Weber
Friday Front-End
3 months ago
Today's lunch video is "Cascading Layers of !mportance" - "Cascade Layers are now widely available, with the potential to fundamentally change how we think about the cascade and how we collaborate across design systems, component libraries, & third-party tools."
#CSS
www.youtube.com/watch?v=4Pkh...
loading . . .
Cascading Layers of !mportance - Miriam Suzanne | JSHeroes 2025
The Cascade is the underlying algorithm that applies our styles the web, and a main target of frustration when our styles go bad. But why is it there, how is it changing, and why should we care?…
https://www.youtube.com/watch?v=4PkhzoFLJ0Q
0
7
5
reposted by
James Stuckey Weber
Stacy Kvernmo
3 months ago
I wanted to play with some CSS trig functions and found you can calculate the width of a scrollbar in CSS when using container queries and registered custom properties. There’s so much more you can do, but here’s a little demo:
codepen.io/stacy/pen/Qw...
loading . . .
Find the scrollbar width in CSS
Combining registered custom properties, container queries and a few CSS trig functions, we are able to find and display calculated values, like the scr...
https://codepen.io/stacy/pen/QwLyZBo
0
9
5
Load more
feeds!
log in