Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/master/data/images/logo-front-end-checklist.jpg" alt="Front-End Checklist" width="130"> <br> <br> Checklista Frontend <br> </h1> <h4 align="center">Lista kontrolna frontend to wyczerpująca lista wszystkich elementów, które potrzebujesz mieć / musisz przetestować przed uruchomieniem witryny/strony HTML w produkcji.</h4> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"> <img src="https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg?style=flat-square" alt="Contributors"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/"> <img src="https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg?style=flat-square" alt="Front‑End_Checklist followed"> </a> <a href="https://creativecommons.org/publicdomain/zero/1.0/"> <img src="https://img.shields.io/badge/license-CC0-green.svg?style=flat-square" alt="CC0"> </a> </p> <p align="center"> <a href="#how-to-use">Jak korzystać</a> • <a href="#contributing">Współtworzenie</a> • <a href="https://frontendchecklist.io">Strona</a> • <a href="https://www.producthunt.com/posts/front-end-checklist">Product Hunt</a> </p> <p align="center"> <span>Inne Checklisty:</span> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist#---------front-end-performance-checklist-">🎮 Front-End Performance Checklist</a> • <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">💎 Front-End Design Checklist</a> </p>

Opiera się ona na wieloletnim doświadczeniu programistów frontend, a dodatki pochodzą z innych list kontrolnych typu open source.

Spis treści

Head
HTML
Webfonts
CSS
Obrazy
JavaScript
Bezpieczeństwo
Wydajność
Dostępność
SEO
Tłumaczenia

Jak korzystać?

Wszystkie elementy w Checkliście Front-End są wymagane w przypadku większości projektów, ale niektóre elementy można pominąć lub nie są one niezbędne (w przypadku administracyjnej aplikacji internetowej może nie być potrzebny na przykład kanał RSS). Wybieramy 3 poziomy elastyczności:

oznacza, że element jest zalecany, ale można go pominąć w niektórych szczególnych sytuacjach.
oznacza, że element jest wysoce zalecany i może zostać ostatecznie pominięty w niektórych naprawdę szczególnych przypadkach. Niektóre elementy, jeśli zostaną pominięte, mogą mieć negatywne skutki pod względem wydajności lub SEO.
oznacza, że elementu nie można pominąć z jakiegokolwiek powodu. Możesz spowodować dysfunkcję strony lub problemy z dostępnością lub SEO. Priorytetem testów muszą być najpierw te elementy.

Niektóre materiały zawierają emotikony, które pomagają zrozumieć, jaki rodzaj treści / pomocy można znaleźć na liście kontrolnej:

📖: dokumentacja lub artykuł
🛠: narzędzie online / narzędzie testujące
📹: treści multimedialne lub wideo

Możesz przyczynić się do Front-End Checklist App czytając plik README_APP, który wyjaśnia wszystko odnośnie projektu.

Head

Uwagi: Możesz znaleźć listę wszystkiego co powinno znaleźć się w <head> dokumentu HTML.

Meta tag

Doctype: Doctype to HTML5 i znajduje się na górze wszystkich stron HTML.

<!doctype html> <!-- HTML5 -->

📖 Determining the character encoding - HTML5 W3C

Następne 2 meta tagi (Charset oraz Viewport) muszą być na pierwszym miejscu w head.

Charset: Charset (UTF-8) jest zadeklarowany poprawnie.

<!-- Ustaw kodowanie znaków dla dokumentu -->
<meta charset="utf-8">

Viewport: Viewport jest zadeklarowany poprawnie.

<!-- Viewport do responsywnego projektowania stron internetowych -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Title: Tytuł jest używany na wszystkich stronach (SEO: Google oblicza szerokość pikseli znaków użytych w tytule i odcina od 472 do 482 pikseli. Średni limit znaków wynosiłby około 55 znaków).

<!-- Tytuł dokumentu -->
<title>Tytuł strony z mniej niż 55 znaków</title>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

Opis: Opis meta jest podany, jest unikalny i nie ma więcej niż 150 znaków.

<!-- Opis Meta -->
<meta name="description" content="Opis strony, mniej niż 150 znaków">

📖 Meta Description - HTML - MDN

