フロントエンドカンファレンス北海道

https://fortee.jp/frontend-conf-hokkaido-2024/proposal/accepted

https://zenn.dev/ken7253/articles/darkmode-approach

ダークテーマ、アクセシビリティともにざっくり説明があって前提がない人でも聞きやすそう。

グローバルトークンを直接コンポーネントから呼び出すパターンがありそう…？

とりあえずカラートークンを作ってから、アクセシビリティ対応をしたって感じっぽい。

やはりコントラスト比の話になってきた。

色ごとにプライマリカラーを分けるのいいな

https://speakerdeck.com/degudegu2510/dakutematoakusesibiriteinorong-he-sitakaratokunnoshe-ji

ライブラリなしで実装するUI
研修の補助とかによさそう

astroの話とかもよさそう

さくらもデザインシステム作ってるんだ

https://www.nilto.com/ja

リッチテキストエディタ＋カスタムコンポーネントが定義できるみたいな感じ…？

react-aria 意外と知らない

APG+デバイステスト済みなのよさそう

https://react-spectrum.adobe.com/react-aria/

想定レベルはたぶん自分ぐらいのレベル感っぽい。
MDNとにらめっこしてる人

整形コンテキスト

こいつについての説明が中心

CSSのボックスモデル

ゼロ個以上のボックスを生成する。
複数生成される場合もあるっぽい。

フローレイアウト

• ブロックフロー方向
• インラインベース方向

整形コンテキスト

インライン整形コンテキスト

• インライン整形コンテキストのみが含まれる。
• 行のボックスなども生成される。

ブロック整形コンテキスト

• ドキュメントのルートとか

https://developer.mozilla.org/ja/docs/Web/CSS/display

整形コンテキストを伴わないもの

=> float, position

position面白い

• 包含ブロック
• 重ね合わせコンテキスト

CSS display Module Level 3
https://www.w3.org/TR/css-display-3/

アニメーションが有利に働く場合と不利に働く場合

モーションは基本的に見ずらいという認識の上で適切に利用する

モーションの重心

イージングを使って、アニメーションの時間の中でも変化が完了したと感じるタイミングを調整する。

scaleとOpactiyを掛け合わせて重心をコントロールする。

https://m3.material.io/styles/motion/overview

デバイス側にあるサーバーだからエッジサーバー
ローカルにあったりする。

なぜエッジ？

パフォーマンス

• 画像最適化
• キャッシュ

エッジもある種のworkerである

セッションリプレイの話

iframeに記録したイベントを反映していく

アプリケーション固有のLinterルールの話

HTTP Request Header Field からの値を取得場合

CDNのキャッシュヒット90％

ユーザー属性ごとにコンテンツが違う場合にどうキャッシュを効かせるか

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Vary

CSS in JSの処理の高速化

CSS in JSが書かれているファイルだけbabelに通したい。

誓約は守られるのか

コードレビューなどでチェックするのでは100％は難しい。

https://astexplorer.net/

https://typescript-eslint.io/packages/rule-tester/

https://speakerdeck.com/sakito/component-driven-design-and-development

https://www.w3.org/community/design-tokens/

現状のWASMには非同期処理がない

JSとコールスタックを共有している。

JSPI

• WASMのモジュールが非同期関数としてみなせる。
• WASMの並行実行が可能になる。

並行実行（parallel）ではない

非同期処理の知識はJS側にある

自作のイベントループ

Rustのasync/awaitを利用してNode.js側に処理をwasmから依頼したい。

async-executor

https://developer.mozilla.org/ja/docs/WebAssembly/JavaScript_interface

https://shaders.skia.org/

テキストのレンダリングはフォント自体と装飾で分かれている。
それぞれのフェーズで影をつけている

表記法について

5, 6の章が重要