Web & Frontend

Otuz saniyede okunup anlaşılacak uzunlukta kod parçacıkları; JavaScript, Python, React ve CSS için. Stack Overflow’dan farkı her parçacığın açıklamalı, test edilmiş ve konu başlığına göre düzenlenmiş olması — arama değil, gezinme.

Yönlendirme, form, HTTP ve bağımlılık enjeksiyonu çatının içinde geliyor. React’ten farkı bu kararların senin yerine verilmiş olması: orada her parçayı tek tek seçersin, burada hazır gelir; karşılığında esneklik dar.

Angular uygulama çatısı için bileşen, araç ve öğretici listesi. Resmî dokümandan farkı topluluk kütüphanelerini ve gerçek örnekleri toplaması.

JavaScript linter’ı ESLint için eklenti ve yapılandırma listesi. ESLint belgelerinden farkı topluluğun paylaştığı yapılandırmaları ve React, Vue gibi çatılara özgü eklentileri toplaması.

Tarayıcıda coğrafi bilgi sistemleri (harita) için kütüphane listesi. Genel harita API listelerinden farkı sunucu değil tarayıcıda çalışan kütüphanelere — harita görüntüleme, veri dönüştürme, mekânsal analiz — odaklanması.

HTML5 API’leri (Canvas, WebSocket, depolama), araçları ve kaynaklarının listesi. Genel web listelerinden farkı yalnız HTML5 standardıyla gelen tarayıcı API’lerine odaklanması.

İyi bir mobil web deneyimi kurmak için kaynak listesi: dokunmatik olaylar, performans, çevrimdışı çalışma. Yerel uygulama listelerinden farkı tarayıcıda çalışan mobil siteleri hedeflemesi.

Node paket yöneticisi npm için ipucu, araç ve kaynak listesi. npm belgelerinden farkı çevresindeki araçları — paket arama siteleri, yayınlama yardımcıları, komut satırı eklentileri — toplaması.

Görev koşucusu olarak npm script kullanımı için kaynak listesi. Gulp ya da Grunt gibi görev koşucularından farkı ek bağımlılık olmadan package.json betikleriyle yetinmeyi öğretmesi.

Yerel davranışı ezmeden ekleyen ponyfill kütüphaneleri listesi. Polyfill’lerden farkı global nesneleri değiştirmemesi: özelliği ayrı bir modül olarak içe aktarıyorsun.

React’in 3 KB’lık hafif alternatifi Preact için bileşen, araç ve örnek listesi. React listelerinden farkı yalnız Preact ile uyumlu ve küçük boyutu koruyan kütüphaneleri toplaması.

React ekosistemi için kütüphane, araç ve öğrenme kaynağı listesi. Resmî belgelerden farkı çevredeki ekosistemi — durum yönetimi, yönlendirme, bileşen kütüphaneleri, test — tek listede toplaması.

React Hooks için kütüphane, örnek ve yazı listesi. Genel React listelerinden farkı sınıf bileşenlerini değil, yalnız hook tabanlı kalıpları ve özel hook paketlerini toplaması.

Yapılandırma gerektirmeyen JS stil kılavuzu ve linter Standard için kaynak listesi. ESLint’i elle yapılandırmaktan farkı kuralların tartışmaya kapalı, sabit gelmesi; liste editör eklentilerini ve uyumlu araçları topluyor.

Svelte ve SvelteKit için bileşen ve araç listesi. React ağırlıklı listelerden farkı bu derleme-zamanı çatısına özgü ekosistemi göstermesi.

Tarayıcılar arası eklenti (WebExtension) geliştirmek için kaynak listesi. Tek tarayıcı dokümanından farkı Chrome, Firefox ve Safari’de çalışan ortak API’ye odaklanması.

Tarayıcıda sanal/artırılmış gerçeklik sağlayan WebXR için kaynak listesi. Yerel XR SDK’larından farkı kurulum istemeden tarayıcıda açılan deneyimler; liste çatıları, örnekleri ve araçları topluyor.

WordPress’i komut satırından yöneten WP-CLI için kaynak listesi. Yönetim panelinden farkı toplu ve betiklenebilir işlemler: yüz sitede eklenti güncellemek tek komut.

Web performansını iyileştirmek için somut öneriler toplayan kılavuz. Lighthouse gibi otomatik denetimlerden farkı önerilerin uzmanlarca elle yazılmış, gerekçeli olması; içeriğin bir kısmı HTTP/1 dönemine ait.

