JSer.info #529 - JavaScript performance beyond bundle size | Read the Tea Leavesという記事では、JavaScriptのパフォーマンス測定について書かれています。
最近では、Bundle SizeについてはBundlePhobiaやWebpack Bundle Analyzerなど分かりやすく測定するツールがありますが、それ以外のJavaScriptのパフォーマンスのメトリクスについて書かれています。
ランタイムのCPUコスト、電力消費量、メモリ使用量、ディスクの使用量などのBundle Size以外のメトリクスをどのように見るのかについてまとめられています。
CORS 完全手冊というCORSについての連載記事では、
CORSの概念、対応方法、よくある間違い、CORB/CORP/COEP/COOPなど最近のオリジン関連のルール、セキュリティ的な問題について書かれています。
- CORS 完全手冊(一):為什麼會發生 CORS 錯誤?
- クロスオリジンリクエストとは何か? CORSエラーはなぜおきるのかについて
- CORS 完全手冊(二):如何解決 CORS 問題?
- CORS対応の仕方(expressを例にしている)
- CORS 完全手冊(三):CORS 詳解
- CORSの仕組み、それぞれのヘッダの意味をシナリオと合わせて解説している
- CORS 完全手冊(四):一起看規範
- CORSの仕様をFetch Standardと共に解説。
Vary
ヘッダでのキャッシュの注意点についても書かれている
- CORSの仕様をFetch Standardと共に解説。
- CORS 完全手冊(五):跨來源的安全性問題
res.headers['Access-Control-Allow-Origin'] = req.headers['Origin']
のようにOriginをオウム返しするよくある設定ミス(脆弱性)について- CORB/CORP/COEP/COOPとSite Isolationについて
- CORS 完全手冊(六):總結、後記與遺珠
- CORSのエラーのパターン分類、Origin Policy、CORSの細かな話など
CORSについて必要な知識がほとんど書かれているため、おすすめです。
アーティクル
Introducing Env: a better way to read environment variables in JavaScript - Human Who Codes
humanwhocodes.com/blog/2021/02/introducing-env-javascript-environment-variables/
環境変数のよくある問題を回避するライブラリについて
CSS-in-JS support in DevTools | Web | Google Developers
developers.google.com/web/updates/2021/02/css-in-js
Chrome 85 DevToolsのCSS-in-JSの対応について。
今まではCSSOM APIで追加されたルールのスタイルは編集できなかったが、編集できるようになったという話
JavaScript performance beyond bundle size | Read the Tea Leaves
nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/
JavaScriptのBundle sizeとランタイムのCPUコスト、メモリ使用量、電力使用量の調べ方について。
Bundle SizeについてはBundlePhobiaやWeb Vitalsなどで分かるようになってきているが、パフォーマンスはもっと多面的なものであるため、他のメトリクスをどのように見るかについて
How Web Content Can Affect Power Usage | WebKit
webkit.org/blog/8970/how-web-content-can-affect-power-usage/
CPU、GPU、ネットワークなどが電力消費に与える影響について。
バックグラウンド時にCPU消費をなくす方法、Web InspectorのEnergy Impactの表示について
Why JavaScript Developers Should Prefer Axios Over Fetch | by Sabesan Sathananthan | Feb, 2021 | Better Programming
betterprogramming.pub/why-javascript-developers-should-prefer-axios-over-fetch-294b28a96e2c
Fetch APIとaxiosの比較。
レスポンスデータの自動変換、エラー処理、ダウンロードのprogress処理、アップロードのprogress処理、HTTPのインターセプト、タイムアウト、並列リクエストについて比較している
Use CSS Variables instead of React Context | Epic React by Kent C. Dodds
CSS-in-JSを使ったThemeコンポーネントのようなテーマの切り替えをCSS Custom Propertiesで実装してみる話。
実装の違い、レンダリングフローの違いについて
React Context を export するのはアンチパターンではないかと考える | stin's blog
blog.stin.ink/articles/do-not-export-react-context
React Contextをモジュールからexportするのではなく、Custom Hookとしてexportするという話。
CORS 完全手冊(一):為什麼會發生 CORS 錯誤? - Huli
blog.huli.tw/2021/02/19/cors-guide-1/
CORSの概念、対応方法、よくある間違い、CORB/CORP/COEP/COOPなどオリジン関連のルール、セキュリティ的な問題についての連載記事。
クロスオリジンリクエストはなぜブロックされるのか、CORSの仕様解説、CORSのキャッシュ、CORSの設定ミスなどについて
What's New In DevTools (Chrome 90) | Web | Google Developers
developers.google.com/web/updates/2021/02/devtools
Chrome 90のDev Toolsの変更点について。
CSS flexboxのデバッグツールの追加、Core Web Vitalsのオーバーレイ表示、
Issues tabの改善、CSS color-gamutのエミュレート機能の追加。
Dev Toolsを開いた状態でのデバッグのパフォーマンス改善、fn.displayName
のサポートを非推奨化など
スライド、動画関係
GoudekettingRM/link-overview-jsworld-2021
github.com/GoudekettingRM/link-overview-jsworld-2021
JS World 2021のスライドや動画のまとめ
ソフトウェア、ツール、ライブラリ関係
jcubic/tagger: Zero Dependency, Vanilla JavaScript Tag Editor
依存のないタグ入力UIライブラリ
wynntee/joss: JOSS can serialize almost every JavaScript data type and data structure, so data can be seamlessly exchanged between browsers and servers (Deno or Node.js).
JOSSというJavaScriptオブジェクトのシリアライズ、デシアライズの仕様とそのリファレンス実装ライブラリ。
BigInt、循環参照、疎な配列、-0
などJSONにはない部分もサポートしている。
ブラウザ、Node、Denoで動作する
andrewcourtice/harlem: Simple, unopinionated, lightweight and extensible state management for Vue 3
github.com/andrewcourtice/harlem
Vue 3向けのステート管理ライブラリ。
pluginでVue DevToolsへの対応や、SSR、Storage保存、トランザクション対応などができる。
書籍関係
React テスト応用、テストに悩む人へ
zenn.dev/tkdn/books/react-testing-patterns
ReactコンポーネントとHooksのテストについての書籍。