В Санкт-Петербурге 8 и 9 июня прошла фронтенд-конференция pitercss_conf. Попробуем рассказать и передать атмосферу мероприятия, как это было.

Небольшое погружение в атмосферу: успеваем к открытию.

Что такое pitercss_conf?

Это мероприятие, которое второй год объединяет фронтенд-разработчиков со всего мира. В этот раз всех ждали два дня погружения в доклады, горячие обсуждения, новые знакомства и обмен опытом. Язык конференции — английский.

В прошлом году бэйджи были уникальны по цветам, а в этом каждый участник получал свой уникальный паттерн и сочетание цветов. Кое-кто даже нашёл способ подобрать паттерн по своему вкусу.

Пойман енот с бэйджем
Пойман енот с бэйджем.

Программа

Шестнадцать докладов о технологиях и лучших практиках от разработчиков: много внимания уделили производительности, доступности, прошлому, настоящему и будущему CSS. Вёл конференцию и обсуждал животрепещущие вопросы с докладчиками — Виталий Фридман из Smashing Magazine.

Виталий Фридман
Виталий Фридман открывает pitercss_conf.

Бьорн Гансландт (Intuio)

Space Jam! Writing HTML Like It’s 1996

Бьорн Гансландт
Бьорн Гансландт на pitercss_conf, читать в Твитере.

Вместе с ним заглянули в прошлое: на примере промо-сайта фильма «Космический джем» из 1996 года провели археологические веб-раскопки. Увидели что осталось с нами, что не прошло проверку временем, а что стало своего рода пророчеством.

Бренда Сторер (Thoughtbot)

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

Бренда Сторер
Бренда Сторер на pitercss_conf, читать в Твитере.

Показала, как постепенно внедрить гриды в свой проект и сохранить при этом доступность для браузеров, которые их не поддерживают.

Оливер Шондорфер (86/60)

You Can Save Web Typography

Оливер Шондорфер
Оливер Шондорфер на pitercss_conf, читать в Твитере.

Многие сайты в интернете до сих пор могут отображать текст нечитаемым. Оливер не согласен с таким положением дел. Поэтому он предложил обратить внимание на типографику. Показал как мы можем создавать адаптивные и читаемые сайты, следуя общим правилам.

Анна Мигас (Lunar logic)

Fast But Not Furious: Debugging User Interaction Performance Issues

Анна Мигас
Анна Мигас на pitercss_conf, читать в Твитере.

Заглянули под капот браузера вместе с Анной, чтобы понимать как повысить производительность нашего проекта. Ведь кроме скорости загрузки страницы, есть ещё много нюансов, их и обсудили.

Матьё Хенри (Microsoft)

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

Матьё Хенри
Матьё Хенри на pitercss_conf, читать в Твитере.

Увлекательно провели время: в реальном времени Матьё написал экшен-игру с нуля на ES6, используя Canvas без фреймворков и библиотек.

Шай Кейнан

Getting Started With ReactVR

Шай Кейнан
Шай Кейнан на pitercss_conf, читать в Твитере.

Доклад был посвящён возможностям WebVR. Он показал основные концепции VR и его возможности. Вместе заглянули в React VR и узнали как из библиотеки Three.js добавить новые функции.

Роман Дворнов (Avito)

All About the CSS Syntax

Роман Дворнов
Роман Дворнов на pitercss_conf, читать в Твитере.

Многие разработчики не любят синтаксис CSS, поэтому существуют пре-пост-процессоры и остальные альтернативы. Роман выдвигает гипотезу, что возможно, многие не понимают, как он устроен и рассказал о том, за что CSS стоит полюбить.

Андрей Ситник (Evil martians)

PostCSS Best Practice

Андрей Ситник
Андрей Ситник на pitercss_conf, читать в Твитере.

В противовес предыдущему докладу, Андрей рассказал о PostCSS, который помогает сформировать стили, пробовать новые идеи и создавать инструменты. Рассказал об ошибках при использовании PostCSS и дал ценные рекомендации для авторов плагинов.

На этом закончился первый день, желающие отправились в бар, чтобы пообщаться и отдохнуть. Фотографий оттуда у нас нет: что было на афтерпати, остаётся на афтерпати.

Окончание первого дня конференции
Насыщенный первый день закончился — можно отдохнуть.

Кстати, если вдруг у вас возник вопрос, что произошло с буквами на сцене, то ответ простой: CSS.

Организатор укрощает стили в реальной жизни
«Укрощение стилей организатором в реальной жизни.»

Утром второго дня все снова встретились в зале, чтобы послушать доклады c новыми силами.

Юна Кравец (Bustle)

CSS Today & Tomorrow

Юна Кравец
Юна Кравец на pitercss_conf, читать в Твитере.

Показала CSS-трюки, которые уже можно реализовать в своём интерфейсе и заглянули в возможности для CSS будущего: гриды, пользовательские свойства, фильтры, оформление текста и проект Гудини.

Сергей Кригер (Sinnerschrader)

Accessibility Testing with a Screen Reader

Сергей Кригер
Сергей Кригер на pitercss_conf, читать в Твитере.

