Geliştirme iş akışınız için araçlar oluşturmak amacıyla, Web Platformu Kontrol Paneli ve bu panelin HTTP API'sini sorgularak temel düzeye ulaşan özelliklerle ilgili verileri nasıl alabileceğiniz hakkında bilgi edinin.

Core Web Vitals'ın öneminin giderek artmasıyla site sahipleri ve geliştiriciler performansa ve önemli kullanıcı deneyimlerine gittikçe daha fazla odaklanıyor. Google, sayfaları değerlendirmenize, optimize etmenize ve izlemenize yardımcı olacak birçok araç sağlar ancak farklı veri kaynakları ve bunları etkili bir şekilde kullanma konusunda kullanıcıların kafası sıkılır. Bu kılavuzda çeşitli araçların bir arada bulunduğu bir iş akışı önerilmiş ve geliştirme sürecinde bu araçların nerede ve nasıl anlamlı olduğu açıklığa kavuşturulmuştur.

Şubat 2025'te Baseline ile ilgili çeşitli gelişmeler hakkında bilgi edinin.

ruby-align artık Temel'in bir parçası

Yayınlanma tarihi: 20 Şubat 2025 Büyük yapay zeka modellerini güvenilir bir şekilde indirmek zor bir iştir. Kullanıcılar internet bağlantılarını kaybederse veya web sitenizi ya da web uygulamanızı kapatırsa kısmen indirilen model dosyalarını kaybeder

rel=prefetch kaynak ipucu ve bu ipucunun nasıl kullanılacağı hakkında daha fazla bilgi edinin.

Düzen kaymalarını nasıl tanımlayıp düzelteceğinizi öğrenin.

Cumulative Layout Shift (CLS), kullanıcıların sayfa içeriğindeki ani değişimlerle ne sıklıkta karşılaştıklarını ölçen bir metriktir. Bu kılavuzda, boyut veya dinamik içerik barındırmayan resimler ve iframe'ler gibi CLS'nin yaygın nedenlerini optimize etmeyi ele alacağız.

CSS scrollbar-color ve scrollbar-gutter, tüm büyük tarayıcı motorlarına eklendi. Bu sayede, bu özellikler yeni olarak Temel düzeyde kullanıma sunuldu.

WasmFS ve Emscripten'deki mimalloc özelliği, ayırma ve G/Ç performansı konusunda çok yardımcı olabilir. Bu kılavuzda, bu özelliklerin bazı durumlarda hızın 10 kat veya daha fazla artmasına nasıl yol açabileceği gösterilmektedir.

İlk sayısında bu Baseline aylık özeti, Ocak 2025'te hem Google'da hem de web geliştirici topluluğunda Baseline'da yaşananları kapsamaktadır.

WebAssembly Atık Toplama ve Wasm son çağrı optimizasyonları artık tüm büyük tarayıcı motorlarında kullanıma sunuldu. Bu sayede, bu optimizasyonlar yeni Temel düzeyde kullanılabilir hale geldi.

Bu yayında Largest Contentful Paint (LCP) metriği tanıtılmakta ve bu metriğin nasıl ölçüleceği açıklanmaktadır.

Promise.try artık tüm büyük tarayıcı motorlarında kullanıma sunuldu. Bu sayede, yeni bir temel özellik olarak kullanılabilir.

Kısa açıklama

Yayınlanma tarihi: 13 Ocak 2024 Klasik makine öğrenimi modelleri ve daha yeni büyük dil modelleri (LLM'ler) ile yapay zeka kullanarak oluşturabileceğiniz çok sayıda muhteşem proje var. LLM'ler sayesinde bilgisayarlar yeni içerikler oluşturabilir,

Yayınlanma tarihi: 13 Ocak 2024 Bu makale, LLM'ler ve chatbot'lar hakkındaki üç bölümlük serinin ilk bölümüdür. WebLLM ile chatbot oluşturma konulu 2. bölüm ve Prompt API'yi kullanma konulu 3. bölüm kullanıma sunuldu. Büyük dil modelleri (LLM'ler),

Size "ana ileti dizisini engellememeniz" ve "uzun görevleri bölmeniz" söylendi, ama bunları yapmak ne anlama geliyor?

Web Payments'ı kullanan bir ödeme işlemi, ödeme uygulamanızın bulunmasıyla başlar. Ödeme yönteminin nasıl oluşturulacağını ve satıcıların ve müşterilerin ödeme yapması için ödeme uygulamanızı nasıl hazırlayacağınızı öğrenin.

