Buon Pixmas

Screenshot di Merry Pixmas

Riepilogo

Merry Pixmas: divertimento natalizio con le trasformazioni CSS 3D.

Cosa ci piace?

Una bella demo a tema natalizio che funziona bene su computer e dispositivi mobili. Include anche un nuovo supporto per i colori del tema e un manifest web per un'esperienza nella schermata Home che avvia la modalità a schermo intero.

Suggerimento avanzato: scuoti lo smartphone per far nevicare!

Possibili miglioramenti

Anche se mi rendo conto che si tratta di una demo, alcune intestazioni di cache specificate per gli asset e JavaScript che non bloccano la visualizzazione potrebbero aver migliorato notevolmente il tempo di caricamento percepito.

Domande e risposte con Jim Savage

Perché il Web?

Noi di Tokyo sosteniamo da tempo il web adattabile e mobile, anziché quello nativo. Pixmas è il risultato della sperimentazione HTML5 e CSS3 durante i tempi di inattività tra un progetto e l'altro. Sperimentiamo sempre nuove cose per mantenere aggiornate le nostre conoscenze; quindi, naturalmente, per il nostro team di sviluppatori front-end, qualsiasi ricerca sarebbe stata incentrata sul web anziché su una piattaforma nativa.

Man mano che i browser continuano a maturare, stiamo assistendo a un numero sempre maggiore di funzionalità di tipo nativo, ovvero funzioni sempre e solo disponibili tramite lo sviluppo nativo, come la geolocalizzazione, l'accesso alla fotocamera, l'archiviazione del database locale e così via. Tutte contribuiscono a creare un'esperienza generale simile a quella nativa per l'utente, ma con i vantaggi dello sviluppo dell'iterazione su più piattaforme e rapido. Naturalmente lo sviluppo nativo ha ancora i suoi vantaggi e quando si affronta un nuovo progetto, si prende in considerazione molta considerazione sia per le opzioni web che per quelle native. Probabilmente sembrerà ovvio, ma per i nostri clienti è importante che consigliamo la migliore piattaforma per il loro lavoro, piuttosto che calzare ogni progetto in base a quale preferiamo programmare.

Che cosa ha funzionato davvero bene durante lo sviluppo?

Penso che con Pixmas l'attenzione fosse concentrata sulle trasformazioni 3D e su quanto potevamo davvero spingere il CSS, quindi lo stile illustrativo pixelato funzionava molto bene nel browser e, come qualsiasi sviluppatore front-end ti dirà che il comportamento naturale di un browser è di qualità quadrata. Pertanto, basare lo stile generale e la matematica 3D su problemi basati sui quadrati ha funzionato molto bene. La creazione di un cubo con trasformazioni 3D e HTML è molto più semplice di qualsiasi altra forma primitiva. Tuttavia, l'interazione e le animazioni ci hanno richiesto un po' per tentativi ed errori.

Ciò che ci ha sorpreso di più è stata la fluidità e le prestazioni del browser del 3D sulle piattaforme mobile, in particolare sui dispositivi Android meno noti.

Se potessi avere un'API per migliorare la tua app, quale sceglieresti?

Se dovessimo scrivere di nuovo Pixmas, probabilmente useremmo un'API basata su WebGL. Anche se è stato divertente manipolare elementi DOM HTML in 3D tramite CSS, la vera potenza del 3D basato sul web deve essere una tecnologia dedicata con accelerazione hardware come WebGL. CSS 3D va bene per le transizioni e gli effetti di base delle pagine web, ma abbiamo notato sicuramente una limitazione delle prestazioni del browser quando codifichiamo Pixmas.

Google ha alcuni grandi progetti WebGL su Chrome Experiments.