Front-end developer @ OddBird since
James (he/him) is a front-end developer focused on user-friendly solutions for complex problems.
James is an experienced front-end developer and tech lead.
He is passionate about developer experience and its impact on the end result. His expertise lies in simplifying big data and crafting mobile and web apps that enhance user experiences. Many of James’ side projects relate to his hobbies as a homebrewer and birder.
Color contrast checker with Oklch, Oklab, P3, and more
OddContrast is a color format converter, featuring newer color formats like Oklch, Oklab, and the Display P3 color space. It’s also a color contrast checker to help designers meet WCAG 2 accessibility standards.
Popover, CSS Anchor Positioning, Cascade Layers
Along with our work for the W3C developing specifications for the CSS language, OddBird has started and maintains a number of powerful polyfills for new web platform features including the Popover attribute, CSS Anchor Positioning, and Cascade Layers.
Automated style guides
Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool that helps create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps you keep your development process simple – and your UX consistent – as you scale over time.
Customizable web presentations
Design-token management in Sass
Are you positioning a popover with CSS anchor positioning and position-area? Make sure to override the default margins on the popover.
With special guest Kilian Valkhof
Kilian Valkhof, Miriam Suzanne, and James Stuckey Weber talk about developer tools including the Polypane browser and other accessibility tools.
A guide to using new color spaces & formats with OddContrast
OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.
How to use it, and is it ready to use?
hint popovers, position-area and more
We have been busy updating the Popover and CSS Anchor Positioning Polyfills, but there is still more we can do with your help.
With special guest Luke Warlow
Learn how to declaratively add behavior to buttons with the Invoker Commands API. Join James Stuckey Weber and Miriam Suzanne for a live conversation with special guest Luke Warlow, Web Platform Engineer at Igalia.
Display color gamut ranges and more
OddContrast, OddBird’s color format converter and contrast checker, gets new features – including the ability to swap background and foreground colors, and display color gamut ranges on the color sliders. Contrast ratios now incorporate foreground color alpha values.
CSS anchor positioning simplifies popovers and dropdowns, and also unlocks new creative possibilities. James joined Jason to teach and explore anchor positioning in live code.
It’s not just a shorthand for anchor()
position-area might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.
With special guest Tab Atkins-Bittner
It is frustrating to track down why an anchor isn’t being found. James and Miriam talk with Tab Atkins-Bittner about ways to troubleshoot CSS Anchor Positioning issues, and dive into the details to get a better understanding of how Anchor Positioning works.
How to find an anchor element
It is frustrating to track down why an anchor isn’t being found. I’ve found a simple way that should work in most cases. If that doesn’t work, step through the checklist, and then dive in to get a better understanding of how Anchor Positioning works.
Bringing SCSS flexibility to .sass files
The Sass indented format is getting more flexible with the ability to have multiline statements, semicolons, and more.
What happens when you set out to categorize every API and property of the web? OddBird has been documenting CSS for the Web Features project. Join us as we explore some fascinating rabbit trails, edge cases, and insights into the web platform that we’ve encountered along the way.
New layouts will be possible
The more I play with it, the more convinced I am that anchor positioning is going to unlock some surprising new layouts.
Performance, scope, and fallbacks for the anchor positioning polyfill
Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.
With special guest Zach Leatherman
Web Components are a polarizing feature that seem simultaneously old news and not quite ready for production yet. But we’ve been making things with Web Components, and finding some areas where they really work well. Join us, along with special guest Zach Leatherman of 11ty, to hear more about how…
A quick guide to adopting the modern Sass API
Sass compilation can be a speed bottleneck in your build, but it doesn’t have to be anymore.
Catching up to the spec
Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.
Miriam Suzanne, Stacy Kvernmo, and James Stuckey Weber demo how to use new color formats with OddContrast, a color tool for previewing, accessibility testing, and selecting the format/space.
What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join James Stuckey Weber and Miriam Suzanne as they talk through these questions and answer yours in our monthly live stream.
For simple interactive sites, using a proxy to manage your state and side effects may be enough.
API changes can be a headache in the frontend, but some initial setup can help you develop and adapt to API changes as they come. In this article, we look at one method of using OpenAPI to generate a typesafe and up-to-date frontend API client.
Join us for a dynamic exploration of FastAPI, a modern Python framework for API development.
pkg: URLsA quick guide to using the new Node.js package importer
Enabling pkg: URLs is quick and straightforward, and simplifies using packages from the node_modules folder.
You may not need anything more
When adding interactivity to a web app, it can be tempting to reach for a framework to manage state. But sometimes, all you need is a Proxy.
An object map is a place to document information about objects in your digital system, keeping everyone involved on the same page. During our conversation, we walk through examples and discuss the benefits of using object maps.
During our conversation we look at 3 examples of unintuitive web design, and learn how to create websites and apps that are more intuitive using object-oriented user experience (OOUX) design strategies.
A new proposal for importing from NPM packages in Sass
UI libraries like Vuetify and Bootstrap make it easy to extend their themes by providing Sass source files with their NPM packages. Now, Sass is requesting feedback on a simpler way to import those libraries into your Sass styles with e.g. @use "pkg:bootstrap".