Duck Typing: comparare oggetti in JavaScript

Con il Duck Typing gli oggetti vengono attraverso l’insieme dei metodi e delle proprietà che lo compongono. Perchè questo nome curioso? Per via di una simpatica citazione che descrive efficacemente la filosofia di questo approccio:

When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck.

Che tradotto in italiano suona più o meno così:

Quando io vedo un uccello che cammina come un’anatra, nuota come un’anatra e starnazza come un’anatra, io chiamo quell’uccello anatra.

Cosa significa tutto questo in pratica?  Vediamolo subito con un esempio pratico in JavaScript, iniziamo dichiarando due oggetti qualsiasi per il test di comparazione:

Questo è invece il codice che si occupa della comparazione:

 

Per testare il tutto questa è la demo live su Code Pen:

See the Pen Duck Typing by Gioele Fierro (@gioeleslfierro) on CodePen.

Eventi tastiera in JavaScript

Restare in ascolto degli eventi relativi alla tastiera in JavaScript significa semplicemente registrare tre EventListener correlati alla porzione del documento entro la quale vogliamo che la rilevazione abbia luogo.

I tre eventi che ci interessano sono i seguenti:

  • keyup
  • keydown
  • keypress

 

Nel codice d’esempio che vedi sotto c’è una breve introduzione che indica qual’è lo scopo di ogni evento specifico.

 

See the Pen Keys event in JavaScript by Gioele Fierro (@gioeleslfierro) on CodePen.

Nell’esempio ascoltiamo gli eventi tastiera quando il focus è sull’intero documento. Possiamo fare la stessa cosa restringendo il campo d’azione dell’EventListener ad un contenitore specifico (ad esempio un div) o anche ad un singolo elemento.

LIVE CODE

Secure Password Tools ver. 0.2 alpha

Di solito è Settembre il mese dei buoni propositi ma per questa volta ho fatto un eccezione così la nuova release di SPT è pronta con una settimana di anticipo.

PROVA LA DEMO LIVE

Funzionalità più robuste e una struttura del codice più ordinata e riutilizzabile, erano questi gli obiettivi di Secure Password Tools alpha nella versione 0.2.

Queste sono le novità principali:

  •  True random per la generazione password
  • Classe unica SPT per la gestione password
  • Nuovo algoritmo di validazione (più robusto)
  • Nuovo algoritmo di generazione
  • Esempio e Documentazione più completa

Approfondendo il discorso per il true random ho utilizzato questa implementazione JavaScript dell’algoritmo Mersenne Twister. Un buon passo in avanti rispetto alla classica funziona random nativa.

La GUI della documentazione Secure Password Tools non è ancora definitiva ma è già più completa e strutturata. Anche nelle prossime declinazioni ho scelto di utilizzare una disposizione one page per i contenuti (che tra l’altro sono pochi). Ok, la doc di JSUtils è più carina ma datemi tempo e la prossima versione ci sarà un ulteriore salto di qualità.

Ovviamente è tutto OpenSource, disponibile su GitHub.

JSUtils: il progetto si evolve

JSUtils continua ad evolversi con nuovi strumenti disponibili e una documentazione più chiara da consultare e più curata sotto il profilo grafico. Queste sono le migliorie introdotte con JSUtils 0.1.3 alpha, trovi la nuova versione già online su GitHub.

Una novità interessante sono le nuove sezioni vars ed extended primitives, la prima contiene una serie di valori predefiniti riutilizzabili mentre la seconda è un upgrade a tre delle strutture principali di JavaScript. Al momento è disponibile solo la struttura base, i contenuti saranno aggiunti via via con le prossime Alpha.

La libreria completa andrà inesorabilmente ad appesantirsi viste le nuove sezioni, per questo la nuova versione è stata scomposta in vari moduli, il developer potrà così decidere cosa importare scaricando solo il codice che utilizzerà. Naturalmente è ancora disponibile il modulo integrale che contiene tutte le utilities, sia in forma completa che compressa.

Questi sono tutti i sorgenti disponibili (src):

array.jsu.js
function.jsu.js
jsu.js J
number.jsu.js
string.jsu.js
vars.jsu.js

 

Questi sono tutti i sorgenti compressi disponibili (min-src):

array.jsu.min.js
function.jsu.min.js
jsu.js J
number.jsu.min.js
string.jsu.min.js
vars.jsu.min.js

 

Oltre a queste modifiche tecniche c’è anche una nuova veste grafica che ti aspetta nella documentazione che diventa più semplice da consultare. Trovi la documentazione online QUI. Aggiungendo complessità al codice è ovvio che anche la documentazione era da migliorare e questo è il lavoro che ha occupato principalmente la release 0.1.3. Dalle prossime si tornà alle novità fuzionali.

Da JSFiddle a CodePen

Per i demo e i test al volo sono passato recentemente da JSFiddle a CodePen, se hai seguito gli ultimi aggiornamenti del blog l’avrai già notato. La migrazione non mi ha entusiasmato ma devo dire che mi sto lentamente abituando all’interfaccia di CodePen per quanto la trovi confusa e complessa.

codepen logo

