Skip to content
/ Front-End-Checklist Public
forked from ungear/Front-End-Checklist

Ідеальний front-end чеклист для скрупульозних розробників сучасних сайтів

frontendchecklist.com

License

CC0-1.0 license
5 stars 6.4k forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

antonkryvko/Front-End-Checklist

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

233 Commits
CNAME
CNAME
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
_config.yml
_config.yml
 
 

Repository files navigation

Front-End Checklist Logo

Front-End Checklist

The Front-End Checklist це вичерпний перелік елементів сайту або HTML сторінки, котрі слід перевірити перед випуском в production

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‑End_Checklist followed Backers on Open Collective Sponsors on Open Collective Contributors StackShare CC0

Він заснований на багаторічному досвіді front-end розробників і, окрім цього, включає в себе частини інших відкритих checklist-ів.

Зміст

  1. Head
  2. HTML
  3. Web-шрифти
  4. CSS
  5. Картинки
  6. JavaScript
  7. Безпека
  8. Продуктивність
  9. Доступність
  10. SEO

Як цим користуватися?

Усі пункти Front-End Checklist обов'язкові для більшості сайтів, проте деякі елементи можуть бути менш важливі або взагалі пропущені (наприклад, якщо вам не потрібнен RSS для додатку адміністрування). Ми обрали 3 рівня гнучкості:

  • Low означає, що пункт рекомендований, проте може бути пропущений в деяких випадках.
  • Medium елемент вкрай рекомендований і може бути пропущений тільки в дуже специфічних ситуаціях. Невиконання деяких пунктів може мати негативні наслідки, наприклад, з точки зору продуктивності або SEO.
  • High такий пункт обов'язковий. Може зламати сторінку або призвести до проблем з доступністю (accessibility) і SEO. Перевіряйте такі елементи в першу чергу.

Деякі зовнішні посилання позначені значками, щоб ви краще розуміли, який контент або допомогу можна знайти:

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

Якщо хочете зробити внесок до Front-End Checklist App, прочитайте файл README_APP.

Head

Примітка: Можна подивитися перелік усього, що може бути в <head> HTML документа.

Мета-теги

  • Doctype: High Doctype стосується HTML5 і знаходиться нагорі HTML сторінок.
<!doctype html> <!-- HTML5 -->

Наступні 3 мета-тега (Charset, X-UA Compatible та Viewport) мають бути розташовані на самому початку <head>.

  • Charset: High Кодування (UTF-8) задане правильно.
<!-- Задати кодування документа -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium Тег X-UA-Compatible присутній.
<!-- Проінструктує Internet Explorer використовувати останній двигунець рендерингу -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • Viewport: High Viewport заданий правильно.
<!-- Задати viewport для responsive дизайну -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Title: High Заданий на всіх сторінках (SEO: Google підраховує довжину символів в title, і обрізає його від 472 до 482 пікселів. Тому обмеження довжини title близько 55 символів).
<!-- Document Title -->
<title>Заголовок коротший за 55 символів</title>
  • Description: High Description заданий, унікальний і коротший за 150 символів.
<!-- Meta Description -->
<meta name="description" content="Опис сторінки коротший за 150 символів">
  • Favicons: Medium Іконки відображаються коректно. Якщо у вас тільки один favicon.ico, покладіть його в корінь сайту. Звичайно вам не треба нічого додавати в розмітку. Проте, хорошою практикою вважається робити посилання як в прикладі нижче. На сьогоднішній день рекомендований PNG формат замість .ico (роздільна здатність: 32x32px).
