Javascript on Enrico Rossomando

Angular direttive strutturali e scope delle variabili del template

Thu, 07 Jan 2021 13:29:00 +0000

Ho sempre sottovalutato l’utilizzo di alcuni tag in Angular, come ad esempio , e le variabili template, quelle che si inizializzano all’interno dei file HTML con #nomeVariabile.

Per non parlare poi delle direttive strutturali, abituati ad usare i soliti *ngIf e *ngFor, a volte si tende a dimenticare tutte le altre che possono essere molto comode, soprattutto per mantenere il codice HTML pulito e ordinato.

Structural directive

I due elementi chiavi delle direttive strutturali sono ng-container e ng-template, che vengono usate da angular per tutte le altre direttive strutturali, ad esempio, quando si scrive *ngIf, Angular non fa altro che piazzare in ng-template prima del tag e metterci un attributo input [ngIf].

AdBlock Plus e Mixpanel: come aggirare il filtro

Sat, 05 Oct 2013 03:54:49 +0000

AdBlock Plus è uno dei plugin più scaricati per Google Chrome, Firefox ed Explorer. Principalmente viene utilizzato per bloccare la pubblicità durante la nostra navigazione, ma può fare molto di più: tra le opzioni presenti nella versione Plus troviamo “Malware Blocking” che blocca tutti i domini conosciuti infetti da qualche malware; Remove Social Media Buttons che, come si può intuire, blocca il codice di caricamento dei bottoni di share come Facebook, Twitter ecc… ed infine troviamo “Disable Tracking” che blocca tutti i più comuni tool di tracciamento come Google Analytics ed appunto Mixpanel. AdBlock Plus, malware protection, social buttons and tracking A volte bloccare il sistema di tracciamento su di una web application potrebbe compromettere il funzionamento del servizio che si sta utilizzando. Se vi trovate dall’altra parte della barricata e siete un programmatore che ha l’esigenza di utilizzare un servizio di tracciamento, come Mixpanel, per il corretto funzionamento dell’applicazione allora potete utilizzare questo metodo per bypassare il blocco di default di AdBlock Plus e continuare a tracciare i dati dell’utente per un corretto funzionamento dell’applicazione. AdBlock Plus basa le sue regole per bloccare un servizio attraverso l’url di script e file esterni che vengono caricati dalla pagina, quello che andremo a fare è mappare attraverso un nostro URL tutto ciò che arriva dal sito di Mixpanel, in maniera tale da bypassare le regole di default presenti in AdBlock Plus. Per prima cosa creiamo un Record DNS CNAME nel nostro gestore DNS mappando ad esempio il sotto dominio “mp.yourdomain.com” a “api.mixpanel.com” attraverso il tipo di record CNAME. Add CNAME DNS api.mixpanel.com Fatto questo salviamoci la libreria di Mixpanel ’//cdn.mxpnl.com/libs/mixpanel-2.2.min.js’ in locale rinominandola ‘mp-2.2.min.js’ ed apriamola con un il nostro editor di testo preferito, cerchiamo la stringa api.mixpanel.com e sostituiamola con mp.yourdomain.com Mixpanel AdBlock Plus hack step 1 A questo punto carichiamo sul nostro server il file Javascript appena modificato ed andiamo a sostituire nel blocco di codice che importava la libreria Mixpanel nel nostro sistema il nuovo URL del file appena caricato. Mixpanel AdBlock Plus hack step 2 A questo punto se proviamo a navigare sul nostro sito con AdBlock Plus attivo Mixpanel non verrà più bloccato con le regole di default presenti nel plugin e tutto funzionerà correttamente.

From Adobe Illustrator to HTML5 Canvas

Sat, 11 May 2013 17:07:00 +0000

Il fenomeno HTML5 cresce sempre di più col passare del tempo, se ne discute molto in rete e sembra non terminare mai la battaglia tra HTML5 e Flash. Se poi si finisce sul mobile iniziano i confronti tra WEB e NATIVO, ma non è di questo che voglio parlare.

Così come cresce la moda di HTML5 iniziano a proliferare anche diversi strumenti e framework. Quello che segue è uno strumento che attribuisce al canvas un potenziale enorme per lo sviluppo di animazioni ed interfacce vettoriali che prima era molto complicato ottenere e che funzionano bene su tutti i moderni browser e dispositivi mobili.

The concepts of WebGL

Sat, 27 Apr 2013 16:06:00 +0000

Interessante articolo su hacks.mozilla.org che introduce e chiarisce alcuni concetti fondamentali dietro le WebGL.

What is WebGL?

