console.lealog();

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

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にも特にそれらしい記載はなかった そういえばこれってどこで圧縮してんの? って思ったのが…

Cloudflare WorkersをRust(WASM)で書くと速いのか

なんとなく察しはついてるけど、いちおう確かめておこうかと。 GitHub - leader22/workers-benchmark 詳細はこのリポジトリに。

RemixをCloudflare Pages w/ FunctionsでデプロイしてKVも使う

ということがなんとかできたので、その記念に。 https://github.com/leader22/remix-cloudflare-pages-kv Remixのバージョンが`1.2.1`の話。

Cloudflare WorkersでSSRできるフレームワークを求めて

2022年現在に、Cloudflare Workersで(CDNエッジでWorkerで)SSRする方法は2つある。 Cloudflare Pages(w/ Functions) Cloudflare Workers(w/ Workers Sites) 静的サイトホスティングサービスであるPages + Functionsで動的な部分を追加するというアプローチ…

Svelte 3.46.0で追加された新機能

https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3460 機能追加と言えるものは割と久しぶりな気がしたので、こうして筆を執ってみた次第。この2つの機能が追加された。 `@const`タグ `style`ディレクティブ

Qwikというフレームワークについて

GitHub - BuilderIO/qwik: An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code. 去年から気になってて、調べたいなーと思っ…

2021年の振り返り

Web

子育てしてたら一日が終わってて、それを続けてたら一年が終わってた、そんな一年。 おかげさまで、👼🏻は1歳半の元気ざかりで何よりではある・・が、思ってたより大変すぎる!いやほんとまじで(

Cloudflare Pages Functionsを試す

Cloudflare Pagesは、今まで単なる静的サイトのホスティングサービスだった。それがこの度のパワーアップで動的なAPIも一緒にデプロイできるようになった。しかもそれはCloudflare Workersで実行されるので、デフォルトで速いんですよ!っていう触れ込み。 C…

miniflare@next のコードを読む

現時点ではまだリリースされてなくてベータの状態。現行のv1について読んでみたのはこちら。 miniflare のコードを読む - console.lealog(); ちなみに、Cloudflare系スタックの開発に使うCLIの`warngler`が、なんとv2になると同時にMiniflareを内蔵したCLIに…

Cloudflare WorkersのCron Triggerで、サブリクエスト数制限と戦う

プランによっても変わるけど、Workersには制限がいろいろある。 デプロイできるコードのサイズ 実行CPU時間 etc... https://developers.cloudflare.com/workers/platform/limits 先日の発表で、そのあたりの一部が緩和されるという話があって、またひとつ使…

CDNエッジでSSR、ではなくSSG+αできないか

なんだかんだここ半年くらいずっとCloudflare Workersを触ってます。 で、CDNエッジでコードが動くことはわかった。制約があることも、それなりに速いこともわかった。で、これをどう扱っていくのが人類にとって良いんかな〜?みたいなことをずっと考えてた…

CloudflareのFull Stack Weekの発表まとめ

Cloudflare社は、定期的に「なんたらWeek」って感じでまとめてアップデートを発表する取り組みをやってるっぽく、今回のテーマはフルスタック! なんでもかんでもCloudflareでできるようにするよ!という強い意志を感じる発表たちだった。 Full Stack Week -…