Bunun için JavaScript'e ihtiyacınız yok

Web geliştirmenin temel ilkesi: en az yetki ilkesi

• Web geliştirmenin temel ilkelerinden biri olan 'en az yetki ilkesi', verilen amaç için uygun olan en düşük seviyeli dili seçmek anlamına gelir.
• HTML, CSS ve JS arasında en çok HTML tercih edilir; ardından CSS gelir, son sırada ise JS bulunur.
• JS en çok yönlü olanıdır, ancak yüklemenin başarısız olması, ek kaynak tüketimi ve erişilebilirlik sorunları gibi riskler taşır.

Özel anahtar

• Tasarım gereksinimlerine göre normal bir onay kutusu yerine özel bir anahtar uygulamak gerektiğinde, JS yerine :checked sözde sınıfını kullanan HTML ve CSS ile bunu gerçekleştirmek mümkündür.
• Tarayıcı, etiketin içindeki giriş öğesini otomatik olarak ilişkilendirip tıklanabilir hale getirerek ek bir JS işleyicisine gerek kalmadan geçiş işlevi sunar.

Yerel otomatik tamamlama özelliği: Datalist

• JavaScript yerine tarayıcının yerleşik özelliği olan datalist kullanılarak, kullanıcının yazdıkça seçeneklerin otomatik filtrelenip gösterilmesi sağlanabilir.
• Kullanıcı istediği değeri girebilir ya da tarayıcının eklediği açılır menü simgesine tıklayarak tüm seçenekleri görebilir.

Yerel renk seçici

• Karmaşık JS kullanan bir renk seçici yerine, tek satırlık HTML ile uygulanabilen yerel bir renk seçici kullanılabilir.
• Chrome tabanlı tarayıcılarda ekranın herhangi bir yerinden renk seçmeye imkân veren ek bir özellik sunulur.

Akordeon

• details ve summary öğeleri kullanılarak, içerik kullanıcı ihtiyaç duyana kadar gizlenebilir ve sayfanın yapısı iyileştirilebilir.
• open niteliği kullanılarak akordeon öğelerinden biri varsayılan olarak açık bırakılabilir.

Etkileşimli modal

• dialog öğesi kullanılarak kullanıcıya bilgi veren veya ondan girdi isteyen bir modal uygulanabilir.
• Modalı açmak için JS kullanılır, ancak geri kalan her şey yerel HTML ve CSS ile işlenebilir.

Sonuç

• Bu yazı, daha az JS kullanıp CSS ve HTML'in sunduğu özelliklerden yararlanarak daha iyi web siteleri yapılabileceğini gösteriyor.
• Erişilebilirliği göz önünde bulundurarak yeni uygulama yöntemlerini test etmek önemlidir.

GN⁺ görüşü

• Bu yazıdaki en önemli nokta, web geliştirmede JS'ye bağımlı kalmadan HTML ve CSS'in yeteneklerinden azami ölçüde yararlanarak performans ve erişilebilirliğin artırılabileceğidir.
• Web geliştiricileri için ilgi çekici olmasının nedeni, daha önce yalnızca JS ile mümkün olduğu düşünülen işlevler için daha basit ve daha verimli yeni yöntemler önermesidir.

[GN⁺]

Hacker News yorumu

• JavaScript’in uyumluluğu daha iyi olduğu için belirli alanlarda kullanılmasına dair bir değinmenin eksik olduğuna dikkat çekiliyor

  • Yeni JavaScript, transpile edilerek kullanılabilir; ancak CSS ve HTML’de eksik özellikleri polyfill ile tamamlamak çok daha zordur ve bazen imkansızdır
  • appearance özelliği kullanılırken MDN’de birçok uyarı veriliyor; özellikle appearance: none kullanımı için kapsamlı test öneriliyor
  • datalist, Firefox Android’de çalışmıyor ve yalnızca basit bir giriş kutusu gibi görünüyor
  • Renk seçici son derece standart dışı olduğu için çoğu işletmede kullanılması zor
  • Makalenin kendisi de details ve dialog tutarsızlığını kabul ediyor
  • Tarayıcıların bu özellikleri tutarlı biçimde desteklediği bir dönemin gelmesi umuluyor, ancak o zamana kadar bunlar çoğunlukla yalnızca kişisel projelerde kullanılacak

• 2023’te bile form ve kullanıcı veri girişi konusunda hâlâ genel kullanıcı deneyimi (UX) sorunları yaşanmasına şaşırıldığı ifade ediliyor

  • Bunun neden çözülmediği anlaşılamıyor
  • Bunu XForms ile tek seferde çözme girişimi olmuştu, ancak tarayıcılarda uygulanmadı; bunun yerine CSS/JS bileşen çerçeveleri sınırlı bir form öğesi seti sunuyor

• datalistin bilinmediği, ancak Chrome Android’de de düzgün çalışmıyor gibi göründüğü belirtiliyor

  • Seçenekler klavyede görülebiliyor, ancak bu özelliğin mobil web arayüzünde ilk kez görüldüğü ve sıradan kullanıcıların bunu nasıl kullanacağını çözebileceğinden emin olunmadığı söyleniyor
  • Firefox Android’de ise hiç desteklenmiyor

• scroll-behavior: smooth ile yerel yumuşak kaydırma, scroll-snap ile yerel carousel ve kaydırma tabanlı animasyonlardan söz ediliyor

  • Bu özelliklerin kullanımını sınırlamak ve sık sık olumsuz yan etkileri olduğundan dikkatli kullanmak öneriliyor

• <details> kullanıldığında içeriğin Ctrl+F ile aranabildiği ve JavaScript accordion’ların açılamadığı durumlara karşılık <details>in açılabildiği avantajından bahsediliyor

• datalistin, dahili araçlar dışında uygun bir seçim olmadığı görüşü dile getiriliyor

  • Varsayılanları iyi değil, stili değiştirilemiyor ve stil ya da davranış değişikliğinde kısıtlar olduğunda JavaScript kullanmak çoğu zaman tek seçenek oluyor

• HTML standardına uyulursa her şeyin tutarlı olacağı ve erişilebilirlik ya da çeviri gibi şeylere kolayca uygulanabileceği görüşü paylaşılıyor

  • Modern sitelerin sayfaları dinamik olarak yüklemesi nedeniyle geri düğmesinin bile çalışmaması sorunu işaret ediliyor

• CSS’nin web sayfalarını okunması zor hale getiren bir araç olarak kullanılabildiğine dikkat çekiliyor

  • Yerleşim ve tipografinin tüm yönlerinin kullanıcı tarafından kontrol edilebildiği tarayıcılara geri dönülmesi gerektiği görüşü paylaşılıyor

• Web geliştirmenin temel ilkelerinden biri olarak "En Az Güç Kuralı (Rule of Least Power)" anılıyor

  • Bir geliştirici bu ilkeyi daha önce duymadığını söylüyor ve mümkün olduğunca basit çalışmak isteyen frontend geliştiriciler olup olmadığını merak ediyor