FrontFest.Vyorstka: поговорим о доступности, экономии трафика и будущем CSS

в 6:48, , рубрики: adaptive images, CodeFest, css, frontfest, html, Spotify, wai-aria, Блог компании 2ГИС, Разработка веб-сайтов

FrontFest.Vyorstka: поговорим о доступности, экономии трафика и будущем CSS - 1

JavaScript там, JavaScript здесь, JavaScript везде, но давайте вспомним, с чего начинался web и без чего существовать не может и сегодня — VYORSTKA, и две ее основные составляющие — HTML и CSS.

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

§ Про доступность

Léonie Watson В этом году исполняется ровно двадцать лет, как
Léonie Watson занимается веб-разработкой. Так вышло, что в какой-то момент она поменяла сферу своей деятельности и занялась доступностью сайтов — кто, как не она, работающая с сайтами исключительно с помощью экранного диктора, сможет так досконально разобраться в этой теме. За свою карьеру Léonie консультировала разработчиков сайта правительства Великобритании, сайта Smashing Magazine, написала большое количество статей и даже стала членом рабочей группы W3C HTML and SVG.

Уже много лет разработчики пишут семантическую разметку, WAI-ARIA ни для кого не набор букв, но в чём же проблема? Проблема в повсеместном использовании JavaScript-фреймворков, которые отодвинули всю проделанную работу на десяток лет назад — наша разметка снова состоит из одних span и div. Для людей с ограниченными возможностями это почти невидимый сайт. О том, как решить эту проблему, мы узнаем из доклада Léonie «Developer's guide to accessibility mechanics».

§ Про оптимизацию изображений

Изображения — это, как правило, самая «тяжелая» статика. Но, почему-то, фронтендеры очень часто обходят их стороной.

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

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

Разобраться с этими вопросами нам помогут: Jose M. Perez из Spotify и Тим Чаптыков из Вконтакте.

Jose M. Perez Jose M. Perez — веб-разработчик в Spotify. В компании, работает над open.spotify.com и веб-плеером Spotify. Любит заниматься оптимизацией производительности веб-сайтов.

Jose расскажет о нескольких техниках оптимизации изображений, используемых известными веб-сайтами. Техники, основанные на плейсхолдерах, доминирующих цветах, размытых изображениях и ленивой загрузке, которые помогут улучшить производительность сайта. Эти техники используются различные технологии, такие как: CSS3, canvas и IntersectionObserver API.

Тим Чаптыков Тим Чаптыков — разработчик раздела сообщений Вконтакте, выступит с темой: «Оптимизация графики на практике».

Доклад Тима будет о смене форматов, оптимизации без потери качества, объединении и разделении картинок и других, более продвинутых, способах сэкономить килобайты.

§ Про будущее CSS

CSS, как и любая другая фронтенд-технология, бурно развивается. Постоянно появляются новые спецификации, которые тут же внедряются, будут когда-то внедрены или просто затеряются в черновиках.

Сергей Попов Сергей Попов — фронтендер, наставник в HTML Academy, организатор moscowcss и Moscow Frontend Conference, поразмышляет на тему «А что, если мы долетим и там будет всё?».

В докладе будут рассмотрены как черновики спецификаций, так и новые свойства, которые находятся в разработке, но которые мы однажды будем использовать в повседневной жизни: CSS Custom Properties, CSS Grid Layout, CSS Box Alignment 4 Level, CSS Selectors 4 Level, CSS Overflow 4 Level и ряд других.

§ Про декларативную шаблонизацию

Помните времена, когда мы использовали HTML-атрибуты, вроде bgcolor, для стилизации? И как здорово стало с изобретением декларативного CSS? Мы избавились от копипаста и получили возможность точечно переопределять любые правила.

Владимир Гриненко Владимир Гриненко, в докладе «Декларативная шаблонизация» расскажет нам, как привнести эти же возможности в разметку.

Владимир — руководитель группы общих компонентов интерфейсов в симферопольском офисе Яндекса. В разное время принимал участие в разработке главной страницы yandex.ru, внутренних сервисов и компонентов портала. Занимается развитием БЭМ и с удовольствием отвечает разработчикам на вопросы о методологии.


Мы постарались сделать поток максимально интересным для всех — неважно, работаете вы только с .jsx файлами, или ещё периодически верстаете таблицами — темы докладов так или иначе касаются всех, кто связан с фронтендом. Но это еще не все, параллельно с потоком VYORSTKA, у нас будут секции JS и MIX (о ней мы писали на прошлой неделе), а ещё — поток квартирников и поток воркшопов. О них мы расскажем в ближайший месяц, а пока ↓

program

Подписывайте на нас в твитерке, фейсбуке и вконтактике, а также смотрите в инстаграм.

Автор: tth

Источник

Поделиться

* - обязательные к заполнению поля