Produrre un’app sopra JavaScript… sopra un inarrivabile tweet

Esistono moltissimi linguaggi intorno a progettazione, nonostante le sue tratto caratteristico. Ci sono quelli maggiormente “verbosi”, e quelli maggiormente “sintetici”. Entro questi ultimi, è numeroso nominato Python, laddove né si cita molti spesso JavaScript. Questo scopo, sopra , quest’all’ultima moda né è un favella famoso per concludere ammettere l’implementazione intorno a script sopra poche righe intorno a regolamento. Obiezione dubbio né tutti la pensano tanto.

Qualche fa, invero, un fruitore intorno a Twitter ha lanciato una curiosa , ponendo la supplica: è eventuale concretare un’decorazione per concludere la organizzazione intorno a TODO list sopra JavaScript, facendo certo del tutto il regolamento né superi la ingombro precetto consentita per concludere un tweet (ossia 280 caratteri)?

Può apparire folle, nondimeno sopra ci sono riusciti.

I requisiti dell’app

Diversi nello particolare, l’equanime intorno a questa coding challenge consiste nel procreare un’decorazione consenta intorno a task, contrassegnarli risolti, e cancellarli tutti. Quello aspirazione intorno a questa consiste nel del tutto il regolamento, andrà appresso inserito all’casalingo intorno a un tag <script>, a correlativo tempo punto all’casalingo del <pagliaccetto> (vacante) intorno a una episodio HTML.

Finalmente, l’compositore della né ha punto vincoli sulle librerie JavaScript per sfruttare: è dunque l’costumanza intorno a framework Vue.js, React Angular, tanto è poderoso per concludere una liquefazione sopra nitido JavaScript.

Soluzione di continuità #1: 242 caratteri

Una dinanzi liquefazione soddisfa tutti i requisiti è fornita dallo gemello compositore, richiedendo un globale intorno a 242 caratteri:

_("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()}))

il antico dubbio salta all’sguardo è la scarsissima comprensibilità, tuttavia è onesto ripromettersi per concludere un agglomeramento intorno a vincoli tanto stringenti. Oltre a questo, per concludere questo emblema intorno a liquefazione l’compositore ha compiuto costumanza intorno a una intorno a ospitale, permette intorno a organizzare maggiormente comodamente (e, specialmente, nonostante eccetto caratteri) la manipolazione del DOM.

Soluzione di continuità #2: Vue.js

Un’posteriore liquefazione, questa tempo intorno a un rimanente fruitore, utilizza Vue.js. Per questo ipotesi, le versioni offerte sono :

• La genuino, utilizza pochi caratteri invece sfora il linea di demarcazione dei 280:

  
  var x={
    patronato(){
      return{
        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")
  

• Una seconda “minificata” percorso dei minifier disponibili sul web, molti eccetto leggibile invece sopra situazione intorno a venerare divinamente il sunnominato linea di demarcazione:

  
  var 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")
  

È singolare il saccente costumanza delle emoji, sopra questo permettono concretamente intorno a consegnare un palpamento intorno a costume, in barba a i pochi caratteri a decreto:

Soluzione di continuità #3: plain JavaScript

L’ultima liquefazione vediamo né utilizza nessun framework neanche alcuna esterna, certamente un molti maggiormente disinvolto form HTML:

document.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>")

Con filza è indubbio il effetto conclusivo:

Compimento

Ci sono moltissime altre soluzioni, a lui utenti continuano a progettare sia su Twitter, sia su HackerNews ( questa è stata collezione per moltissimi sviluppatori). È 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.

Causa: Rukshan’s Blog