Denver'da 2022 Apart Bir Etkinlikten Aldığım Bazı Şeyler

Kaynak Düğüm: 1722976

Ayrı Bir Etkinlik 2022 Denver dün tamamlandı. Ve bu sefer üç güne de katılamamış olsam da, dünkü olayı yakaladım - ve bu harika. Çok sosyal ya da dışa dönük biri değilim ama bu, en azından birkaç yıldır katıldığım ilk konferanstı ve insanları şahsen görmek inanılmaz derecede canlandırıcıydı.

Not aldım elbette! Paylaşmak önemsediği için buraya koymayı düşündüm. En azından geçen gün altı yaşındaki çocuğum dün gece tatlımdan bir ısırık isterken bana böyle söyledi.

Bunu konuşmacıya göre anlatacağım. Adil uyarı: Ben tamamen el yazısı notlardan ve oldukça görsel bir adamdan yanayım, bu yüzden notlarım çoğundan daha az yapılandırılmış olma eğilimindedir. Ve bu notlar sadece dikkatimi çeken şeylerdi. Sunucunun ana fikri bile olmayabilirler ama dikkatimi çektiler!

Chris Coyier: Web Siteleri Artık İyi

Yüksek çözünürlük

Chris bu konuşmayı daha önce yapmıştı (onu bağladık daha geçen hafta), ancak bu sefer özellikle ayrıntılarla birlikte önemli ölçüde genişletildi konteyner göreceli birimleri ile birleştirildiğinde clamp(), değerler görünümden ziyade kapsayıcıya göre olduğundan daha doğru yanıt verme olanağı sağlar. Yani, görünüm genişliğini ne sıklıkla kullandığımızı biliyorsunuz (vh) akışkan tipi için birimler?

font-size: clamp(1rem, 1rem + 2vw, 2rem);

Şöyle bir konteyner göreceli birimi kullanabiliriz: konteyner sorgusu satır içi boyutu (cqi) bunun yerine, nerede 1cqi kabın satır içi boyutunun %1'ine eşittir (işte bununla ilgili taslak spesifikasyon):

font-size: clamp(1rem, 1rem + 1cqi, 2rem);

Chris ayrıca performans avantajlarından da biraz bahsetti. kenarda barındırma. Muhtemelen sürpriz değil çünkü o yazılı hakkında okuyun birkaç defadan fazla. Bu makaleleri zaten okumuş biri olarak bile, açıkçası uç bilişimin tam konseptini anlamadım.

Fikir aldatıcı derecede basit: küresel CDN'ler hizmet verebilir varlıklar hızlı bir şekilde çünkü bunları coğrafi olarak kullanıcıya yakın olarak barındırıyorlar. Bu, raster görüntülerin sunulmasında oldukça standart bir uygulamadır. Ancak bir siteye güç veren aynı HTML, CSS ve JavaScript dosyaları gibi statik dosyaları da kapsayacak şekilde genişletilmiştir; bunları önceden oluşturun ve önceden derlenmiş ve optimize edilmiş dosyaları hızlı küresel CDN'den sunun. Jamstack konseptinin tamamı bu!

Peki ya yine de ondan bir sunucu yanıtı almanız gerekiyorsa? Bu pek de uç bir durum değil, değil mi? Artık tek bir URL üzerinde çalışarak verileri önceden getirebilen ve bunları oluşturma öncesinde doğrudan CDN'den enjekte edebilen işleyicilerimiz var. Elbette arka planda ekstra işler yapılıyor. Yine de verileri dinamik olarak getirebiliyor, enjekte edebiliyor, önceden oluşturabiliyor ve statik olarak sunabiliyoruz. talep üzerineve coğrafi olarak kullanıcıya daha yakın çalışmasını sağlamak bunu son derece hızlı hale getirir.

Tolu Adegbite: ARIA'da Nasıl Kazanılır ve Web Erişilebilirliğini Etkileme

Yüksek çözünürlüklü

Aman Tanrım, bu mükemmel bir sunumdu! Tolu Adegbite beni WAI-ARIA konusunda o kadar sıkı eğitti ki paylaştığı tüm değerli şeyleri not etmekte zorlandım: Roller! Devletler! Etiketleme! Açıklamalar! Her şey olağanüstü derecede iyi ele alınmıştı ve bu konulara tekrar tekrar döneceğimi biliyordum.

Ancak dikkatimi çeken belirli bir şey satır içi SVG'nin erişilebilirliğiydi. SVG diğer tasarım varlık türleriyle ilişkili olsa da günün sonunda işaretleme yapılması onu diğerlerinden ayırıyor çünkü her zaman bir resim olarak tanımlanmaz.


