Frontend United: a human approach to web development

Frontend United 2019

AttendeesNowadays, most conferences are talking about inclusion. My fellow colleague Maria and I were pleased to see diversity and inclusion everywhere during Frontend United: There were attendees from all over the world (not only in Utrecht, with Frontend Re-United, that was gathering communities from several countries). Sign language translations were available and there were sessions on subjects like unconscious bias and designing for deaf people. Organisers also seemed to be inclusive regarding curiosity, by offering a 20% discount while viewing the source code from the event website ?

Frontend United

Takeaways

Frontend United is also about sharing knowledge. Here are a few skills I learned about and I want to apply once I’m back in the office on Monday.

Living on the edge

Jeremy Keith opened the conference by talking about going offline. He took the approach of high level pseudocode to describe what we can expect from Progressive Web Apps. He focused  on caching strategies and using service workers as answers to various expectations like: speed, freshness and graceful offline fallback.
Have a look at his Resilient Web Design site (and then make sure to go offline).

Workshop screenA follow up, from the Vue perspective, was given by Ignacio Anaya, who discussed how to make web apps work in any kind of context (like travelling in the subway), with tools like Vue CLI, Workbox, Lighthouse or Mozilla's ServiceWorker Cookbook. They all greatly enhance the developer experience for Progressive Web Apps.

Progressive Apps

It's a kind of CSS and SVG magic

Una Kravets enlightened us with some CSS Houdini tricks. Well, not (yet) suitable for production, but I am definitely excited about their experiments with awesome features, like: dynamic gradients, background properties, inner borders, dynamic hover masks, ...

The illusion continued when the astronomer Nadieh Bremer showed us her data visualisation work with D3.js and SVG. The Hertzsprung–Russell diagram shines like a star. For Nadieh, everything starts from a sketch that envisions the final result. I definitely recommend taking some time to visit her site.

Phil Hawksworth

Lea Verou gave us a brief introduction to the Mavo language, created with the MIT to facilitate Web app development. Then, with her usual energy, she explained the inner workings of SVG. My favourite one is how to replace bullet list icons "hacks" with proper SVG implementation. You might check other SVG topics in this wonderful source of inspiration: The Web Design Cheat Code.

Style_image

Grids of Flexbox? Rachel Andrew provided extremely useful insights. They are now both widely supported by browsers and enrich this topic with Subgrid, that allows the creation of a grid on a grid item that uses tracks defined on the parent.

Walk on the React side

Sander Tirez and Svetlana Pak explained the differences between React lifecycle methods and hooks (available since version 16.8). They also provided insights about lazy loading of components with React.lazy() and the <Suspense> component.

Code Screen

Usually known to be a Drupal core maintainer of the Out of the Box initiative, Mark Conroy went through the basic setup of a Gatsby site that fetches data from a Drupal site. It included a live demo, available on this repository, where it is possible to follow the development, branch by branch.

We can be heroes

Your browser may contain more super heroes than you expect, and they are here to help! API's to the rescue: geolocation, battery and memory status, web audio, page visibility, speech synthesis and bluetooth. This session from Rowdy Rabouw was truly fantastic.

Vitaly Friedman from Smashing Magazine closed the conference by joining us for an entertaining journey through web design friction, or how to give personality to your website by finding its own signature, with respect for the user and without necessarily investing huge resources. Random featured examples: the animated SVG avatar, The Boat, Austin Beerworks (try to click "No" on the popup, use at your own risk) or Hans Brinker hostel.
 

Thank you to the organisers, volunteers, speakers and attendees that made this event a wonderful open minded edition. Looking forward to the next one!

Related Information