CSS maskeleme, resimleri maske katmanı olarak kullanma seçeneği sunar. Yani maskeniz olarak bir resim, SVG veya gradyan kullanarak resim düzenleyici olmadan ilginç efektler oluşturabilirsiniz.

web-features veri kümesi, Web Platformu Durumu kontrol paneli, Temel durum widget'ı ve daha fazlası! 2024'te Baseline'a göz atın.

Bu yayında, geç yükleme ve videoları geç yüklemek için kullanabileceğiniz seçenekler açıklanmaktadır.

Modül önceden yükleme, JavaScript modüllerini önceden bildirimli şekilde yükleme yöntemi sunar.

Kullanıcı deneyimini optimize etmek için kullanıcıların formlarınızla nasıl etkileşimde bulunduğunu anlamanız gerekir. Tarayıcı otomatik doldurma özelliği bu süreçte önemli bir rol oynar. Kullanıcıların formlarınızda otomatik doldurma özelliğini nasıl kullandığıyla ilgili verileri nasıl toplayacağınızı ve analiz edeceğinizi öğrenin.

Toksik içerik algılama, kullanıcılarınızı korur ve daha güvenli bir internet ortamı oluşturur. İkinci bölümde, toksisiteyi kaynağından tespit edip azaltmak için istemci tarafı bir yapay zeka aracının nasıl oluşturulacağını öğreniyoruz.

Bu yayında Toplam Engelleme Süresi (TBT) metriği ve bu metriğin nasıl ölçüleceği açıklanmaktadır.

Sitenizin Web Verileri'ni hem gerçek dünyada hem de laboratuvar ortamlarında nasıl ölçeceğinizi öğrenin.

LCP'nin nasıl ayrıntılandırılacağı ve iyileştirilebilecek temel alanların nasıl belirleneceğiyle ilgili adım adım açıklamalı kılavuz.

Sağlıklı bir site için temel metrikler

Chrome'un, web performansını optimize etmek ve Core Web Vitals'ı iyileştirmek için en büyük fırsatlar olarak belirlediği en iyi uygulamalar koleksiyonu

CSS içerik görünürlüğü özelliği artık "Temel Yeni kullanılabilir" olarak değiştirildi.

Önemli Web Verileri eşiklerinin arkasındaki araştırma ve metodoloji

Alan verilerinizi incelediğinizde bazı yavaş etkileşimlerinizin olduğunu fark ettiniz. Sonraki adım, bu etkileşimlerin manuel olarak nasıl test edileceği hakkında daha fazla bilgi edinmek ve bunların nedenlerini belirlemektir.

Bu makalede Baseline'ın kuruluş hikayesi, Google'ın dahil olma hikayesi ve WebDX Topluluk Grubu'nun sahipliği açıklanmaktadır.

Tarayıcının geri ve ileri düğmelerini kullanırken sayfalarınızı hızlı yüklemeler için nasıl optimize edeceğinizi öğrenin.

CSS iç içe yerleştirme çok daha iyi hale geliyor.

Bu yayında, First Input Delay (FID) metriği tanıtılmakta ve bu metriğin nasıl ölçüleceği açıklanmaktadır.

Analizlerle gerçek kullanıcı sorunlarını tanımlayıp düzeltmenize yardımcı olması için performans verilerinizi hata ayıklama bilgileriyle nasıl ilişkilendireceğinizi öğrenin

@propertyin CSS'nizin performansı üzerinde nasıl bir etkisi vardır?

Core Web Vitals'ınızı reklam geliriyle ilişkilendirmeye yardımcı olmak için Google araçlarını nasıl kullanabileceğinizi öğrenin.

Tarayıcıda veri depolamak için birçok farklı seçenek vardır. İhtiyaçlarınıza en uygun seçenek hangisi?

Bu yayında, yükleme özelliği ve iframe'lerin yüklenmesini kontrol etmek için bu özelliğin nasıl kullanılacağı ele alınmaktadır.

Push bildirimi aboneliklerini yöneten ve web push protokolü isteklerini bir push hizmetine gönderen sunucu oluşturmayı gösteren adım adım etkileşimli bir eğitim.

Aynı alanı yeniden kullanan birden fazla PWA oluşturmanın, artı ve eksileriyle birlikte önerilen ve önerilmeyen yöntemlerine göz atın.

Bir Progresif Web Uygulaması'nı iyi veya mükemmel yapan nedir?

PWA'nız için web uygulamanızın manifest dosyasındaki simgeleri, kısayolları, renkleri ve diğer meta verileri değiştirmek için gerekenler.

Progresif Web Uygulaması yüklenebilirlik ölçütleri.

