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.
Integrated design-system management in Sass
OddBird’s Accoutrement tools help keep design tokens meaningful to both humans and machines – opening the door for automation, while improving readability. These tools also integrate with Herman, our automated pattern-library generator.
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.
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".