Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A TO-DO app that fits inside a single tweet

ruky.me

Post reply on HN
Print view View original

41–50 of 56 posts

Re: Show HN: A TO-DO app that fits inside a single tweet

#41

Post by myfonj »

chrismorgan wrote: post #32

229 characters using plain JavaScript and proper forms and buttons, for somewhat better accessibility: document.write(" ${x.value.replace(/&/,`&`).replace(/ `),x.value=``,!1'> ") This even leaves enough space in the tweet for if you wanted a button beside the initial text box. As you see, it’d be shorter as straight HTML without the “body must be empty, you can only write inside a tag” requirement, as you could j…

Nice use of real and submit handling!

Note that HN apparently ate your "delete" character(s) (happened to me with "recycle" sign as well).

Props for HTML escaping, was not in task, as well as separate delete buttons. Note though that entities in the document.write are transformed, so the "html escaping" is broken in effect; either double escaping or codepoints should make it work.

    `${x.value.replace(/\u0026/g,`\u0026amp;`).replace(/
Or, you know, the mighty glorious ancient deprecated "example" element, that is still very well supported. Provided you are OK with danger of ''and will not prevent it, result would be quite terse:

    `${x.value}`.

Re: Show HN: A TO-DO app that fits inside a single tweet

#42

Post by chrismorgan »

dumindaxsb wrote: post #37

Hello!, I'm the original owner of this tweet & new to HN. I never expected this to go crazy at this scale. A big thank you to @rukshn for sharing it here. My apologies for the narrow requirement definition (had to limit it to 280 chars :) What I intended was to build the UI from scratch & the logic all within JS. Learnt a lot from all these contributions & keep 'em coming. Since everybody is into plain JS, here's my…

I like the createElement/appendChild-and-return-child and set-innerHTML-and-return-child combinations, they’re just the right level of repetition for minification.

As it stands, the use of innerHTML is bad, because it allows an injection attack (which amuses me given you said “no HTML injection”—though I know what you meant by that); you should use innerText instead. (You should always think very carefully before setting innerHTML or doing other similar tricks like the insertAdjacentHTML that I used in mine.)

There’s also some low-hanging fruit for golfing here:

• appendChild can be replaced with append (this sheds IE support, which I think is reasonable).

• You have arrow functions containing only a return statement; there’s a form that returns the expression: `a => { return b; }` can be written as just `a => b`. Also often in such golfing exercises if you have a function that has no return value, you can just drop the braces and let it return a value anyway, for two characters of savings.

• I said I liked the b and c functions, but it turns out that merging them ends up saving 7 characters in this case, because all but one of the invocations uses both.

Beyond that, I object strenuously to the use of + for what is functionally a button, as it’s completely inaccessible to screen readers and the likes (it’s not focusable, isn’t announced as anything, and it doesn’t respond to the keyboard). Use instead.

Here’s where I am on yours, 253 characters:

  a=document;b=(d,t,v)=>(d.append(d=a.createElement(t)),d.innerText=v,d);i=b(x=a.body,"input");b(x,"button","+").onclick=_=>b(o,"li",i.value).onclick=(e)=>e.target.style.textDecoration="line-through";o=b(x,"ol");b(x,"button","X").onclick=_=>o.innerText=""

Re: Show HN: A TO-DO app that fits inside a single tweet

#43

Post by vukgr »

franciscop wrote: post #38
vukgr wrote: post #36

Earlier quoted context omitted.

Am I missing something or did everyone forget is a thing in html?

Nope, could be made with as well, but swapping element tags takes more characters than toggling a class. In the case of UmbrellaJS I made a .wrap() method, but since there is no .unwrap() again it takes more than toggling classes.

Ah, fair. The challenge itself didn't mention toggling (just crossing tasks off), so you could probably get away with it; But that's just the golfer in me talking I guess.

Re: Show HN: A TO-DO app that fits inside a single tweet

#44

Post by chrismorgan »

myfonj wrote: post #41
chrismorgan wrote: post #32

229 characters using plain JavaScript and proper forms and buttons, for somewhat better accessibility: document.write(" ${x.value.replace(/&/,`&`).replace(/ `),x.value=``,!1'> ") This even leaves enough space in the tweet for if you wanted a button beside the initial text box. As you see, it’d be shorter as straight HTML without the “body must be empty, you can only write inside a tag” requirement, as you could j…

