ハクソク

世界を動かす技術を、日本語で。

Hackerたちの意見

関連情報。他に? HNに投稿された「140文字のJavaScriptで作るスターゲート」 - https://news.ycombinator.com/item?id=25088683 - 2020年11月(コメント55件) Dwitter – 短いJavaScriptデモ用のソーシャルネットワーク - https://news.ycombinator.com/item?id=13700698 - 2017年2月(コメント71件)
すごくクールだけど、文字数で測るのが原因で、97個のマルチバイトUnicode文字を使って194個のASCII文字にデコードされるメタゲームになっちゃうのが残念。ほとんどがこの形式だよね: eval(unescape(escape`>`.replace(/u../g,''))) フォード・プレフェクトがプロッサー氏と交わしたのと同じ合意を持てばいいのに。「194文字を140文字のツイートに収めるためにこのロスレス圧縮技術を使うとして…194文字をそのまま見せて、140文字に収めたって言えばいいじゃん?」デモパーティのサイズベースの競技についても同じことが言えるかも。制限は4096バイトだけど、みんながCrinklerを使って12-20KBの実行ファイルをそのサイズに圧縮してるし。実際、データを整列させたり、Crinklerのアルゴリズムを考慮して定数を調整するのも努力の一部なんだよね!でも、少なくともそれなら、常に圧縮されるわけじゃないし(194個のASCII文字を97個のUnicode文字に変えて、埋め込まれたデコーダーでちょうど140文字にするっていうのは)
それか、単にバイト数で制限を設定すればいいんじゃない?(例えば、UTF8エンコードされた140バイトのテキストとか)。
ベータ版のフロントエンドに切り替えると、まさに求めてる「圧縮」トグルがあるよ: https://beta.dwitter.net/top
Hacker Newsを20年使ってるけど、このコメントはもう歴代の返信ランキングのトップに立ってるね。-)
まあ、140バイト(1120ビット)は160のASCII文字に相当するし、制御文字を除けば170文字にもなるからね。
(サイドバー)微妙で適用可能なHHGのリファレンスが見たいな :)
これ大好きなんだけど、evalを禁止してほしいな。もっとショートカットを増やしてほしい。確か、`Math.sign`のための`s`があるけど、もっと短縮できたはずだよね。`globalCompositeOperation`とかさ…
スコアリングを修正しないと。evalをブラックリストにするのは永遠にイタチごっこだよ。UTF-8エンコードされたテキストのバイト数を使うようにスコアリングを切り替えれば、ほぼすべてが整合すると思う。文字列リテラルでデータをパッキングする用途はまだあるかもしれないけど、ソースコード全体をパッキングするのはほとんどなくなるだろうね。
こういうことを考えると、プラットフォームが存在する前にルールをゲームする方法が考えられないといけないってことを忘れちゃダメだよね。プラットフォームが動き出した後に変更するのは、動くターゲットになっちゃうから、こういうのは固定されたターゲットが魅力の一部なんだよね。Dwitterは、その時のTwitterの定義を使ってたし。https://beta.dwitter.net/ の解決策は、エンコーディングのアクセスの悪さを軽減しつつ、固定されたターゲットを保ちながら新しい実用的なターゲットを導入してる。Math.sinのCSSカラ―エンコーダーは実用性への妥協だったけど、Dwitter 2には同じプリコンフィグに必要な追加のキャラクターを含めて、みんなが自分でやれるようにするべきかって議論がたくさんあったよね。もし何か他のことに使えるキャラクターが思いついたら、それも使わせてあげればいいし。こういうのがあったら、みんながどれだけクリエイティブになれるか見てみたいな。JavaScriptでMathのすべての静的メソッドをwindowにコピーするの、どれだけ小さくできるかな?クリエイティビティがここでの目標だし。どんなにシステムを引き伸ばしても、彼らがクリエイティブにやってるのは否定できないよね。
dwitter.netには何年もいるけど、evalには問題ないよ。ルールはルールだし(ルールがない場合もあるけど)。
今日学んだこと: js_func`string`は有効なJSで、`js_func`をタグ付きテンプレートリテラルとして呼び出し、TemplateStringsArrayを渡すんだ。これから「console.log`weeee`」をコードに使うつもり。
一般的ではないけど、いくつかのライブラリはビルドステップなしでランタイムでJSXライクな構文をサポートするためにそれを使ってるよ。例えば、https://github.com/developit/htm と https://lit.dev/docs/components/rendering/
最近、コードを埋め込んだ画像生成器の機能を使って、インラインコードに小さな画像を保存できるコンパクトな画像を作ったよ。https://gisthost.github.io/?8d537c4a3b2331e7c6c45d31f1900330 そのサンプラーのゴミ箱は、TRASH: Q`!B>#Z>!F>#F:V:V>!>B#^BZfBf3`として保存されていて、関数Q([e]){let c,t,n,d="",l=0,o=c=>e.charCodeAt(l++)-33;for(;lがSVG Dパスにデコードされるんだ。画像に変換できる関数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} サンプラーにはHTMLファイル内のすべての画像が含まれていて、サイズはたったの13kなんだ。レイトレーサーやシーンを削除すれば、もっと少なくなるだろうね。
いいね!このJSの構文がSQLクエリやGraphQLで使われる由来がやっとわかったよ:sql`SELECT * FROM users WHERE id = ${userId}` const q = gql` query GetUser { user(id: ${userId}) { name email } } `;
HNでこれを見るのは楽しいね! :D サーバーの再起動が早くてごめんね。前回の教訓を生かして、DigitalOceanのドロップレットのサイズを変更したよ。
OTだけど、bbcodeに安全なスクリプト言語を追加すべきだよね。スレッドディスカッションで起こる面白いことが想像できる。自動的に実行される安全な命令のサブセットを用意して、コメントの下にボタンを押さないと実行されない大きな命令セットもあってもいいし。(コードを見るためのボタンもね)さらに、外部データセットを読み込むための許可ダイアログをトリガーする第3のセットもあってもいい。ファイルを「アップロード」したり、30回、1000回、または10k回以上ループを実行したり、カメラや写真、キャンバス、LLMなどへのアクセスを要求したり。データセットやJSON、CSV、XML、SQLファイルへのリンクを貼ってトピックを始めて、説明や他の話題を追加して会話を始めるのが楽しそうだし、コーディングを始めるいい方法だと思う。
svg?
うーん、これで結構時間を取られちゃったな。WebGLを使わせるために騙すところまでしかできなかった(ただ三角形を描くだけだけど):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.
dwitter.netのすごい作品のほとんどは、普通のfillRectを使ってるんだよね。賢い数学がdwitter.netで大活躍してる。
ちょっと違うかな。どのサイトもそうじゃないけど、いくつかの開発者がpico8のツイートを投稿してるよ。https://x.com/search?q=%23postcart%20%23pico8 もしかしたら、#tweetcartの方がいいハッシュタグかも。https://x.com/search?q=%23tweetcart
140文字で書かれた生成的スケッチの小さなキュレーションされたコレクションだよ。普通のJavaScriptを使ってdwitter.netで作られてる。フラクタル: https://www.dwitter.net/h/fractal 動的システム/カオス: https://www.dwitter.net/h/chaos 奇妙なアトラクタ: https://www.dwitter.net/h/attractor スパイラルベースの生成アート: https://www.dwitter.net/h/spiral 花火シミュレーション: https://www.dwitter.net/h/fireworks プロシージャルシーン: https://www.dwitter.net/h/scene ウェーブレット(3Dと2D): https://www.dwitter.net/h/wavelet そして最も人気のあるdweets: https://www.dwitter.net/top/all
こういうデモの基準って、コードゴルフにならずに巨大なファイルを生まないものって何だろう?内容をけなすつもりはないけど、すごいよね。ただ、似たような結果を出しつつ「普通の」/読みやすいコードにするためのルールがあれば面白いなって思ってる。
Shadertoyがそのカテゴリーに入るかも?ブラウザで動くし、すべてフラグメントシェーダーで、サイズ制限もないはずだけど、結構小さめだよ。https://www.shadertoy.com/