Blog

Dev Team Head to Pixel Pioneers in Bristol

Pixel Pioneers is an annual gathering of digital enthusiasts, designers, and developers promising a day filled with knowledge, inspiration, and networking opportunities.

With great thanks to Laura for spotting the Pixel Pioneers conference, we decided it would be too good to miss.

The first talk of the day was delivered by Jeremy Keith from Clear Left.

We explored his take on Imperative vs. Declarative programming and how, like everything, both approaches have their pros and cons.

We also explored the concept of “Be the browser’s mentor, not its micromanager” with regard to CSS. How we should be leaning into the end-users system preferences and allow elements of choice in how a web page is displayed.

This included rejecting assumptions on the web by developing websites that can be flexible and adapt to each user’s preferences. Giving browsers style suggestions, not ‘forceful demands’ or set boundaries for styles.

This was especially interesting for us and there are definitely instances where we could utilise this way of thinking.

After Jeremy, we had the pleasure of a great talk from Ire Aderinokun.

Who is the Cofounder, COO, and VP Engineering of Helicarrier, building cryptocurrency infrastructure for Africa.

Ire’s talk had a focus on accessibility guidelines. With a key accessibility checklist:

Are your websites:

• Perceivable,
• Operable,
• Understandable,
• Robust

She also touched on the concept of an “AOM” (Accessibility Object Model) – what does your website look like without Javascript or CSS? Does the raw HTML alone still provide a yes to the question above?

Give it a try!

• Open up Chrome dev tools
• Press Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS) to open the Command Menu
• Start typing javascript , select Disable JavaScript, and then press Enter to run the command.
• Refresh the page!
• Repeat to re-enable.

Accessibility Guidelines: https://www.w3.org/WAI/standards-guidelines/wcag/

Another highlight was the talk with Cassie Evans, titled: Animating the impossible.

Cassie is an international speaker and developer with a background in graphic design and motion design. She has written for CSS-Tricks and Codrops and has thrown workshops for Smashing Magazine. She currently works as a creative developer and educator at GreenSock.

GreenSock have created GSAP which is an industry-standard JavaScript animation library that lets you craft high-performance animations that work in every major browser.

Greensock is a team of 3 developers who have created and it’s used in over 11 million sites!

Certain CSS properties shouldn’t be used to animate elements as the browser will go through different layers of showing your site Layout, Paint and Composite.

It is most performant to animate properties that get actioned on the Composite layout, these are transforms and opacity.
This does, however, limit animation and transitions that are possible/performant so to animate the ‘impossible’ we can use FLIP (First, Last, Invert, Play).

This involves getting the First frame position, the Last frame position, finding the differences between them (Invert) and then playing the animation of those different frames doing transitions.

Effectively, this moves the element in an instant, then transforming it back to it’s previous position (where it should appear to start from) and then animating it back to its original position. This would normally use a LOT of calculations to work out the new position, and old position across different screen sizes and devices.

Luckily, Greensock has a handy plugin that does a lot of the hard work for you and adds extra compatibility for nested animations aptly named FLIPFLOP (First Last, Invert, Play, First, Last, Offset, Play) where tricky animations are made possible.

As a developer, this certainly does feel as though you are Animating the Impossible!

Have we lost you? No worries, here’s Cassie’s demo where a playing card magically moves from one div into another.

Give the card a click:

See the Pen
MORE IMPOSSIBLE by Cassie Evans (@cassie-codes)
on CodePen.

This wasn’t all that was on offer during the day and there was so much knowledge packed into the day. The other speaker included:

Morgane Peng | We’re Not Doing Design Systems Properly and That’s Okay
Jules Mahé | Lightning Talk: A Tale of Red and Green
Umar Hansa – Modern CSS Development and Debugging
Scott Spence | SvelteKit and Storyblok – a Powerful Duo
Chui Chui Tan | Designing for Your International Audiences
Christian Heilmann | Web Development in the Times of AI

I guess you’ll have to sign up for next year’s Pixel Pioneers so you don’t miss out!

Pub Time!

It wouldn’t be a Pixel Fridge outing without a pub trip to conclude the day. So, we caught up with the design team and headed to Bristol’s beautiful harbourside for a couple of drinks in the sunshine. Lovely.