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".
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
- ⭐️ Hello subgrid! by Rachel Andrew
- Using DevTools to understand modern CSS layouts by Chen Hui Jing
- ⭐️ Modern Typographic Systems with Variable Fonts by Jason Pamental
- ⭐️ Don’t Believe the Rumors: Writing Tests for CSS is Possible by Gil Tayar
- Let’s web dev like it’s 1999! by Ben Ilegbodu
- Improving Website Performance with CSS Containment by Manuel Rego
- ⭐️ Class 🥊Clash by Alex Tait
- A Working Theory of Components by Elyse Holladay
- ⭐️ Design System Magic with CSS Houdini by Samuel Richard
- Closing Keynote by Sareh Heidari
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 says by 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 they do solve (make children elements align based on parent's grid). A really nice summary on how subgrids work and how we can use them. 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
Really nice demos on how to use Flexbox and DevTools to debug it. It would be 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
Another masterpiece in my opinion. He explains variable fonts and how we can benefit from it, 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
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 show 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
Ben shows his first website back in time. How it actually worked and how was it to develop websites in 1999. Really nice walk through the history of the web development. If you've never seen
<frameset> in action then you should have fun watching this talk.
Slides are available here: http://www.benmvp.com/slides/2019/cssconfeu/webdev.html#/
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.
Slides are available here: https://people.igalia.com/mrego/talks/cssconf-eu-2019-css-containment/
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 solve. Alex mentions Tachyons as a good Functional CSS library. You can also read more about it here: https://rangle.io/blog/styling-with-functional-css/
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:
Una Kravets 👩🏻💻@unaThank you so much for coming to my #JSConfEU talk!! ❤️✨
Some @csshoudini resources:
📚 ishoudinireadyyet.com -All the info by @DasSurma
🚀 css-houdini.rocks -😍 demos by @iamvdo
🎏 houdini.glitch.me -Spellbook @Snugug
✨ extra-css.netlify.com -Extra.CSS by ME!09:26 AM - 02 Jun 2019
Slides are available here: https://talks.page.link/houdini-design-systems