Bir HTML/CSS özelliğinin hangi e-posta istemcisinde çalıştığını gösteren tablo. Web’in Can I use’undan farkı e-posta istemcilerinin kendine has, kısıtlı desteğine bakması.

Bir web özelliğinin hangi tarayıcının hangi sürümünde çalıştığını gösteren tablo; kullanım oranlarıyla birlikte. MDN’den farkı, "destekleniyor mu" sorusuna sürüm ve pazar payı düzeyinde cevap vermesi — polyfill gerekip gerekmediğine buradan karar veriyorsun.

Canvas üstünde sade, duyarlı grafikler çizen JavaScript kütüphanesi. Ağır görselleştirme kütüphanelerinden farkı birkaç satırda çalışan, hafif olması.

"Diziyi nasıl ters çeviririm" gibi günlük JavaScript sorularına güncel tek satırlık cevaplar. Stack Overflow’dan farkı cevabın 2012’den kalma olmaması — modern söz dizimiyle yazılmış; ama en yeni parçalar Şubat 2024 tarihli, yani bakımı yavaş.

Kopyalanıp kullanılabilecek HTML, CSS ve JavaScript kod örnekleri. Dokümantasyondan farkı açıklama yerine doğrudan çalışan küçük parçalar vermesi.

Markdown dosyalarını derleme olmadan, tarayıcıda dokümantasyon sitesine çeviren araç. Statik üreticilerden farkı build adımı olmaması — sayfaları anında sunması.

Meta’nın React tabanlı dokümantasyon sitesi üreticisi; sürümleme ve çeviri yerleşik geliyor. Genel statik üreticilerden farkı belge odaklı olması: özellikle yazılım dokümantasyonu için sürüm arşivi ve i18n gibi hazır parçalarla geliyor.

Web geliştiricilere yönelik, gelişmiş hata ayıklama araçlarıyla gelen Firefox sürümü. Chrome DevTools’tan farkı CSS Grid ve Flexbox denetleyicisinin ve yazı tipi panelinin güçlü olması.

Bir web sayfasını yayına almadan önce HTML, CSS, JS, erişilebilirlik, performans ve SEO için denetlenecek maddeleri öncelik etiketleriyle listeler. Genel rehberlerden farkı, işaretlenebilir ve önceliklendirilmiş kontrol listesi olması.

Frontend dünyasındaki haber, yazı ve araçları haftalık derleyen bülten. Dağınık takipten farkı tek, süzülmüş bir akışta özet vermesi.

Gerçekçi tasarım dosyaları verip onu koda dökmeni isteyen alıştırma platformu. Rastgele projelerden farkı profesyonel tasarım ve topluluk geri bildirimiyle gelmesi.

Dokümantasyon yazma ve yayımlama platformu; Git ile senkron çalışıp teknik kitapları web sitesine çeviriyor. Docusaurus gibi statik site üreteçlerinden farkı barındırılan, teknik olmayan yazarların da kullanabildiği bir editör sunması.

Kendi ürününe gömdüğün görsel sayfa düzenleyici; bileşen ve stil yöneticisini sen tanımlıyorsun. Barındırılan site kurucularının aksine editörün sahibi sensin.

Tarayıcılar arası ses oynatma kütüphanesi; Web Audio API’yi kullanıyor, olmadığı yerde HTML5 Audio’ya düşüyor. Ham Web Audio ile uğraşmaktan farkı ses sprite’ları, havuzlama ve mobil otomatik oynatma kilidini kendisi çözmesi.

Her HTML etiketi ve özniteliği görsel örnekle listelenmiş, tek sayfada göz gezdirilebiliyor. MDN’in derinliği yok ama “bu etiket ne yapıyordu” sorusuna daha hızlı cevap veriyor.

HTML özniteliğiyle istek atıp dönen HTML parçasını sayfaya yerleştiriyorsun; JSON ve istemci durumu yok. React gibi SPA çatılarından farkı bu sadelik: 14 kB, bağımlılığı yok — SPA karmaşıklığına gerek olmayan yerde makul bir çıkış.

Markdown içeriği statik sitelere dönüştüren, Go ile yazılmış üretici. Node tabanlı üreticilerden farkı ham hızı: binlerce sayfayı saniyeler içinde derliyor, tek ikili dosya, JS bağımlılık ağacı yok.

WordPress’e alternatif, açık kaynak içerik yönetim sistemi (CMS).

Sıfırdan yazılan bağımsız tarayıcı motoru; Chromium, WebKit ya da Gecko’dan türetilmemiş. Diğer "alternatif" tarayıcılardan farkı tam olarak bu — ötekiler Chromium kabuğu, bu kendi motorunu yazıyor. Henüz günlük kullanıma hazır değil.

