OddBird
LightNews LightNews
banner
oddbird.dev
OddBird
@oddbird.dev
1.1K followers 26 following 64 posts
Web designers & developers - working on client web applications, open source tools, the CSS specifications, and front-end training:

- OddBird.dev
- css.OddBird.net
- youtube.com/@WingingItOddBird
Posts Replies Media Videos
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
oddbird.dev
OddNews Is. 30 -

We’re tiptoeing into spooky season 🎃 with Anchor Positioning, the best CSS Units, and Bad UX.

Read & Subscribe: www.oddbird.net/oddnews/

#css #ux
CodePen demoing Anchor Pos Containing Block Shifting
October 27, 2025 at 5:05 PM
oddbird.dev
Want to go deeper with SQLAlchemy, FastAPI Path Operations, Django REST Framework & Channels?

Check out this series of articles by Ed Rivas and various OddBirds emeritus. www.oddbird.net/tags/django/

#Django #python #backend #development
SQLAlchemy for Django Developers by Ed Rivas on Oct 23. FastAPI Path Operations for Django Developers by Ed Rivas on Oct 19.
October 6, 2025 at 5:07 PM
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
oddbird.dev
In this month's OddNews, @miriam.codes intros new options to help developers dealing with tech debt & tedious maintenance tasks. @stacykvernmo.com demos The BEST way to work with shape-outside.

Learn about Poetic #CSS, and subscribe to OddNews for a discount on consulting. www.oddbird.net/oddnews/
Poetic CSS written with Scrabble tiles
September 26, 2025 at 4:02 PM
oddbird.dev
We're excited to be starting a new series on the Winging It channel called CSS Tips & Tricks! These are short videos each focused on one specific CSS feature from @miriam.codes, @stacykvernmo.com, and @jamessw.com.

Subscribe for updates.
youtube.com/playlist?list=PL4jAKUtAhpHlOm3Lfv83ZHpfdJ4zHCDyv
YouTube playlist view showing 5 CSS Tips and Tricks videos from Stacy, Mia, and James on shape-outside, responsive type, container queries, anchor positioning, and a new stretch keyword.
September 22, 2025 at 5:40 PM
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
oddbird.dev
In the latest OddNews, @miriam.codes writes about when she tried setting browser font-size preferences, and found it broke more sites than it improved. And @jamessw.com gives an update on the new Vite default.

Read Issue 27: us19.campaign-archive.com?e=%5BUNIQID%...
A picture of a handdrawn letter A and a bit of text from a book about Format that is very zoomed in with a visible tooltip "Zoom out on this image."
July 29, 2025 at 6:01 PM
oddbird.dev
Make the Web a More Colorful Place!

Stacy @stacykvernmo.com created a tutorial for using new color spaces & formats with OddContrast.

Convert colors
See gamut boundaries
Check contrast
Share, bookmark combinations
Copy, swap colors

In OddNews
us19.campaign-archive.com?u=80219aa68d...

#ux #design
Make the Web a More Colorful Place! A guide to using new color spaces & formats with OddContrast Image of OddContrast with a dropdown menu of color spaces and formats including Hex, HSL, Lab, LCH, Oklab, Oklch, P3, sRGB
June 11, 2025 at 4:53 PM
oddbird.dev
Create performant layouts and resilient dropdowns with #CSS Anchor Positioning.

@jamessw.com has created a new course that explains how, and you can read the introduction in OddNews No. 25.

Read the course intro & subscribe to OddNews at:
us19.campaign-archive.com?u=80219aa68d...
CodePen A pink box with the text 'positioned element'. Below that a blue box with the text 'I hope no one clicks me.'
May 12, 2025 at 5:25 PM
oddbird.dev
The 3rd demo video on Container Size Queries from @miriam.codes's #CSS Layouts Workshop is out tomorrow.

Subscribe to get a notification on YT:
www.youtube.com/@wingingitod...

Sign up to get the demo in your inbox:
www.oddbird.net/oddnews/

CSS Workshop details:
www.oddbird.net/workshops/ca...
Cat sitting in a box saying, "OMG. I have so many Questions for this damn Box."
April 16, 2025 at 4:54 PM
oddbird.dev
Thanks to everyone who's sent questions about @miriam.codes's #CSS Layouts workshop!

- Whether or not you attend live, a recording will be available immediately after the workshop for all registrants

- Each of 3 days will be 2.5hrs with 2 sessions and dedicate Q&A

www.oddbird.net/workshops/ca...
A cat sits in a box with a question mark on it.
April 11, 2025 at 9:22 PM
oddbird.dev
Author-defined Functions are coming to #CSS, and you can start to experiment with them now!

@miriam.codes explains how to do it in OddNews No. 21.

