Pull to refresh
100.62
Rating
2ГИС
Главные по городской навигации

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

2ГИСCodeFestWebsite developmentCSSHTML


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

Подписывайте на нас в твитерке, фейсбуке и вконтактике, а также смотрите в инстаграм.
Tags:frontfestcodefestcsshtmlwai-ariaadaptive images2гисspotifyvkontakte
Hubs: 2ГИС CodeFest Website development CSS HTML
Total votes 22: ↑19 and ↓3 +16
Views5.5K

Top of the last 24 hours

Information

Founded
Location
Россия
Website
2gis.ru
Employees
1,001–5,000 employees
Registered

Habr blog