console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

TensorFlow.jsのUniversal Sentence Encoderで、ブラウザ上でEmbeddingsを作る

ということをやってみた。できたにはできた、が・・・、って感想だった。

Firefoxをソースからビルドする

ちょっと所用があったので。 Firefox Contributors’ Quick Reference — Firefox Source Docs documentation ドキュメントがさすがにちゃんとしてて、基本的には全部ここに書いてあるけど、自分用にもメモを。

CloudflareのDeveloper Week 2023の気になった発表のまとめ

今年も祭りの季節がやってきましたね。 Developer Week 2023 | Cloudflare というわけで、今年も個人的に気になったものを。(発表されるのがだいたいJST深夜かつ最後が金曜日なので、どうやっても公開するの週明けになるんよな・・)

Web Sessions at Google I/O 2023の気になった発表のまとめ

Web

まとめプレイリストが公開されてたので、その中から気になったやつを流し見した。 https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h

Cloudlflare Workersの、Node.jsとの互換性について

3月くらいにもなんか発表されてた気がするけど、結局いまどういう状態やっけ?って思ったので、思い出しついでにまとめる。 Node.js compatibility for Cloudflare Workers – starting with Async Context Tracking, EventEmitter, Buffer, assert, and util

`new Response(null, { status: 101 })`は、実行環境によってエラーになる

ことの経緯としては、 とあるHTTP関連のOSSにPRを出そうとしていた コード書いてテストを実行すると、どうやらPRを出す前からコケてるケースがあった 原因は、`new Response(null, { status: 101 })`が`RangeError`で落ちてたから さて、これはなんでエラー…

OpenAIのEmbeddingsで全文検索

https://platform.openai.com/docs/guides/embeddings Embeddingsとは、テキストの類似性や関連性を、画一的なベクトルで表現することらしい。それによってテキストの種類を分類したり、検索したり、いわゆるレコメンドに使えたりする。今回は、このブログ記…

OpenAI APIで思い出す、Server-Sent Events

Server-Sent Events・・・お前・・・生きていたのか・・・!っていう気持ちになったので、ちょっとだけまとめておく。

2023年のCSSは0ランタイムにしたい

したいよね?事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエム…

ViteのCSS Modulesは、JSのようにTree shakingできない

なんとなしにビルド後のCSSファイルを眺めてて、なんで使ってないUIパーツのCSS定義が含まれてるの・・?って思ったのがきっかけ。

Svelte(Kit)のScoped CSSで付与されるクラス名を変えたい

`svelte-9hyylu`みたいなやつ。なんか冗長じゃない?これ削れば少しでもページ容量を減らせるのでは?的なモチベーション。

ブラウザで動くSQLite alternativesとしてのLovefield

タイトルはさておき、LovefieldというSQLライクなAPIが使えるライブラリがあって、個人的に便利だったので。

Svelte(Kit)を使ってて気になるポイント

Svelte(Kit)に対しては、基本的に"推し"なスタンス。けど、今回はあえて気になるポイントも書いておこうかと。めちゃめちゃ不満ってほどでもないけど、気になるってところ。ちなみに、SSRは基本的にしない(できない)用途の開発ばっかりやってる勢なので、…

new Function() ではなく new AsyncFunction() したい

我ながらニッチなことをやろうとしてるなって思う・・。普通の生活をしてる分には、活躍する出番はないはず。`eval()`はもっと使わない。

Qwik(City)を試してみた感想

もとい、Svelte(Kit)なプロジェクトを、Qwik(City)で書き直してみての学び。待望のやつではあるが、端切れの悪いタイトルなのは、移行途中でどうしようもなくハマってしまい、採用を見送ることにしたから・・そういうわけなので、使い込んでみたわけでもまっ…

配列のインデックスを`.keys()`で操る

TL;DRこちら。for (let i = 0; i < arr.length; i++)はfor (let i of arr.keys())って書けるし、中身もいるならfor (let [i, d] of arr.entries())ってする— りぃ / Yuji Sugiura (@leader22) 2023年1月10日

VimからNeovimに移行した

Vim

移行しようと思ってしたというより、なりゆきでそうなっただけではあるけど。が、結論としてはもっと早く移行すりゃよかった!というくらいに、Neovimいいやん!ってなってる。

2022年の振り返り

Web

まーた今年も終わってしまう!まだ何もしてないのに!というわけで、今年もいつもの振り返りを。

Cloudflare D1のデータベースファイルをダンプして使う

Cloudflare WorkersのD1といえば、APIとして立てたWorkerの内部で操作するのがまぁ一般的なはず。ただ、D1はSQLiteなので、その裏にいるDBファイルを持ち回すこともできるんでは?っていう。

SQLite公式のWASM実装を試す

sqlite3 wasm docs: sqlite3 WebAssembly &amp; JavaScript Documentation Index 別にいままでも、公式ではないWASM実装はブラウザで使えてたけど、公式が出すからには何かあるに違いない!ということで一応。

JSDoc TSで、ユニオン型を改行して書く場合は、括弧が必要

JSDoc TSの場合、ユニオンを改行して書く場合は括弧が必須・・・! pic.twitter.com/C845A6PyPw— りぃ🐧 / Yuji Sugiura (@leader22) 2022年11月18日 この画像のとおり。

最近のフロントエンドフレームワークに対する認識とお気持ちの整理

Web

久しぶりに、いわゆるポエムを。新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。

`npx tsc --noEmit`したい

っていうことが最近よくあって。純TSなプロジェクトならそんなことはないと思うけど、JSDoc TSでやってたりすると。

Cloudflare WorkersでGitHubのWebhooksを受け取りハッシュを検証する

いわゆるWebhooksは、改ざん防止のためのハッシュをつけることができる。それを受け取り側で検証するコードはこういう風に書くっていうメモ。Node.jsの場合は調べればいっぱい出てくるけど、最近のWorker環境系ではズバリなやつが見つからなかったので。

coc.nvimのGoTo Definitionをウィンドウ分割で

Vim

サンプルの設定ままだと、ウィンドウ分割ではなくそのウィンドウで開かれてしまうので、ちょっと不便。 nmap <silent> gd <Plug>(coc-definition) `gd`で定義ジャンプして開いたやつを閉じて、もとに戻るにはどうすれば?ってなる。`C-o`で戻れるけど。そもそもこれを、`:s</plug></silent>…

PreactにSignalsがきた

Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・!

Qwikでinteractiveなコンポーネントをネストしたときの挙動

Partial Hydrationをネストできる、みたいなイメージ。 (正確には、QwikのコンテキストでいわゆるHydrationと呼ばれる処理は行われないけど)素直にQwik-wayなコードを書くだけで、Resumableなコンポーネントがネストできるというだけ。

Svelteのstoreをdebounceする

表示の更新タイミングを間引いたり、`subscribe()`した時に値が流れてくるペースを抑えたいって場合に使える。検索文字列をいれるUIとかで、入力フォームはリアルタイムで反映したいけど、APIを叩くペースは落としたいときとか。

DOM ready events considered harmful | HTTP 203 の要点まとめ

なかなか気になるタイトルの動画が出てたので。 DOM ready events considered harmful | HTTP 203 - YouTube こういうコード、ほんとに懐かしいな・・・w // コレとか $(() => {}); // コレとか document.addEventListener("DOMContentLoaded", () => {}, f…

Solidの特徴と、その裏側

https://www.solidjs.com ずっと調べたいものリストにはあったやつで、Astro熱がちょっと収まったのでこのタイミング。めちゃめちゃ雑にまとめると、React + MobX feat. Svelteって感じのUIフレームワークです。(つまり好みは分かれるであろう)