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

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

Многие из вас видели 3D-маппинг-шоу, но не многие из вас знают, что маппинг можно делать и с помощью web-технологий.

В этом докладе будет обобщен опыт автора по созданию проекций и арт-инсталляций для фестивалей искусств и IT-конференций на основе WebGL и CSS3D. Мы поговорим о подходах, которые можно использовать, а также о челленджах и преимуществах использования JavaScript в области создания интерактивного арта.

* Интерактивные проекции. Примеры.
* Почему web-технологии для проекций?
* Как это работает?
- CSS3D, метод, пример.
- WebGL, метод, пример.
* Преимущества.
* Проблемы.
* Как начать?

Ежегодный опрос https://stateofcss.com/ навёл много шуму, так как большое количество технологий, указанных в нём, оказалось для разработчиков новинкой. Хотя большинство из этих технологий уже используются теми, кто об этом знает.

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

Тема выгорания в последнее время стала популярнее, чем новость о релизе новой технологии. Почему? Хороший вопрос, но в докладе речь пойдёт не об этом.

Я не планировала стать лицом выгорания и нести эту тему в массы. Но так вышло, что я выгорела, причём когда это ещё не было мейнстримом.

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

В Tomsguide пишут "It's Time to Kill Your Eight-Character Password". Но нет, настало время вообще избавиться от паролей, навсегда!

В этом докладе вы узнаете, используя FIDO2 и новый стандарт WebAuthn, можно реализовать passwordless-аутентификацию, так что уже не придется запоминать длинные комбинации, тем не менее рискуя, что переиспользованные пароли могут быть украдены с других сайтов. Как с помощью биометрической аутентификации можно в перспективе многократно увеличить конверсию, избавив пользователей от мучительной необходимости вводить пароли и одноразовые SMS на мобильных устройствах.

* Что делать, если хочется больше ванилы?
* Готовы ли веб-стандарты для решения прикладных задач разработки?
* Есть ли жизнь после фреймворков?

The beast is alive! Have you optimized your JavaScript/CSS delivery for performance with HTTP/2 yet? How are you using service workers and server workers these days? What about critical CSS and Server Push? Are you compiling your code base into WebAssembly yet? How do you feel about ASCII-alike CSS Grid layout with polyfluid sizing and ch unit? Have you ever tried to work around nested CSS Custom Properties, untamed 3rd-party scripts, painful web font reflows, shady CSS Houdini tricks and multi-dimensional variable fonts? Well, let’s bring it on!

Take the techniques with a grain of salt — we do not take responsibility for sleepless nights and nightmares caused by the content of this session. Beware: you will not be able to unlearn what you’ll learn in the session!

Говоря о WebGL, часто имеют в виду three.js или другие похожие фреймворки. Новичок на поле веб-технологий WebAssembly уже начинает ассоциироваться с языками C или Rust. А как же, ведь нужные утилиты и обёртки WebGL и WebAssembly сложны и непонятны. Или же нет?

Мы познакомимся с самыми основами WebGL и WebAssembly и напишем на их основе несложное визуальное приложение, используя только базовое API.

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

Будет рассказано об истории создания одной анимации от получения макета до сдачи клиенту. История включает в себя язык WebGL, Three.js, GLSL, Canvas 2D, графы и немного математики.

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

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

UI банкомата на стандартных веб-технологиях — возможно ли это? С какими проблемами мы сталкивались при разработке и тестировании, с чего начинали, какой стек выбрали, как дружили между собой софт и железо, и к чему в итоге удалось прийти.

Что делать, если ваше приложение собрано по фэн-шую, но несмотря на это, оно все еще остается слишком тяжелым? Настало время обратить внимание на старые браузеры.

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

- Какое бывает железо, что умеет, как с ним разговаривать.
- Способы физического сопряжения с PC.
- Какие варианты коммуникации есть у приложения на JS.
-- Пакет serialport + Firmata.
-- Пакет serialport + самописная прошивка на C++.
-- Espruino: программируем контроллер прямо на JS.
-- Raspberry Pi: обычный Linux-сервер, но с управляемыми ногами.
-- HTTP в локальной сети.
-- HTTP и MQTT через облако.

