{"id":22356,"date":"2020-12-22T12:39:55","date_gmt":"2020-12-22T11:39:55","guid":{"rendered":"https:\/\/savinol.sg-host.com\/webdesign\/creare-unapp-in-javascript-in-un-unico-tweet\/"},"modified":"2020-12-22T12:39:55","modified_gmt":"2020-12-22T11:39:55","slug":"creare-unapp-in-javascript-in-un-unico-tweet","status":"publish","type":"post","link":"https:\/\/www.nycwebdesign.eu\/webdesign\/creare-unapp-in-javascript-in-un-unico-tweet\/","title":{"rendered":"Creare un’app in JavaScript… in un unico tweet"},"content":{"rendered":"


\n<\/p>\n

\n

Esistono moltissimi linguaggi di programmazione, ognuno con le sue peculiarit\u00e0. Ci sono quelli pi\u00f9 \u201cverbosi\u201d, e quelli pi\u00f9 \u201csintetici\u201d. Tra questi ultimi, \u00e8 spesso menzionato Python<\/a>, mentre non si cita molto frequentemente JavaScript<\/a>. Questo perch\u00e9, in effetti, quest\u2019ultimo non \u00e8 un linguaggio noto per permettere l\u2019implementazione di script in poche righe di codice. Ma forse non tutti la pensano cos\u00ec.<\/p>\n

Qualche giorno fa, infatti, un utente di Twitter<\/a> ha lanciato una curiosa sfida, ponendo la seguente domanda: \u00e8 possibile realizzare un\u2019applicazione per la gestione di TODO list in JavaScript, facendo s\u00ec che tutto il codice non superi la dimensione massima consentita per un singolo tweet<\/strong> (ovvero 280 caratteri)?<\/p>\n

\n
\n
\n

#JavaScript<\/a> Challenge:<\/p>\n

Can you make a TO-DO app within a single Tweet? (280 chars)<\/p>\n

The app should be able to add tasks, strike-through finished tasks & clear all tasks.<\/p>\n

Any general-purpose library is allowed.
Starting HTML body should be empty except the <script>.#JS<\/a> #code<\/a><\/p>\n

\u2014 Dumi (@dumindaxsb) December 20, 2020<\/a><\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n

Pu\u00f2 sembrare impossibile, eppure in molti ci sono riusciti.<\/p>\n

I requisiti dell\u2019app<\/h2>\n

Pi\u00f9 nello specifico, l\u2019obiettivo di questa coding challenge<\/strong> consiste nel creare un\u2019applicazione che consenta di aggiungere task, contrassegnarli come risolti, e cancellarli tutti. Lo scopo di questa sfida consiste nel generare tutto il codice, che andr\u00e0 poi inserito all\u2019interno di un tag <script><\/code>, a suo volta posto all\u2019interno del <body><\/code> (vuoto) di una pagina HTML<\/a>.<\/p>\n

Infine, l\u2019autore della sfida non ha posto vincoli sulle librerie JavaScript da utilizzare: \u00e8 quindi permesso l\u2019uso di framework<\/a> come Vue.js<\/a>, React<\/a> o Angular<\/a>, cos\u00ec come \u00e8 valido optare per una soluzione in puro JavaScript.<\/p>\n

Soluzione #1: 242 caratteri<\/h2>\n

Una prima soluzione che soddisfa tutti i requisiti \u00e8 fornita dallo stesso autore, richiedendo un totale di 242 caratteri:<\/p>\n

\n_(\"body\").append(i=_(\"+input\"),_(\"+button\").text(\"+\").on(\"click\",e=>{_(\"ol\").append(_(\"+li\").text(i.val()).on(\"click\",e=>{_(e.target).css(\"textDecoration\",\"line-through\")}))}),_(\"+ol\"),_(\"+button\").text(\"X\").on(\"click\",e=>{_(\"li\").remove()}))\n<\/code><\/pre>\n
\"\"\/<\/a><\/div>\n
Ovviamente il primo problema che salta all\u2019occhio \u00e8 la scarsissima leggibilit\u00e0, che per\u00f2 \u00e8 lecito aspettarsi per un insieme di vincoli cos\u00ec stringenti. Inoltre, per questo tipo di soluzione l\u2019autore ha fatto uso di una libreria di comodo, che permette di gestire pi\u00f9 facilmente (e, soprattutto, con meno caratteri) la manipolazione del DOM<\/a>.<\/p>\n
Soluzione #2: Vue.js<\/h2>\n
Un\u2019ulteriore soluzione, questa volta di un altro utente, utilizza invece Vue.js<\/strong>. In questo caso, le versioni offerte sono due:<\/p>\n
    \n
  • La versione originale, che utilizza pochi caratteri ma sfora il limite dei 280:\n
    \nvar x={\n  data(){\n    return{\n      t:[],\n      k:\"\",\n    }\n  },\n  template:'<input @keyup.enter=\"t.push(k)\" v-model=\"k\"><a @click=\"t=[]\">❎<\/a><p v-for=\"(v,i) in t\"><a @click=\"t.splice(i,1)\">🅾️<\/a>{{v}}<\/p>',\n}\nVue.createApp(x).mount(\"body\")\n<\/code><\/pre>\n<\/li>\n
  • Una seconda versione \u201cminificata\u201d tramite uno dei minifier disponibili sul web, molto meno leggibile ma in grado di rispettare perfettamente il suddetto limite:\n
    \nvar x={data:()=>({t:[],k:\"\"}),template:'<input @keyup.enter=\"t.push(k)\" v-model=\"k\"><a @click=\"t=[]\">❎<\/a><p v-for=\"(v,i) in t\"><a @click=\"t.splice(i,1)\">🅾️<\/a>{{v}}<\/p>'};Vue.createApp(x).mount(\"body\")\n<\/code><\/pre>\n<\/li>\n<\/ul>\n
    \u00c8 interessante notare il sapiente uso delle emoji<\/strong>, che in questo contesto permettono effettivamente di dare un tocco di stile, nonostante i pochi caratteri a disposizione:<\/p>\n
    \"\"\/<\/a><\/div>\n
    Soluzione #3: plain JavaScript<\/h2>\n
    L\u2019ultima soluzione che vediamo non utilizza nessun framework n\u00e9 alcuna libreria esterna, bens\u00ec un molto pi\u00f9 semplice form HTML:<\/p>\n
    \ndocument.write(\"<form onsubmit='return l.insertAdjacentHTML(`beforeend`,`<li>${x.value.replace(\/&\/,`&amp;`).replace(\/<\/g,`&lt;`)} <button onclick=this.parentNode.remove()>Delete<\/button>`),x.value=``,!1'><input id=x><\/form><ul id=l>\")\n<\/code><\/pre>\n
    Di seguito \u00e8 visibile il risultato finale:<\/p>\n
    \"\"\/<\/a><\/div>\n
    Conclusione<\/h2>\n
    Ci sono moltissime altre soluzioni, che gli utenti continuano a proporre sia su Twitter, sia su HackerNews<\/a> (dove questa sfida \u00e8 stata raccolta da moltissimi sviluppatori). \u00c8 comunque un esercizio molto utile per chiunque si occupi di sviluppo in JavaScript, e proprio per questo ci sentiamo di consigliare a tutti di fare qualche tentativo.<\/p>\n
    Fonte<\/em>: Rukshan’s Blog<\/span><\/a><\/p>\n<\/div>\n