Favicons: Każdy favicon został utworzony i wyświetla się poprawnie. Jeśli masz tylko favicon.ico, umieść go w katalogu głównym swojej witryny. Zwykle nie musisz używać żadnych znaczników. Jednak nadal dobrą praktyką jest łączenie się z nią za pomocą poniższego przykładu. Dzisiaj, format PNG jest zalecany zamiast formatu .ico (wymiary: 32x32px).

<!-- Standardowy favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Zalecany format favicon -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

🛠 Favicon Generator

🛠 RealFaviconGenerator

📖 Favicon Cheat Sheet

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

📖 PNG favicons - caniuse

Apple Web App Meta: Metatagi Apple są obecne.

<!-- Apple Touch Icon (przynajmniej 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- Aby uruchomić aplikację internetową na pełnym ekranie -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (zobacz Supported Meta Tags poniżej dla dostępnych wartości) -->
<!-- Nie działa, chyba że masz poprzedni metatag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

📖 Configuring Web Applications

📖 Supported Meta Tags

Windows Tiles: Kafelki Windows są obecne i połączone.

<!-- Kafelki Windows -->
<meta name="msapplication-config" content="browserconfig.xml" />

Minimalnie wymagany znacznik xml dla pliku browserconfig.xml wygląda następująco:

<?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: Use rel="canonical" aby uniknąć powielania treści.

<!-- Pomaga zapobiegać powielaniu problemów z treścią -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

📖 Use canonical URLs - Search Console Help - Google Support

📖 5 common mistakes with rel=canonical - Google Webmaster Blog

Tagi HTML

Atrybut języka: Atrybut lang twojej witryny jest określony i związany z językiem bieżącej strony.

<html lang="en">

Atrybut direction: Kierunek odczytu jest określony na znaczniku HTML (może być użyty na innym znaczniku HTML).

<html dir="rtl">

📖 dir - HTML - MDN

Alternatywny język: Tag języka twojej witryny jest określony i powiązany z językiem bieżącej strony.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

x-default: Tag języka twojej witryny dla międzynarodowych stron docelowych.

<link rel="alternate" href="https://example.com/" hreflang="x-default" />

📖 x-default - Google

Komentarze warunkowe: W razie potrzeby komentarze warunkowe są dostępne dla IE.

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

Kanał RSS: Jeśli twój projekt jest blogiem lub zawiera artykuły, podano link RSS.
CSS Critical: Krytyczny CSS (lub "above the fold") zbiera wszystkie CSS użyte do renderowania widocznej części strony. Jest osadzony przed głównym wywołaniem CSS i między <style> </style> w jednym wierszu (zminimalizowanym).

🛠 Critical by Addy Osmani on GitHub automatyzuje to.

CSS order: Wszystkie pliki CSS są ładowane przed plikami JavaScript w <head>. (Z wyjątkiem przypadku, gdy czasami pliki JS są ładowane asynchronicznie na górze strony).

Social meta

Wizualizuj i generuj automatycznie nasze społecznościowe metatagi za pomocą Meta Tags

Facebook OG i Twitter Cards są, dla każdej strony, wysoko zalecane. Inne tagi mediów społecznościowych można rozważyć, jeśli kierujesz na nie określoną uwagę i chcesz zapewnić ich wyświetlanie.

Facebook Open Graph: Cały Facebook Open Graph (OG) jest przetestowany i niczego nie brakuje, ani nie ma niepoprawnych informacji. Obrazy muszą mieć co najmniej 600 x 315 pikseli, chociaż zaleca się 1200 x 630 pikseli.

Uwagi: Używanie og:image:width oraz og:image:height określi wymiary obrazu dla crawlera, aby mógł natychmiast renderować obraz bez konieczności asynchronicznego pobierania i przetwarzania.

<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">
<!-- Kolejne tagi są opcjonalne, ale zalecane -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

📖 A Guide to Sharing for Webmasters

📖 Best Practices - Sharing

🛠 Test your page with the Facebook OG testing

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="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

📖 Getting started with cards — Twitter Developers

🛠 Test your page with the Twitter card validator

⬆ powrót do góry

HTML

Najlepsze praktyki

Elementy semantyczne HTML5: Elementy semantyczne HTML5 są używane odpowiednio (header, section, footer, main...).

📖 HTML Reference

Strony błędów: Istnieje błąd strony 404 i 5xx. Pamiętaj, że strony błędów 5xx muszą mieć zintegrowany CSS (brak zewnętrznego połączenia na bieżącym serwerze).
Noopener: W przypadku korzystania z zewnętrznych linków z target="_blank", twój link powinien mieć atrybut rel="noopener" aby zapobiec przechwytywaniu kart. Jeśli potrzebujesz obsługi starszych wersji Firefoxa, użyj rel="noopener noreferrer".

📖 About rel=noopener

Wyczyść komentarze: Niepotrzebny kod należy usunąć przed wysłaniem strony do produkcji.

Testowanie HTML

Zgodny z W3C: Wszystkie strony należy przetestować za pomocą walidatora W3C, aby zidentyfikować możliwe problemy w kodzie HTML.

🛠 Walidator W3C

HTML Lint: Korzystam z narzędzi, które pomagają mi analizować wszelkie problemy, które mogą wystąpić w kodzie HTML.

🛠 Dirty markup

🛠 webhint

Link checker: Na mojej stronie nie ma niedziałających linków, sprawdź, czy nie wystąpił błąd 404.

🛠 W3C Link Checker

Test Adblockerów: Twoja strona wyświetla poprawnie twoje treści z włączonymi adblockerami (możesz dostarczyć wiadomość zachęcającą ludzi do wyłączenia ich adblockera).

📖 Use AdBlocking in your Dev Environment

⬆ powrót do góry

Webfonts

Uwagi: Używanie czcionek internetowych może powodować flashowanie niestylowanego tekstu / flashowanie niewidocznego tekstu - rozważ użycie czcionek zastępczych i/lub użycie programów ładujących czcionki internetowe do kontrolowania zachowania.

📖 Google Technical considerations about webfonts

Format webfont: WOFF, WOFF2 oraz TTF są obsługiwane przez wszystkie nowoczesne przeglądarki.

📖 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

Rozmiar Webfont: Rozmiary webfont nie przekraczają 2 MB (wszystkie warianty w zestawie).
Webfont loader: Kontroluj zachowanie ładowania za pomocą modułu ładującego webfont

🛠 Typekit Web Font Loader

⬆ powrót do góry

CSS

Uwagi: Rzuć okiem na Wytyczne CSS oraz Wytyczne Sass obserwowane przez większość programistów Front-End. Jeśli masz wątpliwości co do właściwości CSS, możesz odwiedzić CSS Reference. Jest też krótki Code Guide dla spójności.

Responsive Web Design: Strona korzysta z responsywnego projektowania stron internetowych.
CSS Print: Arkusz stylów wydruku jest dostarczony i jest poprawny na każdej stronie.
Preprocessors: Twój projekt korzysta z preprocesora CSS (np. Sass, Less, Stylus).
Unique ID: Jeśli używane są identyfikatory, są one unikalne dla strony.
Reset CSS: Reset CSS (reset, normalizacja lub restart) jest używany i aktualny. (Jeśli używasz frameworka CSS, takiego jak Bootstrap lub Foundation, normalizacja jest już w nim zawarta.)

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS prefix: Wszystkie klasy (lub id- używane w plikach JavaScript) zaczynają się od js- i nie są stylizowane na pliki CSS.

<div id="js-slider" class="my-slider">
<!-- Lub -->
<div id="id-used-by-cms" class="js-slider my-slider">

embedded or inline CSS: Unikaj za wszelką cenę osadzania CSS w tagach <style> lub używania wbudowanego CSS: używaj tylko z ważnych powodów (np. background-image dla slider, critical CSS).
Vendor prefixes: Prefiksy dostawców CSS są używane i są generowane zgodnie ze zgodnością obsługi przeglądarki.

🛠 Autoprefixer CSS online

Wydajność

Konkatenacja: Pliki CSS są łączone w jednym pliku (Nie dla HTTP/2).
Minifikacja: Wszystkie pliki CSS są minifikowane.
Non-blocking: Pliki CSS muszą być nieblokujące, aby DOM nie zajmował dużo czasu podczas ładowania.

📖 loadCSS by filament group

📖 Example of preload CSS using loadCSS

Nieużywany CSS: Usuń nieużywany CSS.

🛠 UnCSS Online

🛠 PurifyCSS

🛠 PurgeCSS

🛠 Chrome DevTools Coverage

Testowanie CSS

Stylelint: Wszystkie pliki CSS lub SCSS są bez żadnych błędów.

🛠 stylelint, a CSS linter

📖 Sass guidelines

Responsive web design: Wszystkie strony zostały przetestowane w następujących breakpointach: 320px, 768px, 1024px (mogą być bardziej / różne w zależności od danych analitycznych).
Walidator CSS: CSS został przetestowany i odpowiednie błędy zostały poprawione.

🛠 CSS Validator

Przeglądarki stacjonarne: Wszystkie strony zostały przetestowane we wszystkich obecnych przeglądarkach na komputery (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
Przeglądarki mobilne: Wszystkie strony zostały przetestowane we wszystkich obecnych przeglądarkach mobilnych (Native browser, Chrome, Safari...).
OS: Wszystkie strony zostały przetestowane na wszystkich obecnych systemach operacyjnych (Windows, Android, iOS, Mac...).

Dokładność projektu: W zależności od projektu i jakości creatives możesz zostać poproszony o zbliżenie się do projektowania. Możesz użyć niektórych narzędzi do porównania creatives z implementacją kodu i zapewnienia spójności.

Pixel Perfect - Chrome Extension

Kierunek czytania: Wszystkie strony muszą zostać przetestowane pod kątem języków LTR i RTL, jeśli wymagają obsługi.

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ powrót do góry

Obrazy

Uwagi: Aby w pełni zrozumieć optymalizację obrazu, sprawdź bezpłatny ebook Essential Image Optimization od Addy Osmani.

Najlepsze praktyki

Optymalizacja: Wszystkie obrazy są zoptymalizowane do wyświetlania w przeglądarce. Format stron internetowych można zastosować do stron krytycznych (takich jak strona główna).

🛠 Imagemin

🛠 Użyj ImageOptim aby zoptymalizować swoje zdjęcia za darmo.

🛠 Użyj KeyCDN Image Processing do optymalizacji obrazu w czasie rzeczywistym.

🛠 Użyj Kraken.io, świetna alternatywa zarówno dla optymalizacji png, jak i jpg. Do 1 MB na pliki w abonamencie darmowym.

🛠 TinyPNG losslessly optymalizuje obrazy png, apng (animowane png) i jpg. Dostępna wersja bezpłatna i płatna.

🛠 ZorroSVG jpg-like kompresja dla przezroczystych obrazów przy użyciu maskowania svg.

🛠 SVGO oparte na Nodejs narzędzie do optymalizacji plików grafiki wektorowej SVG.

🛠 SVGOMG internetowa wersja GUI SVGO do optymalizacji plików svg online.

Picture/Srcset: Używasz picture/srcset, aby zapewnić najbardziej odpowiedni obraz dla bieżącego viewportu użytkownika.

📖 How to Build Responsive Images with srcset

Retina: Zapewniasz obrazy układu 2x lub 3x, obsługuje wyświetlanie retina.
Sprite: Małe obrazy znajdują się w pliku ikonki (w przypadku ikon mogą być w obrazku ikonki SVG).
Szerokość i wysokość: Ustaw atrybuty width i height na <img> jeśli znany jest ostateczny rozmiar renderowanego obrazu (można go pominąć przy określaniu rozmiaru CSS).
Alternatywny tekst: Wszystkie <img> mają alternatywny tekst, który opisuje obraz wizualnie.

📖 Alt-texts: The Ultimate Guide

Lazy loading: Obrazy są ładowane lazyloaded (zawsze dostępna jest rezerwowa kopia zapasowa).

⬆ powrót do góry

JavaScript

Najlepsze praktyki

JavaScript Inline: Nie masz kodu inline JavaScript (zmieszanego z kodem HTML).
Konkatenacja: Pliki JavaScript są łączone.
Minifikacja: Pliki JavaScript są minifikowane (możesz dodać sufiks .min).

📖 Minify Resources (HTML, CSS, and JavaScript)

Bezpieczeństwo JavaScript:

📖 Guidelines for Developing Secure Applications Utilizing JavaScript

noscript tag: Uzyj tagu <noscript> w body HTML, jeśli typ skryptu na stronie nie jest obsługiwany lub skrypty są obecnie wyłączone w przeglądarce. Będzie to pomocne w renderowaniu ciężkich aplikacji, takich jak React.js, po stronie klienta, patrz przykłady.

<noscript>
  Aby uruchomić tę aplikację, musisz włączyć JavaScript.
</noscript>

Non-blocking: Pliki JavaScript są ładowane asynchronicznie za pomocą async lub odroczone za pomocą atrybutu defer.

📖 Remove Render-Blocking JavaScript

Zoptymalizowane i zaktualizowane biblioteki JS: Wszystkie biblioteki JavaScript używane w twoim projekcie są niezbędne (wolą Vanilla Javascript dla prostych funkcji), zaktualizowane do najnowszej wersji i nie przytłaczają JavaScript niepotrzebnymi metodami.

📖 You may not need jQuery

📖 Vanilla JavaScript for building powerful web applications

Modernizr: Jeśli musisz kierować określone funkcje, możesz użyć niestandardowego Modernizr, aby dodać klasy do tagu <html>.

🛠 Customize your Modernizr

Testowanie JavaScript

ESLint: Żadne błędy nie są oznaczane przez ESLint (w oparciu o zasady konfiguracji lub normy).

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ powrót do góry

Bezpieczeństwo

Zeskanuj i sprawdź swoją stronę internetową

securityheaders.io

Observatory by Mozilla

Najlepsze praktyki

HTTPS: HTTPS jest używany na każdej stronie i dla wszystkich treści zewnętrznych (wtyczek, obrazów...).

🛠 Let's Encrypt - Free SSL/TLS Certificates

🛠 Free SSL Server Test

📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): HTTP header jest ustawiony na 'Strict-Transport-Security'.

🛠 Check HSTS preload status and eligibility

📖 HTTP Strict Transport Security Cheat Sheet - OWASP

📖 Transport Layer Protection Cheat Sheet - OWASP

Cross Site Request Forgery (CSRF): Zapewniasz, że żądania wysyłane na twoją stronę są prawidłowe i pochodzą z twojej witryny / aplikacji, aby zapobiec atakom CSRF.

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

Cross Site Scripting (XSS): Twoja strona lub witryna jest wolna od możliwych problemów XSS.

📖 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP

📖 DOM based XSS Prevention Cheat Sheet - OWASP

Content Type Options: Zapobiega próbom mime-sniff przez Google Chrome i Internet Explorer typu zawartości odpowiedzi od zadeklarowanej przez serwer.

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO): Chroni odwiedzających przed atakami typu clickjacking.

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

