console.lealog();

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

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 -…

Cloudflare Workers Sitesと、Cloudflare Pagesのパフォーマンス比較

なんとなく気になったので、軽く手元で試した。ので、ついでに書いておく。

Transitional Apps by Rich Harris の要点まとめ

Jamstack Conf Session: Transitional Apps 先月のJamstack Conf 2021のトークより。ほんとはもっと早くまとめたかったけど、仕事のアレがアレでな・・。内容としては、ちょっと前に書いてたこの記事にも縁がある感じの内容かも。 なんでもSPAにするんじゃね…

Cloudflare Workersで、Workerから別のWorkerを呼びたい

結論から書いておくと、 できることはできる ただし、異なる`account_id`でデプロイされたWorker同士なら より正確には、`zone`が違えばいいらしいけど という。 Get error code 1042 when fetching within worker - Workers - Cloudflare Community Issue W…

Cleaner, more elegant, and ... の、例外とエラーの話

Cleaner, more elegant, and wrong - The Old New Thing Cleaner, more elegant, and harder to recognize - The Old New Thing という、似たようなタイトルの記事が2つありまして。 どちらもマイクロソフト社のレイモンド・チェン氏が書いたもの。 氏は、「…

CloudflareのWeb3の記事を読んで、ざっくり調べたメモ

Web

我らがCloudflare社が、先日のブログで"Web3"なるものに言及してた。しかも3記事も続けざまに。不勉強な身としては、ざっと読んだだけではふわっとしか理解できなかったので、もう少しちゃんと理解したいなーと思った。 というわけで、概要を訳しつつあれこ…

ReactのSWRで、複数のキーをまとめてmutateしたい

たとえばページングが必要なリストがあって、そのリストをどこかで増減させた場合。いま見てるページに関わらず、全てのリストを最新のものにしたい・・って話。正規表現でも渡せればいいけど、`mutate()`には単一の文字列キーしか渡せないので、さてどうす…

JSDoc TSでジェネリクスを使う

あんまり知られてないかもしれんけど、JSDocのコメントを書くことでもTypeScriptの恩恵は受けられる。より正確には、 JSDocコメントを書くことで `.js`ファイルであっても TypeScriptのLanguage Serverの機能を(一部)利用できる というわけ。で、これが結…

Tailwind CSSは、ViteのMPAで最適化できない

ということに仕事で困らされて、最近それなりの時間を持っていかれた記念のメモ。とりあえずのワークアラウンドは見出したけど、あとでどこかの誰かがもっといい感じにやってくれへんかな〜って。

なんでもSPAにするんじゃねぇ!という主張のその先

Web

Your shopping website is not an SPA.I repeat: your shopping website is not an SPA.Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈(少なくとも自…

ラベル付き文でif文をbreakする

っていう使い方もあるのか〜と久々に学びがあったのでメモ。

miniflare のコードを読む

https://github.com/mrbbot/miniflare Cloudflare Workers(以下、CFW)相当の実行環境をローカルで再現できるアレです。そんなんは公式が出してほしいな〜と思い続けてはや1年弱、いつまで経っても出てこない! というわけで、コード読んでみたシリーズです…

Cloudflare WorkersのKVで、キーのリストは即時反映されない

というバグなのか仕様なのかわからない挙動があってちょっと困ってるという話。もしもし中の人、もし見てたら教えてください!

アクセストークンをWebWorkerで扱う

というアプローチを紹介してる記事があって、なるほど?と思ったのでまとめてみる。元記事はこちら。 Leveraging Web Workers to Safely Store Access Tokens – The New Stack 毎度のことながら、今にはじまったことではない。

preactjs/wmr について

WMR

GitHub - preactjs/wmr: 👩‍🚀 The tiny all-in-one development tool for modern web apps. これです。

Cloudflare WorkersをTypeScriptで書いてesbuildでビルドする

そのためにはこういう用意があればよいというメモです。いちおうTSだけなら公式からもテンプレが出てるので、それを使うのが手っ取り早い。 けど、`webpack`しかないし他にもいろいろ付いてくるしな〜という。 GitHub - cloudflare/worker-typescript-templa…

SvelteKitの特徴をざっくり理解する

GitHub - sveltejs/kit: A monorepo for SvelteKit and friends SvelteKitは、Svelteでハイパフォーマンスなアプリを作ることができるフレームワーク。`v1.0`を目指しているところで、いま時点での進捗は37%というところらしい。つまり、世界的に知見もたま…

VimでもSvelteをTypeScriptで書きたい

TypeScript対応が入って久しいSvelteですが、いざその恩恵に預かって快適コーディングするためには、LSPのサポートが必須な今日このごろ。ただ、界隈のLSPにシュッと対応したエディタといえばVSCodeの話ばっかりで、こちとらVimなんですが!!って感じだった…

Cloudflare WorkersのDurable Objectsでチャットを実装する

っていうコードが公式のリポジトリにあって、なかなか読み応えのあるコードだったので記事に。 GitHub - cloudflare/workers-chat-demo

Cloudflare Workersを軽く試した感想

Cloudflare Workers docs 巷で話題のエッジワーカーというやつ。お仕事で使えるかもしれないというわけで、Docsを一通り読んでみて、ちょっとしたコードをデプロイしてみたところまでの感想。

慣性ドラッグの慣性のところだけを実装したライブラリ

作った。いわゆるGoogleMapのようなものを作りたい場合に使えるやつ。まあだいたいはDOMイベントまわりまで面倒みてくれるライブラリを使う事が多いとは思うけど、そのすべてを自作しないといいけない場合、こういう部品だけがあるのも便利かと思い。 GitHub…

preventDefault()ではなく、touch-actionを使う

たとえばカルーセルとか たとえばcanvasのお絵かきツールとか ユーザーがページ内の特定の領域をドラッグ操作するなにかを実装するときの話。それを実装してて誰しもがハマるのが、ユーザーがその領域を触ってるときにページ全体がスクロールされちゃったり…

無音を鳴らして自動再生ポリシーをアンロックする

Safariなどのブラウザには、音の自動再生に制限があって、ロード時にいきなり再生!というのがだいたいできない時代。(この制限にはいろいろ条件があるけども)そのため、「このサイトでは音が出ます」みたいなモーダルを出して、まずそれをクリックしても…