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