Giters

mr8bit / Front-End-Checklist

Совершенный контрольный список для современных веб-сайтов и тщательных разработчиков

Home Page:http://frontendchecklist.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Front-End Checklist

Contributors CC0

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / page HTML to production.

Он основан на многолетнем опыте разработчиков Front-End, с дополнениями, полученными из некоторых других контрольных списков с открытым исходным кодом.

Table of Contents

  1. Как пользоваться
  2. Head
  3. HTML
  4. Webfonts
  5. CSS
  6. Images
  7. JavaScript
  8. Security
  9. Performance
  10. Accessibility
  11. SEO

How to use?

Все элементы в контрольном списке Front-End необходимы для большинства проектов, но некоторые элементы могут быть опущены или не являются существенными (в случае веб-приложения администрирования вам может не понадобиться RSS-канал, например). Мы решили использовать 3 уровня гибкости:

  • Low означает, что элемент рекомендуется , но может быть опущен в некоторых конкретных ситуациях.
  • Medium означает, что этот пункт настоятельно рекомендуется и в конечном итоге может быть опущен в некоторых действительно конкретных случаях. Некоторые элементы, если их пропустить, могут иметь плохие последствия с точки зрения производительности или SEO.
  • High означает, что элемент не может быть опущен по любой причине. Вы можете вызвать дисфункцию на своей странице или получить доступность или проблемы с SEO. В первую очередь приоритет тестирования должен быть в этих элементах.

У некоторых ресурсов есть смайлик, который поможет вам понять, какой тип содержимого / помощи вы можете найти в контрольном списке:

  • 📖: документация или статья
  • 🛠: онлайн-инструмент / тестирования
  • 📹: медиа или видеоконтент

Head

Notes: You can find a list of everything that could be found in the <head> of an HTML document.

Meta tag

  • Doctype: High Doctype - это HTML5 и находится на вершине всех ваших HTML-страниц..
<!-- Doctype HTML5 -->
<!doctype html>

📖 Determining the character encoding - HTML5 W3C

The next 3 meta tags (Charset, X-UA Compatible and Viewport) need to come first in the head.

  • Charset: High Объявленная кодировка (UTF-8) объявлена правильно.
<!-- Установить кодировку для документа -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium Представлен метатег X-UA-совместимый.
<!-- Попросите Internet Explorer использовать последний механизм рендеринга -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 Specifying legacy document modes (Internet Explorer)

  • Viewport: High Видовое окно объявлено правильно.
<!-- Видовой экран для гибкого веб-дизайна -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: High Заголовок используется на всех страницах (SEO: не более 65 символов, включая название сайта).
<!-- Заголовок документа -->
<title>Заголовок страницы менее 65 символов</title>

📖 Title - HTML | MDN

  • Description: High Предоставлено метаописание, оно уникально и не имеет более 150 символов.
<!-- Описание Meta -->
<meta name="description" content="Описание страницы менее 150 символов">
  • Favicons: MediumКаждый значок был создан и отображен правильно. Если у вас есть только «favicon.ico», поместите его в корень вашего сайта. Обычно вам не нужно использовать разметку. Тем не менее, по-прежнему хорошей практикой является ссылка на него, используя приведенный ниже пример.Сегодня формат PNG рекомендуется в формате .ico (размеры: 32x32px).
<!-- Стандартный значок -->
<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">
  • Apple Touch Icon: Low Apple touch значок apple-mobile-web-app-capable представлен. (Создайте файл Apple Icon с размером не менее 200x200 пикселей, чтобы поддерживать все измерения, которые могут вам понадобиться.)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 Configuring Web Applications

  • Canonical: Medium Используйте rel="canonical", чтобы избежать дублирования содержимого
<!-- Помогает предотвратить дублирование контента -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

  • Language tag: High Языковой тег вашего сайта указан и относится к языку текущей страницы.
<html lang="en">
  • Direction tag: Medium Направление течения указано в теге body (его можно использовать в другом теге HTML).
<html dir="rtl">

📖 dir - HTML | MDN

  • Alternate language: Low Языковой тег вашего сайта указан и относится к языку текущей страницы.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Conditional comments: Low Условные комментарии присутствуют в IE, если это необходимо.

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft

  • RSS feed: Low Если ваш проект является блогом или имеет статьи, ссылка RSS была предоставлена.

  • CSS Critical: Medium Критический CSS (или «выше складки») собирает все CSS, используемые для визуализации видимой части страницы. Он встроен перед вашим основным вызовом CSS и между <style> </ style> в одной строке (уменьшен).

🛠 Critical by Addy Osmani on Github

  • CSS order: HighВсе файлы CSS загружаются перед любыми файлами JavaScript в <head>.(За исключением случая, когда иногда файлы JS загружаются асинхронно поверх вашей страницы).

Social meta

Facebook OG и Twitter Cards для любого веб-сайта настоятельно рекомендуется. Другие теги социальных медиа можно рассмотреть, если вы нацеливаете определенное присутствие на них и хотите обеспечить отображение.

  • Facebook Open Graph: Low Все Facebook Open Graph (OG) протестированы и никого не хватает или с ложной информацией. Изображения должны быть не менее 600 x 315 пикселей, рекомендуется 1200 x 630 пикселей.
