Toplulukta ve Chrome'da yeni ve heyecan verici gelişmelerle ilgili güncellemeleri paylaştığımız Chrome Dev Insider'ın ikinci sayısına hoş geldiniz. Bu bölümde, işimize nasıl yaklaştığımızla ilgili içeriden bilgiler ve dikkat etmeniz gereken en önemli güncellemelerden bazılarına dair kısa bir bakış sunuyoruz.
Ben Rachel Andrew. Chrome Geliştirici İlişkileri Ekibi'nin bir üyesi olarak web.dev ve developer.chrome.com sitelerinin içerik yöneticisiyim. Yirmi yılı aşkın süredir web üzerinde çalışıyorum. Açık web standartlarına ve CSS'ye odaklanıyorum ve CSS Çalışma Grubu'nun üyesiyim.
İki ay önce, Google I/O'yu tamamladık. Bu etkinlikte, geliştiricilerin web'i daha hızlı ve güçlü hale getirmelerine yardımcı olurken kullanıcı bilgilerini güvende ve gizli tutma konusunda desteklemek için yaptığımız en önemli güncellemelerden bazılarını paylaştık.
En dikkat çekici noktalardan biri (topluluğun da bu konuya dikkat ettiğini görmek bizi mutlu etti) ekibin web'de daha fazla CSS ve kullanıcı arayüzü özelliği sunmak için yaptığı büyük çalışmalardır. Chrome Dev Insider'ın bu sayısında, bu çalışmanın arkasında kimlerin olduğunu, CSS ve kullanıcı arayüzü geliştiricilerini desteklemek için nasıl çalıştığımızı ve gelecekte neler olacağını açıklayacağız. Bu nedenle, Insider'ın bu sayısına ev sahipliği yapmaktan heyecan duyuyorum.
Haberlerde
İlk Chrome Dev Insider'da, tarayıcı satıcılarının ve ekosistemdeki oyuncuların tüm tarayıcılarda desteklenen daha fazla özelliği web'e getirmek için iş ortaklığı yaptığı Compat 2021 ve Interop 2022 girişimleriyle ilgili bazı güncellemeleri paylaşmıştık. Tarayıcı uyumsuzluğu, CSS geliştiricilerinin karşılaştığı en büyük zorluklardan biri olduğundan bu girişimde CSS'ye büyük önem veriliyor.
Bu durum çoğu kullanıcı için yeni olmasa da tarayıcılarda kaydettiğimiz ilerlemeyi görmek heyecan verici.
Geçtiğimiz ayın başlarında Safari, büyük bir sürüm duyurusu yaptı. Safari 16.0 Beta'da Container Queries, subgrid ve flexbox inspector gibi heyecan verici özellikler yer alıyor. Firefox ve Chrome'un son sürümlerinde bir dizi heyecan verici özellik ve düzeltme yer alıyor. Her ay Web platformunda yeni başlıklı gönderi serimde kararlı ve beta tarayıcılardaki önemli yenilikleri ele alıyorum.
İçeriden bilgi: CSS ve kullanıcı arayüzü geliştiricilerini destekleme
2022'nin CSS özellikleri açısından heyecan verici bir yıl olduğunu düşünerek sizi sahne arkasına götürmenin iyi bir fikir olacağını düşündük. Chrome'un kullanıcı arayüzü geliştiricilerini destekleme yolculuğu hakkında konuşmak için Web kullanıcı arayüzü ve geliştirici araçları için geliştirici ilişkileri yöneticisi Una Kravets ve CSS ve HTML API'lerine odaklanan Web kullanıcı arayüzü ürün yöneticimiz Nicole Sullivan ile bir araya geldik.
İkinizle başlayalım. Kendinizden biraz daha bahseder misiniz?
Nicole: Chrome'daki web kullanıcı arayüzünün ürün yöneticisiyim. Özellikle yeni CSS ve HTML API'lerine, ayrıca kullanıcı arayüzü oluşturan geliştiriciler ve tasarımcılara odaklanıyorum. Container Queries, Scope ve (umarız!) vertical rhythm gibi gerçekten önemli API'lerin kullanıma sunulduğu heyecan verici bir alan.
Una: Web kullanıcı arayüzü ve Geliştirici Araçları geliştirici ilişkileri ekiplerine liderlik ediyorum. Web platformundaki kullanıcı arayüzü mühendislerini desteklemeye odaklanıyor ve başarılı olmaları için ihtiyaç duydukları araçlara sahip olmalarını sağlıyoruz. Etkin değişiklikleri ve geri bildirimleri görmek için Geliştirici Araçları özelliklerinin yanı sıra CSS API'leri ve HTML bileşenleri de buna dahildir.
Chrome'un kullanıcı arayüzü geliştiricilerine verdiği destek, son birkaç yılda hız kazandı. Sizce buraya gelmemiz neden bu kadar uzun sürdü? 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 biraz çalışmamız gerekti. Platformdaki en büyük sorunlardan biri olarak kullanıcı arayüzünü belirleyen 2019'daki MDN DNA anketinden başladık. O zamandan beri de MDN'de ve kendi dahili geliştirici memnuniyeti anketlerimizde yol göstericimiz olarak verileri kullanmaya devam ediyoruz. Tüm bunların sonucunda, liderlikten daha fazla destek almayı başardık ve Compat 2021 ile Interop 2022 gibi girişimlerin odak noktasını oluşturan, kullanıcı arayüzü alanındaki en çok istenen geliştirici özelliklerinden bazıları için mühendislik çalışmalarına öncelik verebildik.
Nicole: Yönetimin desteğini almanın yanı sıra bu API'leri geliştiricilere ulaştırmanın doğru yolunu da bulmamız gerekiyordu. Chrome'a ilk katıldığımda Layered APIs (kısaca LAPIs) adlı bir projede bu durumu karıştırmıştım. LAPIs, geliştiricilere hazır bileşen deneyimi sunmayı amaçlıyordu. Bu sonucun hâlâ harika olduğunu düşünüyorum ancak çok hata yaptık. Öncelikle geçici bildirimlere ve sanal listeye odaklandık. Bildirimlerin erişilebilir hale getirilmesi neredeyse imkansızdır ve sanal liste, doğru şekilde oluşturulması en zor bileşenlerden biridir. Niyetimiz iyi olsa da bu proje geliştiricilere yardımcı olmuyordu. Bu nedenle projeyi sonlandırdık. Zor yoldan öğrenmek zordur ancak her hata, şu anda gerçekleşmekte olan CSS ve HTML'nin yeniden doğuşunu tetiklemektedir.
LAPIs hakkında biraz daha konuşalım. Ne oldu?
Nicole: LAPIs için web'in, yerel kullanıcı arayüzü oluşturmaya daha yakın olan, hazır bir bileşen geliştirici deneyimine ihtiyacı olduğunu biliyorduk. Ayrıca, geliştiricilerin sıfırdan bir şeyler oluşturmaya çalışmasının onları geride bıraktığı açıktı. Kariyerimde kaç sekme oluşturduğumu sayamam bile. Bununla birlikte, JavaScript'i tarayıcıyla birlikte göndererek bu sorunu çözmeye çalıştık ancak bu çok zordu. Daha önce tarayıcıda JavaScript'i kimse kullanmamıştı ve tarayıcının oluşturma motoruna güç veren C++ koduyla nasıl etkileşimde bulunması gerektiği net değildi. Diğer tarayıcı satıcılarını (teşekkürler Mozilla!) dinledik ve bu yaklaşımdan vazgeçtik. Böylece Open UI ile çok daha iyi bir çözüm bulabildik. HTML ve CSS'yi kullanarak esnek ve bildirimsel çözümler elde ederiz. Bildirimsel olduğu için erişilebilirliği JavaScript ile yapmak kadar kolay olmayacak bir şekilde yerleştirebiliriz. Bu özelliklerin geleceği konusunda çok heyecanlıyım. Gerçekten de temel kullanıcı arayüzü tasarım kalıpları olan selectmenu, popup, tooltip, nav, accordion, tabs, carousel ve toggle'ı desteklemek için çalışıyoruz.
Bu süreçte pek çok şey öğrendik. Bu alanda CSS Houdini gibi başka girişimler olduğunu da biliyorum. Hikaye nedir?
Una: Evet, CSS Houdini de topluluktan öğrendiğimiz bir başka konu. Birçok faydalı Houdini özelliği olsa da bunların çoğu, daha geniş bir şekilde benimsenip desteklenmek için çok düşük seviyeliydi. Düşük seviyeli API'lerin uygulanmasının geliştiriciler için sürtünmeyi azaltmadığını fark ettik. Bunun yerine, daha üst düzey çözümlere ve ihtiyaçlara odaklanmak, tarayıcılar arası destek ve ekosistemde ilerleme kaydetmek için gerekli olan açılışları sağlamaya yardımcı oldu. Şu anda https://ishoudinireadyyet.com/ adresinden ilerleme durumunu takip ediyoruz.
Tarayıcılar arası destekten bahsetmişken Interop 2022 ve Open UI gibi girişimlerin topluluk için önemli olumlu sonuçlar sağladığı görülüyor. Geliştiricilerden neler duyuyorsunuz?
Una: Geliştiricilerden duyduğumuz en büyük sorunlardan biri "tasarımın tarayıcılar arasında aynı şekilde çalışmasını sağlamak". Bu sorunu çözmek için diğer tarayıcı sağlayıcılarla birlikte çalışarak en çok istenen geliştirici özelliklerinden bazılarını önceliklendirdik ve kullanıma sunduk. Topluluktan aldığımız geri bildirimler de son derece olumlu oldu. Ayrıca, RenderingNG adlı büyük bir yeniden mimarilendirme çalışması sayesinde bu özelliklerin bazılarını çok daha performanslı bir şekilde kullanmak mümkün hale geldi. Geliştiriciler, yıllardır istedikleri ve uzun süredir bekledikleri bu özelliklerin nihayet üzerinde çalışılmasından ve tarayıcılar arası kullanıma sunulmasından heyecan duyuyor.
Nicole: Toplulukta heyecan dorukta. Bu bilgiyi Twitter'da görebilirsiniz. :)
Ekosistemle çalışmak, geliştiricilerin hayatını kolaylaştırma konusunda elde ettiğimiz tüm başarılar için kritik öneme sahip oldu. Ekibinizin bu konuda çok çalıştığını biliyorum. Ayrıntıları paylaşmak ister misiniz?
Nicole: Öncelikle, geliştiricilerin web'de oluşturduğu projeler beni sürekli olarak hayran bırakıyor. Geliştiriciler, en küçük kitaplıklardan tam teşekküllü çerçevelere kadar inanılmaz şeyler inşa ediyor. Bu, üreticilerden oluşan muhteşem bir topluluktur. Chrome, bu projelerle daha fazla bağlantı kurmak için çeşitli adımlar atıyor.
Örneğin, birkaç yıl önce React ve Angular gibi JavaScript çerçeveleriyle çalışmaya başladık. Meta çerçeveler (ör. Next, Nuxt ve Gatsby) Geçen yıl, Sass, Bootstrap ve Material gibi kullanıcı arayüzü araçları ve çerçeveleri için de aynı şeyi yapmaya başladık. Umarım önümüzdeki yıl GreenSock ve geliştiricilerin hayatını kolaylaştıran diğer araçlarla işbirliği yapabiliriz. GreenSock'tan Cassie Evans'ın Smashing Conference'ta yaptığı konuşmayı izledim ve animasyon alanındaki kişilerle çalışmak konusunda çok heyecanlandım.
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, özelleştirilebilir web deneyimleri konusunda yapabileceklerimizin sadece çok küçük bir kısmını yaptığımızı düşünüyorum. Kapsayıcı sorguları ve CSS kullanıcı tercihi medya özellikleri gibi yeni API'ler, geliştiricilerin duyarlı tasarıma bakış açısını yeniden tanımlıyor. Ayrıca, geliştiricilerin ve tasarımcıların web sitelerini ziyaret eden kullanıcılarla birlikte çalışabilmesini sağlayan ortak tasarım deneyimlerinden de heyecan duyuyorum.
Nicole, ekibinizin yol haritasında sırada ne var?
Nicole: Keşiflerin hepsi kullanıma hazır ürünlere dönüşmüyor ancak şu anda beni çok heyecanlandıran birçok şey var:
Una, ilk konuya değindi. 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 uzayı, parlaklığı tonlar arasında tutarlı tutar. Tasarımcılar, renk seçme işleminden renkler arasındaki ilişkileri tasarlamaya geçebilir ve sonuçta bulanık görünümlü paletler elde etmez.
Ayrıca, en çok istenen API'lerden bazıları üzerinde de çalışıyoruz. Bunlar arasında kapsayıcı sorguları, basamaklı katmanlar, üst seçici (:has), kapsamlı stiller ve iç içe yerleştirme yer alıyor. Geliştiriciler, yeniden kullanılabilir bileşenlerle dolu esnek tasarım sistemleri oluşturmak için bunlara ihtiyaç duyar.
Bağlı animasyonları kaydırma da eğlenceli bir alandır. Steve Gardner'ın demosunu çok beğendim. Kaydırma işlemi çok akıcı ve kaydırma sırasında tetiklenen harika uçak animasyonları var. Bu tür içerikler eğlenceli olsa da özellikle erişilebilirlik açısından doğru şekilde oluşturmak zor olabilir. Bu nedenle, özellik üzerinde erişilebilirlik için kullanıcı testi yapıyoruz.
Şahsen en çok heyecanlandığım özellik, yerleşik web kullanıcı arayüzü kontrolleri. Geliştiriciler aynı sekme grubunu tekrar tekrar oluşturuyor. Tarayıcının bu konuda yardımcı olabileceğini düşünüyorum. Open UI'da selectmenu, popup, tooltip, tabs, nav, accordion ve toggle gibi bileşenler üzerinde çalışıyoruz. Erişilebilirliği bu tarayıcı temel öğelerine dahil etmenin nasıl bir görünüm oluşturacağını araştırıyoruz. Böylece web, zaman içinde varsayılan olarak erişilebilir hale gelebilir. Böylece geliştiriciler daha karmaşık ve ayrıntılı sorunlara odaklanabilirken sekmelerin nasıl kullanıldığı gibi temel konular tarayıcı tarafından desteklenebilir. Bu konu muhtemelen ayrı bir gönderi gerektiriyor. O yüzden şimdilik burada duracağım.
Son olarak, tarayıcılar arasındaki birlikte çalışabilirlik özelliğine yatırım yapmaya devam edeceğiz. Geliştirici deneyiminde tutarlılık sağlamak için WebKit ve Gecko'daki kişilerle çalışmak harika oldu. Geliştiricilerin bu özelliği istediğini net bir şekilde duyduk.
Ayrıca, Seamless Web ekibinin Shared Element Transitions API'si, web için tasarım yapma şeklini değiştirecek. Tasarımcıların tasarımlarını fiziksel alanda yönlendirmesine olanak tanıyan tüm bu küçük geçişler yalnızca mümkün olmakla kalmayacak, aynı zamanda kolay da olacak. Jake Archibald'ın harika bir demosu var.
Standartlar iyi giderse bu yıl dikey ritmi bile inceleyebiliriz. LayoutNG'nin üzerine inşa edebiliyoruz. Bu da birçok özelliğin kilidini açıyor.
İkinize de teşekkür ederim. Tüm topluluğun, bizim gibi, web kullanıcı arayüzüne gelecek iyileştirmeleri ve özellikleri heyecanla beklediğinden eminim. Öğrenilecek çok şey var. Bu nedenle, yolculuğa nereden başlamak gerektiğini düşünüyorsunuz?
Una: I/O'daki Web platformunda yenilikler oturumumuzda bu yıl kullanıma sunulan birçok özelliğin öne çıkan noktaları ele alınıyor. Adam Argyle da yeni ve yakında kullanıma sunulacak tüm CSS giriş sayfaları hakkında harika bir makale yazdı. Şimdilik kararlı sürümlere odaklanıp diğer çalışmaların da devam ettiğini bilmeniz yeterli olacaktır. Bu konuda, Web platformundaki yenilikler adlı harika serinizi takip edebilirsiniz. web.dev bültenine abone olan geliştiriciler de bu içeriği gelen kutularında görebilir. Tüm bu çalışmalara dahil olmak ve yardımcı olmak isteyen geliştiriciler için Open UI'a katılmak, bu çalışmayı desteklemenin en iyi yollarından biridir.
Yaklaşan önemli güncellemeler
Web deneyimlerinizi oluştururken göz önünde bulundurmanız gereken, yakında yapılacak bir değişiklik hakkında sizi bilgilendirme geleneğimizi sürdürüyoruz.
Çerezlerin maksimum geçerlilik süresini 400 günle sınırlayın
- Güncelleme: Çerezler açık bir
Expires/Max-Ageözelliğiyle ayarlandığında değer artık gelecekteki 400 günle sınırlanacak. Daha önce herhangi bir sınır yoktu ve çerezlerin geçerlilik süresi binlerce yıl sonra sona erebiliyordu. Bu sınırlamanın amacı, yaygın kullanım kalıpları ile kullanıcı gizliliğine saygı arasında bir denge kurmaktır. 400 günde bir ziyaret edilen tüm siteler, hizmetin devamlılığını sağlamak için çerezleri yenileyebilir. Böylece kullanıcılar, çerezlerin binlerce yıl boyunca tarayıcılarında kullanılmadan kalmayacağından emin olabilir. - Tahmini zaman çizelgesi: Chrome 104'te (2 Ağustos 2022'de kararlı sürüm) kullanıma sunulacak.
- Geliştirici CTA'sı: Geliştiricilerin, kullanıcılar web sitelerini ziyaret ettiğinde çerezleri eskisinden daha sık yenilemesi gerekebilir. Aksi takdirde, kullanıcıların oturumu çerez ilk ayarlandıktan 400 gün sonra kapatılabilir.
Chrome Dev Insider'ın bu sayısını keyifle okuduğunuzu umuyoruz. Kaçırdıysanız ilk bülteni buradan okuyabilirsiniz. Önümüzdeki çeyrekte daha fazla yenilik sunmayı heyecanla bekliyoruz.
O zamana kadar Chrome Dev Insider'ın bu sürümü hakkındaki düşüncelerinizi ve daha iyi hale getirmek için neler yapabileceğimizi bizimle paylaşın.
The Chrome Dev Insider'ın bu sayısı hakkında ne düşünüyorsunuz? Geri bildiriminizi paylaşın.