Конференция Render Conference 2018 в Оксфорде была увлекательной экскурсией по основным советам по интерфейсной веб-разработке. Это мой выбор из 8 лучших. Отказ от ответственности: я лично не пробовал ни один из этих методов, поэтому я представляю их все как идеи, а не рекомендации!

1. Быстрее, чем JavaScript: WebAssembly - это новый «C ++ для браузеров».

Http://webassembly.org/

  • WebAssembly позволяет писать на C, C ++ или Rust, а затем запускать его в браузере!
  • Это означает сверхлегкий скомпилированный двоичный файл, который, по оценкам, примерно в 20 раз быстрее, чем JavaScript.
  • Приложения могут включать в себя плавный запуск основных выпусков игр в браузере, но это имеет огромное значение для сложных веб-приложений любого типа.
  • Поддерживается рабочей группой W3C WebAssembly, Google, Mozilla, Microsoft и Apple.
  • Версия 1.0 в настоящее время поддерживается в последних версиях основных браузеров, так что сейчас самое время взглянуть на нее.

2. Вы убиваете производительность с помощью этих 4 распространенных методов CSS.

  • Не используйте изображения в кодировке Base64. Это добавляет огромное количество данных в сам файл CSS, и их необходимо загружать синхронно, прежде чем остальная часть таблицы стилей сможет продолжить загрузку.
  • Не используйте @import. Используйте несколько<link rel=stylesheet>references в своем HTML. Использование первого означает, что все ваши связанные таблицы стилей должны быть извлечены синхронно, прежде чем можно будет применить одну.
  • Не используйте SASS @extend. Используйте SASS@mixin. Я не на 100% понимаю, сколько это сэкономит, но, видимо, последнее быстрее!
  • Не помещайте теги <link> перед тегами <script async> внутри <head> (например, код Google Analytics или Facebook Pixel JS - вещи, которые обычно приходят в голову). Это приводит к синхронной загрузке двух типов тегов, а поскольку браузер предполагает, что на макет страницы может быть какой-то JS, он просто ничего не отображает, пока абсолютно все не загрузится. Напротив, размещение тегов <script async> в первую очередь позволяет асинхронно загружать JS и CSS вместе, что приводит к значительному сокращению времени для первой отрисовки. ПРИМЕЧАНИЕ: это влияет на производительность, только если вы включили флаг async. Подробнее читайте здесь: https://davidwalsh.name/html5-async

3. Быстрые победы для улучшения доступности веб-сайта.

  • Протестируйте свой веб-сайт, используя только клавиатуру для навигации. Если вы не можете сделать что-то с клавиатурой, измените ее, чтобы вы могли.
  • Протестируйте весь свой сайт в оттенках серого (есть плагины для браузера, которые позволяют это делать). Если контент выглядит хорошо и имеет смысл в оттенках серого, он будет работать для людей с любым типом дальтонизма.
  • Не скрывайте :focus стиль и не отвлекайтесь от всего, с чем нужно взаимодействовать пользователям. Если вам абсолютно необходимо скрыть стиль, используйте полифил focus-visible CSS4. Этот метод скрывает стиль фокуса при щелчке мышью, но показывает его при использовании клавиатуры для навигации.
  • Весь видеоконтент должен включать субтитры. Главный совет: используйте функцию автоматического создания субтитров YouTube, чтобы выполнять большую часть тяжелой работы, синхронизацию времени и т. Д.… Затем используйте инструмент редактирования субтитров YouTube, чтобы исправить все, что было не так.

4. Создаете форму оформления заказа для электронной торговли? В браузерах он уже есть.

  • Новый API платежных запросов скоро получит широкое распространение в основных браузерах.
  • Браузеры (настольные и мобильные) теперь смогут более эффективно использовать сохраненные сведения о способах оплаты клиентов, предоставив стандартизированную форму оформления заказа в браузере.
  • Выглядит это так:

  • Разработчики могут относительно легко использовать этот подход. Единственное, что вам понадобится, это платежный шлюз, совместимый с API запросов платежей (постоянно растущий список, который в настоящее время включает Stripe и WooCommerce).
  • Вам все равно следует разработать стандартную резервную форму проверки в своих текущих проектах, чтобы обеспечить совместимость, но в будущем вам, возможно, даже не придется это делать.
  • Подробнее читайте на:
  • Https://developers.google.com/web/fundamentals/payments/
  • Https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API