<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">
  • Twitter Card: Low
<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="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ back to top

HTML

Лучшие практики

  • HTML5 Семантические элементы: High Семантические элементы HTML5 используются соответствующим образом (заголовок, раздел, нижний колонтитул, основной ...).

📖 HTML Reference

  • Страницы ошибок: High Ошибка 404 и 5xx. Помните, что страница ошибок 5xx должна иметь встроенный CSS (без внешнего вызова на текущем сервере).

  • Noopener: Medium Если вы используете внешние ссылки с target =" _ blank ", ваша ссылка должна иметь атрибут rel =" noopener ", чтобы предотвратить табуляцию вкладок. Если вам нужно поддерживать более старые версии Firefox, используйте rel =" noopener noreferrer ".

📖 Подробнее о rel=noopener

  • Очистить комментарии: Low Необязательный код необходимо удалить перед отправкой страницы в производство.

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

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

🛠 Валидатор W3C

  • HTML Lint: High Я использую инструменты, которые помогут мне проанализировать любые проблемы, которые могут возникнуть в моем HTML-коде.

🛠 Грязная разметка

  • Настольные браузеры: High Все страницы были протестированы на всех современных настольных браузерах (Safari, Firefox, Chrome, Internet Explorer, EDGE ...).

  • Мобильные браузеры: High Все страницы были протестированы во всех мобильных браузерах (собственный браузер, Chrome, Safari ...).

  • Проверка ссылок: High На моей странице нет сломанных ссылок, убедитесь, что у вас нет ошибки 404.

🛠 W3C Link Checker

  • Тест Adblockers: Medium Ваш веб-сайт правильно показывает ваш контент с включенными рекламными блоками (вы можете предоставить сообщение, призывающее людей отключить их рекламный блок).
  • Pixel perfect: High Страницы близки к пикселю. В зависимости от качества объявлений, вы не можете быть на 100% точным, но ваша страница должна быть близка к вашему шаблону.

Pixel Perfect - Расширение Chrome

⬆ вернуться к началу

Веб-шрифты

  • Формат Webfont: High WOFF, WOFF2 and TTF are supported by all modern browsers.
  • Размер Webfont: High Размеры Webfont не превышают 2 МБ (все варианты включены).

⬆ вернуться к началу

CSS

Заметки: Взгляни на Рекомендации CSS и Советы по Sass за которыми следуют большинство разработчиков Front-End. Если у вас есть сомнения в свойствах CSS, вы можете посетить Справочник CSS.

  • Отзывчивый веб-дизайн: High Веб-сайт использует отзывчивый веб-дизайн.
  • Печать CSS: Medium На каждой странице предоставляется таблица стилей печати.
  • Препроцессоры: Medium На вашей странице используется препроцессор CSS (Sass является предпочтительным).
  • Уникальный идентификатор: High Если используются идентификаторы, они уникальны для страницы.
  • Сбросить CSS: High Сброс CSS (сброс, нормализация или перезагрузка) используется и обновляется. (Если вы используете CSS-структуру, такую как Bootstrap или Foundation, в нее уже включен Normalize.)
  • Префикс JS: Low Все классы (или id-используемые в файлах JavaScript) начинаются с js - и не используются в CSS-файлах.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

  • Вставка CSS или строка: High Избегайте любой ценой использования встроенного или встроенного CSS: используется только по уважительным причинам (например: background-image для слайдера, критический CSS).

  • Префиксы поставщиков: High Префиксы поставщика CSS используются и генерируются соответственно совместимости с поддержкой браузера.

🛠 Autoprefixer CSS онлайн

Представление

  • Concatenation: High Файлы CSS объединяются в один файл. (Not for HTTP/2)
  • Минификация: High Все файлы CSS уменьшены.
  • Неблокируемая: Medium Файлы CSS должны быть неблокируемыми, чтобы помешать DOM отнимать время для загрузки.
  • Неиспользуемый CSS: Low Удалить неиспользуемый CSS.

Проверка CSS

  • Stylelint: High Все файлы CSS или SCSS без ошибок.

  • Отзывчивый веб-дизайн: High Все страницы были протестированы на следующих контрольных точках: 320 пикселей, 768 пикселей, 1024 пикселей (может быть больше / отличается в зависимости от вашей аналитики).

  • CSS Validator: Medium CSS был протестирован и исправлены соответствующие ошибки.

🛠 CSS Validator

  • Направление считывания: High Все страницы должны быть протестированы для языков LTR и RTL, если они нуждаются в поддержке.

⬆ back to top

Images

Notes: For a complete understanding of image optimization, check the free ebook Essential Image Optimization from Addy Osmani.

