PiterCSS Conference, 16th June 2017 // Review

I’d like to share my experience of visiting PiterCSS Conference on the previous week. Also it was a chance to see my friends and ex-colleagues.

In short — it was awesome!

Two electronic musicians warmed up the audience in the beginning. It was quite unusual to sit in front of them and not dancing. These guys played a really nice music set.

Let me quickly run through the list of talks.

1. Designing Data-Driven Products. Controlled Chaos and Evolution, Anton Shein, Yandex

Nice and informative talk about design approaches in Yandex. They use custom framework to build live prototypes alongside with doing images in Photoshop and Sketch. Yes, they (designers!) write a lot of code and prototype everything with real data. Sometimes they use real data through private APIs.

We do almost the same here at Graph. I do believe, we are on the right way. To move forward we need to build style-guide pages, and we have plans for that.

2. Paint the Web with CSS. On Creating Art with Code, Eva Lettner, ChillBill

Cool and visually rich presentation about how to learn new things. Eva told her story about her way of learning CSS. She just tried to implement some interesting vector images using CSS only techniques.

She said: “Learn something useful doing something useless”. I completely agree with this sentence.

3. Creating Magic With Houdini, Patrick Kettner, Microsoft

One absolutely amazing thing is coming soon. Browser vendors allow us to upgrade any parts of rendering pipeline (parsing, cascade, layout, paint, composite). In general, it looks like polyfills for CSS.

For example, we can implement custom paint and layout logic in near future. If we need something like “masonry” layout inside a particular block, we can inject our custom layout engine, which is written in JS, deep inside browser layout pipeline and write something like this in CSS file:

.cool-widget {
 display: layout(‘masonry’);

I think it’s very promising feature.

I asked Patrick if these enhancers block rendering on loading as ordinary JavaScript do. He told: “No, they don’t. These scripts can be included anythere on the page. And we don’t have to bundle them with other scripts”.

4. Is CSS-in-JS Really That Bad Idea?, Andrey Okonetchnikov, himself

Another “holy war” presentation about approached for implementing styles in SPA. So, Andrey covered some techniques which we can use for styling our SPA components. He gave us some cool tips on these approaches.

5. Chinese Typography on the Web, Hui Jing Chen, Wismut Labs

The presenter showed some examples how sans-serif and serif typefaces can be mapped into Chinese typefaces. Yes, their hieroglyphs also have different styles.

She also talked much about writing direction. The Internet changed Eastern typography traditions because it was invented by Western people. Books and newspapers are using traditional top-to-bottom direction. But web-designers using Western-style left-to-right direction because browser vendors didn’t provide the required features widely. Nowadays the situation is slightly changed and Chinese web-designers trying to get back to the roots.

6. Breaking the Norm with Creative CSS, Agnieszka Naplocha, Adobe

A lovely presentation about clipping, masking, text wrapping and other visual features. It’s worth to see the slides and video.

7. Accessible UX, Manuel Matuzovic, himself

Interesting talk about keyboard navigation. Presenter prepared a demo game. There were 5 control keys: “A”, “W”, “S”, “D”, “Z”. It works very predictably on the standard keyboard layout. With German keyboard layout “Z” jumps to “Y” — still fine and playable. But with French keyboard layout keyboard navigation, the game became completely unplayable.

Many browsers have already implemented a universal way to know which key was pressed without stitching to the letters which are engraved on the keys.

Also, he covered a topic about “lang” attribute and assistive technologies. It’s important to set correct and valid language code there. You can have the content on multiple languages on the page. Feel free to set “lang” attribute for the <div> and other tags if needed.

8. Designing Declarative APIs, Ilya Birman, Bureau Gorbunov

Ilya presented his idea of providing basic configuration parameters using data attributes and classes instead of making explicit JS calls. He believes that widgets must initialize and configure themselves without unnecessary complexity. But also they must provide real JavaScript API for the fine-grained control if needed.

Meaningful thoughts. It seems to me, this idea perfectly fits for standalone widgets and libraries. The one problem here is naming collisions which couldn’t be easily avoided for some cases.

That’s all.

I liked the nice organisation of the event. Everything went smoothly for me personally. I’d love to go there again next year.

By the way, you can find brief text notes in Russian and photos made by Mikhail Baranov at https://github.com/web-standards-ru/web-standards-up/blob/master/2017-06-16_pitercss_conf.md