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



    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

    Подписывайте на нас в твитерке, фейсбуке и вконтактике, а также смотрите в инстаграм.
    2ГИС 200,62
    Карта города и справочник предприятий
    Поделиться публикацией
    Похожие публикации
    Комментарии 17
    • 0
      Я ослеп, не могу дату увидеть
    • +1
      Начал читать, увидел «спикеров крутых компаний»… При всём моём желании, воспринимать всерьёз дальнейший текст уже не получится.
      • –1
        eandr_67, а уточните пожалуйста, что именно вас смутило?
        Само словосочетание «спикеры из крутых компаний», или вы не считаете перечисленные в статье компании серьезными?
        • –2
          Не «смутило», а «вызвало отторжение» сочетание бессмысленного англицизма (в русском языке достаточно слов для того, чтобы не использовать английские кальки) и нелепого жаргонизма («крутой, как варёные яйца»). Я понимаю, когда такие «перлы» вылезают на мейловских «ответах». Но в блоге серьёзной компании на профильном ресурсе…
        • 0
          Копирайтер круто выпорот, поверьте. Текст теперь воспринимается гораздо серьезнее.
        • +4

          VYORSTKA — на кого ориентировано это слово? Первый раз вижу чтобы его так писали

          • +3
            Согласен. Все знают, что правильно писать «фронтенд».
            • 0
              Если у вас есть более подходящий вариант для названия потока «Вёрстка» английскими буквами в одно слово, поделитесь.
          • +1
            Если вы пытаетесь целенаправленно испортить шрифт, то событие нужно было назвать WORSTKA.
            • 0
              Мы подумаем над этим вариантом на следующий год.
            • 0
              11900 за билет? лучше кокаина купить
              • 0
                Ну тут уж каждый выберет по потребностям.
              • 0
                Ну вообще-то, если вспомнить те времена, когда начинался веб, то никакой вёрстки не было. Были абзацы, заголовки, ещё пара каких-то тегов. Табличек вроде и то не было, не то что табличной вёрстки.
                • 0
                  Абзацы, заголовки и еще каких-то пара тегов — хоть и примитвная, но все же верстка. Мы же не говорим нигде в статье, что все началось с html-таблиц.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое