タグ: ライブラリ

カテゴリー
fun

Checkboxland – HTMLのチェックボックスですべてを作れるライブラリ

Checkboxland は、HTML のチェックボックス要素を活用してしまくるための JavaScriptライブラリです。

HTML のチェックボックス要素と言えばこれ↓ ですが、

このチェックボックスを使って様々な表現を実行できます。

デモでは、文字が横に流れるマーキー、デジタル時計、アニメーション、QRコード表示、ライフゲーム、動画再生(!)、など様々な表現が、すべてチェックボックスだけで実現されています。

API documentによれば、チェックボックスを縦横に並べたグリッド上でグリッド上の各座標を調べたり書き換えたりする低レイヤAPIと、文字を大きく描く、スクロールさせる、画像や動画を描写させるなどの拡張APIが用意されています。プラグイン機構も用意されているので、自分で Checkboxland に新たな機能を追加することも可能です。

多数の要素を表示しようとするとページが重くなるのはチェックボックスであっても(当然)同じで、チェックボックスの数が1500個を超えるとチェックボックスの更新速度が問題となることから、32×32 や 64×16 といったサイズ以下のグリッドを推奨するそうです。

作者のブライアン・ブラウンさん(Bryan Brown)は、職場の近くにある機械式の巨大サインボードが、黒白のグリッド表示でテキストやアニメーションを表示するのを見て「チェックボックスでも同じことができるのでは?」と考えたそうです。

チェックボックスだけで凝ったウェブサイトを作りたいと思っていた人(いるのか?)にとってはとても便利なライブラリと言えるのではないでしょうか。

via Hacker News

カテゴリー
ネットの事件

‘-‘ という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ

– という名前の JavaScript/TypeScript パッケージについて警告を発している記事が話題となっています。

このパッケージ、中身はほとんど空で、Readme と、dev で TypeScript を動かせるようにするライブラリ群を呼ぶ箇所だけのもの。

しかし、この “-” を使っている他の npm パッケージが 50個以上あり、約一年前の公開時からのトータルのダウンロード数は72万回にもなります。

しかし、”-” を読み込んでいるパッケージを見てみても、”-” が必要そうには見えません。

警告記事では、この無名のパッケージが密かに使われるようになった原因が、npm コマンドのコマンドラインを打つときのミスタイプにあるのではないかとの仮説を立てています。

つまり、someFlag というオプションを使い

npm i -someFlag somepackage

と打つべきところで、

npm i - someFlag somepackage

と間違ってスペースを入れて実行したことで、”-” というパッケージがインストールされてしまい、その状態からパッケージを作って公開してしまったものが(50個以上)出てしまったのでは、ということです。

実際にわざと間違ってみたところ、someFlag の部分にマッチするnpmパッケージがあれば、特にエラーもなく”-“パッケージが入ってしまいます。

$ npm i - O knock-knock-jokes

added 3 packages, and audited 4 packages in 1s

found 0 vulnerabilities

$ npm ls
test-@ C:\work\temp
├── -@0.0.1
├── knock-knock-jokes@1.7.0
└── O@0.0.9

警告記事を公開した BleepingComputer 社は“-“パッケージの作者にこのパッケージを公開した意図を問い合わせをしたが、返答は無かったということです。このパッケージだけを公開している捨てアカウント、という感じでもないのですが。

今のところ”-“パッケージをインストールしたからといって、少しディスクが無駄になる程度のことしか起こりませんが、将来”-“の新バージョンが出た時、新バージョンがどんな内容に置き換わっているかはわかりませんね。

“-” 以外にもコマンドラインのタイプミスで打ちそうなパッケージ名はいろいろありそうで、自分がインストールしたパッケージを確認すること(npm install の通常の出力ではインストールされたパッケージの個数しか出ない)や、npm パッケージを作って配る際に意図しないパッケージに依存していないかを確認することなどが必要そうです。

Hacker News のスレッドでは、”-“パッケージ自身が無意味で、依存することに将来のリスクがあるとしても、npm から単に消すわけにはいかない、という主張もあります。(“-“を実質使ってないのに)”-“に依存してるパッケージのインストールがエラーになるからですね。ちゃんと中身のあるパッケージが消えた時ほどのトラブルではないにしても、多くのCI/CDやデプロイが止まってしまうこともないとは言い切れません。

もし作者が意図してやってるとしたら、あらかじめ間違いそうなドメイン( googel.com とか)のサイトを用意してミスタイプした人を待ち構えるようなスクワッティングにも似た話ですね。”-“パッケージについては(まだ悪意の有無はわかってませんが)刈り取り前だったとしても、既に他の間違いそうなパッケージで意図しないコードが混入しているとかもあるのかもしれません。

via Hacker News

カテゴリー
ツール

JSONCrush – JSONをURIに圧縮して載せるためのライブラリ

KilledByAPixel/JSONCrush は、JSONをURLに載せやすい形に変換するライブラリです。

JSONCrushのデモサイト。JSON形式のデータを左上に入力すると、それをテキストとして圧縮し(↓)、さらにURIとして使える文字に縁故度しています(→)。

今回入れてみたJSONでは、そのままURIエンコードした場合に比べて52%、約半分のサイズとなりました。

URLにユーザーが入力した結果のJSONデータをなるべく小さくして載せるというのがライブラリの目的です。URLに再現のためのパラメータが全部載っていれば、結果をブックマークしてもらえばいつでも同じパラメータのページが再現できます。サーバーサイドでいろいろ面倒な処理をして覚えておく必要がありません。

そのままURLEncodeする手もあるけど、URLのサイズ上限(2000バイトちょっと)に引っ掛かるのは避けたい、と。HTTPパラメータとして個別に受け取ればもっとコンパクトにできるのでしょうけど、JSONのまま渡せるのは場合によっては楽なのでしょう。作り手側に楽という意味ですが。

使ってるJSCrush ライブラリが変換部分を担っていて、これは特定の文字列内でテキストをエンコードしてくれるもののようです。JSCrushのデモサイトはこちら。

JSCrush は minify したものしかないらしく、
その動作を解析してる人がいました。この解説によれば、JSCrushライブラリは、1KbyteのJavaScriptで何ができるか、というコードゴルフコンテストの2012年の作品で使われたものだそうです。

via Hacker News