^[1]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

^[13]

Подписывайте на нас в твитерке ^[14], фейсбуке ^[15] и вконтактике ^[16], а также смотрите в инстаграм ^[17].

Автор: tth

Источник ^[18]