Content Security Policy: Określa, w jaki sposób treść jest ładowana w twojej witrynie i skąd może być ładowana. Może być również stosowany do ochrony przed atakami typu clickjacking.

📖 Content Security Policy - An Introduction - Scott Helme

📖 CSP Cheat Sheet - Scott Helme

📖 CSP Cheat Sheet - OWASP

📖 Content Security Policy Reference

⬆ powrót do góry

Wydajność

Najlepsze praktyki

Cele do osiągnięcia: Twoje strony powinny osiągnąć następujące cele:
- First Meaningful Paint poniżej 1 sekundy
- Time To Interactive poniżej 5 sekund dla konfiguracji "średniej" (Android za 200 USD w wolnej sieci 3G z RTT 400 ms i prędkością transferu 400 kb / s) i poniżej 2 sekund na kolejne wizyty
- Krytyczny rozmiar pliku poniżej 170Kb gzipped

🛠 Website Page Analysis

🛠 WebPageTest

📖 Size Limit: Make the Web lighter

Zminifikowany HTML: Twój HTML jest zminifikowany.
Lazy loading: Obrazy, skrypty i CSS muszą być ładowane z opóźnieniem, aby skrócić czas odpowiedzi bieżącej strony (zobacz szczegóły w odpowiednich sekcjach).
Rozmiar cookie: Jeśli używasz plików cookie, upewnij się, że każdy plik cookie nie przekracza 4096 bajtów, a nazwa domeny nie zawiera więcej niż 20 plików cookie.

