console.lealog();

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

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()`を追っている途中。

Slackからのリクエストを正しく検証する

AWS

たとえばSlash CommandsをAWSで作っていて、そのコマンドからPOSTリクエストが飛んでくるエンドポイントの実装をしているときの話。別に誰に叩かれてもいいAPIなら問題ないけど、ちゃんとSlash Commandsから飛んできたリクエストであることを判定したい場合…

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

Svelteのソースコードリーディング記事の続編。`compiler`がエクスポートしてる3つの主な関数のうち、`preprocess()`と`parse()`を読んだのが前回の記事。今回は残りの1つであり、最大の山場でもある`compile()`を追っていく。

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

気になるもののコードは読むべし、ということで。ちなみにコードを読み始めた時点でのバージョンは、`v3.23.2`です。自分のコードリーディング用のメモ記事なので、他の人が読んでわかりやすいかは保証できません!

Svelte Society Day 2020: Rich Harris: Frequently Asked Questions の要点まとめ

Svelte Society Day 2020: Rich Harris: Frequently Asked Questionsわかりみしかなかった。リッチ氏、本職はNYTのデザイナーなんですよね・・エンジニアじゃないんですよね・・まじすげーわ・・。

転職しました

Web

そして子も生まれていました!というわけで、子です🤗 pic.twitter.com/UzvIiUpCOP— りぃ (@leader22) 2020年6月10日 人生ですなあ。

Svelteで生DOMを扱う

Reactでいうところの`ref`を、Svelteでどうやって扱うか。まぁドキュメントにちゃんと書いてあるけども。

Svelte/Sapperを静的サイトジェネレーター(SPA)として使う

最近ひさしぶりにペライチの静的なサイトを作る機会があって、何で作ろうかなーと考えた。Nextの`export`や、Nuxtの`generate`があるなら、Svelte/SapperにもそういうSSGの機能があるのでは?というのがきっかけ。 https://sapper.svelte.dev/docs#Exporting…

React x MobXな趣味プロダクトをSvelteでリライトした

続・React x MobXな趣味プロダクトをTypeScriptでリライトした - console.lealog(); このシリーズの続編で、いわばSvelte人柱シリーズです。

Svelte 3の仕組みとその手触り

実は最近まとまった時間ができたので、フロントエンド勘を取り戻すためにも、ずっと気になってたSvelteを触ってみてる。一通りDocsやTutorialに目を通しきったところで、備忘録も兼ねて記事を書いておこうかと思った次第。 Svelte 3: Rethinking reactivity …

mobx-reactとmobx-react-liteと、それぞれのobserver APIの違い

わかってる側からすると無意識に選んでたけど、わかってない側からすると混乱するよなこれ・・。と思ったので、今さらではあるが言語化の意味も込めてメモ。

MobX作者による、RecoilとMobXについての簡単なまとめ

http://github.com/facebookexperimental/recoil 先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・?」って個人的になっ…

wasm-bindgen/web-sysでWebRTC

っていうのをやってみた。いちおうやったので、公式のexampleにもPRも出して、マージしてもらった。

NetlifyのFormsについて

Forms setup | Netlify Docs 個人的に忘れないようにメモ。

Preact x TypeScript x Babel x webpack x ESLintの環境構築

久々にやったら割と時間を食ったのでメモっておく・・。

PWA Night vol.15 ~テクニック/API~ に行ってきたメモ #pwanight

Web

PWA Night vol.15 ~テクニック/API~ - connpass オンライン登壇の実績を解除した・・・!

フロントエンド x RTC界隈の最近とこれから

フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。ちなみにここでい…

mediasoupの開発Tips

`mediasoup`を使ったサービスを開発する上での役立ちTipsをメモっておきたいなと思ってたので。(なんか思いついたらまた追記します。)

mediasoupを使う前に知っておくべき概念たち

公私問わず`mediasoup`をここ半年くらいずっと触ってて、ドキュメントだけでなく中のコードもそれなりに読み通してる身として。

NodeJSのStreamについておさらい

とあるNodeJSのサーバー実装を読んでて、頻出するこいつらに目が慣れてなかったせいで、読み進めるのに時間がかかってた。ので、思い出しながら、おさらいがてらメモを残してたので記事にしておく。考え方やデザインがどうっていうよりも、コードを読む時に…

JavaScriptでもバーチャル背景する

やってやれないことはなかったです。 ぱっと思いついた2通りのアプローチで実装してみたので、その学びをメモっておきます。ただ、個人的には別にいらない機能かな・・。

Rust x WASMのyewでTodoAppを作ってみた

話題になってたのは去年くらいな気もするし今さら感はあるけど、今だからこそすごい化けてたりしないかなーという期待も込めて。個人的には、WASMでWebアプリを作る時代になるとはあまり思えてないけど、まぁ試しておく価値はあるかなと思いその学びをメモ。

続・続・WebRTCなコードをE2Eテストする

続・WebRTCなコードをE2Eテストする - console.lealog(); WebRTCなコードをE2Eテストする - console.lealog(); 新しいネタを仕入れたので、このシリーズがまだ続きます!

Androidで`getUserMedia()`したら`NotReadableError: could not start video source`

なかなか懐かしい気分にさせてくれますが、特定の機種でのみ発生するエラーでした。回避方法がちゃんとあるのでそれをメモっておきます。

Rustのモジュールとディレクトリの関係のおさらい

Rust 2018 Editionです。 Rustのモジュールの使い方 2018 Edition版 | κeenのHappy Hacκing Blog なおこちらの偉大な先人の記事がスッと頭に入る人は、このメモを読む必要ないです。