Jonny Gerig Meyer
LightNews LightNews
jgerigmeyer.bsky.social
Jonny Gerig Meyer
@jgerigmeyer.bsky.social
43 followers 43 following 3 posts
Co-Founder, Web Software Architect + Engineer @OddBird.dev
Posts Replies Media Videos
Reposted by Jonny Gerig Meyer
stacykvernmo.com
The CSS is Awesome Game is coming up on Winging It and our first special guest joining @miriam.codes and me is @chriscoyier.net

Join us Thursday, December 18 at 1:00PM ET:
www.youtube.com/live/xcEnjGP...

We'd love your help by filling out our 5-question CSS survey! tally.so/r/QKoaEY
CSS Is Awesome Game - 2
A few of our CSS friends will join us for our second annual "CSS Is Awesome Game" on Thursday, December 18, 2025 at 1pm Eastern. If you love CSS as much as we do, then we hope you will watch and play ...
www.youtube.com
December 4, 2025 at 6:53 PM
Reposted by Jonny Gerig Meyer
miriam.codes
When I resize the browser, I'm managing space. When I zoom in, I'm trying to re-size text. Those are very different goals, but look identical in CSS.

Using vw or at-media: bigger px == fewer px. If we mess with font-size for one, it applies to both:

codepen.io/miriamsuzann...
Zoom & the browser window
...
codepen.io
December 3, 2025 at 9:51 PM
Reposted by Jonny Gerig Meyer
stacykvernmo.com
The CSS is Awesome Game on Winging It is coming up soon and we would love your help. We made a 5-question CSS-based survey if you have a minute to spare. We are excited to include more audience participation this year.

tally.so/r/QKoaEY
CSS is Awesome Game
Made with Tally, the simplest way to create forms.
tally.so
December 1, 2025 at 6:43 PM
Reposted by Jonny Gerig Meyer
oddbird.dev
If you missed it live, you can watch @jamessw.com & @miriam.codes's chat with @meyerweb.com about Anchor Positioning now on the Winging It show.

Includes:
-Rough edges
-Emerging patterns
-Will Anchor Positioning be baseline?
-What's next for Anchor Positioning?

www.oddbird.net/2025/11/20/w...
#css
Cross-Browser Anchor Positioning
Anchor Positioning is available in all browsers. What's next, with Eric Meyer.
www.oddbird.net
November 26, 2025 at 8:50 PM
Reposted by Jonny Gerig Meyer
jamessw.com
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 &lt;dialog&gt; and popover web features.
web.dev
November 25, 2025 at 4:53 PM
Reposted by Jonny Gerig Meyer
miriam.codes
I'll be Winging It Live with @meyerweb.com and @jamessw.com tomorrow, to talk about anchor positioning – which is now behind a flag in Firefox, and live everywhere else. Join us, and bring your questions!

1pm ET / 10am PT

www.youtube.com/watch?v=qOXY...
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 19, 2025 at 5:36 PM
Reposted by Jonny Gerig Meyer
oddbird.dev
OddNews Is. 31 |

- CSS video course update from @miriam.codes
- Anchor Positioning is available across browsers. Now what?! from @jamessw.com
- Wrangling complex navigation design patterns from @sondrae.bsky.social and @stacykvernmo.com

Read archive:
mailchi.mp/oddbird/cros...
The word update typed on page sticking out of a typewriter.
November 17, 2025 at 6:02 PM
Reposted by Jonny Gerig Meyer
stacykvernmo.com
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
Reposted by Jonny Gerig Meyer
jamessw.com
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!
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 11, 2025 at 9:51 PM
Reposted by Jonny Gerig Meyer
oddbird.dev
Winging It E25
@stacykvernmo.com, @sondrae.bsky.social and @clayton.social.coop.ap.brid.gy debate thorny #UX design questions in costume. www.oddbird.net/2025/10/23/w...

- Complex navigation
- Ever a case for infinite scroll?
- Pagination or load more button?
- Click to open or hover?
- Truncatio…
Sondra E, Stacy, and Clayton Dewey wear Halloween costumes and laugh.
November 7, 2025 at 4:52 PM
Reposted by Jonny Gerig Meyer
stacykvernmo.com
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...
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 24, 2025 at 6:16 PM
Reposted by Jonny Gerig Meyer
jamessw.com
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
Reposted by Jonny Gerig Meyer
oddbird.dev
The next Winging It show is all about bad UX design patterns. @claytondewey.bsky.social from Dev Collaborative will be joining @sondrae.bsky.social and @stacykvernmo.com.

Join us live and bring your questions!
Save the date: Thu, Oct 23

www.youtube.com/watch?v=2RcF...
#ux #design
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 17, 2025 at 10:46 PM
Reposted by Jonny Gerig Meyer
miriam.codes
Had a smashing time at @smashingconf.com last week, meeting people & nerding about #CSS value resolution.

Now back to the video course. Aiming to launch a first module in Jan/Feb!

From grids/alignment to guaranteed invalid values – sign up for updates & discounts:

oddbird.dev/courses/desi...
Designing With Code
CSS video course waitlist signup
oddbird.dev
October 15, 2025 at 6:15 PM
Reposted by Jonny Gerig Meyer
jamessw.com
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
Reposted by Jonny Gerig Meyer
jamessw.com
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!
CSS Anchor Positioning Polyfill
anchor-positioning.oddbird.dev
October 7, 2025 at 4:44 PM
Reposted by Jonny Gerig Meyer
jamessw.com
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
Reposted by Jonny Gerig Meyer
oddbird.dev
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...
winging it htmx
September 29, 2025 at 5:15 PM
Reposted by Jonny Gerig Meyer
miriam.codes
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...
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
Reposted by Jonny Gerig Meyer
jamessw.com
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!
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
September 16, 2025 at 5:21 PM
Reposted by Jonny Gerig Meyer
oddbird.dev
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!
Mixins & Functions to Streamline CSS
With special guest Roma Komarov
www.oddbird.net
September 11, 2025 at 6:53 PM
Reposted by Jonny Gerig Meyer
rachelandrew.bsky.social
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
A refresh of Learn CSS with nine new modules  |  Blog  |  web.dev
Our popular Learn CSS course has been updated with new modules covering the latest CSS features.
web.dev
September 9, 2025 at 8:10 PM
Reposted by Jonny Gerig Meyer
jamessw.com
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?
CSS Anchor Positioning- Anchor Size with Calc
...
codepen.io
September 9, 2025 at 3:42 PM
Reposted by Jonny Gerig Meyer
oddbird.dev
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/
Screenshot of the CodePen visualization with options to adjust the font size, resize the viewport, and zoom page. The letter A as an example at a font-size of 100vw.
September 8, 2025 at 6:17 PM