­čŚé Modern sitelerin titiz geli┼čtiricileri i├žin Front-End Checklist
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 19 commits ahead, 438 commits behind thedaviddias:master.
eraycetinay Merge pull request #1 from aykutkardas/patch-1
K├╝├ž├╝k bir ├ževiri ve kelime d├╝zeltmesi.
Latest commit 9d79714 Jun 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CNAME Create CNAME Oct 17, 2017
CODE_OF_CONDUCT.md fix grammar Oct 28, 2017
LICENSE Changing MIT to CC0 Oct 19, 2017
README.md K├╝├ž├╝k bir ├ževiri ve kelime d├╝zeltmesi. Jun 27, 2018
_config.yml Set theme jekyll-theme-slate Oct 17, 2017

README.md

Front-End Checklist Logo

Front-End Checklist

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