Чеклист фронтенд-разработчика
Nuances of programmingПеревод статьи Brandon Morelli: The Front-End Checklist
Как пользоваться
Все пункты из чеклиста обязательны для большинства проектов, но иногда некоторые из них можно опустить. Например, в случае приложения администрирования (administration web app), RSS не пригодится.
Head
Список элементов из раздела Head HTML-документа можно найти на GitHub.
Мета-теги
- Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML.
<!-- Doctype HTML5 --> <!doctype html>
Определение кодировки страницы HTML5 W3C.
Следующие три мета-тега (Charset, X-UA Compatible и Viewport) необходимо поместить в начало страницы сразу после doctype:
- Charset: кодировка документа — UTF-8.
<!-- Задаем кодировку для страницы --> <meta charset="utf-8">
- X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.
<!-- Сообщает Internet Explorer использовать самый новый движок для рендера --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx">
Определение отображения страниц для Internet Explorer.
- Viewport: мета-тег Viewport задан правильно.
<!-- Задание тега Viewport для адаптивного отображения страницы --> <meta name="viewport" content="width=device-width, initial-s cale=1">
- Title: тег Title используется на всех страницах. Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472-ух пикселей. Оптимальная длина для заголовка — около 55-и символов.
<!-- Задание тега Title --> <title>Заголовок страницы короче 65 символов</title>
Тег Title в HTML-документе — MDN.
- Description: описание сайта внутри тега является уникальным и не превышает 150-и символов.
<!-- Тег Description --> <meta name="description" content="Описание сайта содержит не более 150 символов">
Тег Description в HTML -документе — MDN.
- Favicon: каждый фавикон корректно отображается. Если файл только один, favicon.ico, его нужно поместить в корневой каталог сайта. В таком случае ссылаться на него в HTML-документе необязательно. Однако ссылку на фавикон лучше указывать так, как на примере ниже. Оптимальный формат изображения — .png, а не .ico. Разрешение — 32×32 px.
<!-- Стандартный фавикон --> <link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"> <!-- Рекомендованный формат фавикона --> <link rel="icon" type="image/png" href="https://example.com/favicon.png">
Favicon Generator — создание фавикона.
Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? — CSS Tricks.
- Apple Touch Icon: установлена иконка Apple touch icon для отображения на iOS-устройствах. (Разрешение файла должно быть 200x200 px, чтобы иконка хорошо отображалась на всех устройствах).
<!-- Apple Touch Icon --> <link rel="apple-touch-icon" href="/custom-icon.png">
- Windows Tiles указан следующим образом:
<!-- Microsoft Tiles -->Browser configuration schema reference <meta name="msapplication-config" content="browserconfig.xml" />
- Xml-разметка для файла browserconfig.xml выглядит так, как на примере:
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="small.png"/> <square150x150logo src="medium.png"/> <wide310x150logo src="wide.png"/> <square310x310logo src="large.png"/> </tile> </msapplication> </browserconfig>
Browser configuration schema reference.
- Атрибут canonical: используйте rel=«canonical», чтобы избежать повторения контента.
<!-- Предотвращает дублирование контента на странице --> <link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
Use canonical URLs — Search Console Help — Google Support.
5 common mistakes with rel=canonical — Google Webmaster Blog.
HTML-теги
- Атрибут lang: должен указывать язык текущей HTML-страницы.
<html lang="ru">
- Direction: направление текста задано в специальном HTML-теге.
<html dir="rtl">
- Переадресация на страницу с другим языком: значение атрибута rel установлено как alternate.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
- Условные комментарии для Internet Explorer: задаются, если необходимы.
<!–[if IE]> Код для браузера Internet Explorer <![endif]–>
About conditional comments (Internet Explorer) — MSDN — Microsoft.
- RSS: если вы готовите к запуску блог или сайт со статьями, то не забудьте задать ссылку на RSS.
- Инлайновый критический CSS: задан критический CSS — это стили, которые мгновенно загружаются во время открытия страницы. Обычно подключается до основного CSS-файлы с помощью тега Style.
Critical by Addy Osmani on Github — автоматизирует создание критического CSS.
- Правильный вызов CSS: все CSS-файлы должны быть подключены до JavaScript в разделе Head. Исключение составляют JS-файлы, которые загружаются асинхронно и расположены в самом верху страницы.
Мета-теги для социальных сетей
На любой сайт желательно добавить основные мета-теги Facebook и Twitter. Остальные теги можно добавить при необходимости.
- Facebook Open Graph: теги Facebook Open Graph (OG) проверены, настроены и отображают нужную информацию. Размер изображений должен быть хотя бы 600 x 315 px, а лучше 1200 x 630 px.
<meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:title" content="Content Title"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:description" content="Description Here"> <meta property="og:site_name" content="Site Name"> <meta property="og:locale" content="en_US">
A Guide to Sharing for Webmasters.
Проверить страницу с помощью валидатора Facebook OG.
- Twitter Card: должен быть настроен как на примере ниже.
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@site_account"> <meta name="twitter:creator" content="@individual_account"> <meta name="twitter:url" content="https://example.com/page.html"> <meta name="twitter:title" content="Content Title"> <meta name="twitter:description" content="Описание контента короче 200 символов"> <meta name="twitter:image" content="https://example.com/image.jpg">
Getting started with cards — Twitter Developers.
Проверить сайт с помощью валидатора Twitter card.
HTML
- Семантические элементы HTML5: элементы HTML5 используются надлежащим образом (header, section, footer, main…).
HTML Reference — удобная инструкция по HTML.
- Страницы ошибок: созданы страницы для 404 и 500-х ошибок. Страницы пятисотых ошибок должны включать в себя стили CSS (без внешних вызовов на сервере).
- Noopener: если внешнюю ссылку необходимо открывать в новой вкладке с помощью target="_blank", то добавьте к ним атрибут rel=«noopener». Это предотвратит кражу данных пользователей, если страница другого сайта используется для фишинга. Для старых версий браузера Firefox задайте атрибут rel=«noopener noreferrer».
- Комментарии: перед публикацией страницы убедитесь, что удалили все комментарии и ненужный код.
Тестирование HTML-верстки
- W3C-валидатор: все страницы сайта необходимо протестировать валидатором на сайте W3C. Он поможет найти незамеченные ошибки в HTML-коде.
- Оформление HTML-кода: чтобы поправить недочеты в коде и сократить его размер, воспользуйтесь специальным сервисом.
- Проверка ссылок на странице: все ссылки рабочие и не выдают 404 ошибку при переходе.
Шрифты
- Формат подключенного шрифта: форматы WOFF, WOFF2 and TTF поддерживаются всеми современными браузерами.
WOFF — Web Open Font Format — Caniuse.
WOFF 2.0 — Web Open Font Format — Caniuse.
TTF/OTF — TrueType and OpenType font support.
Using @font-face — CSS-Tricks.
- Вес шрифта: не превышает 2-х Мб.
CSS
Ознакомьтесь с руководством по CSS и гайдом по Sass, многие ведущие фронтенд-разработчики придерживаются правил, описанных в этих руководствах. Если возникнут дополнительные вопросы по CSS, ответы можно найти на CSS Reference.
- Адаптивный дизайн: верстка на сайте адаптивная.
- Печать с помощью CSS: таблицы печати настроены корректно для каждой страницы.
- Препроцессоры: страница использует CSS-препроцессор (Sass предпочтительней).
- Уникальные ID: идентификаторы на странице не повторяются.
- Reset CSS: на странице подключены актуальные CSS-файлы для сброса стандартных стилей браузера (reset, normalize или reboot). Во многие CSS-фреймворки, например, в Bootstrap или Foundation, включен файл Normalize.css.
- JS-префиксы: все классы или id, используемые в JS, начинаются с js- и не используются для задания стилей через CSS.
<div id="js-slider" class="my-slider"> <!-- Or --> <div id="id-used-by-cms" class="js-slider my-slider">
- Тег Style в HTML-документе: избегайте использования тега Style для задания стилей внутри HTML-страницы. В некоторых случая использование оправдано, например, для задания фона для слайдера.
- Вендорные префиксы: вендорные префиксы CSS решают проблемы с совместимостью со старыми версиями браузеров.
-webkit — Chrome и Safari,
-o — Opera;
-ms — Internet Explorer;
-moz — Mozilla.
Производительность
- Объединение CSS-файлов: все файлы CSS объединены в один файл. (Не подходит для HTTP/2).
- Оптимизация: все CSS-файлы сжаты.
- CSS, блокирующие отображение сайта: убедитесь, что CSS-файлы не блокируют отображение контента, увеличивая время загрузки страницы.
Example of preload CSS using loadCSS.
- Неиспользуемый CSS-код: весь лишний код удален.
Тестирование CSS
- Stylelint: все CSS и SCSS файлы без ошибок.
- Адаптивный дизайн: страницы сайта протестированы для разрешений: 320 px, 768 px, 1024 px (можно проверить и на других разрешениях в зависимости от цели сайта).
- CSS Validator: найдены и исправлены все ошибки в CSS-файлах.
- Браузеры: страницы сайта протестированы в популярных браузерах (Safari, Firefox, Chrome, Internet Explorer).
- Мобильные браузеры: сайт проверен в мобильных браузерах (Chrome, Safari…).
- OS: сайт протестирован в популярных операционных системах (Windows, Android, iOS, MacOS)
- Pixel perfect: страница сверстана максимально точно. Конечно, не на 100%, но все же стоит придерживаться шаблона.
Pixel Perfect — Chrome Extension.
- Направление чтения: если в проекте нужно поддержка не только языков, которые читаются слева направо (left-to-right — LTR), но и тех, которые читаются справа налево (right-to-left — RTL), то нужно проверить, поддерживает ли их сайт.
Building RTL-Aware Web Apps & Websites: Part 1 — Mozilla Hacks.
Building RTL-Aware Web Apps & Websites: Part 2 — Mozilla Hacks.
Изображения
Чтобы разобраться в оптимизации изображений, посмотрите книгу Essential Image Optimization (на англ.) от Эдди Озмани (Addy Osmani).
- Оптимизация: Все изображения оптимизированы для отображения в браузере. Формат WebP можно использовать на важных страницах, например, на главной.
Бесплатно оптимизировать изображение можно с помощью ImageOptim.
- Picture/Srcset: использованы атрибуты picture/srcset для того, чтобы отображать наиболее подходящую картинку в данном разрешении (размере) экрана.
How to Build Responsive Images with srcset.
- Retina: все изображения должны иметь 2x или 3x разрешения, чтобы хорошо отображаться на retina-дисплеях.
- Спрайт-файл: маленькие картинки на сайте объединены в один спрайт-файл. Это большое изображение, состоящие из мелких картинок. Если это иконки, то их можно объединить в спрайт-картинку SVG формата.
- Ширина и высота: если заранее известны нужные размеры изображения, то ширина и высота должна быть задана в атрибуте img.
- Описание изображения: все картинки img должны быть описаны словами в атрибуте alt.
<img alt=’Описание изображения’>
Alt-texts: The Ultimate Guide.
- Отложенная загрузка изображений: сайт настроен так, чтобы изображения загружались не сразу, а по мере пролистывания сайта.
JavaScript
- JavaScript-код отдельными файлами: в HTML-документе не должно быть встроенного JS-кода. Лучше просто указать ссылку на файл с кодом.
- Объединение: JavaScript-файлы объединены в один.
- Оптимизация: все JavaScript-файлы минимизированы (можно добавить суффикс .min к названию).
Minify Resources (HTML, CSS, and JavaScript).
- Безопасность JavaScript:
Guidelines for Developing Secure Applications Utilizing JavaScript.
- Async или defer: JavaScript-файлы загружаются асинхронно при помощи атрибута async, или используют атрибут defer, который запускает скрипт только после полной загрузки страницы.
Remove Render-Blocking JavaScript.
- Modernizr: если нужно добавить на сайт специфическую функцию, то можно использовать JS-библиотеку Modernizr. Она определяет, какие возможности HTML, CSS, JS поддерживает браузер пользователя.
JavaScript-тестирование
- ESLint: JavaSript-код проверен в ESLint, исправлены ошибки.
ESLint — The pluggable linting utility for JavaScript and JSX.
Безопасность
Проверьте сайт
securityheaders.io — проверяет HTTP-заголовки безопасности.
Observatory by Mozilla — указывает на слабые места в безопасности.
ASafaWeb — Automated Security Analyser for ASP.NET Websites.
- HTTPS: HTTPS используется не только на всех страницах, но и для внешних элементов — плагины, изображения.
Let’s Encrypt — Free SSL/TLS Certificates.
- HTTP Strict Transport Security (HSTS): настроен HSTS, принудительно активирующий соединение через HTTPS.
Check HSTS preload status and eligibility.
HTTP Strict Transport Security Cheat Sheet — OWASP.
Transport Layer Protection Cheat Sheet — OWASP.
- Межсайтовая подделка запроса (CSRF): чтобы предотвратить CSRF, вы должны быть уверены, что запросы на сервер происходят именно с вашего сайта или приложения.
Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet — OWASP.
- Межсайтовый скриптинг (XSS): На странице или сайте не должно быть XSS-запросов.
XSS (Cross Site Scripting) Prevention Cheat Sheet — OWASP.
DOM based XSS Prevention Cheat Sheet — OWASP.
- Content Type Options: в Google Chrome и Internet Explorer предотвращает попытки mime-сниффинговых атак и подмены типов mime на отличные от тех, что были заявлены на сервере.
X-Content-Type-Options — Scott Helme.
- X-Frame-Options (XFO): посетители сайта защищены от кликджекинга.
X-Frame-Options — Scott Helme.
RFC7034 — HTTP Header Field X-Frame-Options.
Производительность
- Вес страницы: каждая страница весит до 500 Кб.
Size Limit: Make the Web lighter.
- Оптимизация: HTML-код минимизирован.
- Отложенная загрузка элементов (Lazy loading): изображения, скрипты и CSS-стили загружаются по мере пролистывания страницы, чтобы уменьшить время отзыва сайта.
- Размер Cookies: если вы используете cookies, то проверьте, чтобы размер каждого файла был бы не более 4096 байтов, а общее количество файлов не превышало 20.
Cookie specification: RFC 6265.
- Компоненты сторонних разработчиков: сторонние фреймы iframe и внешние скрипты JS (например, кнопки «поделиться») заменены на статические элементы, где это возможно. Это ограничивает количество вызовов внешних API и сохраняет в тайне от сторонних сервисов действия пользователей на вашем сайте.
Simple sharing buttons generator.
Запросы
Explanation of the following techniques.
- DNS-prefetch: время загрузки DNS других сайтов сокращается благодаря использованию предсказывающих страниц с dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection: поиск DNS, установка TCP и TLS-связи с сервисами, которые скоро понадобятся, выполняется заранее во время простоя с помощью preconnect.
<link rel="preconnect" href="https://example.com">
- Prefetching: ресурсы, которые скоро понадобятся (например, изображения при ленивой загрузке) загружаются браузером заранее и помещаются в кэш с помощью prefetch.
<link rel="prefetch" href="image.png">
- Preloading: ресурсы, которые будут нужны на текущей странице (например, скрипты, находящиеся в конце тега Body), можно загрузить с помощью
- preload.
<link rel="preload" href="app.js">
Difference between prefetch and preload.
Тестирование производительности
- Google PageSpeed: все страницы сайта (не только домашняя) были протестированы в Google PageSpeed и набрали по крайней мере 90 очков из 100.
Test your mobile speed with Google.
WebPagetest — Website Performance and Optimization Test.
Доступность
Посмотрите плейлист A11ycasts с Rob Dodson (англ.).
- Progressive enhancement: Большинство функций сайта, например, навигация или поиск, должны работать с выключенным JavaScript.
Enable / Disable JavaScript in Chrome Developer Tools.
- Цветовой контраст: цветовой контраст сайта соответствует стандарту WCAG AA (для мобильных — AAA).
Заголовки
- H1: на всех страницах присутствует заголовок H1, который отличается от названия сайта, заданного в title.
- Заголовки: заголовки использованы в правильном порядке — от H1 до H6.
Why headings and landmarks are so important — A11ycasts #18.
Landmarks
- Role banner: для тега Header указан атрибут role=«banner».
- Role navigation: для Nav — атрибут role=«navigation».
- Role main: для Main указан атрибут role=«main».
Using ARIA landmarks to identify regions of a page.
Семантика
- Использованы разные типы input-ов на HTML5: это важно для мобильных устройств, потому что для разных типов вводимых данных они показывают по-разному выглядящие клавиатуры.
Формы
- Label: связан с каждым отдельным input-ом в элементах формы. Если label не может быть отображен, нужно использовать aria-label.
Using the aria-label attribute — MDN.
Тестирование доступности
- Стандарты тестирования доступности: чтобы протестировать страницу, используйте WAVE.
- Навигация с помощью клавиатуры: проверьте свой сайт, пользуясь только клавиатурой. Все элементы на сайте должны быть доступны для использования.
- Скрин-ридер: все страницы сайта должны работать в программах для чтения информации (VoiceOver, ChromeVox, NVDA или Lynx).
- Фокус: если фокус для элементов отключен, он заменяется видимым в CSS состоянием.
Managing Focus — A11ycasts #22.
SEO
- Google Analytics: Google Analytics установлен и корректно работает.
- Заголовки: текст в заголовках помогает понимать информацию на текущей странице.
- sitemap.xml: создана карта сайта sitemap.xml и отправлена в Google Search Console (Google Webmaster Tools).
- robots.txt: файл robots.txt не блокирует страницы сайта.
Проверить robots.txt с помощью Google Robots Testing Tool.
- Структурированные данные: помогают поисковым роботам понимать информацию на страницах. Поэтому страницы должны быть протестированы и не содержать ошибок.
Introduction to Structured Data — Search — Google Developers.
Проверьте сайт с помощью Structured Data Testing Tool.
Полный список классов для структурирования данных можно найти на Schema.org.
- HTML-карта сайта: работает и доступна в футере сайта.
Sitemap guidelines — Google Support.