Web uygulaması manifest dosyası, tarayıcıya web uygulamanızın nasıl davranması gerektiğini bildiren basit bir JSON dosyasıdır.

Siteler arası komut dosyası çalıştırmaya karşı derinlemesine savunma olarak komut dosyası tek seferlik rastgele sayısına veya karma değerlerine dayalı CSP dağıtmayı öğrenin.

Bu makale, web geliştiricilerinin belirli bir cihaza göre doğru donanım API'sini seçmesine yardımcı olur.

Geçiş anahtarının siteleriniz genelinde yeniden kullanılmasına izin vermek için İlgili Kaynak İstekleri'ni nasıl kullanacağınızı öğrenin.

Doğru resim biçimini seçmek, web sitenizde optimize edilmiş resimler yayınlamanın ilk adımıdır. Bu yayın doğru seçimi yapmanıza yardımcı olur.

Bu yayında, yükleme özelliği ve bu özelliğin resimlerin yüklenmesini kontrol etmek için nasıl kullanılabileceği ele alınmaktadır.

Özel metrikler, site deneyiminizin sitenize özgü yönlerini ölçmenizi ve optimize etmenizi sağlar.

Web Vitals'ta yer alan verileri Google Analytics 4 mülklerine nasıl göndereceğinizi ve verileri BigQuery ile Looker Studio'da analiz etmek için nasıl dışa aktaracağınızı öğrenin.

Bu rehberde, gereksiz istemleri ve erişimi engellemek için kullanıcılardan hassas özelliklere (ör. kamera, mikrofon ve konum) erişim izni isterken web sitelerinin izlemesi gereken en iyi uygulamalar yer almaktadır.

Çerez bildirimlerinin performansı, performans ölçümünü ve kullanıcı deneyimini nasıl etkilediği hakkında bilgi edinin.

Web geliştiricileri, Media Session API'yi kullanarak medya bildirimlerini özelleştirebilir ve değişiklikleri arama veya izleme gibi medyayla ilgili etkinliklere yanıt verebilir.

Web sitenizin Sonraki Boyamayla Etkileşimini optimize etmek üzere laboratuvardaki yavaş etkileşimleri yeniden oluşturmadan önce, bu etkileşimleri bulmak için alan verilerine odaklanmanız gerekir. Bunu nasıl yapacağınızı bu kılavuzdan öğrenebilirsiniz.

Bir öğenin sekme konumunu açıkça ayarlamak için tabindex özelliğini kullanın.

Bu gönderide, İlk Bayt Zamanı (TTFB) metriği tanıtılmakta ve nasıl ölçüleceği açıklanmaktadır.

Farklı LLM'ler, modeller ve model boyutlarında tercih ettiğiniz sonuçları elde etmek için istemlerinizi nasıl düzenleyeceğinizi öğrenin.

Bu yayında, Sonraki Boyamayla Etkileşim (INP) metriği tanıtılıyor, işleyiş şekli, nasıl ölçüleceği açıklanıyor ve iyileştirilmesine dair öneriler sunuluyor.

description: Light-dark() işleviyle, kullanılan renk şemasına tepki veren renkleri tanımlayın.

WebAssembly'den yararlanmak isteyen web geliştiricilerini hedefleyen bu kılavuzda, çalışan bir örnek yardımıyla CPU yoğun görevlerde dış kaynak kullanımı için Wasm'dan nasıl yararlanacağınızı öğreneceksiniz.

CSS ızgarasında "grid-template-columns" ve "grid-template-rows" özellikleri, sırasıyla satır adlarını tanımlamanıza ve ızgara sütunları ile satırlarının boyutlarını izlemenize olanak tanır. Bu özelliklerin interpolasyonunun desteklenmesi, ızgara düzenlerinin bir animasyonun veya geçişin orta noktasına tutturmak yerine durumlar arasında sorunsuz bir şekilde geçiş yapmasını sağlar.

Web oyunlarını Gamepad API ile kontrol etmeyi öğrenin.

Etkin olmayan özellik, bir öğeye ait kullanıcı girişi etkinliklerini (odak etkinlikleri ve yardımcı teknolojilerden etkinlikler dahil) kaldırma ve geri yükleme işlemini basitleştiren genel bir HTML özelliğidir.

Bağlı taraflar, AAGUID'yi inceleyerek geçiş anahtarının nereden geldiğini belirleyebilir. İşleyiş şeklini öğrenin.

ExampleScript adlı sentetik oyuncak dili örneğini kullanarak Binaryen.js API'sini kullanarak JavaScript'te WebAssembly modüllerini yazmayı ve optimize etmeyi öğrenin.

