Zusammenfassung
Merry Pixmas: Weihnachtsspaß mit CSS-Transformationen in 3D.
Was gefällt uns?
Eine schöne Weihnachtsdemo, die sowohl auf Desktop-Computern als auch auf Mobilgeräten gut funktioniert. Es unterstützt sogar neue Farben für das Design und ein Webmanifest für einen Startbildschirm, der im Vollbildmodus gestartet wird.
Profitipp: Schütteln Sie Ihr Smartphone, damit es schneit.
Mögliche Verbesserungen
Auch wenn es sich um eine Demo handelt, hätten einige angegebene Cache-Header für Assets und JavaScript, das nicht das Rendering blockiert, die wahrgenommene Ladezeit etwas verbessern.
Fragen und Antworten mit Jim Savage
Warum das Web?
In Tokio setzen wir uns schon seit Langem für das responsive und mobile Web ein, anstatt uns nur zu nutzen. Pixmas war das Ergebnis von HTML5- und CSS3-Tests, die zu Ausfallzeiten zwischen Projekten führten. Wir probieren ständig neue Dinge aus, um unser Wissen auf dem neuesten Stand zu halten. Daher wäre die Forschung für unser Front-End-Entwicklerteam natürlich auf das Web ausgerichtet und nicht auf eine native Plattform.
Mit der Weiterentwicklung von Browsern erhalten wir immer mehr native Funktionen. Funktionen, die bisher nur im Rahmen der nativen Entwicklung verfügbar waren, wie Standortbestimmung, Kamerazugriff, lokaler Datenbankspeicher usw., die alle zu einer nativähnlichen Nutzererfahrung beitragen, aber auch den Vorteil einer plattformübergreifenden und schnellen Iterationsentwicklung bieten. Natürlich hat die native Entwicklung immer noch ihre Vorteile, und wenn Sie ein neues Projekt angehen, müssen sowohl Web- als auch native Optionen sorgfältig geprüft werden. Es mag offensichtlich klingen, aber unseren Kunden ist es wichtig, dass wir die beste Plattform für den jeweiligen Job empfehlen, anstatt jedes Projekt in diejenige zu verschieben, für die wir lieber programmieren.
Was hat bei der Entwicklung wirklich gut funktioniert?
Ich glaube, bei Pixmas lag der Schwerpunkt auf 3D-Transformationen und darauf, wie weit wir CSS wirklich vorantreiben konnten. Daher funktionierte der pixelige Illustrationsstil im Browser sehr gut und wie jeder Front-End-Entwickler Ihnen sagt, dass das Verhalten eines Browsers quadratisch ist. Die Erstellung von quadratischen Problemen und der 3D-Berechnung funktionierten wirklich gut. Das Erstellen eines Kubus mit 3D-Transformationen und HTML ist viel einfacher als jede andere einfache Form. Die Interaktion und die Animationen erforderten jedoch ein wenig Ausprobieren.
Wir waren am meisten überrascht, wie flüssig und Browserleistung von 3D auf mobilen Plattformen, insbesondere auf den weniger bekannten Android-Geräten, funktioniert.
Wenn Sie eine API zur Verbesserung Ihrer App haben könnten, welche wäre das?
Wenn wir noch einmal Pixmas schreiben müssten, würden wir wahrscheinlich eine WebGL-basierte API verwenden. Es machte zwar Spaß, HTML-DOM-Elemente in 3D über CSS zu bearbeiten, doch die wahre Leistungsfähigkeit webbasierter 3D-Elemente liegt in der hardwarebeschleunigten Technologie wie WebGL. CSS 3D eignet sich für grundlegende Effekte und Übergänge auf Webseiten, aber wir stoßen bei der Codierung von Pixmas definitiv auf eine Begrenzung der Browserleistung.
Google hat einige großartige WebGL-Projekte bei Chrome Experiments parat.