2021-05-14

• ひとこと
• 読んだ
  • ☁︎ Salesforce
  • Web, Frontend
  • Rust, WebAssembly
  • その他
• 読みたい
• 書いた
• Stale
• 読んだ記事のメモ
  • How we use Web Components at GitHub | The GitHub Blog

ひとこと

TypeScript の type と interface の使い分けについて調べてた TypeScript で Type Aliases と Interfaces どちらを使うべきか

読んだ

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

☁︎ Salesforce

• Successfully Debug Apex by Streaming Logs to Terminal | Developer Quick Takes - YouTube
  • force:apex:log:tail 使ったことなかったなあ。普段の開発なら VSCode から Get Apex Debug Logs で十分な気がするけどテスト実行時のログとかだとこの方が早そう
• Salesforce 開発を始めるための環境整備 for Mac

Web, Frontend

• Stage 2 Decorators の変遷 / Stage 2 Decorators history - Speaker Deck
• Types vs. interfaces in TypeScript - LogRocket Blog
  • What should I use?の type が適しているケースがよくわからなかった
• CSS Hell - To Hell with bad CSS!
  • CSS のよくない書き方とか落とし穴まとめ？
• interface と type の違い、そして何を使うべきかについて
• 📝 How we use Web Components at GitHub | The GitHub Blog
  • GitHub 社がどのように Web Components を開発、利用してるか。社内開発者向けには Catalyst という独自ライブラリで生産性上げつつも、オープンソース化の際はその依存を取っ払ってピュアな Web Components にするなど面白かった
• github/custom-element-boilerplate: Boilerplate for creating a custom element.
  • GitHub 社の Web Components 開発用ボイラープレート
• JavaScript ツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ － Publickey
• Declarative Shadow DOM - Hemanth.HM
  • 短すぎてこれだけ読んでもなあという感じ
• Chrome Devtool の monitor を使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
• JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
  • 中身を確認したい変数を console.log({ val }) でオブジェクトにしておくと変数名出る

Rust, WebAssembly

• 🎥 Practical intro to WebAssembly (Ukrainian with English subtitles) - YouTube
  • Canvas を使った簡単な画像処理アプリを作るデモ。ライブコーディング多めでわかりやすいが、これだけで何をやってるか理解するのは難しそう

その他

• おっさんが停滞しないために - Speaker Deck
• VSCode で複数リポジトリを扱うなら結局 Open Recent コマンドが最強という話 - yigarashi のブログ

読みたい

• How to Build a Webview-Powered VS Code Extension with LWC | Salesforce Developers Blog
• An introduction to WebAssembly for JavaScript Developers
• A Complete Guide To Incremental Static Regeneration (ISR) With Next.js — Smashing Magazine
• HTTP キャッシュ入門の入門 – cat /dev/random > /dev/null &
• Keeping third-party scripts under control
• Using asynchronous web APIs from WebAssembly
• The webworkers driven UI framework neo.mjs version 2 release announcement | by Tobias Uhlig | Apr, 2021 | ITNEXT
• 楕円曲線暗号アルゴリズムを理解する｜ TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜ BPS 株式会社
• Use CSS Variables instead of React Context | Epic React by Kent C. Dodds
• 📕 Tokio チュートリアル (日本語訳)

書いた

• Rust の From トレイトと Into トレイト - dackdive's blog
• Rust を WebAssembly にコンパイルして lucet-runtime で動かす

Stale

• TypeScript の設定の良し悪し
• Developer Modules | Web Accessibility Initiative (WAI) | W3C
• Web Vitals と JavaScript Error の可視化 – watilde's blog

読んだ記事のメモ

How we use Web Components at GitHub | The GitHub Blog

GitHub 社がどんなふうに Web Components を開発・運用しているかの話。 Github は多くの Web Components を OSS として公開しており、その一覧はこちらで見られる。 https://github.com/github/github-elements

※はっきりと書かれてないが、社内に UI Systems team という FEE チーム的な立ち位置のチームがあり、そこの活動だと思って読むのがよさそう

• 社内のエンジニアが高品質な Web Components を効率的に作成するために、Catalyst (https://github.com/github/catalyst)という独自フレームワークを作っている。
  • "Catalyst leverages TypeScript to add decorators, which save on a lot of the boilerplate necessary to write Web Components."
• Web Components を使用した開発のライフサイクル
  • Start with Catalyst
    • プロダクトチームにコンポーネントを開発してもらうときは、最初は Catalyst を使って書きはじめてもらう
    • よくある落とし穴を回避したりベストプラクティスを強制できる
  • Extracting a component from the monolith:
    • アプリケーション固有のコンポーネントはそのままでは OSS にできないような状態。 多くはハードコーディングされたオプションの値など。
    • コンポーネントとして抽出する前に、一度 Catalyst 固有の機能を取り除いてプレーンな Web Components に変換している
    • なぜか？
      • Catalyst は社内の開発者にとって有用なものの、コンポーネントは極力依存性をゼロにしたい
      • 外部の開発者に、コンポーネントへのコントリビューションの前に Catalyst について理解してもらうというのは避けたい
  • Open source components mean specific requirements
    • オープンソースにするコンポーネントは、モノリスなコンポーネントとは異なる（品質の）基準を設けている
    • 依存関係がほとんどなく、特定のフレームワークやライブラリに依存せず(agnostic)、軽量で、スタイルフリー(style free)で、 他のコンポーネントから切り離されており、１つのことを１つの方法で行う
    • 標準化された構成を用意し、完全なテストスイートとリンターのセットアップを保証してる
      • 💬https://github.com/github/custom-element-boilerplate にあるボイラープレートのことかな？
• What's next?
  • Web Components の将来に期待しており、HTML spec への変更のプロポーザルもモニタリングしてる
  • 最近最も期待してるのは
    • Template Parts
    • Declarative Shadow DOM