console.lealog();

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

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

ev.composedPath()でClick awayを実装する

Event.composedPath() - Web APIs | MDN いつの間にこんな便利なやつが・・。

仕事でコードを書くときに意識していること

Web

達人プログラマーを読んだせいか、最近よく考えてることでもあるので、この際なのでポエムにしてみた。受託の会社バイアスはあるかもしれないけど、基本的にコードを書くエンジニアには通ずるところがあるはず。

達人プログラマー(第2版) 読んだ

Web

久しぶりに物理本を読んだけど、やっぱ物理はええな・・かさばるとこ以外。せっかくなので読書感想文と、特に印象に残った部分を、章ごとに書いておく。

2020年の振り返り

Web

社の営業日も終わったし、毎年恒例の振り返りをやっていき。なんだか今年は特に早かった気がするわ・・。

SVGをcanvas要素で扱う

普通の`img`やら`video`要素なら、`CanvasRenderingContext2D`の`drawImage()`で楽勝なんですが、SVGは画像であって画像ではないので、ひと手間が必要・・・。地味に面倒だったのでメモ。

Workboxで画像をランタイムでキャッシュする

アクセスするとメガ単位でたくさんの画像を読み込むサービスがありまして・・。リファクタによって、動的に必要な画像だけを読み込むように改修はしたけど、それでも回遊するとサイズがすごいことになる。これをなんとかするならServiceWorkerしかない!とい…

Preactを使いたいのに使えない

という気持ちが高まったので、とりえあず2020年末の情報として、書き残しておくことにした。

Vue Composition APIとReact HooksとSvelteの違い

について、Vue Composition APIのDocsに記載があったので、自分用にメモ。 Composition API RFC | Vue Composition API このRFCが出たのは2019年の7月なので、ぜんっぜん目新しい情報はないです。

Svelte Summit 2020 気になったトークのまとめ

https://sveltesummit.com/ https://www.youtube.com/watch?v=vHHLLJA0b70 JST夜中スタートだとリアルタイムで見れない...😴というわけで、気になるトークだけまとめました。

MobX 6.0.0 について

出ました。 mobx/CHANGELOG.md at mobx6 · mobxjs/mobx · GitHub 目玉機能!みたいなのはないです。 それだけ安定してるという意味でもある。

Modern Web Development on the JAMstack を読んでまとめた

Web

https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本?PDFです。せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。あとJamstackは人によって解釈が違ったりするとし、Ja…