Nice use of real and submit handling! Note that HN apparently ate your "delete" character(s) (happened to me with "recycle" sign as well). Props for HTML escaping, was not in task, as well as separate delete buttons. Note though that entities in the document.write are transformed, so the "html escaping" is broken in effect; either double escaping or codepoints should make it work. ` ${x.value.replace(/\u0026/g,`\u002…

I used U+2718 HEAVY BALLOT X and forgot that it’d be trashed.

On the double escaping thing, I thought of it earlier on and was careful to make sure it did the right thing, but then I transformed the code in such a way that that it ended up being read by the HTML parser again, and neglected to switch it to double escaping, which was rather careless of me. \u0026 can be more briefly written as & (saving one character) or \x26 (saving two). I suppose this bumps my 229 up to 235 (the first of the three ampersands will be parsed correctly unescaped), and brings closer the possibility that DOM methods rather than crazy HTML strings may be more suitable (I think it was ending up something like ten or fifteen characters cheaper this way, even with escaping the value this long way).

I’m not willing to use because it leaves a plausible injection attack open. In fact, I’d probably exploit it with my very first TODO item, “fix … injection attack”!

I like the way you’re thinking on these things. Not many people think of things like the double encoding, and although I didn’t think of this time, I’ve definitely thought of it before on other similar things (and used it for fun on hard-coded values, but rejected it if user input is involved).

----

Taking a tip from the original challenger’s solution, I’ve refined my not-using-serialised-HTML solution down to 209 characters, once you replace \u2718 with the actual character which HN eats. Here presented with the necessary wrapping in a data: URI for convenience ( now being necessary):

  data:text/html;charset=utf-8,d=document;e=(p,e,c)=>(p.append(e=d.createElement(e)),c&&e.append(c),e);x=e(f=e(b=d.body,"form"),"input");f.onsubmit=i=>(e(i=e(l,"li",x.value+" "),"button","\u2718").onclick=_=>i.remove(),x.value="",!1);l=e(b,"ul")

Re: Show HN: A TO-DO app that fits inside a single tweet

#45

Post by chrismorgan »

shrew wrote: post #34
chrismorgan wrote: post #31

Earlier quoted context omitted.

> I don't mean to make this into a code golf thread Too late. Golfing notes: • Your `win` variable is unnecessary: window is approximately the global object (look into globalThis for the subtleties of how window isn’t quite the global object), so you can drop your “win.” every time, e.g. win.c.removeChild(b) can be just c.removeChild(b). • parent.appendChild(child) → parent.append(child) and parent.removeChild(child)…

And this is why code golf is fun regardless of language! The first two are new to me, so thank you, I'll read up. The third succinctly explains a quirk I've never bothered to check the legitimacy of, so thank you again. With your changes, that brings us way below the character limit, sitting at 208 characters with the and tags the challenge dictates. I had to rejig things to use parent.append(child) as it doesn't ret…

Ah yes, I’d completely forgotten that appendChild returns the child element and append doesn’t, because it’s so long since I actually had cause to use the appendChild return value!

Re: Show HN: A TO-DO app that fits inside a single tweet

#46

Post by rukshn »

vukgr wrote: post #36
myfonj wrote: post #26

Funny thing, if you make the most straightforward no dependency version in "Vanilla HTML+CSS+JS" you'll easily get below 250 characters, but it will break the last rule > Starting HTML body should be empty except the Because you'll have no tag. To fulfill this, you'll have to unnecessarily wrap the whole thing in script, like: document.write(` :checked+*{text-decoration:line-through}#t{display:none} + × `) (277 chars…

Am I missing something or did everyone forget is a thing in html?

I also thought of using the tag, but I didn’t use it because it is considered to be an outdated tag

But yes that is totally possible

Re: Show HN: A TO-DO app that fits inside a single tweet

