Come creare un motore di rendering in JavaScript

Uno degli aspetti più importanti dello sviluppo front-end è quello di mostrare agli utenti dei dati utili a svolgere l’attività per la quale la nostra web application è stata creata. Se volessimo portare questa definizione su un piano più tecnico potremmo dire che il nostro scopo è trasformare i dati in una serie di elementi del DOM: in altre parole fare quello che si chiama rendering. La parte di codice che, a basso livello, si occupa di creare, manipolare ed […]

27/08/2019

Sviluppo di Skill per Amazon Alexa

Dallo scorso 30 ottobre anche in Italia è disponibile la gamma di Smart Speaker Echo di Amazon. Gli Echo (ma anche altri dispositivi compatibili) sono alimentati da Alexa , l’assistente vocale di Amazon. Oltre alle possibilità offerte dal sistema principale come impostare timer, fare ricerche su internet e cose di questo genere, è possibile aumentare le possibilità offerte da questa piattaforma tramite applicazioni di terze parti. Queste applicazioni nell’ecosistema Alexa sono chiamate Skills. Noi di Coding Jam abbiamo creato la […]

22/01/2019

Custom elements

La più grande evoluzione che i framework frontend post AngularJS hanno portato ai developer JavaScript è stato l’introduzione del concetto di componente. Concetto già presente in AngularJS stesso, anche nelle versioni con qualche annetto sulle spalle. Sicuramente però l’avvento di Angular, Vue e soprattutto React hanno fatto diventare questo concetto mainstream. L’idea di componente basa molta della sua forza sul concetto di riutilizzo. Se ad esempio create un componente <Calendar/> ci aspettiamo di utilizzarlo in tutti i punti del nostro […]

23/05/2018

Puppeteer: usare Chrome come un API

La versione 59 di Chrome ha portato un’interessante novità per chi si occupa di sviluppo web. Da questa versione infatti è possibile lanciare il famoso browser targato Google in modalità headless, senza cioè nessuna interfaccia grafica. Inoltre il team Chrome ha anche rilasciato Puppeteer, una API Node che permette di pilotare un’instanza di Chrome. Installando il pacchetto con il comando npm i puppeteer, all’interno della cartella node_modules verrà aggiunta un’installazione di Chromium che verrà utilizzata durante l’esecuzione degli script. Test […]

21/02/2018

WebVR con A-Frame

WebVR è una nuova specifica del World Wide Web Consortium, di cui potete leggere lo stato dei lavori su GitHub. Essendo una specifica ancora in fase di pre-release è supportata ad oggi solo da Edge e Chrome per Android, come potete controllare su caniuse.com. In pratica tramite WebVR è possibile creare delle scene in VR all’interno di applicazioni web compatibili con i vari device dedicati, dall’Oculus Rift fino a delle semplici Google Cardboard. Anche se la specifica è lontana dall’implementazione […]

19/07/2017

Test end-to-end con Nightwatch.js

C’è una categoria di test che spesso sono snobbati dagli sviluppatori: i test end-to-end (E2E). Per test end-to-end si intende un test che copre l’intero flow dell’applicazione integrando tutti gli elementi di cui è composta. In questo post ci occuperemo in particolare di test E2E di un’applicazione web, in questo caso questi test sono detti anche UI o funzionali. In pratica simuleremo i click e le altre interazioni dell’utente con un browser reale che navigherà l’applicazione reale. Mike Cohn nella […]

16/05/2017

Introduzione a PixiJS

In questi ultimi anni le possibilità messe a disposizione per gli sviluppatori Web da parte del W3C sono aumentata a dismisura. Basti pensare alle Web Animations API oppure le Speech Recognition e Speech Synthesis API. Una delle “nuove” API più importanti, secondo chi vi scrive, è WebGL. In pratica le WebGL sono un porting di OpenGL utilizzabile in ambiente web. La loro potenza sta nel fatto che bypassano completamente il rendering del browser, andando direttamente sulla CPU/GPU. Questo permette di […]

21/02/2017

JavaScript Proxies

Qualche tempo fa abbiamo ospitato un ottimo post sulle novità di EcmaScript 6. Ovviamente lo scopo di quel post era introduttivo e non ha esplorato tutte le nuove funzionalità messe a disposizione dal nuovo standard. Tra queste una delle più interessanti è l’introduzione dei Proxies. Il Proxy è uno dei design pattern classici definiti dalla Gang of Four nel loro libro “Design Patterns”. Un Proxy è un oggetto che funziona da “interfaccia” verso l’esterno di un altro oggetto. Lo schema […]

06/12/2016