📖 Cookie specification: RFC 6265

📖 Cookies

🛠 Browser Cookie Limits

Komponenty stron trzecich: Elementy iframe lub komponenty innych firm polegające na zewnętrznym JS (takie jak przyciski udostępniania) są w miarę możliwości zastępowane przez komponenty statyczne, ograniczając w ten sposób połączenia z zewnętrznymi interfejsami API i utrzymując prywatność użytkownika.

🛠 Simple sharing buttons generator

Przygotowywanie nadchodzących żądań

📖 Explanation of the following techniques

DNS resolution: DNS usług stron trzecich, które mogą być potrzebne, są rozwiązywane z góry w czasie bezczynności przy użyciu dns-prefetch.

<link rel="dns-prefetch" href="https://example.com">

Preconnection: Wyszukiwanie DNS, uzgadnianie TCP i negocjacje TLS z usługami, które będą wkrótce potrzebne, są wykonywane z wyprzedzeniem w czasie bezczynności przy użyciu preconnect.

<link rel="preconnect" href="https://example.com">

Prefetching: Zasoby, które będą wkrótce potrzebne (np. leniwie załadowane obrazy) są wymagane z góry w czasie bezczynności przy użyciu prefetch.

<link rel="prefetch" href="image.png">

Preloading: Zasoby potrzebne na bieżącej stronie (np. skrypty umieszczone na końcu <body>) za pomocą preload.