WebGL is a Web API that allows low-level graphics programming. “Low-level” means that WebGL commands are expressed in terms that map relatively directly to how a GPU (graphics processing unit, i.e. hardware) actually works. That means that WebGL allows you to really tap into the feature set and power of graphics hardware. What native games do with OpenGL or Direct3D, you can probably do with WebGL too.

Link all’articolo su hack.mozilla.org: The concepts of WebGL

L’articolo non si pone come un ennesimo tutorial, infatti, alla fine, segnala delle risorse molto utili per iniziare a programmare con le WebGL.

CanvasLoader Creator

Tue, 05 Mar 2013 23:49:00 +0000

CanvasLoader Creator è una piccola libreria javascript (5.8kb minificata) che vi permette di riprodurre nel

Sul sito c’è un piccolo pannello di controllo che vi permette di settare i diversi parametri e vedere il risultato in tempo reale.

I vantaggi dell’utilizzare una libreria del genere sono diversi:

5kb sono meno di una gif animata (circa 100x100)
Il colore, la velocità e tanti altri parametri possono essere cambiati in tempo reale e quindi riprodurre effetti più carini a seconda delle situazioni
La dimensione può essere cambiata e quindi adattata alle diverse interfacce
Il codice necessario per utilizzarla è semplicissimo

HTML5 | Javascript canvas experiments

Sun, 03 Feb 2013 01:02:06 +0000

http://www.dhteumeuleu.com/ una raccolta di diversi esperimenti in HTML5 che fanno uso del Canvas senza nessun aiuto da parte di plugin come Flash…

Per ogni esperimento è possibile visualizzare anche il codice sorgente per capire come è stato implementato. Molto utile per scoprire nuove tecniche di animazione e di gestione del canvas.

Javascript Cross Domain API

Sat, 02 Feb 2013 01:01:00 +0000

I moderni browser implementano la cosiddetta same-domain-policy che impedisce a qualsiasi richiesta HTTP fatta con l’oggetto XmlHttpRequest di accedere a risorse su server con un dominio diverso da quello in cui risiede lo script chiamante. Questo può sembrare una policy molto limitante ma impedisce alle pagine di caricare codice pericoloso e accedere a sessioni non autorizzate. Questa limitazione peròc risulta fastidiosa quando si sviluppano applicazioni web in localhost che fanno uso di API che non risiedono sulla propria macchina. Questo è l’errore che compare quando si tenta di accedere da localhost ad un dominio diverso tramite l’oggetto XmlHttpRequest:

XMLHttpRequest cannot load http://192.168.0.123/dengenchronicles-backend/api/user/login/test?username=test&password=test. Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin.

CanvasSwirl: An animated spirograph experiment in JavaScript and Canvas

Thu, 31 Jan 2013 01:02:00 +0000

CanvasSwirl è un bellissimo esperimento implementato in javascript che unisce ad un sistema di particelle la logica dello spirografo.

Lo spirografo è uno strumento che produce delle curve chiamate ipotrocoidi e epicicloidi. Ve lo ricorderete perché sicuramente lo avete utilizzato a scuola quando eravate piccoli.

Le ipotrocoidi è una rulletta ottenibile come curva tracciata da un punto fissato ad una certa distanza dal centro di un cerchio mobile che ruota all’interno di un altro cerchio immobile. La figura animata chiarirà meglio il concetto :)

Le epicicloidi invece si basano sullo stesso concetto delle ipotrocoidi ma il cerchio mobile ruota all’esterno del cerchio immobile.

HTML5 CanvasSwirl testato su iPhone

Wed, 30 Jan 2013 18:36:25 +0000

http://www.youtube.com/watch?v=EajfmmrKMX4 CanvasSwirl testato su iphone 3GS (in alto a sinistra), iPhone 4 (in basso a sinistra), iPhone 4S (in alto a destra) e iPhone 5. La velocità dell’iPhone 5 che monta il nuovissimo chip A6 ovviamente non è paragonabile con i precedenti modelli, ma la cosa che sorprende è la poca differenza di performance tra iPhone 3GS e iPhone 4, nonostante quest’ultimo monti il chip A4, fatto da Apple su misura per la nuova linea di iPhone.

(Source: http://www.youtube.com/)

Furball in WebGL

Wed, 30 Jan 2013 07:32:32 +0000

http://www.youtube.com/watch?v=De8A4jDWe40 Un bellissimo esperimento fatto completamente con le WebGL. Guardate il video oppure se avete un browser abilitato alle WebGL potete vederlo live a questo indirizzo: http://www.theoberg.com/things/furball/ Grazie a @theo_t

(Source: http://www.youtube.com/)