Anchor Positioning Is Disruptive
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.
Article
post type
2024 Articles
Article post typeUpdates to the Most Desired CSS Feature You Can’t Use Yet
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.
Article post typeWhat do survey demographics tell us?
Are we measuring what we meant to measure?
There’s been a lot of interest in the results of the annual State of CSS survey, but are we asking all the right questions?
Article post typeChoosing a Masonry Syntax in CSS
What makes something a ‘grid’, and what’s at stake?
Back in 2020, Firefox released a prototype for doing ‘masonry’ layout in CSS. Now all the browsers are eager to ship something, but there’s a hot debate about the best syntax to use.
Article post typeSpeeding Up Your Sass Compilation in Vite and Webpack
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.
Article post typePartial Feature Queries, Relaxed Layout Containment, and More
CSS Working Group updates from July
Over the last month, the CSS Working Group has determined we can loosen containment restrictions for query containers, and agreed on a syntax for special-case support queries (like support for the gap property in a flex context, or support for align-content in a block flow context).
Article post typeCSS Working Group Updates for June & July
What I’ve been working on as an Invited Expert
The CSS Working Group has regular face-to-face meetings (hybrid online/in-person) throughout the year, and they always result in a flurry of activity! Here’s a rundown of some highlights from the last few months, with a focus on the features I maintain.
Article post typeZoom, zoom, and zoom
The three types of browser (and CSS!) magnification
I’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I shoul…
Article post typeUpdates to the Anchor Positioning Polyfill
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.
Article post typeLearn Grid Now, Container Queries Can Wait
Take your time with new CSS, but don’t sleep on the essentials
Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.
Article post typeCan you un-mix a mixin?
Rethinking the CSS mixin proposal after CSS Day
The CSS Working Group has agreed to move forward with CSS-native mixins. But some recent mixin-like CSS tricks have an advantage that the official proposal doesn’t account for: they make it easy to remove a mixin after it’s already been mixed in.
Article post typeGenerating Frontend API Clients from OpenAPI
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.
Article post typeSetting up Sass
pkg:URLsA quick guide to using the new Node.js package importer
Enabling
pkg:URLs is quick and straightforward, and simplifies using packages from thenode_modulesfolder.
Article post typeTesting FastAPI Applications
We explore the useful testing capabilities provided by FastAPI and pytest, and how to leverage them to produce a complete and reliable test suite for your application.
Article post typeProxy Is What’s in Store
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.
2023
Article post typeHTML Web Components are Just JavaScript?
I’m still getting used to this
There’s been a recent flurry of articles about web components, with advice on how to shape them as extensions of HTML. I decided to dig in, and see how these ‘HTML web components’ could become a part of my own workflow. Despite a few rough edges, I’m excited to see…
-
see all Article posts
Article post typeHow to Design More Intuitive Websites & Apps
Do you want to make your website or web app more intuitive for the people who visit? If so, I’d like to introduce you to the world of Object-Oriented UX. As a UX designer at OddBird, using OOUX strategies to identify and avoid unintuitive objects has been key to our design process. A warning, though, before you continue: once you start seeing unintuitive objects, you won’t be able to unsee them!
Article post typeWhen to Choose a Progressive Web App
Part 3 – Responsive Web App vs Native Mobile App vs Progressive Web App
If you’re weighing the performance optimization and device integration opportunities of a native mobile app against the broad reach and lower cost of a responsive web app – and can’t decide which is a higher priority for your digital product – don’t despair. A progressive web app may be just…
Article post typeSQLAlchemy for Django Developers
SQLAlchemy is a Python library for interacting with relational databases. It is a popular alternative to Django’s ORM used by frameworks such as FastAPI. In this article we will help curious Django developers write their first queries with SQLAlchemy, and highlight key differences.
Article post typeFastAPI Path Operations for Django Developers
FastAPI path operations are the equivalent of Django views. In this article we explore the differences, advantages, and gotchas of using them from the perspective of a Django developer.
Article post typeWhen to Choose a Native Mobile App
Part 2 – Responsive Web App vs Native Mobile App vs Progressive Web App
If you have an idea for a digital product, you may be wondering if you should build a responsive web app, a native mobile app, or a progressive web app. Is one option inherently better? What are the pros and cons? This is part 2 of a three-part series unpacking…
Article post typeWhen to Choose a Responsive Web App
Part 1 – Responsive Web App vs Native Mobile App vs Progressive Web App
The decision of what platform to use to build your app is quite important – affecting project scope, timeline, and budget. But understanding the differences between a responsive web app, a native mobile app, and a progressive web app – and deciding which one is right for your project …
Article post typeCan We Query the Root Container?
The complexities of containment, overflow, and ‘propagation’
I spoke about Container Queries at both Smashing Conference (San Francisco) and CSS Day (Amsterdam) – where I recommended setting up a root container to replace most media queries. Since then, Temani Afif pointed out a few issues with that approach, and sent me down a rabbit hole of overlapping…
Article post typeUsing Web Platform Tests to Write and Test Polyfills
Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.
Article post typePython Web Conference 2023 Recap
OddBird sponsored Python Web Conference 2023 and sent me to attend. In this article I showcase my favorite talks and activities from this excellent online event, including a list of useful resources for web application security, introductions to new PaaS providers, and a comparison of the most popular Python web…
2022
Article post typeRunning Playwright Inside Docker Containers
Learn how to run Playwright in headed mode to interact with the browser’s user interface from outside Docker containers.
Article post typeWhen Our Tools Hold Us Back
What happens if the ‘pace layers’ get out of sync?
“Ask not just: How well does it work? But also: How well does it fail? What happens when something goes wrong?” —Jeremy Keith
-
see all Article posts
Article post typeUse the Right Container Query Syntax
Size queries are stable, and shipping in browsers
Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!
Article post typeNot All Zeros are Equal
And every ‘best practice’ comes with caveats
There’s a well-established ‘best practice’ that CSS authors (as well as linters and minifiers) should remove units from any
0value. It’s a fine rule in most cases, but there are a few common situations where it will break your code.
Article post typeEvery Transition is a Page Transition?
Experimenting with the shared element transitions API
There’s a new web API proposal for transitioning shared-elements across pages. It’s great for making smooth page transitions, but what if we apply it to individual elements with changing styles on a single page?
Article post typeCascade Layers – There’s a Polyfill for That!
Cascade layers are an exciting new addition to the CSS specification. A newly released polyfill now provides even greater browser support for the feature.
Article post typeWhat’s the impact of aiming for 100% test coverage?
100% test coverage is a contentious metric! In this piece, Olu explores the impact of pursuing it.
Article post typeReplace Dependabot With a Single Dependency Upgrade Pull Request
Keeping your project dependencies up to date can become an unwieldy task when Dependabot opens a dozen pull requests every week. We present an alternative approach that uses only one scheduled pull request for all upgrades.
2021
Article post typeSupport (Not) Unknown
Adding Container Query tests to CSS
@supportWorking on a new CSS feature like Container Queries, one of the most important considerations is to ensure a “migration path” – a way for developers to start integrating the new code, without breaking their sites on legacy browsers. That looks different depending on the feature, but can often include…
Article post typeContainer Queries: a Quick Start Guide
Now is the time to begin experimenting with a long requested layout tool.
The
@containerquery, that elusive feature developers have been requesting and proposing for years, has finally made its debut in a browser. Well, sort of. Here we’ll explain what container queries are, how they work, and what other features they might come with once fully supported in browsers.
2020
-
see all Article posts
Article post type
W3C Invited Expert on the CSS Working Group
Helping define the future of styles on the web
I’ve joined the CSS Working Group as a W3C Invited Expert to help to develop the next level of Cascading & Inheritance, in addition to other CSS standards. I’m also currently active in the CSS4 and Design Token Community Groups.
2019
Article post typeSass Modules, a Primer
Getting started with
@useand@forwardDart Sass (the primary Sass implementation) released version
1.23.0last night with a major new feature: modules. This is a common feature in many languages – but for those of us who primarily write CSS, it can be a big mental shift. Let’s take a look at the basics.-
see all Article posts
Article post typeDiversity. Inclusion. Tech.
Refactr.tech 2019 aims to solve tech’s diversity problem
As we readied our seats for the first ever Refactr.tech Conference, I pondered the question: What would a technical conference look like if its organizers were intentional about inclusiveness but still centered on tech?
Article post typeThe Scary & the Inspiring
8 CSS & UX things I learned at GenerateConf 2019
As my first foray into the world of web design conferences, GenerateConf 2019 in New York did not disappoint. From human-centered AI to Object Oriented UX to the wonder of CSS Grid, here’s what I found interesting.
Article post typeSmashing CSS Follow-Up Q&A
Questions about Dynamic CSS
I had the pleasure of presenting both a talk and workshop at Smashing Conf in San Francisco this year. During the talk, people left questions in a collaborative doc, so I’m here to provide the answers!
Article post typeVueFinder at VueConf, 2019
Dynamic CSS with Vue
Inspired by VueConf 2018 I spent some time learning JS and Vue in more depth, and built myself a more flexible VueFinder presentation tool to fit my needs. This year, I returned to VueConf and gave the closing talk on passing data between CSS and Vue.
2018
-
see all Article posts
Article post typeDjango REST Framework & Channels
We’ve begun exploring some patterns for how to add WebSocket push notifications to what is otherwise a RESTful API. This means, for us, using Django REST Framework and Django Channels in concert.
Article post typeBeyond Tellerand
Grid Systems & Vue Invaders!
I love when conferences give me the opportunity to travel around the world. I love it even more when conferences go beyond the web to find inspiration from other fields. Beyond Tellerand (Düsseldorf, Germany) was the best possible combination.
Article post typeVueConf US
Agile design systems in Vue
I’ve been excited about Vue.js since Sarah Drasner first showed me the basics. Since then, we’ve started using it for client work at OddBird, and I’m constantly impressed by the power and simplicity – so it was a real honor being invited to speak at the first VueConf US in…
Article post typeHerman Style Guides
An agile approach to design systems on a budget
Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool to create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps keep our development flow simple, and our UX consistent…
2017
Article post typeMedia Queries & Grid Settings
Practical media helpers for Susy3
Most grids change with the viewport – and Susy needs new settings at each breakpoint. Susy3 is designed without mixins for complete flexibility from project to project, but it can be useful to build additional tools and shortcuts as you go. Here are some snippets to help you get started…
-
see all Article posts
Article post typeWelcome to Susy3!
Make grid systems your fallback plan
We’re excited to introduce Susy 3.0, a major update to our popular grid-math calculator – now more focused and flexible than ever. Susy was designed to make layout math easy, without forcing you into generic patterns and ugly markup. But grid systems are on the way out, replaced by real CSS layout specs that live in the browser. With Susy3, we want to help make that a smooth transition.
Article post typeUnderstanding ‘Spread’ in Susy3
Susy 3.0 will be released in the next week, if all goes well, and there’s a lot to write about it. I wanted to start with a detailed overview of one core concept: spread.
Article post typeEvent: Live Q&A with OddBird
Are you a startup founder looking to develop a new web app, or a company interested in expanding your web services? Here’s your chance to ask all those questions that keep you up at night.
-
see all Article posts
Article post typeDjango, Background Processes, and Keeping Users in the Loop
When you have out-of-band processing in a web app, how do you let users know that the status of a task has changed? Depending on your front-end client, there are a few different approaches you might take.
Article post typeThree Names to Include in Your User Model
(None of them is the username)
The term “username” is ambiguous. When designing a user model there are several kinds of names that are useful to include.
Article post typeMaking Function Calls Across Sass Versions
You don’t need safe-get-function utilities
The Sass 3.5 Release Candidate includes support for first-class functions. What are they, how do we use them, and what tools can we use to future-proof our Sass toolkits in advance?
Article post typeBlocking Analytics Spam
Google Analytics is great for gathering data on who uses your web application, but becomes worthless if spam sessions start infesting your data. Here’s how we’ve tried to combat the problem for oddbird.net.
-
see all Article posts
Article post typeSerializing Things for Celery
Transmitting objects between web processes and worker processes is a requirement of many modern web apps. Given that the safest way to do so is to use a serialization format that only includes primitive data types, how can we send custom objects around?
Article post typeCode Patterns & Style Guides
Living Style Guide documentation on the web is a difficult problem, gaining a lot of attention in the last few years. Let’s take an in-depth look at one way to store patterns directly in Sass, and generate documentation automatically.
Article post typeGet Started with Design
Four useful tools & tutorials
So you’d like to start learning design, but the number of tools and tutorials available is overwhelming. Where do you start? I recommend Paper for sketching out UX ideas, Practical Color Theory for Coders to generate color palettes and learn color theory, Choosing the Right Font: A Practical Guide to…
Article post typeColor Theory for Coders
from Natalya Shelburne
If you write code and you want to delve into design, Natalya Shelburne’s Practical Color Theory for Coders will get you up and running with a beautiful, cohesive, and accessible color palette using Sass color functions, and teach you why her palettes work so well, all at the same time.
Article post typeTips and Tools We Love
We wanted to show some love to a few great tools we use to get us through our work days. Do you have any to add to our list?
Article post typeGenerating Code Documentation for Polyglot Projects
Code documentation is ideally written as close to the actual code as possible, but compiled into a comprehensive set of documentation that includes code from all languages in use. Here’s how we intend to do that.
Article post typeServer-Side Rendering For Client-Side Apps
We want the convenience of a client-side single-page application using our MV* framework of choice, but don’t want to sacrifice the SEO and UX benefits of rendering the initial markup on the server. And while we’re not here to trash on Node.js, we’re also not ready to commit to an…
Article post typeCSSDay 2016 Recap
CSSDay was held in sunny Arizona on December 3, 2016. The conference is geared towards front-end developers who want to dive deeper into advanced CSS topics.
Article post typeBirds Recommend: Performant Parallaxing with CSS 3D
If you’d like to learn how to create parallax scrolling for your website, Paul Lewis’ guide to performant parallaxing is the perfect place to start.
Article post typeWe Are Not Neutral: 2016 in Review
OddBird is a small company – a shared vision and brand that transforms seven remote contractors into a Web Software Agency. 2016 was a year of big changes for us, individually and as a company. We can’t distance ourselves from the world we work in, or the lives of…
Article post typeDesigning Using Data
Ongoing education in our industry is a must. Attending conferences is a great way to learn and network with other industry professionals. Unfortunately, not everyone is able to attend conferences, but have no fear! Many of the best conferences post videos online, giving our community an easy way to learn…
-
see all Article posts
Article post typeHow to Choose Beautiful & Accessible Brand Colors for Your Website
How do you select a set of colors that express the attitude of your brand, look great together, and pass WCAG accessibility standards? How many colors is too many? This step-by-step guide outlines OddBird’s process for tackling these challenges.
It’s important to define your brand goals first and review them throughout the process. Next, do some research for inspiration. What colors are the other companies in your field using? Use Paletton to generate a cohesive color palette. Test color contrast to ensure accessibility. Finally, create prototypes to make sure you colors work well in context.
Article post typeHow to Choose Engaging & Accessible Typography for Your Website Brand
How do you choose the best fonts for a brand identity among the thousands of options available on the interwebs these days? Whether you’re starting from scratch or rebranding like us, this step-by-step guide can help focus and direct your process. First, define your brand goals. Next, explore your options…
Article post typeA Rebase-Centric Model of Collaborative Git Use
If you want to make sense of your git history more easily when you go back, try rebasing as you go. Rebasing while collaborating with others can get hairy quickly. But here’s one way to make it work.
Article post typeWhat’s Old is New: Drop Caps in CSS
Using an emphasized initial letter is a technique that has been used for centuries. Let’s dive in to see some ways you can apply it to your project to help guide your reader with visual hierarchy.
2016
Article post typeA Visit to the RESTful SPA
You can’t always get away with a single-page app; sometimes you need server-side rendering. When you need both, here’s one approach.
Article post typeBehind the Scenes: OddSite Brand Process
What follows is an in-depth look at our brand design process thus far as we work towards a new look and feel for this, our OddSite. Details. Confessions. What worked. What flopped. And why.
Article post typeAuditioning GitHub Projects
With the release of kanban-style project boards, we decided to move our open design process over to GitHub and give it a try.
Article post typeCSSConf 2016 Recap
It was a pleasure speaking at CSSConf 2016 in Boston! Here are some of my notes from the event – covering everything from creativity and the Bauhaus movement to SVG 2 internals, React styles, CSS grid layouts, and custom properties (e.g. CSS-native variables). I included links to slides and video…
Article post typeWill CSS Grid Layout Enable Creative Design?
CSS Grid Layout is shaping up to be the layout tool we’ve always wanted on the web. How can we use it to start creating interesting layouts?
Article post typeDefining Goals, Exploring Possibilities
OddBird met for a work retreat in April. On the Oddgenda: grow the company, and redesign OddSite. I came home from retreat tasked with reviewing OddBird’s eb presence, and proposing ways to improve communication about our process and services in order to attract new clients.
Article post typeOpen Design for OddBird.net
We’re re-building our website in the open, and writing about our process along the way. We hope you’ll follow along and even get involved!
Article post typeClarity Conference
It was an honor to be part of the first ever Clarity Conference in San Francisco – a beautiful event organized by Jina, and completely focused on Style Guides.
-
see all Article posts
Article post typeJump Start Sass
Get up to speed with Sass in a weekend…
Using Sass, you can write your stylesheets in a more concise, dynamic, and readable way, and cut down many of the repetitive tasks that come with writing vanilla CSS. This book provides a thorough introduction to Sass for the beginner.
2014
Article post typeSassConf 2014
SassConf is right around the corner, and Claudina has been working hard to make it happen!
Article post typePython for Ada
Donate to the Ada Initiative today to support women in open technology and culture. If we hit $10000 by Friday, Jacob and Alex and Jim and Carl will match your donations!
Article post typejQuery Chicago 2014
Five practical JavaScript coding takeaways from jQuery Conference Chicago 2014.
-
see all Article posts
Article post typePostgreSQL Transactions and SQLAlchemy
SQLAlchemy defaults to implicitly opening a new transaction on your first database query. If you prefer to start your transactions explicitly instead, I’ve documented here my explorations in getting that to work.
2013
Article post type2013 Wrap-up
A brief review of 2013: OddBird, year six.
Article post typeSusy Next, Alpha 5
Susy Next alpha 5 is out, and loaded with changes. We now require Sass 3.3, we no longer require Compass, and there have been major syntax improvements. We’re getting real close to launch, and we’d love to know what you think. Play around, and let us know!
Article post typeMap-Set vs. Map-Merge
The difference between map-set and map-merge? Almost nothing.
Susy Next, Alpha 4
Susy Next alpha 4 is now available.
Susy Next, The Second Alpha
Go download & play with it!
We haven’t written full docs yet, and this blog post will be vastly incomplete, but I’ll give you a quick rundown of where we’re going. This is all open to change, of course. There’s a reason we’re still in alpha.
Isolation and Bleed in Susy
A few new features have landed in Susy 1.0.7, even as we work on more integrated syntaxes for 2.0. The
isolate()andisolate-grid()mixins help you manage the worst effects of sub-pixel rounding, whilebleed()helps you break items out of the box.Susy Next, The First Alpha
Last night we released the very first alpha build of Susy Next. This release is extremely sparse. What we have built is a background ‘engine’ for calculating grid math. There are some rough first steps towards api and syntax, but they are more “proof of concept” experimentation than usable interface.
-
see all Article posts
Article post type
Sass Layout in 2013 and the Future of Susy
The web is littered with grid systems and ‘frameworks’ that force your code & design into narrowly defined patterns. Even the most semantic of us have had to push specialized techniques in order to create a usable syntax.
But Sass has come a long way, and I’m convinced that it’s time for something new.
What if you had a layout system that bends completely to the needs of your site? What if you could use one unified syntax for handling responsive layouts of any kind? What if you had a modular system that let you mix-and-match to customize for every site, and change your output with simple extensions?
2012
Off-Canvas Layout with Susy
The off-canvas layout pattern for responsive web design has been getting all the attention lately, and I’ve had several people ask how Susy One might play along. I’ll show you how easy it is, and how much flexibility Susy can add along the way.
-
see all Article posts
Article post type Sass Striped Backgrounds
Jina asked twitter for Sass advice the other day. She was working on a bit of code to create a rainbow-striped background gradient using any set of arbitrary colors. This is my solution, in the form of a Sass function. This requires Sass 3.2 in order to run.
