console.lealog();

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

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フレームワークです。(つまり好みは分かれるであろう)

vercel/edge-runtime のコードを読む

Web

初手からREPLがついてたりと、なかなか洗練されてそう・・ってのが第一印象。 What is Edge Runtime | Edge Runtime あとは`cloudflare/miniflare`のコードを読んだ身として、どういう実装になってるんやろ?ってのも気になったので。やはりNode.jsの`vm`を…

html-rewriter-wasmでHTMLをパースする

HTMLファイルをパースして、 特定の文字列を抜き出したり 特定の属性を書き換えたものを書き出したり ってことをやりたい時、今までは`cheerio`を使うことが個人的には多かった。 GitHub - cheeriojs/cheerio: Fast, flexible, and lean implementation of c…

AstroでSSGする場合の個人的ベストプラクティス

個人的なやつなので、すべての案件にハマるわけではないはず。今回はたまたまAstroを選んでるけど、他のものを使ってSSGする場合にも、ある程度は当てはまる内容かと。

Astro のコードを読む Part.3

Astro のコードを読む Part.2 - console.lealog(); これの続きであり、最後の記事です。2週間ちょいでバージョンが`1.0.0-beta.27`から、`1.0.0-beta.33`になり、この時点でのハッシュは`51db2b9b4efd899bdd7efc481a5f226b3b040614`でした。まもなくメジャー…

LeetCodeのEasyな問題をぜんぶRustで解こうとしていた

けど、ここ最近あまり意義を感じていないことに気がついたので、キリ番になった記念にやめることにした。キリ番げっとした pic.twitter.com/ciAkzlGaaS— りぃ🐧 / Yuji Sugiura (@leader22) 2022年6月1日 いちおう節目としてメモを残しておく。

ソフトウェアアーキテクチャの基礎 読んだ

Web

O'Reilly Japan - ソフトウェアアーキテクチャの基礎 分厚かった。TL;DRとしては、 アーキテクトかくあるべしについて書かれた本 実践的というよりかは、汎用的な話が広範囲で書かれてる感じ 基礎って書いてるけど、いわゆる駆け出しエンジニア向けではない …

CloudflareのPlatform Weekの発表まとめ

Platform Week - The Cloudflare Blog この中から、個人的に気になったものたちをさっくりまとめ。つまりWorkersとかPagesとかに関連するものが多く、それ以外のStreamingとかWeb3系はスルーしてる。

Astro のコードを読む Part.2

Astro のコードを読む Part.1 - console.lealog(); この続き。概況について把握できたので、次はCLIのコマンドを読んでいく。一ヶ月でバージョンが`1.0.0-beta.9`から、`1.0.0-beta.27`になっており・・・、この時点でのハッシュは`9ef92e0a3d604c479bb325ea…

AstroでCSSのurl()が動作しないことがある

バージョンは、`1.0.0-beta.20`で確認中。 🐛 BUG: css `url()` replaced by __VITE_ASSET__* · Issue #2146 · withastro/astro · GitHub ワークアラウンドもあるけど、さっさと修正されてほしいやつ。→ 修正された!

Astroで名前付きスロットが使えるのは、同系統のコンポーネント間だけ

つまり、名前付きスロットを`.astro`なコンポーネントで使うとき、 --- import Layout from "..."; --- <Layout> <h2 slot="after-header">After header</h2> <h2>Default slot</h2> <h2 slot="after-footer">After footer</h2> </Layout> これが想定通りに動作するのは、`Layout`コンポーネントも`.astro`のときだけ、という話。たとえば`Layout`…

Astro のコードを読む Part.1

GitHub - withastro/astro: Build fast websites, faster. 🚀🧑‍🚀✨ 読みはじめた時点でのコミットは`21926278ba664d8362694efe51943968dfcb4b26`で、バージョンでいうと`1.0.0-beta.9`です。(めちゃめちゃ頻繁に更新されるので、今はもう最新ではないはず)

Cloudflare WorkersのKVに、圧縮済のファイルをアップロードする

たとえばウェブフォントの`woff2`とか、独自の圧縮方式を採用してるファイルとか。そういうのをKVに入れたい場合にどうするかというメモです。

Cloudflare WorkersでWebフォントの配信を最適化する

ということをやってる公式のサンプルを見つけたので、なるほど?って思いながら見てた。 https://github.com/cloudflare/worker-examples/tree/master/examples/fast-google-fonts あと、そのままは流用できなかったけど、似たようなことを手元のGoogle Font…

Cloudflare Workersとレスポンスの圧縮

経緯としては、 CFWで作ったとあるAPIのレスポンスヘッダを眺めてた `content-encoding: br`になってたのを見つけた コードの中では特に何もしてない WorkerのDocsにも特にそれらしい記載はなかった そういえばこれってどこで圧縮してんの? って思ったのが…