Addy Osmani’nin JavaScript tasarım kalıplarını anlatan ücretsiz çevrimiçi kitabı. Genel tasarım kalıbı kitaplarından farkı modül, gözlemci ve prototip gibi JavaScript’e özgü kalıplara odaklanması; bu sürüm eski baskı, güncel kalıplar patterns.dev’de.

Google Haritalar sıralamasını konum ızgarası üzerinde ölçüyor; aynı sorgunun mahalleden mahalleye nasıl değiştiğini gösteriyor. Genel SEO araçlarından farkı tam da onların kör noktasını — yerel sıralamayı — ölçmesi.

Web platformunun en yaygın kullanılan referansı. W3Schools gibi özet sitelerden farkı her sayfadaki tarayıcı uyumluluk tablosu — bir özelliği kullanmadan önce Safari’de çalışıp çalışmadığını burada görürsün.

Mozilla'nın web sitelerine önerdiği güvenlik başlıkları ve ayarları: CSP, HSTS, çerez bayrakları, CORS, SRI. Her ayar için öncelik ve örnek yapılandırma verdiği için genel güvenlik yazılarından daha uygulanabilir.

Alan adı, PHP/Node, güvenlik ve performans seçeneklerini işaretleyerek hazır bir NGINX yapılandırması üreten arayüz. Örnek yapılandırma kopyalamaya göre en iyi uygulama ayarlarını (TLS, başlıklar, gzip) otomatik ekliyor.

Her projede kilit dosyasına bakıp npm, yarn, pnpm ya da bun’u kendisi seçen tek komut. Hangi yöneticinin kullanıldığını hatırlamaktan farkı her yerde aynı komutu yazman.

Obsidian notlarını doğrudan yayımlanmış bir dijital bahçeye çeviren eklenti. Quartz gibi üreticilerden farkı derleme adımı istememesi: not içinden tek düğmeyle yayınlıyorsun, ayrı bir build hattı kurmana gerek kalmıyor.

Modern web uygulamaları için tasarım ve render desenlerini örneklerle anlatan ücretsiz kaynak. Klasik tasarım kalıbı kitaplarından farkı render desenlerini — SSR, statik üretim, hydration, adalar — da kapsaması.

Tüm dünya haritasını tek bir PMTiles dosyası olarak sunan açık kaynak harita yığını; dosya S3 gibi düz bir depoda duruyor, tarayıcı HTTP aralık istekleriyle yalnızca gereken parçaları okuyor. Mapbox gibi barındırılan harita servislerinden farkı karo sunucusu ve kullanım başına ücret olmaması.

Markdown notlarını — özellikle Obsidian kasalarını — bağlantılı bir siteye dönüştüren üretici. Genel statik üreticilerden farkı çift yönlü bağlantı ve geri-bağlantıları koruması: dijital bahçeni ağ yapısıyla birlikte yayımlıyor.

Yeniden yazılmış resmî doküman; kancalar (hooks) merkezde. Eski reactjs.org belgelerinden farkı sınıf bileşenlerini bırakması; “You Might Not Need an Effect” bölümü en sık yapılan hatayı doğrudan hedefliyor.

React formlarını az yeniden render’la yöneten, doğrulama getiren kütüphane. Kontrollü bileşenlerden farkı performansı yüksek tutup kodu sadeleştirmesi.

Teknik SEO kontrol listesi; başlık yapısı, şema işaretlemesi ve sayfa hızı maddeleri uygulanabilir. Pazarlama odaklı Türkçe SEO yazılarından farkı somut, denetlenebilir maddelerle yazılmış olması.

Shopify tema şablon dilinin nesne, filtre ve etiket referansı. Genel Liquid belgelerinden farkı Shopify’a özgü nesneleri kapsaması: hangi verinin hangi şablonda erişilebilir olduğu buradan görülüyor.

Web tasarım ve geliştirme üzerine derinlemesine makaleler, kitaplar ve pratik rehberler. Kısa blog yazılarından farkı uzun, editör denetiminden geçmiş makaleler yayımlaması.

SVG’yi betikle üretmek ve canlandırmak için JavaScript kütüphanesi; Raphaël’in modern tarayıcılara yazılmış hâli. D3’ten farkı veri görselleştirme değil doğrudan SVG kurgulaması — grafik değil grafik nesnesi üretiyorsun.