<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

Test wydajności

Google PageSpeed: Wszystkie twoje strony zostały przetestowane (nie tylko strona główna) i uzyskały wynik co najmniej 90/100.

🛠 Google PageSpeed

🛠 Test your mobile speed with Google

🛠 WebPagetest - Website Performance and Optimization Test

🛠 GTmetrix - Website speed and performance optimization

🛠 Speedrank - Improve the performance of your website

⬆ powrót do góry

Dostępność

Uwagi: Możesz obejrzeć listę odtwarzania A11ycasts z Rob Dodson 📹

Najlepsze praktyki

Progresywne ulepszanie: Główne funkcje, takie jak główna nawigacja i wyszukiwanie, powinny działać bez włączonej obsługi JavaScript.

📖 Enable / Disable JavaScript in Chrome Developer Tools

Kontrast kolorów: Kontrast kolorów powinien co najmniej przejść WCAG AA (AAA dla urządzeń mobilnych).

🛠 Contrast ratio

Nagłówki

H1: Wszystkie strony mają H1, który nie jest tytułem strony internetowej.
Headings: Nagłówki należy stosować prawidłowo i we właściwej kolejności (od H1 do H6).

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

Semantyka

Używane są określone typy danych HTML5: Jest to szczególnie ważne w przypadku urządzeń mobilnych, które wyświetlają niestandardowe klawiatury i widżety dla różnych typów.

