Skip to content

eraycetinay/Front-End-Checklist

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Front-End Checklist Logo

Front-End Checklist, HTML sayfanızı yayına almadan önce test etmeniz gereken tüm öğelerin kapsamlı bir listesidir.

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

Liste, diğer açık kaynaklı listelerden gelen eklemelerle birlikte Front End geliştiricilerinin yıllara dayanan deneyimlerinin bir ürünüdür.

Sponsor

İçindekiler

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Görseller
  6. JavaScript
  7. Güvenlik
  8. Performans
  9. Ulaşılabilirlik
  10. SEO

Nasıl kullanılı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:

  • Düşük etiketi önerilen ancak bazı durumlarda es geçebileceğiniz öğeleri ifade eder.
  • Orta 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.
  • Yüksek 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

Head

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.

Meta etiketler

  • Doctype: High Doctype, HTML5'dir ve tüm HTML sayfalarınızın en üstünde yer almalıdır.
<!-- 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: High Karakter seti (UTF-8) doğru şekilde tanımlanmalıdır.
<!-- Dökuman için karakter kodlaması -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium X-UA-Compatible meta tagı yer almalıdır.
<!-- Internet Explorer'a en son oluşturma motorunu kullanmasını söyleyin -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • Viewport: High Viewport doğru şekilde tanımlanmalıdır.
<!-- Responsive bir tasarım için viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: High Başlık tüm sayfalarda kullanılmalıdır. (SEO: Google, başlıkta kullanılan karakterlerin piksel genişliğini hesaplar; 472 ve 482 piksel arasında kesilecektir. Buna göre ortalama karakter limiti 55 civarındadır).
<!-- Döküman Başlığı -->
<title>55 karakterden daha kısa bir başlık</title>
  • Description: High Eşsiz bir meta açıklaması bulunmalı ve açıklama uzunluğu 150 karakteri aşmamalıdır.
<!-- Meta Açıklaması -->
<meta name="description" content="Description of the page less than 150 characters">
  • Favicons: Medium Tüm faviconlar ayrı ayrı oluşturulmalı ve doğru şekilde ayarlanmalıdır. Eğer sadece favicon.ico dosyası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 .ico formatı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: Low Apple touch favicon (apple-mobile-web-app-capable) kullanılmalıdır (Desteklemek isteyebileceğiniz tüm boyutları karşılayacak, en az 200x200px boyutlarında bir Apple Icon oluşturun).
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
  • Windows Tiles:Low Windows tiles kullanılmalı ve doğru şekilde belirtilmelidir.
<!-- 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: Medium Yinelenen içeriği önlemek için 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">

HTML etiketleri

  • Language attribute: High Web sitenizde lang niteliğini kullanmalı ve geçerli sayfanın dili ile ilişkilendirmelisiniz.
<html lang="en">
  • Direction attribute: Medium Sayfa yazıların yönü html etiketinde belirtilmelidir. (Farklı bir html etiketi kullanılabilir).
<html dir="rtl">
  • Alternate language: Low Aktif olan sayfanın dili belirtilmelidir.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Conditional comments: Low Gerekirse IE için koşullu ifadeler kullanılmalıdır.
  • RSS feed: Low Eğer projeniz bir blog ise ya da makaleler içeriyor ise; bir RSS link sağlanmalıdır.

  • Inline critical CSS: Medium Sayfanın yüklenmesi sırasında (Tüm içeriklerden önce) mutlaka görünmesi gereken CSS betikleri kritik CSS olarak adlandırılır. Genel CSS içeriklerinden önce <style></ style> arasında tek bir satırda (sıkıştırılmış) verilmelidir.

  • CSS order: High Tüm CSS dosyaları JavaScript dosyalarından önce <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).

Sosyal meta etiketleri

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: Low Tüm Facebook Open Graph (OG) verileri test edilmeli ve hiçbiri eksik ya da hatalı bilgi içermemelidir. Resimler en az 600 x 315 piksel boyutunda olmalıdır. 1200 x 630 piksel önerilir.

Not: og:image:width ve og:image:height tanı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">
  • 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">

⬆ başa dön


HTML

