The First International Front-end Conference in Russia

2 days 16 speakers 500 participants

We Unite

Russian and Worldwide Communities

Your chance to participate in a European conference without leaving the country.

Schedule

Host

Vitaly Friedman Smashing Magazine

Vitaly Friedman

Doors open

Opening ceremony

Björn Ganslandt Intuio
Björn Ganslandt

Space Jam! Writing HTML Like It’s 1996

As web developers we spend a good amount of time learning the latest techniques and features. So much that we sometimes forget the web’s history extends beyond IE11. So let’s use those shiny dev tools of ours for a bit of web archeology for a change and explore Space Jam, a website that has been largely unchanged since 1996. Shortly before CSS became a W3C recommendation that year, Warner Brothers released a movie featuring Michael Jordan, Bill Murray and Bugs Bunny taking on a group of aliens in an epic basketball match. A movie accompanied by a website. Exploring its source we’ll see concepts that endured, were discarded and ones that are just about to reemerge 20 years later. Join me in a celebration of animated gifs, backward compatibility and the open web. @ansimorph

Brenda Storer Thoughtbot
Brenda Storer

You Might Not Need Media Queries: How to use CSS Grid Today

The new CSS Grid specification is here! Sure, it’s fun to play with, but is it truly ready or even practical to use for everyday work? As a designer and front end developer at a software development agency, I’ve been using CSS Grid in production for websites since its initial release to browsers in March 2017 and I’m a big fan. In this talk, I’ll share live examples and step by step how you can progressively enhance your site with CSS Grid and write a bulletproof fallback for older browsers (or even continue to use your current grid framework as a fallback), all with pure CSS, no JavaScript required! @brendamarienyc

Break

Oliver Schöndorfer 86/60
Oliver Schöndorfer

You Can Save Web Typography

The web is written language — and it’s also a mess, because most sites don’t present text properly. Typography to the rescue! In this talk you will learn how to boost your next web project with good typography. Several examples and live demos will give you a basic understanding of type and how to apply it with CSS in responsive web design. It’s a talk for developers, designers and everyone in between. Together we can save the web’s typography — one paragraph at a time. @glyphe

Anna Migas Lunar Logic
Anna Migas

Fast But Not Furious: Debugging User Interaction Performance Issues

Perceived performance is not only about fast page loads and delivering the content as early as possible. It is also about all the interactions happening on an already loaded page. Understanding what happens under the browser’s hood can help you avoid potential performance issues. @szynszyliszys

Lunch

Mathieu Henri Microsoft
Mathieu Henri

Ready, Set, Go! Live Coding an Action Game from Scratch

Action games like Lunar Lander or Geometry Wars are super addictive. It turns out they are also really fun to write. What better way to learn a few tricks of the web platform than to livecode an action game from scratch with ES6, Canvas, …without framework or libraries? Ready, set, go! @p01

Shay Keinan
Shay Keinan

Getting Started With ReactVR

WebVR enables web developers to create frictionless, immersive experiences. We’ll explore the core concepts behind VR, see different demonstrations, learn how to get started with React VR and how to add new features from the Three.js library. @shay_keinan

Break

Roman Dvornov Avito
Roman Dvornov

All About the CSS Syntax

At first glance the CSS syntax looks simple, however it has a complicated parts. Many developers dislike CSS syntax for some reasons, therefore various pre-/post-processors and the rest alternatives exist. Lately so many attempts to change CSS and mix it with JavaScript, or even replace with it. Perhaps the problem is that many do not understand the design of the CSS and its beauty. I’ll tell you about the design of the CSS. I’m sure you’ll love the CSS a little more. @rdvornov

Andrey Sitnik Evil Martians
Andrey Sitnik

PostCSS Best Practice

PostCSS has been a huge success: starting from Autoprefixer it has changed the way we think about CSS. Now we can shape styles in any way possible, try new ideas and make great tools. And while the number of PostCSS plugins and use cases is growing there are some things that could be improved. Common mistakes and best practices for plugin authors from the creator of PostCSS itself. @sitnikcode

Closing

Doors open

Opening

Una Kravets Bustle
Una Kravets

CSS Today & Tomorrow

