Aylık Web Geliştirme Güncellemesi 7⁄2018: Pratik Erişilebilirlik, Tasarım Hataları ve Özellik Kontrolü

Web beni şaşırtmaya devam ediyor. Platformdaki tüm çeşitliliği ve farklı değişiklikleriyle, (sadece) bir tane bile olsa düz bir model görmek zor. Ancak nelerin değiştirildiğini, platforma hangi özelliklerin eklendiğini, hangilerinin kullanımdan kaldırıldığını ve tarayıcıların kullanıcıyı kötü niyetli web sitesi saldırılarından korumak için giderek daha fazla teknolojiyi nasıl uyguladığını görmek harika. Bu güvenlik özelliklerinin günümüzde geliştiriciler için bir özellik kadar dikkat çektiğini görmek ilginç; bu, gizlilik ve güvenliğin önemini ve web'in geçmişte ne kadar istikrarsız ve güvensiz olduğunu gösterir.

Ancak tüm bunlarla ilgili en iyi şey, insanların bize verdiği şeylere bağlı kalmanın ne kadar önemli olduğunu göstermesidir. Her şey için kendi çözümlerimizi uygulamak yerine, genellikle mevcut bir sistemi yeniden kullanmak çok daha iyidir. Yerel bir DOM öğesini özel bir öğeyle genişletmek (sıfırdan kendi özel öğemizi yazmak yerine) yalnızca güvenmek daha güvenli olmakla kalmaz, aynı zamanda daha az iş gerektirir. Kendi SSL sürümümüzü oluşturmalı mıyız yoksa bunun için mevcut bir yazılımı mı kullanmamız gerektiğini düşünüyorsak, neden a veya button öğesinin davranışını değiştirmek yerine hiçbir şeye dayalı tıklanabilir bir öğe oluşturalım? Tarayıcı bize bunun için zaten bir API veriyorsa, neden kaynak ana bilgisayar doğrulamasını kendi başımıza kontrol edelim? Bu haftanın makalelerinin tümü bu konulara ayrılmıştır.

Aklıma takılan başka bir şey de Andrea Giammarchi'nin modern ECMAScript yazabilmek için JavaScript yazarken geliştiriciler olarak Babel'i körü körüne nasıl kullandığımızı anlattığı “A Bloatless Web” adlı makalesidir. Ancak, modern kodlarımızın tamamını modern tarayıcılara aktarmanın en verimli yol olmadığını genellikle fark etmeyiz. Andrea'nın bu durumu nasıl iyileştirebileceğimize ve web uygulamalarımızın performansını nasıl iyileştirebileceğimize dair bazı fikirler sunmasına sevindim. Artık her tarayıcı için kodu aktarmayarak paket boyutunun üçte birine hizmet etmek harika olmaz mıydı?

Haberler

• Site İzolasyonu, güvenilmeyen web sitelerinin diğer web sitelerindeki hesaplarınızdan bilgilere erişmesini veya bu bilgileri çalmasını etkili bir şekilde zorlaştırır. Chrome 67 şimdi onunla birlikte geliyor ve Kaynaklar Arası Okuma Engelleme (CORB) artık yüklenmeyecek, örneğin resim olarak bir JSON dosyası. Ancak daha da ötesi, bu değişiklikler, tam sayfa düzeninin artık eşzamanlı olmasının garanti edilmediği anlamına gelir. Bu yeni özellik, JavaScript'teki bir öğeden hesaplanan boyutları okursanız veya unload olay dinleyicilerini kullanırsanız sizi etkiler. Bunu bildiğinizden emin olun ve sitelerinizin hala beklendiği gibi çalışıp çalışmadığını kontrol edin.
• Şimdiye kadar, geliştiricilerin belirli kaynakların yükünü ana bilgisayar adlarına göre sınırlandırmasına olanak tanıyan bir özellik olan İçerik Güvenliği Politikaları hakkında biraz bilgi sahibi olduk. Ancak tarayıcı satıcıları şimdi yeni bir şey buldular: Özellik Politikası. Bu, web geliştiricilerinin tarayıcıdaki belirli API'lerin ve web özelliklerinin davranışını seçmeli olarak etkinleştirmesine, devre dışı bırakmasına veya değiştirmesine olanak tanır. CSP gibidir, ancak güvenliği kontrol etmek yerine özellikleri kontrol eder ve Eric Bidelman, Özellik Politikasına her şeyi açıklayan bir giriş yazdı.
• Brave tarayıcı ekibi, kullanıcılarının gizliliğini korumak için en son özelliklerini gösterir: Tor ağı üzerinden bağlanan sekmeler.