An illustrated brown and white tabby kitten looking lovingly into the camera.



  

Yardımcı teknolojinin, uygun bir erişilebilir rol ve etiket vererek satır içi SVG'yi resim olarak okuma olasılığı daha yüksektir:


  

Miriam Suzanne: Basamaklı Önem Katmanları

Yüksek çözünürlüklü

Hey, başka bir CSS-Tricks mezunu! Miriam çok fazla zaman ve çaba harcıyor Kademeli Katmanlar spesifikasyonu. O da şunu yazdı: onlar hakkında büyük bir rehber burada CSS-Tricks'te ve An Event Apart'ta bunlardan bahsettik.

Beni en çok etkileyen şey bunun ne kadar büyük bir zihinsel değişim olduğudur. Konsept kendi başına karmaşık değil. İlan etmek @layer CSS belgesinin üst kısmında katmanları belirlilik sırasına göre listeleyin, ardından bu katmanlara stiller yazın. Ancak benim gibi bir süredir CSS yazan yaşlı bir dinozor için, Basamaklı Katmanların basit bir sınıf seçicinin genellikle daha yüksek bir özgüllüğe sahip olan bir şeyi geride bırakmasını mümkün kıldığı gerçeğine alışmam gerekecek. kimlik gibi.

🤯

Miriam ayrıca odaya, özgüllüğü etkileyen seçicilere (örn. :is(), :where(), ve :has()).

Ah, bu da ilginç bir bilgi. Miriam CSS'deki özgüllüğün tarihçesini incelerken şunu hatırladı: !important başlangıçta kullanıcıların kullanıcı aracısı ve yazar stillerini geçersiz kılmaları için bir araç olarak tasarlandı. Ancak bir noktada yazar stillerini zirveye çıkarmak için bunu benimsedik. Kademeli Katmanlar, bahane kullanmak lazım !important çünkü bize şu gücü veriyorlar:katmanlara öncelik ver ve mirası korumak".

Çok güzel söyledin Miriam!

Dave Rupert: Erişilebilirlik İş Listesindeki Engeli Kaldırma

Yüksek çözünürlüklü

Bir gün sitenizde bildirilen sorunlarla ilgili yüzlerce GitHub bildirimiyle uyandığınızı hayal edin. Nereden başlayacaksın? Belki dizüstü bilgisayarınızı kapatıp bunun yerine kanal tedavisi yaptırabilirsiniz? Bu Dave'e oldu! Otomatik bir erişilebilirlik denetimi çok sayıda hata döndürdü ve bunları Dave'in düzeltmesi için bildirim olarak atadı.

Ancak bu sorunların bir Excel elektronik tablosunu aldıktan sonra, bunları daha iyi bir görünüm için Notion'a taşıyarak, gereksiz sütunları gizleyerek, her şeyi kategorilere ayırarak ve sonuçları mantıksal gruplar halinde görüntüleyerek bir model fark etti. Bildirilen sorunların çoğu, birden fazla sayfada tekrarlanan aynı sorundu. Otomatik bir testin bir avuç hata döndürmesi, bunların hepsinin benzersiz olduğu anlamına gelmez. Bu, biletlerin büyük bir kısmını azalttı.

Nispeten az bir çabayla birikmiş sorunların nasıl yaklaşık %50 oranında azaldığını göstermeye devam etti.

Burada, özellikle de işimizi nasıl işlediğimiz ve organize ettiğimizle ilgili olarak öğrenilecek çok şey var. Benim için en büyük çıkarım, Dave'in süreçler ve araçlar yerine bireyleri ve etkileşimleri vurgulamamız gerektiğini söylemesiydi. Erişilebilirlik hatalarını tarayan araç gibi araçlar faydalıdır ancak hikayenin tamamını anlatmayabilirler. Onların sözlerine güvenmek yerine, karışıklığa dalmadan önce sorular sormaya ve daha fazla bağlam kazanmaya değer.

Bonus olarak, Notion'daki sorunları yeniden düzenlemek, Dave'in, ürününün hangi bozukluklara karşı aktif olarak ayrımcılık yaptığını açıkça gösterecek şekilde sorunları gruplamasına olanak tanıdı ve bu gözden kaçırılanlar ve bunlara nasıl öncelik verileceği konusunda ona daha fazla empati sağladı.


Hui Jing Chen'in bir sanal oturumu daha günü sonlandırdı ama açıkçası koridorda konuştuğum için yarısını kaçırdım. Sunumu kaçırdığım için üzgün olsam da sohbet buna değdi. Yayınlanınca videosunu izleyeceğim!

Zaman Damgası:

Den fazla CSS Püf Noktaları