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

31–40 of 56 posts

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

#31

Post by chrismorgan »

shrew wrote: post #22
rukshn wrote: post #3

Earlier quoted context omitted.

Op here: you can’t do it with plain js Plus it’s ok to use frameworks according to the tweet

I don't mean to make this into a code golf thread, but saying it "can't" be done in plain JS was too enticing not to try it. Does this meet the requirements? let win=window;document.body.innerHTML=` `,win.b.onclick=a=>{let b=win.c.appendChild(document.createElement("p"));b.innerText=win.a.value,win.a.value="",b.onclick=()=>win.c.removeChild(b)}; JS Fiddle: https://jsfiddle.net/2z0bus8d/ While I think there's always t…

> 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) → child.remove(), using newer, shorter DOM methods.

• Skip quotes on attribute values, and trailing slashes are 100% superfluous in HTML (they’re explicitly ignored, as an XHTML compatibility mechanism; I reckon they’re actually a slightly bad thing rather than harmless).

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

#32

Post by chrismorgan »

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 just drop the document.write("…") wrapping.

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

#33

Post by runawaybottle »

xyst wrote: post #9
Thorentis wrote: post #6

Earlier quoted context omitted.

Woah, that's amazing! Put this on your resume and then change your Twitter bio to "rockstar JS developer".

rockstar ninja assassin js developer

These terms are outdated. Please replace with ‘data scientist’.

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

#34

Post by shrew »

chrismorgan wrote: post #31
shrew wrote: post #22

Earlier quoted context omitted.

I don't mean to make this into a code golf thread, but saying it "can't" be done in plain JS was too enticing not to try it. Does this meet the requirements? let win=window;document.body.innerHTML=` `,win.b.onclick=a=>{let b=win.c.appendChild(document.createElement("p"));b.innerText=win.a.value,win.a.value="",b.onclick=()=>win.c.removeChild(b)}; JS Fiddle: https://jsfiddle.net/2z0bus8d/ While I think there's always t…

> 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 return the element, but using the child.remove() method directly means there's no parameter and therefore one less character there, so it all balances out. I also had to rename the event variable as it caused a scoping conflict for the variable `a`.

With all that space left over you could certainly add in the clear all and strike-through behaviour properly. Maybe even some real state!

Updated fiddle: https://jsfiddle.net/2z0bus8d/1/

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

#35

Post by thybag »

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…

x=document;v='innerHTML';o='onclick';x.body[v]="Xclear",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/

Down to 270 https://jsfiddle.net/vr7246jk/1/

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

#36

Post by vukgr »

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?

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

#37

Post by dumindaxsb »

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 version:

279 chars, No HTML injection/document.write(), can add, strike-through & clear the whole list

a=document;x=a.body;b=(d,t)=>{return d.appendChild(a.createElement(t))};c=(e,v)=>{e.innerHTML=v;return e};i=b(x,"input");c(b(x,"a"),"+").onclick=_=>{c(b(o,"li"),i.value).onclick=(e)=>{e.target.style.textDecoration="line-through"}};o=b(x,"ol");c(b(x,"a"),"X").onclick=_=>{c(o,'')}

https://jsbin.com/weyijorila/edit?html,output

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

#38

Post by franciscop »

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?

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.

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

#39

Post by franciscop »

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…

Ah wow the :checked + * {text-decoration:line-through} is pretty smart! No need for JS in that case. Your reply inspired me for a new version:

https://twitter.com/FPresencia/status/1341037189409296384

https://jsfiddle.net/franciscop/6p9xwv7e/

b=u("body").append(u("").on("keyup",e=>{t=e.currentTarget;if(13==e.keyCode){b.append(`

`+t.value);t.value=''}})).append(u('Clear').on('click',e=>u('p').remove())):checked+*{text-decoration:line-through}

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

#40

Post by thybag »

thybag wrote: post #35
shrew wrote: post #34

Earlier quoted context omitted.

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…

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.

Post reply on HN