Chrome Dev Insider'ın ikinci sürümüne hoş geldiniz. Bu sürümde, Chrome'da ve topluluktaki heyecan verici yeniliklerle ilgili güncellemeler paylaşıyoruz. Bu, işimize yaklaşımımızla ilgili içeriden haberlerin ve dikkat etmeniz gereken en önemli güncellemelerden bazılarına hızlı bir bakışın yeni bir bölümüdür.
Ben Rachel Andrew. Chrome Geliştirici İlişkileri Ekibi'nden web.dev ve developer.chrome.com İçerik Yöneticisiyim. Yirmi yıldan uzun süredir web üzerinde çalışıyorum, açık web standartları ve CSS'ye odaklanıyorum ve CSS Çalışma Grubu'nun bir üyesiyim.
İki ay önce Google I/O'yu tamamladık. Burada, kullanıcı bilgilerinin güvenliğini ve gizliliğini sağlarken web'i daha hızlı ve güçlü hale getirme konusunda geliştiricileri nasıl desteklediğimizle ilgili en önemli güncellemelerden bazılarını paylaştık.
Öne çıkan şeylerden biri (topluluğun bunu fark etmesinden memnunuz!), ekibin web'de daha fazla CSS ve Kullanıcı Arayüzü özelliğini desteklemek için yaptığı büyük çalışmalardır. Chrome Dev Insider'ın bu sayısında, bu çalışmanın arkasında kimin olduğunu, CSS ve kullanıcı arayüzü geliştiricilerini desteklemek için nasıl çalıştığımızı ve bizi nelerin beklediğini anlatan perde arkasını size anlatacağız. Bu nedenle, Insider'ın bu sayısını barındırmanın heyecanını yaşıyorum.
Haberlerde
İlk Chrome Dev Insider etkinliğinde, tarayıcı tedarikçilerinin ve ekosistem oyuncularının web'e tüm tarayıcılarda desteklenen daha fazla özellik getirmek için iş ortaklığı yaptığı Compat 2021 ve Interop 2022 girişimleriyle ilgili bazı güncellemeler paylaştık. Girişim, güçlü bir şekilde CSS'ye odaklanmaktadır çünkü tarayıcı uyumsuzluğu, CSS geliştiricileri için en büyük zorluklardan biridir.
Çoğu kişi için bu yeni bir haber olmasa da, tarayıcılar genelinde kaydettiğimiz ilerlemeyi görmek heyecan vericidir.
Geçen ayın başlarında Safari'nin, Safari 16.0 Beta ile birlikte Container Sorgular, subgrid ve flexbox denetleyicisi gibi heyecan verici özellikler içeren bumper sürümünü duyurduğunu gördük. Firefox ve Chrome'un son sürümlerinde bazı heyecan verici özellikler ve düzeltmeler yer alıyor. Web platformundaki yeni gönderi dizisinde, her ay kararlı ve beta tarayıcılarla ilgili önemli konulara değineceğiz.
İçeriden bilgi: CSS ve kullanıcı arayüzü geliştiricilerini destekleme
2022, CSS özellikleri için heyecan verici bir yıl olacak. Bu nedenle, sizi sahne arkasına davet etmenin vaktinin geldiğini düşündük. DevRel Web UI ve Devtools lideri Una Kravets ile CSS ve HTML API'lerine odaklanan Web Kullanıcı Arayüzü Ürün Yöneticimiz Nicole Sullivan ile bir araya gelerek Chrome'un kullanıcı arayüzü geliştiricilerini destekleme yolculuğu hakkında konuştuk.
İkinizle de başlayalım. Kendinizle ilgili biraz daha bilgi verir misiniz?
Nicole: Chrome'da Web Kullanıcı Arayüzü için ürün yöneticisiyim. Özellikle yeni CSS ve HTML API'lerinin yanı sıra kullanıcı arayüzü oluşturan geliştiriciler ve tasarımcılara odaklanıyorum. Burası, Kapsayıcı Sorguları, Kapsam ve dikey ritim gibi son derece önemli API'lerin kullanıma sunulduğu heyecan verici bir alandır.
Una: Web UI ve Geliştirici Araçları DevRel ekiplerine liderlik ediyorum. Web platformunda kullanıcı arayüzü mühendislerini desteklemeye odaklanıyoruz ve başarılı olmak için ihtiyaç duydukları araçlara sahip olduklarından emin oluyoruz. CSS API'leri ve HTML bileşenlerinin yanı sıra etkin değişiklikleri ve geri bildirimleri görmek için Geliştirici Araçları özellikleri de bu kapsamdadır.
Chrome'un kullanıcı arayüzü geliştiricilerine yönelik desteği son birkaç yılda hızlandı. Sence buraya gelmem neden bu kadar uzun sürdü? Yaşanan en büyük zorluklar nelerdi?
Una: Bu çalışmanın ne kadar önemli olduğunu ve neden öncelikli olması gerektiğini göstermek için bazı çalışmalar yapmamız gerekiyordu. 2019'da MDN DNA anketiyle başladık. Kullanıcı arayüzü, platformdaki en büyük sorunlar arasında. O zamandan beri, MDN ve dahili geliştirici memnuniyeti anketlerimiz aracılığıyla verileri kılavuz olarak kullanmaya devam ediyoruz. Tüm bu gelişmelerin sonucunda, yönetimin daha derin bir onay almasını ve Compat 2021 ve Interop 2022 gibi girişimlerin daha büyük bir bölümünü oluşturan, kullanıcı arayüzü alanında en çok talep gören bazı geliştirici özellikleriyle ilgili mühendislik çalışmalarına öncelik vermeyi başardık.
Nicole: Yönetimin sürece dahil olmasını sağlamanın yanı sıra bu API'leri geliştiricilere sunmanın doğru yolunu da bulmamız gerekiyordu. Chrome'a ilk katıldığımda, Katmanlı API'ler (veya kısaca LAPI'ler) adlı bir projede bu sorunu çözdüm. LAPI'ler, geliştiricilere doğrudan bileşen deneyimi sunmayı amaçladı. Hâlâ bunun ateş etmek için harika bir sonuç olduğunu düşünüyorum ama birçok hata yaptık. İlk olarak Bildirim Bildirimleri ve Sanal Liste'ye odaklandık. Kısa iletilerin erişilebilir olması neredeyse imkansızdır ve sanal liste, düzeltilmesi en zor bileşenlerden biridir. Niyetimiz iyiydi ancak geliştiricilere yardımcı olmadığı için projeyi kullanımdan kaldırdık. Zor yoldan öğrenmek zor olsa da her hata, şu anda gerçekleşmekte olan CSS ve HTML'nin rönesansını ateşliyor.
LAPI'lerden biraz daha bahsedelim. Sorun neydi?
Nicole: LAPI'ler için web'in, yerel kullanıcı arayüzü oluşturmaya daha yakın olan, kullanıma hazır bir bileşen geliştirici deneyimine ihtiyacı olduğunu biliyorduk. Tekerleği yeniden icat etmenin geliştiricileri kısıtladığı da açıktı. Kariyerim boyunca oluşturduğum sekmelerin sayısını anlayamıyorum! Bununla birlikte, JavaScript'i tarayıcıya göndererek bu sorunu çözmeye çalıştık. Daha önce tarayıcıya JavaScript gönderen kimse yoktu. Ayrıca, tarayıcının oluşturma motorunu çalıştıran C++ koduyla nasıl etkileşimde bulunması gerektiği de pek açık değildi. Diğer tarayıcı tedarikçilerini dinledik (teşekkürler Mozilla!) ve bu yaklaşımdan uzaklaştık. Bu nedenle Open UI sayesinde çok daha iyi bir şey bulmayı başardık. HTML ve CSS'ye yönelerek esnek ve bildirim temelli çözümler elde ediyoruz. Bildirim temelli olduğundan, erişilebilirliği JavaScript ile yapmak kolay olmayacak bir şekilde ekleyebiliriz. Burada olacak çok heyecanlıyım. Gerçekten temel kullanıcı arayüzü tasarım kalıpları olan selectmenu, pop-up, tooltip, nav, akordeon, sekmeler, atlı karınca ve açma/kapatma özelliklerini desteklemek için çalışıyoruz.
Bu süreçte çok şey öğrendik. Bu alanda CSS Houdini gibi başka girişimler de olduğunu biliyorum. Hikaye nedir?
Una: Evet CSS Houdini, topluluktan öğrendiğimiz başka bir yer. Pek çok faydalı Houdini özelliği olsa da birçoğu benimsenme ve destek sağlayamayacak kadar düşük düzeydedir. Alt düzey API'ler uygulamanın, geliştiricilerin karşılaştığı sorunları azaltmadığını fark ettik. Bunun yerine, daha üst düzey çözümlere ve ihtiyaçlara odaklanmak, tarayıcılar arası desteğin ve ekosistemdeki farkın yaratılması için gereken başarıların elde edilmesine yardımcı oldu. İlerlemeyi şu anda https://ishoudinireadyyet.com/ adresinde izliyoruz.
Tarayıcılar arası destek söz konusu olduğunda, Interop 2022 ve Open UI gibi girişimler topluluk için önemli olumlu sonuçlar sağlıyor. Geliştiricilerden ne duyuyorsunuz?
Una: Geliştiricilerden duyduğumuz en önemli sorunlardan biri "tasarımın tarayıcılarda aynı şekilde çalışmasını sağlamak". En çok istenen geliştirici özelliklerinden bazılarına öncelik vermek ve bunları belirlemek için diğer tarayıcı tedarikçileriyle birlikte çalışarak bu sorunu atlattık. Topluluktan aldığımız geri bildirimler son derece olumlu. Buna ek olarak, RenderingNG adı verilen büyük bir yeniden mimari çalışmasıyla bu özelliklerden bazılarını çok daha yüksek performanslı hale getirmek mümkün hale geldi. Geliştiriciler, yıllardır beklenen bu özelliklerin nihayet üzerinde çalışıldığından ve tarayıcılar arası kullanıma sunulduğundan heyecan duyuyorlar.
Nicole: Toplulukta inanılmaz bir heyecan var. Bunu Twitter'da görebilirsiniz. :)
Ekosistemle çalışmanın, geliştiricilerin uygulamalarını oluşturma konusunda elde ettiğimiz başarıda kritik öneme sahip olduğu kanıtlandı. hayatını kolaylaştırır. Ekibinizin orada çok fazla çalıştığını biliyorum. Sizinle bazı ayrıntıları paylaşmak ister misiniz?
Nicole: Öncelikle, geliştiricilerin web'de oluşturdukları projelere sürekli hayranım. Geliştiriciler, en küçük kitaplıklardan tam çerçevelere kadar muhteşem içerikler üretiyor. Harika bir içerik üretici topluluğu var. Chrome da bu projelerle daha iyi bağlantı kurabilmek için pek çok adım atıyor.
Örneğin, birkaç yıl önce React ve Angular gibi JavaScript Çerçeveleriyle çalışmaya başladık. meta çerçeveler (örneğin Next, Nuxt ve Gatsby). Geçen yıl Sass, Bootstrap ve Material gibi kullanıcı arayüzü araçları ve çerçevelerinde de aynısını yapmaya başladık. Umarım bu yıl GreenSock ve geliştiricilerin işlerini kolaylaştıran diğer araçlarla birlikte hayatını kolaylaştırır. Smashing Konferansı'nda GreenSock'tan Cassie Evans'ın konuşmasını gördüm ve animasyon alanında başkalarıyla çalışmak beni gerçekten heyecanlandırdı.
Peki Web Kullanıcı Arayüzü ekosistemi için en büyük fırsatı nerede görüyoruz?
Una: Büyük fırsatlar açısından bakıldığında, özelleştirilebilir web deneyimlerine yönelik olasılıkların yalnızca çok küçük bir kısmını oluşturuyormuş gibi hissediyorum. Kapsayıcı sorguları ve CSS kullanıcı tercihi medya özellikleri gibi yeni API'ler, geliştiricilerin duyarlı tasarımı görüntüleme biçimini yeniden tanımlıyor. Ayrıca, geliştiricilerin ve tasarımcıların, web sitelerini ziyaret eden kullanıcılarla uyum içinde çalışabilmelerini sağlayan, ortak çalışmaya dayalı tasarım deneyimleri konusunda da çok heyecanlıyım.
Peki Nicole, ekibinin yol haritasında sırada ne var?
Nicole: Tüm keşifler gönderilebilir bir şeye dönüşmez ancak şu anda beni heyecanlandıran birçok şey var:
En başından beri duyarlı, bileşen tabanlı tasarımı etkinleştiriyoruz. Tasarımcıların koyu mod gibi kullanıcı tercihlerine yanıt verebilmesi için renk sistemleri tasarlamaya yönelik araçlar içerir. Örneğin, OKLCH renk alanı, farklı tonlarda parlaklığın tutarlı olmasını sağlar. Tasarımcılar çamur gibi görünen paletler ortaya çıkarmadan, renkleri seçmekten renkler arasındaki ilişkiler tasarlamaya kadar uzanıyor.
Ayrıca kapsayıcı sorguları, kademe katmanları, üst seçici (:has), kapsamlı stiller ve iç içe yerleştirme gibi en çok talep edilen API'lerden bazıları üzerinde de çalışıyoruz. Geliştiriciler, yeniden kullanılabilir bileşenlerle dolu esnek tasarım sistemleri oluşturabilmek için bu özelliklere ihtiyaç duyar.
Kaydırmayla bağlantılı animasyonlar da eğlenceli bir başka alandır. Steve Gardner'ın demosunu çok seviyorum. Kolay ve sorunsuz kaydırma yapan ve kaydırma sırasında tetiklenen havalı uçak animasyonları var. Bunlar eğlenceli olsa da özellikle erişilebilirlik göz önünde bulundurulduğunda doğru ayarlamak zor olabilir. Bu nedenle, özellikte erişilebilirlik için kullanıcı testi yapıyoruz.
Şahsen beni en çok heyecanlandıran şey, yerleşik web kullanıcı arayüzü denetimleri. Geliştiriciler aynı sekme kümesini tekrar tekrar oluşturmaya devam ediyorlar. Tarayıcının yardımcı olabileceğini düşünüyorum. Kullanıcı arayüzünü aç bölümünde seçme menüsü, pop-up, ipucu, sekmeler, gezinme, akordeon ve açma/kapatma gibi bileşenler üzerinde çalışıyoruz. Web'in zaman içinde varsayılan olarak erişilebilir hale gelmesi için bu temel tarayıcı öğelerine erişilebilirliği eklemenin nasıl olacağını araştırıyoruz. Bunun ardından geliştiriciler daha karmaşık ve incelikli sorunlara odaklanabilirken, sekmeler sekmesi gibi temel özellikler tarayıcı tarafından desteklenebilir. Muhtemelen bu yayının kendine ait bir gönderisi olmalıdır, o yüzden şimdilik burada duracağım.
Son olarak, tarayıcılar arasında birlikte çalışabilirlik özelliğine yatırım yapmaya devam edeceğiz. Geliştirici deneyimine tutarlılık getirmek için WebKit ve Gecko'daki kişilerle çalışmaktan büyük keyif aldım. Geliştiricilerden bunu istediklerini net bir şekilde duyduk.
Ayrıca, Seamless Web ekibinin Shared Element Transitions API (Paylaşılan Öğe Geçişleri API'si) kullanıcıların web tasarımını henüz incelemediyseniz. Tasarımcıların tasarımlarını fiziksel uzayda yönlendirmesini sağlayan tüm o incelikli geçişler yalnızca mümkün olmayacak, aynı zamanda kolay olacak. Jake Archibald mükemmel bir demoya sahip.
Standartlar iyi giderse bu yıl dikey ritme bile bakabiliriz. Pek çok özelliğin kilidini açan LayoutNG sistemini temel alarak geliştirebiliyoruz.
Her ikisine de teşekkürler. Eminim ki bizim gibi tüm topluluğun, web arayüzü dünyasına gelecek iyileştirme ve özelliklerin yenilenen hızından dolayı heyecan duyduğundan eminim. Hâlâ ufak tefek şeyler var. Peki, maceraya nereden başlamak istersiniz?
Una: I/O'daki Web platformundaki yenilikler oturumumuzda bu yıl kullanıma sunulan birçok özellik öne çıkıyor. Adam Argyle da yeni ve yaklaşan tüm CSS açılışları hakkında etkileyici bir makale yazdı. Şu an için sürekli olarak kararlı sürümlere odaklanır ve gelecekte yapılacak diğer işleri de göz önünde bulundururum. Web platformunda yeni seriniz bunun için mükemmel bir seri. web.dev bültenine abone olmak, bu içeriği geliştiricilerin gelen kutusu. Bu konuda dahil olmak ve yardım almak isteyen geliştiricilerin de bu çalışmalara destek olmak için Open UI'ya katılması en iyi yollarından biridir.
Yaklaşan önemli güncellemeler
Web deneyimlerinizi oluştururken aklınızda bulundurmanız gereken, yakında yapılacak bir değişiklikle ilgili olarak size önceden haber vermek için geleneğimizi sürdürüyoruz.
Çerezler için maksimum yaşı 400 günle sınırla
- Güncelleme: Çerezler açık bir
Expires/Max-Ageözelliğiyle ayarlandığında, değer artık en fazla 400 gün sonra olacak şekilde sınırlanacak. Önceden bu tür bir sınır yoktu ve çerezlerin süresi gelecekte birkaç bin yıl içinde dolanabiliyordu. Bu sınırın amacı, yaygın kullanım alışkanlıkları ve kullanıcı gizliliğine saygı arasında bir denge kurmaktır. Her 400 günde bir daha sık ziyaret edilen siteler, hizmetin devamlılığını sağlamak için çerezleri yenileyebilir ve kullanıcılar, çerezler olmadan bin yıl boyunca tarayıcıların başında kalmayacağından emin olabilirler. - Tahmini zaman çizelgesi: Chrome 104'te gönderim (2 Ağustos 2022'de kararlı durumda).
- Geliştirici CTA'sı: Geliştiricilerin, çerezleri kullanıcılar tarafından web sitelerini ziyaret ettiklerinde eskisinden daha sık proaktif bir şekilde yenilemeleri gerekebilir. Aksi takdirde, çerezin ilk kez ayarlanmasından 400 gün sonra kullanıcıların oturumu kapatılabilir.
Chrome Dev Insider'ın bu sayısını okumaktan keyif aldığınızı umuyorum. Kaçırdıysanız ilkini burada bulabilirsiniz. Gelecek çeyrekte size daha fazla yenilik sunmak için sabırsızlanıyoruz.
O zamana kadar, Chrome Dev Insider'ın bu sürümü hakkında ne düşündüğünüzü ve bu sürümü iyileştirmek için neler yapabileceğimizi bize bildirin.
Chrome Dev Insider'ın bu sürümü hakkında ne düşünüyorsunuz? Geri bildiriminizi paylaşın.