Skip to main

Tag: Article

For more posts, return to the full posts list or browse all tags.

2024 Articles

  1. Stacks of a variety of cardboard and food boxes, some leaning precariously.
    Article post type

    Setting up Sass pkg: URLs

    A 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.

    see all Article posts
  2. Article post type

    Testing 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.

    see all Article posts
  3. A dark vintage accessory store lit by lamps and bare bulbs, with bags, jewelry, sunglasses and a bowler hat on the wooden shelves and carved table.
    Article post type

    Proxy 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.

    see all Article posts

2023

  1. Fragment from a 13th century alchemical manuscript with a red and green oroboros serpent biting it's own tail, and seeming to give us side-eye
    Article post type

    HTML 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
  2. see all Article posts
    Article post type

    How 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!

  3. Pen and notebook with a sketch of a website interface
    Article post type

    When 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…

    see all Article posts
  4. Article post type

    SQLAlchemy 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.

    see all Article posts
  5. Article post type

    FastAPI 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.

    see all Article posts
  6. A stand of smartphones
    Article post type

    When 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…

    see all Article posts
  7. spider web with dew drops
    Article post type

    When 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 …

    see all Article posts
  8. The top front of a bright yellow shipping container with the door open and a blue sky behind it
    Article post type

    Can 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…

    see all Article posts
  9. Article post type

    Using 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.

    see all Article posts
  10. Article post type

    Python 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…

    see all Article posts

2022

  1. see all Article posts
  2. Nested semicircles,
from innermost and slowest
to outermost and fastest-moving:
nature, culture,
governance, infrastructure,
commerce, fashion
    Article post type

    When 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
  3. see all Article posts
    Wireframe of card elements
in different sized containers --
some laid out vertically in small spaces,
others horizontal when there's room.
    Article post type

    Use 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!

  4. Black text on bright yellow sign,
Caution, slip hazard,
with stick figure falling backwards.
    Article post type

    Not 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 0 value. It’s a fine rule in most cases, but there are a few common situations where it will break your code.

    see all Article posts
  5. A scene wipe transition in Star Wars,
as Luke and C-3PO in a speeder
wipe across a close-up
of Luke and Obi-Wan talking.
Over top, a dotted line shows the transition edge,
and a red arrow shows the transition movement
in front of the speeder.
    Article post type

    Every 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?

    see all Article posts
  6. see all Article posts
  7. see all Article posts
  8. Article post type

    Replace 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.

    see all Article posts

2021

  1. A large, carved, wooden hand
supporting a tree that has nearly fallen over
    Article post type

    Support (Not) Unknown

    Adding Container Query tests to CSS @support

    Working 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…

    see all Article posts
  2. blockquote with magenta background and polygonal clip-path
    Article post type

    Container Queries: a Quick Start Guide

    Now is the time to begin experimenting with a long requested layout tool.

    The @container query, 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.

    see all Article posts

2020

  1. 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

  1. Article post type

    Sass Modules, a Primer

    Getting started with @use and @forward

    Dart Sass (the primary Sass implementation) released version 1.23.0 last 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
  2. see all Article posts
    Panel conversation at Refactr.tech Conference
    Article post type

    Diversity. 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?

  3. Houdini bunny sticker
    Article post type

    The 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.

    see all Article posts
  4. Miriam talking with Jen Simmons and others
    Article post type

    Smashing 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!

    see all Article posts
  5. Miriam Suzanne and former OddBird Una Kravets
    Article post type

    VueFinder 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.

    see all Article posts

2018

  1. see all Article posts
    The English Channel from above
    Article post type

    Django 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.

  2. Generated art using CSS Grid inspired by Jared Tarbell
    Article post type

    Beyond 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.

    see all Article posts
  3. Article post type

    VueConf 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…

    see all Article posts
  4. Sample organized color swatches with hex and hsl values
    Article post type

    Herman 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…

    see all Article posts