CodePen non mi ha mai attirato ma in realtà questa scelta ha un motivo validissimo: l’esperienza d’uso da mobile. Usare JSFiddle con iPad è sempre stato un cataclisma, è necessario usare un browser particolare per accedere alla console e muoversi tra le righe di codice è un operazione semi-impossibile anche da tastiera.

Con il suo accrocchio di finestre affiancate CodePen offre un esperienza completa, posso usarlo da safari/chrome accedendo senza problemi alla console e posso gestire il layout in modo più flessibile adattandolo al codice che sto scrivendo e al dispositivo che sto utilizzando.

Un altra cosa che apprezzo molto sono le possibilità di condivisione, esportazione e integrazione in altre pagine, una buona scelta di strumenti che permettono di fare qualsiasi cosa con gli snippet salvati su CodePen. Noiose da ricordare le scorciatoie da tastiera ma a quello sto facendo l’abitudine abbastanza rapidamente.

La versione PRO è interessante soprattutto per l’ Asset Hosting . . . la provo per un anno? Non lo so, devo ancora decidermi al riguardo.

Gestire la paginazione con JavaScript + Bootstrap

Gli indicatori di paginazione sono semplicissimi da gestire con Bootstrap, basta davvero poco codice per ottenere un effetto gradevole e usabile. In questo articolo quel poco codice necessario.

Per prima cosa dobbiamo creare un contenitore per la lista.

Questa è la parte più importante, la funzione elabora con un ciclo il numero delle pagine necessarie e aggiunge un elemento alla lista per ciascuna. Con show e hide si gestisce la visibilità della lista nel caso non ci sia più di una pagina.

Al click su ogni elemento viene richiamata una funzione che gestirà il cambio pagina, al momento è solo un placeholder che stampa un’inutile messaggio in console.

Su CodePen un esempio live di questo codice.

JSUtils 0.1.3 – RELEASE

Due new entry per la nuova versione di JSUtils che ho rilasciato da qualche ora. L’alpha 0.1.3 contiene una nuova funzione per iterare gli array e un logger che trovo utilissimo durante lo sviluppo.

Con loopOnArray() puoi applicare una funzione a tutti gli elementi di un array. Il primo argomento è l’array da iterare e il secondo la funzione da avviare che ha come unico argomento l’elemento sezionato dell’array. Si usa così:

 

Per rendere più leggibile l’output in console puoi usare la funzione logger() che migliora l’impostazione dei messaggi di log classificandoli in quattro classi principali.

  1. Log di base
  2. Log informativo
  3. Log di avvertimento (WARNING)
  4. Log di errore (ERROR)

La categoria è opzionale, se si indica solo i messaggio verrà considerato un log di classe 1. Questo è un esempio di utilizzo.

logger() sfrutta esclusivamente la funzione console.log() quindi ha un alta compatibilità con browser recenti e non. Questi sono i risultati dei vari livelli di log.

 

JSUtils 0.1.3 è open source, la trovi su GitHub.

[JavaScript] Aggiungere un elemento ad un array solo se non esiste già

Promezio: esempio JavaScript

 

La classe Array può essere estesa facilmente con prototype per aggiungere una serie di funzionalità utilissime durante lo sviluppo. Un’esigenza che si ripresenta regolarmente è quella di aggiungere un elemento ad un array solo se questo non esiste già, evitando i doppioni.

Il primo step è quello di scrivere una funzione exist(element) che controlli se l’array contiene o meno l’elemento in questione, ho scelto di usare una comparazione stretta per verificare che sia effettivamente lo stesso elemento.

 

Adesso possiamo sfruttare questo codice per scrivere l’exclusivePush(element) da utilizzare su qualsiasi array.

 

Per testare il tutto usiamo il classico array cars e stampiamo in console il risultato dell’elaborazione

 

Trovi un esempio live su CODEPEN . . . l’ho sostituito recentemente a JSFiddle ma non è questa l’occasione giusta per spiegarne i motivi, ci sarà un prossimo articolo al riguardo.

Come generare PDF in PHP

logo php fpdf - generare pdf in php

Uno dei punti cardine di un recente progetto targato :#/promezio è stata la generazione dinamica lato server (PHP) di un report scaricabile in formato PDF.  La soluzione più rapida per generare PDF in PHP è risultata fpdf, una libreria gratuita per PHP ≥ 5.1 utilizzabile liberamente anche per soluzioni commerciali.

 

Si inizia importando la libreria

Per creare la prima pagina con codifica testo in italiana bastano tre righe di codice, con la prima creiamo un nuovo oggetto di tipo FPDF() per poi aggiungere una nuova pagina con la localizzazione it_IT

Per la pagina di prova inseriamo soltanto un immagine e un testo. Con $pdf->Image si inserisce un immagine e con $pdf->Cell un campo di testo. Per impostare la posizione degli elementi prima dell’inserimento si regola il punto di inizio con $pdf->Cell. Iniziamo con il logo

Ora continuiamo inserendo un titolo subito sotto, si può utilizzare $pdf->GetY per recuperare l’ascissa corrente e posizionare il sottotitolo subito sotto il titolo.

Al termine non resta che generare un pdf pronto per essere scaricato

 

 

Questo è il risultato finale