タグ

ブックマーク / zenn.dev/mizchi (4)

  • ブラウザ内でバイナリを圧縮してコードやlocalStorageに埋め込む

    JS で wasm のダウンロードや TypedArry を通じた操作をやってると、コード内や localStorage にバイナリを埋め込みたいときがあります。 考え方 JS の内部エンコーディングは UTF16 と決められているので、UTF16で表現可能な範囲を1文字として、バイナリをインライン化すればサイズが小さくて済むはず Chrome は CompressionStearm でブラウザ内で deflate できるので、あれば圧縮する https://chromestatus.com/feature/5855937971617792 Chrome ではない場合、deflate 処理は飛ばしてそのまま。localStorage の読み書きなら途中でブラウザ自体のサポート増える/消えるなどしない限り一貫性は取れる 今回はやってないが、インラインJSに埋め込む場合、50kb を超えたあた

    ブラウザ内でバイナリを圧縮してコードやlocalStorageに埋め込む
  • イベントループと TypeScript の型から理解する非同期処理

    このは、ブルーベリーの 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl

    イベントループと TypeScript の型から理解する非同期処理
  • プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本

    自分も教える事が多いので、読み手にどういう風に学んでほしいか、自分がどういう風に伝えるべきか、という視点で読んだ。 1章・イントロダクション そもそもTypeScript とはなにかみたいな話。 コンパイルエラーが出ている状態ではプログラムが完成したとは言えません。 力強い コンパイルエラーをただ避けるのではなく、利用する気持ち で TypeScript プログラミングに臨みましょう。 初心者に型違反の向き合い方を諭す話。IDEの補助になるとか。 TS年表で取り上げてるのが特徴的。exactOptionalProperty を取り上げてたり。 TSの型はランタイムに影響しない、という話を何度も解説している。これは初心者の誤解がとても多いので、必要だと思う。何度いっても、伝わって欲しい人に伝わらないのだが… enum や namespace については意図的に解説しない。過去のTS独自路線だ

    プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本
  • Template Literal Types で「単位を持つ数値」の文字列型をきれいに扱いたい

    追記: hasSuffix の実装が間違ってたので修正 ブラウザの二次元上の座標を計算するコードを書いていると、 px, rem, flex などの数値が入り乱れて、それらを文字列で管理してると扱いが難しくなります。また、ブラウザの DOM API は、コンテキスト次第で string | number みたいなノリで "250px" や 250 みたいな数値を雑に返してきます。 世の中には typescript 4.1 から使える template literal types で JSON パーサやパーサコンビネータを書く人がいるみたいですが、今回はそういう黒魔術にはできるだけ手を染めず、文字列表現に制約を掛けて、それらの計算を楽にできないかを試していました。 まずは template literal types の簡単なアイデアから。 type PixelValue = `${numb

    Template Literal Types で「単位を持つ数値」の文字列型をきれいに扱いたい
  • 1