FRESH

Hacker News

Home

JavaScript Demos in 140 Characters

339 points by themanmaran

by lionleaf

0 subcomment

Fun to see this on HN! :D
Apologies for the quick reboot of the servers. I learned from last time this happened and resized the digitalocean droplet.

by amiga386

5 subcomments

It's very cool, but it's also a shame that measuring in characters leads to the metagame of using 97 multi-byte Unicode characters that decode to 194 ASCII characters when reinterpreted. Almost everything is in the format:
```
    eval(unescape(escape`<<97 wide characters>>`.replace(/u../g,'')))
```
Can't they just have the same agreement that Ford Prefect had with Mr Prosser? "So, assuming I'm going to use this lossless compression technique to fit 194 characters into a 140 character tweet... how about you just show the 194 characters and say that I fitted into 140 characters?"
I suppose you could make the same argument about size-based competitions at demo parties; the limit is strictly 4096 bytes but everyone + their dog is using Crinkler to compress a 12-20KB executable down to that size. In fact, part of the effort is in aligning data and tweaking constants with Crinkler's algorithm in mind, to make the raw data more amenable to compression! But at least then, it's not a constant compression (turning any 194 ASCII characters into 97 Unicode characters which with embedded decoder makes exactly 140 characters)

by jedschmidt

0 subcomment

i went super deep on 140-byte code golfing[1] back when twitter was taking off, and it changed the way i think about code. for a brief while we had a small community collaborating on byte-squeezing techniques[2], and i was constantly amazed at the creativity that this constraint brought about, from mandelbrot renderings to sudoku solvers. possibly the best part was more than a decade later when i found my golfed UUID implementation[3] deep in my employer's codebase.
[1] https://youtu.be/JsAetmgJRss?si=AxIFySX7ktzu5GL5&t=193
[2] https://github.com/jed/140bytes/wiki/Byte-saving-techniques
[3] https://gist.github.com/jed/982883

by rsiqueira

1 subcomments

A small, curated collection of generative sketches written in 140 characters each, using plain JavaScript on dwitter.net.
Fractals: https://www.dwitter.net/h/fractal
Dynamical systems / chaos: https://www.dwitter.net/h/chaos
Strange attractors: https://www.dwitter.net/h/attractor
Spiral-based generative art: https://www.dwitter.net/h/spiral
Fireworks simulation: https://www.dwitter.net/h/fireworks
Procedural scenes: https://www.dwitter.net/h/scene
Wavelets (3D and 2D): https://www.dwitter.net/h/wavelet
And the most popular dweets: https://www.dwitter.net/top/all

by sigvef

0 subcomment

Dwitter is 10 years old this winter! If anyone is interested in some backstory, I dug up an old interview: https://medium.com/windows-developer/dwitter-dares-you-to-co....
Of course, the real magic of dwitter is the lovely community: https://discord.gg/emHe6cP

by varenc

3 subcomments

TIL that
```
   js_func`string`
```
is valid JS and calls `js_func` as a tagged template literal, passing it a TemplateStringsArray. Going to use "console.log`weeee`" in my code now.

by socalgal2

3 subcomments

I love these but I wish they'd disallow the eval thing. I also which they'd added more shortcuts. Like IIRC they have `s` for `Math.sign` but so if they're going to shorten things they could have gone much further. `globalCompositeOperation` etc...

by dang

0 subcomment

Related. Others?
Show HN: A Stargate in 140 chars of JavaScript - https://news.ycombinator.com/item?id=25088683 - Nov 2020 (55 comments)
Dwitter – A social network for short JavaScript demos - https://news.ycombinator.com/item?id=13700698 - Feb 2017 (71 comments)

by H3X_K1TT3N

2 subcomments

