Chrome Dev Summit 2014'te yeni API'leri ele alan bir sürü konu ve marka vardı, ancak bunların hepsi yeni ve parlak dünyadan ibaret değil.
Yeni bir Web Geliştiricisiyseniz, hatta yeni API'leri keşfetmeye başlayacak tecrübeli bir geliştiriciyseniz muhtemelen şu üç adımı izlersiniz: öğrenme, derleme ve yineleme.
Matt Gaunt, bu sorunları ele almak için Chrome Geliştirici Platformu ekibinin devam eden çabalarını ele alıyor.
Bilgi

Web'in Temelleri çeşitli konuları kapsayan, kullanım alanına dayalı bir dizi dokümandır. Temel hedef, geliştiricilerin az bilgili ya da hiç bilgisizden en iyi uygulamaları mümkün olduğunca hızlı bir şekilde uygulamaya geçirmelerini sağlamaktır.
Web'in Temelleri'nin ana hedeflerinden biri, bir konuda yeniyseniz, rehberlik sayesinde "seçme felcini" mümkün olduğunca azaltır. Addy Osmani, Pastry Box'ta bunu mükemmel bir şekilde anlatıyor.
Siteyle veya içeriğiyle ilgili herhangi bir sorun tespit ederseniz ya da Web'in Temelleri'nin belirli bir konuyu ele almasını isterseniz lütfen GitHub'dan geri bildirim göndererek bize bildirin.
Topluluk

Yeni bir web projesini başlatmanıza yardımcı olmak için Web Starter Kit'i oluşturduk. İhtiyacınız olan her şeye sahiptir:
- Sağlam bir derleme süreci
- Ortak metin HTML'si
- Stil Kılavuzu
Derleme Süreci
Süreç geliştirme konusunda yeni olanlar için, bir derleme işlemini düşünmenin en kolay yolu, onu bir dizi dosya alıp bunlar üzerinde belirli görevleri gerçekleştiren ve farklı bir konuma yeni sürümlerin çıktısını veren bir program olarak görüntülemektir. Görevler; yükleme sürelerini iyileştirmek, olası hataları kontrol etmek veya otomatikleştirilebilen görevleri yönetmek için dosyaları optimize eder.
Web Starter Kit'te aşağıdaki işlemler uygulanır:

Tarayıcının dosyayı hızlı bir şekilde alabilmesi için CSS ve JavaScript'i küçültüp birleştiririz. Ayrıca, JavaScript en iyi JavaScript uygulamalarını ve yaygın kodlama hatalarını kontrol etmek için JSHint üzerinden çalıştırılır. Resimler, imagemin ile küçültülür ve bunu kullanarak dosya boyutunda büyük küçültme elde edebilirsiniz. Stil kılavuzları CSS'leri oluşturmak için de bir sürecimiz var.
Birden Çok Cihaz HTML'si için ortak metin
Yeni bir sayfa için yazdığınız ilk HTML grubu oldukça batık bir standarttır ve farklı cihazlarda ve ekran boyutlarında iyi çalışan bir stok HTML dosyasını hızlı bir şekilde elde tutmanın bir yolunu bulmanız muhtemeldir.
Web Starter Kit'te, platform ile siteniz arasındaki çizgileri bulanıklaştıran tüm özellikleri desteklemek istedik. Bu nedenle Android, Windows Phone, iOS ve Opera Coast için ana ekrana ekleme ve başlangıç ekranları için destek ekledik.

Stil Kılavuzu

Web Başlangıç Seti'nin son parçası Stil Kılavuzu'dur.
Böylece tüm yeni projeler, stile dayalı gelişimi teşvik eden çok sayıda varsayılan stil ve bileşen sağlar. Mevcut stilleri öğelere dönüştürebilir ve kendi stilinizi ekleyebilirsiniz.
WSK'nin gelecek yılın başlarında yayınlanması planlanan bir sonraki sürümünde, stil kılavuzunun birlikte uyumunu basitleştirmek ve materyal tasarım görünümüne geçiş yapmak için yoğun şekilde çalışıyoruz. MattChrome Geliştirici Zirvesi'nde bunun nasıl görünebileceğine dairbir örnek gösterilmiştir. Aşağıda bir örnek görebilirsiniz.

Yineleme
Yeni bilgilerinizi uygulamaya başladıktan sonra hata ayıklamak, işlerinizi iyileştirmek ve sürdürmek için Geliştirici Araçları'nı kullanabilirsiniz.
Geliştirici Araçları'nda kullanıma sunulan bazı muhteşem yeni özellikler var. Matt, aşağıdaki yeni özelliklere göz atıyor.
Cihaz Modu
Cihaz modu, CSS'nizdeki medya sorgularını görüntülerken sitenizin farklı mobil cihazlarda nasıl çalıştığını hızlı bir şekilde görmenize olanak tanıyan, Geliştirici Araçları'ndaki yeni bir bölümdür.

Cihaz Modu'nun muhteşem özelliklerinden biri, ağ hızlarını kısıtlama imkanıdır. Bu sayede GPRS, EDGE, 3G, DSL veya kablosuz bağlantı kullanan bir kullanıcının deneyimini simüle edebilirsiniz.

Boya Profil Aracı
Zaman çizelgesi sekmesini açıp kayıt düğmesine bastıysanız muhtemelen şelalede bazı boyama olaylarının gerçekleştiğini görmüşsünüzdür. Normalde bu, tarayıcının neden yaptığını veya ne yaptığını anlamanın bir yolu olmayan kara bir kutudur.
Boya profili, tarayıcının bu boyama işlemi sırasında tam olarak ne yaptığıyla ilgili daha fazla bilgi sağlamaz.

Geçersiz Kılma İzleme
Geliştirici Araçları artık mümkün olduğunda bir boyama veya düzenin neden oluştuğunu açıklıyor. Bu özellik, zaman çizelgesi ve tarayıcı davranışları hakkında bilgi sahibi olan herkes için faydalıdır ve performans sorunlarını önlemek için kodunuzu optimize etmenize olanak tanır.

Flame Grafiği Görünümü
Bu, zaman çizelgesinde sunulan bilgileri görüntülemenin çok farklı bir yoludur. Bu, görevlerin nasıl çakıştığını ve diğer görevler sonucunda hangi tarayıcı davranışının gerçekleştiğini görmeyi çok daha kolay hale getirir.

Çerçeve Görüntüleyici
Flame Grafiği görünümündeyken belirli bir çerçeveyi seçebilirsiniz. Bu çerçevede sayfadaki hangi öğelerin birleşik katmana yükseltildiğini ve neden yükseltildiklerini öğrenebilirsiniz.

Öğren. Derleyin. Yineleme
Bunlar, geliştiricilerin web geliştirme hızına ayak uydurmasına yardımcı olmak için Chrome ekibi tarafından yürütülen bazı çalışmalardır. Bu nedenle, Web'in Temelleri, Web Başlangıç Kiti ve Chrome Geliştirici Araçları'ndaki yeni özelliklere göz atmayı unutmayın.