JavaScript там, JavaScript здесь, JavaScript везде, но давайте вспомним, с чего начинался web и без чего существовать не может и сегодня — VYORSTKA, и две ее основные составляющие — HTML и CSS.
В секции VYORSTKA на FrontFest мы собрали спикеров из крутых компаний, чтобы поговорить о доступности сайтов для людей с ограниченными возможностями, разобраться в современных способах экономии трафика за счет оптимизация изображений, обсудить новые спецификации в стилях, и рассмотреть альтернативные подходы к шаблонизации.
§ Про доступность
В этом году исполняется ровно двадцать лет, как
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 — веб-разработчик в 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 (о ней мы писали на прошлой неделе), а ещё — поток квартирников и поток воркшопов. О них мы расскажем в ближайший месяц, а пока ↓
Подписывайте на нас в твитерке, фейсбуке и вконтактике, а также смотрите в инстаграм.
Автор: tth