Subscribe for monthly articles like this:
us19.campaign-archive.com?u=80219aa68d...
🗞️ Miriam’s W3C Report Custom CSS Functions in the Browser by Miriam Suzanne on March 13, 2025 There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium ‘Canary’ (v136+) browsers with the experimental platform features flag enabled. Author-defined Functions are coming to CSS, and you can start to experiment with them now! Back in 2009 I was using Natalie Downe’s responsive layout technique. This was before media queries, or Responsive Web Design(TM), or calc(), or modern layout methods like flexbox and grid. The process involved a lot of math. It wasn’t complicated math – a single division problem – but it was repeated for every element in the layout. At its simplest (not accounting for gutters), if we want to span 3 out of 10 columns using percentages, we need to divide those numbers and multiply by 100%. Tired of doing that over and over, then copy-pasting the results into my CSS, I installed Sass. Soon, we'll be able to solve these problems directly in CSS, without any third-party tools or preprocessing. Writing our own functions will allow us to take some repetitive bit of logic, give it a meaningful name, and reuse it anywhere we need. The simplest possible CSS function is something like this: /* define the function */ @function --always-blue() { result: blue; }
March 18, 2025 at 9:44 PM
oddbird.dev
OddNews is our monthly email with the latest in front-end web development and UX design.

Feb issue is out:
- @jamessw.com explores ways to track down why an anchor isn’t found
- @miriam.codes reimagines fluid typography

Read & Subscribe: oddbird.net/oddnews
#CSS #UX #front-end
OddNews Best practice is a conversation… February 13, 2025 | 3 min read Here’s a bit of what’s going on in our neck of the woods: - Join a live conversation about debugging CSS Anchor Positioning with the Birds and guest, Tab Atkins-Bittner. - James explores ways to track down why an anchor isn’t found. - Miriam reimagines fluid typography and reports on the CSS Working Group progress for custom functions and more. - Support bird conservation work. - It’s our goal to build good things on the web for people. We’re here whenever you need us. Share with a friend 🎙️ Upcoming Winging It LIVE
February 18, 2025 at 6:28 PM
oddbird.dev
OddNews is our monthly email with the latest in front-end web development and UX design.

Next issue out Thu:
- Special guest announced for Winging It LIVE
- Who won the CSS IS AWESOME Game?
- @miriam.codes's next steps for CSS functions & mixins

Subscribe: oddbird.net/oddnews
#CSS #UX #front-end
OddNews Because best practice is a conversation… Hi, OddFriends! This is the newsletter for designers & developers who want the latest news in front-end web development – articles, videos, updates, and workshops on topics from CSS, HTML, and JavaScript to UX design and team process.
January 14, 2025 at 7:42 PM
oddbird.dev
OddNews Issue #18 has arrived!

In this issue:
- Winging It LIVE: CSS IS AWESOME Game Show
- Sass indented syntax improvements
- Anchor positioning is disruptive
- A songbird without a song

Featuring @stacykvernmo.com @miriam.codes @jamessw.com

us19.campaign-archive.com?e=%5BUNIQID%...
from Miriam Suzanne I’ve spent much of my time traveling and teaching workshops – let me know if your team or company is interested – but things are still moving in the CSS Working Group as well. The W3C Technical Architecture Group weighed in on the Masonry layout syntax, but that conversation is still deadlocked. Meanwhile, there have been a number of breakouts to discuss better customization and styling of form inputs, and Robert Flack’s proposal for improving overflow controls – which will be part of CSS Overflow level 5. Chromium engineers are working on a scroll-state(scrollable) container query for styling boxes that have scrollable overflow. And, in case you haven’t seen it, CSS has a new logo – officially endorsed by the CSS Working Group this week. How to Support Anchor Positioning At OddBird, we love contributing to the languages & tools developers rely on. We’re currently working on polyfills for new Popover & Anchor Positioning functionality. There are two ways to help us keep this work sustainable and centered on your needs as a developer! Sponsor us. We display sponsor logos and avatars on our website. Hire us to develop the Anchor Positioning polyfill or a language/tool you rely on. Bird of the Month...
December 17, 2024 at 11:47 PM
oddbird.dev
OddNews Is #17 is out!

This issue:
- Event: Baseline & Web Features
- Most desired #CSS feature you can’t use yet
- What do survey demographics tell us?
- Air-speed velocity of an unladen swallow

With @miriam.codes @jamessw.com @jgerigmeyer.bsky.social

us19.campaign-archive.com?u=80219aa68d...
OddNews Best practice is a conversation… November 14, 2024 | 2 min read This month: - Winging It LIVE: Baseline & Web Features - The most desired CSS feature you can’t use yet - What do survey demographics tell us? - New Awesome CSS Anchor Positioning Repo - How to Support Anchor Positioning - What is the air-speed velocity of an unladen swallow? Share with a friend 🎙️ Upcoming Winging It LIVE Baseline & Web Features: Rabbit Trails, Edge Cases, Insights
November 15, 2024 at 7:22 PM