Pixel Pioneers 2024 Highlights

For those who couldn’t make Pixel Pioneers this year, here’s a roundup of the interesting stuff I learned from attending the long-running web development conference in Bristol, UK.

The speakers

As with every event, Pixel Pioneers provided a great spectrum of people who cover design, development, UI and UX. Here’s a brief rundown of who spoke this year:

• Tejas Kumar – Developer Relations Engineer at DataStax
• Michelle Barker – Senior Front End Developer at Ada Mode
• Ian Lloyd – Principal Accessibility Engineer at TPGi
• Stephanie Stimac – Project Manager & Developer Advocate at Igalia
• Scott Riley – Author of Mindful Design
• Ryan Townsend – Technical consultant at TWNSND
• Sophie Koonin – Web Discipline Lead & Senior Web Engineer at Monzo
• Amy Hupe – Design systems consultant at Frankly

Personal highlights

Despite all the talks being really interesting and educational, my developer mind was drawn to the more technical implementation topics. Here are a few moments that stood out for me.

Layout with CSS

We’ve come a long way from floats and clears, and Michelle Barker demonstrated that with a plethora of code samples and demos, which make complex layouts look like an absolute doddle¹.

There was lots to absorb from her talk, covering features such as aspect-ratio for proportionate scaling of elements (ideal for things like 16:9 videos), viewport units for matching your UI to the height and width of the browser window itself and Masonry for those lockup-style layouts that were popularized by companies like Pinterest.

One trick I’d like to highlight, that I’ve used personally, is making use of gap when laying out components with even spacing. The example she used was a breadcrumb component, where items needed to be spaced evenly without causing erroneous margins around the component. Michelle goes into more depth here on CSS IRL.

Popovers without the need for JavaScript

As an added bonus, Michelle shared some exciting examples of using the upcoming Anchor Positioning API, which aims to help frontend developers position elements in relation to other elements on the page without the need for CSS hacks or JavaScript. Dropdowns, callouts, tooltips, popouts will all benefit from this feature. Once again, Michelle is coming in clutch with her write-up of Anchor Positioning on CSS IRL.

Accessibility mishaps

Ian Lloyd’s talk on common accessibility mistakes delighted us with 80s references and insightful examples, which were more than meets the eye². Ian provided many excellent examples of what can go wrong when you work against HTML; often developers will think they’re helping when adding extra labeling when they’re actually worsening user experience. This was made clear when Ian passed these examples through a screen reader, exposing how overwhelming that extra labeling can become.

In addition, Ian went the extra mile by describing any images he used in his slides. I’m a big fan of anyone who encourages inclusion in their work.

Performance gains with Custom Elements

My final takeaway from the conference was some insights from Ryan Townsend on performance. JavaScript frameworks have dominated the frontend developer landscape, with many touting Single-Page Applications (SPA) as the savior to our performance woes. But almost a decade later, are we in a better place?

Ryan’s example performance metrics, which compared framework usage and Web Platform APIs, were very compelling. One of those Web Platform APIs was Web Components, a technology that can be really powerful for developers building design systems and something I’m personally interested in. If you want to learn more about Web Components, check out our recent e-book The Case for Web Components.

Further reading

Once again, Pixel Pioneers delivered a very educational conference. If you want to check out some of the talks from previous years, you can find them on their official YouTube channel. Talking of talks (whoa, meta), I’ll be speaking at Converge this year on, you guessed it, Web Components. Hope to see you there!

Footnotes

1. Please apply your own thick London accent here ↩︎
2. Yes, this is a Transformers reference ↩︎