Bağımlılığı olmayan, erişilebilirlik odaklı kaydırıcı/karusel kütüphanesi. Swiper’a göre çok daha küçük (sıkıştırılmış ~12 KB) ve klavye gezinme ile ARIA rollerini varsayılan olarak doğru kuruyor — karusel erişilebilirliğinin klasik zayıf noktası.

Tarayıcının çirkin alert kutusunu güzel, özelleştirilebilir modallarla değiştiren kütüphane. Yerleşik alert’ten farkı biçim, giriş alanı ve söz (promise) desteği vermesi.

Görsel arayüz tasarımından temiz React, Vue ya da HTML kodu üreten düşük kodlu platform. Webflow’dan farkı çıktının dışa aktarılabilir ve okunabilir bileşen kodu olması — tasarımı devralıp elle geliştirmeye devam edebiliyorsun.

Topluluk eliyle yürütülen erişilebilirlik sitesi; WCAG’a dayanan sade bir kontrol listesi, yazılar ve araç-kaynak listeleri. W3C’nin hızlı başvurusundan farkı ölçütleri teknik dil yerine geliştiricinin anlayacağı maddeler hâlinde vermesi.

Dili temelden ileriye sıralı işliyor; prototip zinciri, olay döngüsü ve Promise gibi zor konuları atlamıyor. MDN’den farkı referans değil öğretici olması; ikisi birbirini tamamlar.

HTML’i spesifikasyona göre denetliyor; tarayıcının sessizce toparladığı kapatılmamış etiket ve geçersiz iç içe geçmeleri ortaya çıkarıyor. HTMLHint gibi linter’lardan farkı üslup değil spesifikasyona uygunluk denetlemesi; erişilebilirlik sorunlarının bir kısmı buradan çıkar.

WebAIM’in erişilebilirlik değerlendirme aracı; bir adres girince ya da tarayıcı eklentisiyle sayfanın üstüne hataları, uyarıları ve yapı bilgisini simge olarak yerleştiriyor. Rapor üreten tarayıcılardan farkı sorunu sayfanın içinde, yerinde göstermesi; eklenti giriş gerektiren sayfaları da yerelde değerlendiriyor.

W3C’nin “How to Meet WCAG” sayfası: her başarı ölçütü, düzeyi (A, AA, AAA) ve onu karşılayan teknikler ile yaygın hatalar; düzeye ve konuya göre süzülüyor. Standart metnini okumaktan farkı ölçütten doğrudan uygulanacak tekniğe götürmesi.

Microsoft’un 24 derslik müfredatı; her ders öncesi ve sonrası sınav, sonunda proje var. Dağınık öğreticilerden farkı bu yapı: kendi kendine çalışırken ilerlemeni ölçebiliyorsun.

Web geliştirmeyi temelden ileriye sade anlatan YouTube kanalı. Uzun kurslardan farkı çoğu videonun tek bir kavramı kısa sürede bitirmesi.

Google’ın web kalitesi (performans, erişilebilirlik, PWA) rehberleri ve ölçüm araçları. MDN’den farkı referans değil rehber olması: Core Web Vitals gibi ölçütleri ve nasıl iyileştirileceklerini anlatıyor.

Utah State Üniversitesi bünyesindeki erişilebilirlik merkezi; kontrast denetleyicisi, WAVE aracı ve yıllık "Million" taraması buradan çıkıyor. WCAG belgesinin kendisinden farkı, kuralı değil kuralın pratikte nasıl uygulandığını anlatması.

WebAssembly standardının resmî sitesi: belirtimler, kavramlara giriş ve hangi önerinin hangi tarayıcı ve çalışma ortamında desteklendiğini gösteren özellik tablosu. MDN’in WebAssembly sayfalarından farkı JavaScript tarafından değil, standardın kendisinden ve çalışma ortamlarının durumundan bakması.

Bir sitenin erişilebilirlik, hız, güvenlik ve uyumluluk sorunlarını tarayan, her kuralı açıklayan açık kaynak linter; çevrimiçi tarama, CLI ve VS Code eklentisi olarak çalışıyor. Lighthouse'tan farkı kural başına ayrıntılı dokümantasyon sunması ve yapılandırılabilir olması.

Web’in büyük bölümünü çalıştıran açık kaynak blog ve içerik yönetim sistemi; burası kendin kuracağın yazılım, WordPress.com barındırma hizmeti değil. Statik site üreteçlerinden farkı yönetim paneli ve dev eklenti ekosistemi; karşılığında bakım ve güvenlik güncellemesi yükü.