{"id":836,"date":"2018-05-29T07:38:45","date_gmt":"2018-05-29T05:38:45","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/i-diari-di-viaggio-di-mio-nonno-e-altri-task-ripetitive\/"},"modified":"2018-05-29T07:38:45","modified_gmt":"2018-05-29T05:38:45","slug":"i-diari-di-viaggio-di-mio-nonno-e-altri-task-ripetitive","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/i-diari-di-viaggio-di-mio-nonno-e-altri-task-ripetitive\/","title":{"rendered":"I diari di viaggio di mio nonno e altri task ripetitivi"},"content":{"rendered":"

Mio nonno, James, era un archiviatore meticoloso. Teneva dei diari scritti a mano contenenti i dettagli di qualsiasi cosa, dalle visite dal dottore alle fluttuazioni giornaliere delle azioni che possedeva. Ho scoperto questa parte della sua vita solo sette anni dopo la sua morte, quando il seminterrato dei miei si \u00e8 allagato alla Vigilia di Natale del 2011 e abbiamo trovato i suoi diari mentre pulivamo il danno. Pi\u00f9 di tutto, mi hanno impressionato i suoi archivi di viaggio. Ha documentato ogni singolo viaggio mai fatto, includendo date, paesi e citt\u00e0 visitate, mezzi di trasporto e persone con cui ha viaggiato. In totale, ha lasciato gli Stati Uniti 99 volte, visitato 80 paesi e passato 1223 giorni per mare su 48 navi.<\/p>\n

\"Una<\/p>\n

Una sezione del diario di viaggio.<\/p>\n<\/div>\n

Avevo solo 24 anni quando \u00e8 morto, cos\u00ec non mi sono reso conto di aver ereditato cos\u00ec tante delle sue abitudini di archiviazione, scrittura di diari e collezionismo. E non ho mai avuto l’occasione di fargli molte domande sui suoi viaggi (come il motivo per cui and\u00f2 in Venezuela 12 volte o cosa ci faceva in Siria e a Beirut negli anni ’50). Quindi, nello sforzo di scoprire di pi\u00f9 su di lui, ho deciso di creare un’infografica dei suoi diari di viaggio.<\/p>\n

Oggi, diamo per scontato di poter controllare i mercati sui nostri telefoni o di andare online e vedere la documentazione delle visite dal dottore. I tipi di task ripetitivi che mio nonno faceva potrebbero sembrare eccessivi, specialmente per i giovani web developer e designer che non hanno mai dovuto farli. Ma mio nonno non aveva alcun metodo di archiviazione oltre a carta e penna per la maggior parte della sua vita, quindi questa era una parte normale e specialmente vitale della sua routine giornaliera.<\/p>\n

\"Una<\/p>\n

SS Amor nelle Indie Occidentali. Scattata dal nonno dell’autore nel 1939.<\/p>\n<\/div>\n

\"Una<\/p>\n

New York City. Scattata dal nonno dell’autore, probabilmente negli anni ’30.<\/p>\n<\/div>\n

Che stiate processando Sass, riducendo al minimo o usando Autoprefixer, state usando dei tool che svolgono i compiti noiosi e ripetitivi che prima si dovevano fare a mano, sebbene in un medium differente.<\/p>\n

Ma cosa fate quando vi trovate di fronte a un problema che non pu\u00f2 essere risolto con un plugin, come i dati di viaggio di mio nonno? Se siete un designer, qual \u00e8 il modo migliore per strutturare dati non convenzionali in modo da potervi concentrare solo sul design?<\/p>\n

La mia idea per la web app di viaggio era di tracciare un grafico per ogni paese basandomi sul numero di visite di mio nonno. Come paese visitato da lui pi\u00f9 volte (ventidue), Bermuda avrebbe avuto una barra del grafico che sarebbe arrivata al 100% lungo lo schermo, mentre un paese visitato undici volte (St. Thomas, per esempio) sarebbe stato lungo circa il 50%, le proporzioni leggermente aggiustate per accomodare nome e visite. Volevo anche che ciascuna barra del grafico fosse del colore principale della bandiera dello stato.<\/p>\n

Il grande problema per cominciare era che alcuni dati erano su carta e altri erano gi\u00e0 stati trascritti in un file di testo. Avrei potuto scrivere HTML e CSS a mano, ma volevo avere l’opzione di mostrare i dati in modi diversi. Mi serviva un file JSON.<\/p>\n

Ho tediosamente trascritto i dati di viaggio rimanenti in un file di testo separato da tab per gli stati. Ho aggiunto il nome, il numero di visite e il colore della bandiera.<\/p>\n

.<\/span>.<\/span>.<\/span>\nhonduras\t    1<\/span>    #0051ba<\/span>\nsyria\t1<\/span>\t#E20000\nvenezuela\t    16<\/span>    #fcd116<\/span>\nenewetak\t2<\/span>\trgb(<\/span>0<\/span>,<\/span>56<\/span>,<\/span>147<\/span>)<\/span>\n.<\/span>.<\/span>.<\/span>\n<\/code><\/pre>\n
Per le navi, ho aggiunto la data e il nome:<\/p>\n
.<\/span>.<\/span>.<\/span>\n1941<\/span>    SS Granada\n1944<\/span>    USS Alimosa\n1945<\/span>    USS Alcoa Patriot\n.<\/span>.<\/span>.<\/span>\n<\/code><\/pre>\n
Creare a mano un file JSON avrebbe richiesto un’eternit\u00e0, quindi ho usato JavaScript per iterare nei file di testo e creare due file JSON separati: uno per gli stati e uno per le navi, che poi avrei messo insieme.<\/p>\n
Per prima cosa, ho usato readFileSync()<\/code> e trim()<\/code> di Node per rimuovere qualunque virgoletta alla fine del file per evitare un oggetto vuoto nei risultati:<\/p>\n
const fs =<\/span> require(<\/span>'fs'<\/span>)<\/span>;<\/span>\n\nlet<\/span> countriesData =<\/span> fs.<\/span>readFileSync(<\/span>'countries.txt'<\/span>,<\/span> 'utf8'<\/span>)<\/span>\n\t.<\/span>trim(<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n
Questo ha ritornato i contenuti del file countries.txt<\/code> e li ha memorizzati in una variabile chiamata countriesData<\/code>. A questo punto, ho mandato in uscita la variabile alla console, che ha mostrato i dati che erano stati raggruppati in una stringa gigante con un insieme di tab (\\t<\/code>) e newlines (\\n<\/code>):<\/p>\n
\"angaur\\t2\\t#56a83c\\nantigua\\t5\\t#ce1126\\nargentina\\t2\\trgb(117,170,219)\\naruba\\t10\\trgb(0,114,198)\\nbahamas\\t3\\trgb(0,173,198)\\nbarbados\\t6\\trgb(255,198,30)\\nbermuda\\t22\\trgb(0,40,104)\\nbonaire\\t1\\trgb(37,40,135)\\nguyana\\t2\\trgb(0,158,73)\\nhonduras\\t1\\trgb(0,81,186)\\nvirgin Islands\\t2\\trgb(0,40,104)\\nbrazil\\t3\\trgb(30,181,58)\\nburma\\t1\\trgb(254,203,0)\\ncanary Islands\\t1\\trgb(7,104,169)\\ncanal Zone\\t7\\trgb(11,14,98)\\ncarriacou\\t1\\trgb(239,42,12)\\n ...\"<\/span>\n<\/code><\/pre>\n
Poi, ho suddiviso la stringa ai line break (\\n<\/code>):<\/p>\n
const fs =<\/span> require(<\/span>'fs'<\/span>)<\/span>;<\/span>\n\nlet<\/span> countriesData =<\/span> fs.<\/span>readFileSync(<\/span>'countries.txt'<\/span>,<\/span> 'utf8'<\/span>)<\/span>\n.<\/span>trim(<\/span>)<\/span>\n.<\/span>split(<\/span>'\\n'<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n
Dopo split()<\/code>, nella console, i dati degli stati vivevano in un array:<\/p>\n
[<\/span>\n  \"angaur\\t2\\t#56a83c\"<\/span>,<\/span>\n  \"antigua\\t5\\t#ce1126\"<\/span>,<\/span>\n  \"argentina\\t2\\trgb(117,170,219)\"<\/span>,<\/span>\n  \"aruba\\t10\\trgb(0,114,198)\"<\/span>,<\/span>\n  \"bahamas\\t3\\trgb(0,173,198)\"<\/span>,<\/span>\n  \"barbados\\t6\\trgb(255,198,30)\"<\/span>,<\/span>\n  \"bermuda\\t22\\trgb(0,40,104)\"<\/span>,<\/span>\n  .<\/span>.<\/span>.<\/span>\n]<\/span>\t\n<\/code><\/pre>\n
Volevo suddividere ogni item dei dati dello stato ai tab, separando il nome, il numero di visite e il colore. Per farlo, ho usato map()<\/a><\/code>, che itera e fa girare una funzione su ogni item, ritornando qualcosa di nuovo. In questo caso, suddivide la stringa ad ogni tab che trova e ritorna un array nuovo:<\/p>\n
const fs =<\/span> require(<\/span>'fs'<\/span>)<\/span>;<\/span>\n\nlet<\/span> countriesData =<\/span> fs.<\/span>readFileSync(<\/span>'countries.txt'<\/span>,<\/span> 'utf8'<\/span>)<\/span>\n\t.<\/span>trim(<\/span>)<\/span>\n\t.<\/span>split(<\/span>'\\n'<\/span>)<\/span>\n\t.<\/span>map(<\/span>item =><\/span> item.<\/span>split(<\/span>'\\t'<\/span>)<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n
Dopo aver usato map()<\/code>, countriesData<\/code> era un array di array con ogni paese e i suoi dati suddivisi in item separati:<\/p>\n
[<\/span>\n  [<\/span>\n    \"angaur\"<\/span>,<\/span>\n    \"2\"<\/span>,<\/span>\n    \"#56a83c\"<\/span>\n  ]<\/span>,<\/span>\n  [<\/span>\n    \"antigua\"<\/span>,<\/span>\n    \"5\"<\/span>,<\/span>\n    \"#ce1126\"<\/span>\n  ]<\/span>,<\/span>\n  [<\/span>\n    \"argentina\"<\/span>,<\/span>\n    \"2\"<\/span>,<\/span>\n    \"rgb(117,170,219)\"<\/span>\n  ]<\/span>,<\/span>\n  [<\/span>\n    \"aruba\"<\/span>,<\/span>\n    \"10\"<\/span>,<\/span>\n    \"rgb(0,114,198)\"<\/span>\n  ]<\/span>,<\/span>\n  [<\/span>\n    \"bahamas\"<\/span>,<\/span>\n    \"3\"<\/span>,<\/span>\n    \"rgb(0,173,198)\"<\/span>\n  ]<\/span>,<\/span>\n  .<\/span>.<\/span>.<\/span>\n]<\/span>\n<\/code><\/pre>\n
const fs =<\/span> require(<\/span>'fs'<\/span>)<\/span>;<\/span>\n\nlet<\/span> countriesData =<\/span> fs.<\/span>readFileSync(<\/span>'countries.txt'<\/span>,<\/span> 'utf8'<\/span>)<\/span>\n\t.<\/span>trim(<\/span>)<\/span>\n\t.<\/span>split(<\/span>'\\n'<\/span>)<\/span>\n\t.<\/span>map(<\/span>item =><\/span> item.<\/span>split(<\/span>'\\t'<\/span>)<\/span>)<\/span>\n\t.<\/span>reduce(<\/span>(<\/span>countries,<\/span> item)<\/span> =><\/span> {<\/span>\n\t\treturn<\/span> countries;<\/span>\n\t}<\/span>,<\/span> {<\/span>countries:<\/span> [<\/span>]<\/span>}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n
Sapevo di volere che {countries: []}<\/code> contenesse i dati. Quindi, invece di crearlo nel primo passo e testarne l’esistenza in ogni iterazione, ho aggiunto {countries: []}<\/code> all’oggetto risultante. In questo modo, esisteva prima che cominciassi ad iterarvi.<\/p>\n
Questo processo ha ritornato un oggetto vuoto perch\u00e9 non avevo detto a reduce()<\/code> cosa fare con ogni array di dati.<\/p>\n
Per sistemarlo, ho usato reduce()<\/code> per fare la push e aggiungere un nuovo oggetto a ogni stato con il nome (item[0]<\/code>), le visite (item[1]<\/code>) e il colore (item[2]<\/code>) nell’oggetto finale. Infine, ho usato una funzione che trasforma in maiuscolo ogni valore del nome per assicurarmi che la formattazione fosse consistente.<\/p>\n
const fs =<\/span> require(<\/span>'fs'<\/span>)<\/span>;<\/span>\n\nconst cap =<\/span> (<\/span>s)<\/span> =><\/span> {<\/span>\n  return<\/span> s.<\/span>charAt(<\/span>0<\/span>)<\/span>.<\/span>toUpperCase(<\/span>)<\/span> +<\/span> s.<\/span>slice(<\/span>1<\/span>)<\/span>;<\/span>\n}<\/span>;<\/span>\n\nlet<\/span> countriesData =<\/span> fs.<\/span>readFileSync(<\/span>'countries.txt'<\/span>,<\/span> 'utf8'<\/span>)<\/span>\n\t.<\/span>trim(<\/span>)<\/span>\n\t.<\/span>split(<\/span>'\\n'<\/span>)<\/span>\n\t.<\/span>map(<\/span>item =><\/span> item.<\/span>split(<\/span>'\\t'<\/span>)<\/span>)<\/span>\n\t.<\/span>reduce(<\/span>(<\/span>countries,<\/span> item)<\/span> =><\/span> {<\/span>\n\t\tcountries[<\/span>\"countries\"<\/span>]<\/span>.<\/span>push(<\/span>{<\/span>\n\t\t\tname:<\/span> cap(<\/span>item[<\/span>0<\/span>]<\/span>)<\/span>,<\/span>\n      \t\t\tvisits:<\/span> item[<\/span>1<\/span>]<\/span>,<\/span>\n      \t\t\tcolor:<\/span> item[<\/span>2<\/span>]<\/span>\n\t\t}<\/span>)<\/span>;<\/span>\n\t\treturn<\/span> countries;<\/span>\n\t}<\/span>,<\/span> {<\/span>countries:<\/span> [<\/span>]<\/span>}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n
Ho usato lo stesso metodo per il file ships.txt<\/code> e ho fatto il merge dei due usando Object.assign<\/code>, un metodo che prende due oggetti e ne crea uno nuovo.<\/p>\n
let<\/span> result =<\/span> Object.<\/span>assign(<\/span>{<\/span>}<\/span>,<\/span> countriesData,<\/span> shipsData)<\/span>;<\/span>\n<\/code><\/pre>\n
Ho usato i dati JSON per creare le barre dell’infografica, definendo il layout per ciascuna con CSS Grid e stili dinamici per larghezza e colore. Guardate il prodotto finale su ninetyninetimes.com<\/a>. Penso che a mio nonno sarebbe piaciuto vedere i suoi diari scritti a mano trasformati in un formato visuale che mostrasse la mole dei suoi viaggi.<\/p>\n
\u00c8 morto nel 2005, ma mi ricordo di avergli mostrato il mio Blackberry e di avergli spiegato internet, mostrandogli come poteva guardare le foto scattate nel mondo e leggere articoli. Ha bevuto un sorso del suo Martini e ha come allontanato lo schermo con la mano. Penso preferisse le note scritte a mano e la vita fuori da internet, qualcosa che molti di noi apprezzano. Dopo aver messo in ordine i suoi diari di viaggio, ho capito pi\u00f9 chiaramente l’importanza che metteva nell’avere esperienze diverse, incontrare nuove persone ed esplorare il mondo senza paura. Per lui, i suoi viaggi erano molto pi\u00f9 che date su una pagina. Adesso sono pi\u00f9 di quello anche per me.<\/p>\n
L’autore vorrebbe ringraziare Mattias Petter Johansson<\/a>, la cui serie video, \u201cFun Fun Function<\/a>\u201d, ha ispirato alcuni ragionamenti in questo articolo.<\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Quando il vostro progetto di design implica dei dati non convenzionali, come strutturate tali dati perch\u00e9 la loro manipolazione sia meno tediosa? Daniel Warren ha affrontato la questione quando ha deciso di creare un’infografica che mostrasse i decenni di lunghi viaggi che suo nonno aveva documentato in diari scritti a mano. Vediamo quali tecniche JavaScript Warren ha usato per minimizzare i task ripetitivi e dare nuova vita ai diari di viaggio di suo nonno<\/p>\n","protected":false},"author":818,"featured_media":7000841,"comment_status":"open","ping_status":"open","template":"","categories":[271,216],"tags":[],"coauthors":[528],"class_list":["post-836","article","type-article","status-publish","has-post-thumbnail","hentry","category-javascript","category-numero-239-19-dicembre-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000841"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=836"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Avrei potuto creare una funzione che prendesse un file di testo e un oggetto o creare uno strumento form-to-JSON, ma mi sembrava un po’ troppo per questo progetto e avevo gi\u00e0 trascritto alcuni dati in file separati prima di concepire l’idea dell’infografica. Potete trovare su CodePen<\/a> il risultato JSON finale.<\/p>\n
Per creare l’output finale per ogni paese, ho usato reduce()<\/a><\/code>, che usa un accumulator e una funzione per creare qualcosa di nuovo, che sia un oggetto, un valore o un array. Accumulator \u00e8 un nome fantasioso per far riferimento al prodotto finale, che nel nostro caso \u00e8 un oggetto ({}<\/code>).<\/p>\n