2017

  1. Viewport size diagram
    Article post type

    Media 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
  2. see all Article posts
    Flexible grid column layout
    Article post type

    Welcome 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.

  3. Narrow and wide spread column math
    Article post type

    Understanding ‘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.

    see all Article posts
  4. Workspace
    Article post type

    Event: 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
  5. see all Article posts
    Old photograph of operators
    Article post type

    Django, 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.

  6. Name tags
    Article post type

    Three 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.

    see all Article posts
  7. Old phone
    Article post type

    Making 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?

    see all Article posts
  8. Spam semi truck
    Article post type

    Blocking 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
  9. see all Article posts
    Celery stalk resembling a human shape
    Article post type

    Serializing 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?

  10. Blueprint for NYC signage
    Article post type

    Code 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.

    see all Article posts
  11. Tools for design include a computer, sketchbook, pen and paper
    Article post type

    Get 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…

    see all Article posts
  12. Colored circles in a flow chart
    Article post type

    Color 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.

    see all Article posts
  13. Mac OS Dock with some of our favoite app icons
    Article post type

    Tips 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?

    see all Article posts
  14. Style written on sketchbook page
    Article post type

    Generating 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.

    see all Article posts
  15. Marionette puppet in grassy field
    Article post type

    Server-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…

    see all Article posts
  16. Miriam Suzanne speaking at CSSDay
    Article post type

    CSSDay 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.

    see all Article posts
  17. see all Article posts
  18. OddBird team members workshop ideas with post-it notes
    Article post type

    We 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…

    see all Article posts
  19. Sarah Parmenter speaking on stage
    Article post type

    Designing 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
  20. see all Article posts
    Jonny next to vertical stripes of color
    Article post type

    How 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.

  21. Sondra looks at large ampersand symbol painted on building exterior
    Article post type

    How 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…

    see all Article posts
  22. Cave with sign reading Your Git History
    Article post type

    A 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.

    see all Article posts
  23. Creative usage of drop caps collage
    Article post type

    What’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.

    see all Article posts

2016

  1. Marionette puppet visits a spa
    Article post type

    A 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.

    see all Article posts
  2. An odd bird on watercolor
    Article post type

    Behind 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.

    see all Article posts
  3. OddBird's GitHub Project Board
    Article post type

    Auditioning 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.

    see all Article posts
  4. Nicole Sullivan on stage
    Article post type

    CSSConf 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…

    see all Article posts
  5. CSS Grid example layout
    Article post type

    Will 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?

    see all Article posts
  6. Small-screen design proposal for the new OddBird website
    Article post type

    Defining 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.

    see all Article posts
  7. Early design concepts for OddBird's new site
    Article post type

    Open 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!

    see all Article posts
  8. Article post type

    Clarity 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
  9. see all Article posts
    Jump Start Sass, by Miriam Suzanne and Kitty Giraudel
    Article post type

    Jump 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

  1. Article post type

    SassConf 2014

    SassConf is right around the corner, and Claudina has been working hard to make it happen!

    see all Article posts
  2. Ada Initiative
    Article post type

    Python 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!

    see all Article posts
  3. Article post type

    jQuery Chicago 2014

    Five practical JavaScript coding takeaways from jQuery Conference Chicago 2014.

    see all Article posts
  4. see all Article posts
    SQLAlchemy
    Article post type

    PostgreSQL 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

  1. Article post type

    2013 Wrap-up

    A brief review of 2013: OddBird, year six.

    see all Article posts
  2. Article post type

    Susy 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!

    see all Article posts
  3. Article post type

    Map-Set vs. Map-Merge

    The difference between map-set and map-merge? Almost nothing.

    see all Article posts
  4. Article post type

    Susy Next, Alpha 4

    Susy Next alpha 4 is now available.

    see all Article posts
  5. Article post type

    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.

    see all Article posts
  6. Article post type

    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() and isolate-grid() mixins help you manage the worst effects of sub-pixel rounding, while bleed() helps you break items out of the box.

    see all Article posts
  7. Article post type

    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
  8. 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

  1. Article post type

    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
  2. see all Article posts
  3. 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.

    see all Article posts