Devlog: preunec.de yeniden inşa edildi

preunec.de'yi yeniden boyamadık — yeni bir temelin üzerine yeniden inşa ettik. Bu bir devlog, yani perde arkasına bir bakış var, ama herkes için yazıldı: önce bir ziyaretçi olarak sizin için ne değiştiği, sonra her şeyin nasıl çalıştığına dair anlaşılır bir tur. Okunacak kod yok — yalnızca fikirler ve birkaç diyagram.

Kısaca — Site artık sizin dilinizi konuşuyor, biz yayımladığımız anda güncelleniyor, hızlı kalıyor ve erişilebilirlik ayarlarınıza saygı gösteriyor. Perde arkasında, açılıp kapatılabilen "bölümlerden" oluşuyor ve içeriği ekipteki herkes düzenleyebiliyor — geliştirici gerekmeden.

Sizin için ne değişti

Bir web sitesinin nasıl yapıldığını hiç düşünmeseniz bile, birkaç şey daha iyi hissettirmeli:

• Sizin diliniz. Site Almanca, İngilizce ve Türkçe olarak var ve doğru olanı otomatik seçiyor.
• Her zaman güncel. Bir haber ya da yazı yayımladığımızda hemen görünüyor — yeniden derleme beklemek yok.
• Hızlı ve hafif. Sayfalar çabuk yükleniyor ve animasyonlu görsellere rağmen akıcı kalıyor.
• Ayarlarınıza saygılı. Cihazınız uygulamalardan hareketi azaltmalarını istiyorsa, bizimki bunu dinliyor ve animasyonları sakinleştiriyor.

Neden yeniden inşa ettik

Eski site iş görüyordu ama bize karşı çalışıyordu. Her yeni dil, her yeni bölüm ve her küçük fikir yavaş, elle yapılan bir işe dönüşüyordu. Üç şeyi zahmetsizce yapan bir temel istedik: birden fazla dil konuşmak, saniyeler içinde değişmek ve hızlı hissettirmek.

	Önce	Şimdi
Diller	çoğunlukla Almanca	Almanca / İngilizce / Türkçe, otomatik
Bölüm eklemek	geliştirici gerekiyordu	tek tıkla açılıyor
İçerik düzenlemek	kod içinde	basit bir yönetim paneli
Hareket	sabit	zengin, ve "hareketi azalt"a saygılı
Temel	eskimiş	modern ve bakımı kolay

Büyük fikir: açıp kapatabileceğiniz bölümler

Siteyi yapı taşları olarak düşünün — hizmetler, ürünler, projeler, blog. Bunların her biri, tek tıkla açıp kapatabildiğimiz bir bölüm ve değişiklik anında. Kapatılan bir bölüm her yerden aynı anda kaybolur: sayfadan, menüden ve aramadan.

flowchart TD
  A["Bir sayfa açıyorsunuz"] --> B{"Bu bölüm açık mı?"}
  B -->|Evet| C["Göster"]
  B -->|Hayır| D["Her yerde gizle: sayfa, menü, arama"]

Sözde kodla — kuralın günlük dildeki hâli — şöyle:

bir sayfa istendiğinde:
  bölümü KAPALIYSA  →  gizle (sayfa, menü, site haritası, arama)
  değilse           →  göster

Bu tek fikir, aynı web sitesinin her seferinde yeniden inşa edilmeden çok farklı amaçlara hizmet etmesini sağlar.

Üç dil konuşmak

Site içeriği sizin dilinizde göstermeye çalışır. Belirli bir parça henüz çevrilmediyse, hiçbir şey bozulmaz ve boş bir sayfa görmezsiniz — site zarifçe yedeğine düşer ve özgün dili gösterdiğini dostça belirtir.

flowchart TD
  A["Bu içeriği göster"] --> B{"Sizin dilinizde var mı?"}
  B -->|Evet| C["Sizin dilinizi göster"]
  B -->|Hayır| D{"Almanca var mı?"}
  D -->|Evet| E["Almanca (varsayılan) + küçük not"]
  D -->|Hayır| F["Var olan bir dil + küçük not"]

içeriği sizin dilinizde göstermek için:
  sizin dilinizi dene
  yoksa Almancaya düş (varsayılanımız)
  yoksa var olan bir dile düş
  (asla yarım kalmış taslakları gösterme)

