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.
Article
post 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.
Amazing talk by Miriam Suzanne at the Beyond Tellerand conference about the benefits of using plain CSS instead of heavy library for your grid! Very useful and inspiring. Thanks!
Right from the start, Beyond Tellerand was unlike other conferences. Rather than hearing familiar talks about familiar technology, the first day took us on a journey through web annotations, intricate illustrations, design for non-designers, robots with personality, stop-motion tinkering, and programatically-generated art.
I spoke on day two, followed by “bleeding edge” accessibility, large-scale projection-mapping, the women who built the internet, and a lesson on ethics in tech. How could I even begin to match the inspirational scope of these other presenters, while talking about layout?
I couldn’t – but I did have some fun. Inspired by the generated art from Jared Tarbell and the Levitated Toy Factory, I picked one of his art pieces to recreate with CSS variables (aka custom properties) and CSS grid layouts.
I spent that evening studying his image, and translating it into HTML
and CSS. My first draft relied heavily on :nth-child() selectors,
leading to an absurd 3MB CSS file. By adding custom properties in the
HTML, I was able to streamline things dramatically. This second draft
relies on HAML to generate the required HTML for a static (but
responsive) result.
That went over well at the conference, but I decided to improve it after the conference was over. By moving the component logic into Vue, I could interact with the controls dynamically – and animate the changes: shuffling, resizing, and more. Finally, I pulled in an Asteroids-inspired browser snippet so you can destroy your creation. Enjoy the invasion!
See the Pen Vue Invaders! by Miriam Suzanne (@miriamsuzanne) on CodePen.
I highly recommend watching the other talks. Here are a few of my favorites:
- A Tinker Story by dina Amin
- Broad Band – What History’s Female Internet Pioneers can Teach us about Tomorrow by Claire Evans
- Generative Spaces by Jared Tarbell
- How to Build an Atomic Bomb by Mike Monteiro
Recent Articles
Article post typePartial 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).
Article post typeCSS 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.
