Şu an üzerinde olduğunuz site bu. Bir şablon değil, küçük bir ürün olarak inşa edilip sürdürülen bir Next.js 14 projesi — kod tabanı herkese açık, yani aşağıdaki ayrıntıların hepsi doğrulanabilir. Lighthouse'ta masaüstünde 99/100, mobilde 97/100 puan alıyor; Erişilebilirlik ve SEO'da 100.
İçinde neler var
-
12 dil: Site İngilizce, Almanca, İspanyolca, Fransızca, Hintçe, İtalyanca, Japonca, Korece, Portekizce, Rusça, Türkçe ve Çince olarak mevcut. Tiplenmiş bir dil bağlamı ve çeviri haritası değiştiriciyi çalıştırıyor; değiştirici seçiminizi hatırlıyor ve sayfanın
langözniteliğini güncelliyor, böylece ekran okuyucular ve arama motorları doğru dili okuyor. İletişim formu dahil her metin dizesi kapsanıyor. -
Hızlı kalan bir parçacık arka planı: İmleci takip eden noktalar bir canvas üzerine çizilir. Erken bir sürüm takılıyordu çünkü canvas konumunu her fare hareketinde ölçüyor ve sürekli düzen yeniden hesaplaması zorluyordu. Bu ölçümü önbelleğe almak takılmayı ortadan kaldırdı ve parçacıkları tembel yüklemek onları ilk boyamanın dışında tutuyor — masaüstü puanını 99'a çıkaran şeyin büyük kısmı bu.
-
Reklam engelleyicilerin sessizce bozmadığı analitik: Üçüncü taraf alan adlarından yüklenen analitik betikleri, uBlock ve Brave gibi engelleyiciler tarafından sessizce düşürülüyor ve hiçbir uyarı olmadan olayların %20-40'ı kaybediliyor. Analitiği sitenin kendi alan adı üzerinden yönlendirmek, verinin birinci taraf ve eksiksiz kalmasını sağlıyor. Umami gizlilik dostu istatistikleri, Google Tag Manager geri kalanı hallediyor.
-
Doğru yapılmış SEO temelleri: Kişi ve her proje için yapılandırılmış veri, her sayfanın 12 sürümü boyunca doğru dil etiketleri, çevirilerin birbiriyle rekabet etmemesi için kanonik URL'ler ve proje başına üretilen sosyal önizleme kartları.
-
Erişilebilirlik: İçeriğe geç bağlantısı, klavye kullanıcıları için görünür odak çerçeveleri, AA'yı geçen metin kontrastı, ekran okuyuculardan gizlenen dekoratif animasyonlar ve stillendirilmiş bir div yerine düzgün gezinilebilir işaretleme olarak inşa edilmiş bir dil menüsü.
-
İçerik sadece Markdown: Bir proje eklemek, doğru dil klasörüne bir Markdown dosyası bırakmak demek — bir sonraki dağıtımda, tamamen tiplenmiş, kod değişikliği olmadan görünür. Sayfa görüntülemeleri, IP'leri saklamak yerine hash'leyen küçük bir sunucusuz fonksiyon tarafından sayılıyor, böylece çerez veya kişisel veri yok.
Neden önemli
Site aynı zamanda bu diğer projelerin nasıl inşa edildiğinin çalışan bir örneği olarak ikili görev görüyor — performans, gizliliğe saygılı analitik, çok dilli destek ve erişilebilirlik, hepsi inceleyebileceğiniz tek bir yerde. Depo açık olduğu için kod, açıklamaya karşı kontrol edilebilir.