CSS has gone through so many changes in the past few months, let alone years! Let’s go through some tricks we can implement in today’s UI’s and exciting opportunities for the CSS of the future: CSS grid, custom properties, filter effects, text decoration, and Houdini. Be prepared to learn about what CSS had to offer — today and tomorrow. @una

Sergei Kriger SinnerSchrader
Sergei Kriger

Accessibility Testing with a Screen Reader

Screen reader is the most popular tool used by people with visual impairments to browse the Web. As a rule screen readers have a quite high learning curve due to their complexity and different (non-visual) approach of getting information. Let’s figure out best practices of navigating web pages with a screen reader, learn how to use those practices for accessibility testing on both macOS and Windows and understand how to avoid the most common pitfalls when getting started using a screen reader. @_sergeikriger

Break

Lisi Linhart
Lisi Linhart

From Pen & Paper to SVG Animations. An Illustration Adventure

For decades drawing has allowed us to tell captivating stories with only a simple medium like pen and paper. But why stop at pen and paper, when we have an amazing medium like the web, that allows us to turn handdrawn sketches into beautiful interactive and animated SVG illustrations. This talk will explain how art and coding have many similarities and why creating a clear cut between developers and designers can be limiting. We will explore what SVG is and how we can utilise it to turn our illustrations into code. Finally we’ll sprinkle some animation techniques on top to create a delightful interactive illustration in the browser. @lisi_linhart

Andreas Larsen
Andreas Larsen

Easing Gradients, the Squircle of Colors

Gradients in web-design are the color equivalent of Comic Sans in that they are frequently misused and sometimes frowned upon. But what if we could control the color mix and get rid of the hard edges, desaturated midpoints or verbose syntax? We’ll do just that using timing functions, color spaces, postCSS and Sketch plugins with a syntax that is currently a CSSWG draft proposal. @larsenwork

Lunch

José Manuel Pérez Spotify
José Manuel Pérez

Fostering a Web Performance Culture

As users of web applications we like fast, light and delightful products. As developers we struggle trying to balance our ergonomics, user’s experience and company goals, and in many cases we have a hard time raising awareness about this in our teams and companies. In this talk I will give practical tips to foster a web performance culture and make it a priority when building our projects. I will show how to share knowledge with your colleagues, how some companies are promoting performance improvements, and some tools that we can use to make performance part of our workflow. @jmperezperez

Kornel Lesinski ImageOptim
Kornel Lesinski

“Save for Web” Won’t Save You

The web is now mostly browsed on mobile, where bandwidth is costly, and high resolution images slow down loading of pages. Tools, techniques and best practices for delivering high quality images without blowing your performance budget. How to choose most appropriate image formats and how to squeeze maximum performance out of them. @kornelski

Break

Roman Prudnikov 2GIS
Roman Prudnikov

It’s a Mad, Mad, Mad, Mad Search Bar

Search bar is a common way to help users to find whatever they want on your website. Especially it works when your website was developed to help users. However, it isn’t easy to make a search bar for your app which is written in React and Redux. In this talk, I’ll share my experience of developing a search bar component. Starting from the UX of a search bar and to the architecture of the React-component we made. Of course, there’ll be a word about Redux-saga which helped us. After my talk you’ll know how to make search bars accessible and how to rewrite your code once again to make the search bar easy to use not only for developers. @rayproud

Maxim Salnikov
Maxim Salnikov

Is a New Cross-Platform Development Era Coming?

A single codebase for the main mobile platforms applications is a Holy Grail for developers. What could be the real unifying factor for app platforms we have now, both mobile, desktop and web-based? Right! Progressive web apps are gaining momentum. Is this a real new cross-platform silver bullet? @webmaxru

Closing ceremony

For speakers

Where to go in St. Petersburg

First time in St. Petersburg? Not sure where to go? Here are some cool places, the ones we love and recommend. You can find there good coffee, amazing food, interesting bookstores, one cool vinyl store, lovely museums and much more.

Enjoy the city!

Code of conduct

Our code of conduct aims to create a safe and welcoming space for our community members, and to protect every attendee, staff member and speaker from harassment.

Read all code of conduct

Thanks to all these people

Help us to make this front-end festival even better! Become a sponsor. For more info: hi@pitercss.com.