Недавно мы запустили обновленную версию 2gis.ru с новой 3D-картой, работающей на WebGL. Заходя на сайт, вы видите готовую картинку. Но карта — сложный механизм, в нем скрыто множество интересных деталей, о существовании которых можно даже и не подозревать.

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

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

Наша компания специализируется на порталах для СМИ, у нас в портфолио их несколько. Самый известный из них - Life.ru. Хочу рассказать историю про то, как мы создавали для него визуальный редактор, с какими проблемами столкнулись, и как это всё вообще работает.

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

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

Жило-было приложение для подписи документов. Оно было под все популярные платформы, и его основой было C++ ядро. И однажды поступила задача сделать веб-версию этого приложения.

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

Все мы пишем веб-сайты, приложения. Ими пользуются сотни, тысячи, десятки тысяч людей. В HeadHunter нагрузка достигает в пике 4000 RPS.

* Как понимать, что у пользователя "все хорошо" в техническом плане?
* Как сократить время реагирования на проблемы с клиентским приложением?
* Как мониторить баги?
* Как оценить, какая страница грузится долго или какой компонент выполняется неэффективно?
* Влияют ли эти проблемы на бизнес-показатели продукта и зачем этим заниматься?

Давайте разбираться.

Андрей Ситник, создатель популярных Автопрефиксера, PostCSS, Браузерлиста и Nano ID расскажет про свой опыт продвижения опенсорс-проектов.

Доклад будет полезен опытным разработчикам, которые хотят начать свои опенсорс-проекты. Также доклад будет полезен новичкам — понимая методы маркетинга в опенсорсе, легче защититься от «хайпа» и выбирать технологии по их пользе для проекта.

Илья - крутой разработчик! Он многое знает и многое умеет, а главное, он умеет быстро поставлять ценность для пользователя и для бизнеса. Илья сделал неимоверное количество фич. Вроде все довольны и так бы оно и продолжалось, если бы, однажды, Илья не сказал: "Тут совсем плохой код, я буду делать фичу минимум полгода. Давайте лучше все перепишем!". Бизнес даёт добро и Илья проваливается на полгода в переписывание, которое завершается полным провалом.

Почему же так произошло? Илья никогда не обращал внимание на качество кода и создавал технический долг. Это его и погубило.

Эта типичная история для IT. Эта история оказалась реальностью и для нас. В докладе я расскажу, как мы стали качественнее пилить фичи, и какие конкретно шаги предприняли в направлении культуры качества.

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

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

За время работы в Альфа-Банке — от продукта к продукту — я развивал и оттачивал приложения, делая их лучше и удобнее в разработке; менял библиотеки, стараясь снизить порог вхождения для новых сотрудников, совершенствовал существовавшие и предлагал новые практики и подходы. В этом докладе я хотел бы рассказать о пройденном пути и опыте: показать, как устроен стек, объяснить, зачем используем NodeJs и что помогает сделать нашу работу легкой и непринужденной.

Передвигать вещи для нас настолько естественно, что мы перенесли это из мира вещей в веб. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице. А что, если бы мы не могли видеть экран? Было бы перетаскивание элементов все еще возможно и настолько же удобно, как прежде? Смогли бы мы выполнить все эти задачи без зрения?

В этом докладе вы узнаете основные принципы drag&drop-паттерна и как создавать перетаскиваемые элементы на странице доступными для людей с ограниченным зрением.

В начале разберу архитектуру Apollo Client'а и Relay. Расскажу, что такое "волосатый" GraphQL, чем он полезен и чем отличается от RestQL. Покажу, как правильно использовать GraphQL на стороне клиента в react-apollo, как писать запросы «снизу-вверх» через фрагменты (прям как в фейсбуке). Все это дело подружу с TypeScript'ом, чтоб получить суровый интерпрайзный статический анализ.

Рано или поздно разработчикам приходится сталкиваться с печатью в PDF: обычные страницы, счета и договора. Есть множество текущих решений, которые вполне выполняют свою задачу. Но что делать, когда нужно очень быстро и качественно печатать красивые PDF-файлы? А что, если поступила задача сделать предпросмотр PDF перед печатью с возможностью онлайн-редактирования? Вот об этом и многом другом будет этот доклад.