#47

Post by dumindaxsb »

chrismorgan wrote: post #42
dumindaxsb wrote: post #37

Hello!, I'm the original owner of this tweet & new to HN. I never expected this to go crazy at this scale. A big thank you to @rukshn for sharing it here. My apologies for the narrow requirement definition (had to limit it to 280 chars :) What I intended was to build the UI from scratch & the logic all within JS. Learnt a lot from all these contributions & keep 'em coming. Since everybody is into plain JS, here's my…

I like the createElement/appendChild-and-return-child and set-innerHTML-and-return-child combinations, they’re just the right level of repetition for minification. As it stands, the use of innerHTML is bad, because it allows an injection attack (which amuses me given you said “no HTML injection”—though I know what you meant by that); you should use innerText instead. (You should always think very carefully before set…

Nice finishing touch. I think this is the shortest it could get in this approach with semantic tags.

I just learnt about insertAdjacentHTML & last variable return of arrow functions. (not using widely due to compatibility)

Also, you're absolutely right about XSS & Button. I thought innerText only removing text, keeping the :)

So, learnt some new stuff. Thank you!

In your code, the initially outputs "undefined". So we need to change it to o=b(x,"ol","") there.

Final code: a=document;b=(d,t,v)=>(d.append(d=a.createElement(t)),d.innerText=v,d);i=b(x=a.body,"input");b(x,"button","+").onclick=_=>b(o,"li",i.value).onclick=(e)=>e.target.style.textDecoration="line-through";o=b(x,"ol","");b(x,"button","X").onclick=_=>o.innerText=""

Re: Show HN: A TO-DO app that fits inside a single tweet

#48

Post by rukshn »

dumindaxsb wrote: post #37

Hello!, I'm the original owner of this tweet & new to HN. I never expected this to go crazy at this scale. A big thank you to @rukshn for sharing it here. My apologies for the narrow requirement definition (had to limit it to 280 chars :) What I intended was to build the UI from scratch & the logic all within JS. Learnt a lot from all these contributions & keep 'em coming. Since everybody is into plain JS, here's my…

Welcome to HN community @dumindaxsb :]

Thank you for making my Sunday an awesome one

Re: Show HN: A TO-DO app that fits inside a single tweet

#49

Post by dumindaxsb »

rukshn wrote: post #48
dumindaxsb wrote: post #37

Hello!, I'm the original owner of this tweet & new to HN. I never expected this to go crazy at this scale. A big thank you to @rukshn for sharing it here. My apologies for the narrow requirement definition (had to limit it to 280 chars :) What I intended was to build the UI from scratch & the logic all within JS. Learnt a lot from all these contributions & keep 'em coming. Since everybody is into plain JS, here's my…

Welcome to HN community @dumindaxsb :] Thank you for making my Sunday an awesome one

Thank you!

And, you're welcome! :)

Re: Show HN: A TO-DO app that fits inside a single tweet

#50

Post by myfonj »

thybag wrote: post #40
thybag wrote: post #35

Earlier quoted context omitted.

x=document;v='innerHTML';o='onclick';x.body[v]=" X clear ",b[o]=e=>{let b=x.createElement("li");c.append(b);b[v]=a.value,a.value="",b[o]=()=>b.classList.toggle('y');d[o]=()=>c[v]=''}; .y{text-decoration:line-through} Combining yours & the strike thru example, managed to get both strike thru & clear added in 277 chars. If i could save another char could close the p which would be nice :p https://jsfiddle.net/hysjgkcm/…

x=document;x.write` 🆑 `,b[o='onclick']=b=>{b=x.createElement`li`;c.append(b);b.v=b[v='innerHTML']=a.value,a.value="",b[o]=e=>b[v]=(b[v]==b.v?' ':'')+b.v;d[o]=e=>c[v]=''} https://jsfiddle.net/eqym2ac0/ Working with shrew. 240 char with script/html or 217 with as JS.

No JS-in-HTML golfing is complete until you cram your script into onload attribute:

    --…
    ++
(But again, would not fulfill the requirements of "sole script in body" :] )
Post reply on HN