Front-End Checklist, HTML sayfanızı yayına almadan önce test etmeniz gereken tüm öğelerin kapsamlı bir listesidir.
Liste, diğer açık kaynaklı listelerden gelen eklemelerle birlikte Front End geliştiricilerinin yıllara dayanan deneyimlerinin bir ürünüdür.
Çoğu proje için Front-End Checklist içerisindeki öğelerin tamamının kullanılması gerekir. Ancak bazı öğelerin kullanımı ihmal edilebilir. (Örneğin bir yönetim paneli uygulamasında, RSS beslemesine ihtiyacınız olmayabilir). Öğelerin önemi konusunda 3 seviye belirledik:
etiketi önerilen ancak bazı durumlarda es geçebileceğiniz öğeleri ifade eder.
etiketi kesinlikle önerilen ve sadece nadir durumlarda görmezden gelebileceğiniz öğeleri ifade eder. Bazı elementlerin ihmal edilmesi performans ve SEO konusunda kötü sonuçlara neden olabilir.
etiketi öğe kullanımının zorunlu olduğunu ve hiçbir şartta görmezden gelinemeyeceğini ifade eder. Aksi halde sayfanızda fonksiyonel kayıplar yaşayabilir, ulaşılabilirlik ve SEO konusunda ciddi sorunlarla karşılaşabilirsiniz. Test önceliği daima bu etikete sahip öğelerdedir.
Bazı kaynaklar içeriğin türünü anlayabilmeniz için çeşitli ifadeler içerir.
- 📖: dokümantasyon veya makale
- 🛠: çevrimiçi araç / test aracı
- 📹: medya veya video içeriği
Not: HTML dökümanının
<head>bölümünde bulunması gereken elementlerin tam listesini türkçe açıklamaları ile burada bulabilirsiniz.
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>Sonraki 3 meta tag (Charset, X-UA Compatible ve Viewport) head bölümünün en başında yer almalıdır.
- Charset:
<!-- Dökuman için karakter kodlaması -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- Internet Explorer'a en son oluşturma motorunu kullanmasını söyleyin -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
<!-- Responsive bir tasarım için viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
<!-- Döküman Başlığı -->
<title>55 karakterden daha kısa bir başlık</title>- Description:
<!-- Meta Açıklaması -->
<meta name="description" content="Description of the page less than 150 characters">- Favicons:
favicon.icodosyasına sahipseniz, dosyayı sitenizin ana klasörüne koyun. Normal şartlarda dosyayı işaret eden bir element kullanmanıza gerek yok ancak aşağıdaki örnekte olduğu gibi döküman içerisinde belirtmek iyi bir pratik olabilir. Günümüzde.icoformatında (boyut: 32x32px). PNG biçiminin kullanılması önerilmektedir.
<!-- Standart favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Önerilen favicon biçimi -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">- Apple Touch Icon:
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">- Windows Tiles:
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />Browserconfig.xml dosyası için gerekli minimum xml betiği aşağıdaki gibidir:
<?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:
rel="canonical"kullanın.
<!-- Yinelenen içerik sorunlarını önlemeye yardımcı olur -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">- Language attribute:
langniteliğini kullanmalı ve geçerli sayfanın dili ile ilişkilendirmelisiniz.
<html lang="en">- Direction attribute:
<html dir="rtl">- Alternate language:
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Conditional comments:
-
RSS feed:
-
Inline critical CSS:
<style></ style>arasında tek bir satırda (sıkıştırılmış) verilmelidir.
- 🛠 Critical, Addy Osmani on GitHub bu işlemi otomatik hale getirir.
- CSS order:
<head>bölümünde tanımlanmalıdır. (JS dosyalarının asenkron olarak sayfanın en üstünde yüklenebildiği durumlar dışında).
Facebook OG ve Twitter Cards tüm web siteleri için önerilir. Eğer belirli bir sosyal siteyi hedefliyor ve içeriklerinizi tanıtmak istiyorsanız diğer etiketlerde kullanılabilir.
- Facebook Open Graph:
Not:
og:image:widthveog:image:heighttanımlarını kullanarak resim boyutlarını belirtmeniz; örümceğin asenkron olarak resimleri yükleyip işleme sokmadan, direk kullanabilmesine olanak sağlayacaktır.
<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">
<!-- Sonraki etiketler opsiyoneldir ancak kullanılması önerilir -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 Web Yöneticileri için Paylaşım Kılavuzu
- 📖 En İyi Teknikler - Paylaşım
- 🛠 Sayfanızı Facebook OG test aracı ile test edin.
- 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">
- 📖 Twitter card'larına giriş — Twitter Developers
- 🛠 Sayfanızı Twitter card doğrulayıcı ile test edin.
- HTML5 Semantic Elements:
-
Error pages:
-
Noopener:
target="_blank"ile harici bağlantılar kullanmanız durumunda, tab nabbing'i önlemek için bağlantınızrel="noopener"niteliğine sahip olmalıdır. Eğer Firefox'un eski versiyonlarına destek vermek istersenizrel="noopener noreferrer"şeklinde kullanabilirsiniz.
- Clean up comments:
- W3C compliant:
- HTML Lint:
- Link checker:
- Adblockers test:
Not: Webfont kullanımı stillendirilmemiş / görünmez yazılara neden olabilir - may cause Flash Of Unstyled Text/Flash Of Invisible Text - Fallback fontlar kullanmayı ya da webfont yükleyicilerini kullanarak bunu önleyin.
- Webfont format:
-
Webfont size:
-
Webfont loader:
Not: Çoğu Front-End geliştiricinin takip ettiği CSS Kılavuzları ve Sass Kılavuzlarını inceleyin. Eğer CSS özellikleri konusunda çekinceleriniz var ise, CSS Kaynakçasını ziyaret edin. Tutarlılık için bu kısa Kod Kılavuzu da kullanılabilir.
- Responsive Web Design:
- CSS Print:
- Preprocessors:
- Unique ID:
- Reset CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix:
<div id="js-slider" class="my-slider">
<!-- Ya da -->
<div id="id-used-by-cms" class="js-slider my-slider">- Embedded or inline CSS:
<style>etiketleri arasında ya da satır içi CSS kullanmaktan kaçının: sadece geçerli bir sebebiniz varsa kullanın (örn. slider için arkaplan resmi, kritik CSS). - Vendor prefixes:
- Concatenation:
- Minification:
- Non-blocking:
- Unused CSS:
- Stylelint:
-
Responsive web design:
-
CSS Validator:
- Desktop Browsers:
- Mobile Browsers:
- OS:
- Pixel perfect:
- Reading direction:
Not: Resim optimizasyonunu hakkında detaylı bilgi için ücretsiz ekitap'dan faydalanın. Essential Image Optimization from Addy Osmani.
- Optimization:
- 🛠 Imagemin
- 🛠 ImageOptim ile resimlerinizi ücretsiz şekilde optimize edebilirsiniz.
- 🛠 Kraken.io da png ve jpg optimizasyonu için başarılı çözümler bulabilirsiniz. 1mb'a kadar olan dosyalar ücretsiz plana dahil.
- Picture/Srcset:
- Retina:
- Sprite:
- Width and Height:
<img>elementlerininwidthveheightdeğerleri girilmelidir (CSS üzerinden boyutlandırmalarda kullanılmayabilir). - Alternative text:
<img>elementleri görseli açıklayan bir yazı barındırmalıdır.
- Lazy loading:
- JavaScript Inline:
- Concatenation:
- Minification:
.minsoneki kullanılabilir).
- JavaScript security:
- Non-blocking:
async) ya da defer(defer) ile yüklenmeli.
- Modernizr:
<html>etiketinize sınıf eklemek için özel bir Modernizr kullanabilirsiniz.
- ESLint:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
- Cross Site Scripting (XSS):
- Content Type Options
- X-Frame-Options (XFO)
- Content Security Policy
- Page weight:
-
Minified HTML:
-
Lazy loading:
-
Cookie size:
- Third party components:
- DNS resolution:
dns-prefetchile çözümlenir.
<link rel="dns-prefetch" href="https://example.com">- Preconnection:
preconnectkullanıldı.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetchile getirildi.
<link rel="prefetch" href="image.png">- Preloading:
<body>sonuna yerleştirilen scriptler) 'preload' ile işlendi.
<link rel="preload" href="app.js">- Google PageSpeed:
Not: Oynatma Listesi için: A11ycasts with Rob Dodson 📹
- Progressive enhancement:
- Color contrast:
- H1:
- Headings:
- Role banner:
<header>,role="banner"içeriyor. - Role navigation:
<nav>,role="navigation"içeriyor. - Role main:
<main>,role="main"içeriyor.
- Specific HTML5 input types are used:
- Label:
aria-labelkullanılmalı.
- Accessibility standards testing:
- Keyboard navigation:
- Screen-reader:
- Focus style:
- Google Analytics:
- Headings logic:
- sitemap.xml:
- robots.txt:
- 🛠 Google Robots Test Aracı ile robots.txt'i test edin.
- Structured Data:
- 📖 Yapılandırılmış Verilere Giriş - Search - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Yapısal Veri Test Aracı ile sayfanızı test edin.
- 🛠 Yapısal veriler olarak kullanılabilecek tüm sözlüklerin listesi. Schema.org Tam Hiyerarşi
- Sitemap HTML:
- Pagination link tags:
rel="prev"verel="next"içermeli.
<!-- Örnek: Sayfalama listesinde bulunan 2.sayfanın linkleri -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">Front-End Checklist diğer dillerde de mevcuttur. Tüm çevirmenlerlere teşekkürler!
- 🇯🇵 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
Front-End Checklist Listesinin kurallarını izlediğinizi göstermek isterseniz bu rozeti Benioku dosyasında kullanabilirsiniz.
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Değişiklikler veya eklemeler önermek için issue açabilir veya pull sorgusu gönderebilirsiniz.
Front-End Checklist iki alt daldan oluşur:
Bu dal otomatik olarak Front-End Checklist 'e yansıtılan' README.md 'dosyasından oluşur.
Bu dal, içeriğe gerektiği takdirde önemli değişiklikler yapmak için kullanılacaktır. Küçük hataları düzeltmek veya yeni bir madde eklemek için ana dalın kullanılması tercih edilir.
Herhangi bir sorunuz veya öneriniz varsa, Gitter veya Twitter'ı kullanmaktan çekinmeyin:
Projeyi bu noktaya getiren tüm katılımcılara teşekkürler.[Katkıda Bulun].
Destekleyen herkese teşekkürler! 🙏 [Destekle]
Destek olmak için projeye sponsor ol. Sitenizin linkini içeren logonuz burada görüntülenecek. [Sponsor Ol]
