CSSConf EU 2019 in a short opinionated recap
This is a summary of what happened during CSSConf EU 2019 regarding its talks for those whom missed it or have been there and would like a recap. I haven’t watched all the talks so I will give some opinion on the ones I’ve watched and ⭐️ the ones I consider a “must watch”.
I’ve also added the sketch notes from @lisi_linhart, @wilfredspringer, @clairikine and @SarahOnDaCloud which are a great summary of what have happened on each talk.
If you have some extra material that you would like to add here, let me know! It could be extra sketch notes, videos, comments, tweets… Everything you thing might be relevant to add to this list!
Hope you enjoy!
Why do we call HTML tags “tags”? A journey through the history of CSS, mathematics, and CS to find out! by Andrés Cuervo
The name of the talk speaks for itself. Nothing technical but quite interesting. If you ever wanted to know why we call it tags this is the right talk. Andrés goes through the history and how the terminology tag was coined.
Slides are available here: https://slides.cwervo.com/mdx-slides/css-conf-eu-2019/?mode=#0
⭐️ Hello subgrid! by Rachel Andrew
It was a masterpiece! She walked through some subgrid examples and what problems it’s addressing (make children elements align based on parent’s grid). A really nice summary on how subgrid works and how we can use it. This includes a lot of the material used during the talk: https://www.smashingmagazine.com/2018/07/css-grid-2/ and https://www.smashingmagazine.com/2019/05/display-grid-subgrid/
Slides are available here: https://noti.st/rachelandrew/i6gUcF
Using DevTools to understand modern CSS layouts by Chen Hui Jing
Really nice demos on how to use Flexbox and DevTools to debug it. It is nice to watch if you haven’t played with Flexbox or if you would like to refresh your knowledge a bit. You can find all the demos and play with them here (There is also an awesome readme): https://github.com/huijing/slides/tree/gh-pages/58-cssconf-2019
⭐️ Modern Typographic Systems with Variable Fonts by Jason Pamental
Another masterpiece in my opinion. He explains variable fonts and how we can benefit from them, some tips on typography and he also talks about the future with progressive font enrichment. You can check more about it here: https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance and https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts/
Slides are available here: https://noti.st/jpamental/2gsS6v
⭐️ Don’t Believe the Rumors: Writing Tests for CSS is Possible by Gil Tayar
Nice introduction to visual testing using tools like Cypress. There were some really simple and nice examples and why we should test our CSS and why it is not as complicated as we think. Gil even shows some tools to automate part of the process and make it faster as this kind of testing might be quite expensive. Code examples: https://github.com/giltayar/css-testing-rumors
You can also find a tutorial about it here: https://css-tricks.com/an-intro-to-web-app-testing-with-cypress-io/
Official documentation: https://www.cypress.io
Let’s web dev like it’s 1999! by Ben Ilegbodu
Ben shows his first website back in time. How it actually worked and how it was to develop websites in 1999. Really nice walk through the history of the web development. If you’ve never seen <frame> and <frameset> in action then you should have fun watching this talk.
Slides are available here: http://www.benmvp.com/slides/2019/cssconfeu/webdev.html#/
Improving Website Performance with CSS Containment by Manuel Rego
The new CSS contain property (https://developer.mozilla.org/en-US/docs/Web/CSS/contain) in a nutshell. Visual examples of what happens to the DOM and the benefits of using it (performance improvements).
Slides are available here: https://people.igalia.com/mrego/talks/cssconf-eu-2019-css-containment/
CSS Logical Properties by Estefany Aguilar
Deeply technical (CSS Logical Properties) and with the cutest slides I’ve ever seen! Impossible to make a short summary of it, you need to read, play and watch the talk to try to understand it a bit better. Some examples: https://github.com/teffcode/logical-properties-examples
Slides are available here: https://docs.google.com/presentation/d/1-GOSaggySGIKmcNuDPNPE6ZZEM2H_oF2AOdcMvlG7kk/edit#slide=id.g562dbb611a_0_0
⭐️ Class 🥊Clash by Alex Tait
Have you ever heard of Functional CSS? If not this is a really nice introduction to it. The idea is to have classes that do a single job, which means add a specific CSS property to the element instead of a class that has a bunch of properties and it becomes hard to reuse it. A lot of examples and answers to the problems it solves. Alex mentions [Tachyons](https://github.com/tachyons-css/tachyons) as a good Functional CSS library. You can also read more about it here: https://rangle.io/blog/styling-with-functional-css/
A Working Theory of Components by Elyse Holladay
⭐️ Design System Magic with CSS Houdini by Samuel Richard
Have you ever seen Houdini in action? If not this is the right place. Samuel explains what is Houdini and why it is so magical with some cool examples!
Some Houdini resources can be found in the tweet below:
Slides are available here: https://talks.page.link/houdini-design-systems
Closing Keynote by Sareh Heidari