Best practices

  • Optimization: High All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
  • Retina: Low You provide layout images x2 or 3x, support retina display.
  • Sprite: Medium Small images are in a sprite file (in the case of icons, they can be in an SVG sprite image).
  • Width and Height: High All <img> have height and width set (Don't specify px or %).

Note: Lots of developers assume that width and height are not compatible with responsive web design. It's absolutely not the case.

  • Alternative text: High All <img> have an alternative text which describe the image visually.
  • Lazy loading: Medium Images are lazyloaded (A noscript fallback is always provided).

⬆ back to top

JavaScript

Best practices

  • JavaScript Inline: High You don't have any JavaScript code inline (mixed with your HTML code).
  • Concatenation: High JavaScript files are concatenated.
  • Minification: High JavaScript files are minified (you can add the .min suffix).

Minify Resources (HTML, CSS, and JavaScript)

  • JavaScript security:

Guidelines for Developing Secure Applications Utilizing JavaScript*

  • Non-blocking: Medium JavaScript files are loaded asynchronously using async or deferred using defer attribute.

📖 Remove Render-Blocking JavaScript

  • Modernizr: Low If you need to target some specific features you can use a custom Modernizr to add classes in your <html> tag.

🛠 Customize your Modernizr

JavaScript testing

  • ESLint: High No errors are flagged by ESLint (based on your configuration or standards rules).

⬆ back to top

Security

Scan and check your web site

Best practices

  • HTTPS: Medium HTTPS is used on every pages and for all external content (plugins, images...).
  • HTTP Strict Transport Security (HSTS): Medium The HTTP header is set to 'Strict-Transport-Security'.
  • Cross Site Request Forgery (CSRF): High You are ensure that requests made to your server-side are legitimate and originate from your website / app to prevent CSRF attacks.

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

  • Cross Site Scripting (XSS): High Your page or website is free from XSS possible issues.
  • Content Type Options Medium Prevents Google Chrome and Internet Explorer from trying to mime-sniff the content-type of a response away from the one being declared by the server.
  • X-Frame-Options (XFO) Medium Protects your visitors against clickjacking attacks.

⬆ back to top

Performance

Best practices

  • Weight page: High The weight of each page is between 0 and 500 KB.
  • Minified: Medium Your HTML is minified.

🛠 W3C Validator

  • Lazy loading: Medium Images, scripts and CSS need to be lazy loaded to improve the response time of the current page (See details in their respective sections).

  • Cookie size: If you are using cookies be sure each cookie doesn't exceed 4096 bytes and your domain name don't have more than 20 cookies.

Performance testing

  • Google PageSpeed: High All your pages were tested (not only the homepage) and have a score of at least 90/100.

⬆ back to top

Accessibility

Notes: You can watch the playlist A11ycasts with Rob Dodson 📹

Best practices

  • Progressive enhancement: Medium Major functionality like main navigation and search should work without JavaScript enabled.

📖 Enable / Disable JavaScript in Chrome Developer Tools

  • Color contrast: Medium Color contrast should at least pass WCAG AA (AAA for mobile).

🛠 Contrast ratio

Headings

  • H1: High All pages have an H1 which is not the title of the website.
  • Headings: High Headings should be used properly in the right order (H1 to H6).

📹 Why headings and landmarks are so important -- A11ycasts #18

Landmarks

  • Role banner: High <header> has role="banner".
  • Role navigation: High <nav> has role="navigation".
  • Role main: High <main> has role="main".

📖 Using ARIA landmarks to identify regions of a page

Semantics

  • Specific HTML5 input types are used: Medium This is especially important for mobile devices that show customized keypads and widgets for different types.

📖 Mobile Input Types

Form

  • Label: High A label is associated with each input form element. In case a label can't be displayed, use aria-label instead.

📖 Using the aria-label attribute - MDN

Accessibility testing

  • Accessibility standards testing: High Use the WAVE tool to test if your page respects the accessibility standards.

🛠 Wave testing

  • Keyboard navigation: High Test your website using only your keyboard in a previsible order. All interactive elements are reachable and usable.
  • Screen-reader: Medium All pages were tested in a screen-reader (VoiceOver, ChromeVox, NVDA or Lynx).
  • Focus style: High If the focus is disabled, it is replaced by visible state in CSS.

📹 Managing Focus - A11ycasts #22

⬆ back to top

SEO

  • Google Analytics: High Google Analytics is installed and correctly configured.
  • Headings logic: Medium Heading text helps to understand the content in the current page.
  • sitemap.xml: High A sitemap.xml exists and was submitted to Google Search Console (previously Google Webmaster Tools).
  • robots.txt: High The robots.txt is not blocking webpages.
  • Structured Data: High Pages using structured data are tested and are without errors. Structured data helps crawlers understand the content in the current page.
  • Sitemap HTML: Medium An HTML sitemap is provided and is accessible via a link in the footer of your website.

⬆ back to top

Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The Front-End Checklist repository consists of two branches:

1. master

This branch consists of the README.md file that is automatically reflected on the Front-End Checklist website.

2. develop

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.

Contributors

Check out all the super awesome contributors.

Authors

David Dias, Geoffrey Signorato, Sandeep Ramgolam and Cédric Poilly.

License

CC0

⬆ back to top

About

Совершенный контрольный список для современных веб-сайтов и тщательных разработчиков

http://frontendchecklist.com

License:Creative Commons Zero v1.0 Universal