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.
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!
It’s time for a major overhaul of the OddBird website, referred to internally as our OddSite. This will be more work than we can handle in one pass, so we’re going to take things slow and re-design our site in the open – sharing our thoughts while we work.
At OddBird, we are very familiar with open source collaboration, and daily client feedback, but designing a site in the open is new to us. Luckily, we’re not the first to do it. There’s a broad range of open design practices, so we’ll mix-and-match to see what works for us.
We decided to re-design our live site, rather than starting from scratch on a private staging server. That means we’ll be taking live traffic while we work, and using continuous integration to make updates on a regular basis. It also means we needed a usable first draft, so the site would work publically from day one. We’ll post more about that drafting process in the next week or two.
You’ll be able to see the site live as it develops, but we’ll also post articles along the way – capturing screen shots of the site at different stages, sharing artifacts from the design process (such as sketches and planning documents), and telling stories about our process and decision making. We also have our source code available on GitHub, and will talk about the open source tools we use, and share any tools we build.
These are the rough stages we expect to go through:
The steps can be listed like a numbered waterfall, but that’s not how it will happen in practice. The site goals will get broken down into distinct user stories, and each story will reflect a microcosm of the larger process. Changes to architecture will affect how we think about user stories, and “final” changes to design will affect the architecture. The process is flexible, and we can move around as we need to, but having a general order reminds us what is most important to focus on at each stage of the process.
The OddFriends Slack channel is no longer available. ↩︎
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.