Чеклист фронтенд-разработчика

3 месяца назад

Перевод статьи Brandon Morelli: The Front-End Checklist

Как пользоваться

Все пункты из чеклиста обязательны для большинства проектов, но иногда некоторые из них можно опустить. Например, в случае приложения администрирования (administration web app), RSS не пригодится.

Head

Список элементов из раздела Head HTML-документа можно найти на GitHub.

Мета-теги

  • Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML.

Определение кодировки страницы HTML5 W3C.

Следующие три мета-тега (Charset, X-UA Compatible и Viewport) необходимо поместить в начало страницы сразу после doctype:

  • Charset: кодировка документа — UTF-8.

<meta charset="utf-8">  

  • X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.

<meta http-equiv="x-ua-compatible" content="ie=edge">  
 [](https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx) 

Определение отображения страниц для Internet Explorer.

  • Viewport: мета-тег Viewport задан правильно.

<meta name="viewport" content="width=device-width, initial-s<br class=" inline"="">cale=1">  

  • Title: тег Title используется на всех страницах. Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472-ух пикселей. Оптимальная длина для заголовка — около 55-и символов.

<title>Заголовок страницы короче 65 символов</title>  

Тег Title в HTML-документе — MDN.

SERP Snippet Generator – создание описания сайта, которое Google покажет на странице выдачи результатов поиска (для англ. текста).

  • Description: описание сайта внутри тега является уникальным и не превышает 150-и символов.

<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 — создание фавикона.

RealFaviconGenerator.

Гайд по фавиконам на GitHub.

Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? — CSS Tricks.

PNG favicons — caniuse.

  • Apple Touch Icon: установлена иконка Apple touch icon для отображения на iOS-устройствах. (Разрешение файла должно быть 200x200 px, чтобы иконка хорошо отображалась на всех устройствах).

<link rel="apple-touch-icon" href="/custom-icon.png">  

Configuring Web Applications.

  • Windows Tiles указан следующим образом:
Browser configuration schema reference  

<meta name="msapplication-config" content="browserconfig.xml">  

  • Xml-разметка для файла browserconfig.xml выглядит так, как на примере:

 <browserconfig><msapplication><tile><square70x70logo src="small.png"><square150x150logo src="medium.png"><wide310x150logo src="wide.png"><square310x310logo src="large.png"></square310x310logo></wide310x150logo></square150x150logo></square70x70logo></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-страницы.

  • Direction: направление текста задано в специальном HTML-теге.

dir — HTML — MDN.

  • Переадресация на страницу с другим языком: значение атрибута rel установлено как alternate.
<link rel="alternate" href="https://es.example.com/" hreflang="es">  

  • Условные комментарии для Internet Explorer: задаются, если необходимы.
 Код для браузера Internet Explorer   

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».

About rel=noopener.

  • Комментарии: перед публикацией страницы убедитесь, что удалили все комментарии и ненужный код.

Тестирование HTML-верстки

  • W3C-валидатор: все страницы сайта необходимо протестировать валидатором на сайте W3C. Он поможет найти незамеченные ошибки в HTML-коде.

W3C validator.

  • Оформление HTML-кода: чтобы поправить недочеты в коде и сократить его размер, воспользуйтесь специальным сервисом.

Dirty markup.

  • Проверка ссылок на странице: все ссылки рабочие и не выдают 404 ошибку при переходе.

W3C Link Checker.

Шрифты

  • Формат подключенного шрифта: форматы 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.

Reset.css.

Normalize.css.

Reboot.

  • JS-префиксы: все классы или id, используемые в JS, начинаются с js- и не используются для задания стилей через CSS.

<div id="js-slider" class="my-slider">  

<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.