Genel

• Anton Sten, Teknoloji Sektörü Değerleri Bozuldu mu diye soruyor? Apple, Microsoft, Google, Amazon'un yanı sıra diğer küçük şirketlerin pazarlama stratejilerini ve onlara saygı duymamız veya bağlı kalmamız gerekmeyen pazarlama materyalleri olarak davranmak yerine gerçekten amaca yönelik işler yapıp değerlerimize nasıl bağlı kalabileceğimizi analiz etmek.
• Dünyanın teknoloji sektörü, dünyadaki her şeyi hızla dijital şeylere dönüştürürken, birçoğu alanımızda daha fazla etik için çağrıda bulundu. Bu, birçok durumda oldukça belirsiz bir hedeftir, bu yüzden bunu dijitalin bir parçasına uygulayalım: ön uç geliştirme. Front-end geliştiricileri olarak nasıl daha etik olabiliriz, ne tür şeyler yapabiliriz? Hidde de Vries bununla ilgili bir makale yazdı.

Güvenlik

• Ticketmaster'ın müşteri verilerinin güvenliği ihlal edildi ve göründüğü gibi, bunun nedeni üçüncü taraf komut dosyası içeren özelleştirilmiş tek bir kod satırı.

kullanıcı arayüzü/UX

• Eugen Esanu, hala yaptığımız on küçük tasarım hatasını ve bunun yerine tasarımımızı daha kullanıcı dostu hale getirmek için neler yapabileceğimizi gösteriyor.

Mahremiyet

• Bu, Google'ın dışarıdan uygulama geliştiricilerine, uygulama yetkilendirmesi sırasında izin verdiklerinde insanların Google e-postalarını okumalarına nasıl izin verdiğiyle ilgili ilginç bir rapordur. Bununla ilgili sorun, bunu kolayca önlemenin bir yolu olmamasıdır ve Gmail'i şirketiniz için kullanırsanız, gizlilik politikalarını etkileyebileceğinden ve GDPR'ye tabi olduğundan oldukça fazla etkisi olabilir.

Web Performansı

• Max Bock, Network Information API'sini kullanarak gerçek cihaz bağlantı hızına tepki veren bileşenleri nasıl oluşturabileceğimizi anlatıyor. Ve şu anda yalnızca Chrome ve Samsung İnternet tarayıcılarında mevcut olmasına rağmen, denemeye ve belki de bu kullanıcılara zaten sunmaya değer.
• Zaman zaman, performansı artırmak için CSS seçicilerini optimize etmenin öneminden bahseden makaleler okuyabiliyoruz. Bu, birkaç yıl önce yapılan araştırmalardan kaynaklanmaktadır, ancak Ivan Curic bunu tekrar araştırdı ve önemli olmadığını anladı.

Ulaşılabilirlik

• Microsoft'un geliştirici ekibi, sunumların veya dilin dahil edilmek üzere nasıl optimize edileceği veya web sitenizde uygun bir "gezinme atlama" işlevinin nasıl oluşturulacağı da dahil olmak üzere pratik erişilebilirlik hakkında bir video oynatma listesi paylaşır.
• Sara Novak, diğer insanların dünyayı nasıl farklı deneyimlediğini anlamak için renk körü olmayı deneyerek empati göstermeyi nasıl başardığını paylaşıyor.
• Firefox'un Geliştirici Araçları artık bir Erişilebilirlik Denetçisi moduna sahip. İşte nasıl etkinleştireceğiniz ve nasıl kullanacağınız.

JavaScript