📖 Mobile Input Types

Formularz

Etykieta: Etykieta jest powiązana z każdym elementem formularza wejściowego. Jeśli etykieta nie może zostać wyświetlona, użyj zamiast tego aria-label.

📖 Using the aria-label attribute - MDN

Testy dostępności

Testowanie standardów dostępności: Użyj narzędzia WAVE, aby sprawdzić, czy strona spełnia standardy dostępności.

🛠 Wave testing

Nawigacja za pomocą klawiatury: Przetestuj swoją stronę internetową, używając tylko klawiatury w przewidywalnej kolejności. Wszystkie elementy interaktywne są osiągalne i użyteczne.
Screen-reader: Wszystkie strony zostały przetestowane w czytniku ekranu (VoiceOver, ChromeVox, NVDA lub Lynx).
Focus style: Jeśli fokus jest wyłączony, jest zastępowany widocznym stanem w CSS.

📹 Managing Focus - A11ycasts #22

⬆ powrót do góry

SEO

Google Analytics: Google Analytics jest zainstalowany i poprawnie skonfigurowany.

🛠 Google Analytics

🛠 GA Checker (and others)

Logika nagłówków: Tekst nagłówka pomaga zrozumieć treść na bieżącej stronie.

🛠 Tota11y, tab Headings

sitemap.xml: sitemap.xml istnieje i został przesłany do Google Search Console (wcześniej Google Webmaster Tools).

