とある社内フロントエンド共有会の一般公開に参加してきたメモ 2020/8/25
資料
https://gist.github.com/sakito21/d31529d0c43821ca9e03e2596762b295
概要
普段#サイボウズフロントエンドウィークリーとしてTwitterで実況している、社内フロントエンド情報共有会を一般公開します！
今回は8月に話題になったフロントエンドの情報を共有していきます。 参加者の皆さんにはTwitterのハッシュタグで参加してもらいながら、意見を交換していきます。
フロントエンドに関する情報をキャッチアップしにきてください！
The Just in Case Mindset in CSS
よくあるデザインコンポーネントで発生しがちなデザイン乱れのシナリオをまとめた記事。 この記事では主に、コンポーネント内部に想定外の長さやコンテンツが挿入された場合のシナリオについて触れている。
コンポーネント1つにつきCSS1-5行程度のシンプルな解説ですが、こういう細かいところにも気を使っていきたいという強い気持ちを持って共有します。 実際、こういったケースは知らないと対応のしようがないので全人類知っていこう💪
簡単なプロパティ設定ですが、知らないとやってしまいがちな事ですね。こういったケースをひとつひとつ蓄積して行こうね、といった話！
A Complete Guide to Dark Mode on the Web
Webサイトをダークモードに対応させるためのTipsやアプローチのまとめです。 prefers-color-scheme を使ってシステム設定をもとに対応する方法は広く知られるようになってきましたね。 ユーザのシステム設定に合わせてテーマを切り替えること自体は難しくないですが、ユーザがシステム設定をダークモードにしていることがWebサイトをダークモードで見たいことと等価ではないことを考慮したほうがよいと記事内では言及しています。 システムの設定を見つつ、Webサイト上でもテーマをトグルできるような実装が親切で、加えて切り替えた内容を保持するようにしておくとよいとのことです。
また、ダークモードはただ色調を反転させただけでは文字や画像のコントラストなどが優しくない・調和が取れていないことがあるので、どういった調整をするとよいかについてもふれています。
単純に色を反転するだけではなく、コントラストや強調する色味なども意識したスタイルシートを用意したいよねという話。
You May Finally Use JSHint for Evil
JSHintのライセンス変更について。 以前は一部のファイルがJSON Licenseで提供されておりフリーのOSSとは言えない状況だったが、2.12.0で完全にMITライセンスに変更された。 ライセンス変更が完了するまでの話を4つのエッセイで説明している。 該当ファイルのコントリビューター全員に許諾を取ろうとしたがどうしても連絡がつかない人が居たので、 その人達が当てたパッチを完全に書き換えることで対応したらしい（読み違えてたら申し訳ない）。 読み応えのある記事で、面白かったです。よくやりきったな〜と思いました。
ライセンスを気にするユーザーが離れていく
根性と意地でライセンス変更を成し遂げた
ライセンスを変更する方法
案①全てを書き換えてしまうｗ
案②コントリビューター全員に承諾を取る→どうしても連絡とれない人も…
最終的に、同意が取れなかった人のパッチを書き換えた
React v17.0 Release Candidate: No New Features
React v17 のリリース。 新しい機能は無いが、Concurrent Mode に向けてバージョンアップしておきたい。 v17 からアプリ内の React のバージョンを段階的にアップグレードできるようになったので、 Concurrent Mode が入るであろう v18 の前には対応しておいて、バージョンアップに選択肢を持たせることができる。
イベント周りや useEffect の cleanup で破壊的変更は入っているので、余裕をもって v17 にあげるのがいいと思う。
v18に新機能が多い予定、今までReactは一気にバージョンアップだったので
新機能はないけど、イベント周りの構造が変わった
ドキュメントに対してイベントが発生して戻っていく挙動、レンダーした対象のコンポーネントのイベントが登録される
イベント周りに要注意
Reactはブラウザとは違う独自のイベントオブジェクトを作ってる
Grids Part 1: To grid or not to grid
Gridを使うかTableを使うかという話 雑にまとめると、扱うデータがセル単位でインタラクティブな場合はGrid、全データで1つの意味になるような静的データを扱う場合はTableが良いという話だった。
定番のスクリーンリーダーから見たアクセシビリティの話やコンテキストによってこうあるべきみたいな話があって実用的に感じたので共有しました。
CookieのHttpOnly属性でどこまで安全になるのか - YouTube
徳丸先生のWebセキュリティに関する動画です。
JSからCookieにアクセスできなくする HttpOnly 属性ですが、XSS に対してはどれくらい有効なのかという解説です。
XSS で fetch や XMLHttpRequest が実行された場合、そのリクエストには Cookie が付与される
秘密情報を HTML 内に埋め込んでいる場合は、XSS で innerHTML を取得することで読み取れる
といった例を紹介し、XSS の緩和策ではあるものの完全な防御ではないことが示されていました
What's New In DevTools (Chrome 86)
Chrome 86のDevTools情報。結構盛りだくさんだった。
メディアプレーヤーの情報を確認できる「Media」パネルの追加。 エミュレート系の機能がいくつか入ってる。(Idle/screen lock, prefers-reduced-data, missing local fonts)
Elementパネルから、特定のDOMノードのスクリーンショットが簡単にできるようになった。 アクセシビリティ系は、カラーピッカーでコンストラストに問題のある色はサジェストしてくれる。準拠レベルAAおよびAAAの色の提案が表示され、クリックすると適用される。 あと、ApplicationパネルのService Workers ペインに 他のオリジンの情報も表示されてたけど、それが無くなったの嬉しい。
Enabling Custom Control UI
その他のメモはこちらにあるそうです