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!
Talks
- 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
Liquid error: internal
Liquid error: internal
⭐ 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
Liquid error: internal
Liquid error: internal
Liquid error: internal
Liquid error: internal
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 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
Liquid error: internal
Liquid error: internal
Liquid error: internal
Liquid error: internal
⭐ Modern Typographic Systems with Variable Fonts by Jason Pamental
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
Liquid error: internal
Liquid error: internal
Liquid error: internal
Liquid error: internal
⭐ 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 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
Liquid error: internal
Liquid error: internal
Liquid error: internal
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 was it 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#/
Liquid error: internal
Liquid error: internal
Liquid error: internal
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.
Slides are available here: https://people.igalia.com/mrego/talks/cssconf-eu-2019-css-containment/
Liquid error: internal
Liquid error: internal
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
Liquid error: internal
⭐ 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/
Liquid error: internal
Liquid error: internal
Liquid error: internal
A Working Theory of Components by Elyse Holladay
Liquid error: internal
⭐ 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:
Liquid error: internal
Slides are available here: https://talks.page.link/houdini-design-systems
Liquid error: internal
Closing Keynote by Sareh Heidari
Liquid error: internal
Top comments (0)