<model-viewer> web bileşeni, bir web sayfasındaki 3D modelleri bildirimli şekilde kullanmanıza olanak tanır.

Ses/video yakalama, uzun süredir web geliştirmenin en "kutsal kâsesi" olmuştur. Bu işi yapmak için yıllardır tarayıcı eklentilerine ( Flash veya Silverlight ) güvenmek zorunda kaldık. Hadi! HTML5'in yardımına ihtiyacınız var. Bu durum açıkça

WebAuthn'da "user Verification"ı nasıl kullanacağınızı öğrenin

RUM verilerinin neden CrUX'ten farklı Önemli Web Verileri sayıları gösterebileceğini öğrenin.

Kapsayıcı ve herkes için erişilebilir siteler oluşturmak önemlidir. Optimize edebileceğimiz en az altı temel engellilik alanı vardır: görme, işitme, hareketlilik, bilişsel, konuşma ve nöral.

Üçüncü taraf komut dosyaları, çok çeşitli yararlı özellikler sağlayarak web'i daha dinamik hale getirir. Performans üzerindeki etkilerini azaltmak için üçüncü taraf komut dosyalarının yüklenmesini nasıl optimize edeceğinizi öğrenin.

Kullanıcının şifre yöneticisinde zaten yeni bir geçiş anahtarı varsa oluşturulmasını nasıl engelleyeceğinizi öğrenin.

IndexedDB ile ilgili temel bilgiler kılavuzu.

Hemen kullanabileceğiniz değerli, güçlü ve kararlı CSS.

Time to First Byte metriği için nasıl optimizasyon yapacağınızı öğrenin.

Ana makine, site ve kaynak arasındaki fark nedir? eTLD+1 nedir? Bu makalede açıklanmaktadır.

Herkese açık kimlik bilgilerinin neler olduğunu ve kullanım alanınıza uygun kullanıcı deneyimlerini nasıl oluşturacağınızı öğrenin.

Kullanıcılar, sitelerin ve uygulamaların iyi çalışmadığını fark eder; bu nedenle, oluşturma performansını optimize etmek çok önemlidir.

"Yeniden boyutlandırmaObserver"; bir öğe' içerik dikdörtgeninin boyutu değiştiğinde, buna göre tepki verebilmeniz için sizi bilgilendirir.

Sayfa yükleme hızını iyileştirmek için yapabileceğiniz, gereksiz kaynak indirmelerini ortadan kaldırmanın yanı sıra, kalan kaynakları optimize edip sıkıştırarak toplam indirme boyutunu en aza indirmektir.

Bu dokümanda, web uygulamanızda grafik oluştururken performans iyileştirmeleri elde etmek için OffscreenCanvas API'yi nasıl kullanabileceğiniz açıklanmaktadır.

Bu yayında İlk Zengin İçerikli Boyama (FCP) metriği tanıtılmakta ve bu metriğin nasıl ölçüleceği açıklanmaktadır.

