Day one was focused around CSS and each talk was truly inspiring. Here are a couple of talks that really stood out for me.
Sarah Dayan — Utility based design systems
The first talk was about Utility based design systems. Sara explained how to build design systems/style guides more efficiently using the utility based classes. The talk went over how using utility based classes can not only improve performance on the CSS bundle but it can also provide a better html output via Gzip.
What I liked about this talk was the fact that Sara made the idea of using utility based classes very reasonable because it has performance benefits from a css/html prospective and to me thats a big win! Like any other developer, I hate repeating myself so if I can write those styles once and then use those class names wherever on the site it is a big win.
In Defense of Utility-First CSS by Sarah Dayan
Aurélien Levy- The double faces of CSS
This is the type of talk that everyone loves! Straight to the point with lots of juicy tips to take back and implement with ease. Aurélien Levy’s talk purely focused around what common a11y bugs he finds on websites he audits on a day to day.
The hidden gem I found in this talk was not to add display: contents; to any elements. Aurélien showed everyone what happens if you add that to your elements and it just completely changed the way the screen reader read out the content that lived within the element. What that property will do is that it will remove all the semantics from that element and just read out plain text. So for screen reader users, they will not know what they are currently on because it will just read out plain text. So definitely one to remember!
Emily Plummer — CSS & Developer Experience
This was by far my favourite talk of the day because of how relevant it is to what I am doing at the minute on my side project. Emily talked about how Github has managed to find a good balance between developer experience & customer experience and explains why it is good to have both. The talk was mainly focused around how Github implemented a design system and how it brought a fine balance between writing code the right way & delivering a product faster to our users. The main benefits that she went over were:
- Delivery — developers had less things to worry about because the code was made up of small components which where plug in and play
- Testing — each component was individually unit tested which would allow more frequent releases
- Accessibility — bringing components into one single source of truth where the markup is only in one place really helped with keeping things accessible
- Design consistency — similar to the above, with the css class names in one place meant that it was easier to keep aligned with the designs
- Autonomy — a lot of the component logic was hidden within each component and had its own documentation
Jason Pamental — Variable fonts and dynamic typography with CSS
Frontend developers face quite a few problems when it comes to implementing fonts. We have to consider:
- Performance
- Design Consistency
- Accessibility
Finding the right balance between the fonts loading fast & them meeting design requirements can be a difficult problem to solve.
Modern browser now have a feature called variable fonts that can provide a better solution that ticks all the boxes for developers, designers but more importantly, the end users.
Jason’s talk is about how variable fonts can provide a better solution which meets the requirements mentioned above.
What is a variable font?
For people who are new to variable fonts it can be tricky to get a grasp around them. I definitely did!
A variable font is a collection of font styles all bundled into one font. For a website to have multiple font styles we would have to include a font for each style whereas a variable font you may only need to include the one that caters for all. Then after that we just need to add the css in and we are good to go with them!
Browser support for variable fonts seems to be at a decent 87.98% coverage too so it’s definitely something to play around with and try out.
What I liked as well about this is that Jason mentioned about how we can actually start using variable fonts now in the browser as the font safely falls back to using the normal fonts in browsers that do not support it.
Variable Fonts: opening the door to whole new typography
Dynamic Typographic Systems with Variable Fonts by Jason Pamental
Lightning Talks
Fabien Zibi — CSS tests
Now this I thought was a game changer, I have never thought you could write tests on sass functions and mixins but it turns out that you can quite simply with snapshots using Jest! Who knew!
Conclusion
Overall it was a top day and I would definitely recommend attending this conference as it had great speakers, great facilities, great food and also it had a couple of foosball tables! What more can you want from a conference? :)