Frontend United 2019 - Utrecht

28‑05‑2019 Dennis Claassens 6 min.

Last week, Annemiek, Hendrik, Yelitza and I went to Utrecht for Frontend United 2019. Two days, two tracks - jam packed with information presented by 24 speakers, I was excited! The conference took place in the Kinepolis cinema just across from Utrecht Centraal. The screens were amazing, you don’t need to zoom in for readable code on an IMAX screen.

On Friday we started with a keynote by Jemery Keith about Going Offline. In his talk he explained how he used service workers to set up a local cache of his website, and how you could even use it to serve a fallback page (when offline) to show which pages had been cached. I've since been looking into how we could use web workers and service workers on our own applications to speed things up and make it more robust.

Next up was Una Kravets with a talk about CSS Houdini. Being completely unfamiliar with it, I was blown away! So many cool options, being able to write custom animations with javascript, but have them run together with css, yes please! This also reminded me of css variables, which we can use as soon as we drop IE11 support, so I added a card to our design system backlog for this.

After this, I went to a talk about modern React applications, which ended up being a demo about how to build an application using hooks, not quite what I had expected. Annemiek and Hendrik went to see a talk by Stephan Hay, “I don’t care what Airbnb is doing (and neither should you)”. Hendrik: “This talk was about looking too easily at what others are doing instead of solving your own design problems. Lots of recognition when he talked about stakeholders telling you 'Just do what Airbnb/Facebook/Amazon is doing’. And I could agree with his message to think outside of the box to solve your own problem and make a difference instead of more design sameness.”

The last talk before lunch was by Peter van Grieken and Luc Princen about their design process for the award-winning website for KIT. Some great insights into engaging a client and how to incorporate accessibility into the default development process. Fun fact, many years ago I once had a meeting at KIT, and their building is as stunning as their new website!

Lunchtime! We had a short walk to the train station to get some food, it was nice and sunny, and good to have a bit of outside time after being in a movie theater all morning.

Back into the movie theater and straight into Sílvia Otto Sequeira’s talk about Design skills for Frontend Devs. A wide ranging talk showed us what work a designer does before they even start drawing. Furthermore, she covered how to respect the design, communicate requests for change, and some useful tools on what to do when the designer is not at their desk.

SVGs beyond mere shapes by Nadieh Bremer was the next session. She showed us a lot of beautiful data visualizations done with SVG. This talk blew me away, as I had never really thought about this or seen anything quite like it. I hope we might get to hire her as a consultant for some dashboard visualizations at some point.

Last talk of the day was by Lea Verou, about using SVG animations to create really interesting effects. She did a lot of live coding which was very interesting to watch, and it showcased how powerful SVGs are. My favorite take-away from this talk was the use of 🦄 and 💩 as css classes, something I would definitely enjoy having on our website as a little easter egg.

Saturday started an hour later, which meant we didn’t have to get up at silly o’clock (which is nice on the weekend).

We kicked off the morning with Grids All The Way Down, by Rachel Andrew. She explained how Grids worked and then she dove down into a new technique: Subgrids. Very interesting and I can’t wait till we drop IE11 support and I get to play around with display: contents and grids! I’m hoping I will be able to replace some clunky and complex components from our design system with this.

After a short coffee break we continued with JAMstack, a talk by Phil Hawksworth about statically served websites by a cdn. My favorite example was the statically deployed clock (a new website deployed every minute). We already deploy (and compile) our javascript. We build our html using that javascript which calls services on our php backend. I was seriously impressed with the deploy speed of netlify; definitely something we could benefit from.

Next up was Rebecca Hill with Creating a Design System That People Actually Use. This talk was filled with great information on how to engage the entire company, on how a design system can be of benefit to a redesign, and also how important it is to start small. She listed many of the challenges and benefits we also have encountered with our design system. I was quite proud to see we already had one of the features she mentioned as a future goal: visual regression testing.

Lunchtime! It was beautiful outside, but I got distracted talking to several conference attendees and before I realized the lunch break was over, oh well, a sign of a good time I guess!

First up after lunch was a talk by Denys Mishunov about migrations. He told us about how you can use webcomponents and the shadow dom to replace a webapplication bit by bit, until you could finally switch over to the new codebase. A great example of how to use gradual migration to achieve a complete rewrite.

The next talk really made you think, Future Ethics by Cennydd Bowles. He started off with an example of racism embedded into bridge/highway design. I was intrigued by how something like that was even possible and what we could do to make sure such things never happen again. Yesterday I saw this video about a soap dispenser and it reminded me of how necessary it is to make sure inclusivity is a core value of design.

The closing keynote was by Vitaly Friedman, who talked about making interesting interfaces. He had a lot of interesting examples on both great and not so great implementations of common components. A great talk to make you think outside of the box and design something other than just the two standard websites we have nowadays.

In conclusion: I really enjoyed all of the talks, my favorite talk by far was SVGs beyond mere shapes by Nadieh Bremer (there is also an older version of this talk up on youtube). I would love to replace our current loading bar with something similar to this gooey example she mentioned.

It was also great meeting up with my ex-colleague Navid and my old friend Kilian and seeing what they are currently working on and with, such as Polypane and Storybook.

conference frontend front-end EN

Deel deze blog