CSS Day 2014 recap

CSS Day is a one day CSS conference. CSS Day 2014 took place at the 4th of July, the venue was the Compagnietheater in Amsterdam. Here’s a recap of the talks!

Tab Atkins: “Present and Future of CSS layout”

css-day-2014-recap-tabatkins

Tab Atkins started working on the flexbox spec in 2009, and has improved it since then.

In this first talk of the day, Tab showed the advantages flexbox and grid layouts have over traditional ways of styling webpages using a couple of examples.

One example was a horizontally oriented navigation. This is usually done by applying floats or inline-block to the list items. With flexbox the same effect can be achieved but with less code. And with neat vertical centering, without the hassle. Or as Tab said it: “Hardest part of CSS, done!”, while typing a couple of rules of flexbox css.

Take away: use flexbox now, and start experimenting for CSS Grid layouts!
Talk: https://vimeo.com/98746172
Presentation: xanthir.com/talks/2014-06-04

 

Ana Tudor: “3D Transforms”

css-day-2014-recap-anatudor

Stephen Hay announced this talk as follows: “WTF does nót count as a question”.

At the start of her talk, Ana let the crowd pick one out of two examples she built using CSS transforms. Absolutely gorgeous examples (which you can see at Ana’s Codepen account).

As you can imagine, the crowd picked the example which looked the most complex. What followed was an almost equally complex explanation about polygons and the shape we picked (which is called a ‘pentakis dodecahedron‘ by the way).

To be honest, this talk was a bit too complex for me and the people I met during the break before Ana’s talk. Our math/geometry knowledge was far too little to fully understand the whole talk. It was nice to see how powerfull CSS can be though.

Take away: check out Ana’s account on codepen. It definately shows the power of CSS.
Talk: http://vimeo.com/98137613

 

David Baron: “animations”

css-day-2014-recap-davidbaron

David started by noticing how web developers often ask themselves how to make their code perform better.

What followed was an in-depth explanation of how the browsers/Firefox’ rendering engine works, from the code on your screen to the website on the users’ screen.

David talked about optimization, and that the ‘golden standard’ for optimizing your CSS/CSS Animations is to profile it with the developer’s tools of the browser you develop in. By profiling you can see where most time in the browser is being spent, which should give you a clue about where to optimize your code.

David works at Mozilla, so it wasn’t a surprise he showed the audience profiling in Firefox. There’s an addon for Firefox Nightly which allows profiling. Ana’s talk before this one showed excessive use of 3D transforms, so David decided to profile one of Ana’s codepen demos.

Everyone with a Mozilla background I see at a conference mentions Firefox OS at least once, David not being an exeption. He mentioned Firefox OS when someone in the audience asked about when you (as a developer) need to start worrying about performance. David’s answer was that different project require a different approach. A phone UI has to have a more precise feeling of responsiveness.

Take away: CSS optimization results differ between browsers, and change overtime.
Talk: https://vimeo.com/103108124

 

Mathias Bynens: “fun facts”

css-day-2014-recap-mathiasbyens

I was warned about Mathias’ talk before I got to CSS Day. That it should be nearly too much fun to watch. Seems the people I spoke prior to CSS Day were right.

Mathias seems to be looking for the edges of the technology we use everyday, in order to learn more about it’s inner workings. His talk was stuffed with examples, which I can’t all mention here because of the number of examples he gave and the fact that it’s more fun to watch Mathias talk about it himself.

While exploring the HTML5 spec, Mathias found that HTML5 has far less restrictions on the id attribute then HTML4. The only requirements left are that it should be unique in the document, it can’t contain spaces and it’s value must contain at least one character. So, Mathias decided to use emoji’s as id’s. Unfortunately CSS has other requirements when it comes to it’s selectors, so converting is essential if you want valid CSS. What followed was a dive into escaping characters in order to use them effectively in CSS.

