128KB Kısıtı Altında Web Uygulaması Geliştirme Örneği

Özet genel bakış

128KB kısıtı altında web uygulaması geliştirme örneği

• Tasarım ile erişilebilirliğin bir arada olamayacağı yönündeki yaygın kanıya karşı çıkıyor
• Aşırı kısıtlar (128KB, Opera Mini, feature phone ortamı) içinde yenilikçi çözümler üretiliyor
• Web fontlarının kaldırılması, framework’lerden kaçınılması, özel hafif bir kütüphane geliştirilmesi
• Görsel optimizasyonu (TinyPNG, MozJPEG, SVG temizleme) ve her alanda minify uygulanması
• Kısıtların, tersine, evrensel uyumluluk ve performans optimizasyonuna yol açması

---

Giriş: Sorunun tanımlanması ve kısıtların anlamı

• Bazı tasarımcılar WCAG erişilebilirliği ile estetiğin bir arada olamayacağını düşünüyor
• Yazar, kısıtların yaratıcı tasarımın temeli olduğunu savunuyor
• Afrika’daki zayıf iletişim ve cihaz koşulları temel alınarak aşırı kısıtlar belirleniyor

---

Ana bölüm

1. Proje kısıtları

• 128KB sayfa bütçesi: HTML, CSS, JS ve görseller dahil toplam sınır
• Aşırı duyarlı tasarım: 240px feature phone’lardan 4K masaüstüne kadar destek
• Evrensel uyumluluk: Opera Mini odaklı, minimum JS ve zorunlu sunucu tarafı render

2. Teknik seçimler

• Web fontlarını kaldırma: Sistem fontlarını kullanma → alan tasarrufu, FOUT’un kaldırılması, tutarlılığın korunması

• Framework’lerden kaçınma: React vb. kullanılamıyor → özel hafif kütüphane Whizz geliştiriliyor

  • İşlevler: DOM sorgulama, olay işleme, AJAX
  • Gereksiz yeniden yüklemeleri önleme, kısmi HTML güncelleme yönteminin uygulanması

3. Görsel optimizasyon stratejisi

• PNG: TinyPNG ile maksimum sıkıştırma
• JPEG: MozJPEG kullanımı, çift çözünürlüklü çıktı + kaliteyi 0’a ayarlayıp küçültülmüş render alma
• SVG: Sıkıştırma oranı ve ölçeklenebilirlikten yararlanma, PNG fallback sağlama
• SVG optimizasyonu: Gereksiz metadata, yinelenen gruplar, aşırı hassas koordinatların kaldırılması

4. Ek optimizasyon teknikleri

• Her alanda minify: CSS, JS ve HTML’nin tamamına uygulanıyor, gzip desteklemeyen tarayıcılar hesaba katılıyor
• Marka gereksinimlerine uyum: Belirli yazı tipi efektlerini görsel + SVG kombinasyonuyla yeniden üretme
• <defs> ve <use> kullanımı: SVG’yi hafifletme, dış hat efektlerini uygulama

5. Sonuçlar ve doğrulama

• Aşırı düşük hızlı ağlarda bile anında yükleme
• Çeşitli cihazlarla uyumluluk sağlanıyor: Lynx, PSP, eski feature phone’lar, TV tarayıcılarına kadar çalışıyor
• Kullanıcı deneyiminde farklılaşma: Modern cihazlarda akıcı, eski cihazlarda da kararlı

Sonuç: Kısıtların yarattığı inovasyon

• Kısıtlar yaratıcılığı bastırmıyor; evrensel ve sağlam bir tasarıma yönlendiriyor
• Hem modern cihaz kullanıcıları hem de eski feature phone kullanıcıları aynı çekirdek işlevleri deneyimleyebiliyor
• Öz işlevlere odaklanan tasarım felsefesi yerleşiyor → “Kısıtlar pranga değil, inovasyonun temelidir”
• Modern geliştirmeye verdiği ders: sınırsız kaynaklardan çok kısıtlar içinde optimizasyon daha iyi sonuçlar üretebilir

[baeba]

Bu bir Korece çeviri sitesidir.

https://emewjin.github.io/proud-128-kb

[honglu]

Çeviri için teşekkürler..