JavaScript Navigator: informazioni sul browser.

Gran parte di quello che conosci di chi usa la tua WebApp o naviga il tuo sito è codificato nell’oggetto Navigator di JavaScript. Tra le tante proprietà ho scelto quelle che ritengo più importanti. Sono tutte elencate, spiegate e illustrate in questo pezzo di codice.

 

Il contenuto di UserAgent è molto completo ma diventa ostico da interpretare. Quando hai bisogno di questi dati utilizza UAParser (faisalman) e diventerà tutto più semplice. Naturalmente è open source.

Per quanto riguarda invece la geolocalizzazione bisogna tener presente il fatto che i browser necessitano dell’autorizzazione dell’utente per permettere ad un determinato sito di accedere ad informazioni sensibili come la posizione geografica. Questo significa che quando proverai la Live Demo CodePen linkata a fine articolo devi attivare questa funzionalità altrimenti vedrai in console soltanto un errore.

 

Trovi il codice con la LIVE DEMO anche su CodePen.

Timers in JavaScript

Due funzioni e mille ambiti applicativi. Per invocare una funzione dopo un intervallo di tempo impostando un timer con JavaScript puoi usare setTimeout() e setInterval(). Vediamo di cosa si tratta.

In buona sostanza entrambe le funzioni fanno la stessa cosa anche se con una leggera differenza. La prima, setTimeout() dopo un ritardo (impostato come parametro) lancia la funzione desiderata e può far partire ricorsivamente un altro setTimeout(). Con setInterval() invece si affida all’interprete il compito di avviare la funzione in loop ad ogni intervallo di tempo.

Nella pratica questo significa che setInterval() è più accurata quando si tratta di ripetere la stesa operazione più volte mentre setTimeout() è la scelta giusta per eseguire la funzione una sola volta dopo un intervallo di tempo predefinito.

Questo è un esempio di utilizzo di setTimeout()

 

Questo è un esempio di utilizzo di setInterval()

 

Mostrare invece come usare setTimeout() con la ricorsività per imitare la funzionalità di setInterval() mi sembra inutile perchè è un artificio poco efficiente e quindi sconsigliato nella quasi totalità dei casi.

Nuovo Sticker: Vintage Computer

La prima new entry degli stickers :#/promezio mi piace da matti. Vintage Computer è un vero sticker geek appena nato nella fucina c01n e finito immediatamente qui tra le nuove proposte . . . guardalo e capirai perchè ho deciso di inserirlo.

:#/ promezio sticker #954
:#/ promezio sticker #954

Un pezzo storico realizzato da uno dei Nerd più noti di sempre che ha stregato un’intera generazione sia per il suo design squadrato che per le sue funzionalità all’avanguardia che portavano nel futuro il mondo dei Computer.

Credo non sia necessario essere #AppleFans per apprezzarlo.

Lo trovi nella sezione stickers!

Usabilità: Instagram case study

La nuova veste grafica di Instagram per iOS è già su AppStore da diversi giorni e tutte le volte che l’ho utilizzata ho sempre pensato all’usabilità. Dopo la rivoluzione delle icone é stata la volta dei pulsanti, ed ecco il dilemma: l’app adesso “teoricamente” é più usabile ma “praticamente” è l’esatto opposto!

Il pulsante follow/unfollow porta inevitabilmente all’errore gli utenti abituali, eccoli entrambi:
Instagram buttons
Instagram buttons

Come noti adesso sono teoricamente più corretti perché sia nei colori che nelle immagini rendono chiaramente l’idea di un’azione da compiere (il follow) e di un’azione già’ compiuta (unfollow di un utente seguito).

Nella pratica però le cose si complicano perché entra in gioco l’abitudine e la versione precedente che usiamo oramai da anni ha assuefatto gli utenti ad uno schema differente. Adesso usando l’app senza particolare attenzione si sbaglia spesso, soprattutto nella pagina delle notifiche. Scorrendo le attività si confondono continuamente gli utenti da seguire con gli utenti che già fanno parte della nostra lista.

L’usabilità è una questione complessa proprio per questo: i principi fondamentali sono sempre validi ma le regole specifiche vanno adattate al software che si progetta, alla sua storia, ai suoi utenti e alle loro abitudini. Utilizzare un colore più attivo per un tasto già selezionato o per un’azione passiva in fin dei conti non confonde i nuovi users più di tanto, era un errore teorico che comunque poteva essere ignorato nella pratica . Uno stravolgimento dello schema dei colori attivi/passivi porta invece gli utenti abituali a sbagliare fino a che non ci si abituerà di nuovo e ti posso assicurare che ci vuole parecchio.

Basta un tasto, anzi il suo colore, per cambiare l’esperienza d’uso di un app. Qual’é il segreto per creare una GUI che non necessita di spiegazioni per essere usata correttamente?

Progettarla, testarla ed usarla con gli occhi degli utenti senza slegare concettualmente il contenitore dal contenuto, l’attuatore dal comando attuato, il frontend dal codice che lo governa.

chart.js – Grafici personalizzato con poche righe di codice

Tante varianti disponibili, animazioni automatizzate e personalizzazione a 360°. Queste caratteristiche rendono chart.js una delle soluzioni migliori per mostrare graficamente un set di dati. Proviamo a creare qualcosa con il set minimo di personalizzazioni necessarie, massimo risultato con poche righe di codice.

Procurarsi i sorgenti è semplice, con i CDN che trovi qui basta importare i file. Su GitHub puoi scaricare la versione completa o puoi integrarlo in un progetto che utilizza bower (bower install chart.js –save) o npm (npm install chart.js –save).

Iniziamo inserendo una canvas con tag “” in una pagina html base

Per far funzionare il grafico basta definire i dati e la scala in un documento JavaScript

E assemblare il tutto

 

Con qualche riga di CSS rendiamo tutto più presentabile

 

Questo è il risultato.

SU CODEPEN LA DEMO LIVE

Geek Stickers

Geek Stickers è una nuova pagina ma anche un nuovo side-project per :#/promezio nato grazie ad una chiacchierata che ha portato alla collaborazione con una tipografia specializzata in stickers di qualità.

Ho sempre amato le cose fatte bene e ho visto passione e cura artigianale nelle produzioni di c01n . . . è vero, si tratta di una realtà giovane che ha ancora bisogno di tempo per crescere e maturare ma parte talmente bene che è già il partner ideale per trasformare le idee di un nerd doc (io?) in stickers divertenti e originali.

Geek stickers è una piccola collezione di adesivi originale pensati per mettere in mostra con orgoglio la nostra attitudine geek – nerd. Immagini e frasi che raccontano un mondo fatto di tecnologia ma sopratutto di persone che amano conoscere e smontare qualsiasi cosa per scoprire come funziona.

La collezione sarà dinamica, questo significa che tutte le produzioni sono a tiratura limitata e finito uno stock si passa al design successivo, avrai sempre qualcosa di nuovo per personalizzare i tuoi device e i mezzi che usi tutti i giorni rendendoli davvero tuoi.

I costi? Ridotti al minimo, considerando le spese di spedizione incluse e la qualità della carta e degli inchiostri scelti per le realizzazioni. Ricorda . . . tutti i Geek Stickers targati :#/promezio sono prodotti artigianali e rigorosamente #madeInItaly!

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.