I took the opportunity to join dotCSS Conference in Paris on a short term since I learned of the event just two days before schedule. It was quite a hustle, but I’m glad I took the opportunity, all turned out well and after all it was a great experience outside the usual Magentoverse.

Article Overview:

About the conference

dotCSS is part of a series of events organized by dotConfernces. There would have been the opportunity to join a couple of workshops/social events as well as the dotJS on the following days which I did not attend. The main focus is obviously heavily frontend related.

The venue

Located in the Heart of Paris, at Boulevard Montmartre, the Théâtre des Variétés is a real eye catcher – surrounded by plenty of typical parisian housing, shops and gastronomy. As I had some spare time in advance, I did a small excursion to Montmartre which is about twenty minutes by public transportation and a foot walk away from the venue. It is always inspiring and offers a great view of Paris. Travel Tip: If you go there, don’t use the “main route” coming from the metro station “Anvers” like everyone else does. Head to one of the westerly or easterly parallel streets to “Rue de Steinkerque” and use one of the stairs seaming Montmartre at its flanks. Especially in tourist peak times you can avoid those annoying and offensive street vendors and enjoy the beautiful and unique parisian streets.

The Théâtre itself is a very charming classical theatre with plushy flaire, balconies, loges and a comfy atmosphere.

Talking concept.

As an adoption of TED inspired talks there are three main sessions consisting of three speaker slots timed roughly eighteen minutes each. That is to encourage speakers to compress their content as much as possible and keep the audience’s attention level high. Also if a topic turns out not as interesting for you, the next one is up very fast.

In addition each speaker is interviewed by the host for two minutes right after the talk. That elegantly gives room for the next speaker to set himself up without being in focus of the crowd.

Between the sessions there is a big break for refueling with coffee and some bakery. Intended to be used for discussing the talks and do some networking it is a great concept in general.

Besides the (for me as newbie to this arrangement) surprisingly good quality of the sessions, I have to say that the breaks did not turn out that well for me. That was mainly due to the issue that the food & beverage area was way too small for the amount of people and it was almost impossible to walk around and get in touch with different attendees.

A small ice breaker

Also inspired by TED the host opened the session with a nice little idea. The attendees were asked to take one minute of time to introduce themselves to the ones sitting next to them. It seemed to be fun. “Seemed” because in my particular case I already was accompanied by my little peer group which I almost literally ran into right at the venue’s entrance. I basically stayed with them during the event due to the described issue.

The talks

I won’t go too much into detail here as I still have to evaluate the input I got. Maybe I will issue some of them in designated posts.

But I found the quality to be very good and consumable, speaker lineup was a good choice and I would like to briefly share the things which impacted me the most.

CSS can haz moustaches

Wenting Zhang gave an amazing talk about the drawing abilities of CSS. This may sound a bit profane first, since all of us should know the basic principles already. But it’s like with using a simple brush: We all know technically how to use that tool, but it is the combination of technique, tons of creativity and devotion what makes a Mona Lisa.

Zhang brilliantly managed to show us within roughly ten minutes of live coding (speakers were very brave about that) how you can leverage CSS to draw custom shapes like this moustache using minimal markup. One element, to be precise. And again it is not the theory of concept to blow your mind. It is those “Whoa! Didn’t think about using THIS for THAT” revelations.

More than “just drawing a moustache” (which by the way was IMHO the most awesome choice on what to draw) Zhang was able to show her passion and joy about her profession in a delightful and entertaining manner. The before mentioned moustache for example is only one of 512 (yes, five hundred and twelve!!!) icons she created as a community project out of plain CSS. Just take a look at http://cssicon.space/. She also offers a great interface for that where you can highlight portions of CSS and the corresponding shape in a preview – giving a better just in time understanding of the underlying concept. In addition you can open your desired icon directly in codepen and start playing.

Check it out, it is insanely awesome!

Polyfills are from hell…

…or: join the dark side, we have cookies!

I have to admit, that I never wasted many thoughts on Polyfills. Neither did I question how they work or what concepts they rely on. I just used them now and then when they seemed to fulfill a certain requirement.

In his talk about “the dark sides of polyfilling CSS”, Phil Walton told us “what the authors won’t”. He managed to guide the audience through the basic principles of polyfilling, based on a seemingly simple example.

In a nutshell, extending CSS functionalities means that you have to mimic, or more precisely reconstruct a good portion of the parsing a browser genuinely does, but doesn’t grant you access to. You are basically re-rendering a lot of stuff and mocking the cascade with a complex logic and many many possible cases – if you want to get it right. That alone sounds ridiculous to me.

He also points out that if you take the shortcut and simplify it (which many authors seem to do) you are basically working against the core principles of CSS, thus potentially breaking the cascade. Which is obviously bad.

