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.
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
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
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
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.
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.
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
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
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!).
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.
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…
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.
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.