В нашей команде Яндекс.Денег мы выработали подход разработки и дизайна веб-интерфейсов.

Я покажу, как легко мы собираем живые интерфейсы и передаём их в продакшн, как создаётся дизайн Яндекс.Кассы и о нашем инструментарии.

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

Сodemode - это скрипт, работающий с абстрактным синтаксическим деревом (ast) JavaScript. Цель codemode - автоматизировать рефакторинг кода.

В своем докладе я расскажу про jscodeshift - тулкит для написания codemodes. Покажу и разберу несколько примеров codemodes, начиная с простых и заканчивая теми, которые могут быть использованы в вашем проекте. Вы увидите, что работа с ast на самом деле не такая уж и сложная задача, как может показаться на первый взгляд, и что овладение этим инструментом может дать очень сильный прирост вашей эффективности.

Я расскажу про один из самых простых способов реализации дизайн-системы в коде — токены. Это набор базовых переменных визуального языка (цвета, шрифты, отступы и т.п.), который передаётся в любой компонентный фреймворк. Это позволяет проще управлять визуальным стилем продуктов и дешевле внедрять на практике.

Существует ряд библиотек, позволяющих анимировать SVG: Snap.svg, Paper.js, Velocity.js и другие. Но им не хватает наглядности. Это делает работу над сложной анимацией прерогативой опытных креативных разработчиков и дистанцирует их от дизайнеров.

Поэтому наша команда взяла на вооружение еще один инструмент для работы над векторной анимацией: Adobe After Effects. В сочетании с плагином Bodymovin он позволяет создавать анимацию в формате json и воспроизводить при помощи библиотек Lottie не только в браузере, но и в мобильных приложениях на разных платформах.

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

Я расскажу о нашем опыте использования plugin’а, с какими сложностями мы столкнулись во время сложного анимационного проекта и как преодолевали их.

А/Б-тестирование — это способ измерить эффективность нового функционала путем сравнения.

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

Я расскажу о нашей инфраструктуре для работы с А/Б-экспериментами, как мы её используем, с какими проблемами сталкивались и как их решали.

Если вы пытались научить машину чему-либо, если зачитали от корки до корки Machine Learning for Dummies, если вы заплатили за самые дорогие курсы по Deep Neural Networks, но у вас так ничего не получилось... то этот доклад для вас!

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

Мы научимся работать с TensorFlow.js - javascript-библиотекой для работы c Deep Neural Networks, отлаживать нейронные сети, генерировать данные для обучения и решать задачи, о решении которых вы раньше не могли и мечтать.

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

В докладе мы обсудим преимущества и недостатки различных подходов к стилизации приложений в контексте дизайн-системы Яндекс.Маркета, обслуживающей несколько сильно различающихся проектов. Я поделюсь нашей историей этого непростого приключения в поиске Стилевого Грааля, когда Performance не мешает Developer Experience, и также расскажу про наши решения и инструменты, позволяющие проводить гибкие и сложные A/B-тесты с помощью стилизации и Dependency Injection.

Представьте, что перед вами стоит задача повесить полку. Как вы её будете решать? Можно сразу взяться за любимый инструмент: молоток и гвозди. Если вы Senior MolotokJS Developer, то сможете молотком забить не только гвозди, но и шурупы. А можно выделить время на исследование, нужна ли вам вообще полка.

Так и во фронтенде. Фреймворк — всего лишь инструмент. Как у любого инструмента, у него есть задачи, для решения которых он был создан. В своем докладе я поделюсь, на что следует опираться при выборе подходящего инструмента и как перестать тратить на это время команды и деньги бизнеса.

Хорошая и уместная анимация может произвести впечатление, объяснить пользователю какое-то действие или просто быть предметом искусства.

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

Если к качеству продукта предъявляются строгие требования, его разработка рискует стать долгой и дорогой. Несмотря на большое количество CI/CD-инструментов, создать удобное и одновременно полезное решение, которым бы пользовалась вся команда, непросто.

В докладе я расскажу, каким образом мы кратно ускорили релизный процесс фронтовой js-библиотеки FormBuilder, не потеряв в качестве.