Front-End-Checklist icon indicating copy to clipboard operation
Front-End-Checklist copied to clipboard

Published 20 hours ago • verified publisher icon mbiesiad
→

Metadata

🗂 The perfect Front-End Checklist for modern websites and meticulous developers


Front-End Checklist

  Checklista Frontend  

Lista kontrolna frontend to wyczerpująca lista wszystkich elementów, które potrzebujesz mieć / musisz przetestować przed uruchomieniem witryny/strony HTML w produkcji.

      PRs Welcome           Contributors         Front‑End_Checklist followed         CC0  

  Jak korzystać • Współtworzenie • Strona • Product Hunt

Inne Checklisty:
  🎮 Front-End Performance Checklist • 💎 Front-End Design Checklist

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

Spis treści

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Obrazy
  6. JavaScript
  7. Bezpieczeństwo
  8. Wydajność
  9. Dostępność
  10. SEO
  11. 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:

  • Niski oznacza, że element jest zalecany, ale można go pominąć w niektórych szczególnych sytuacjach.
  • Średni 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.
  • Wysoki 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: High Doctype to HTML5 i znajduje się na górze wszystkich stron HTML.
<!doctype html> <!-- HTML5 -->

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

  • [ ] Charset: High Charset (UTF-8) jest zadeklarowany poprawnie.
<!-- Ustaw kodowanie znaków dla dokumentu -->
<meta charset="utf-8">
  • [ ] Viewport: High Viewport jest zadeklarowany poprawnie.
<!-- Viewport do responsywnego projektowania stron internetowych -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • [ ] Title: High 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>
  • [ ] Opis: High 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">
  • [ ] Favicons: Medium 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">
  • [ ] Apple Web App Meta: Low 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">
  • [ ] Windows Tiles: Low 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>
  • [ ] Canonical: Medium 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">

Tagi HTML

  • [ ] Atrybut języka: High Atrybut lang twojej witryny jest określony i związany z językiem bieżącej strony.
<html lang="en">
  • [ ] Atrybut direction: Medium Kierunek odczytu jest określony na znaczniku HTML (może być użyty na innym znaczniku HTML).
<html dir="rtl">
  • [ ] Alternatywny język: Low 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: Low Tag języka twojej witryny dla międzynarodowych stron docelowych.
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
  • [ ] Komentarze warunkowe: Low W razie potrzeby komentarze warunkowe są dostępne dla IE.

  • [ ] Kanał RSS: Low Jeśli twój projekt jest blogiem lub zawiera artykuły, podano link RSS.

  • [ ] CSS Critical: Medium 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).

  • [ ] CSS order: High 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: Low 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">
  • [ ] 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">

⬆ powrót do góry

HTML

Najlepsze praktyki

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

  • [ ] Strony błędów: High 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: Medium 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".

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

Testowanie HTML

  • [ ] Zgodny z W3C: High Wszystkie strony należy przetestować za pomocą walidatora W3C, aby zidentyfikować możliwe problemy w kodzie HTML.
  • [ ] HTML Lint: High Korzystam z narzędzi, które pomagają mi analizować wszelkie problemy, które mogą wystąpić w kodzie HTML.
  • [ ] Link checker: High Na mojej stronie nie ma niedziałających linków, sprawdź, czy nie wystąpił błąd 404.
  • [ ] Test Adblockerów: Medium 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).

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

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

  • [ ] Rozmiar Webfont: High Rozmiary webfont nie przekraczają 2 MB (wszystkie warianty w zestawie).

  • [ ] Webfont loader: Low Kontroluj zachowanie ładowania za pomocą modułu ładującego webfont

⬆ 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: High Strona korzysta z responsywnego projektowania stron internetowych.
  • [ ] CSS Print: Medium Arkusz stylów wydruku jest dostarczony i jest poprawny na każdej stronie.
  • [ ] Preprocessors: Low Twój projekt korzysta z preprocesora CSS (np. Sass, Less, Stylus).
  • [ ] Unique ID: High Jeśli używane są identyfikatory, są one unikalne dla strony.
  • [ ] Reset CSS: High 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.)
  • [ ] JS prefix: Low 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: High 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: High Prefiksy dostawców CSS są używane i są generowane zgodnie ze zgodnością obsługi przeglądarki.

Wydajność

  • [ ] Konkatenacja: High Pliki CSS są łączone w jednym pliku (Nie dla HTTP/2).
  • [ ] Minifikacja: High Wszystkie pliki CSS są minifikowane.
  • [ ] Non-blocking: Medium Pliki CSS muszą być nieblokujące, aby DOM nie zajmował dużo czasu podczas ładowania.
  • [ ] Nieużywany CSS: Low Usuń nieużywany CSS.