[_Autoprefixer CSS online_](https://autoprefixer.github.io/).

### Производительность

*   **Объединение CSS-файлов**: все файлы CSS объединены в один файл. (_Не подходит для HTTP/2_).
*   **Оптимизация**: все CSS-файлы сжаты. 
*   **CSS, блокирующие отображение сайта**: убедитесь, что CSS-файлы не блокируют отображение контента, увеличивая время загрузки страницы. 

[_loadCSS by filament group_](https://github.com/filamentgroup/loadCSS)_._

[_Example of preload CSS using loadCSS_](https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf).

*   **Неиспользуемый CSS-код**: весь лишний код удален.

[_UnCSS Online_](https://uncss-online.com/)_. _

[_PurifyCSS_](https://github.com/purifycss/purifycss)_._

[_Chrome DevTools Coverage_](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage).

### Тестирование CSS

*   **Stylelint**: все CSS и SCSS файлы без ошибок.

[_stylelint, a CSS linter_](https://stylelint.io/)_._

[_Sass guidelines_](https://sass-guidelin.es/).

*   **Адаптивный дизайн**: страницы сайта протестированы для разрешений: 320 px, 768 px, 1024 px (можно проверить и на других разрешениях в зависимости от цели сайта).
*   **CSS Validator**: найдены и исправлены все ошибки в CSS-файлах.

[_CSS Validator_](https://jigsaw.w3.org/css-validator/).

*   **Браузеры**: страницы сайта протестированы в популярных браузерах (Safari, Firefox, Chrome, Internet Explorer).
*   **Мобильные браузеры**: сайт проверен в мобильных браузерах (Chrome, Safari…).
*   **OS**: сайт протестирован в популярных операционных системах (Windows, Android, iOS, MacOS)
*   **Pixel perfect**: страница сверстана максимально точно. Конечно, не на 100%, но все же стоит придерживаться шаблона. 

[_Pixel Perfect — Chrome Extension_](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en).

*   **Направление чтения**: если в проекте нужно поддержка не только языков, которые читаются слева направо (left-to-right — LTR), но и тех, которые читаются справа налево (right-to-left — RTL), то нужно проверить, поддерживает ли их сайт. 

[_Building RTL-Aware Web Apps & Websites: Part 1 — Mozilla Hacks_](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/)_._

[_Building RTL-Aware Web Apps & Websites: Part 2 — Mozilla Hacks_](https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/).

### Изображения

Чтобы разобраться в оптимизации изображений, посмотрите книгу [Essential Image Optimization](https://images.guide/) (на англ.) от Эдди Озмани (Addy Osmani).

*   **Оптимизация**: Все изображения оптимизированы для отображения в браузере. Формат WebP можно использовать на важных страницах, например, на главной.

[_Imagemin_](https://github.com/imagemin/imagemin)_._

_Бесплатно оптимизировать изображение можно с помощью _[_ImageOptim_](https://imageoptim.com/).

*   **Picture/Srcset**: использованы атрибуты _picture/srcset_ для того, чтобы отображать наиболее подходящую картинку в данном разрешении (размере) экрана. 

[_How to Build Responsive Images with srcset_](https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/).

*   **Retina**: все изображения должны иметь 2x или 3x разрешения, чтобы хорошо отображаться на retina-дисплеях.
*   **Спрайт-файл**: маленькие картинки на сайте объединены в один спрайт-файл. Это большое изображение, состоящие из мелких картинок. Если это иконки, то их можно объединить в спрайт-картинку SVG формата.
*   **Ширина и высота**: если заранее известны нужные размеры изображения, то ширина и высота должна быть задана в атрибуте img.
*   **Описание изображения**: все картинки img должны быть описаны словами в атрибуте alt.

[_Alt-texts: The Ultimate Guide_](https://axesslab.com/alt-texts/).

*   **Отложенная загрузка изображений**: сайт настроен так, чтобы изображения загружались не сразу, а по мере пролистывания сайта. 

### JavaScript

*   **JavaScript-код отдельными файлами**: в HTML-документе не должно быть встроенного JS-кода. Лучше просто указать ссылку на файл с кодом.
*   **Объединение**: JavaScript-файлы объединены в один.
*   **Оптимизация**: все JavaScript-файлы минимизированы (можно добавить суффикс .min к названию).

[_Minify Resources (HTML, CSS, and JavaScript)_](https://developers.google.com/speed/docs/insights/MinifyResources).

*   **Безопасность JavaScript**:

[_Guidelines for Developing Secure Applications Utilizing JavaScript_](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript).

*   **Async или defer**: JavaScript-файлы загружаются асинхронно при помощи атрибута async, или используют атрибут defer, который запускает скрипт только после полной загрузки страницы.

[_Remove Render-Blocking JavaScript_](https://developers.google.com/speed/docs/insights/BlockingJS).

*   **Modernizr**: если нужно добавить на сайт специфическую функцию, то можно использовать JS-библиотеку Modernizr. Она определяет, какие возможности HTML, CSS, JS поддерживает браузер пользователя.

[_Modernizr_](https://modernizr.com/).

### JavaScript-тестирование

*   **ESLint**: JavaSript-код проверен в ESLint, исправлены ошибки. 

[_ESLint — The pluggable linting utility for JavaScript and JSX_](https://eslint.org/).

### Безопасность

### Проверьте сайт

[_securityheaders.io_](https://securityheaders.io/)_ — проверяет HTTP-заголовки безопасности. _

[_Observatory by Mozilla_](https://observatory.mozilla.org/)_ — указывает на слабые места в безопасности._

[_ASafaWeb — Automated Security Analyser for ASP.NET Websites_](https://asafaweb.com/).

*   **HTTPS**: HTTPS используется не только на всех страницах, но и для внешних элементов — плагины, изображения.

[_Let’s Encrypt — Free SSL/TLS Certificates_](https://letsencrypt.org/)_._

[_Free SSL Server Test_](https://www.ssllabs.com/ssltest/index.html)_._

[_Strict Transport Security_](http://caniuse.com/#feat=stricttransportsecurity).

*   **HTTP Strict Transport Security (HSTS)**: настроен HSTS, принудительно активирующий соединение через HTTPS.

[_Check HSTS preload status and eligibility_](https://hstspreload.org/)_._

[_HTTP Strict Transport Security Cheat Sheet — OWASP_](https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet)_._

[_Transport Layer Protection Cheat Sheet — OWASP_](https://www.owasp.org/index.php/Transport_Layer_Protection_Cheat_Sheet).

*   **Межсайтовая подделка запроса (CSRF)**: чтобы предотвратить CSRF, вы должны быть уверены, что запросы на сервер происходят именно с вашего сайта или приложения.

[_Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet — OWASP_](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29_Prevention_Cheat_Sheet).

*   **Межсайтовый скриптинг (XSS)**: На странице или сайте не должно быть XSS-запросов.

[_XSS (Cross Site Scripting) Prevention Cheat Sheet — OWASP_](https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet)_._

[_DOM based XSS Prevention Cheat Sheet — OWASP_](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet).

*   **Content Type Options**: в Google Chrome и Internet Explorer предотвращает попытки mime-сниффинговых атак и подмены типов mime на отличные от тех, что были заявлены на сервере. 

[_X-Content-Type-Options — Scott Helme_](https://scotthelme.co.uk/hardening-your-http-response-headers/#x-content-type-options).

*   **X-Frame-Options (XFO)**: посетители сайта защищены от кликджекинга.

[_X-Frame-Options — Scott Helme_](https://scotthelme.co.uk/hardening-your-http-response-headers/#x-frame-options)_._

[_RFC7034 — HTTP Header Field X-Frame-Options_](https://tools.ietf.org/html/rfc7034).

### Производительность

*   **Вес страницы**: каждая страница весит до 500 Кб.

[_Website Page Analysis_](https://tools.pingdom.com/).

[Size Limit: Make the Web lighter](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter).

*   **Оптимизация**: HTML-код минимизирован.

[_W3C Validator_](https://validator.w3.org/).

*   **Отложенная загрузка элементов (Lazy loading)**: изображения, скрипты и CSS-стили загружаются по мере пролистывания страницы, чтобы уменьшить время отзыва сайта. 
*   **Размер Cookies**: если вы используете cookies, то проверьте, чтобы размер каждого файла был бы не более 4096 байтов, а общее количество файлов не превышало 20. 

[_Cookie specification: RFC 6265_](https://tools.ietf.org/html/rfc6265)_._

[_Cookies_](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)_._

[_Browser Cookie Limits_](http://browsercookielimits.squawky.net/).

*   **Компоненты сторонних разработчиков**: сторонние фреймы iframe и внешние скрипты JS (например, кнопки «поделиться») заменены на статические элементы, где это возможно. Это ограничивает количество вызовов внешних API и сохраняет в тайне от сторонних сервисов действия пользователей на вашем сайте.

[_Simple sharing buttons generator_](https://simplesharingbuttons.com/).

### Запросы

[_Explanation of the following techniques_](https://css-tricks.com/prefetching-preloading-prebrowsing/).

*   **DNS-prefetch**: время загрузки DNS других сайтов сокращается благодаря использованию предсказывающих страниц с _dns-prefetch_.


*   **Preconnection**: поиск DNS, установка TCP и TLS-связи с сервисами, которые скоро понадобятся, выполняется заранее во время простоя с помощью _preconnect_.


*   **Prefetching**: ресурсы, которые скоро понадобятся (например, изображения при ленивой загрузке) загружаются браузером заранее и помещаются в кэш с помощью _prefetch_.


*   **Preloading**: ресурсы, которые будут нужны на текущей странице (например, скрипты, находящиеся в конце тега Body), можно загрузить с помощью
*   _preload_.


[_Difference between prefetch and preload_](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf).

### Тестирование производительности

*   **Google PageSpeed**: все страницы сайта (не только домашняя) были протестированы в Google PageSpeed и набрали по крайней мере 90 очков из 100.

[_Google PageSpeed_](https://developers.google.com/speed/pagespeed/insights/)_._

[_Test your mobile speed with Google_](https://testmysite.withgoogle.com/)_._

[_WebPagetest — Website Performance and Optimization Test_](https://www.webpagetest.org/).

### Доступность

Посмотрите плейлист [A11ycasts с Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) (англ.).

*   **Progressive enhancement**: Большинство функций сайта, например, навигация или поиск, должны работать с выключенным JavaScript. 

[_Enable / Disable JavaScript in Chrome Developer Tools_](https://www.youtube.com/watch?v=kBmvq2cE0D8).

*   **Цветовой контраст**: цветовой контраст сайта соответствует стандарту WCAG AA (для мобильных — AAA).

[_Contrast ratio_](https://leaverou.github.io/contrast-ratio/).

### Заголовки

*   **H1**: на всех страницах присутствует заголовок H1, который отличается от названия сайта, заданного в title.
*   **Заголовки**: заголовки использованы в правильном порядке — от H1 до H6.

[_Why headings and landmarks are so important — A11ycasts #18_](https://www.youtube.com/watch?v=vAAzdi1xuUY&index=9&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g).

### 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_](https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page).

### Семантика

*   **Использованы разные типы input-ов на HTML5**: это важно для мобильных устройств, потому что для разных типов вводимых данных они показывают по-разному выглядящие клавиатуры.

[_Mobile Input Types_](http://mobileinputtypes.com/).

### Формы

*   **Label**: связан с каждым отдельным input-ом в элементах формы. Если label не может быть отображен, нужно использовать aria-label.

[_Using the aria-label attribute — MDN_](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute).

### Тестирование доступности

*   **Стандарты тестирования доступности**: чтобы протестировать страницу, используйте WAVE.

[_Wave testing_](http://wave.webaim.org/).

*   **Навигация с помощью клавиатуры**: проверьте свой сайт, пользуясь только клавиатурой. Все элементы на сайте должны быть доступны для использования.
*   **Скрин-ридер**: все страницы сайта должны работать в программах для чтения информации (VoiceOver, ChromeVox, NVDA или Lynx).
*   **Фокус**: если фокус для элементов отключен, он заменяется видимым в CSS состоянием. 

[_Managing Focus — A11ycasts #22_](https://www.youtube.com/watch?v=srLRSQg6Jgg&index=5&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g).

### 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_](https://www.google.com/webmasters/tools/robots-testing-tool).

*   **Структурированные данные**: помогают поисковым роботам понимать информацию на страницах. Поэтому страницы должны быть протестированы и не содержать ошибок. 

[_Introduction to Structured Data — Search — Google Developers_](https://developers.google.com/search/docs/guides/intro-structured-data)_._

_Проверьте сайт с помощью _[_Structured Data Testing Tool_](https://developers.google.com/structured-data/testing-tool/)_._

_Полный список классов для структурирования данных можно найти на _[_Schema.org_](http://schema.org/docs/full.html).

*   **HTML-карта сайта**: работает и доступна в футере сайта.

[_Sitemap guidelines — Google Support_](https://support.google.com/webmasters/answer/183668?hl=en)_._

[_Sitemap generator_](https://websiteseochecker.com/html-sitemap-generator/).

[Источник](https://habrahabr.ru/company/netologyru/blog/347740/)

</div>

</div>

Авторы получают вознаграждение, когда пользователи голосуют за их посты.
Голосующие читатели также получают вознаграждение за свой голос.