DotCSS 2016

What impressed me was the quality of the speakers.

The most impressive one was Lea Verou the author of the CSS Secrets.

The other speakers were also very talented.

The day started with Varya Stepanova that presents the interest to use “Pattern Libraries” — How to build modular system using a living style guide.

http://varya.me/dotcss-2016/

She talks about problems that you encountered when you want to upgrade your CSS library.

She explains a different approach used at Yandex.

BEM components help to anticipate migration upgrade issue by designing web pages with multiple blocks and not HTML directly.

A style guide can help you to build your web pages with more consistency in the same app or even in multiple apps.

You can also check the coming soon atomic design book from Brad Frost and the SC5 living style guide for more information.

Next Wenting Zhang presents

How to build a simple mustache with only one <div/>?

For a live example, you can check out the amazing CSS Icon project.

She also shows us that you could do a transition animation between two different icons. The design of each icon is really important to keep a smooth animation transition.

This reminds me when I worked on the “transformiconsproject.

Lightning Talks

The one I prefer was in continuity of the Wenting Zhang’s talk. The challenge was to build something by using only one <div/>. Tim Carry succeed to reproduce the DotCSS logo.

When I look at the power of using box-shadow technic to replicate an element, I finally found the img2css project that can convert any image to a CSS element. What?

Next, Phil Walton talks about “the dark sides of the polyfill” — why it is difficult to cover all limit cases when you write a polyfill? 
You can check at the Houdini W3C and why it is maybe the most exciting development in CSS.

After that, kevin mandeville talked about how is it complicated to write an HTML mail. You need to go back to the 1990 web technology and use all kind of hack to work out well between all different mail clients.

As a good starting point, you can check these emails hacks which describe all hack you could use to create a dynamic or interactive email.

After Chris Lilley, the Father of SVG talks about “WebFont Level Up”.

at CSS Conf Asia

Who never try to align vertically numbers in a table and finally use a monospace font?
You can fix that by using font-variant-numeric: tabular-nums

Then, Val Head explains clearly “Why is animation important?”, and how to deal with it from the beginning to more advanced effects, like the LERP timing or the Spring easing function.

You can also check the FramerJS Library that implements this timing function.

Next, Lea Verou explains us the “custom properties” that we better know as the CSS Variables.

at CSS Conf

I really like when she shows us how to get and set CSS variables from JS code. This makes a huge different comparing to a static build with SASS for instance.

And my favourite moment was when she says :

I think that CSS Variables is a kind of answer to all the React people saying that you should put you CSS in JS.

The final talk was made by one of the author of CSS Håkon Wium Lie.

He presents most of subtle rendering issue that CSS can cover, comparing to a print document. The differences are subtle but exist. You need to open wide your eyes on the Typography to see it.

Photo Credits

https://www.flickr.com/photos/97226415@N08/sets/72157677578540525