En iyi teknikler

  • HTML5 Semantic Elements: High HTML5 Semantik Elementler doğru şekilde kullanılmalı (header, section, footer, main...).
  • Error pages: High 404 Hata sayfası ve 5xx sayfası bulunmalıdır. 5xx hata sayfalarındaki CSSlerin sayfa içine entegre edilmesi gerektiği unutulmamalıdır. (Sunucuya herhangi bir çağrı yapılmamalıdır).

  • Noopener: Medium target="_blank" ile harici bağlantılar kullanmanız durumunda, tab nabbing'i önlemek için bağlantınız rel="noopener" niteliğine sahip olmalıdır. Eğer Firefox'un eski versiyonlarına destek vermek isterseniz rel="noopener noreferrer" şeklinde kullanabilirsiniz.

  • Clean up comments: Low Yayına çıkmadan önce gereksiz kodlar sayfadan temizlenmelidir.

HTML testleri

  • W3C compliant: High HTML kodundaki olası sorunları tanımlamak için tüm sayfaların W3C doğrulayıcıyla test edilmesi gerekir.
  • HTML Lint: High HTML içerisindeki tüm sorunları analiz etmek için aşağıdaki araçları kullanabilirsiniz.
  • Link checker: High Sayfanızda kırık link bulunmamalıdır. Herhangi bir 404 hatası alınmadığını doğrulayın.
  • Adblockers test: Medium Web siteniz reklam engelleme araçları aktifken doğru şekilde görüntülenebilmelidir (Bir mesaj ile ziyaretçileri eklentiyi pasif hale getirmeleri yönünde uyarabilirsiniz).

⬆ başa dön


Webfonts

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: High WOFF, WOFF2 ve TTF tüm modern tarayıcılar tarafından desteklenir.
  • Webfont size: High Webfont boyutları 2 MB'ı aşmamalıdır. (Tüm türevleri ile birlikte).

  • Webfont loader: Low Webfont yükleyiciler ile yükleme akışını kontrol edin.

⬆ başa dön


CSS

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: High Web sitesinin tasarımı responsive olmalı.
  • CSS Print: Medium Baskı(yazdırma) için tüm sayfalarda geçerli olan bir CSS bulunmalı.
  • Preprocessors: Low Sayfanız bir CSS önişlemcisi kullanmalı (Sass önerilir).
  • Unique ID: High Eğer ID kullanılmışsa tümü eşsiz olmalı.
  • Reset CSS: High Güncel bir CSS reset (reset, normalize ya da reboot) kullanılmalı. (Eğer Bootstrap ya da Foundation gibi bir CSS Framework kullanıyorsanız Normalize hali hazırda buna dahil edilmiştir)
  • JS prefix: Low Javascript dosyalarındaki tüm sınıflar (ya da IDler) js- ile başlamalı ve CSS dosyaları içerisinde kullanılmamalıdır.
<div id="js-slider" class="my-slider">
<!-- Ya da -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • Embedded or inline CSS: High <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: High Vermek istediğiniz tarayıcı desteğine göre CSS tarayıcı önekleri kullanılmalıdır.

Performans

  • Concatenation: High CSS dosyaları tek bir dosyada birleştirilmelidir (HTTP/2 hariç).
  • Minification: High TÜm CSS dosyaları sıkıştırılmalıdır.
  • Non-blocking: Medium CSS dosyaları DOM'un yüklenmesini engellememelidir.
  • Unused CSS: Low Kullanılmayan CSS'ler silinmelidir.

