Speaker Spotlight: Michelle Barker

By Oliver Lindberg26 Feb 2024Interviews

Ahead of her talk at Pixel Pioneers Bristol this June, senior front-end developer and CSS enthusiast Michelle Barker gives us a sneak peek of her talk about building robust, flexible, and creative layouts with CSS

Why is modern CSS layout awesome and not indeed painful? In other words, what can we expect to take away from your talk?

Anyone who’s built websites through the days of using floats (and tables before that) for layout will know that CSS layout hasn’t historically been easy. But these days we have a whole bunch of CSS features to make building responsive layouts far more straightforward and intuitive: flexbox and Grid were the start, then viewport units, and more recently min(), max() and clamp() functions, as well as newer features like container queries and the :has() pseudo-class, which can be very powerful.

In fact, the real challenge is keeping up with all these features and setting aside time to learn how they work, which is not always easy. Too often CSS isn’t seen as a priority within teams, despite it having the potential to vastly simplify our front ends if we learn to use it right. So this talk aims to bring you up to speed with new CSS layout features — and convince you to start using them!

Can you give us a sneak peek, one little CSS layout tip?

I don’t know if this will make it into the talk or not, but a tip for distributing elements evenly (in a navigation bar, for example) is to sometimes consider using Grid instead of flexbox. In this example we have three children of various sizes: a logo or home link, a list of page links in the centre, and two buttons on the right. We could use flexbox with justify-content: space-between to lay out those elements, but although the space will be evenly distributed, the navigation list won’t be visually centred. By using Grid instead, we can visually center the list items when there is sufficient space.

People often think of one-dimensional layouts as being exclusively the realm of flexbox, but it pays to consider alternatives.

What currently excites you the most about CSS?

I’m excited about the current pace of CSS feature development. There seems to be real investment from browser vendors in getting new features implemented, and there is a great web standards community sharing their work and supporting each other to push things along.

And what's your favourite tool at the moment that you use a lot in your day-to-day work and why?

Codepen is always a firm favourite — I regularly use it for prototyping components and figuring things out, as well as demos for articles. I’m also using Miro a lot, I find it really useful for planning complex applications using flow diagrams.

You've also started covering web sustainability. What are the top 3 easy things every front-end dev can do to reduce the environmental impact of the products they build?

Optimise your images. Images account for almost half of data transfer on a website, on average. I regularly encounter unoptimised, multiple megabyte images on the web. We can massively reduce their impact by sizing and compressing images, ideally before upload, by using the srcset attribute to serve appropriate images for the user’s device, and by lazyloading them, which is really easy to do with the native loading HTML attribute.
Use less JavaScript. Javascript is responsible for a lot of the environmental impact of a website — even if the transfer size is smaller than your images, the browser has to do more work to process it. We can help by building more mindfully: consider alternatives to large dependencies, if you have to use them at all. There’s a lot that’s possible now with vanilla JS, or even with CSS, that means you might not need all the JS libraries you once did. That’s another reason why it pays to learn CSS well!
Avoid YouTube video embeds. They load a tonne of JavaScript, even if the user never watches the video. If you need to embed video, I recommend using Paul Irish’s Lite YouTube Embed library. It loads a static image in place of the video, and the video scripts are only loaded when the user clicks on it.

At Pixel Pioneers Bristol, Michelle Barker will be talking about building modern CSS layouts. The conference will also cover AI and practical prompt engineering tips, how not to kill your design system, how learning user experience and visual design basics can make you a better developer, and more. Get your ticket today!