<!-- Стандартний favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Рекомендований формат favicon -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Web App Meta: Low Задані мета-теги для Apple
<!-- Apple Touch Icon (не менше, ніж 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- Розгорнути веб-програму на повний екран -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Задає стиль для Статус бару (можливі значення дивись за посиланням Supported Meta Tags нижче) -->
<!-- Не має ефекту, якщо не прописано попередній тег -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
  • Windows Tiles: Low Windows tiles задані.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.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>
  • Canonical: Medium Використовуйте rel="canonical" щоб уникнути дублювання контенту.
<!-- Допомогає уникнути проблем з дубльованим контентом -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML теги

  • Атрибут lang: High Атрибут lang заданий у відповідності до мови сторінки.
<html lang="en">
  • Атрибут direction: Medium Напрямок тексту заданий в цьому атрибуті тега html. Також цей атрибут може бути застосований до інших тегів.
<html dir="rtl">
  • Альтернативна мова: Low Тег мови заданий і відповідає мові сторінки.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Умовні коментарі: Low Умовні коментарі задані для IE, якщо вимагається.

  • RSS feed: Low Якщо ваш проект є блогом чи містить сторінки, переконайтесь, що RSS налаштований.

  • Критичні CSS стилі задані inline: Medium Критичний CSS (critical CSS) — CSS, який задає стилі контенту видимого одразу поки відбувається процес завантаження сторінки ("above the fold content"). Мініфікуйте такий CSS і вставте всередині <style></style> перед завантаженням решти стилів.

  • Порядок CSS: High Усі CSS файли мають завантажуватися перед будь-якими JavaScript файлами в <head>. (За вийнятком випадків, коли JS файли завантажуються асинхроно вгорі сторінки).

Соціальні мережі

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

  • Facebook Open Graph: Low Усі теги Facebook Open Graph (OG) протестовані, жоден не пропущений та інформація в них вірна. Картинки мають бути принаймні 600 x 315 пікселів. Рекомендована роздільна здатність 1200 x 630 пікселів.

Примітка: Використовуйте og:image:width і og:image:height щоб вказати роздільну здатність для павука (the crawler) для того, щоб картинки могли бути відрендерені одразу ж, інакше знадобиться більше часу на асинхронне підвантаження і обробку.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Мій сайт">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Опис тут">
<meta property="og:site_name" content="MySite">
<meta property="og:locale" content="en_US">
<!-- Наступні теги не обов'язкові, але рекомендовані -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • 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">

⬆ нагору

HTML

Найкращі практики

  • Семантичні елементи HTML5: High Семантичні елементи HTML5 використовуються потрібним чином (header, section, footer, main...).

  • Сторінки помилок: High Сторінки помилок 404 і 5xx існують. Не забувайте, що в сторінки помилок 5xx мають бути ввімкнені їх стилі, щоб обійтися без підвантаження з сервера.

  • Noopener: Medium Посилання на зовнішні ресурси з target="_blank" мають мати атрибут rel="noopener", щоб запобігти фішинговим атакам типу tab nabbing. Якщо треба підтримувати старі версії Firefox, використовуйте rel="noopener noreferrer".

  • Видалення коментарів: Low Непотрібний код має бути видалений перед відправленням в production.

Тестування HTML

  • W3C сумісність: High Всі сторінки мають бути перевірені W3C валідатором.
  • HTML Lint: High Інструменти, які допомогають аналізувати проблеми в HTML.
  • Перевірка посилань: High Немає зламаних посилань, немає помилок 404.
  • Перевірка на Adblock: Medium Сайт коректно відображається з увімкненим блокувальником реклами на кшталт AdBlock. Можете показати спеціальне повідомлення з проханням вимкнути подібні плаґіни.

⬆ нагору

Web-шрифти

Примітка: Використання web-шрифтів може викликати мерехтіння або зникнення тексту (FOUT — Flash of Unstyled Text, FOIT - Flash of Invisible Text). Тому переконайтесь, що заданий резервний шрифт, або використовуйте завантажувальник шрифтів щоб тримати ситуацію під контролем.

  • Формати web-шрифтів: High WOFF, WOFF2 і TTF підтримуються усіма браузерами.

  • Розмір web-шрифтів: High Розмір шрифтів сумарно не перевищує 2 MB.

  • Завантажувальник web-шрифтів: Low Контролюйте завантаження шрифтів за допомогою завантажувальника.

⬆ нагору

CSS

Примітка: Ознайомтесь з CSS guidelines и Sass Guidelines, яких притримуються більшість розробників. Якщо у вас є сумніви щодо CSS властивостей, відвідайте CSS Reference. Окрім цього погляньте на короткий гайд Code Guide.

  • Чутливий (responsive) веб-дизайн: High Дизайн має бути чутливим.
  • CSS для друку: Medium Стилі для друку задані і працюють коректно.
  • Препроцесори: Low Використовуйте CSS препроцесори (наприклад Sass, Less, Stylus).
  • Унікальні ID: High Якщо використовуються Id, переконайтесь, що вони унікальні в межах сторінки.
  • Скидання (reset) CSS: High Використовуються актуальні версії інструментів для нормалізації CSS (reset, normalize или reboot). (Якщо використовуєте CSS фреймворк типу Bootstrap або Foundation, Normalize вже в них ввімкнений.)
  • JS префікси: Low Всі класи і id, які використовуються в JS файлах, починаються з префікса js- і не беруть участь у призначенні стилів.
<div id="js-slider" class="my-slider">
<!-- Або -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • Embedded або inline CSS: High Будь-якою ціною уникайте впровадження CSS в <style> теги (embeding) чи inline стилів. Застосовуйте такі підходи лише в особливих випадках, наприклад background-image для слайдера або critical CSS (див. вище).
  • Вендорні префікси: High CSS вендорні префікси використовуються і генеруються у відповідності до браузерів, що підтримуються.

Продуктивність CSS

  • Конкатенація: High CSS файли зконкатеновані в один файл. (Не для HTTP/2).
  • Мініфікація: High Всі CSS файли мініфіковані.
  • Неблокуючий CSS: Medium CSS файли мать бути такими, що не блокують DOM, щоб уникнути втрат часу.
  • Невикористовуваний CSS: Low Видаліть стилі, що не використовуються.

Тестування CSS

  • Stylelint: High В CSS чи SCSS файлах немає помилок.

  • Чутливий web-дизайн: High Всі сторінки були протестовані на наступних контролбни точках: 320px, 768px, 1024px (може бути більше в залежності від проекта).

  • CSS валідатор: Medium CSS був протестований, помилки виправлені.

  • Desktop браузери: High Всі сторінки були протестовані на всіх desktop браузерах, що підтримуються (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
  • Мобільні браузери: High Всі сторінки були протестовані на всі мобільних браузерах, що підтримуються (Native browser, Chrome, Safari...).
  • ОС: High Всі сторінки були протестовані на всіх ОС, що підтримуються (Windows, Android, iOS, Mac...).
  • Точна відповідність макету: Low В залежності від проекта і якості макета, перед вами може стояти задача зробити розмітку такою, що ідеально відповідає дизайну. Використовуйте спеціальні інструменти для перевірки вашої реалізації на відповідність макету.

Pixel Perfect - Chrome Extension

  • Напрям тексту: High Всі сторінки мають бути протестовані в LTR і RTL мовах, якщо вони підтримуються.

⬆ нагору

Картинки

Примітка: Для повного розуміння оптимізації картинок прочитайте безкоштовну електронну книгу Essential Image Optimization от Addy Osmani.

Найкращі практики

  • Оптимізація: High Всі картинки оптимізовані для рендеринга в браузері. Формат WebP може бути використаний для критичних сторінок, наприклад, домашньої сторінки (Homepage).
  • 🛠 Imagemin
  • 🛠 Використовуйте ImageOptim для безкоштовної оптимізації картинок.
  • 🛠 Використовуйте Kraken.io якк круту альтернативу для оптимізації png і jpg. До 1 Mb безкоштовно.
  • 🛠 Використовуйте TinyPNG для оптимізації png, apng (анімований png) і jpg без втрати якості. Є як платна, так і безкоштовна версія.
  • 🛠 ZorroSVG jpg-подібне стиснення для прозорих картинок з використанням svg масок.
  • 🛠 SVGO інструмент під Nodejs для оптимізації SVG файлів.
  • 🛠 SVGOMG web версія SVGO для онлайн оптимізації SVG файлів.
  • Picture/Srcset: Medium Використовуйте picture/srcset щоб задати найбільш відповідну картинку для поточного viewport.
  • Retina: Low Ви використовуєте картинки більшого розміру 2x або 3x для підтримки дисплеїв retina.
  • Спрайти: Medium Дрібні картинки об'єднані в спрайт файл. У випадку іконок це може бути SVG файл.
  • Width и Height: High Задайте атрибути width і height для <img> якщо розміри картинки зазделегідь відомі. Може бути пропущений для встановлення розмірів через CSS.
  • Альтернативний текст: High Для всіх <img> заданий альтернативниый текст, котрий описує картинку.
  • Ліниве завантаження (lazy loading): Medium Застосовується lazy loading для картинок (заданий резервний noscript).

⬆ нагору

JavaScript

Найкращі практики

  • JavaScript Inline: High Не використовується inline JavaScript (змішаний з HTML).
  • Конкатенація: High JavaScript файли зконкатеновані в один.
  • Мініфікація: High JavaScript файли мініфіковані. Можете додати суфікс .min.
  • Безпека JavaScript: High
  • noscript tag: Medium Використовуйте <noscript> всередині <body> щоб задати контент для ситуацій, коли скрипти не підтримуються або вимкнені в браузері. Корисно для Single Page Application (React, Angular і т.п.) Приклад
<noscript>
  Для роботи додатка необхідно увімкнути JavaScript.
</noscript>
  • Неблокуючий JS: Medium JavaScript файли завантажуються асинхронно з використанням атрибута async або відкладено з defer.
  • Оптимізовані і актуальні версії JS бібліотек: Medium Переконайтесь, що всі JS библиотеки, що завнтажуються, дійсно необхідні, позбавтесь тих, що не використовуються. Нескладний функціонал краще реалізовувати на чистому (vanilla) JavaScript. Використовуйте останні версії бібліотек. В них менше помилок і вони безпечніші у порівнянні з застарілими версіями.
  • Modernizr: Low За допомогою кастомного Modernizr можна додавати класи до <html>.

Тестування JavaScript

  • ESLint: High ESLint не видає помилок, перевіряючи ваш код. Можна використовувати вашу власну конфігурацію або стандартні правила.

⬆ нагору

Безпека

Проскануйте і перевірте ваш веб-сайт

Найкращі практики

  • HTTPS: Medium HTTPS використовується на всіх сторінках, а також для усього стороннього контенту (плаґіни, картинки...).
  • HTTP Strict Transport Security (HSTS): Medium Виставлений HTTP заголовок 'Strict-Transport-Security'.
  • Захист від фальсифікації міжсайтових запитів (Cross Site Request Forgery - CSRF): High Ви гарантуєте, що запити на ваш сервер робляться саме вашим веб-сайтом, щоб уникнути атак CSRF.
  • Міжсайтовий скриптинг (Cross Site Scripting - XSS): High Ваш веб-сайт захищений від вразливостей XSS.
  • Заголовок Content-Type: Medium Запобігти mime-sniff (аналіз контенту і підміна заголовка content-type) в Google Chrome і Internet Explorer.
  • X-Frame-Options (XFO): Medium Захистіть своїх користуваів від атак типу clickjacking.
  • Політика безпеки контенту (Content Security Policy): Medium Задайте правила, які визначають, який контент і звідки дозволено завантажувати на ваш сайт. Також це допоможе захиститися проти атак clickjacking.

⬆ нагору

Продуктивність

Найкращі практики

  • Головні цілі: Medium Ваші сторінки повинні досягати наступних цілей:
    • Перше значуще відображення (First Meaningful Paint) менше 1 секунди
    • Час до інтерактивності (Time to Interactive) менше 5 секунд для "середньостатистичного" пристрою (Android-смартфон за 200$ з 3G мережею із затримкою 400мс та швидкістю передачі даних 400кбіт/с) і менше 2 секунд для повторних відвідувань
    • Критичні файли не більше 170кБ у стисненому вигляді (gzipped)
    • Обсяг кожної сторінки не повинен перевищувати 500кБ.
  • Мініфікація HTML: Medium Ваш HTML мініфікований.

  • Ліниве завантаження (Lazy loading): Medium Використовуйте lazy loading для завантаження картинок, скриптів і CSS щоб зменшити час ініціалізації сторінки. Дивіться детальніше у відповідних секціях чеклиста.

  • Розмір cookie: Medium Якщо використовуєте cookies, переконайтесь, що їх розмір не перевищує 4096 байт. Також один домен не повинен використовувати більше 20 cookies.

  • Сторонні компоненти (Third party components): Medium Iframe і сторонні компоненти, які покладаються на JS з інших доменів (на кшталт кнопок "Поділитися"), мають бути, за можливістю, замінені на ваші статичні компоненти, щоб зменшити число запитів і уникнути можливого витоку даних ваших користувачів.

Підготовка майбутніх запитів (preparing upcoming requests)

  • DNS resolution: Low DNS сторонніх компонентів позначені в dns-prefetch, щоб браузер міг розібратися з цими DNS заздалегідь.
<link rel="dns-prefetch" href="https://example.com">
  • Preconnect: Low Використовуйте preconnect, щоб браузер міг здйснити DNS lookup, TCP handshake і TLS negotiation заздалегідь під час простоювання браузера.
<link rel="preconnect" href="https://example.com">
  • Prefetch: Low З використанням prefetch ресурси, котрі скоро можуть знадобитися, наприклад картинки с lazy loading, будуть підвантажені заздалегідь під час простоювання браузера.
<link rel="prefetch" href="image.png">
  • Preload: Low preload заздалегідь підвантажує ресурси, потрібні для поточної сторінки, наприклад, скрипти наприкінці <body>.
<link rel="preload" href="app.js">

Тестування продуктивності

  • Google PageSpeed: High Всі сторінки протестовані і мають рейтинг хоча б 90/100.

⬆ нагору

Доступність

Примітка: Ознайомтесь з плейлистом A11ycasts with Rob Dodson 📹

Найкращі практики

  • Прогресивне покращення: Medium Основний функціонал, наприклад навігація і пошук, мають працювати при вимкненому JavaScript.
  • Контрастність кольорів: Medium Контрастність має відповідати WCAG AA (AAA для мобільних пристроїв).

Заголовки

  • H1: High На всіх сторінках є H1, який відрізняється від title сторінки.
  • Заголовки: High Заголовки мають йти в правильному порядку (від H1 до H6).

ARIA landmarks

  • Role banner: High У <header> проставлений role="banner".
  • Role navigation: High у <nav> проставлений role="navigation".
  • Role main: High У <main> проставлений role="main".

Семантика

  • Спеціальні типи input для HTML5: Medium Це особливо важливо для мобільних пристроїв, так як там використовуються різні клавіатури для різних типів даних, що вводяться.

Форми

  • Label: High <label> заданий для кожного елемента форми. Якщо його застосувати не можна, використовуйте aria-label.

Тестування доступності

  • Перевірка на відповідність стандартам: High Використовуйте інструмент WAVE для перевірки.
  • Клавіатурна навігація: High Пройдіться по вашему сайту, використовуючи лише клавиатуру. Всі інтерактивні елементи мають быть доступні.
  • Screen-reader: Medium Перевірте усі сторінки в программах для читання екрану (screen-reader) таких как VoiceOver, ChromeVox, NVDA чи Lynx.
  • Стилі для фокусу: High Якщо фокус заборонений, до елемента під фокусом мають застосовуватися спеціальні стилі.

⬆ нагору

SEO

  • Google Analytics: High Google Analytics встановлений і налаштований.
  • Логичні заголовки: Medium Текст заголовків допомогає зрозуміти контент сторінки.
  • sitemap.xml: High sitemap.xml існує і заданий в Google Search Console (раніше Google Webmaster Tools).
  • robots.txt: High robots.txt не блокує сторінки.
  • Структуровані дані (Structured Data): High На сторінках використовуються перевірені і правильні структуровані дані. Вони допомогають павукам (crawlers) зрозуміти контент сторінки.
  • HTML карта сайту: Medium HTML карта сайту існує і доступна за посиланням в підвалі сторінки.
  • Pagination теги: Medium Задайте rel="prev" і rel="next" щоб показати, що контент розбитий на сторінки.
<!-- Приклад: Pagination link tags для сторінки 2 з списку сторінок -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ нагору

Переклад

Front-End Checklist також доступний іншими мовами. Дякуємо усім перекладачам за приголомшливу роботу!

Front-End Checklist Badge

Вставте цей бейдж у ваш файл README, якщо хочете показати, що слідуєте цьому чеклисту!

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ нагору

Сприяння

Створіть issue чи pull request щоб запропонувати зміну чи доповнення

Керівництво

Репозиторій Front-End Checklist складається з двох гілок:

1. master

Ця гілка складаєтсья з файла README.md, який автоматично відображається на сайті Front-End Checklist.

2. develop

Ця гілка використовуватиметься для внесення значних змін в структуру чи контент. Для усунення дрібних помилок і створення нових елементів переважно використовувати гілку master.

Підтримка

Якщо у вас є питання чи побажання, без роздумів пишіть в Gitter або Twitter:

Автор

David Dias

Помічники

Проект існує завдяки допомозі спільноти. [Зробити внесок].

Прихильники

Дякую усім нашим прихильникам! 🙏 [Стати прихильником]

Патрони

Підтримати цей проект ставши патроном. Ваш логотип буде відображатися тут з посиланням на ваш сайт. [Стати патроном]

Ліцензія

CC0

⬆ нагору

Syncronized with commit 07b7ba6

About

Ідеальний front-end чеклист для скрупульозних розробників сучасних сайтів

frontendchecklist.com

Resources

Readme

License

CC0-1.0 license

Code of conduct

Code of conduct
Activity

Stars

5 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published