2021-12-21

December 21, 2021

💬 ひとこと

2 ヶ月もあいてしまった。。。React Conf の動画ちょっとキャッチアップした。 Storybook が出した UI Testing Handbook | Storybook Tutorials気になる。

✨ ピックアップ

SPA Component の推しディレクトリ構成について語る

とても参考になる。このルールはいろいろ迷わなそう。よしこさんの一連の記事は今後もしばらく参照することになりそうなのでメモ。

CSS in JS として Vanilla-Extract を選んだ話と技術選定の記録の残し方

とても参考になった。そして ADR かなり一般的になってきたな。

上記の観点などを基に議論した結果、vanilla-extract を使うことにしました。観点では正直どちらにするかという結論は出ませんでした。これは、何度も書いていますが、おそらくどちらのスタイリングライブラリを使っても問題なく実装はできるためです。最終的に vanilla-extract を選んだのは TypeScript の親和性の高さと面白そうだからという興味本位です。

Karte チームはこのように結論づけているが、ランタイムで実行しないというのは emotion より魅力ですね。

React Conf 2021

いくつか動画を見た。

Accessible Japanese Form Components with React - YouTube
- SmartHR さんの。アクセシブルなコンポーネントの実装方針についても詳細気になる
React 18 Keynote - YouTube
- Suspense、Concurrent features、Server Components など。Concurrent は mode でなく features になったって言ってるのは段階的に導入できるってことかな
React 18 for app developers - YouTube
- 複数の state 更新をバッチで処理してくれる機能がイベントハンドラ以外でも有効に。あとは concurrent features の API である useDeferredValue()のデモ

✅ 読んだ

📝 : 下の方に内容メモあり

☁︎ Salesforce

🌐 Web, Frontend

UI Testing Handbook | Storybook Tutorials
- ref. https://twitter.com/domyen/status/1471645390504177670?s=20
This week in React
- https://twitter.com/sebastienlorber/status/1470810313012527109?s=20
DOM メモリリークのデバッグツール「Detached Element」、Microsoft Edge の DevTools に搭載－ Publickey
Floating UI - Positioning for tooltips, popovers, dropdowns, and more
- https://twitter.com/atomiksdev/status/1466106700583243779?s=20
kintone マイクロサービス化検証プロジェクトの Web フロントエンドにおける技術選定 - Cybozu Inside Out | サイボウズエンジニアのブログ
React 18 に備えるにはどうすればいいの？　 5 分で理解する - Qiita
💡 Node.js のバージョン管理ツールを改めて選定する【2021 年】 - Qiita
- volta、package.json でしかバージョン指定できないのネックだよね
Remix という考え方
Slack Introduces New Platform With Help From Deno
- "Slack chose Deno for its "secure by default" principles, its web standard APIs, and its first-class TypeScript support."
Flexible automation for everyone | Slack
React ベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Polight/lego: 🚀 Web-components made lightweight & Future-Proof.
niespodd/browser-fingerprinting: Analysis of Bot Protection systems with available countermeasures 🚿. How to defeat anti-bot system 👻 and get around browser fingerprinting scripts 🕵️‍♂️ when scraping the web?

🦀 Rust, WebAssembly

Using WebAssembly (created in Rust) for Fast React Components | www.joshfinnie.com
- Rust を Wasm にコンパイルして React アプリに組み込む方法。Wasm と JS のグルーコード生成に wasm-bindgen-cli というのを使ってるのかな。import には webpack プラグイン使ってる
postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust
- 既存ツールの Rust 実装ほんと増えてる
Rust 初心者殺しの文法 10 選 - Qiita

🤝 スクラム・組織

LAPRAS における 20%ルール的なものとその心｜ rocky_manobi ｜ note
- 非常に参考になった。“PBI の消化という分かりやすくチームに貢献できるタスクがあるからこそ、20％程度はそのレールに乗らない価値提案を個々人が行う機会を持ってほしいと考えています。”
エンジニアリングマネージャーはじめました(2 周目)｜ Yoshiki Iida ｜ note
- 弊社 EM の記事。組織のフェーズや個人の価値観に応じて EM<>エンジニアを柔軟に行き来できるとキャリアの選択肢が広がっていいですね。率先して引き受けてくれてほんとありがたいです
入社して 1 ヶ月で意思決定の速さに驚いた話 - ANDPAD Tech Blog
- いい組織。DesignDoc 書いて提案するというしくみよい
「超」自律性を追求してプロダクトチームを分割した話｜ Shoma Takeo ｜ note

zaki-yama's reading list