5. Не упрощайте жизнь хакеру - используйте NSP и Snyk.io.

  • Независимо от того, насколько прост ваш веб-сайт, даже если это всего лишь информационная одностраничная страница, взлом может иметь катастрофические последствия по причинам, о которых вы не ожидаете. Никогда не думайте, что вы в безопасности, потому что вы не главная цель.
  • Публично опубликованные уязвимости (см. Этот список) - это две вещи: легко использовать и легко исправить.
  • Если вы не устраните каждую известную уязвимость, к которой вы можете быть подвержены, независимо от того, насколько она мала, то вы подвергнете свой сервис даже самым хакерам-любителям. Существуют инструменты (например, Metasploit), которые сканируют веб-сайты на предмет общедоступных уязвимостей и позволяют использовать их везде, где бы они ни находились.
  • Существует простое решение, позволяющее убедиться, что ваш сервис соответствует самой базовой ступени требований безопасности: NSP. (Https://nodesecurity.io/)
  • NSP - это инструмент, который становится частью вашего процесса CI / CD, проверяя ваше программное обеспечение на наличие известных уязвимостей.
  • NSP также предлагает услугу, которая проверяет ваши услуги с точки зрения «постороннего».
  • Https://snyk.io/ - еще одна служба сканирования уязвимостей, которая поддерживает базу данных всех пакетов (например, в NPM) и уязвимостей, которые они содержат. Регистрируясь, вы подключаете Snyk ко всем сервисам, которые вы используете (GitHub, PaaS и т. Д.), И он начинает уведомлять вас, когда какая-либо часть вашего сервиса подвергается риску новых уязвимостей.

6. Изображения на вашей веб-странице? Размытые заполнители SVG выглядят великолепно и загружаются мгновенно

  • Эти размытые SVG-файлы обычно измеряются в байтах, а не в килобайтах, что делает их идеальными в качестве изображений-заполнителей, пока вы ждете загрузки изображения с полным разрешением.
  • Использование заполнителей важно везде, где изображения будут занимать место на странице (помните, как вы были раздражены в последний раз, когда читали статью на полпути, и контент выпрыгнул из поля зрения, потому что изображение где-то еще на странице только что закончило загрузку).
  • Чтобы использовать Sqip SVG, просто установите их как свойство background-image в CSS (хотя, возможно, гораздо больше способов сделать это).
  • Для получения бонусных баллов используйте CSS для анимации постепенного появления фактического изображения после загрузки. Шелковистая гладкая.

7. Пять интересных новых и будущих функций CSS.

  • Собственные переменные CSS без SASS: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
  • text-decoration: skip-ink: аккуратный визуальный поворот точного подчеркивания старого текста, который вы можете начать использовать прямо сейчас, потому что отсутствие поддержки браузера ничего не сломает! Https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink (бонусные баллы за изучение других новых стилей подчеркивания, таких как wavy!)
  • image-set - эта отличная функция CSS4 позволит вам автоматически определять различные URL-адреса изображений в зависимости от разрешения экрана пользователя, без использования медиа-запросов и т. Д. Например, Retina display MacBook загрузит версию изображения с высоким разрешением, в то время как более старый дисплей просто не нуждается во всех этих пикселях. Подробнее читайте здесь: https://www.hongkiat.com/blog/css-image-set/
  • CSS Paint API через Houdini: это супер захватывающий материал для CSS-ботаников, поскольку Houdini - это предлагаемый стандарт, позволяющий разработчикам напрямую обращаться к низкоуровневому API рисования браузера и многому другому. Здесь есть несколько примеров, но большинство из них не будут работать даже в последних версиях браузеров: https://googlechromelabs.github.io/houdini-samples/

  • Запросы внешнего освещения: опять же, они еще не поддерживаются большинством браузеров, но в ближайшем будущем вы сможете делать такие вещи, как использование датчика внешнего освещения Mac, чтобы определять, когда пользователь просматривает ваш веб-сайт в темной комнате, и запускать ваша особенная новая «Темная тема» в результате (!!!)

8. Попробуйте удалить свой промежуточный сервер - есть другой способ.

  • Возьмите это с щепоткой соли! Определенно считайте это интересной идеей, а не рекомендацией.
  • Промежуточные среды сопряжены с риском, потому что они отделены от производственной среды и поэтому имеют шанс очень тонко отличаться от производственной среды, как бы вы ни старались сохранить их идентичными.
  • Как насчет того, чтобы полностью отказаться от идеи «постановки»? Вместо этого просто запустите множество версий, работающих параллельно в производственной среде, одна из которых помечена как «действующая» и принимает весь общедоступный трафик.
  • Google Cloud - один из примеров службы, которая позволяет легко контролировать этот подход. Допустим, у вас запущена рабочая версия веб-сайта 1.0. После этого вы можете развернуть версию 1.1 в производственной среде как «неактивную» версию. Доступ к нему можно получить так же, как на промежуточном сервере (например, через URL-адрес для конкретной версии), но он имеет то преимущество, что он работает в той же среде, что и «действующая» версия.
  • Когда приходит время переключаться с версии 1.0 на версию 1.1, вы просто нажимаете переключатель, чтобы начать направлять общедоступный трафик в версию 1.1, где он уже запущен и полностью протестирован.
  • В качестве дополнительного преимущества этот подход дает вам возможность легко тестировать сине-зеленый 1.0 с 1.1 - Google Cloud, по словам докладчика на Render Conf, предоставляет возможность легко разделять трафик между разными версиями.

Спасибо за чтение, и если вам понравились эти 8 драгоценных камней, я очень рекомендую посетить Render Conf 2019!

Скоро видео с конференции будут доступны по адресу: https://2018.render-conf.com/