На Chrome Dev Summit 2014 было рассмотрено множество тем и новых API, но дело не только в новом и блестящем.
Если вы начинающий веб-разработчик или даже опытный разработчик, который собирается приступить к изучению новых API, скорее всего, вы выполните следующие три шага: изучение, создание и повторение.
Мэтт Гонт рассказывает о текущих усилиях команды платформы разработчиков Chrome по решению этих проблем.
Учиться
Web Fundamentals — это набор документации по сценариям использования, охватывающей широкий спектр тем. Основная цель — помочь разработчикам перейти от практических знаний или их отсутствия к внедрению лучших практик как можно быстрее.
Одна из основных целей «Основ веб-технологий» — гарантировать, что если вы новичок в какой-либо теме, руководство максимально уменьшит «паралич выбора». Адди Османи прекрасно рассказывает об этом в Pastry Box .
Если вы заметили какие-либо проблемы с сайтом или его содержимым или хотите, чтобы «Основы Интернета» охватывали определенную тему, сообщите нам об этом, отправив отзыв на GitHub .
Строить
Чтобы помочь вам начать новый веб-проект, мы создали Web Starter Kit . Здесь есть все, что вам нужно:
- Надежный процесс сборки
- Шаблонный HTML-код
- Гид по стилю
Процесс сборки
Для тех из вас, кто не знаком с процессами сборки, самый простой способ представить процесс сборки — это рассматривать его как программу, которая берет набор файлов, выполняет над ними определенные задачи и выводит новые версии в другое место. Задачи оптимизируют файлы для сокращения времени загрузки, проверки возможных ошибок или выполнения задач, которые можно автоматизировать.
В Web Starter Kit у нас есть следующие процессы:
Мы минимизируем и объединяем CSS и JavaScript, чтобы браузер мог быстро получить файл. JavaScript также запускается через JSHint для проверки лучших практик JavaScript и распространенных ошибок кодирования. Изображения минимизируются с помощью imagemin, и с его помощью вы можете значительно уменьшить размер файла. У нас также есть процесс создания руководств стилей CSS.
Шаблон для HTML для нескольких устройств
Первый набор HTML-кода, который вы пишете для новой страницы, довольно стандартен, и есть вероятность, что у вас будет какой-то способ быстро получить стандартный HTML-файл, который хорошо работает на разных устройствах и размерах экрана.
В Web Starter Kit мы хотели добавить поддержку любых функций, которые стирают границы между платформой и вашим сайтом, поэтому мы добавили поддержку добавления на главный экран и заставки для Android, Windows Phone, iOS и Opera Coast.
Гид по стилю
Последняя часть Web Starter Kit — это Руководство по стилю.
Это дает любому новому проекту отличный набор стилей и компонентов по умолчанию, что стимулирует разработку на основе стилей. Вы можете изменить существующие стили элементов и добавить свои собственные.
В следующей версии WSK, которая выйдет в начале следующего года, мы усердно работаем над упрощением взаимодействия руководства по стилю и переходом на внешний вид Material Design . Мэтт показал ранний макет того, как это может выглядеть на Chrome Dev Summit, и вы можете увидеть пример ниже.
Итерировать
Как только вы начнете применять свои новые знания на практике, вам захочется использовать DevTools для отладки, улучшения и поддержки вашей работы.
В DevTools появилось несколько огромных новых функций, и Мэтт рассматривает следующие новые функции.
Режим устройства
Режим устройства — это новый раздел в DevTools, который позволяет вам быстро увидеть, как ваш сайт работает на разных мобильных устройствах, просматривая медиа-запросы в вашем CSS.
Одной из замечательных особенностей режима устройства является возможность регулирования скорости сети, что позволяет имитировать работу пользователя при подключении GPRS, EDGE, 3G, DSL или Wi-Fi.
Профилировщик краски
Если вы когда-либо открывали вкладку временной шкалы и нажимали кнопку записи, вы, вероятно, видели, как в водопаде происходили некоторые события рисования. Обычно это будет черный ящик, из которого вы не сможете узнать, почему браузер сделал это или что он делает.
Профилировщик Paint no дает вам дополнительную информацию о том, что именно делает браузер во время рисования.
Отслеживание аннулирования
DevTools теперь всегда объясняет причину, по которой произошла отрисовка или макет. Это полезно для всех, кто изучает временную шкалу и поведение браузера, а также позволяет оптимизировать код для предотвращения проблем с производительностью.
Просмотр диаграммы пламени
Это совершенно другой способ просмотра информации, доступной на временной шкале. Благодаря этому гораздо проще увидеть, как задачи перекрываются и какое поведение браузера произошло в результате выполнения других задач.
Просмотр кадров
В представлении «Пламенная диаграмма» вы можете выбрать конкретный кадр и внутри него узнать, какие элементы на странице были повышены до составного слоя, а также почему они были повышены.
Учиться. Строить. Итерировать
Это лишь некоторые из усилий команды Chrome, направленных на то, чтобы помочь разработчикам освоиться с веб-разработкой, поэтому обязательно ознакомьтесь с Web Fundamentals , Web Starter Kit и новыми функциями Chrome DevTools .