DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for CSSConf EU 2019 in a short opinionated recap
Vinicius Kiatkoski Neves
Vinicius Kiatkoski Neves

Posted on • Updated on • Originally published at Medium

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!


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

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)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›