console.lealog();

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

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…

静的サイトジェネレータ、もといbetter webpackとしてのNext.js

(SSR不要論者のはしくれとして)今までこれっぽっちも気にしてなかった、あのNext.jsです。 ここでいうSSRは、クライアントのリクエストに応じてSSRしてレスポンスを返すこと。ただ最近仕事で使ったり、副業でも使ってたりする機会があって、一部認識を改め…

Next.jsで、サーバー・クライアントで一度だけやりたい処理

たとえば`firebase.initializeApp()`とか、特定のライブラリにSSR時には何もしなくてよいことを伝えるAPIとか。ドキュメントにもコレだ!という部分がなかったので書いておく。

beforeunloadイベントと確認ダイアログ

Changes you made may not be saved. フォームの入力中とかにページを離脱しようと出るアレのこと。昔から微妙に使われてるくせに、いまいち挙動が不定でブラウザ差異もあって釈然としない。最近はどうなってるのか知る必要が出たので、改めて調べた。 Chrom…

PreactでもMobXを使いたい

正確には、`mobx-react-lite`を使いたい。 そんなときにどうすればいいか。そしてできることなら`preact/compat`ではなく、素の`preact`でやりたいが・・。 追記: やりたい気持ちが高まったので、自分でそれ用のライブラリを作りました。 つ https://github.…

Svelteランタイムのコードを読む Part.2

前回の記事でランタイムにおける`svelte`のコアは読んだので、今回は拡張となる機能たちを見ていく。 `svelte/store` `svelte/motion` `svelte/transition` `svelte/easing` `svelte/animate` これらのネームスペースで`import`できるやつ。

Svelteランタイムのコードを読む Part.1

コンパイラのコードを一通り読んだところなので、ランタイムもついでに読んでおこうかと。

Svelteコンパイラのコードを読む Part.3

Svelteコンパイラのソースコードリーディング記事の続編の続編。`svelte/compiler`の`compile()`を追っている途中。