Final week I attended Pixel Pioneers, an annual convention in my native metropolis of Bristol. It has quick turn into a agency date in my calendar, and this yr didn’t disappoint. In reality, I’d go as far as to say it could be the very best one but.
As a result of work commitments I didn’t get to see all of the talks, however those who I did see had been all exemplary, with heaps to study from every one. Right here’s a quick roundup of some key matters and the place they sit in immediately’s internet panorama:
Repair these UX bugs
A sweary (however satisfying!) rant by Craig Sullivan, the primary speak, The 15-Minute Mannequin for Optimising Machine Experiences took no prisoners. Craig shared some stunning crimes in opposition to UX, and his components for stopping these. Clue – it entails testing on actual gadgets! The important thing takeaway right here was that neglecting testing may end up in skewed metrics, annoyed prospects, and potential lack of 1000’s (and even hundreds of thousands) of {dollars}, particularly for large firms. Prioritise these UX bugs over and above fancy new options.
Thrilling issues are coming for internet animation
Lis Linhart gave an distinctive speak on internet animation, full with stunning illustrated slides, and bespoke demos. She took components from the Pixel Pioneers web site to craft examples that actually drove dwelling some key factors round timing and easing to make animations really feel extra pure, and showcased some very cool 3D strategies. We learnt concerning the relative efficiency influence of animating completely different CSS properties – transforms and opacity being extra performant than, say, widths and margins. She defined how selling components to a brand new layer can enhance the efficiency of animations.
Lis additionally confirmed some examples of the way you would possibly code extra advanced animations utilizing the Internet Animations API (WAAPI). Sadly it’s not supported in any browsers but, however it appears to be like fairly thrilling!
Demystify flexbox layouts with dev instruments
I used to be actually excited to see Hui-Jing Chen’s speak, Utilizing DevTools to Perceive Fashionable CSS Layouts, and it was well worth the wait! She didn’t use any slides – the whole presentation consisted of inspecting flexbox layouts utilizing Firefox’s developer instruments. Firefox has a implausible flexbox inspector, which lets you see precisely how area is distributed inside your flex container, and the resolved sizes of the flex gadgets. I believed I had a good suggestion of how flexbox works, however this speak gave me a a lot better understanding of how flex-basis (considered one of flexbox’s extra mysterious properties!) really behaves. Viewing this within the browser dev instruments immediately helped it make much more sense.
Subgrid is coming
As a CSS format geek, It’s all the time a deal with seeing Rachel Andrew speak about CSS Grid. There’s no yet another knowledgable on the topic than Rachel! On this speak she delved into subgrid, a much-requested function of the CSS Grid Stage 2 specfication, which is now out there in Firefox Nightly. She confirmed some use circumstances that defined rather well why we’d like subgrid – and the way present choices, like show: contents don’t fulfill all the necessities (in addition to leaving gaping holes in accessibility).
Rachel additionally emphasised how necessary it’s for builders to experiment with, and write about, new CSS options once they aren’t extensively supported but. These experiments and discussions can actually form how the specification develops, and everybody can have a voice on this.
Design for the various
Within the final speak of the day, designer Jon Tan delivered a strong rallying cry that actually resonated with the viewers. Half love-letter to internet requirements, half call-to-arms, he advocated for a radical method to design, one with inclusivity at it’s coronary heart. Design for the various, and never the few.
