Lista kontrolna frontend to wyczerpująca lista wszystkich elementów, które potrzebujesz mieć / musisz przetestować przed uruchomieniem witryny/strony HTML w produkcji.
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.
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.
Uwagi: Możesz znaleźć listę wszystkiego co powinno znaleźć się w
<head>dokumentu HTML.
- Doctype: 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: 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>- 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">- 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">- 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">- 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>- 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">- Atrybut języka: Atrybut
langtwojej 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">- 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" />- Komentarze warunkowe: W razie potrzeby komentarze warunkowe są dostępne dla IE.
-
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).
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:widthorazog:image:heightokreś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
- Elementy semantyczne HTML5: Elementy semantyczne HTML5 są używane odpowiednio (header, section, footer, main...).
-
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ć atrybutrel="noopener"aby zapobiec przechwytywaniu kart. Jeśli potrzebujesz obsługi starszych wersji Firefoxa, użyjrel="noopener noreferrer".
- Wyczyść komentarze: Niepotrzebny kod należy usunąć przed wysłaniem strony do produkcji.
- Zgodny z W3C: Wszystkie strony należy przetestować za pomocą walidatora W3C, aby zidentyfikować możliwe problemy w kodzie HTML.
- HTML Lint: Korzystam z narzędzi, które pomagają mi analizować wszelkie problemy, które mogą wystąpić w kodzie HTML.
- 🛠 webhint
- Link checker: Na mojej stronie nie ma niedziałających linków, sprawdź, czy nie wystąpił błąd 404.
- 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).
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: WOFF, WOFF2 oraz TTF są obsługiwane przez wszystkie nowoczesne przeglądarki.
-
Rozmiar Webfont:
Rozmiary webfont nie przekraczają 2 MB (wszystkie warianty w zestawie). -
Webfont loader:
Kontroluj zachowanie ładowania za pomocą modułu ładującego webfont
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.
- 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.
- Nieużywany CSS: Usuń nieużywany CSS.
- Stylelint: Wszystkie pliki CSS lub SCSS są bez żadnych błędów.
-
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.
- 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.
- Kierunek czytania: Wszystkie strony muszą zostać przetestowane pod kątem języków LTR i RTL, jeśli wymagają obsługi.
Uwagi: Aby w pełni zrozumieć optymalizację obrazu, sprawdź bezpłatny ebook Essential Image Optimization od Addy Osmani.
- 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.
- 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
widthiheightna<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.
- Lazy loading: Obrazy są ładowane lazyloaded (zawsze dostępna jest rezerwowa kopia zapasowa).
- 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).
- Bezpieczeństwo JavaScript:
-
noscripttag: 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ą
asynclub odroczone za pomocą atrybutudefer.
- 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.
- Modernizr: Jeśli musisz kierować określone funkcje, możesz użyć niestandardowego Modernizr, aby dodać klasy do tagu
<html>.
- ESLint: Żadne błędy nie są oznaczane przez ESLint (w oparciu o zasady konfiguracji lub normy).
- HTTPS: HTTPS jest używany na każdej stronie i dla wszystkich treści zewnętrznych (wtyczek, obrazów...).
- HTTP Strict Transport Security (HSTS): HTTP header jest ustawiony na 'Strict-Transport-Security'.
- 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 Scripting (XSS): Twoja strona lub witryna jest wolna od możliwych problemów XSS.
- Content Type Options: Zapobiega próbom mime-sniff przez Google Chrome i Internet Explorer typu zawartości odpowiedzi od zadeklarowanej przez serwer.
- X-Frame-Options (XFO): Chroni odwiedzających przed atakami typu clickjacking.
- 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.
- 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
-
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.
- 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.
- 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">- Google PageSpeed: Wszystkie twoje strony zostały przetestowane (nie tylko strona główna) i uzyskały wynik co najmniej 90/100.
Uwagi: Możesz obejrzeć listę odtwarzania A11ycasts z Rob Dodson 📹
- Progresywne ulepszanie: Główne funkcje, takie jak główna nawigacja i wyszukiwanie, powinny działać bez włączonej obsługi JavaScript.
- Kontrast kolorów: Kontrast kolorów powinien co najmniej przejść WCAG AA (AAA dla urządzeń mobilnych).
- 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).
- 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.
- 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.
- Testowanie standardów dostępności: Użyj narzędzia WAVE, aby sprawdzić, czy strona spełnia standardy dostępności.
- 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.
- Google Analytics: Google Analytics jest zainstalowany i poprawnie skonfigurowany.
- Logika nagłówków: Tekst nagłówka pomaga zrozumieć treść na bieżącej stronie.
- sitemap.xml: sitemap.xml istnieje i został przesłany do Google Search Console (wcześniej Google Webmaster Tools).
- 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.
- Pagination link tags: Zapewnij
rel="prev"irel="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">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
Jeśli chcesz pokazać, że przestrzegasz zasad Listy kontrolnej frontend, umieść tę odznakę w pliku README!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Otwórz issue lub PR, aby zasugerować zmiany lub uzupełnienia.
Repo Front-End Checklist składa się z dwóch gałęzi:
Ta gałąź składa się z pliku README.md który jest automatycznie odzwierciedlany na stronie Front-End Checklist.
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.
Jeśli masz jakieś pytania lub sugestie, nie wahaj się skorzystać z Gittera lub Twittera:
Ten projekt istnieje dzięki wszystkim ludziom, którzy wnoszą swój wkład. [Contribute].
Dziękuję wszystkim naszym backers! 🙏 [Become a backer]
Wesprzyj ten projekt, zostając sponsorem. Twoje logo pojawi się tutaj wraz z linkiem do twojej witryny. [Zostań sponsorem]
