Difference between revisions of "JavaScript"
(→Video display) |
|||
| Line 52: | Line 52: | ||
==== Brotli ==== | ==== Brotli ==== | ||
| + | It is also possible to bootstap Brotli compressed code to a WOFF2 font as described here: | ||
| + | * https://gist.github.com/lifthrasiir/1c7f9c5a421ad39c1af19a9c4f060743 | ||
| + | Which can then be loaded into HTML like this: | ||
| + | <syntaxhighlight lang="html"> | ||
| + | <body [ARBITRARY_BYTES_HERE] onload=" | ||
| + | new FontFace('x','url(#').load(C=$.getContext`2d`).then(A=>{ | ||
| + | document.fonts.add(A); | ||
| + | C.font='1pc x'; | ||
| + | K=String.fromCharCode; | ||
| + | for(A=I='';I<[NUM_GLYPHS];A+=K(W>>8,W&255)) | ||
| + | W=C.measureText(K(2e4+I++)).width; | ||
| + | eval(A) | ||
| + | }) | ||
| + | "><canvas id=$> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | Or alternatively, if you are lucky some parties will accept brotli code directly when you provide your own server: | ||
| + | <syntaxhighlight lang="html"> | ||
| + | require("http").createServer((req, res) => { | ||
| + | const path = (req.url || "/").slice(1); | ||
| + | if (path === "") { | ||
| + | const buffer = require("fs").readFileSync("intro.htm.br"); | ||
| + | res.setHeader("Content-Type", "text/html"); | ||
| + | res.setHeader("Content-Encoding", "br"); | ||
| + | res.setHeader("Content-Length", buffer.byteLength); | ||
| + | res.write(buffer); | ||
| + | } | ||
| + | res.end(); | ||
| + | }).listen(1337); | ||
| + | console.log(` | ||
| + | Open http://localhost:1337 to watch intro. | ||
| + | This mini http server is only here to pass the Content-Encoding we are missing on file:// compared to the normal environment of a web page | ||
| + | `); | ||
| + | </syntaxhighlight> | ||
== Additional Resources == | == Additional Resources == | ||
Revision as of 16:33, 2 July 2024
The Javascript sizecoding community has been quite active for years now.
Contents
Setting up
Tools
- Tools: JSCrush online JSCrush cli-tool Reg Pack
- Execution environment(s): Browser, Dwitter
Video display
There are basically 2 ways to go about getting some graphics on screen: 2D Canvas or WebGL.
2D Canvas
A minimal HTML 2D Canvas setup can be achieved like this:
<canvas id=c style=width:99% onclick=setInterval('',t=9)>
Or if you would like to autostart the display, you can use:
<canvas id=c style=width:99%><svg onload=setInterval('',t=9)>
Or these slightly shorter setups without fullscreen scaling:
<canvas id=c onclick=setInterval('',t=9)>
<canvas id=c><svg onload=setInterval('',t=9)>
A minimal 2D Canvas Example
Here would be an example of a simple 128 byte setup of a scrolling XOR-pattern using grayscale.
<canvas id=c onclick=setInterval('for(c.width=w=320,++t,o=w*w;o--;c.getContext`2d`.fillRect(X=o%w,Y=o/w,1-(X+t^Y)/99,1));',t=9)>
WebGL
To be added.
Sound
Something to get your journey started:
More information to follow
Compression
No information yet
PNGcrush
Brotli
It is also possible to bootstap Brotli compressed code to a WOFF2 font as described here:
Which can then be loaded into HTML like this:
<body [ARBITRARY_BYTES_HERE] onload="
new FontFace('x','url(#').load(C=$.getContext`2d`).then(A=>{
document.fonts.add(A);
C.font='1pc x';
K=String.fromCharCode;
for(A=I='';I<[NUM_GLYPHS];A+=K(W>>8,W&255))
W=C.measureText(K(2e4+I++)).width;
eval(A)
})
"><canvas id=$>
Or alternatively, if you are lucky some parties will accept brotli code directly when you provide your own server:
require("http").createServer((req, res) => {
const path = (req.url || "/").slice(1);
if (path === "") {
const buffer = require("fs").readFileSync("intro.htm.br");
res.setHeader("Content-Type", "text/html");
res.setHeader("Content-Encoding", "br");
res.setHeader("Content-Length", buffer.byteLength);
res.write(buffer);
}
res.end();
}).listen(1337);
console.log(`
Open http://localhost:1337 to watch intro.
This mini http server is only here to pass the Content-Encoding we are missing on file:// compared to the normal environment of a web page
`);
Additional Resources
Links
Tutorials / Postmortems
More to follow