Bu makalede, içerik yayınlama ağlarına (CDN'ler) kapsamlı bir genel bakış sunulmaktadır. Ayrıca, CDN kurulumunu nasıl seçeceğiniz, yapılandıracağınız ve optimize edeceğiniz de açıklanmaktadır.

Bir kullanıcı web sitesinden çıkış yaptığında ne yapılması gerektiğine dair pratik geliştirici rehberliği.

Bu yayında Etkileşime Hazır Olma Süresi (TTI) metriği tanıtılmakta ve metriğin nasıl ölçüleceği açıklanmaktadır.

Fetch Priority API, kaynakların tarayıcıya göre göreli önceliğini gösterir. Optimum yükleme olanağını sağlayabilir ve Önemli Web Verileri'ni iyileştirebilir.

:user-valid ve :user-invalid sözde sınıflar ve giriş doğrulamada kullanıcı deneyimini geliştirmek için bunların nasıl kullanılacağı hakkında.

İşle ilgili karar mercilerinin ve geliştirici olmayanların Önemli Web Verileri'ni nasıl iyileştirebileceğini öğrenin.

Base64 kodlaması uygulama ve dizelerin kodunu çözme işlemlerinde sık karşılaşılan sorunları anlayıp bunlardan kaçının.

Alt ızgara, ızgarada paylaşılabilirliği etkinleştirerek iç içe yerleştirilmiş ızgaraların üst öğelere ve kardeşlere uyumlu olmasını sağlar.

Günümüzde dijital dünyada, online reklamcılık hepimizin keyif aldığı ücretsiz web'in önemli bir parçasıdır. Ancak kötü uygulanan reklamlar, daha yavaş bir tarama deneyimine neden olarak kullanıcıları rahatsız edebilir ve etkileşimi azaltabilir. Sayfa hızınızı etkilemeden reklamları nasıl etkili bir şekilde yükleyeceğinizi, sorunsuz bir kullanıcı deneyimi sunmayı ve web sitesi sahipleri için gelir fırsatlarını en üst düzeye çıkarmayı öğrenin.

Kod kapsamının ne olduğunu öğrenin ve bunu ölçmek için yaygın olarak kullanılan dört yöntemi keşfedin.

Neyi test etmeniz gerektiğini ve neleri göz ardı edebileceğinizi belirleyin.

Neyi test edeceğinizi belirleyin, test durumlarınızı tanımlayın ve önceliklendirin.

Kullanıcı odaklı performans metrikleri, sitenizin deneyimini anlamada ve gerçek kullanıcıların yararına olacak şekilde iyileştirmede kritik bir araçtır.

Mükemmel kullanıcı deneyimi sağlamak için duyarlı resimleri önceden yüklemeye yönelik yeni ve heyecan verici olanaklar hakkında bilgi edinin.

Kullanıcıların içeriğinizi en rahat şekilde okuyabilmesi için yazı tipini kullanıcılarınızın tercihlerine uyarlama yöntemi.

Farklı test türlerini, projenizle eşleşen makul bir stratejide nasıl birleştireceğinizi keşfedin.

Temel bilgilerle başlayalım! İki genel test modunu ve yaygın üç test otomasyonu türünü keşfetme.

Her kaynağın daha iyi bir kullanıcı deneyimi sunmaya yardımcı olduğundan emin olmak için kaynaklarınızı düzenli olarak denetlemeniz gerekir.

mkbit eşlem C programı bir görüntüyü okur ve şu sırayla bir veya daha fazla işlemi ona uygular: ters çevirme, yüksek geçiş filtrelemesi, ölçeklendirme ve eşik. Her işlem ayrı ayrı kontrol edilip açılabilir veya kapatılabilir. Bu makalede, mkbit eşlemin WebAssembly'de nasıl derleneceği gösterilmektedir.

Taşınabilir ikili kod biçimi ve yürütülebilir programlar için karşılık gelen metin biçimi olan WebAssembly'ye (bazen Wasm olarak da bilinir) giriş ve bu tür programlar ile ana makine ortamları arasındaki etkileşimleri kolaylaştıran yazılım arayüzleri sunar.

Dosya Sistemi Standardı, sayfanın kaynağına özel ve kullanıcı tarafından görülemeyen bir depolama uç noktası olarak özel kaynak dosya sistemi (OPFS) sunar. Bu sistem, performans için yüksek oranda optimize edilmiş özel bir dosya türüne isteğe bağlı

Web uygulamalarında kullanıcı tarafından kontrol edilen içeriği güvenli bir şekilde görüntüleme.

AVIF'nin ekosistemde nasıl benimsendiğine ve geliştiricilerin sabit resimler ve animasyonlar için AVIF'den ne tür performans ve kalite avantajları elde edebileceğine dair genel bakış.

Web sitenizin Next Paint ile Etkileşimini nasıl optimize edeceğinizi öğrenin.

Referans Değer'in parçası olan özelliklerden yalnızca bazıları hakkında bilgi edinin.

Komut dosyalarını yüklerken, tarayıcının bunları yürütmeden önce değerlendirmesi zaman alır ve bu da uzun görevlere neden olabilir. Komut dosyası değerlendirmenin nasıl çalıştığını ve sayfa yükleme sırasında uzun görevlere neden olmasını önlemek için neler yapabileceğinizi öğrenin.

JavaScript ile HTML oluşturmak, sunucu tarafından gönderilen HTML'nin oluşturulmasından farklıdır ve performansı etkileyebilir. Bu kılavuzdaki farkı ve özellikle etkileşimler söz konusu olduğunda web sitenizin oluşturma performansını korumak için neler yapabileceğinizi öğrenin.

Büyük DOM boyutları, etkileşimlerin hızlı olup olmadığını belirleyen faktör olabilir. DOM boyutu ile INP arasındaki ilişki, DOM boyutunu küçültmek için neler yapabileceğiniz ve sayfanızda çok fazla DOM öğesi olduğunda oluşturma işlemini sınırlandırmanın diğer yolları hakkında daha fazla bilgi edinin.

Giriş gecikmesi, toplam etkileşim gecikmesine önemli ölçüde katkıda bulunabilir ve sayfanızın INP'sini olumsuz yönde etkileyebilir. Bu kılavuzda giriş gecikmesinin ne olduğunu ve daha hızlı etkileşim için bu gecikmeyi nasıl azaltabileceğinizi öğrenin.

Bu yayında, Cumulative Layout Shift (CLS) metriği tanıtılmakta ve bunun nasıl ölçüleceği açıklanmaktadır.

PHP tarafından desteklenen tam WordPress ve WebAssembly ile yalnızca tarayıcıda çalışan

WebAssembly sayesinde artık web'de kullanılabilen bir araç sergisi.

Kaynak eşlemeleriyle web'de hata ayıklama deneyimini iyileştirin.

Progresif Web Uygulamaları; Android Play Store, Microsoft Store gibi uygulama mağazalarına gönderilebilir.

Hemen kullanabileceğiniz değerli, güçlü ve kararlı CSS.

CSS'de sinüs, kosinüs, tanjant ve diğer değerleri hesaplayın.

requestVideoFrameCallback() yöntemi, web yazarlarının, birleştiriciye yeni bir video karesi gönderildiğinde oluşturma adımlarında çalışan bir geri çağırma kaydetmesine olanak tanır.

Google Developers Experts (GDE) programının üyeleriyle yapılan bir dizi röportajdan biri.

Kapsamlı özel özellikler ve background-clip ile animasyonlu gradyan metin efekti oluşturalım CodePen 'e gidip yeni bir kalem oluşturun. Metninizin işaretlemesini oluşturun. "Hızlı" kelimesini içeren bir başlık kullanalım: Ardından body 'e daha koyu

Bu blog yayını, medya uygulamaları için yeni bir kalıp koleksiyonunu duyurdu.

Kayan kitap, bu Chrometober ile eğlenceli ve korkutucu ipuçları ile püf noktaları paylaşarak nasıl hayata geçirildi.

Renk uyarlanabilir ve erişilebilir bir ipucu özel öğesi oluşturmaya dair temel bilgiler içeren bir genel bakış.

Geçiş anahtarları, web sitelerinin kullanıcı hesaplarını daha güvenli, basit, kullanımı kolay ve şifresiz hale getirir. Bu makalede, kullanıcıların web siteniz için geçiş anahtarı oluşturmasına nasıl izin vereceğiniz açıklanmaktadır.

Geçiş anahtarları, web sitelerinin kullanıcı hesaplarını daha güvenli, basit, kullanımı kolay ve şifresiz hale getirir. Bu makalede, mevcut şifre kullanıcıları için şifre anahtarı içeren şifresiz oturum açma özelliğinin nasıl tasarlanması gerektiği açıklanmaktadır.

Renk uyarlanabilir, duyarlı ve erişilebilir FAB bileşenleri oluşturmaya dair temel bir genel bakış.

Web yazı tiplerinin Önemli Web Verileri için nasıl optimize edileceğini öğrenin.

Google Developers Experts (GDE) programının üyeleriyle yapılan bir dizi röportajdan biri.

Kapsamlı özel özellikler ve animation-timing-function ile animasyonlu bir CSS yükleyici oluşturalım CodePen 'e gidip yeni bir kalem oluşturun. Yükleyicimiz için işaretlemeyi oluşturun. Satır içi özel özelliklerin kullanımına dikkat edin: Satır

Tasarımınızın erişilebilir renk kontrastını test etmek ve doğrulamak için kullanabileceğiniz üç araca ve tekniğe genel bakış.

Bu eğitimde, bir web sitesinde erişilebilir bir ana gezinmenin nasıl oluşturulacağı açıklanmaktadır. Anlamsal HTML'yi, erişilebilirliği ve ARIA özelliklerini kullanmanın bazen faydadan çok zarar verdiği konusunda bilgi edinirsiniz.

Bu kullanışlı CSS sözde seçici, kalıcı öğeleri seçmenize olanak tanır.

CSS ile optik illüzyonlar yaratmanın eğlenceli bir keşfi.

Etiketleri ve etiket yöneticilerini Core Web Vitals için optimize edin.

Liste stilini oluşturmanın bazı yararlı ve yaratıcı yollarına göz atın.

Tasarım sistemlerinde ve bileşen kitaplıklarında Özel Özellikleri kullanmanın avantajları.

Dönüşümlere sezgisel bir şekilde yaklaşmak için bağımsız çevirme, döndürme ve ölçeklendirme özelliklerini nasıl kullanabileceğinizi öğrenin.

CSS'de kenarlığı canlandırmanın çeşitli yollarını inceleme

BBC, güvenliği ve performansı iyileştirmek amacıyla web sitesinde HSTS'yi kullanıma sunuyor. Bunun ne anlama geldiğini ve HSTS'nin size nasıl yardımcı olabileceğini öğrenin.

Önemli Web Verileri metriklerini izleyen araçların neden farklı sayılar bildirebileceğini ve bu farklılıkların nasıl yorumlanacağını öğrenin.

GDE Enrique Fernandez Guerra'nın STK HelpDev'i için açık kaynak kullanma hakkındaki görüşleri.

Maersk.com'daki müşteriler ve geliştiriciler için Internet Explorer desteğinin sonlandırılması.

Hoşça kalın HTML5Rocks, seni tanımak ne güzel.

Güvenliği, tarayıcılar arası uyumluluğu sağlamak ve üçüncü taraf çerezleri kullanımdan kaldırıldıktan sonra bozulma ihtimalini en aza indirmek için birinci taraf çerezlerinin nasıl ayarlanacağını öğrenin.

Web Audio API, AV senkronizasyonunun düzgün şekilde yapılmasını sağlar.

Konik degradeler, bu güzel kenarlık örneği gibi ilginç efektler oluşturmak için kullanılabilir. Adam Argyle tarafından oluşturulan ve ilk olarak Twitter'daki bu tweet üzerinden paylaşılan bu CodePen 'de, kenar oluşturmak için konik degrade 'nin nasıl

İstemci taraflı JavaScript ortamı bağlamında çerçeveler ve kitaplıklar arasındaki farkları anlayın.

Getirme API'si ile çalışırken hataları yakalama.

JavaScript kitaplığı veya çerçevesi kullanmayla ilgili kararları anlayın.

Google Fonts CSS API'nin işleyiş şekli, nasıl kullanılacağı ve web yazı tiplerinizi verimli bir şekilde nasıl sunabileceği ile ilgili güncelleme.

Bu kaynak, terminalde hızlıca yolunuzu bulmanıza yardımcı olabilir.

GOV.UK, jQuery bağımlılığını kullanıcı arabiriminden kaldırdı. Ne olduğunu asla tahmin edemezsiniz. (Evet, katılacaksınız.)

Renk uyarlanabilir, duyarlı ve erişilebilir bileşenlerin nasıl oluşturulacağına dair temel bir genel bakış.

Tarayıcının önceden yükleme tarayıcısının ne olduğunu, performansa nasıl yardımcı olduğunu ve her zaman olduğu gibi çalışmaması için neler yapabileceğinizi öğrenin.

Web için uygulama geliştirmeyi kolaylaştırma.

Web Verileri'ni mevcut analiz aracınızla ölçme

Mentorluk programlarının kendilerini lider olmaları için nasıl desteklediği hakkında bilgi veren Web Google Developers Uzmanları.

Değişken yazı tipleriyle ilgili çok sayıda örnek içeren pratik bir kılavuzu paylaşma.

Josh W Comeau'nun bu aracı, hoş görünen gradyanlar oluşturmayı son derece basit hale getiriyor.

Web geliştiricileriyle yapılan bire bir görüşmelerden toplanan, en önemli sorunlu noktalarla ilgili analizler koleksiyonu.

Resim araçlarının durumuna göz atın.

Kapsam ve JavaScript'te nasıl çalıştığı hakkında bilgi edinin.

" öğesi kullanılarak renk uyumlu, duyarlı ve erişilebilir mini ve mega modalların nasıl oluşturulacağına dair temel bir genel bakış.

Web'de medya oynatma hatalarını nasıl ayıklayacağınızı öğrenin.

Google Developers Experts (GDE) programının üyeleriyle yapılan bir dizi röportajdan biri.

İlk görüntü alanındaki resimleri hızlıca yüklerken geri kalanını serbestçe geç yüklemek, daha az bayt yüklerken Core Web Vitals'ı iyileştirebilir.

"" öğesi bulunan renk uyarlanabilir ve erişilebilir bir yükleme çubuğunun nasıl oluşturulacağına dair temel bir genel bakış.

Kayıt ve oturum açma formlarınızı mümkün olduğunca basit tutun. Kullanıcıların geri döndüklerinde tekrar oturum açmak zorunda kalmaması için oturum açma formlarındaki kimlik bilgilerini kaydedin. Formlardaki kullanıcı kimlik bilgilerini depolamak

User-Agent dizesi değişiklikleri, Chrome ve Firefox'un bu etkiyi azaltmak için uyguladığı stratejiler ve nasıl yardımcı olabileceğiniz.

Uyarlanabilir site simgesi oluşturmaya dair temel bir genel bakış.

Önbellek Kontrolü başlığının unutulması veya yanlış kullanılması, web sitenizin ve kullanıcılarınızın gizliliğini olumsuz yönde etkileyebilir. Yüksek değere sahip web siteleriyle ilgili öneriler alın.

Emscripten ile WebAssembly'den web'deki bir kanvasta 2D grafikler oluşturmayı öğrenin.

Sağlıklı bir site için temel metrikler

Harici kameraları bir web uygulamasından USB üzerinden kontrol etmek için gPhoto2'nin WebAssembly'ye nasıl aktarıldığını öğrenin.

İstemci taraflı ağ hatalarını toplamak için Ağ Hatası Günlük Kaydı (NEL) kullanın.

Tüm tarayıcılarda kullanıcıları desteklerken en yeni WebAssembly özelliklerini nasıl kullanacağınızı öğrenin.

Harici cihazlarla etkileşime giren kodların WebAssembly ve Fugu API'leriyle web'e nasıl taşınabileceğini öğrenin.

Uyarlanabilir ve erişilebilir bir tema değiştirme bileşeni oluşturmaya dair temel bir genel bakış.

Dış dünyayla iletişim kurmak için JavaScript kodunu WebAssembly kitaplığınıza nasıl yerleştireceğinizi öğrenin.

Oculus Quest 2, Meta şirketinin Oculus tarafından geliştirilen bir sanal gerçeklik (VR) başlığıdır. Geliştiriciler artık Oculus Quest 2'nin çoklu görev özelliğinden yararlanan 2D ve 3D Progresif Web Uygulamaları (PWA) oluşturup dağıtabilirler. Bu makalede, yaşadığınız deneyim ile Oculus Quest 2'de PWA'nızı oluşturma, başka cihazdan yükleme ve test etme süreci açıklanmaktadır.

Designcember'ın tatil takvimi tarzı deneyimini oluşturmak için kullanılan sürece ve araçlara göz atın.

Ortam ışığı sensöründen ve pencere kontrollerinin yer paylaşımı özelliğinden yararlanan bir güneş hesap makinesini web'de yeniden oluşturmaya yönelik kuşkulu bir girişim.

Uzun bir süredir, bir JavaScript değerinin ayrıntılı bir kopyasını oluşturmak için geçici çözümlere ve kitaplıklara başvurmak zorundaydınız. Platform artık derin kopyalama için yerleşik bir işlev olan "configuredClone()" sunuyor.

Uyarlanabilir ve erişilebilir bir durum mesajı bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.

Chrome'un, tasarım araçları, CSS ve HTML üzerinde çalışan kişilere hibe sağlamak için tasarlanan kullanıcı arayüzü fonunu duyuruyoruz.

Duyarlı, uyarlanabilir ve erişilebilir bir 3D oyun menüsünün nasıl oluşturulacağına dair temel bir genel bakış.

2021 Chrome Dev Summit'te paylaşılan tüm önemli duyuruların bir özeti ve daha fazla bilgi için ihtiyacınız olan bağlantılar.

Sayfa ve site kalitesini daha iyi ölçmenize ve optimize etmenize yardımcı olması için PageSpeed Insights'taki en son yenilikler hakkında bilgi edinin.

Animasyonları ölçme, animasyon kareleri ve genel sayfa düzgünlüğü hakkında bilgi edinin.

Kullanıcı işlemleri akışı boyunca performansı ve en iyi uygulamaları ölçmek için yeni Lighthouse API'yi deneyin.

Chrome son üç yıldır, tarayıcıda bulunanların sınırlarını zorlamak isteyen web uygulamalarını güçlendirmek için çalışmalar yapıyor. Bu uygulamalardan biri de Photoshop'tur. Yazılımları doğrudan tarayıcıda Photoshop kadar karmaşık bir şekilde çalıştırma fikrini yalnızca birkaç yıl önce düşünmek zordu. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop'un herkese açık bir beta sürümünü web'e taşıdı.

Kullanıcı deneyimlerini sıralamak ve filtrelemek için duyarlı, uyarlanabilir ve erişilebilir, çoklu seçim bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.

Sahadaki yükleme performansını değerlendirmek için Navigation and Resource Timing API'lerinin kullanımıyla ilgili temel bilgileri öğrenin.

Yeni Sanitizer API'nin amacı, rastgele dizelerin sayfaya güvenli bir şekilde eklenmesi için sağlam bir işlemci derlemektir. Bu makalede API tanıtılmakta ve kullanımı açıklanmaktadır.