JavaScript Demos in 140 Characters(beta.dwitter.net)
beta.dwitter.net
JavaScript Demos in 140 Characters
https://beta.dwitter.net
63 comments
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:
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)
eval(unescape(escape`<<97 wide characters>>`.replace(/u../g,'')))
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)
if you switch to the beta frontend it has a "compressed" toggle that will do exactly what you're looking for: https://beta.dwitter.net/top
That's awesome! That's exactly what's needed.
We've changed to that URL above from https://www.dwitter.net/top. Thanks!
Nice; a way to also show the actual wrapping code would be nice.
I am assuming c is set to a canvas element and x is set to the context, but I can't find actual information on this.
I am assuming c is set to a canvas element and x is set to the context, but I can't find actual information on this.
Or simply set the limit in bytes (e.g. 140 bytes of UTF8 encoded text).
This is the standard (for good reason) in code golf.
thanks for introducing me to code golf.-)
See also: https://code.golf/ for a relatively recent gamified site with rankings
this is so good
I have been using Hacker News for 20 years now and this comment is already topping the all time charts of replies.-)
(sidebar) love to see a subtle, applicable HHG ref :)
To be fair, 140 bytes (1120 bits) corresponds to 160 ASCII characters, or even 170 characters if you exclude control characters.
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
[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
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
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
You are obviously one of the stars of dwitter.net, getting my vote on every dweet you've created for years. Dwitter is the thing I look forward to every evening, instead of doom scrolling I'm dweet scrolling. I hope you (and the others on dwitter) know that your creativity there is valued.
TIL that
js_func`string`
It's not common but few libraries use that to support JSX-like syntax at runtime, without a build step.
e.g. https://github.com/developit/htm and https://lit.dev/docs/components/rendering/
e.g. https://github.com/developit/htm and https://lit.dev/docs/components/rendering/
I recently used the feature in a code embedded image generator so I could have compact images store tiny images in inline code.
https://gisthost.github.io/?8d537c4a3b2331e7c6c45d31f1900330
The Trashcan in that sampler is stored as
https://gisthost.github.io/?8d537c4a3b2331e7c6c45d31f1900330
The Trashcan in that sampler is stored as
TRASH: Q`!B>#Z>!F>#F:V:V>!>B#^BZfBf3`
function Q([e]){let c,t,n,d="",l=0,o=c=>e.charCodeAt(l++)-33;for(;l<e.length;d+=t<20?(c=1&t?100:10,"MmLlHhVvCcSsQqTtAaZz"[t]):t<71?t-45+" ":71==t?(n=o(),e.slice(l,l+=n)):(94*(t-72)+o()-1033)/c+" ")t=o();return d}
function simpleImage(p="M-22 -22 h44 v44 h-44 Z",w=64,h=w,o={}){let{background:b="#0000",stroke:s="#000f",fill:f="#fffa",thickness:t=w/32,transform:m=[1,0,0,1,0,0],scale:c=1,angle:a=0}=o;const C=new OffscreenCanvas(w,h),X=C.getContext("2d");let P=new Path2D(p);m instanceof DOMMatrix||(m=new DOMMatrix(m));m.translateSelf(w/2,h/2);m.rotateSelf(a);m.scaleSelf(c,c);let T=new Path2D;T.addPath(P,m);P=T;X.fillStyle=b;X.fillRect(0,0,w,h);X.fillStyle=f;X.strokeStyle=s;X.lineWidth=t;X.stroke(P);X.fill(P);return C}
🗑 is prettier :)
Niiice! I finally understand the origin of this JS syntax used in SQL queries and GraphQL:
sql`SELECT * FROM users WHERE id = ${userId}`
const q = gql` query GetUser { user(id: ${userId}) { name email } } `;
sql`SELECT * FROM users WHERE id = ${userId}`
const q = gql` query GetUser { user(id: ${userId}) { name email } } `;
They're called "tagged template literals". Here's the docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
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
Of course, the real magic of dwitter is the lovely community: https://discord.gg/emHe6cP
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...
You have to keep in mind that for anything like this, the platform has to exist before the ways to game the rules are thought up. To change things after the platform is up and running makes it a moving target and for something like this a fixed target is intrinsically part of the appeal.
Dwitter used the definition of what Twitter at the time used. The solution of https://beta.dwitter.net/ mitigates the lack of accessibility of the encoding, while keeping the fixed target at the same time introducing a new practical target.
The Math.sin css color encoder were concessions to practicality, there has been much discussion as to whether a Dwitter 2 should simply include additional characters required to the same preconfig and let people do it themselves, and let them use the characters for something else if they can think of something.
I'd like something like this just to see how creative people get in doing that. How small can you make a bit of JavaScript that copies every static method of Math to window?
and creativity is the goal here. No matter how people stretch the system, it can't be denied they have been doing so creatively.
Dwitter used the definition of what Twitter at the time used. The solution of https://beta.dwitter.net/ mitigates the lack of accessibility of the encoding, while keeping the fixed target at the same time introducing a new practical target.
The Math.sin css color encoder were concessions to practicality, there has been much discussion as to whether a Dwitter 2 should simply include additional characters required to the same preconfig and let people do it themselves, and let them use the characters for something else if they can think of something.
I'd like something like this just to see how creative people get in doing that. How small can you make a bit of JavaScript that copies every static method of Math to window?
and creativity is the goal here. No matter how people stretch the system, it can't be denied they have been doing so creatively.
You have to fix the scoring. Blacklisting eval is whack-a-mole forever. If you switch the scoring to use bytes of UTF-8 encoded text, that pretty much aligns everything. There might still be some use for packing data in string literals, but wholesale source code packing would probably mostly stop.
I've been on dwitter.net for many years, and I'm fine with eval. The rules are the rules (or lack of rules).
Yea, because no one has ever changed any rules. Every sport has changed rules, lots of games have chagned rules. It's kind of irrelevant. Removing eval and adding new shortcuts would just start a new era of creativity.
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)
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)
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.
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.
Every time I think I couldn't possibly make it smaller, I manage to shave off a few more bytes. Got it under 400 now:
x.arc&&c.parentNode.replaceChild(g=c.cloneNode(),c);x=g.getContext`webgl`;f=Float32Array;eval(`d=320()395(41,318())310(41,new f([0,n=0.5,-n,-n,n,-n]),46)${z='382(a=322(13'}9),'attribute vec2 c;${d='void main(){gl_'}Position=vec4(c${w=",0,1);}')313(a)302(d,a)"}${z}8),'${d}FragColor=vec4(0,1${w}376(d)393(d)435(0,2,128,0,0,0)406(0)404(12,0,3)`.replace(/\d{2,}/g,"\nx[Object.keys(x.__proto__)[$&]]"))
x.arc&&c.parentNode.replaceChild(g=c.cloneNode(),c);x=g.getContext`webgl`;f=Float32Array;eval(`d=320()395(41,318())310(41,new f([0,n=0.5,-n,-n,n,-n]),46)${z='382(a=322(13'}9),'attribute vec2 c;${d='void main(){gl_'}Position=vec4(c${w=",0,1);}')313(a)302(d,a)"}${z}8),'${d}FragColor=vec4(0,1${w}376(d)393(d)435(0,2,128,0,0,0)406(0)404(12,0,3)`.replace(/\d{2,}/g,"\nx[Object.keys(x.__proto__)[$&]]"))
Most of the amazing stuff on dwitter.net is using plain old fillRect
Clever math does the heavy lifting on dwitter.net
Clever math does the heavy lifting on dwitter.net
Yeah, that's fair, but I just wanted to see if I could do it this way (for funsies)
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.
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.
svg?
It obviously requires a lot of figuring out (by better men than me) but it seems a worthwhile adventure.
The halting problem can just be figured out experimentally in production. Users might need to earn or lose privileges over time as things escalate. Admins might approve a script and allow running it without prompts or pressing the button.
Perhaps entire applications can be written this way. I much enjoyed old php code with discussions in threaded comments. (The cache will save us.)
Reminds me of Richard
https://stackoverflow.com/questions/184618/what-is-the-best-...
The halting problem can just be figured out experimentally in production. Users might need to earn or lose privileges over time as things escalate. Admins might approve a script and allow running it without prompts or pressing the button.
Perhaps entire applications can be written this way. I much enjoyed old php code with discussions in threaded comments. (The cache will save us.)
Reminds me of Richard
https://stackoverflow.com/questions/184618/what-is-the-best-...
> the halting problem can just be figured out experimentally in production
That's a wild statement
It seems like dwitter outlived twitter. Goated site.
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%...
https://xcancel.com/search?q=%23%E3%81%A4%E3%81%B6%E3%82%84%...
There are many made with eval-unescape-escape that feel a bit like cheating. Still all very impressive
The compression tricks used in standalone Javascript demos are significantly more cursed. The meta is to concatenate a compressed binary payload and a HTML/JS decompression stub in the same file, abusing the fact that HTML5 parsers are required to be absurdly tolerant of malformed documents. Nowadays it's done using raw DEFLATE and DecompressionStream, but before that was available they would pack the payload into the pixels of a PNG and use Canvas to extract the data.
Try saving this Normal HTML File and open it in a text/hex editor: https://0b5vr.com/domain/domain.html
Try saving this Normal HTML File and open it in a text/hex editor: https://0b5vr.com/domain/domain.html
If it's possible to do with vanilla JS in any environment then it's not cheating.
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...
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...
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/
It's the weekend! Take a journey back in time...
https://csszengarden.com/
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
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
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&...
https://i.imgur.com/20f2gb8.gif
more:
https://www.autohotkey.com/boards/viewtopic.php?style=1&f=6&...
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
https://x.com/search?q=%23postcart%20%23pico8
maybe #tweetcart is a better hash tag
https://x.com/search?q=%23tweetcart
Thanks for sharing, I'm into 8 bit retro games lately and I assumed this pico8 was some playdate emulator for some reason. My ignorance was rectified today.
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?
There have been a few "AI" submissions, but they honestly aren't that great.
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.
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.
Shadertoy might fit that category? Runs in the browser, are all fragment shaders and without a size limit afaik, but they tend to be small-ish
https://www.shadertoy.com/
https://www.shadertoy.com/
The website seems to be unresponsive on iPhone safari.
Too bad Safari is the only browser engine allowed on iPhone.
Same on Mac FF
Impressive, no doubt. But I think there might be a few lines of supporting code in the browser.
[deleted]
reminds me of the 1024 challenge
Apologies for the quick reboot of the servers. I learned from last time this happened and resized the digitalocean droplet.