🛠 Sitemap generator

robots.txt: robots.txt nie blokuje stron internetowych.

📖 The robots.txt file

🛠 Test your robots.txt with Google Robots Testing Tool

Dane strukturalne: Strony używające danych strukturalnych są testowane i nie zawierają błędów. Dane strukturalne pomagają crawlerom indeksującym zrozumieć treść na bieżącej stronie.

📖 Introduction to Structured Data - Search - Google Developers

📖 RDFa - Linked Data in HTML

📖 JSON-LD

📖 Microdata

🛠 Przetestuj swoją stronę za pomocą Structured Data Testing Tool

🛠 Pełna lista słowników, które można wykorzystać jako dane ustrukturyzowane. Schema.org Full Hierarchy

Mapa strony HTML: Mapa strony HTML jest dostarczona i jest dostępna poprzez link w stopce witryny.

📖 Sitemap guidelines - Google Support

Pagination link tags: Zapewnij rel="prev" i rel="next" w celu wskazania stronicowanych treści.

🛠 Pagination (rel="prev/next") Testing Tool

📖 Pagination guidelines - Google Support

<!-- Przykład: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ powrót do góry

Tłumaczenia

Lista kontrolna frontend jest również dostępna w innych językach. Dziękujemy wszystkim tłumaczom za ich wspaniałą pracę!

🇯🇵 Japanese: miya0001/Front-End-Checklist
🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
🇰🇷 Korean: kesuskim/Front-End-Checklist
🇧🇷 Portuguese: jcezarms/Front-End-Checklist
🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
🇫🇷 French: ynizon/Front-End-Checklist
🇷🇺 Russian: ungear/Front-End-Checklist
🇹🇷 Turkish: eraycetinay/Front-End-Checklist
🇩🇪 German: xfuture603/Front-End-Checklist
🇵🇱 Polish: mbiesiad/Front-End-Checklist

Front-End Checklist Badge

Jeśli chcesz pokazać, że przestrzegasz zasad Listy kontrolnej frontend, umieść tę odznakę w pliku README!

➔

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

⬆ powrót do góry

Współtworzenie

Otwórz issue lub PR, aby zasugerować zmiany lub uzupełnienia.

Przewodnik

Repo Front-End Checklist składa się z dwóch gałęzi:

1. `master`

Ta gałąź składa się z pliku README.md który jest automatycznie odzwierciedlany na stronie Front-End Checklist.

2. `develop`

Ta gałąź zostanie wykorzystana do wprowadzenia istotnych zmian w strukturze, w razie potrzeby zawartości. Lepiej jest użyć gałęzi głównej, aby naprawić małe błędy lub dodać nowy element.

Wsparcie

Jeśli masz jakieś pytania lub sugestie, nie wahaj się skorzystać z Gittera lub Twittera:

Autor

David Dias

Współtwórcy

Ten projekt istnieje dzięki wszystkim ludziom, którzy wnoszą swój wkład. [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>

Backers

Dziękuję wszystkim naszym backers! 🙏 [Become a backer]

Sponsorzy

Wesprzyj ten projekt, zostając sponsorem. Twoje logo pojawi się tutaj wraz z linkiem do twojej witryny. [Zostań sponsorem]

Licencja

⬆ powrót do góry

Awesome

Spis treści

Jak korzystać?

Head

Meta tag

Tagi HTML

Social meta

HTML

Najlepsze praktyki

Testowanie HTML

Webfonts

CSS

Wydajność

Testowanie CSS

Obrazy

Najlepsze praktyki

JavaScript

Najlepsze praktyki

Testowanie JavaScript

Bezpieczeństwo

Zeskanuj i sprawdź swoją stronę internetową

Najlepsze praktyki

Wydajność

Najlepsze praktyki

Przygotowywanie nadchodzących żądań

Test wydajności

Dostępność

Najlepsze praktyki

Nagłówki

Semantyka

Formularz

Testy dostępności

SEO

Tłumaczenia

Front-End Checklist Badge

Współtworzenie

Przewodnik

1. master

2. develop

Wsparcie

Autor

Współtwórcy

Backers

Sponsorzy

Licencja

1. `master`

2. `develop`