Testowanie CSS

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

  • [ ] Responsive web design: High 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: Medium CSS został przetestowany i odpowiednie błędy zostały poprawione.

  • [ ] Przeglądarki stacjonarne: High Wszystkie strony zostały przetestowane we wszystkich obecnych przeglądarkach na komputery (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
  • [ ] Przeglądarki mobilne: High Wszystkie strony zostały przetestowane we wszystkich obecnych przeglądarkach mobilnych (Native browser, Chrome, Safari...).
  • [ ] OS: High Wszystkie strony zostały przetestowane na wszystkich obecnych systemach operacyjnych (Windows, Android, iOS, Mac...).
  • [ ] Dokładność projektu: Low 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: High Wszystkie strony muszą zostać przetestowane pod kątem języków LTR i RTL, jeśli wymagają obsługi.

⬆ 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: High 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: Medium Używasz picture/srcset, aby zapewnić najbardziej odpowiedni obraz dla bieżącego viewportu użytkownika.
  • [ ] Retina: Low Zapewniasz obrazy układu 2x lub 3x, obsługuje wyświetlanie retina.
  • [ ] Sprite: Medium Małe obrazy znajdują się w pliku ikonki (w przypadku ikon mogą być w obrazku ikonki SVG).
  • [ ] Szerokość i wysokość: High 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: High Wszystkie <img> mają alternatywny tekst, który opisuje obraz wizualnie.
  • [ ] Lazy loading: Medium Obrazy są ładowane lazyloaded (zawsze dostępna jest rezerwowa kopia zapasowa).

⬆ powrót do góry

JavaScript

Najlepsze praktyki

  • [ ] JavaScript Inline: High Nie masz kodu inline JavaScript (zmieszanego z kodem HTML).
  • [ ] Konkatenacja: High Pliki JavaScript są łączone.
  • [ ] Minifikacja: High Pliki JavaScript są minifikowane (możesz dodać sufiks .min).
  • [ ] Bezpieczeństwo JavaScript: High
  • [ ] noscript tag: Medium 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: Medium Pliki JavaScript są ładowane asynchronicznie za pomocą async lub odroczone za pomocą atrybutu defer.
  • [ ] Zoptymalizowane i zaktualizowane biblioteki JS: Medium 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.
  • [ ] Modernizr: Low Jeśli musisz kierować określone funkcje, możesz użyć niestandardowego Modernizr, aby dodać klasy do tagu <html>.

Testowanie JavaScript

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

⬆ powrót do góry

Bezpieczeństwo

Zeskanuj i sprawdź swoją stronę internetową

Najlepsze praktyki

  • [ ] HTTPS: High HTTPS jest używany na każdej stronie i dla wszystkich treści zewnętrznych (wtyczek, obrazów...).
  • [ ] HTTP Strict Transport Security (HSTS): Medium HTTP header jest ustawiony na 'Strict-Transport-Security'.
  • [ ] Cross Site Request Forgery (CSRF): High Zapewniasz, że żądania wysyłane na twoją stronę są prawidłowe i pochodzą z twojej witryny / aplikacji, aby zapobiec atakom CSRF.
  • [ ] Cross Site Scripting (XSS): High Twoja strona lub witryna jest wolna od możliwych problemów XSS.
  • [ ] Content Type Options: Medium Zapobiega próbom mime-sniff przez Google Chrome i Internet Explorer typu zawartości odpowiedzi od zadeklarowanej przez serwer.
  • [ ] X-Frame-Options (XFO): Medium Chroni odwiedzających przed atakami typu clickjacking.
  • [ ] Content Security Policy: Medium 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.

⬆ powrót do góry

Wydajność

Najlepsze praktyki

  • [ ] Cele do osiągnięcia: Medium 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

  • [ ] Zminifikowany HTML: Medium Twój HTML jest zminifikowany.

  • [ ] Lazy loading: Medium 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: Medium 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.

  • [ ] Komponenty stron trzecich: Medium 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.

Przygotowywanie nadchodzących żądań

  • [ ] DNS resolution: Low 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: Low 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: Low 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: Low Zasoby potrzebne na bieżącej stronie (np. skrypty umieszczone na końcu <body>) za pomocą preload.
<link rel="preload" href="app.js">

Test wydajności

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

⬆ powrót do góry

Dostępność

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

Najlepsze praktyki

  • [ ] Progresywne ulepszanie: Medium Główne funkcje, takie jak główna nawigacja i wyszukiwanie, powinny działać bez włączonej obsługi JavaScript.
  • [ ] Kontrast kolorów: Medium Kontrast kolorów powinien co najmniej przejść WCAG AA (AAA dla urządzeń mobilnych).

Nagłówki

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

Semantyka

  • [ ] Używane są określone typy danych HTML5: Medium 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.

Formularz

  • [ ] Etykieta: High 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.

Testy dostępności

  • [ ] Testowanie standardów dostępności: High Użyj narzędzia WAVE, aby sprawdzić, czy strona spełnia standardy dostępności.
  • [ ] Nawigacja za pomocą klawiatury: High Przetestuj swoją stronę internetową, używając tylko klawiatury w przewidywalnej kolejności. Wszystkie elementy interaktywne są osiągalne i użyteczne.
  • [ ] Screen-reader: Medium Wszystkie strony zostały przetestowane w czytniku ekranu (VoiceOver, ChromeVox, NVDA lub Lynx).
  • [ ] Focus style: High Jeśli fokus jest wyłączony, jest zastępowany widocznym stanem w CSS.

⬆ powrót do góry

SEO

  • [ ] Google Analytics: High Google Analytics jest zainstalowany i poprawnie skonfigurowany.
  • [ ] Logika nagłówków: Medium Tekst nagłówka pomaga zrozumieć treść na bieżącej stronie.
  • [ ] sitemap.xml: High sitemap.xml istnieje i został przesłany do Google Search Console (wcześniej Google Webmaster Tools).
  • [ ] robots.txt: High robots.txt nie blokuje stron internetowych.
  • [ ] Dane strukturalne: High 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.
  • [ ] Mapa strony HTML: Medium Mapa strony HTML jest dostarczona i jest dostępna poprzez link w stopce witryny.
  • [ ] Pagination link tags: Medium Zapewnij rel="prev" i rel="next" w celu wskazania stronicowanych treści.
<!-- 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ę!

Front-End Checklist Badge

Jeśli chcesz pokazać, że przestrzegasz zasad Listy kontrolnej frontend, umieść tę odznakę w pliku 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/)

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

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

CC0

⬆ powrót do góry

← Metadata

17
Stars
2
Forks
Watchers

Owner

verified publisher icon mbiesiad

Metadata

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Back