Hızlı kalmak

İçerik, bir yönetim paneli üzerinden düzenlediğimiz bir veritabanında durur. Her ziyarette her şeyi veritabanından yeniden istemek yavaş ve savurgan olurdu — bu yüzden site kısa ömürlü bir kopyayı bellekte tutar ve onu ne zaman yenileyeceğine akıllıca karar verir.

flowchart TD
  A["Bir sayfa içerik ister"] --> B{"Kopyamız ne kadar taze?"}
  B -->|Yeni alındı| C["Hızlı kopyayı kullan"]
  B -->|Biraz eski| D["Şimdi göster, arka planda yenile"]
  B -->|Veritabanı takıldı| E["Son iyi kopyayı göstermeye devam et"]

Son nokta önemli: veritabanı kısa bir süre takılırsa, site çökmek yerine son iyi sürümü sunmaya devam eder. Bir editör bir şeyi değiştirdiğinde ise kopya hemen yenilenir — yani her zaman en yenisini görürsünüz.

Güvende kalmak

Yazılar (bunun gibi) basit bir metin biçiminde yazılır. Sayfada bir şey görünmeden önce temizlenir; böylece yalnızca güvenli, sıradan biçimlendirme kalır.

yazılı içerik gösterilmeden önce:
  normal biçimlendirmeyi koru  →  başlıklar, listeler, bağlantılar, görseller, tablolar, diyagramlar
  riskli olanı kaldır          →  betikler, bilinmeyen etiketler
  görseller güvenli (https) bir bağlantıdan yüklenmeli

"Görseller güvenli bağlantı olmalı" kuralı, buradaki her görselin güvenle saklanıp korumalı bir bağlantı üzerinden yüklenmesinin nedeni. Ayrıca editör ekibimiz için hoş bir yenilik getirdi:

Yapıştır-yükle. Ekibimiz artık bir görseli doğrudan editöre yapıştırabilir veya sürükleyebilir; otomatik yüklenir ve yazıya eklenir — bağlantılarla uğraşmak yok. (Bu yazıdaki diyagramlar da aynı editörde düz metinden çiziliyor.)

Size saygılı hareket

Sitede kaydırma animasyonları, bir 3D stüdyo sahnesi ve birkaç gizli sürpriz var. Ama hareket hava atmak için değil: cihazınız hareketi azalt olarak ayarlıysa (yaygın bir erişilebilirlik seçeneği), site bunu fark eder ve her şeyi otomatik olarak sakinleştirir. Keyif, asla konforun önüne geçmemeli.

Stüdyo: oyun alanımız

/studio, kendimizi serbest bıraktığımız yer — konuşan bir karakter, havada süzülen nokta bulutu yazılar ve shader sahneleri. Hiçbiri şart değil, ama sitenin en bize benzeyen kısmı: bir şirket sitesini broşür gibi hissettirmekten alıkoyan küçük deneyler.

Nasıl yayınlanıyor

Yukarıdaki her şey tek, kendi içinde kapalı bir pakete toplanır ve tertemiz bir birim olarak çalışır — her yere hızlı ve öngörülebilir biçimde dağıtabileceğimiz, mühürlü bir kutu gibi düşünün. İyi anlamda sıkıcı.

Sırada ne var

Bu turda tamamlandı:

• Otomatik seçilen üç dil
• Tüm ekibin düzenleyebildiği açılıp kapanır bölümler
• Basit bir yönetim paneliyle hızlı, dayanıklı içerik
• Yazılarda yapıştır-yükle görseller ve diyagramlar
• Gerçek bir okuma deneyimi: içindekiler, ilerleme çubuğu, paylaşım

Sırada:

• Tüm yazılarda arama
• Kapak görselleri ve daha zengin bağlantı önizlemeleri
• Daha fazla devlog — bu, çoğunun ilki

Bir şirket sitesi genelde bir broşürdür. Biz onun küçük, yaşayan bir ürün olmasını yeğleriz — sizin dilinizde çalışan, yolunuza çıkmayan ve okuması gerçekten keyifli bir ürün.

Etrafa bir göz atın. Ve alışılmadık derecede hızlı bir tuş dizisi yazmak isterseniz — belki bir şeyler bulursunuz.