Skip to main

Tag: Article

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

2020 Resources

  1. see all Article resources
    Article resource 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 resource 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 resources
  2. see all Article resources
    Panel conversation at Refactr.tech Conference
    Article resource 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. Article resource 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 resources
  4. Article resource 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 resources
  5. Article resource 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 resources

2018

  1. see all Article resources
    The English Channel from above
    Article resource 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. Article resource 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 resources
  3. Article resource 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 resources
  4. Article resource 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 resources

2017

  1. Article resource 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 resources
  2. see all Article resources
    Flexible grid column layout
    Article resource 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. Article resource 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 resources
  4. Article resource 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 resources
  5. see all Article resources
    Old photograph of operators
    Article resource 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. Article resource 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 resources
  7. Article resource 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 resources
  8. Article resource 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 resources
  9. see all Article resources
    Celery stalk resembling a human shape
    Article resource 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. Article resource 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 resources
  11. Article resource 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 resources
  12. Article resource 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 resources
  13. Article resource 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 resources
  14. Article resource 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 resources
  15. Article resource 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 resources
  16. Article resource 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 resources
  17. see all Article resources
  18. Article resource 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 resources
  19. Article resource 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 resources
  20. see all Article resources
    Jonny next to vertical stripes of color
    Article resource 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. Article resource 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 resources
  22. Article resource 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 resources
  23. Article resource 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 resources

2016

  1. Article resource 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 resources
  2. Article resource 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 resources
  3. Article resource 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 resources
  4. Article resource 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 resources
  5. Article resource 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 resources
  6. Article resource 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 resources
  7. Article resource 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 resources
  8. Article resource 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 resources
  9. see all Article resources
    Jump Start Sass, by Miriam Suzanne and Hugo Giraudel
    Article resource 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 resource type

    SassConf 2014

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

    see all Article resources
  2. Article resource 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 resources
  3. Article resource type

    jQuery Chicago 2014

    Five practical JavaScript coding takeaways from jQuery Conference Chicago 2014.

    see all Article resources
  4. see all Article resources
    SQLAlchemy
    Article resource 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 resource type

    2013 Wrap-up

    A brief review of 2013: OddBird, year six.

    see all Article resources
  2. Article resource 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 resources
  3. Article resource type

    Map-Set vs. Map-Merge

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

    see all Article resources
  4. Article resource type

    Susy Next, Alpha 4

    Susy Next alpha 4 is now available.

    see all Article resources
  5. Article resource 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 resources
  6. Article resource 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 resources
  7. Article resource 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 resources
  8. see all Article resources
    Article resource 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 resource 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 resources
  2. see all Article resources
  3. Article resource 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 resources