Владимир Гриненко "Инструменты фронтенд-разработчика"Yandex
Вместо того чтобы служить роботам, мы пишем код для людей: его приятно писать, удобно читать и легко понимать. При этом нам больше не нужно делать рутинную работу, всё автоматизировано специально разработанными инструментами. Они превращают красивый код в эффективный. Мы заставили роботов работать на разработчика, о чём и хотим рассказать. Кроме того, в докладе прозвучат идеи и советы, как написать свой собственный инструмент, если вам не достает существующего арсенала.
Владимир Гриненко "Инструменты фронтенд-разработчика"Yandex
Вместо того чтобы служить роботам, мы пишем код для людей: его приятно писать, удобно читать и легко понимать. При этом нам больше не нужно делать рутинную работу, всё автоматизировано специально разработанными инструментами. Они превращают красивый код в эффективный. Мы заставили роботов работать на разработчика, о чём и хотим рассказать. Кроме того, в докладе прозвучат идеи и советы, как написать свой собственный инструмент, если вам не достает существующего арсенала.
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ontico
РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 5 июня, 11:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2514.html
Нам постоянно нужно от CSS больше того, что в нём (или браузерах) есть прямо сейчас.
История, рассказывающая о том, какими способами мы решали(ем) проблемы недостающих нам возможностей (css frameworks, css polyfills, preproccessors, “post”-proccessors) и о Houdini, который должен положить конец этой ерунде, позволив описывать разработчикам с помощью JavaScript не просто полифилы, а полноценные реализации, не мешающие производительности.
Расскажу о том, что мы можем контролировать в CSS сейчас, что сможем с Houdini, и что в нем есть на текущий момент с примерами демок.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.Dmitry Dudin
А почему так медленно? Что не так? Чек-лист типовых проблем с загрузкой и отрисовкой. Миллисекунды = Деньги! Инструменты для проверки оптимальности загрузки веб-страниц. Сжатие всего и вся, рекомендации по подключению css и js, клиентские и серверные кэши и их виды, оптимизация картинок, svg и webP, lazy loading, шрифты, dns-lookup, cdn, gzip и многое другое. Особенности восприятия скорости зaгрузки для мобильных браузеров. А как сделать быстро? Общие советы и немного магии с google pagespeed для nginx и apache.
Олег Мохов "Драматическая история одной маленькой промостранички"Yandex
Промостраницы — это отдельный жанр в вёрстке. Маленькие, лаконичные и обязательно с фишкой — вот всё, что обычно они из себя представляют. Чаще всего вёрстка промостраницы длится не более двух дней. Так должно было быть и на этот раз, но...
Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)Ontico
РИТ++ 2017, HighLoad Junior
Зал Сингапур, 6 июня, 10:00
Тезисы:
http://junior.highload.ru/2017/abstracts/2475.html
Когда проект растёт, возникает множество проблем с масштабируемостью сервиса: БД, сервера приложений, хранилище. Однако, не менее важной становится клиентская часть веб-приложения.
Во-первых, грамотная клиентская оптимизация позволяет повысить скорость работы сервиса для пользователей и, следовательно, увеличить их лояльность, которая конвертируется в деньги.
...
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но в обычной ситуации при выпуске новой версии сайта у пользователя сбрасывается кеш, и ему приходится заново загружать все статические ресурсы, что увеличивает время загрузки страницы. Как сделать так, чтобы пользователь скачивал только действительно изменившиеся ресурсы? В докладе речь идет о простом, но мощном опенсорсном инструменте borschik (https://github.com/veged/borschik), который поможет ускорить загрузку в условиях постоянных релизов.
React со скоростью света: не совсем обычный серверный рендерингTimophy Chaptykov
Расскажу о небольшом исследовании, в котором мы думали о том, можем ли мы себе позволить использовать React для отдельных элементов на сайте, как устроен серверный рендеринг в VK; и получилось ли связать одно с другим. Упомяну о строковых шаблонизаторах, виртуальной DOM и LR-парсерах.
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ontico
РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 5 июня, 11:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2514.html
Нам постоянно нужно от CSS больше того, что в нём (или браузерах) есть прямо сейчас.
История, рассказывающая о том, какими способами мы решали(ем) проблемы недостающих нам возможностей (css frameworks, css polyfills, preproccessors, “post”-proccessors) и о Houdini, который должен положить конец этой ерунде, позволив описывать разработчикам с помощью JavaScript не просто полифилы, а полноценные реализации, не мешающие производительности.
Расскажу о том, что мы можем контролировать в CSS сейчас, что сможем с Houdini, и что в нем есть на текущий момент с примерами демок.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.Dmitry Dudin
А почему так медленно? Что не так? Чек-лист типовых проблем с загрузкой и отрисовкой. Миллисекунды = Деньги! Инструменты для проверки оптимальности загрузки веб-страниц. Сжатие всего и вся, рекомендации по подключению css и js, клиентские и серверные кэши и их виды, оптимизация картинок, svg и webP, lazy loading, шрифты, dns-lookup, cdn, gzip и многое другое. Особенности восприятия скорости зaгрузки для мобильных браузеров. А как сделать быстро? Общие советы и немного магии с google pagespeed для nginx и apache.
Олег Мохов "Драматическая история одной маленькой промостранички"Yandex
Промостраницы — это отдельный жанр в вёрстке. Маленькие, лаконичные и обязательно с фишкой — вот всё, что обычно они из себя представляют. Чаще всего вёрстка промостраницы длится не более двух дней. Так должно было быть и на этот раз, но...
Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)Ontico
РИТ++ 2017, HighLoad Junior
Зал Сингапур, 6 июня, 10:00
Тезисы:
http://junior.highload.ru/2017/abstracts/2475.html
Когда проект растёт, возникает множество проблем с масштабируемостью сервиса: БД, сервера приложений, хранилище. Однако, не менее важной становится клиентская часть веб-приложения.
Во-первых, грамотная клиентская оптимизация позволяет повысить скорость работы сервиса для пользователей и, следовательно, увеличить их лояльность, которая конвертируется в деньги.
...
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но в обычной ситуации при выпуске новой версии сайта у пользователя сбрасывается кеш, и ему приходится заново загружать все статические ресурсы, что увеличивает время загрузки страницы. Как сделать так, чтобы пользователь скачивал только действительно изменившиеся ресурсы? В докладе речь идет о простом, но мощном опенсорсном инструменте borschik (https://github.com/veged/borschik), который поможет ускорить загрузку в условиях постоянных релизов.
React со скоростью света: не совсем обычный серверный рендерингTimophy Chaptykov
Расскажу о небольшом исследовании, в котором мы думали о том, можем ли мы себе позволить использовать React для отдельных элементов на сайте, как устроен серверный рендеринг в VK; и получилось ли связать одно с другим. Упомяну о строковых шаблонизаторах, виртуальной DOM и LR-парсерах.
За последние 7 лет появились десятки подходов к тому, как организовывать работу со стилями на веб-проектах: от БЭМ до CSS Modules. Огромное распространение получила экосистема PostCSS. Многие из нас перешли на React. Пришло время разобраться, что из инструментов взять с собой в будущее, а что забыть, как страшный сон.
Контроль качества верстки или как начать делать MakeupTimophy Chaptykov
Проблема разработки сложного веб-приложения с точки зрения фронтенда — быстрорастущая комбинаторная сложность состояний приложения. Нужно строить рабочий процесс так, чтобы не сойти с ума, и желательно получать удовольствие от работы.
Доклад о том, как команда онлайн-версии 2ГИС развивала рабочий процесс разработки интерфейсов, и как мы стали заниматься мейкапом.
Мейкап — это инструмент для приятного контроля за качеством верстки на веб-проектах.
24. JPEG
Для большинства фотографий подойдет 75.
Артефакты будут видны на сложных текстурах
(например, шум).
Для ретины 51 при двукратном размере.
Всегда progressive.
31. Чек-лист
— Изображение актуального размера
— Изображение обрезано точно по размеру (без
прозрачных или однотонных областей)
— Выбран подходящий формат
— Изображение удачно декомпозировано
50. Save As — для совместимости с Illustrator
Export — для экспорта файла
Export for Screens — для экспорта артбордов
Asset Export — для экспорта отдельных фигур
Clipboard — для быстрых экспериментов
51. Save As — для совместимости с Illustrator
Export — для экспорта файла
Export for Screens — для экспорта артбордов
Asset Export — для экспорта отдельных фигур
Clipboard — для быстрых экспериментов
77. Чек-лист
— SVGO и GZIP
— Невидимые объекты
— Объекты за пределами холста
— Пересекающиеся фигуры одного цвета
— Группы
— Эффекты
— Растровые изображения
139. See also
— images.guide by Addy Osmani
— И. Григорик Оптимизация изображений
— C. Чикуенок про JPEG (раз, два, три)
— С. Чикуенок про PNG (раз, два, три, четыре)