Özet
Merry Pixmas: 3D CSS Dönüşümleri ile yılbaşı eğlencesi.
Neler severiz?
Masaüstünde ve mobil cihazlarda iyi çalışan, Noel temalı güzel bir demo. Hatta yepyeni tema rengi desteği ve tam ekranı başlatan bir ana ekran deneyimi için web manifesti de içerir.
Uzman ipucu: Kar yağması için telefonunuzu sallayın.
Olası İyileştirmeler
Bunun bir demo olduğunu bilsem de, öğelerde belirtilen birkaç önbellek başlığı ve oluşturmayı engellemeyen JavaScript, algılanan yükleme süresini biraz iyileştirebilir.
Jim Savage ile Soru-Cevap
Neden web?
Tokyo'da, uzun süredir bir şirket olmaktan ziyade duyarlı ve mobil web'i savunuyoruz. Pixmas, projeler arasındaki dinlenme zamanında HTML5 ve CSS3 denemeleri sonucunda ortaya çıktı. Bilgimizi güncel tutmak için sürekli olarak yeni şeyler deniyoruz. Bu nedenle, ön uç geliştirici ekibimiz için tüm araştırmalar yerel bir platform yerine web odaklı olacaktı.
Tarayıcılar olgunlaşmaya devam ettikçe daha fazla yerel benzeri işlevler görüyoruz. Şimdiye kadar yalnızca yerel geliştirme yoluyla (ör. coğrafi konum, kamera erişimi, yerel veritabanı depolama alanı) kullanılabilen işlevler, hepsi kullanıcıya genel olarak yerel benzeri bir deneyime katkıda bulunur, ancak platformlar arası ve hızlı yineleme geliştirmenin faydalarıdır. Elbette yerel geliştirmenin hâlâ avantajları vardır ve yeni bir proje üzerinde çalışırken hem web hem de yerel seçenekler için üzerinde çok fazla düşünülmesi gerekir. Muhtemelen çok aşikar olabilirsiniz, ancak müşterilerimiz için her projeyi kodlamak yerine, işimiz için en iyi platformu önermemiz önem taşıyor.
Geliştirme sırasında ne işe yaradı?
Bence Pixmas ile ana odak noktamız 3D Dönüşümler ve CSS'yi ne kadar uzağa koyabileceğimizydi; bu nedenle pikselleştirilmiş çizim stili tarayıcıda gerçekten iyi sonuç verdi ve herhangi bir ön uç geliştiricisi size tarayıcının doğal davranışının kare dostu olduğunu söyleyecektir. Dolayısıyla, genel stil ve 3D matematik matematiklerini kare tabanlı problemler çerçevesinde belirlemek gerçekten işe yaradı. 3D dönüşümler ve HTML ile bir küp oluşturmak, diğer temel şekillerden çok daha kolaydır. Ancak etkileşim ve animasyonlar, düzeltmemiz için biraz deneme yanılma yapmamız gerekti.
Bizi en çok şaşırtan şey, 3D'nin mobil platformlarda, özellikle de az bilinen Android cihazlardaki sorunsuz deneyim ve tarayıcı performansıydı.
Uygulamanızı daha iyi hale getirecek bir API'niz olsaydı bu ne olurdu?
Pixmas'ı baştan aşağı yazacak olsaydık muhtemelen WebGL tabanlı bir API kullanırdık. HTML DOM öğelerini CSS aracılığıyla 3D olarak düzenlemek eğlenceli olsa da web tabanlı 3D için gerçek gücün WebGL gibi donanım hızlandırmalı özel bir teknoloji olması gerekiyordu. CSS 3D, temel web sayfası efektleri ve geçişleri için uygundur ancak Pixmas'ı kodlarken tarayıcı performansında kesinlikle belirli bir sınırlamayla karşılaşırız.
Google'ın, Chrome Deneyleri'nde bazı harika WebGL projeleri var.