JavaScript – SET

set JavaScript

 

I SET sono collezioni di valori semplici da utilizzare e iterare ma molto potenti quando si elaborano grandi quantità di informazioni. In realtà questo tipo predefinito è spesso sottovalutato in favore dei comunissimi Array.

Giochiamo un po con i set? Per prima cosa creiamone uno e aggiungiamo qualche elemento

Adesso possiamo eliminare un elemento e subito dopo testare la sua presenza nel set (naturalmente il risultato sarà un false)

I set possono facilmente essere trasformati in un Array

Anche iterare un set è roba da poche righe di codice

 

Qui trovi la live demo di tutto il codice su CodePen.

Come rimuovere le righe duplicate in una lista

Rimuovere le righe duplicate su TextWrangler
Quando si deve maneggiare dei dati testuali questa esigenza è abbastanza comune e se con alcuni editor si tratta di un operazione banale su molti altri non lo è quindi ecco come rimuovere le righe duplicate di una lista su . . .

VI / VIM

Questo sarebbe quello complesso da utilizzare giusto? Quello ostico solo per smanettoni . . . sicuro!
Per rimuovere le righe duplicate basta:

 

JEdit

L’unica soluzione efficace per rimuovere le linee duplicate è l’uso del replace nativo con RegEx. La stringa da cercare è:

Da sostituire con:

 

Notepad++ (Windows)

La forza di Notepad++ sono le migliaia di estensioni disponibili quindi usiamole! Quella adatta al nostro obiettivo si chiama TextFX, cercala installala e dopo basterà utilizzare il menù per raggiungere l’obiettivo.

 

TextWrangler (OS X)

Le GUI dei software per Mac sono famose per la loro immediatezza e anche TextWrangler non si smentisce, niente plugin, niente comandi e niente installazioni aggiuntive, per rimuovere le linee duplicate basta trovare la funzione giusta tra i menù.

In questo caso è possibile modificare le opzioni di gestione delle linee duplicate nella finestra che apparirà subito prima di portare a termine il processo. Le opzioni sono elementari quindi non serve spiegarle.

 

Se hai qualche altra idea per effettuare la stessa operazione con questi o con altri editor che ho omesso . . . fatti avanti così aggiorniamo questo articolo!

 

duet: schermi multipli per sviluppatori on-the-road

Sviluppare o progettare su due schermi è utile e quando utilizzi un ultrabook con uno schermo ridotto diventa indispensabile per mantenere un buon livello di produttività. L’unico problema del secondo monitor è l’ingombro, non è certo qualcosa da portarsi in giro.

Da un po ho scoperto un app interessantissima per risolvere questo problema e ora posso godermi il dual screen anche in mobilità durante le trasferte. Si tratta di duet, costa 20€ e va installata sia sul Mac che sul dispositivo da utilizzare come secondo schermo che può essere sia un iPad che un iPhone. Una volta completate le installazioni basterà collegare con un cavo i due device e seguire le istruzioni su schermo. Il procedimento è semplicissimo.

 

duet dual screen iPad

 

C’è da dire che duet non funziona bene con tutti i dispositivi compatibili, è necessario un Mac performante e un iPad di ultima o penultima generazione per dare il meglio di se. Su iPhone per via delle ridotte dimensioni dello schermo è pressoché inutile mentre sugli iPad più vecchi i lag sono troppi per un utilizzo serio.

Un altra nota dolente di duet sono i consumi, a massima risoluzione purtroppo sono necessarie molte risorse e questo si traduce in poca autonomia e in un dispositivo che tende a riscaldarsi. Con la configurazione che ho in uso (MacBook 12 + iPad PRO 12) si riesce a lavorare per metà giornata senza intoppi ma con gli iPad più piccoli l’autonomia scende e il calore si fa sentire soprattutto d’estate. Esistono delle modalità di risparmio energetico che abbattono la qualità dell’immagine ma non sono adatte ad un uso in produzione, le ho provate una volta per i test ma poi ho sempre tenuto l’impostazione migliore.

Sia il “client” per il dispositivo mobile che il “server” per il Mac sono ben scritti e non danno problemi, tutte le impostazioni (parecchie) sono chiare e facilmente raggiungibili. L’app è disponibile anche per Windows ma non ho fatto nessun test con questa piattaforma quindi non so dirti se funziona altrettanto bene

Duet non è economico e ha diversi handicap rispetto ad uno schermo tradizionale ma in realtà è l’unica soluzione per lavorare su due schermi in mobilità e i risultati sono tutto sommato accettabili. In fin dei conti riesco a raddoppiare la mia superficie di lavoro (e la produttività) con il minimo ingombro e questo mi basta!

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.