{"id":25300,"date":"2020-12-22T18:30:48","date_gmt":"2020-12-22T17:30:48","guid":{"rendered":"https:\/\/www.multimediaweb.eu\/web-agency\/creare-unapp-in-javascript-in-un-unico-tweet\/"},"modified":"2020-12-22T18:30:50","modified_gmt":"2020-12-22T17:30:50","slug":"creare-unapp-in-javascript-in-un-unico-tweet","status":"publish","type":"post","link":"https:\/\/www.multimediaweb.eu\/web-agency\/creare-unapp-in-javascript-in-un-unico-tweet\/","title":{"rendered":"Produrre un’app sopra JavaScript… sopra un inarrivabile tweet"},"content":{"rendered":"


\n<\/p>\n

\n

Esistono moltissimi linguaggi intorno a progettazione, nonostante le sue tratto caratteristico. Ci sono quelli maggiormente \u201cverbosi\u201d, e quelli maggiormente \u201csintetici\u201d. Entro questi ultimi, \u00e8 numeroso nominato Python<\/a>, laddove n\u00e9 si cita molti spesso JavaScript<\/a>. Questo scopo, sopra , quest\u2019all’ultima moda n\u00e9 \u00e8 un favella famoso per concludere ammettere l\u2019implementazione intorno a script sopra poche righe intorno a regolamento. Obiezione dubbio n\u00e9 tutti la pensano tanto.<\/p>\n

Qualche fa, invero, un fruitore intorno a Twitter<\/a> ha lanciato una curiosa , ponendo la supplica: \u00e8 eventuale concretare un\u2019decorazione per concludere la organizzazione intorno a TODO list sopra JavaScript, facendo certo del tutto il regolamento n\u00e9 superi la ingombro precetto consentita per concludere un tweet<\/strong> (ossia 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 pagliaccetto 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 apparire folle, nondimeno sopra ci sono riusciti.<\/p>\n

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

Diversi nello particolare, l\u2019equanime intorno a questa coding challenge<\/strong> consiste nel procreare un\u2019decorazione consenta intorno a task, contrassegnarli risolti, e cancellarli tutti. Quello aspirazione intorno a questa consiste nel del tutto il regolamento, andr\u00e0 appresso inserito all\u2019casalingo intorno a un tag <script><\/code>, a correlativo tempo punto all\u2019casalingo del <pagliaccetto><\/code> (vacante) intorno a una episodio HTML<\/a>.<\/p>\n

Finalmente, l\u2019compositore della n\u00e9 ha punto vincoli sulle librerie JavaScript per sfruttare: \u00e8 dunque l\u2019costumanza intorno a framework<\/a> Vue.js<\/a>, React<\/a> Angular<\/a>, tanto \u00e8 poderoso per concludere una liquefazione sopra nitido JavaScript.<\/p>\n

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

Una dinanzi liquefazione soddisfa tutti i requisiti \u00e8 fornita dallo gemello compositore, richiedendo un globale intorno a 242 caratteri:<\/p>\n

\n_(\"pagliaccetto\").append(i=_(\"+\"),_(\"+button\").text(\"+\").(\"click\",e=>{_(\"ol\").append(_(\"+\").text(i.val()).(\"click\",e=>{_(e.target).css(\"textDecoration\",\"line-through\")}))}),_(\"+ol\"),_(\"+button\").text(\"X\").(\"click\",e=>{_(\"\").remove()}))\n<\/code><\/pre>\n
\"\"\/<\/a><\/div>\n
 il antico dubbio  salta all\u2019sguardo \u00e8 la scarsissima comprensibilit\u00e0,  tuttavia \u00e8 onesto ripromettersi per concludere un agglomeramento intorno a vincoli tanto stringenti. Oltre a questo, per concludere questo emblema intorno a liquefazione l\u2019compositore ha compiuto costumanza intorno a una  intorno a ospitale,  permette intorno a organizzare maggiormente comodamente (e, specialmente, nonostante eccetto caratteri) la manipolazione del DOM<\/a>.<\/p>\n
Soluzione di continuit\u00e0 #2: Vue.js<\/h2>\n
Un\u2019posteriore liquefazione, questa tempo intorno a un rimanente fruitore, utilizza  Vue.js<\/strong>. Per questo ipotesi, le versioni offerte sono :<\/p>\n
    \n
  • La  genuino,  utilizza pochi caratteri invece sfora il linea di demarcazione dei 280:\n
    \nvar x={\n  patronato(){\n    return{\n      t:[],\n      k:\"\",\n    }\n  },\n  template:'< @keyup.enter=\"t.push(k)\" v-model=\"k\"><a @click=\"t=[]\">❎<\/a><p v-for=\"(v,i) sopra t\"><a @click=\"t.splice(i,1)\">🅾️<\/a>{{v}}<\/p>',\n}\nVue.createApp(x).mount(\"pagliaccetto\")\n<\/code><\/pre>\n<\/li>\n
  • Una seconda  \u201cminificata\u201d percorso  dei minifier disponibili sul web, molti eccetto leggibile invece sopra situazione intorno a venerare divinamente il sunnominato linea di demarcazione:\n
    \nvar x={patronato:()=>({t:[],k:\"\"}),template:'< @keyup.enter=\"t.push(k)\" v-model=\"k\"><a @click=\"t=[]\">❎<\/a><p v-for=\"(v,i) sopra t\"><a @click=\"t.splice(i,1)\">🅾️<\/a>{{v}}<\/p>'};Vue.createApp(x).mount(\"pagliaccetto\")\n<\/code><\/pre>\n<\/li>\n<\/ul>\n
    \u00c8 singolare  il saccente costumanza delle emoji<\/strong>,  sopra questo  permettono concretamente intorno a consegnare un palpamento intorno a costume, in barba a i pochi caratteri a decreto:<\/p>\n
    \"\"\/<\/a><\/div>\n
    Soluzione di continuit\u00e0 #3: plain JavaScript<\/h2>\n
    L\u2019ultima liquefazione  vediamo n\u00e9 utilizza nessun framework neanche alcuna  esterna, certamente un molti maggiormente disinvolto form HTML:<\/p>\n
    \ndocument.write(\"<form onsubmit='return l.insertAdjacentHTML(`beforeend`,`<>${x.value.replace(\/&\/,`&amp;`).replace(\/<\/g,`&lt;`)} <button onclick=this.parentNode.remove()>Delete<\/button>`),x.value=``,!1'>< id=x><\/form><ul id=l>\")\n<\/code><\/pre>\n
    Con filza \u00e8 indubbio il effetto conclusivo:<\/p>\n
    \"\"\/<\/a><\/div>\n
    Compimento<\/h2>\n
    Ci sono moltissime altre soluzioni,  a lui utenti continuano a progettare sia su Twitter, sia su HackerNews<\/a> ( questa  \u00e8 stata collezione per moltissimi sviluppatori). \u00c8 in ogni modo un maneggio molti adatto per concludere chiunque si occupi intorno a crescita sopra JavaScript, e legittimo per concludere questo ci sentiamo intorno a indurre a tutti intorno a causare qualche prova.<\/p>\n
    Causa<\/em>: Rukshan’s Blog<\/span><\/a><\/p>\n<\/div>\n