Topluluktaki ve Chrome'daki yeni ve heyecan verici gelişmelerle ilgili güncellemeleri paylaştığımız Chrome Dev Insider'ın ikinci sayısına hoş geldiniz. Bu, işimize nasıl yaklaştığımızla ilgili içeriden hikayeler içeren yeni bir bölümdür. Ayrıca, dikkat etmeniz gereken en önemli güncellemelerden bazılarına da göz atabilirsiniz.
Ben Chrome Geliştirici İlişkileri Ekibi'nin bir üyesi olarak web.dev ve developer.chrome.com içerik yöneticisi Rachel Andrew. Yirmi yılı aşkın süredir web'de açık web standartları ve CSS'ye odaklanarak çalışıyorum ve CSS Çalışma Grubu'nun bir üyesiyim.
İki ay önce, geliştiricilerin web'i daha hızlı ve daha güçlü hale getirirken kullanıcı bilgilerini güvende ve gizli tutmasına nasıl destek olduğumuzla ilgili en önemli güncellemelerden bazılarını paylaştığımız Google I/O'yu tamamladık.
Dikkat çeken noktalardan biri (ve topluluğun bunu fark etmesine sevindik), ekibin web'de daha fazla CSS ve kullanıcı arayüzü özelliğini desteklemek için yaptığı yoğun çalışmaydı. 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ı perde arkasından anlatacağız. Bu nedenle, Insider'ın bu sayısını sunmaktan heyecan duyuyorum.
Haberlerde
İlk Chrome Dev Insider'da, 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ş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 güçlü bir şekilde odaklanılıyor.
Bu çoğu kişi için yeni bir bilgi olmasa da tarayıcılarda kaydettiğimiz ilerlemeyi görmek heyecan verici.
Geçen ayın başlarında Safari, Kapsayıcı Sorguları, alt ızgara ve flexbox denetleyicisi gibi heyecan verici özellikleri içeren Safari 16.0 Beta sürümünü duyurmuştu. Firefox ve Chrome'un son sürümlerinde birçok heyecan verici özellik ve düzeltme yer aldı. Kararlı ve beta tarayıcılarda öne çıkan özellikleri her ay web platformuna yeni başlayanlar konulu yazı serimde ele alıyorum.
İçeriden bilgi: CSS ve kullanıcı arayüzü geliştiricilerini destekleme
2022, CSS özellikleri açısından heyecan verici bir yıl oldu. Bu nedenle, sizi perde arkasındaki çalışmalara dahil etmenin tam zamanı olduğunu 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 DevTools için DevRel yöneticisi Una Kravets ve CSS ile 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 müdürüyüm. Özellikle yeni CSS ve HTML API'lerine, kullanıcı arayüzü oluşturan geliştiricilere ve tasarımcılara odaklanıyorum. Kapsayıcı Sorguları, Kapsam ve (umarım) dikey ritim 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ı DevRel ekiplerine liderlik ediyorum. Web platformundaki kullanıcı arayüzü mühendislerini desteklemeye odaklanır ve başarılı olmak için ihtiyaç duydukları araçlara sahip olmalarını sağlarız. Etkin değişiklikleri ve geri bildirimleri görmek için CSS API'leri ve HTML bileşenleri ile birlikte Geliştirici Araçları özellikleri de buna dahildir.
Chrome'un kullanıcı arayüzü geliştiricileri için desteği son birkaç yılda hız kazandı. Buraya ulaşmamızın neden bu kadar uzun sürdüğünü düşünüyorsunuz? Karşılaştığınız en büyük zorluklar neler?
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. İlk olarak, kullanıcı arayüzünün platformdaki en büyük sorunlardan biri olarak tanımlandığı 2019'daki MDN DNA anketinden yararlandık. O zamandan beri, MDN ve kendi dahili geliştirici memnuniyeti anketlerimizde verilerimizi rehber olarak kullanmaya devam ediyoruz. Tüm bunların sonucunda, üst düzey yöneticilerin desteğini daha fazla alabildik ve kullanıcı arayüzü alanında en çok istenen geliştirici özelliklerinden bazılarına yönelik mühendislik çalışmalarına öncelik verebildik. Bu özellikler aynı zamanda Compat 2021 ve Interop 2022 gibi girişimlerin odak noktasının büyük bir kısmını oluşturuyor.
Nicole: Üst yönetimden destek almanın yanı sıra bu API'leri geliştiricilere sunmanın doğru yolunu da bulmamız gerekiyordu. Chrome'a ilk katıldığımda bu durumu Katmanlı API'ler (veya kısaca LAPI'ler) adlı bir projede bozmuştum. LAPI'ler, geliştiricilere hazır bileşen deneyimi sunmayı amaçlar. Yine de bu hedefe ulaşmanın harika bir sonuç olduğunu düşünüyorum ancak çok fazla hata yaptık. Öncelikle Toast bildirimleri ve sanal liste üzerinde durduk. Bildirimlerin erişilebilir hale getirilmesi neredeyse imkansızdır ve sanal listeler, doğru şekilde oluşturulması en zor bileşenlerden biridir. Niyetimiz iyiydi ancak geliştiricilere yardımcı olamadığı için projeyi kullanımdan kaldırdık. Zor yoldan öğrenmek zordur ancak her hata, şu anda CSS ve HTML'de yaşanan rönesans sürecini besler.
LAPI'ler hakkında biraz daha konuşalım. Ne oldu?
Nicole: LAPI'ler için web'in, yerel kullanıcı arayüzü oluşturmaya daha yakın bir hazır bileşen geliştirici deneyimine ihtiyacı olduğunu biliyorduk. Tekerleği yeniden icat etmenin geliştiricileri yavaşlattığı açıktı. Kariyerim boyunca oluşturduğum sekmelerin sayısını sayamıyorum. Bununla birlikte, JavaScript'i tarayıcıya göndererek bu sorunu çözmeye çalıştık. Bu işlem çok zordu. Daha önce hiç kimse tarayıcıda JavaScript yayınlamamıştı ve JavaScript'in, tarayıcının oluşturma motorunu destekleyen C++ koduyla nasıl etkileşim kurması gerektiği net değildi. Diğer tarayıcı tedarikçi firmalarının görüşlerini dinledik (Teşekkür ederiz Mozilla!) ve bu yaklaşımdan vazgeçtik. Böylece açık kullanıcı arayüzü ile çok daha iyi bir çözüm bulduk. HTML ve CSS'den yararlanarak esnek ve açıklayıcı çözümler elde ederiz. Beyan niteliğinde olduğu için erişilebilirliği JavaScript ile yapmanın kolay olmayacağı bir şekilde dahil edebiliriz. Bu konudaki gelişmeler beni çok heyecanlandırıyor. Arayüz tasarımında temel olan seçim menüsü, pop-up, ipucu, gezinme, akordeon, sekmeler, bant ve açma/kapatma düğmesi gibi öğeleri 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 de topluluktan öğrendiğimiz bir yer. Çok sayıda faydalı Houdini özelliği vardır ancak bunların çoğu, daha geniş bir kullanım alanı ve destek elde etmek için çok düşük düzeydedir. Düşük düzey API'lerin uygulanmasının, geliştiriciler için zorlukların azalmasını sağlamadığı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 açılış sayfalarını elde etmemize yardımcı oldu. İlerleme durumunu https://ishoudinireadyyet.com/ adresinden takip edebilirsiniz.
Tarayıcılar arası destekten bahsetmişken Interop 2022 ve Open UI gibi girişimlerin topluluk için önemli olumlu sonuçlar sağladığını görüyoruz. Geliştiricilerden neler duyuyorsunuz?
Una: Geliştiricilerden en çok duyduğumuz sorunlardan biri "tasarımın tarayıcılarda aynı şekilde çalışmasını sağlama"dır. Bu sorunu, 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 çözdük. Topluluğumuzdan aldığımız geri bildirimler de son derece olumluydu. Ayrıca, RenderingNG adlı büyük bir yeniden mimari çalışmasıyla bu özelliklerin bazılarını çok daha yüksek performansla kullanıma sunmak mümkün oldu. Geliştiriciler, yıllardır bekledikleri ve üzerinde çalışma yapılmasını istedikleri bu özellikler üzerinde nihayet çalışıldığını ve tarayıcı genelinde kullanıma sunulduğunu görmekten heyecan duyuyor.
Nicole: Topluluktaki heyecanı hissedebiliyorum. Bu videoyu Twitter'da görebilirsiniz. :)
Ekosistemle birlikte çalışmak, geliştiricilerin hayatını kolaylaştırma konusunda elde ettiğimiz tüm başarılar için kritik önem taşıyor. Ekibinizin bu konuda çok çalıştığını biliyorum. Ayrıntıları paylaşabilir misiniz?
Nicole: Öncelikle, geliştiricilerin web'de oluşturduğu projelere hayran kalıyorum. Geliştiriciler, en küçük kitaplıklardan tam çerçevelere kadar harika şeyler inşa ediyor. Bu, harika bir üretici topluluğu. 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. Ayrıca Next, Nuxt ve Gatsby gibi meta çerçeveler. Geçen yıl, Sass, Bootstrap ve Material gibi kullanıcı arayüzü araçları ve çerçeveleriyle de aynısını yapmaya başladık. Gelecek yıl GreenSock ve geliştiricilerin hayatını kolaylaştıran diğer araçlarla birlikte çalışacağımızı umuyorum. GreenSock'tan Cassie Evans'ın Smashing Conference'da yaptığı konuşmayı izledim. Animasyon alanındaki kişilerle çalışma konusunda gerçekten 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 için yapabileceklerimizin sadece çok küçük bir kısmını kullandığımızı düşünüyorum. Kapsayıcı sorguları ve CSS kullanıcı tercihi medya özellikleri gibi yeni API'ler, geliştiricilerin duyarlı tasarımı görme şeklini yeniden tanımlıyor. Geliştiricilerin ve tasarımcıların web sitelerini ziyaret eden kullanıcılarla birlikte çalışabilmelerini sağlayan ortak tasarım deneyimleri de beni heyecanlandırıyor.
Nicole, ekibinizin yol haritasında sırada ne var?
Nicole: Tüm keşifler kullanıma hazır bir ürüne dönüşmez ancak şu anda heyecanlandığım birçok şey var:
Una ilk olarak duyarlı, bileşen tabanlı tasarımı etkinleştirdiğimizden bahsetti. Tasarımcıların koyu mod gibi kullanıcı tercihlerine yanıt vermesi için renk sistemleri tasarlama araçları içerir. Örneğin, OKLCH renk alanı, parlaklığı tonlar arasında tutarlı tutar. Tasarımcılar, renk seçmekten renkler arasındaki ilişkileri tasarlamaya geçerek bulanık görünümlü paletler elde etmez.
Ayrıca, en çok istenen API'lerden bazıları (ör. kapsayıcı sorguları, dönüşümlü katmanlar, üst öğe seçici (:has), kapsamlı stiller ve iç içe yerleştirme) üzerinde çalışıyoruz. Geliştiricilerin, yeniden kullanılabilir bileşenlerle dolu esnek tasarım sistemleri oluşturmak için bunlara ihtiyacı vardır.
Bağlı animasyonlarda kaydırma da eğlenceli bir alan. Steve Gardner'ın demo videosunu çok beğendim. Kaydırma işlemi son derece akıcı ve kaydırırken uçağın hareket ettiği animasyonlar çok hoş. Bu tür içerikler eğlenceli olsa da özellikle erişilebilirlik göz önünde bulundurularak doğru şekilde hazırlanması zor olabilir. Bu nedenle, şu anda bu özellikte 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. Bence tarayıcı bu konuda yardımcı olabilir. Open UI'de; seçim menüsü, pop-up, ipucu, sekmeler, gezinme, akordeon ve açma/kapatma düğmesi gibi bileşenler üzerinde çalışıyoruz. Web'in zaman içinde varsayılan olarak erişilebilir hale gelmesi için bu tarayıcı temel öğelerine erişilebilirliği dahil etmenin nasıl bir etki yaratacağını araştırıyoruz. Geliştiriciler daha karmaşık ve ayrıntılı sorunlara odaklanırken sekmelerin nasıl kullanılacağı gibi temel bilgiler tarayıcı tarafından desteklenebilir. Bu konuyu ayrı bir gönderide ele almamız gerekiyor. O yüzden şimdilik burada duruyorum.
Son olarak, tarayıcılar arasındaki uyumlu çalışmaya yatırım yapmaya devam edeceğiz. Geliştirici deneyimine tutarlılık getirmek için WebKit ve Gecko'daki ekiplerle çalışmak çok keyifliydi. Geliştiricilerin bu özelliği istediklerini net bir şekilde anladık.
Seamless Web ekibinin Shared Element Transitions API'sini henüz incelemediyseniz web için tasarım yapma şeklinizi değiştirecek bir API olduğunu bilmenizi isteriz. Tasarımcıların tasarımlarını fiziksel alanda yönlendirmelerine olanak tanıyan tüm bu küçük geçişler artık sadece mümkün değil, aynı zamanda kolay olacak. Jake Archibald'ın harika bir demosu var.
Standartlar iyi giderse bu yıl dikey ritim özelliğini de kullanıma sunabiliriz. LayoutNG'yi temel alarak birçok özelliğin kilidini açıyoruz.
İkisine de teşekkürler. Web kullanıcı arayüzüne eklenen yeni iyileştirmeler ve özelliklerden tüm topluluğun da bizim kadar heyecan duyduğundan eminim. Henüz öğrenilecek çok şey var. Peki, yolculuğa nereden başlamalı?
Una: I/O'daki Web platformu için yenilikler oturumumuzda, bu yıl kullanıma sunulan özelliklerin çoğunun öne çıkan özellikleri ele alınıyor. Adam Argyle, yeni ve yakında kullanıma sunulacak tüm CSS açılış sayfalarıyla ilgili harika bir makale de yazdı. Şu anda, sürekli olarak kararlı sürümlere odaklanmalı ve ardışık düzende gelen diğer çalışmalardan haberdar olmalısınız. Bu konuda takip edebileceğiniz harika bir kaynak, muhteşem Web platformunda yeni olanlar seriniz. web.dev bültenine abone olarak bu içerikleri geliştiricilerin gelen kutusuna da alabilirsiniz. Tüm bu çalışmalara katılmak ve yardımcı olmak isteyen geliştiriciler için Open UI'ye katılmak, bu çalışmaları desteklemenin en iyi yollarından biridir.
Yakında yapılacak ö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.
Çerezler için max-age değerini 400 günle sınırlayın
- 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ırlandırılacak. Önceden sınırlama yoktu ve çerezlerin süresi gelecekte binlerce yıl sonra dolabilirdi. Bu sınırın amacı, yaygın kullanım kalıpları ile kullanıcı gizliliğine saygı gösterme arasında denge kurmaktır. 400 günden daha sık ziyaret edilen tüm siteler, hizmetin sürekliliğini sağlamak için çerezleri yenileyebilir. Bu sayede kullanıcılar, çerezlerin tarayıcılarında kullanılmadan binlerce yıl boyunca kalmayacağından emin olabilir. - Tahmini zaman çizelgesi: Chrome 104'te kullanıma sunulacaktır (2 Ağustos 2022'de kararlı sürüm).
- Geliştirici CTA'sı: Geliştiricilerin, kullanıcılar web sitelerini ziyaret ettiğinde çerezleri proaktif olarak 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ı beğendiğinizi umuyoruz. İlk bölümü kaçırdıysanız buradan izleyebilirsiniz. Gelecek çeyrekte size daha fazla özellik sunmayı heyecanla bekliyoruz.
O zamana kadar, Chrome Dev Insider'ın bu sayısı hakkındaki düşüncelerinizi ve nasıl daha iyi hale getirebileceğimizi bizimle paylaşın.
Chrome Dev Insider'ın bu sayısı hakkında ne düşünüyorsunuz? Geri bildiriminizi paylaşın.