As this is really complex, the short talk only scratched the surface and I do not understand many of the very details yet. But it definitely got me thinking. In the future I for sure will thoroughly evaluate the possible use of polyfills in my projects.

Maybe our CSS codebase is not really doomed yet.

To sell you this I have to explain myself a little bit. Briefly spoken I felt an increasing frustration about the current and future state of developing frontend styles. Thing is we are at a tipping point right now. The web as we know it is changing. Today we are at a point where for the first time we have more mobile than desktop devices. Google is already starting to account for that and splitting its search, taking weighing of results into account – depending on the device. Evolution in user behaviour ist fast. It’s on steroids.

But Webdesign and development is not. We still think in fixed pixel dimensions from concept to production although we in fact have a very fluid environment. In modern templating we have to take into account X different devices with Y viewport sizes, Z pixel densities, Za orientations and Zz specific attributes. And in between those there are unlimited possible states fo which it has to adapt seamlessly. I understand that it is really hard to think that abstract and apart of fixed pixel values, dimensions and canvas oriented concepts like in print. I am a designer and developer and I struggle, too. But it is not optional, it is mandatory. At least in the near future.

Our codebases are already increasing almost strongly. Maintainability gets harder, performance is decreasing and costs & efforts are rising, thus making it harder to sell to clients.

The use of tools like preprocessors, originally meant to make things easier and more streamlined, are IMHO no longer optional, they are required to keep effort on certain levels.

Plain CSS to the rescue?

I was kind of blown away by Lea Verous talk on custom properties, a.k.a. variables. I knew, there was a topic on this, but it seemed very far away to me. I think the discussion originates way back in the past and, to be honest, I didn’t follow the development. Maybe it is one of those cases where you as a developer get stuck in your habits, project circles and “filter bubbles”, preventing you from staying tuned on certain topics. When that happens, you may need a slight smack of somebody who does.

For me it was Lea. She live coded a hack of clever ways to use custom properties and showed impressingly what is possible right now. It was quite packed and my mind was like “Whoa, stop! I wanna watch this in slomo again!”

To sum it up quickly, custom properties have the potential to reduce the codebase essentially, improve maintainability and performance again. Combined with the upcoming CSS3 Level 4 selectors, I see the hope that we actually can make CSS fun again [1].

But I can hear you shouting already:

“Wait! What about support and yaddayadda!?”

That was in fact one of the reasons I didn’t follow up. It seemed far away. But as Lea pointed out (and you can actually see using different references): Support is already quite good. The only reasonable candidate lacking support by now is, who would have thought, Microsoft with IE and Edge.

I can still hear you: “Go away! Let’s talk again in 5 years!”

Therefore I was quite excited noting the fact, that Microsoft is currently working on support for Edge and, according to rumors, this will be shipped pretty soon. Well, time will tell – but if it turns out to be true, it certainly IS a good reason to dig deeper into the topic and maybe start productive work in order to promote technology changes we only can benefit from!

So this would finally put moving heavy logic from preprocessors back to CSS in reach.

Thunderstruck

One of the slots was dedicated to lightning talks. I would like to highlight two of them:

It was fun to see how Tim Carry took the drawing abilities of CSS – as described and utilized by Wenting Zhang – to a new level by building the dotCSS logo in plain CSS – enhancing it by an additional grid background. To be mentioned: he used looping features of a preprocessor to save him some work – but still crazy awesome as hell!

The other one was more of an appealing call to all of us designers and developers out there to bring back innovation and diversity to Web Design and UI, as from Matthias Beitls impression almost every Relaunch tends to look and behave somewhat like the Bootstrap demo page. Albeit it might be slightly exaggerated – I see his point and would also encourage people to spread this word.

Conclusion

As I noticed the event just two days before schedule, I didn’t really know what to expect. I took the opportunity and went there very spontaneously. Also it was the first conference outside the usual Magentoverse comfort zone. At the end it was totally worth it. High level talks fit into an efficient and very consumable talk concept presented by an excellent choice of speakers and good mix of attendees (from what I was able to notice) are a sound base for a good conference. I would highly recommend it to everyone who is related.

TL;DR

Great, inspiring Event. If you are into frontend, just go there!

[1] I have to credit Wentin Zhang for doing this pun on twitter. It was quite fun seeing some speakers struggling with actually making this reference on stage or not ^^

Sandro Wagner

Autor: Sandro Wagner

As a trained media designer with a strong focus on frontend development and CMS integration, Sandro Wagner has worked for different leading web agencies and clients, both national and international.
At integer_net, he develops frontend designs for Magento stores, holding the corresponding Magento certificate.