Another thing Mathias investigated is if you could use CSS for evil purposes like cross site scripting. Turns out: CSS is more powerful then you’d think and can be really harmful. Even when the attacker only has control over the CSS of a website, a website can be defaced and plain dangerous to it’s visitors. Partly because Microsoft’s CSS Expressions make it possible to execute javascript via CSS files.

Take away: the HTML5 doctype isn’t just fancy, it serves a cause as well because css expessions won’t work with this doctype. And therefore making the web a bit safer for Internet Explorer users.
Talk: https://vimeo.com/100264064
Presentation: speakerdeck.com/mathiasbynens/3-dot-14-things-i-didnt-know-about-css-at-css-day-2014

 

Peter-Paul Koch: “The Mobile Viewports”

css-day-2014-recap-peterpaulkoch

In his talk Peter made it painfully clear that a even without Internet Explorer 6 there’s still a lot broken, non-standard and wrong on the web, all things which make a web developer’s job challenging.

Cause of the different behaviour across mobile browsers is that the web was built for desktop screen sizes. Mobile vendors had to figure out a way to display both mobile optimized and desktop optimized websites correctly, and have gotten very creative in the process.

Peter tests a lot on different devices, and found out that accurate measurement of the current viewport in javascript is (very) challenging. He advised the audience not to trust screen size statistics in Analytics tools. It’s broken because of the lack of equal behaviour across browsers.

Take away: when in CSS you see a %, ask yourself: “a percentage of what (viewport)”?
Talk: https://vimeo.com/100523275

 

Heydon Pickering: “effortless style”

css-day-2014-recap-heydonpickering

Heydon used a persona, which he called Victoria, as the main subject of his talk. Victoria is a writer, tech savvy, but in no means a front-end developer. Heydon thinks it’s important to let Victoria do what she does best: write awesome content.

But, in many cases content editors do not only have to write content, but also have to set alignment of items, add classes or special elements to content in order to make it look good.

In fact, Heydon’s talk was mostly about CSS 2.1. Using intelligent selectors for styling of the content, Victoria doesn’t need to do anything else but write content. Heydon especially likes attribute selectors to make Victoria’s life easier: a <p> isn’t just a <p>. It’s also a :first-letter, :first-child, or a combination of both. Using these pseudo selectors Victoria gets the page design that was designed, but whitout all the extra tasks she otherwise had to do.

Take aways:
– Don’t forget about CSS attribute selectors.
– Google Webfonts has a text parameter which can be really useful for optimisation
Talk: https://vimeo.com/101718785

 

 Ethan Marcotte: “Laziness in the Time of Responsive Design”

css-day-2014-recap-ethanmarcotte

“Lazyness is bad. … right?” According to Ethan it’s not the case for web development. Ethan shows one of those pictures with a lot of devices (iPhones, Androids phones, etc.) on it and says “This is why I drink”.

Ethan walked trhough a couple of responsive designs in which he explained how he made his life easier. Just like the talk from Heydon, CSS2.1 attribute selectors were discussed.

Maybe lazyness isn’t bad, “Maybe it’s about letting go”. With more and more complexity in our web designs, and the requirement for it to be flexible/responsive, we should look for simpler approaches. And letting go is one of the things we should do.

On a side note: Ethan feels that the fact that we now conceal our mobile menus avoids the discussion about whether the links should be in the menu at all.

Take away: we as front-end developers should try to do more with smart selectors / effects to make our lives easier.
Talk: https://vimeo.com/106869929

 

Conclusion

This was my first CSS Day, so I didn’t know what to expect other then a lot of CSS. I really enjoyed a whole day filled with talks about CSS and would recommend you to go if you’re a front-end developer. I’ll definitely try to go again when CSS Day 2015 is organized!

Thanks to Google for sponsoring @_paulverbeek’s ticket, to @_paulverbeek for giving his ticket to a colleague, and to that colleague for not being able to go, which made it possible for me to go instead :-)