"HowTo: Components", yaygın kullanıcı arayüzü kalıplarını uygulayan web bileşenleri koleksiyonudur. Bu uygulamaların amacı, eğitim kaynağı olarak kullanılmaktır. Farklı bileşenlerin yoğun yorum içeren uygulamalarını okuyabilir ve bunlardan bir şeyler öğrenebilirsiniz. Bunların açıkça bir kullanıcı arayüzü kitaplığı OLMADIĞINI ve üretimde KULLANILMAMASI gerektiğini unutmayın.
Bileşenler
<howto-checkbox>: Formdaki bir boole seçeneğini temsil eder. En yaygın onay kutusu türü, kullanıcının işaretli ve işaretsiz olmak üzere iki seçenek arasında geçiş yapmasına olanak tanıyan ikili türdür.<howto-tabs>: Görünür içeriği birden fazla panele ayırarak sınırlandırır.<howto-tooltip>: Bir öğe klavye odağı aldığında veya fareyle üzerine gelindiğinde öğeyle ilgili bilgileri gösteren pop-up.
Hedefler
Amacımız; erişilebilir, performanslı, bakımı kolay ve kolayca stil verilebilen sağlam bileşenler yazmak için en iyi uygulamaları göstermektir. Her bileşen tamamen bağımsızdır. Bu sayede referans uygulama olarak kullanılabilir.
Erişilebilirlik
Bileşenler, Erişilebilir Zengin İnternet Uygulaması standardı olan ARIA'yı açıklayan ve gösteren bir kılavuz olan WAI ARIA Yazma Uygulamaları'nı yakından takip eder. ARIA hakkında bilginiz yoksa WebFundamentals'daki giriş bölümümüze göz atın. Her bileşen, Yazma Uygulamaları'nın ilgili bölümüne bağlantı verir. Zorunlu olmasa da koda dalmadan önce Yazma Uygulamaları bölümünü okumanızı öneririz.
Performans
Web geliştirmede "performans" terimi birçok farklı şey için kullanılabilir. <howto> bağlamında performans, çoğunlukla animasyonların mobil cihazlarda bile tutarlı bir şekilde 60 fps'de çalışmasını ifade eder.
Görsel esneklik
Bileşenler, düzen veya seçili ya da etkin bir durumu belirtmek dışında mümkün olduğunca stillendirilmez. Böylece uygulama görsel olarak esnek ve odaklanmış olur. Süslemeye zaman harcamayarak kodu yalnızca bileşenin çalışması için kesinlikle gerekli olanla sınırlandırırız. Bileşenin çalışması için herhangi bir stil gerekiyorsa stil, bunun nedenini açıklayan bir yorumla işaretlenir.
Sürdürülebilir kod
HowTo: Components bir referans uygulama olduğundan, yoğun bir şekilde yorumlanmış, okunabilir ve kolayca anlaşılabilir kod yazmak için ekstra zaman harcadık.
Hedef dışı konular
Kitaplık/çerçeve/araç seti olmamalıdır.
<howto> bileşenleri, üretimde kullanılmak üzere tasarlanmadığından npm, bower veya başka bir platformda yayınlanmaz. Kısa ve okunabilir kodlar için modern JavaScript API'leri kullanıyor ve Web Bileşenleri standartlarını uygulayan modern tarayıcıları destekliyoruz. Bu uygulamaları okuduktan sonra kodu kendi ihtiyaçlarınıza göre uyarlayabilirsiniz.
Geriye dönük uyumlu olma
Koda doğrudan güvenilmemelidir. Daha iyi bir uygulama yöntemi keşfedilirse herhangi bir öğenin uygulamasını ve API'sini önemli ölçüde değiştirebiliriz ve büyük olasılıkla değiştiririz. Bu, web kullanıcı arayüzleri oluşturmayla ilgili en iyi uygulamaları paylaşabileceğimiz, keşfedebileceğimiz ve tartışabileceğimiz canlı bir kaynaktır.
Eksiksiz olmalıdır.
WAI ARIA Yazma Uygulamaları'nda bulunan *tüm *bileşenleri uygulamıyoruz (ve muhtemelen uygulamayacağız). Ancak diğer <howto> bileşenlerinde kullanılan ilkelerin yeniden kullanılması, okuyucuların eksik bileşenleri uygulayabilmesini sağlar.