🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

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

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…

静的サイトジェネレータ、もといMPA向け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()`を追っている途中。

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 個人的に忘れないようにメモ。