• Leon Revill, mevcut yerel DOM öğelerini Web Bileşenleri ile nasıl genişletebileceğimizi gösteriyor. Bu son derece yararlı ve kullanışlıdır, çünkü özel öğeler için önceden oluşturulmuş şablonlar kullanarak yalnızca çok zaman kazandırmakla kalmaz, aynı zamanda tüm optimizasyonları ve varsayılanları (anlambilim, erişilebilirlik, tarayıcı işlevi) ücretsiz olarak alır ve yine de kendi davranışımızı en üstte oluşturabiliriz. ondan. En azından Özel Öğeleri kullanabilseydik, ama bu farklı bir hikaye.
• Gerardo Rodriguez, Service Workers ve Fetch API ile web sitelerini performans için optimize etmekte nasıl kolayca başarısız olabileceğimizi ve bunun tarayıcılarda nasıl bir kota istisnasına yol açabileceğini gösteriyor. Neyse ki, bunun nedenini öğrendi ve uygun CORS başlıklarını ayarlayarak Gerardo sonunda tek önbelleğe alınmış opak yanıtların gizemini çözdü ve sorunlardan nasıl kaçınacağımızı anlattı.
• Filepond, güzel bir açık kaynaklı JavaScript dosya yükleyicisidir. Rik Schennink, onu inşa ederken karşılaşılan zorlukları paylaşıyor.
• Andrea Giammarchi, JavaScript'i Babel ile paketleme sorunu ve kodu aktarmanın neden artık en iyi çözüm olmadığı hakkında. Bunun yerine, paket boyutunu küçültmek ve performansı artırmak için tarayıcı desteğine bağlı olarak farklı paketlerin nasıl sunulacağını düşünmeliyiz.
• Justin Fuller, operasyonel zincirleme, boş birleştirme veya işlem hattı operatörü gibi anlaşılması daha kolay kod yazmamıza yardımcı olacak JavaScript'e yakında gelecek olan üç harika yeni özelliği paylaşıyor.
• Addy Osmani ve Mathias Bynens, JavaScript modüllerini bugün web'de nasıl kullanabileceğimize dair temel bir giriş yazdı.

CSS

• Internet Explorer'da boşlukları olan bir otomatik yerleştirme ızgarasını nasıl taklit edebileceğimizi anlatan bir makale dizisi.
• CSS Izgarası güzel, ancak sık sık insanların onu kullanamadığını duyuyorum çünkü IE11 onu iyi desteklememektedir. Ancak bu tam olarak doğru değil çünkü IE11, otomatik ön ekleyici ile kolayca aktarabileceğimiz önceki bir CSS Izgarası sürümüne sahip. Daniel Tonon, CSS Grid farklılıklarını ve hangi özellikleri kullanıp kullanamayacağımızı açıklıyor ve daha fazla ipucu ile devam edecek.
• Birçok insan için, CSS Izgarası hala çok yeni ve çok yetenekli ve CSS'de ızgara tabanlı düzenler oluştururken birçok sorunu çözmemize yardımcı oluyor. Ancak mevcut sürümde hala mümkün olmayan birkaç şey var. CSS Izgarası seviye 2 bize alt ızgaralar getirecek ve Rachel Andrew buna ne için ihtiyacınız olduğunu açıklıyor.
• CSS-in-JS iyi mi? Sadece kötü mü? Neden sürekli kazananlar olmadığında ve evrimi kabul ederek ve olayları bağlam içinde görerek nasıl daha iyisini yapabileceğimizi tartışma tuzağına düşüyoruz.

İş hayatı

• Sabır kavramı ve kalıcı bir şey inşa etme çabası neden iş dünyasında daha fazla dikkat çekmeli? Başka bir makaleyi okurken aklıma bazı düşünceler geldi ve görünüşe göre birçok insan bunun arkasındaki fikirden hoşlanıyor.
• Ethan Marcotte, müşteri seçmeye nasıl yaklaştığını ve neden yalnızca etik olarak destekleyebileceğiniz müşterileri seçmenin önemli olduğunu düşündüğünü anlatıyor. Ancak bu, Microsoft'un tüzel kişilerle olan ticari işbirlikleri hakkındaki son tartışmaların gösterdiği gibi, bunun bazen ne kadar zor olabileceğini de gösteriyor.