User Experience Design Agency

Rodesk
DotCSS Paris

The Rodesk Tribe went to the City of Love. Not specifically to find the love of their lives, but to expand the knowledge of their second love - front-end development - during dotCSS.

DotCSS

DotCSS is a yearly event organized by dotConferences, an organisation that wants to bring tech conferences to a higher level of quality. This year, dotCSS took place in the city centre of Paris on the Boulevard Montmartre in the fairytale-like Théâtre des Variétés. During this day we were treated to eight awesome presentations by some of the most prominent developers worldwide, with a great variety of topics. Even though all the talks were very interesting, we would like to highlight three of them.

Chris Lilley – Webfonts level up!

Chris Lilley is a technical director at W3C and next to being a co-author of PNG he’s called the father of SVG. He chaired the group that developed @font-face and co-developed WOFF and this impressive list could go on forever. This man is a living legend! Given this list it will not come as a surprise to you that his talk was about web fonts, or, to be more specific, about levelling up your web fonts!

The structure of his talk was very pleasant as it was very easy to follow along. First he covered some typographical basics to get us familiar with the terminology. Do you know the difference between a character and a glyph? And the difference between a font-family and a font-face? After running through the basics he prepared a little quiz for us to be sure we were all on the same page.

This man is a living legend!

Next, we went in for the more advanced stuff: Opentype Features. Opentype Features are optional stylistic controls you can control with CSS using the font-variant property. Although it has very poor support (Firefox 34+ & Safari 9.1+) it’s a nice way to create more exciting and accessible typography within your pages. The font-variant property makes things like kerning and ligatures possible.

And, last but not least, he gave us a peek into the future of web fonts, things we can’t actually use yet, but will be available to us in the future. Fonts aren’t always black and white. Back in the days monks illustrated the most awesome glyphs, called illuminated manuscripts. And we as designers and developers definitely want illuminated fonts…well not really, but we do like more control over our web fonts and their design. Think about emoji (yes they’re also fonts), and multicoloured type. To achieve this he showed us a couple of techniques, which are all still very experimental and not production ready yet.

If you would like to know more about the techniques he used you should definitely check out his presentation right here: https://youtu.be/Mho5DIT6MWM

Talk: Val Head

Val Head is a multi faceted designer with a big affection for math and web animations. She occupies herself with a lot of worldwide talks and consulting. Giving talks is what she excels at; Val has a lot of energy when she is on stage and is good at getting the crowd excited. Val Head gave a nice talk about the importance of easing and how it actually works.

At Rodesk we are experiencing a shift in the web animation community. Page transitions and easing seriously benefit the user experience. We are highly aware of adopting this shift in our own projects, and we have a lot of experimenting with animations and new techniques going on. 

Google already taught us about the importance of delivering good user experience with animated elements, with their great Material Design Guidelines. Val Head dived deeper into the fundamentals of easing and how they actually work. She first showed us a site we already use during our development and design traject. Cubic Bezier gives you great handlebars to test different easings together with your design specialist. This great site is created by Lea Verou.

What we didn’t know is what happens when an easing animation starts. She walked us through the process with a small workshop where she moved a drawing around a canvas. We usually create easings with CSS but she did something completely different. Val Head used Javascript calculations to create different easings. It’s something we wouldn’t use in projects, but with Val Head’s explanation we learned how a CSS easing animation works.

If you want to know more about the early beginning of easing or easing in general, you should definitely check out Robert Penner’s and Val Head’s site. We were definitely triggered to do more with animations and easing in general.

Talk: Lea Verou

Lea Verou is one of the biggest names within the front-end development industry today. She is an invited expert in the CSS Working group, she is currently doing research in human-computer interaction at MIT CSAIL, and she has written a book called ‘CSS Secrets’. In short, she has done and is doing a lot of interesting stuff within the front-end world.

Her talk was about using CSS variables to include more flexibility within your CSS. In some ways these variables have a lot in common with SASS or LESS, but they have some very nice quirks of their own, including the ability to (sort of) create your own properties.

She also showed a nice demo in which she manipulated SVG paths by using CSS variables and calc. To me, though, the most interesting takeaway from this talk is the way you can use CSS variables in combination with Javascript.

Lea Verou is one of the biggest names within the front-end development industry today

Of course writing CSS in Javascript is possible, but it often looks pretty ugly if you don’t know what you’re doing, and if you have different developers working on Javascript and CSS it’s easy to get inconsistencies. By only manipulating these CSS variables in Javascript, and handling all your styling within the CSS, your code will look a lot cleaner and consistent.

It’s still getting adopted by modern browsers (Microsoft Edge, we’re looking at you), so if your code needs to be supported by older browsers this might not yet be the thing for you. However, we think that CSS variables definitely have enormous potential in the future.

If you want to know more about the things that Lea Verou does, you can visit her website here.

Exploring Paris

After the talks were done, we decided to head into the city. We went to a lot of the big attractions Paris has to offer, including the Eiffel Tower, the Louvre, the Sacré-Coeur and the Arc de Triomphe. We particularly enjoyed our time around the Bastille area, which, while still having a number of tourist traps, is generally a little less crowded.

In the 36 hours we spent in Paris, we travelled 32 kilometres on foot, which led to us being quite tired (but very content) by the end. We saw a lot, but we also realize that there is still so much Paris offers that we didn’t got to see.

Conclusion

We definitely recommend visiting DotCSS next year. Unfortunately we didn’t get to visit DotJS, but this is definitely something we’re interested in visiting on a future occasion. We would very much like to thank all the friendly people at Dot for making DotCSS happen, the speakers for providing a lot of interesting ideas, and the friendly people of Paris for making us feel welcome.

Paris Impression

Paris Impression

Merci paris

Till we meet again

<span>Merci</span> paris
Crossing my t's and dotting my i's
Bart van der Waerden
  • Bart van der Waerden
  • Journal /

Crossing my t’s and dotting my i’s

Today is Tuesday April 25 - a Tuesday unlike any of its namesakes I've seen over the past few years. Today is the last Tuesday I get to call myself a Rodesk UX developer. In fact, this is officially my last Tuesday ever spent as a Rodesk tribesman. Why, you ask? Well, today is the last day working here at Rodesk.

Read more

Is Your Digital Time Well Spent?

8 March 2017

Memoirs of an intern

3 February 2017

Lo and Behold: Reveries of the Connected World

13 January 2017

Rodesk Recap 2016

22 December 2016
#1 Never lose your curiosity Read our manifesto