Программы для чтения текста с экрана — это самый популярный инструмент, для людей с нарушение зрения в интернете. Сергей показал лучшие методы навигации по веб-страницам с помощью таких программ, а также как тестировать доступность для MacOS и Windows. Рассказал, о самых частых ошибках и как их избежать.

Лизи Линхарт

From Pen & Paper to SVG Animations. An Illustration Adventure

Лизи Линхарт
Лизи Линхарт на pitercss_conf, читать в Твитере.

Доклад был посвящён тому, что искусство и программирование имеют много точек пересечения и почему жёсткие границы между разработчиком и дизайнером могут стать преградой в развитии. Лизи показала как SVG может помочь превратить изображения в код и как создать интерактивную иллюстрацию в браузере.

Андреас Ларсен

Easing Gradients, the Squircle of Colors

Андреас Ларсен
Андреас Ларсен на pitercss_conf, читать в Твитере.

Есть мнение, что градиенты в веб-дизайне — это как Comic Sans. Андреас показал, что будет если мы сможем контролировать цветовой микс и избавимся от жёстких краёв, опираясь на проект CSSWG.

Хосе Мануэль Перес (Spotify)

Fostering a Web Performance Culture

Хосе Мануэль Перес
Хосе Мануэль Перес на pitercss_conf, читать в Твитере.

Ещё один доклад был посвящён важной теме — производительности, теперь с точки зрения культуры разработки. Рассказал как поделиться знаниями с коллегами и как другие компании поддерживают идею повышения производительности, какие инструменты могут пригодиться.

Корнель Лесински (Imageoptim)

“Save for Web” Won’t Save You

Корнель Лесински
Корнель Лесински на pitercss_conf, читать в Твитере.

В продолжение разговора, посмотрели на инструменты, методы и лучшие практики для оптимизации изображений для мобильных устройств с минимальной потерей качества.

Роман Прудников (2gis)

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

Роман Прудников
Роман Прудников на pitercss_conf, читать в Твитере.

Роман поделился опытом разработки поиска начиная с UX и архитектуры React-компонента. Рассказал как сделать поиск доступным и как переписать свой код ещё раз, чтобы сделать поиск удобным для всех, а не только для разработчиков.

Максим Сальников

Is a New Cross-Platform Development Era Coming?

Максим Сальников
Максим Сальников на pitercss_conf, читать в Твитере.

Единая база кода для приложений мобильных платформ — это священный Грааль для разработчиков. Максим в докладе порассуждал о том, как прогрессивные веб-приложения могут стать решением существующих кросс-платформенных проблем.

Конечно, это сжатый пересказ и мы понимаем, что тем, кто пропустил, интересно было бы послушать самим. Чуть позже появятся записи выступлений, так что следите за обновлениями от организаторов.

Кроме этого

Экран в холле
Экран в холле.

Всё проходило в пространстве «Среда» в центре города. В зале проходили доклады, в холле и лаунж-зоне также можно было слушать выступления, благодаря прямой трансляции из главного зала. Также в холле расположились стенды партнёров предлагавшие отдохнуть или напрячь мозги.

Зал, где проходила конференция
Доклад можно послушать в зале.
Уединённое место, где тоже можно было послушать доклад
Или в более уединённом формате с розетками под боком и мягкими мешками.

СКБ Контур предлагали разработчикам попробовать силы и переделать форму обратной связи в Sketch, а также решить задачки. А на второй день угощали всех пришедших смузи и мороженым.

Фотография со стендов конференции
Факт со стенда: не каждый разработчик решался взяться за редизайн, большинство выбирали решать задачи.

Ребята из Avito предлагали отгадать по фотографии реального товара их название и предназначение. Загадочных товаров хватило на два дня.

Фотография со стендов конференции
К середине второго дня неотгаданных товаров почти не осталось.

Digital Banana показывали проекты своих учеников. Желающие могли подсказать детям идеи для их развития.

Выпускник Digital Bananaс презентовал свой проект
Выпускник Digital Bananaс удовольствием презентовал свой проект по количеству потребляемой жидкости.

У наших ребят из «Лиги А.» можно было отдохнуть и поиграть в приставку, сразившись, например, в FIFA.

Организатор конференции играет в приставку
Енот-организатор обнаружен!

Не пустовал кикер, там можно было постоянно наблюдать жаркие командные противостояния разработчиков из разных компаний и даже организаторов конференции.

Игорь радуется победе
Игорь ликует!

Спасибо

Лица организаторов: первый день
Лица организаторов: первый день.
Лица организаторов: день второй
Лица организаторов: день второй.

В этом году организаторам удалось реализовать идею спонсорских билетов: мы вместе с Google, Mozilla и Uploadcare предоставили возможность посетить конференцию тем, кто очень хотел, но по каким-то причинам не мог или не решался.

Как делали коллективное фото всех участников
Ждём коллективное фото всех участников со сцены.

Всё получилось благодаря командной работе всех: организаторов, докладчиков, волонтёров, участников и всех тех, кто приложил лапу к прошедшим двум дням и невероятной атмосфере. Спасибо всем.

Почти коллективное фото с Боссом
Собрать всех енотов на одной фотографии оказалось непосильной задачей, но это не беда: почти коллективное фото с Боссом.