Chrome Dev Insider'ın ikinci sayısına hoş geldiniz. Burada, topluluktaki ve Chrome'daki yenilikler ve heyecan verici yeniliklerle ilgili güncellemeleri paylaşıyoruz. Bu, çalışmalarımıza yaklaşımımızla ilgili içeriden hikayeler ve dikkat etmeniz gereken en önemli güncellemelerden bazılarına kısa bir bakış sunan yeni bir bölüm.
Ben Rachel Andrew. Chrome Geliştirici İlişkileri ekibinden web.dev ve developer.chrome.com İçerik Yöneticisiyim. Açık web standartlarına ve CSS'ye odaklanarak yirmi yılı aşkın süredir web üzerinde çalışıyorum ve CSS Çalışma Grubu'nun üyesiyim.
İki ay önce Google I/O'yu düzenledik. Burada, kullanıcı bilgilerini gizli ve güvende tutarken web'i daha hızlı ve daha güçlü hale getirmek için geliştiricileri nasıl desteklediğimize dair en önemli güncellemelerden bazılarını paylaştık.
Öne çıkan özelliklerden biri de (topluluğun bunu dikkate almış olmasına sevindik!), ekibin web'de daha fazla CSS ve kullanıcı arayüzü özelliğini desteklemek için yaptığı büyük çalışma. 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ı ele alacağız. Insider'ın bu sayısına ev sahipliği yapmaktan dolayı çok heyecanlıyım.
Haberlerde
İlk Chrome Dev Insider yayınımızda, tarayıcı tedarikçileri ve ekosistem oyuncularının web'e tüm tarayıcılarda desteklenen daha fazla özellik sunmak için iş ortaklığı yaptığı Compat 2021 ve Interop 2022 girişimleri hakkında bazı güncellemeler paylaştık. Tarayıcı uyumsuzluğu, CSS geliştiricilerinin karşılaştığı en büyük zorluklardan biri olduğu için girişimde özellikle CSS'ye odaklanılmıştır.
Bu çoğu kişi için yeni bir gelişme olmasa da tarayıcılar arasında kaydetmiş olduğumuz ilerlemeyi görmek heyecan verici.
Geçen ayın başlarında Safari'nin; Container Sorguları, alt ızgara ve flexbox denetleyicisi gibi heyecan verici özellikleri içeren Safari 16.0 Beta'yı içeren bir bumper sürümünü duyurdu. Firefox ve Chrome'un son sürümlerinde bazı heyecan verici özellikler ve düzeltmeler yer almaktadır. Web platformundaki yeni yayın dizimizde her ay kararlı ve beta tarayıcılardaki önemli noktaları ele alıyorum.
İçeriden bilgiler: CSS ve kullanıcı arayüzü geliştiricilerini destekleme
CSS özellikleri için heyecan verici 2022 yılı yaklaşırken sizi kamera arkasına davet etmek için iyi bir zaman olduğunu düşündük. Web Kullanıcı Arayüzü ve Geliştirici Araçları DevRel lideri Una Kravets ve CSS ile 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. Bize biraz kendinizden bahseder misiniz?
Nicole: Chrome'da Web Kullanıcı Arayüzü için ürün yöneticisiyim. Özellikle yeni CSS ve HTML API'lerine ve kullanıcı arayüzü oluşturan geliştiriciler ve tasarımcılara odaklanıyorum. Burada Kapsayıcı Sorguları, Kapsam ve dikey ritim gibi bazı önemli API'lerin kullanıma sunulmasıyla heyecan verici bir alandır.
Una: Web Kullanıcı Arayüzü ve Geliştirici Araçları DevRel ekiplerini yönetiyorum. Web platformunda kullanıcı arayüzü mühendislerini desteklemeye ve başarılı olmak için ihtiyaç duydukları araçlara sahip olduklarından emin olmaya odaklanıyoruz. CSS API'leri ve HTML bileşenlerinin yanı sıra etkin değişiklikleri ve geri bildirimleri görmek için gerekli olan Geliştirici Araçları özellikleri de bu kapsamda yer alır.
Chrome'un kullanıcı arayüzü geliştiricilerine yönelik desteği son birkaç yılda büyük bir ivme kazandı. Sizce buraya varmam 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 bazı çalışmalar yapmamız gerekiyordu. 2019'da MDN DNA anketini başlattık. Bu ankette, kullanıcı arayüzünün platformdaki en önemli sorunlu noktalardan biri olduğu belirlendi. O zamandan beri MDN ve kendi şirket içi geliştirici memnuniyeti anketlerimiz aracılığıyla verileri kılavuz olarak kullanmaya devam ettik. Tüm bunların sonucunda, yönetim ekibinin daha derin bir destek almasını sağladık. Ayrıca, kullanıcı arayüzü alanında en çok talep edilen geliştirici özelliklerinden bazılarıyla ilgili mühendislik çalışmalarına öncelik vermeyi başardık. Ayrıca bu özellikler, Compat 2021 ve Interop 2022 gibi girişimlerde odak noktasının büyük kısmını oluşturuyor.
Nicole: Yöneticilerin desteğini almanın yanı sıra bu API'leri geliştiricilere sunmanın doğru yolunu bulmamız gerekiyordu. Chrome'a ilk katıldığımda Katmanlı API'ler (veya kısaca LAPI'ler) adlı bir projede bu işi çözmüştüm. LAPI'lerin amacı, geliştiricilere bileşen deneyimi sunmaktı. Bence hâlâ bunun şu an için mükemmel bir sonuç olduğunu düşünüyorum, ancak biz de çok hata yaptık. İlk olarak Bildirim Bildirimleri ve Sanal Liste konularına odaklandık. Kısa özetler erişilebilir hale getirmek neredeyse imkansızdır. Sanal bir liste ise doğru yapılması en zor bileşenlerden biridir. Niyetlerimiz iyiydi ancak geliştiricilere yardımcı olamadı. Bu nedenle projeyi sonlandırdık. Zor şekilde öğrenmek zor olsa da her hata, şu anda gerçekleşmekte olan CSS ve HTML için rönesansın yükselmesi anlamına geliyor.
LAPI'lerden biraz daha bahsedelim. Sorun nedir?
Nicole: LAPI'ler için, web'in yerel kullanıcı arayüzü oluşturmaya daha yakın bir bileşen geliştirici deneyimine ihtiyacı olduğunu biliyorduk. Çarkı yeniden icat etmenin geliştiricileri alıkoyduğu çok açıktı. Kariyerimde oluşturduğum sekme sayısına inanamıyorum! Bununla birlikte, çok zor olan tarayıcı aracılığıyla JavaScript göndererek bu sorunu çözmeye çalıştık. Daha önce hiç kimse tarayıcıya JavaScript göndermemişti ve tarayıcının oluşturma motorunu çalıştıran C++ koduyla nasıl etkileşimde bulunması gerektiği de açık değildi. Diğer tarayıcı tedarikçilerini (teşekkür ederiz Mozilla!) dinledik ve bu yaklaşımdan uzaklaştık. Dolayısıyla, Open UI ile ç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 yapılması kolay olmayacak bir şekilde katabiliriz. Bu işin gidişatı konusunda gerçekten çok heyecanlıyım. Gerçekten temel kullanıcı arayüzü tasarım kalıpları olan seçme menü, pop-up, araç ipucu, nav, akordeon, sekmeler, atlı karınca ve açma/kapatma özelliklerini desteklemek için çalışıyoruz.
Çok şey öğrendik. Bu alanda CSS Houdini gibi başka girişimler olduğunu da biliyorum. Hikaye nedir?
Una: Evet CSS Houdini, topluluktan bilgi edindiğimiz bir başka yer. Çok sayıda faydalı Houdini özelliği vardır ancak bunların çoğu, daha geniş çapta benimsenemeyecek ve desteklenemeyecek kadar düşük düzeydeydi. Alt düzey API'leri uygulamanın, geliştiricilerin karşılaştığı zorlukları azaltmayacağını fark ettik. Bunun yerine, daha üst düzey çözümlere ve ihtiyaçlara odaklanmak, tarayıcılar arası desteğin ve ekosistemde ibreyi oluşturması için gereken sonuca ulaşmaya yardımcı oldu. Şu anda ilerlemeyi https://ishoudinireadyyet.com/ adresinde takip ediyoruz.
Tarayıcılar arası destekten bahsetmişken, Interop 2022 ve Open UI gibi girişimler, topluluk için önemli ölçüde olumlu sonuçlar veriyor gibi görünüyor. Geliştiricilerden ne düşünüyorsunuz?
Una: Geliştiricilerden duyduğumuz en önemli sorunlardan biri, "tasarımın tüm tarayıcılarda aynı şekilde çalışmasını sağlamak". En çok istenen geliştirici özelliklerinden bazılarına öncelik vermek ve bunları kullanıma sunmak için diğer tarayıcı tedarikçileriyle birlikte çalışarak bu sorunun üstesinden geldik. Topluluktan aldığımız geri bildirimler son derece olumlu. Buna ek olarak, RenderingNG adı verilen kapsamlı bir yeniden mimari çalışmasıyla bu özelliklerden bazılarının çok daha etkili bir şekilde kullanılmasını sağlayabilirsiniz. Geliştiriciler, uzun süredir merakla beklenen bu özelliklerin nihayet üzerinde çalışılmasını ve farklı tarayıcılarla kullanıma sunulmasını heyecanla bekliyor.
Nicole: Toplulukta yaşanan coşku gözle görülür. Bağlantıyı Twitter'da görebilirsiniz. :)
Ekosistemle çalışmanın, geliştiricilerin hayatlarını kolaylaştırma konusundaki tüm başarılarımızda son derece önemli olduğu kanıtlandı. Ekibinizin orada çok çalıştığını biliyorum. Biraz bilgi vermek ister misiniz?
Nicole: İlk olarak, geliştiricilerin web'de oluşturdukları projelere hayran kaldım. Geliştiriciler en küçük kitaplıktan eksiksiz çerçevelere kadar harika şeyler oluşturuyorlar. İçerik üreticilerin yer aldığı muhteşem bir topluluk. Chrome, bu projelerle daha güçlü bir bağ kurmak için de birç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 (ör. Next, Nuxt ve Gatsby). Geçen yıl aynı şeyi Sass, Bootstrap ve Material gibi kullanıcı arayüzü araçları ve çerçeveleriyle yapmaya başladık. Önümüzdeki yıl GreenSock ve geliştiricilerin hayatlarını kolaylaştıracak diğer araçlarla işbirliği yapabileceğimizi umuyorum. Az önce GreenSock'tan Cassie Evans'ın Smashing Conference'ta konuştuğunu gördüm. Animasyon alanında insanlarla çalışmak beni çok 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, özelleştirilebilir web deneyimleri için yapabileceklerimizin sadece çok küçük olduğunu düşünüyorum. Kapsayıcı sorguları ve CSS kullanıcı tercihi medya özellikleri gibi yeni API'ler, geliştiricilerin duyarlı tasarımı görüntüleme şeklini yeniden tanımlıyor. 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 de beni ayrıca heyecanlandırıyor.
Peki Nicole, ekibinizin yol haritasında bundan sonra ne var?
Nicole: Tüm keşifler taşınabilir bir şeye dönüşmüyor ama şu anda beni heyecanlandıran birçok şey var:
İlk olarak, duyarlı, bileşen tabanlı tasarımı etkinleştiriyoruz. Tasarımcıların koyu mod gibi kullanıcı tercihlerine yanıt verebilmeleri için renk sistemleri tasarlamaya yönelik araçlar içerir. Örneğin OKLCH renk alanı, farklı tonlardaki parlaklığın tutarlı olmasını sağlar. Tasarımcılar, bulanık görünen paletlerle karşılaşmadan renk seçiminden renkler arasındaki ilişkileri tasarlamaya geçebilir.
Ayrıca kapsayıcı sorguları, basamaklı katmanlar, üst seçici (:has), kapsamlı stiller ve iç içe yerleştirme gibi en çok talep edilen API'lerin bazıları üzerinde de çalışıyoruz. Geliştiriciler yeniden kullanılabilir bileşenlerle dolu esnek tasarım sistemleri oluşturabilmek için bunlara ihtiyaç duyar.
Kaydırma bağlantılı animasyonlar, başka bir eğlenceli alandır. Steve Gardner'ın demosunu çok beğendim. Kaydırma sırasında tetiklenen havalı uçak animasyonları ve akıcı bir kaydırma deneyimi var. Bunlar eğlenceli olsa da özellikle erişilebilirliği göz önünde bulundururken bunları doğru şekilde yapmak zor olabilir. Bu nedenle, şu anda bu özellik için erişilebilirlikle ilgili kullanıcı testleri yapıyoruz.
Şahsen beni en çok heyecanlandıran şey, yerleşik web kullanıcı arayüzü kontrolleri. Geliştiriciler aynı sekme kümesini tekrar tekrar oluşturmaya devam ediyorlar. Bence tarayıcının yardımcı olabileceğini düşünüyorum. Open UI bölümünde seçmeli menü, 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. Böylece geliştiriciler daha karmaşık ve incelikli sorunlara odaklanabilirken, sekmeler sekmesi gibi temel özellikler de tarayıcı tarafından desteklenebilir. Bunun için ayrı bir yayın gerekiyor olabilir. O nedenle şimdilik burada duracağım.
Son olarak, tarayıcılar arasında birlikte çalışabilirlik özelliklerine yatırım yapmaya devam edeceğiz. Geliştirici deneyiminde tutarlılığı sağlamak için WebKit ve Gecko'daki kişilerle çalışmak harikaydı. Geliştiricilerin bunu istediklerini net bir şekilde duyduk.
Elbette, daha önce görmediyseniz, Sorunsuz Web Ekibi'nin Shared Element Transitions API'si kullanıcıların web için tasarım yapma biçimini değiştirecek. Tasarımcıların tasarımlarını fiziksel alan içinde uyarlamasına olanak tanıyan tüm bu ince, küçük geçişler mümkün olacak, aynı zamanda kolay olacak. Jake Archibald'ın muhteşem bir demosu var.
Standartlar iyi giderse bu yılki dikey ritme de göz atabiliriz. Birçok özelliğin kilidini açan LayoutNG'yi temel alan geliştirmeler yapabiliyoruz.
Her ikisine de teşekkür ederiz. Bizim gibi tüm topluluğun web kullanıcı arayüzü dünyasına gelen iyileştirmeler ve özelliklerdeki yeni hızları görmekten heyecan duyduğundan eminim. Daha da öğrenmeniz gereken çok şey var. Onların yolculuğuna nereden başlamalısın sence?
Una: I/O etkinliğindeki Web platformundaki yenilikler oturumumuz, bu yıl kullanıma sunulan özelliklerin birçoğuyla ilgili öne çıkan noktaları ele alıyor. Adam Argyle, yeni ve yakında kullanıma sunulacak tüm CSS'ler hakkında harika bir makale de yazdı. Şu an için devamlı olarak kararlı sürümlere odaklanıyor ve yakında tamamlanması gereken diğer çalışmaların farkındayım. Web platformunda yeni olan muhteşem seriniz, bunun için harika bir seridir. web.dev bültenine abone olduğunuzda da bu içerik geliştiricilerin gelen kutusuna taşınır. Tüm bunlarda yer almak ve yardım almak isteyen geliştiriciler için Open UI'a katılmak, bu çalışmaları desteklemenin en iyi yollarından biridir.
Yakında gerçekleşecek önemli güncellemeler
Geleneğimizi, web deneyimlerinizi oluştururken aklınızda bulundurmanız gereken yeni bir değişiklik hakkında size önceden haber vermek için devam ettiriyoruz.
Çerezler için maksimum süreyi 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 olacak şekilde sınırlandırılacak. Daha önce sınır yoktu ve çerezlerin süresi, gelecekte binlerce yıl sonra sona erebilirdi. Bu sınırlamanın amacı, yaygın kullanım modelleri ile kullanıcı gizliliğine saygı arasında bir denge kurmaktır. 400 günde bir daha sık ziyaret edilen tüm siteler, hizmetin devamlılığını sağlamak için çerezleri yenileyebilir. Kullanıcılar ise çerezlerin bin yıl boyunca tarayıcılarında kullanılmadığı zaman kalmayacağından emin olabilir. - Tahmini zaman çizelgesi: Chrome 104 sürümünde gönderim (2 Ağustos 2022 itibarıyla kararlı).
- Geliştirici CTA'sı: Geliştiricilerin, kullanıcıların web sitelerini ziyaret ettikleri zamana kıyasla çerezleri proaktif olarak daha sık yenilemeleri gerekebilir. Aksi takdirde, kullanıcılar çerez oluşturulduktan 400 gün sonra çıkış yapabilir.
Chrome Dev Insider'ın bu sayısını okumaktan keyif aldığınızı umuyoruz. Kaçırdıysanız işte ilki. Önümüzdeki çeyrekte daha fazla özellik sunmayı umuyoruz.
O zamana kadar, Chrome Dev Insider'ın bu sürümü hakkındaki düşüncelerinizi ve bunu daha iyi hale getirmek için neler yapabileceğimizi bize bildirin.
Chrome Dev Insider'ın bu sayısı hakkında ne düşünüyorsunuz? Geri bildiriminizi paylaşın.