Skip to main
Article
Houdini bunny sticker

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.

AI is your new design material

After listening to Josh Clark’s description of how to use AI to amplify human experience – give machines the time-consuming, repetitive tasks they do best – I’m maybe not as off-put by AI as I was before. There are scary bias problems with AI (like this from a recent article in Forbes). But if we can use those results to help expose and address bias as Josh suggested, I’m all in.

Watch Josh’s talk: A.I. Is Your New Design Material

Dynamic CSS: Layouts & Beyond

I attended Miriam Suzanne’s workshop on Advanced CSS and her talk on Dynamic CSS. It was a blizzard of useful information about CSS Grid, variables, interactions between CSS and JS, and much more. If you’re curious, check out the full video. If you were at either Generate or Smashing Conf and still want to learn more about Dynamic CSS, Miriam continues with a Q&A in Smashing CSS Followup.

Watch Miriam’s talk & view slides: Dynamic CSS: Layouts & Beyond

Design System Magic with Houdini

Sam Richard handed me a cute little rabbit sticker and introduced Houdini. Both blew my mind. Check out Sam’s Houdini microsite.

CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds.”

Watch Sam’s talk: Magic Tricks with Houdini

UX for Lizard Brains

I was sad to miss Sophia Prater’s talk and workshop, but I had the opportunity to meet her and really appreciated her offer to discuss my recent experiments in Object-Oriented UX. It was challenging to think about design like a data model, but it was also useful. As a designer, I was able to communicate more clearly with developers about the objects that would make up the application and define a glossary of terms.

Learn more about OOUX at rewiredux.

Rapid Prototyping with Gatsby

Adekunle Oduye gave us an overview of rapid prototyping with Gatsby – create a design system, set up Gatsby, and start prototyping with code. It’s a super efficient way to communicate designs to developers.

Start prototyping with Gatsby, or learn more about Adekunle.

Laying the Groundwork: Building Foundations for High-Performing Teams

Aaron Irizarry confirmed my anecdotal experience about the factors that make a high-performance team: create a psychologically safe work environment, avoid micromanagement and low standards, allow autonomy, provide clear expectations, stakes, goals, and evaluations, and teach people how to think. Thanks, OddBird, for challenging me to do my best work in a thoroughly supportive space. 👏

Watch Aaron’s talk: Laying the Groundwork: Building Foundations for High-Performing Teams

Everything You Know About Web Design Just Changed

Miriam and I had the privilege of watching Jen Simmons live-code a fiendishly difficult layout (that we selected for her) using CSS Grid. Wow! Such exciting new possibilities with CSS Grid.

Watch Jen’s talk: Everything You Know About Web Design Just Changed

Getting Personal Projects Made

The talk that stuck with me the most was Irene Pereyra’s Getting Personal Projects Made. OddBird has always tried to construct itself around team member needs instead of asking people to fit into a more standard structure – flexing as needs change and staying committed when external forces push us to conform. We offer OSS project time to team members and are slowly building OddBooks, a collaborative writing tool. Her talk was like a shot of raw inspiration.

Irene runs her own design studio with Anton Repponen. They made a commitment early on to focus 60% of their time on client work and 40% on personal projects and have stuck to it through the bombs and wild successes. For personal projects, they play around without clear goals. They pursue ideas that make them nervous. And they get help from friends and colleagues in adjacent fields. When Irene started on One Shared House, an interactive documentary about her childhood, she didn’t have high expectations. She certainly didn’t expect it to lead to a project with IKEA: One Shared House 2030, an imagining of co-living in the future. Some Anton & Irene projects are still costing them money, but satisfaction with their work is high. And what’s all this work for anyway, if not increased happiness?

Learn more about Anton & Irene.

Riding this wave of excitement, I plan to cash in on some of that OSS time OddBird offers to work on one of the projects that’s been percolating in my mind for a while. I’m thinking either an icon set (what new ideas can I bring to this crowded space?) or a tool for outlining writing projects (this one scares me the most!).

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Recent Articles

  1. see all Article posts
  2. Article post type

    Partial 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).

    see all Article posts
  3. A stepped gradient of a pink hue in 2% lightness increments from 100% to 58%, labeled 'spec'
    Article post type

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

    see all Article posts