CSS testleri

  • Stylelint: High Hiçbir CSS ya da SCSS dosyası hata içermemelidir.
  • Responsive web design: High Tüm sayfalar 320px, 768px, 1024px (Analitik verilerinize göre daha farklı olabilir) kırılma noktaları için test edilmelidir.

  • CSS Validator: Medium CSS test edilmeli ve bilinen hatalar düzeltilmeli.

  • Desktop Browsers: High Tüm sayfalar bilinen tüm masaüstü tarayıcılarda test edilmeli (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
  • Mobile Browsers: High Tüm sayfalar bilinen tüm mobil tarayıcılarda test edilmeli (Native browser, Chrome, Safari...).
  • OS: High Tüm sayfalar bilinen tüm işletim sistemlerinde test edilmeli (Windows, Android, iOS, Mac...).
  • Pixel perfect: High Sayfanız hazırlanan tasarımla %100 aynı olmasada buna oldukça yakın olmalı.

Pixel Perfect - Chrome Extension

  • Reading direction: High Eğer desteklenecekse tüm sayfalar LTR ve RTL diller için test edilmeli.

⬆ başa dön


Görseller

Not: Resim optimizasyonunu hakkında detaylı bilgi için ücretsiz ekitap'dan faydalanın. Essential Image Optimization from Addy Osmani.

En iyi teknikler

  • Optimization: High Tüm görseller tarayıcıda kullanılmadan önce optimize edilmelidir. Anasayfa gibi önemli sayfalarda WebP formatını kullanabilirsiniz.
  • 🛠 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: Medium Kullanıcının ekran boyutuna göre en uygun resmin görüntülenmesi için srcset özelliği kullanılmalıdır.
  • Retina: Low Retina desteği için görsellerin 2x ve 3x formatları bulunmalıdır.
  • Sprite: Medium Küçük resimler bir sprite dosyasında yer almalıdır (ikonlar SVG sprite dosyalarında bulunabilir).
  • Width and Height: High Eğer render edilecek görselin boyutları biliniyorsa <img> elementlerinin width ve heightdeğerleri girilmelidir (CSS üzerinden boyutlandırmalarda kullanılmayabilir).
  • Alternative text: High Tüm <img> elementleri görseli açıklayan bir yazı barındırmalıdır.
  • Lazy loading: Medium Resimler lazyload ile yüklenmeli. (Daima bir noscript alternatifi bulunmalı).

⬆ başa dön


JavaScript

En iyi teknikler

  • JavaScript Inline: High Javascript kodlar döküman içinde kullanılmamalı (HTML kodu ile karışık şekilde).
  • Concatenation: High Javascript dosyaları birleştirilmeli.
  • Minification: High JavaScript dosyaları sıkıştırılmalı (.min soneki kullanılabilir).
  • JavaScript security: High
  • Non-blocking: Medium JavaScript dosyaları asenkron(async) ya da defer(defer) ile yüklenmeli.
  • Modernizr: Low Bazı özel nitelikleri hedeflemeniz gerekiyorsa, <html> etiketinize sınıf eklemek için özel bir Modernizr kullanabilirsiniz.

JavaScript testing

  • ESLint: High ESLint ile herhangi bir hata almamalısınız (Standart kurallara ya da kendi ayarlarınıza göre).

⬆ başa dön


Güvenlik

Web sitenizi tarayın ve kontrol edin

Best practices

  • HTTPS: Medium Tüm sayfalar ve harici içeriklerde HTTPS kullanılmalı (eklentiler, resimler...).
  • HTTP Strict Transport Security (HSTS): Medium HTTP header'ı 'Strict-Transport-Security' şeklinde ayarlanmalı.
  • Cross Site Request Forgery (CSRF): High CSRF saldırılarını önlemek ve sunucuya yapılan isteklerin doğruluğu için gelen isteklerin web sitenizden / uygulamanızdan geldiğine emin olun.
  • Cross Site Scripting (XSS): High Sayfanız veya web siteniz, olası XSS sorunları içermemeli.
  • Content Type Options Medium Google Chrome ve Internet Explorer'ın bir yanıtın içerik türünü sunucu tarafından bildirilenlerden farklı olarak algılamasını(mime-sniff) önler.
  • X-Frame-Options (XFO) Medium Ziyaretçilerinizi tıklama saldırılarına karşı koruyun.
  • Content Security Policy Medium İçeriğin sitenizde nasıl yüklendiğini ve nerede yüklenmesine izin verdiğini tanımlar. Ayrıca tıklama saldırılarına karşı koruma sağlamak için de kullanılabilir.

⬆ başa dön


Performans

En iyi teknikler

  • Page weight: High Sayfa boyutları 0 ile 500 KB arasında olmalı.
  • Minified HTML: Medium HTML'i sıkıştırmalısınız.

  • Lazy loading: Medium Resim, script ve CSS dosyaları sayfa yanıt süresini iyileştirmek için lazyload ile yüklenmeli (Detaylı bilgiye kendi başlıkları altından ulaşılabilir).

  • Cookie size: Medium Eğer çerez kullanıyorsanız, her bir çerezin 4096 bayttan fazla olmadığına ve alan adınızın 20'den fazla çerez içermediğine emin olun.

  • Third party components: Medium Harici JS dosyalarına dayanan 3.parti iframe uygulamaları veya eklentiler mümkün oldukça statik eklentiler ile değiştirilmelidir. Böylece harici api çağrıları limitlenerek ziyaretçi aktiviteleri gizli kalabilir.

Yaklaşan istekleri hazırlama

  • DNS resolution: Low Gerekli olabilecek üçüncü parti servislerin DNS'leri, boşta kalma süresi boyunca dns-prefetch ile çözümlenir.
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Low DNS lookup, TCP handshake ve servislerin TLS negotiation aşamaları için preconnect kullanıldı.
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low İhtiyaç duyulacak kaynaklar (örn. lazyload resimler), yükleme esnasında prefetch ile getirildi.
<link rel="prefetch" href="image.png">
  • Preloading: Low Geçerli sayfada gerekli olan kaynaklar (örneğin, <body> sonuna yerleştirilen scriptler) 'preload' ile işlendi.
<link rel="preload" href="app.js">

Performans Testleri

  • Google PageSpeed: High TÜm sayfalar test edildi ve her biri en azından 100 üzerinden 90 puan alıyor.

⬆ başa dön


Ulaşılabilirlik

Not: Oynatma Listesi için: A11ycasts with Rob Dodson 📹

En iyi teknikler

  • Progressive enhancement: Medium Navigasyon ve arama gibi sayfanın önemli işlevleri Javascript etkin olmadan da kullanılabilmeli.
  • Color contrast: Medium Renk kontrastı en azından WCAG AA(Mobil için AAA)'yı geçmelidir

Başlık Etiketleri

  • H1: High Her sayfa sayfa başlığından farklı bir H1 içermeli.
  • Headings: High Başlık etiketleri doğru sırada kullanılmalı (H1'den H6'ya).

Landmarks

  • Role banner: High <header>, role="banner" içeriyor.
  • Role navigation: High <nav>, role="navigation" içeriyor.
  • Role main: High <main>, role="main" içeriyor.

Semantikler

  • Specific HTML5 input types are used: Medium Özelleştirilmiş tuş takımları ve farklı türdeki araçlar kullanan mobil cihazlar için önem arz eder.

Form

  • Label: High Her input öğesi bir label öğesi ilse ilişkilendirildi. Label'in görüntülenemediği durumlar için aria-label kullanılmalı.

Erişilebilirlik testleri

  • Accessibility standards testing: High Sayfanızın erişilebilirlik standartlarına uyup uymadığını test etmek için WAVE aracını kullanın.
  • Keyboard navigation: High Web sitenizi klavyenizi kullanarak test edin. Tüm etkileşimli öğeler, erişilebilir ve kullanılabilir olmalı.
  • Screen-reader: Medium Tüm sayfalar ekran okuyucuda test edildi (VoiceOver, ChromeVox, NVDA ve Lynx).
  • Focus style: High Odak devre dışıysa, CSS'ile aktif hale getirildi.

⬆ başa dön


SEO

  • Google Analytics: High Google Analytics kurulmalı ve doğru şekilde yapılandırılmalı.
  • Headings logic: Medium Başlık metni daima geçerli sayfadaki içeriğin anlaşılmasına yardımcı olmalı.
  • sitemap.xml: High Bir sitemap.xml bulunmalı ve Google Search Console'a (eski adıyla Google Webmaster Araçları) gönderilmeli.
  • robots.txt: High robots.txt sayfaları engellememeli.
  • Structured Data: High Yapısal verileri kullanan sayfalar test edilmeli ve hata içermemeli. Yapılandırılmış veriler, örümceklerin geçerli sayfadaki içeriği anlamalarına yardımcı olur.
  • Sitemap HTML: Medium HTML sitemap'iniz bulunmalı ve sitenizin footer'ından bir link aracılığı ile ulaşılır olmalı.
  • Pagination link tags: Medium Sayfalanan içeriklerin linkleri rel="prev" ve rel="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">

⬆ başa dön


Çeviri

Front-End Checklist diğer dillerde de mevcuttur. Tüm çevirmenlerlere teşekkürler!


Front-End Checklist Rozeti

Front-End Checklist Listesinin kurallarını izlediğinizi göstermek isterseniz bu rozeti Benioku dosyasında kullanabilirsiniz.

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/)

⬆ başa dön


Katkıda Bulunma

Değişiklikler veya eklemeler önermek için issue açabilir veya pull sorgusu gönderebilirsiniz.

Guide

Front-End Checklist iki alt daldan oluşur:

1. master

Bu dal otomatik olarak Front-End Checklist 'e yansıtılan' README.md 'dosyasından oluşur.

2. develop

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.

Destek

Herhangi bir sorunuz veya öneriniz varsa, Gitter veya Twitter'ı kullanmaktan çekinmeyin:

Yazar

David Dias

Katkıda Bulunanlar

Projeyi bu noktaya getiren tüm katılımcılara teşekkürler.[Katkıda Bulun].

Destekleyenler

Destekleyen herkese teşekkürler! 🙏 [Destekle]

Sponsorlar

Destek olmak için projeye sponsor ol. Sitenizin linkini içeren logonuz burada görüntülenecek. [Sponsor Ol]

Lisans

CC0

⬆ başa dön