Welp, that took up a chunk of my day. This is as far as I got tricking it into doing webgl (it just renders a triangle):
if(!window.g){gc=document.createElement('canvas');g=gc.getContext('webgl');c.parentNode.replaceChild(gc,c);k=Object.keys(g.__proto__);d='void main(){gl_';str = `g395(g41,g318())g310(g41,new Float32Array([0,0.5,0,-0.5,-0.5,0,0.5,-0.5,0]),g46);a=g322(g139)g382(a,'attribute vec3 c;${d}Position=vec4(c,1);}')g313(a);b=g322(g138)g382(b,'${d}FragColor=vec4(1,0,1,0);}')g313(b);d=g320()g302(d,a)g302(d,b)g376(d)g393(d)g435(0,3,g128,0,0,0)g406(0)g404(g12,0,3)`.replace(/g(\d+)/g,"\ng.\${k[$1]}");eval("eval(`"+str+"`)")}
I assume there are far more advanced methods than what I managed to do, so it's probably possible to actually get that to 140 characters.

by econ

1 subcomments

OT: we should really extend bbcode with a safe scripting language. The hilarious stuff that could happen in threaded discussions. You could have a sub set of safe instructions that get executed automatically, a larger set of instructions that require pressing a button under the comment. (And a button to view the code) Then a 3rd set that triggers permission dialogs for things like loading (1 or n) external data sets. "Uploading" files, loops that run more than 30,1000 or 10k rounds, access to camera/photos, canvas, LLM etc
You start a topic by pasting a dataset or a link to some JSON csv, xml, sql files, etc, then add a description or some other rage bate to start a conversation.
Seems much fun and a great way to start getting into coding.

by falloutx

0 subcomment

It seems like dwitter outlived twitter. Goated site.

by pverheggen

0 subcomment

Cool site! Reminds me of tsubuyaki processing, which is a similar "code golf that fits in a xeet" type of challenge.
https://xcancel.com/search?q=%23%E3%81%A4%E3%81%B6%E3%82%84%...

by tluyben2

0 subcomment

Nice work; I remember browsing it during covid.
Tried AI for a standalone html page snippet renderer[0].
I tried just feeding it snippets one by one and that worked, but the raymarching ones it could not get going until I gave it the dwitter github repos. Now most, but not all (simple to fix manually though), work.
Also interesting to see Claude is terrible at trying to write the art (the demos itself) and seeing what it tries to do; not surprising given the challenge.
[0] https://claude.ai/public/artifacts/d8b357df-5982-48c6-be58-7...

by aziis98

2 subcomments

There are many made with eval-unescape-escape that feel a bit like cheating. Still all very impressive

by RyanOD

0 subcomment

Thinking back to days with The Zen of CSS Design, this is just incredible.
It's the weekend! Take a journey back in time...
https://csszengarden.com/

by Etherlord87

0 subcomment

I once won a very small contest of dwitter in Authotokey edition with this gear animation:
https://i.imgur.com/20f2gb8.gif
more:
https://www.autohotkey.com/boards/viewtopic.php?style=1&f=6&...

by yokljo

0 subcomment

I stopped doing these years ago, but apparently I've posted 370 Dweets!
Pretty happy with this one: https://www.dwitter.net/d/7421
It's always fun just spending 10 minutes slamming together some trig functions and see what appears on the screen.
https://www.dwitter.net/d/12850

by socalgal2

1 subcomments

not quite the same because no site but several devs post pico8 tweets
https://x.com/search?q=%23postcart%20%23pico8
maybe #tweetcart is a better hash tag
https://x.com/search?q=%23tweetcart

by kace91

1 subcomments

I wonder what could be a criteria for demos like this that doesn’t devolve into code golf nor spawns giant files.
I’m not saying that to disparage the content mind you; it is amazing. Just wondering which potential rules could make similar results and “normal”/readable code, as that would be awesome to see.

by sshadmand

1 subcomments

What a cool concept to turn the SM 140 chars concept into a programming demo list! Is there a reverse to this that work to compress a JS script into 140 chars to help show some creative ideas without needing to fully understand the code? Also, how good is AI at generating these in your experiences?

by jaredhallen

0 subcomment

Impressive, no doubt. But I think there might be a few lines of supporting code in the browser.

by alexpadula

2 subcomments

The website seems to be unresponsive on iPhone safari.

0 subcomment

by lacoolj

0 subcomment

reminds me of the 1024 challenge

by MORPHOICES

0 subcomment

[dead]

by sebastien_b

0 subcomment

[dead]