火曜日のおフロ #184 今週のフロントエンドおフロタイム！Chrome 150の新CSS機能から熱いダークモードトグル論争、 ...

Chrome 150のCSS新機能！ダークモードトグル論争とJPEG XL正式採用の衝撃 #184

2026年8月29日配信 Podcast「火曜日のおフロ」第183回 今週の主なトピック： AI / LLM ・Claude Code セルフホスト環境 ...

Claude CodeがEC2で動く時代へ！Gemini 3.7 Flash登場とState of CSS 2026の最新動向 #183

Chapters 00:00 オープニング 04:01 リアルタイム音声モデル「GPT-Live」 09:24 Kimi K3のFrontend Arena首位獲得 29:36 Linux ...

Kimi K3がFrontend Arena首位に！GPT-Live登場やAI開発時代の設計論など最新テックニュース #182

Chapters 00:00 オープニング 00:32 Chrome 150安定版とChrome Core MCP 05:00 Claude Fable 5 & Sonnet 5の性能と価格・枠 ...

Kimi K3がFrontend Arena首位に！GPT-Live登場やAI開発時代の設計論など最新テックニュース #181

Chapters 00:00 オープニング 02:20 新たなInfernoフレームワークの実験 09:47 Googleの社内コードレビュー規範 10:28 Web ...

Claude Sonnet 5登場！Grok音声統合やGoogleのコードレビュー規範、テーブル状態議論など最新テックニュース #180

Chapters 00:00 オープニング 01:15 本編スタート・近況報告 03:52 Claude Fable 5 と AI 規制の行方 05:40 GLM-5.2 の衝撃と ...

Gemma 4やClaude Fable 5、GLM-5.2登場！Locally AI、ゼロから作るDeep Learning ❻ LLM編など最新テックニュース #179

Chapters 00:00 オープニング 03:22 本編スタート・近況報告 04:10 Google I/O とアンチグラビティ CLI 17:16 Qwen3.7-Max：35 ...

Qwen3.7-Max登場！Cursor Composer 2.5とAntigravity 2.0が切り拓く自律エージェント時代 #178

Chapters 00:00 オープニング 05:58 本編スタート・近況報告 19:00 LLMが日本文化に執着する理由 33:55 Codex アンバサダーと ...

GPT-5.5がついに一般公開！Grok Build CLIの衝撃とフロントエンドの未来 #177

Chapters 00:00:00 オープニング 00:01:06 第176回：最新AI・開発トレンド解説 00:04:48 開発者の知見と高額ツールを代替 ...

S3のファイルシステム化！OpenAI CodexのGUI操作とClaude Codeのトークン節約術 #176

Chapters 00:00 オープニング 02:18 挨拶・導入 05:02 ハーネスエンジニアリングと技術選定 06:03 FSD (Feature-Sliced Design) ...

S3バケットをFS化！Claude Codeへの移行と「AI疲れ」への処方箋 #175

Chapters 00:00 オープニング 02:10 雑談：サンダーをスーパーボールで捕まえる話 04:44 AI/LLM：Claude の Cache Token バグ ...

GPT-5.4 &amp; Claudeの進化が止まらない！React/CSSの最新動向からセキュリティ・OSINTまで徹底解説 #174

Chapters 00:00 オープニング 03:22 Chromeの2週リリースとNode.js年次リリース 12:21 CSSセンタリングの新しい書き方 46:37 ...

Chrome 146とVite 8の衝撃！Claude 4.6の1MコンテキストとNode.js年次リリースで変わる開発現場 #173

Chapters 00:00 オープニング 08:58 Claude CodeでAndroidアプリをリファクタする 15:00 UIイベントのシミュレーションとSDK ...

GPT-5.4の衝撃！Codex 5.3 vs Opus 4.6の覇権争いとGitHub Copilot SDKで変わる開発現場 #172

Chapters 00:00 オープニング 02:23 Chrome 146 WebMCP Early Preview 07:26 Google Chrome Ecosystem 08:04 Claude Code ...

Chrome 146のWebMCPとClaude Code Agent Teamsの衝撃！AIエージェントの マルチオーケストレーション #170

Chapters 00:00 オープニング 10:53 Antigravity vs OpenClaw と Google の制裁 25:41 SWE-bench Pro と Agentic Coding の進化 ...

Antigravity vs OpenClawとSWE-benchが照らすAI開発 #171

00:00 オープニング 02:10 Gemini 3 Flash Agentic Vision & Clawdbot (OpenClaw) 39:26 Moltbook：AIエージェント専用SNS ...

Gemini 3 FlashのAgentic VisionとMoltbookが拓くAIエージェントの新時代 #169

00:00 オープニング 01:49 Agentic Commerce: AIエージェントが買い物をする時代の到来 07:47 ChatGPTに広告が表示される？

PDFでLinuxが動く！？RISC-Vエミュレータの衝撃とAgentic Commerceの未来 #168

Chapters 00:00 オープニング 06:02 AI/LLM：AIが勝手に支払いする未来？ (Google AP2/x402) 11:42 セキュリティ：クレジット ...

AIが勝手に支払いする未来？Google AP2/x402とVibe Codingの衝撃 #167

Chapters 00:00 オープニング 08:38 フロントエンド：Background Fetch API (Jxck.io ブログより) 16:25 ツール：Claude Code の ...

Claude Codeの衝撃とSAM 3による概念セグメンテーションの未来 #166

Chapters 00:00 オープニング 03:26 雑談：近況と配信の挨拶 16:40 ツール：Google UI AI Stitch / Nano Banana Pro でのデザイン ...

AnthropicのBun買収とAmazon Bedrock Novaの衝撃！Agentic AIの未来 #165

2025年のフルスタックエンジニア | #tue_ofuro (#Twitch)

火曜日のおフロ 第164回。今週もフロントエンドやAI、最新テックニュースについてエンジニア3人で語ります。 今回の ...

Figma MCPとClaude Codeによるデザイン実装の自動化とOpus 4.5の衝撃 #164

火曜日のおフロ 第163回。今週もフロントエンドやAI、最新テックニュースについてエンジニア3人で語ります。 今回の ...

Node.js 25.2.0のType Stripping安定版とAnthropic MCPコード実行の進化 #163

火曜日のおフロ 第162回。今週もフロントエンドやAI、最新テックニュースについてエンジニア3人で語ります。 チャプター ...

ChatGPT Atlasの衝撃とReact Compiler v1.0リリース！デザイントークンの標準化まで #162

Chapters 00:00 オープニング 00:20 開発：スマホゲー「暇つぶしクエスト」のWeb移植と基本システム 38:00 開発：レアドロップ ...

ふろんとえんどな話 #160

Chapters 00:00 オープニング 00:38 雑談：今回はゲームを作る回、アイディア会議開始 01:42 開発：「にゃんこタワー」 ...

ゲーム開発のアイデア会議！エンジニアが本気で考えるゲーム制作の裏側 #159

Chapters 00:00 オープニング 02:37 開発：V8エンジン - JSON.stringify を2倍以上に高速化 19:00 開発：モバイル/デスクトップ ...

JSON.stringifyの高速化と阿部寛のホームページHTTPS化の衝撃 #158

Chapters 00:00 オープニング 02:01 開発：Tailwind CSS の Vanilla JS サポート (Tailwind Plus) 19:33 ツール：GitHub Copilot ...

Tailwind CSSのVanilla JSサポートとtext-autospaceの現在地 #157

Chapters 00:00 オープニング 01:38 開発：Android開発の現状と今回のアプリ制作の目標 38:00 開発：Android Jetpack Compose ...

Figma MCPによるUI実装の爆速化と日本語向けリセットCSS「kiso.css」 #156

火曜日のおフロ 第155回。今週もフロントエンドや最新テックニュースについてエンジニア3人で語ります。 今回のトピック： ...

Gemini Diffusionの登場とReact NativeのネイティブUIコンポーネント活用 #155

Chapters 00:00 オープニング 00:58 開発：ポッドキャスト視聴アプリ「Podcast Reader」の構想とReact Native / Jetpack ...

Microsoft NLWebの正体とTypeScript 7向け爆速コンパイラ tsgo #154

Chapters 00:00 オープニング 20:19 開発：Chrome 136 仕様変更と CSS dynamic-range-limit 23:54 デザイン：iPhone CSS Hack ...

React Compiler RC到達とHDR表示を制御するCSSの新機能 #153

火曜日のおフロ 第152回。今週もフロントエンドやAI、最新テックニュースについてエンジニア3人で語ります。 今回の ...

Google I/O 2025プレビューとアクセシブルなカードUIの作り方 #152

火曜日のおフロ 第151回。今週もフロントエンドやAI、最新テックニュースについてエンジニア3人で語ります。 今回の ...

LLMS.txtによるAI最適化とIT大手の大量解雇から考えるキャリア #151

この動画では、最新のAI技術とツールを使って、開発効率を大幅に向上させる方法について解説します！

パスワードレス認証とAI活用による開発者ライフサイクルの未来

この動画では、最新のウェブ開発に関する注目の技術とツールを取り上げて解説します！iOSのPWA対応時に気をつけるべき ...

PWA対応の落とし穴・HyperFormulaでスプレッドシート強化・React ViewTransitionと最新技術解説！

最新Web技術まとめ！React ViewTransition・CSSの新機能・Interop 2024の成功を解説！** 今回は、 **date-fns/tz** を使った ...

React ViewTransition・CSS text-box-trim・Interop 2024成功！最新Web技術まとめ

Flutterの最新ロードマップ・XState Store・n8nを徹底解説！** 今回の動画では、 **Flutterの最新ロードマップ** をチェックし ...

Flutter最新ロードマップ・XState Store・n8nとは？注目の技術を徹底解説！

最新Web技術まとめ！React 19・CSS新ロゴ・Tailwind 4の注目ポイント！ 今回の動画では、 React v19の最新情報 や React ...

React 19・CSS新ロゴ・Tailwind 4の注目ポイント！最新Web技術まとめ

最新技術まとめ！JSConf JP 2024・HTMLのアクセシビリティ・Tailwind v4・Node.jsの新機能！ 今回の動画では、 JSConf JP ...

JSConf JP 2024 最新資料公開！State of HTML・Tailwind v4・Node.jsの新機能を総まとめ！

皆さん、こんにちは！今日は色んな技術の話題を一挙にご紹介する動画です。 最初に、ウェブサイトがなぜそんなに速いのかを ...

JavaScriptの未来を変える！並行モデルとイベントループの極意を初心者向けに徹底解説します！ ふろんとえんどな話 #142

さて皆さん！今日はかなりエキサイティングなCSSの話題が目白押しです！CSSフリークス必見の内容ですよ！   まず最初にご ...

「驚くべきCSSテクニック2024: 最新のプロパティとトリックを解説！」 ふろんとえんどな話 #141

こんにちは、皆さん！今日の動画では、最近の注目トピックと非常に役立つテクニックをカバーしていきますよ！まずは、CSSの ...

「CSSテクニック：autoへのスムーズなheight変化！重要ポイントを解説」ふろんとえんどな話 #140

集中力を高めるSafariのヒント！**   - Appleサポートのガイドで、Macを使いこなしブラウジングでの気をそらすものを非表示に ...

「Safari 18.0の新機能でウェブブラウジングを快適に！重要アップデートまとめ」 ふろんとえんどな話 #139

こんにちは、テクノロジー愛好家の皆さん！この動画では、最新のWeb技術とフレームワークについて学びましょう。

React 初心者必見！初回マウントの仕組みを徹底解説 - ここから始めるReactの世界 ふろんとえんどな話 #138

デザインとモーションで魅せる！フロントエンドの最新テクニック この動画では、フロントエンドデザインの世界で使用される ...

「初心者必見！CSSレスポンシブデザインのコツ＆テクニック徹底解説」 ふろんとえんどな話 #137

こんにちは！今回はテック業界のホットな話題を集めた解説動画をお届けします。業界で存在感を放つトピックスが満載です ...

「外資IT企業のソフトウェアエンジニアに！成功するための戦略と最新技術トレンド解説」 ふろんとえんどな話 #136

こんにちは、みんな！今日はエキサイティングな技術記事をいくつかカバーしていきますよ！技術者、開発者、それからただの ...

ReactとVue.jsでPDFを簡単表示！PDF.jsを使った実践ガイド【初心者必見】 ふろんとえんどな話 #135

こんにちは、みなさん！今回はウェブデザインやコーディングに関する役立つ情報をお届けします。この記事を参考にして、最新 ...

Flexboxで動的高さのスクロールコンテナを作成する方法 | 初心者でも簡単に実現する方法を徹底解説！ | ふろんとえんどな話 #134

<a
					href="https://github.com/TaxyAI/browser-extension">GitHub - TaxyAI/browser-extension: Automate your
					browser with GPT-4</a>
			<a
					href="https://note.com/dory111111/n/nf3c707c0bb5b">LLMが変える、ユーザインターフェースの未来｜Dory</a>
			<a
					href="https://qiita.com/apollo_program/items/4ec91ebbf1dd91fb4bf9">JSやPythonのジェネレータを使うとアニメーションや通信の状態遷移を簡易に記述できる
					#Python - Qiita</a>
			<a
					href="https://ics.media/entry/7258/">CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう - ICS MEDIA</a>

GitHub - TaxyAI/browser-extension: Automate your
					browser with GPT-4
LLMが変える、ユーザインターフェースの未来｜Dory
JSやPythonのジェネレータを使うとアニメーションや通信の状態遷移を簡易に記述できる
					#Python - Qiita
CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう - ICS MEDIA

TaxyAI, ChatGPT, NUI, コルーチン, Generator, mix-blend-mode

<a href="https://webkit.org/blog/14787/webkit-features-in-safari-17-2/">WebKit Features in Safari 17.2 | WebKit</a>
 <a href="https://github.com/promptfoo/promptfoo">GitHub - promptfoo/promptfoo: Test your prompts, models, RAGs. Evaluate and compare LLM outputs, catch regressions, and improve prompt quality.</a>
 <div class="indented">
 <a href="https://www.youtube.com/watch?v=UIZAiXYceBI">ハンズオン Gemini: マルチモーダル AI とやりとりする - YouTube</a>
 </div>
 
 <a href="https://developer.chrome.com/blog/css-wrapped-2023?hl=ja">CSS ラップ: 2023 年 | Blog | Chrome for Developers</a>
 <div class="indented">
 <a href="https://developer.chrome.com/docs/css-ui/css-text-wrap-balance?hl=en">CSS text-wrap: balance | CSS and UI | Chrome for Developers</a>
 <a href="https://developer.chrome.com/blog/css-text-wrap-pretty?hl=en">CSS text-wrap: pretty | Blog | Chrome for Developers</a>
 </div>
 
 <a href="https://developer.chrome.com/blog/new-in-devtools-120?hl=ja">DevTools の新機能（Chrome 120） | Blog | Chrome for Developers</a>
 <a href="https://tailwindcss.com/blog/tailwindcss-v3-4">Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS</a>
 <a href="https://blog.jxck.io/entries/2023-08-19/cookie2.html">Cookie2 とは何か | blog.jxck.io</a>
 <a href="https://blog.jxck.io/entries/2023-11-05/reload-and-cache.html">ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io</a>
 <a href="https://blog.jxck.io/entries/2023-07-29/compression-dictionary-transport.html">Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化 | blog.jxck.io</a>

WebKit Features in Safari 17.2 | WebKit
GitHub - promptfoo/promptfoo: Test your prompts, models, RAGs. Evaluate and compare LLM outputs, catch regressions, and improve prompt quality.
            
ハンズオン Gemini: マルチモーダル AI とやりとりする - YouTube
CSS ラップ: 2023 年  |  Blog  |  Chrome for Developers
            
CSS text-wrap: balance | CSS and UI | Chrome for Developers
CSS text-wrap: pretty | Blog | Chrome for Developers
DevTools の新機能（Chrome 120）  |  Blog  |  Chrome for Developers
Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS
Cookie2 とは何か | blog.jxck.io
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化 | blog.jxck.io

Safari 17.2, CSS 2023, Tailwind v3.4

<a href="https://zenn.dev/knaka0209/books/96eca53ecdb2cd/viewer/6f1d47">SQLite3 WASM JS、試すメモ｜SQLite3 WASM(WebAssembly) 初級編、CMS作成など</a>
<a href="https://github.com/igtm/mdclient">GitHub - igtm/mdclient: Markdown Viewer Chrome Extension for Github</a>
<a href="https://type-scale.com/">Type Scale - A Visual Calculator</a>
<a href="https://tomquinonero.com/blog/font-size-ratio/">How To Finally Figuring-out the Font Size for Titles | Tom Quinonero</a>
<a href="https://standard.shiftbrain.com/blog/music-math-typography">音楽、数学、タイポグラフィ - シフトブレイン／スタンダードデザインユニット</a>
<a href="https://github.com/igtm/mdclient/blob/master/chrome-extension-public/pages/js/index.js#L452-L462">auto-resize のJS実装</a>
<a href="https://github.com/igtm/mdclient/blob/master/chrome-extension-public/pages/style/index.css#L145-L148">content: attr(data-value) " ";</a>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/attr">attr() - CSS: カスケーディングスタイルシート | MDN</a>
<a href="https://twitter.com/magi1125/status/1605571976663138304">https://twitter.com/magi1125/status/1605571976663138304</a>
<a href="https://twitter.com/r_nikaido/status/1604127506839138304">https://twitter.com/r_nikaido/status/1604127506839138304</a>
<a href="https://www.youtube.com/watch?app=desktop&amp;v=j2SA3XlHkSM">Browser hacking: Fixing a layout bug on HTML5Test.com - YouTube</a>
<a href="https://html5test.com/">HTML5test - How well does your browser support HTML5?</a>
<a href="https://blog.cloudflare.com/the-state-of-http-in-2022/">The state of HTTP in 2022</a>
<a href="https://kidachi.kazuhi.to/blog/archives/041817.html">2022年の超私的デジタルアクセシビリティ関連10大ニュース | 覚え書き | @kazuhito</a>
<a href="https://www.w3.org/WAI/standards-guidelines/act/implementations/">ACT Rules Implementation in Test Tools and Methodologies | | WAI | W3C</a>
<a href="https://webaim.org/projects/million/">WebAIM: The WebAIM Million - The 2022 report on the accessibility of the top 1,000,000 home pages</a>

SQLite3 WASM JS、試すメモ｜SQLite3 WASM(WebAssembly) 初級編、CMS作成など
GitHub - igtm/mdclient: Markdown Viewer Chrome Extension for Github
Type Scale - A Visual Calculator
How To Finally Figuring-out the Font Size for Titles | Tom Quinonero
音楽、数学、タイポグラフィ - シフトブレイン／スタンダードデザインユニット
auto-resize のJS実装
content: attr(data-value) " ";
attr() - CSS: カスケーディングスタイルシート | MDN
https://twitter.com/magi1125/status/1605571976663138304
https://twitter.com/r_nikaido/status/1604127506839138304
Browser hacking: Fixing a layout bug on HTML5Test.com - YouTube
HTML5test - How well does your browser support HTML5?
The state of HTTP in 2022
2022年の超私的デジタルアクセシビリティ関連10大ニュース | 覚え書き | @kazuhito
ACT Rules Implementation in Test Tools and Methodologies | | WAI | W3C
WebAIM: The WebAIM Million - The 2022 report on the accessibility of the top 1,000,000 home pages

WASM, Type Scaling, attr(), ACT Rules, WebAIM

<a href="https://www.itmedia.co.jp/news/articles/2212/06/news144.html">デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開　非技術者向け、専門用語は少なめに - ITmedia NEWS</a>
<a href="https://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdf">JIS X 8341-3:2016 達成基準 早見表（レベルA &amp; AA）</a>
<a href="https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html">総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0</a>
<a href="https://a11yc.com/city-komaru/">駒瑠市〜アクセシビリティ上の問題の体験サイト〜</a>
<a href="https://www.google.com/intl/ja/chrome/demos/speech.html">Chrome Browser</a>
<a href="https://developer.mozilla.org/ja/docs/Glossary/Void_element">Void element （空要素） - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN</a>
<a href="https://twitter.com/cloud10designs/status/1602242202448826369">ゆうてん🖖さんはTwitterを使っています: 「タイポグラフィつよつよの方で英語で説明できる方、ヘルプ！！」 / Twitter</a>
<figure><img src="https://uxmovement.com/wp-content/uploads/2019/10/cca-bluebuttons.png" width="480" height="270"></figure>
<figure>The Myths of Color Contrast Accessibility</figure>
<figure>There's a growing demand for designers to make their interfaces accessible to all users. It's important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design, without understanding in which situations a color contrast standard applies.</figure>
<figure><img src="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" width="192" height="192">https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/</figure>
<figure><img src="https://shanabrian.com/common/img/og_logo.png" width="200" height="200"></figure>
<figure>CSS3による文字に影（ドロップシャドウ）を付ける | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website</figure>
<figure>文字に影を付ける場合は text-shadowプロパティを使用します。 ぼかし、色は省略でき、色を省略した場合は文字色と同色が反映されます。 box-shadowと違い、広がり距離とinsetがないことにご注意ください。 text-shadow:水平方向の位置 垂直方向の位置; またはtext-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ; またはtext-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ 色; ※ サンプルでは分かりやすくするため、フォントサイズを大きくしています。 ※ サンプルにはありませんが、水平方向の位置と垂直方向の位置を0にすることで、光彩（グロー）効果の表現が可能です。 sample 1 sample 2 sample 3 sample 4 カンマで区切ることにより、1つの文字に対して複数の影を付けることが可能です。 複数指定やその他プロパティを使用することで、様々な影の表現が可能です。</figure>
<figure><img src="https://shanabrian.com/favicon.ico" width="64" height="64">https://shanabrian.com/web/css3/text-shadow.php</figure>

デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開　非技術者向け、専門用語は少なめに - ITmedia NEWS
JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）
総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
Chrome Browser
Void element （空要素） - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
ゆうてん🖖さんはTwitterを使っています: 「タイポグラフィつよつよの方で英語で説明できる方、ヘルプ！！」 / Twitter

The Myths of Color Contrast Accessibility
There's a growing demand for designers to make their interfaces accessible to all users. It's important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design, without understanding in which situations a color contrast standard applies.
https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/

CSS3による文字に影（ドロップシャドウ）を付ける | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
文字に影を付ける場合は text-shadowプロパティを使用します。 ぼかし、色は省略でき、色を省略した場合は文字色と同色が反映されます。 box-shadowと違い、広がり距離とinsetがないことにご注意ください。 text-shadow:水平方向の位置 垂直方向の位置; またはtext-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ; またはtext-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ 色; ※ サンプルでは分かりやすくするため、フォントサイズを大きくしています。 ※ サンプルにはありませんが、水平方向の位置と垂直方向の位置を0にすることで、光彩（グロー）効果の表現が可能です。 sample 1 sample 2 sample 3 sample 4 カンマで区切ることにより、1つの文字に対して複数の影を付けることが可能です。 複数指定やその他プロパティを使用することで、様々な影の表現が可能です。
https://shanabrian.com/web/css3/text-shadow.php

デジタル庁Webアクセシビリティー, JISS X 8341-3:2016, miChecker, Void element

<a
					href="https://okuranagaimo.blogspot.com/2022/11/blog-post_26.html">ブログ: 日本のウェブデザインの特異な事例</a>
			<a
					href="https://developer.chrome.com/blog/new-in-chrome-108/">New in Chrome 108 - Chrome
					Developers</a>
			<a
					href="https://developer.chrome.com/blog/viewport-resize-behavior/">Prepare for viewport resize
					behavior changes coming to Chrome on Android - Chrome Developers</a>
			<a
					href="https://web-camp.io/magazine/archives/91511">【CSS】要素の高さを100vhとしたときの問題点とは？3つの解決方法について解説 -
					WEBCAMP MEDIA</a>
			<a
					href="https://developer.chrome.com/blog/new-in-devtools-108/">What&#x27;s New In DevTools (Chrome
					108) - Chrome Developers</a>
			<a
					href="https://developers.cyberagent.co.jp/blog/archives/38640/">#ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 |
					CyberAgent Developers Blog</a>
			<a
					href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility">oklch()
					- CSS: Cascading Style Sheets | MDN</a>
			<a
					href="https://github.com/evilmartians/oklch-picker">GitHub - evilmartians/oklch-picker: Color Picker
					for LCH</a>
			<a
					href="https://www.figma.com/community/plugin/969496279507778512/LCH">LCH – Figma</a>
			<a
					href="https://security.googleblog.com/2022/12/memory-safe-languages-in-android-13.html?m=1">Google
					Online Security Blog: Memory Safe Languages in Android 13</a>
			<a href="https://adventar.org/">Adventar</a>
			<a
					href="https://blog.hatenablog.com/entry/2022/12/05/123000">今週のはてなブログランキング〔2022年12月第1週〕 -
					週刊はてなブログ</a>
			<a href="https://adventar.org/calendars/7377">アクセシビリティ
					Advent Calendar 2022 - Adventar</a>
			<a
					href="https://qiita.com/advent-calendar/2022/ziglang">Zigのカレンダー | Advent Calendar 2022 - Qiita</a>
			
			<a
					href="https://note.com/emiemihuimei/n/nf99a59b29029">デザイナーが難解なガイドライン（WCAG）を乗り越える方法（提案）｜emim｜note</a>
			
			<a
					href="https://tech.mobilefactory.jp/entry/2022/12/01/000000">TS 4.9 satisfies operator を使って React
					Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog</a>
			<a
					href="https://creators.bengo4.com/entry/2022/11/21/083000">UIデザインにおけるステートマシン - 弁護士ドットコム株式会社
					Creators’ blog</a>

ブログ: 日本のウェブデザインの特異な事例
New in Chrome 108 - Chrome
					Developers
Prepare for viewport resize
					behavior changes coming to Chrome on Android - Chrome Developers
【CSS】要素の高さを100vhとしたときの問題点とは？3つの解決方法について解説 -
					WEBCAMP MEDIA
What's New In DevTools (Chrome
					108) - Chrome Developers
#ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 |
					CyberAgent Developers Blog
oklch()
					- CSS: Cascading Style Sheets | MDN
GitHub - evilmartians/oklch-picker: Color Picker
					for LCH
LCH – Figma
Google
					Online Security Blog: Memory Safe Languages in Android 13
Adventar
今週のはてなブログランキング〔2022年12月第1週〕 -
					週刊はてなブログ
アクセシビリティ
					Advent Calendar 2022 - Adventar
Zigのカレンダー | Advent Calendar 2022 - Qiita
			
デザイナーが難解なガイドライン（WCAG）を乗り越える方法（提案）｜emim｜note
			
TS 4.9 satisfies operator を使って React
					Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog
UIデザインにおけるステートマシン - 弁護士ドットコム株式会社
					Creators’ blog

Chrome 108(svh/lvh/dvh), lch/oklch WCAG 2.1, axe-core, XState

<a
					href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/">Announcing TypeScript
					4.9 - TypeScript</a>
			<a
					href="https://github.com/microsoft/TypeScript/issues/47920">&quot;satisfies&quot; operator to ensure
					an expression matches some type (feedback reset) · Issue #47920 · microsoft/TypeScript · GitHub</a>
			
			<pre id="8fc6691f-c5e9-4434-baa4-feb776255825" class="code"><code>type Colors = &quot;red&quot; | &quot;green&quot; | &quot;blue&quot;;
type RGB = [red: number, green: number, blue: number];

type Palette = Record&lt;Colors, unknown&gt; &amp; {
 red: RGB;
 green: string;
 blue: RGB;
};

const palette: Palette = {
 red: [255, 0, 0],
 green: &quot;#0f0&quot;,
 blue: [0, 0, 255],
};</code></pre>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol
					(シンボル) - JavaScript | MDN</a>
			<a
					href="https://github.com/microsoft/TypeScript/issues/51362">TypeScript 5.0 Iteration Plan · Issue
					#51362 · microsoft/TypeScript · GitHub</a>
			<a
					href="https://zenn.dev/sumiren/articles/f39a151e7320d5">Next.js 13のServer Componentsは書き方が便利になるだけ</a>
			
			<a
					href="https://survey.devographics.com/survey/state-of-js/2022">State of JavaScript 2022</a>
			<a
					href="https://www.itmedia.co.jp/news/articles/2211/21/news040.html">MacBook
					Proの“ノッチ”でマウス操作が遅くなる問題を改善、その方法は？　明治大が実証：Innovative Tech - ITmedia NEWS</a>
			<a
					href="https://coliss.com/articles/book-review/isbn-9784802512374.html">ついに初の解説書！
					フォント制作の王道ソフト「Glyphs（グリフス）」執筆陣も非常に豪華で、フォントの作り方がよく分かります -Glyphsではじめるフォント制作 | コリス</a>
			<a href="https://togetter.com/li/1977218">Twitter
					を作るのはなぜ難しいのか - Togetter</a>
			<a
					href="https://blog.twitter.com/engineering/en_us/a/2014/manhattan-our-real-time-multi-tenant-distributed-database-for-twitter-scale">Manhattan,
					our real-time, multi-tenant distributed database for Twitter scale</a>
			<a
					href="https://techgenix.com/elasticsearch-alternatives/">Elasticsearch alternatives: 8 to consider
					after the license change</a>
			<a href="https://github.com/pola-rs/polars">GitHub -
					pola-rs/polars: Fast multi-threaded, hybrid-streaming DataFrame library in Rust | Python |
					Node.js</a>
			<a
					href="https://tech.legalforce.co.jp/entry/2022/02/24/140316">高速な文字列探索：Daachorseの技術解説 - LegalForce
					Engineering Blog</a>

Announcing TypeScript
					4.9 - TypeScript
"satisfies" operator to ensure
					an expression matches some type (feedback reset) · Issue #47920 · microsoft/TypeScript · GitHub
			
type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Colors, unknown> & {
 red: RGB;
 green: string;
 blue: RGB;
};

const palette: Palette = {
 red: [255, 0, 0],
 green: "#0f0",
 blue: [0, 0, 255],
};
Symbol
					(シンボル) - JavaScript | MDN
TypeScript 5.0 Iteration Plan · Issue
					#51362 · microsoft/TypeScript · GitHub
Next.js 13のServer Componentsは書き方が便利になるだけ
			
State of JavaScript 2022
MacBook
					Proの“ノッチ”でマウス操作が遅くなる問題を改善、その方法は？　明治大が実証：Innovative Tech - ITmedia NEWS
ついに初の解説書！
					フォント制作の王道ソフト「Glyphs（グリフス）」執筆陣も非常に豪華で、フォントの作り方がよく分かります -Glyphsではじめるフォント制作 | コリス
Twitter
					を作るのはなぜ難しいのか - Togetter
Manhattan,
					our real-time, multi-tenant distributed database for Twitter scale
Elasticsearch alternatives: 8 to consider
					after the license change
GitHub -
					pola-rs/polars: Fast multi-threaded, hybrid-streaming DataFrame library in Rust | Python |
					Node.js
高速な文字列探索：Daachorseの技術解説 - LegalForce
					Engineering Blog

Typescript4.9 (satisfies), Nextjs13, Twitter backend architecture

<a href="https://cohost.org/rc/welcome">cohost!</a>
			
			<a
					href="https://cohost.org/staff/post/168924-october-2022-financi">cohost! - &quot;October 2022
					Financial Update&quot;</a>
			<a href="https://www.minds.com/">Minds</a>
			<a href="https://tweetdeck.twitter.com/">TweetDeck</a>
			
			<a href="https://kizie.co/">Kizie - A better Twitter
					app for Web</a>
			<a href="https://social.vivaldi.net/explore">エクスプローラー
					- Vivaldi Social</a>
			<a href="https://nitter.net/">nitter</a>
			<a href="https://feedly.com/">Welcome to Feedly</a>
			
			<a
					href="https://www.inoreader.com/language/japanese">Inoreader - ニュースフィードを自由に操ろう</a>
			<a href="https://fi.google.com/about/?pli=1">Google Fi
					- A Simple, Wireless Phone Plan With Unlimited Data</a>
			<a
					href="https://alternativeto.net/software/mastodon/">Mastodon Alternatives: 25+ Social Networks and
					Microblogs | AlternativeTo</a>
			<a
					href="https://social.vivaldi.net/@Vivaldi/109359048926498316">Vivaldi: &quot;The reception to
					Vivaldi Socia…&quot; - Vivaldi Social</a>
			<a
					href="https://gigazine.net/news/20221116-meta-sapling/">Metaの大規模ソースコード管理システム「Sapling」がオープンソース化 -
					GIGAZINE</a>
			<a
					href="https://github.com/facebook/sapling">facebook/sapling: A Scalable, User-Friendly Source
					Control System.</a>
			<a
					href="https://ja.reactjs.org/docs/hooks-reference.html#usereducer">フック API リファレンス – React</a>
			<a
					href="https://zenn.dev/spacemarket/articles/9eb80496fa5fe6">【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適</a>
			
			<a
					href="https://zenn.dev/yuta28/articles/ssl-check-test">SSL脆弱性診断テストでA評価をとってみよう</a>
			<a
					href="https://ssl.sakura.ad.jp/column/ssl_tls/">SSLとTLSの違いとは | さくらのSSL</a>
			<a
					href="https://tex2e.github.io/rfc-translater/html/rfc8446.html">RFC 8446 - The Transport Layer
					Security (TLS) Protocol Version 1.3 日本語訳</a>
			<a
					href="https://ja.wikipedia.org/wiki/Transport_Layer_Security">Transport Layer Security -
					Wikipedia</a>
			<a
					href="https://www.ipa.go.jp/security/ciadr/vul/alert20221102.html">OpenSSL
					の脆弱性対策について(CVE-2022-3602、CVE-2022-3786)：IPA 独立行政法人 情報処理推進機構</a>
			<a
					href="https://codezine.jp/article/detail/16854">米国家安全保障局、CやC＋＋からメモリ安全なプログラミング言語への移行を推奨する文書を公開|CodeZine（コードジン）</a>
			
			<a
					href="https://doc.rust-lang.org/reference/inline-assembly.html">Inline assembly - The Rust
					Reference</a>
			<a
					href="https://scrapbox.io/nyaagoo/Structural_Subtyping_vs_Nominal_Subtyping_%E6%AF%94%E8%BC%83%E3%81%97%E3%81%A6%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B">Structural
					Subtyping

cohost!
			
cohost! - "October 2022
					Financial Update"
Minds
TweetDeck
			
Kizie - A better Twitter
					app for Web
エクスプローラー
					- Vivaldi Social
nitter
Welcome to Feedly
			
Inoreader - ニュースフィードを自由に操ろう
Google Fi
					- A Simple, Wireless Phone Plan With Unlimited Data
Mastodon Alternatives: 25+ Social Networks and
					Microblogs | AlternativeTo
Vivaldi: "The reception to
					Vivaldi Socia…" - Vivaldi Social
Metaの大規模ソースコード管理システム「Sapling」がオープンソース化 -
					GIGAZINE
facebook/sapling: A Scalable, User-Friendly Source
					Control System.
フック API リファレンス – React
【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適
			
SSL脆弱性診断テストでA評価をとってみよう
SSLとTLSの違いとは | さくらのSSL
RFC 8446 - The Transport Layer
					Security (TLS) Protocol Version 1.3 日本語訳
Transport Layer Security -
					Wikipedia
OpenSSL
					の脆弱性対策について(CVE-2022-3602、CVE-2022-3786)：IPA 独立行政法人 情報処理推進機構
米国家安全保障局、CやC＋＋からメモリ安全なプログラミング言語への移行を推奨する文書を公開|CodeZine（コードジン）
			
Inline assembly - The Rust
					Reference
Structural
					Subtyping

Twitter alternative, Sapling (Git alternative written in Rust), HSTS Preload, OpenSSL 3.x.x, Structural Subtyping

<a
					href="https://www.youtube.com/watch?app=desktop&amp;v=wquNdWx1dW4">Browser hacking: Let&#x27;s
					finally log into Discord! - YouTube</a>
			<a
					href="https://developer.chrome.com/blog/viewport-resize-behavior/">Prepare for viewport resize
					behavior changes coming to Chrome on Android - Chrome Developers</a>
			<a
					href="https://developer.chrome.com/blog/overflow-replaced-elements/">A change to overflow on
					replaced elements in CSS - Chrome Developers</a>
			<a
					href="https://developers-jp.googleblog.com/2022/11/chrome-108-beta.html">Google Developers Japan:
					Chrome 108 ベータ版 : CSS の新しいビューポートの単位、Federated Credential Management API、可変 COLRv1 フォントなど</a>
			<a
					href="https://groups.google.com/a/chromium.org/g/blink-dev/c/MuTeW_AFgxA/m/IlT4QVEfAgAJ">Intent to
					Ship: CSS Overflow for replaced elements</a>
			<a
					href="https://pepelsbey.dev/articles/svg-sprites/">SVG sprites: old-school, modern, unknown, and
					forgotten — Vadim Makeev</a>
			<a
					href="https://www.digital.go.jp/policies/servicedesign/designsystem/">デザインシステム｜デジタル庁</a>
			<a
					href="https://twitter.com/kamo_kamos/status/1590952806139457537?s=20&amp;t=uoh51Df7_HhTfJQX8WROUg">COCOA機能停止版アプリ
					/ Twitter</a>

Browser hacking: Let's
					finally log into Discord! - YouTube
Prepare for viewport resize
					behavior changes coming to Chrome on Android - Chrome Developers
A change to overflow on
					replaced elements in CSS - Chrome Developers
Google Developers Japan:
					Chrome 108 ベータ版 : CSS の新しいビューポートの単位、Federated Credential Management API、可変 COLRv1 フォントなど
Intent to
					Ship: CSS Overflow for replaced elements
SVG sprites: old-school, modern, unknown, and
					forgotten — Vadim Makeev
デザインシステム｜デジタル庁
COCOA機能停止版アプリ
					/ Twitter

Chrome 108, Viewport on Android, SVG sprite

<a
					href="https://news.mynavi.jp/techplus/article/zerojavascript-18/">ゼロからはじめるJavaScript(18)
					可読性と表現力の高いデータ形式「JSONC」を活用しよう | TECH+（テックプラス）</a>
			<a
					href="https://zenn.dev/mirko_san/articles/293f32950ba6c2">TOML っていいな</a>
			<a
					href="http://var.blog.jp/archives/80715049.html">やっぱり YAML は無いと思う</a>
			<a
					href="https://github.com/igtm/openapi-yup-generator">GitHub - igtm/openapi-yup-generator: CLI tool
					for generating yup definitions from openapi3.yaml</a>
			<a
					href="https://zenn.dev/igtm/articles/1c216e593524dc">OpenAPI 定義からyup定義を生成するRust製CLIを作ってみた</a>
			<a
					href="https://doc.rust-lang.org/book/ch17-02-trait-objects.html#defining-a-trait-for-common-behavior">Using
					Trait Objects That Allow for Values of Different Types - The Rust Programming Language</a>
			<a href="https://github.com/igtm/ri-calculator">GitHub
					- igtm/ri-calculator </a>
			<a href="https://github.com/fdehau/tui-rs">GitHub -
					fdehau/tui-rs: Build terminal user interfaces and dashboards using Rust</a>
			<a
					href="https://thinkit.co.jp/article/19772">Kubernetesを操作するターミナル用ツール、K9sとKDashを紹介 | Think
					IT（シンクイット）</a>
			<a href="https://github.com/Geal/nom">GitHub -
					Geal/nom: Rust parser combinator framework</a>
			<a
					href="https://docs.rs/tui/latest/tui/#get-started">tui - Rust</a>
			<a
					href="https://tomoyuki-nakabayashi.github.io/book/c-tips/index.html">組込みC開発者へのヒント - The Embedded
					Rust Book</a>
			<a
					href="https://doc.rust-jp.rs/book-ja/ch07-02-defining-modules-to-control-scope-and-privacy.html">モジュールを定義して、スコープとプライバシーを制御する
					- The Rust Programming Language 日本語版</a>
			<a
					href="https://doc.rust-lang.org/book/ch07-02-defining-modules-to-control-scope-and-privacy.html">Defining
					Modules to Control Scope and Privacy - The Rust Programming Language</a>
			<a
					href="https://github.com/rust-build/rust-build.action/issues/4">Add more support for targets · Issue
					#4 · rust-build/rust-build.action · GitHub</a>
			<a href="https://nextjs.org/blog/next-13">Blog -
					Next.js 13 | Next.js</a>
			<a
					href="https://vercel.com/blog/turbopack">Introducing Turbopack: Rust-based successor to Webpack –
					Vercel</a>
			<a href="https://github.com/vercel/turbo">GitHub -
					vercel/turbo: Incremental bundler and build system optimized for JavaScript and TypeScript, written
					in Rust – including Turborepo and Turbopack.</a>
			<a href="https://www.nushell.sh/ja/">Nushell</a>
			<a href="https://github.com/ogham/exa">GitHub -
					ogham/exa: A modern replacement for ‘ls’.</a>
			<a href="https://github.com/ogham/dog">GitHub -
					ogham/dog: A command-line DNS client.</a>
			<a href="https://github.com/sharkdp/bat">GitHub -
					s

ゼロからはじめるJavaScript(18)
					可読性と表現力の高いデータ形式「JSONC」を活用しよう | TECH+（テックプラス）
TOML っていいな
やっぱり YAML は無いと思う
GitHub - igtm/openapi-yup-generator: CLI tool
					for generating yup definitions from openapi3.yaml
OpenAPI 定義からyup定義を生成するRust製CLIを作ってみた
Using
					Trait Objects That Allow for Values of Different Types - The Rust Programming Language
GitHub
					- igtm/ri-calculator 
GitHub -
					fdehau/tui-rs: Build terminal user interfaces and dashboards using Rust
Kubernetesを操作するターミナル用ツール、K9sとKDashを紹介 | Think
					IT（シンクイット）
GitHub -
					Geal/nom: Rust parser combinator framework
tui - Rust
組込みC開発者へのヒント - The Embedded
					Rust Book
モジュールを定義して、スコープとプライバシーを制御する
					- The Rust Programming Language 日本語版
Defining
					Modules to Control Scope and Privacy - The Rust Programming Language
Add more support for targets · Issue
					#4 · rust-build/rust-build.action · GitHub
Blog -
					Next.js 13 | Next.js
Introducing Turbopack: Rust-based successor to Webpack –
					Vercel
GitHub -
					vercel/turbo: Incremental bundler and build system optimized for JavaScript and TypeScript, written
					in Rust – including Turborepo and Turbopack.
Nushell
GitHub -
					ogham/exa: A modern replacement for ‘ls’.
GitHub -
					ogham/dog: A command-line DNS client.
GitHub -
					s

RUST, JSONC, TOML, openapi-yup-generator, ri-calculator, TUI, Nextjs 13, Turbopack

<a
					href="https://blog.uhy.ooo/entry/2022-10-01/tailwind/">Tailwind考 - uhyo/blog</a>
			<a href="https://aiprogrammer.hashlab.jp/">AI
					Programmer</a>
			<a
					href="https://inside.dmm.com/entry/2022/10/06/dmm-design-system-typography">デザインシステムにおけるタイポグラフィーの試行錯誤
					- DMM inside</a>
			<a
					href="https://qiita.com/a_t/items/484f7ad52e8c9fd18903">ios13から日本語フォントのboldがより太くなるケース - Qiita</a>
			
			<a
					href="https://twitter.com/terkel/status/1176739809433247744">Takeru Suzuki (@terkel) | Twitter</a>
			
			<a
					href="https://ics.media/entry/200317/">2022年に最適なfont-familyの書き方 - ICS MEDIA</a>
			<a
					href="https://qiita.com/usagimaru/items/da88c0a8793f23633c28#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88-vs-sf-pro-display-vs-sf-pro-text">San
					Francisco フォントを探る - Qiita</a>
			<a
					href="https://github.com/Devographics/surveys/issues/47">State of JS 2022 Preliminary Discussions ·
					Issue #47 · Devographics/surveys · GitHub</a>
			<a href="https://2022.stateofgraphql.com/en-US/">The
					State of GraphQL 2022</a>
			<a
					href="https://survey.devographics.com/survey/state-of-css/2022?source=stateofjs">State of CSS
					2022</a>
			<a
					href="https://tamukai.blog.velc.jp/entry/2022/10/12/133638">board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月）
					- ヴェルク - IT起業の記録</a>
			<a
					href="https://qiita.com/c0ridrew/items/7f2c9dad12543fa2662f">知ってるようで知らないRefererとReferrer-Policyのお話 -
					Qiita</a>
			<a
					href="https://applech2.com/archives/20221015-human-interface-guidelines-changelog-now-available.html">Apple、開発者やデザイナー向けに「Human
					Interface Guidelines」の更新履歴を公開。</a>
			<a
					href="https://www.youtube.com/watch?v=XXGa25Re9aw">:has() - The CSS Podcast - YouTube</a>
			<a
					href="https://web.dev/chrometober-2022/">web.dev</a>
			<a href="https://web.dev/change-password-url/">Help
					users change passwords easily by adding a well-known URL for changing passwords</a>
			<a
					href="https://w3c.github.io/webappsec-change-password-url/#semantics">A Well-Known URL for Changing
					Passwords</a>

Tailwind考 - uhyo/blog
AI
					Programmer
デザインシステムにおけるタイポグラフィーの試行錯誤
					- DMM inside
ios13から日本語フォントのboldがより太くなるケース - Qiita
			
Takeru Suzuki (@terkel) | Twitter
			
2022年に最適なfont-familyの書き方 - ICS MEDIA
San
					Francisco フォントを探る - Qiita
State of JS 2022 Preliminary Discussions ·
					Issue #47 · Devographics/surveys · GitHub
The
					State of GraphQL 2022
State of CSS
					2022
board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月）
					- ヴェルク - IT起業の記録
知ってるようで知らないRefererとReferrer-Policyのお話 -
					Qiita
Apple、開発者やデザイナー向けに「Human
					Interface Guidelines」の更新履歴を公開。
:has() - The CSS Podcast - YouTube
web.dev
Help
					users change passwords easily by adding a well-known URL for changing passwords
A Well-Known URL for Changing
					Passwords

Design System, Font-Family, .well-known/change-password

<a
					href="https://csswizardry.com/2022/09/critical-css-not-so-fast/">Critical CSS? Not So Fast! – CSS
					Wizardry – Web Performance Optimisation</a>
			<a
					href="https://web.dev/i18n/ja/defer-non-critical-css/">重要でないCSSを延期する</a>
			<a
					href="https://tdarb.org/blog/under-1kb.html">tdarb.org / Making a Website Under 1kB</a>
			<a
					href="https://zenn.dev/yodaka/articles/596f441acf1cf3">CommonJSとES Modulesについてまとめる</a>
			<a
					href="https://www.youtube.com/watch?v=GdqdDwqItoM">Browser hacking: Making CSS font emblems work on
					Reddit - YouTube</a>
			<a
					href="https://www.itmedia.co.jp/news/articles/2209/15/news219.html">Adobe、Figmaを約2.9兆円で買収へ　デザインコラボツール大手
					- ITmedia NEWS</a>
			<a
					href="https://note.com/shikichee/n/n1c78ed4b4af7">「高齢者UIプロトタイプ検証の学び」についての重要ポイントと質問の回答｜敷地 琢也 / Ubie
					Discovery｜note</a>
			<a
					href="https://markelabo.com/n/ne3b97e11d156">1週間で20万PV「ためしがき」ツイッターのトレンド入りまでにやった工夫と、AI問診サービスが語る「常識が通じない」高齢者向けUIデザインの改善事例。｜アプリマーケティング研究所</a>
			
			<a
					href="https://jp.ign.com/cedec-2018/28173/news/nintendo-switchui">Nintendo
					Switchで目指した明快で軽快なUIとは？</a>
			<a
					href="https://qiita.com/megumu-u/items/73b728ad1d381717d731#%E6%A7%8B%E9%80%A0%E3%82%92%E8%80%83%E3%81%88%E3%82%8B">画面をデザインするということ
					- Qiita</a>

Critical CSS? Not So Fast! – CSS
					Wizardry – Web Performance Optimisation
重要でないCSSを延期する
tdarb.org / Making a Website Under 1kB
CommonJSとES Modulesについてまとめる
Browser hacking: Making CSS font emblems work on
					Reddit - YouTube
Adobe、Figmaを約2.9兆円で買収へ　デザインコラボツール大手
					- ITmedia NEWS
「高齢者UIプロトタイプ検証の学び」についての重要ポイントと質問の回答｜敷地 琢也 / Ubie
					Discovery｜note
1週間で20万PV「ためしがき」ツイッターのトレンド入りまでにやった工夫と、AI問診サービスが語る「常識が通じない」高齢者向けUIデザインの改善事例。｜アプリマーケティング研究所
			
Nintendo
					Switchで目指した明快で軽快なUIとは？
画面をデザインするということ
					- Qiita

Critical CSS, CommonJS vs ESM, Design

<a href="https://twitter.com/myakura/status/1565986899097178112">https://twitter.com/myakura/status/1565986899097178112</a>
<a href="https://www.nngroup.com/articles/infinite-scrolling-tips/">Infinite Scrolling: When to Use It, When to Avoid It</a>
<a href="https://blog.ojisan.io/i-hate-infinite-scroll/">無限スクロールは考慮することが多い | blog.ojisan.io</a>
<a href="https://udn.realityripple.com/docs/Web/Accessibility/ARIA/Roles/Feed_Role">ARIA: feed role - Accessibility</a>
<a href="https://w3c.github.io/aria-practices/examples/feed/feedDisplay.html">Feed Display | WAI-ARIA Authoring Practices 1.2</a>
<a href="https://twitter.com/ChromiumDev/status/1567133236102414341">https://twitter.com/ChromiumDev/status/1567133236102414341</a>
<a href="https://developer.chrome.com/ja/docs/privacy-sandbox/topics/">Topics API - Chrome Developers</a>
<a href="https://developer.chrome.com/ja/docs/privacy-sandbox/topics/#この-api-が必要な理由">この API が必要な理由 Topics API - Chrome Developers</a>
<a href="https://japan.googleblog.com/2022/01/topics-api.html">Google Japan Blog: プライバシー サンドボックスの新しい Topics API について</a>
<a href="https://www.youtube.com/watch?v=p8_gFRNAUBg&amp;t=9s">Topics を紹介します。 | Privacy Sandbox - YouTube</a>

https://twitter.com/myakura/status/1565986899097178112
Infinite Scrolling: When to Use It, When to Avoid It
無限スクロールは考慮することが多い | blog.ojisan.io
ARIA: feed role - Accessibility
Feed Display | WAI-ARIA Authoring Practices 1.2
https://twitter.com/ChromiumDev/status/1567133236102414341
Topics API - Chrome Developers
この API が必要な理由 Topics API - Chrome Developers
Google Japan Blog: プライバシー サンドボックスの新しい Topics API について
Topics を紹介します。 | Privacy Sandbox - YouTube

:has(), Infinite Scrolling, Topics API

<a href="https://oven.sh/">Oven: the company behind
					Bun</a>
			<a
					href="https://www.publickey1.jp/blog/22/javascriptbun9ovenci.html">JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画
					－ Publickey</a>
			<a href="https://ziglang.org/ja/">ホーム ⚡ Zig
					Programming Language</a>
			<a
					href="https://www.rust-lang.org/ja">Rustプログラミング言語</a>
			<a href="https://swc.rs/">Rust-based platform for the
					Web – SWC</a>
			<a href="https://deno.land/">Deno - A modern runtime
					for JavaScript and TypeScript</a>
			<a
					href="https://zenn.dev/hastur/scraps/06c2ff5bde0c10">Rustがあるのに何でZig使うんですか？に対する解答</a>
			<a
					href="https://voluntas.medium.com/%E3%81%AA%E3%81%9C-zig-%E3%81%AE%E6%8E%A1%E7%94%A8%E3%82%92%E6%A4%9C%E8%A8%8E%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B-106f1ca2d25">なぜ
					Zig の採用を検討しているのか. かなり雑に書いてるので、雑に読んでください。 | by V | Jul, 2022 | Medium</a>
			<a
					href="https://developer.hatenastaff.com/entry/2022/09/01/093000">CSS Modulesの歴史、現在、これから - Hatena
					Developer Blog</a>
			<a href="https://nextjs.org/conf">Next.js Conf</a>
			<a
					href="https://twitter.com/yuxiao_he/status/1565865694402469888">https://twitter.com/yuxiao_he/status/1565865694402469888</a>
			
			<a
					href="https://developer.chrome.com/blog/new-in-chrome-105/">New in Chrome 105 - Chrome
					Developers</a>
			<a
					href="https://japan.cnet.com/article/20423173/">W3C、「Web SQL Database」の仕様策定を正式に断念 - CNET Japan</a>

Oven: the company behind
					Bun
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画
					－ Publickey
ホーム ⚡ Zig
					Programming Language
Rustプログラミング言語
Rust-based platform for the
					Web – SWC
Deno - A modern runtime
					for JavaScript and TypeScript
Rustがあるのに何でZig使うんですか？に対する解答
なぜ
					Zig の採用を検討しているのか. かなり雑に書いてるので、雑に読んでください。 | by V | Jul, 2022 | Medium
CSS Modulesの歴史、現在、これから - Hatena
					Developer Blog
Next.js Conf
https://twitter.com/yuxiao_he/status/1565865694402469888
			
New in Chrome 105 - Chrome
					Developers
W3C、「Web SQL Database」の仕様策定を正式に断念 - CNET Japan

Bun, Zig/Rust, Next.js Conf, Chrome 105

<a
					href="https://www.youtube.com/watch?v=9VXR_qRgROE">Build Custom Interfaces Using CSS Open Props -
					YouTube</a>
			<a
					href="https://github.com/tc39/agendas/blob/main/2022/09.md">agendas/09.md at main · tc39/agendas</a>
			
			<a
					href="https://zenn.dev/spring_raining/articles/3eb62ff93df1eb">Markdown を拡張する MDX
					はドキュメント作成の新たな可能性？</a>
			<a href="https://docusaurus.io/">Build optimized
					websites quickly, focus on your content | Docusaurus</a>
			<a
					href="https://nextjs.org/docs/advanced-features/using-mdx">Advanced Features: Using MDX |
					Next.js</a>
			<a
					href="https://twitter.com/bert_hu_bert/status/1561466204602220544">https://twitter.com/bert_hu_bert/status/1561466204602220544</a>
			
			<a
					href="https://qiita.com/degudegu2510/items/37bb28c44b8c4a2fd429">【CSS】きみは &quot;擬似クラス&quot;
					何個言えるかな？？ - Qiita</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5
					の動画へのキャプションと字幕の追加 - 開発者ガイド | MDN</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/CSS/border-color">border-color - CSS:
					カスケーディングスタイルシート | MDN</a>
			<a
					href="https://twitter.com/diegohaz/status/1562097407013359616">https://twitter.com/diegohaz/status/1562097407013359616</a>
			
			<a
					href="https://ja.javascript.info/regexp-unicode">Unicode(ユニコード): フラグ &quot;u&quot; とクラス \p{...}</a>
			
			<a
					href="https://www.unicode.org/Public/UCD/latest/ucd/">Index of /Public/UCD/latest/ucd</a>
			<a
					href="https://www.unicode.org/Public/UCD/latest/ucd/ArabicShaping.txt">https://www.unicode.org/Public/UCD/latest/ucd/ArabicShaping.txt</a>
			
			<a
					href="https://www.unicode.org/Public/UCD/latest/ucd/EmojiSources.txt">https://www.unicode.org/Public/UCD/latest/ucd/EmojiSources.txt</a>
			
			<a
					href="https://blog.emojipedia.org/new-emojis-in-2022-2023/">New Emojis In 2022-2023</a>
			<a href="https://emojipedia.org/">📙 Emojipedia — 😃
					Home of Emoji Meanings 💁👌🎍😍</a>
			<a href="https://emojipedia.org/vendors/">All Vendors
					&amp; Platforms</a>

Build Custom Interfaces Using CSS Open Props -
					YouTube
agendas/09.md at main · tc39/agendas
			
Markdown を拡張する MDX
					はドキュメント作成の新たな可能性？
Build optimized
					websites quickly, focus on your content | Docusaurus
Advanced Features: Using MDX |
					Next.js
https://twitter.com/bert_hu_bert/status/1561466204602220544
			
【CSS】きみは "擬似クラス"
					何個言えるかな？？ - Qiita
HTML5
					の動画へのキャプションと字幕の追加 - 開発者ガイド | MDN
border-color - CSS:
					カスケーディングスタイルシート | MDN
https://twitter.com/diegohaz/status/1562097407013359616
			
Unicode(ユニコード): フラグ "u" とクラス \p{...}
			
Index of /Public/UCD/latest/ucd
https://www.unicode.org/Public/UCD/latest/ucd/ArabicShaping.txt
			
https://www.unicode.org/Public/UCD/latest/ucd/EmojiSources.txt
			
New Emojis In 2022-2023
📙 Emojipedia — 😃
					Home of Emoji Meanings 💁👌🎍😍
All Vendors
					& Platforms

OpenProps, mdx(docusaurus), 擬似クラス, border-color, unicode regex, Emojipedia

<a
					href="https://coliss.com/articles/build-websites/operation/css/the-future-of-css-variable-units.html">CSSは確実に進化している！
					新機能、単位を変数として利用できる「Variable Units（変数単位）」 | コリス</a>
			<a
					href="https://web.dev/state-of-css-2022/#loosely-typed-custom-properties">State of CSS 2022</a>
			<a
					href="https://github.com/w3c/csswg-drafts/issues/7379">[css-variables-2] Custom units as simple
					variable desugaring · Issue #7379 · w3c/csswg-drafts · GitHub</a>
			<a
					href="https://www.bram.us/2022/07/08/the-future-of-css-variable-units-powered-by-custom-properties/">The
					Future of CSS: Variable Units, powered by Custom Properties – Bram.us</a>
			<a
					href="https://developer.chrome.com/blog/new-in-devtools-104/">What&#x27;s New In DevTools (Chrome
					104) - Chrome Developers</a>
			<a href="https://web.dev/bfcache/">バック/フォワードキャッシュ</a>
			
			<a
					href="https://developer.chrome.com/docs/devtools/application/back-forward-cache/">Test back/forward
					cache - Chrome Developers</a>
			<a
					href="https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event">Page Lifecycle API -
					Chrome Developers</a>
			<a
					href="https://developer.chrome.com/blog/new-in-devtools-105/">What&#x27;s New In DevTools (Chrome
					105) - Chrome Developers</a>
			<a
					href="https://zenn.dev/terrierscript/scraps/4571cb1d3e32be">UUID / CUID / nanoid とか乱数の話</a>
			<a href="https://zelark.github.io/nano-id-cc/">Nano ID
					CC</a>

CSSは確実に進化している！
					新機能、単位を変数として利用できる「Variable Units（変数単位）」 | コリス
State of CSS 2022
[css-variables-2] Custom units as simple
					variable desugaring · Issue #7379 · w3c/csswg-drafts · GitHub
The
					Future of CSS: Variable Units, powered by Custom Properties – Bram.us
What's New In DevTools (Chrome
					104) - Chrome Developers
バック/フォワードキャッシュ
			
Test back/forward
					cache - Chrome Developers
Page Lifecycle API -
					Chrome Developers
What's New In DevTools (Chrome
					105) - Chrome Developers
UUID / CUID / nanoid とか乱数の話
Nano ID
					CC

Variable Units, State of CSS 2022, bfcache, nanoid

<a
					href="https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/">How to
					Center a Div with CSS – 10 Different Ways</a>
			<a
					href="https://web.dev/centering-in-css/">CSSでのセンタリング</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/CSS/length">&lt;length&gt; - CSS: カスケーディングスタイルシート |
					MDN</a>
			<a
					href="https://www.publickey1.jp/blog/22/w3ciddecentralized_identifiers_dids.html">W3C、中央集権的な管理を不要にする「Decentralized
					Identifiers (DIDs)」（分散型識別子）の仕様が勧告に到達 － Publickey</a>
			<a
					href="https://ja.wikipedia.org/wiki/Linked_Open_Data">Linked Open Data - Wikipedia</a>
			<a href="https://json-ld.org/">JSON-LD - JSON for
					Linking Data</a>
			<a
					href="https://www.w3.org/WAI/ARIA/apg/patterns/">Patterns | APG | WAI | W3C</a>
			<a
					href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y">GitHub -
					jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.</a>
			<a
					href="https://github.com/markuplint/markuplint">GitHub - markuplint/markuplint: A Linter for All
					Markup Languages.</a>
			<a
					href="https://cloudfour.com/thinks/font-subsetting-strategies-content-based-vs-alphabetical/">Font
					Subsetting Strategies: Content-Based vs Alphabetical - Cloud Four</a>
			<a
					href="https://blog.jxck.io/entries/2016-03-14/web-font-noto-sans.html">Noto Sans の Web Font
					対応とサブセットによる最適化 | blog.jxck.io</a>
			<a
					href="https://coliss.com/articles/build-websites/operation/work/avoiding-img-layout-shifts.html">imgタグのwidthとheightを省略したらダメ！
					画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法 | コリス</a>
			<a
					href="https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/">A Deep Dive Into
					object-fit And background-size In CSS — Smashing Magazine</a>
			<a
					href="https://www.youtube.com/watch?v=_iq1fPjeqMQ">DOM ready events considered harmful | HTTP 203 -
					YouTube</a>

How to
					Center a Div with CSS – 10 Different Ways
CSSでのセンタリング
<length> - CSS: カスケーディングスタイルシート |
					MDN
W3C、中央集権的な管理を不要にする「Decentralized
					Identifiers (DIDs)」（分散型識別子）の仕様が勧告に到達 － Publickey
Linked Open Data - Wikipedia
JSON-LD - JSON for
					Linking Data
Patterns | APG | WAI | W3C
GitHub -
					jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
GitHub - markuplint/markuplint: A Linter for All
					Markup Languages.
Font
					Subsetting Strategies: Content-Based vs Alphabetical - Cloud Four
Noto Sans の Web Font
					対応とサブセットによる最適化 | blog.jxck.io
imgタグのwidthとheightを省略したらダメ！
					画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法 | コリス
A Deep Dive Into
					object-fit And background-size In CSS — Smashing Magazine
DOM ready events considered harmful | HTTP 203 -
					YouTube

Centering CSS, DIDs. WAI-ARIA, Font Subsetting

<a
					href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css">open-props/normalize.css
					at main · argyleink/open-props · GitHub</a>
			<a
					href="https://coliss.com/articles/build-websites/operation/css/one-line-dark-mode-using-css.html">たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
					| コリス</a>
			<a
					href="https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/">Body Margin 8px | Miriam Eric
					Suzanne</a>
			<a
					href="https://zenn.dev/funteractive/articles/component-input-number">input[type=&quot;number&quot;]をやめた話</a>
			
			<a
					href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number">&lt;input
					type=&quot;number&quot;&gt; - HTML: HyperText Markup Language | MDN</a>
			<a
					href="https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)">4.10.5.1.12
					Number state (type=number)</a>
			<a
					href="https://jakearchibald.com/2022/img-aspect-ratio/">Avoiding &lt;img&gt; layout shifts:
					aspect-ratio vs width &amp; height attributes - JakeArchibald.com</a>
			<a
					href="https://note.morisawa.co.jp/n/nea1f9b2a5ef7">月間利用者数500万人超え！　症状検索エンジン「ユビー」の誰もが使いやすい、見やすいフォントへのこだわりとは｜モリサワ　note編集部</a>
			
			<a href="https://ubie.app/">症状に関連する病名についてAIで無料で調べる
					症状検索エンジン「ユビー」 by Ubie</a>

open-props/normalize.css
					at main · argyleink/open-props · GitHub
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
					| コリス
Body Margin 8px | Miriam Eric
					Suzanne
input[type="number"]をやめた話
			
<input
					type="number"> - HTML: HyperText Markup Language | MDN
4.10.5.1.12
					Number state (type=number)
Avoiding <img> layout shifts:
					aspect-ratio vs width & height attributes - JakeArchibald.com
月間利用者数500万人超え！　症状検索エンジン「ユビー」の誰もが使いやすい、見やすいフォントへのこだわりとは｜モリサワ　note編集部
			
症状に関連する病名についてAIで無料で調べる
					症状検索エンジン「ユビー」 by Ubie

normalize.css, Body Margin 8px, input type=number, webfont

<a
					href="https://tue-ofuro.vercel.app/5f20ed68-b56d-4260-908b-e0effe6fb836">line-height と
					vertical-align の話（em-square）</a>
			<a
					href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align">Deep dive CSS: font
					metrics, line-height and vertical-align - Vincent De Oliveira</a>
			<a href="https://nextjs.org/blog/next-12-2">Blog -
					Next.js 12.2 | Next.js</a>
			<a
					href="https://zenn.dev/nissy_dev/articles/create-swc-plugin">SWC plugin を作成して Next.js に導入してみた</a>
			
			<a
					href="https://coliss.com/articles/build-websites/operation/css/css-reset-by-ellyloel.html">IEのサポートが終了した現在、古いCSSリセットからもう卒業！
					最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css | コリス</a>
			<a
					href="https://github.com/filipelinhares/ress">GitHub - filipelinhares/ress: 🚿 A modern CSS
					reset</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/legend">&lt;legend&gt; - HTML:
					HyperText Markup Language | MDN</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;: フィールドセット要素
					- HTML: HyperText Markup Language | MDN</a>
			<a
					href="https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/">Using
					the fieldset and legend elements - Accessibility in government</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Learn/Forms/Advanced_form_styling">HTML フォームへの高度なスタイル設定
					- ウェブ開発を学ぶ | MDN</a>
			<a
					href="https://react-spectrum.adobe.com/react-aria/useDatePicker.html">useDatePicker – React Aria</a>
			
			<a
					href="https://johnykei.net/front-end/css/fallback-of-gap-property-in-flexbox-for-safari-under-14-1/">Safari
					14.1 未満のバージョンに Flexbox の gap プロパティのフォールバックスタイルを追加するための CSS ハック | Johnykei.net</a>
			<a
					href="https://webrandum.net/css-scroll-behavior/">CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ –
					Webrandum</a>
			<a
					href="https://twitter.com/derSchepp/status/1346513882664357888">https://twitter.com/derSchepp/status/1346513882664357888</a>
			
			<a
					href="https://www.itmedia.co.jp/news/articles/2206/28/news190.html">名古屋大学に不正アクセス　「ブラインドSQLインジェクション」攻撃でメアド2086件漏えいか
					- ITmedia NEWS</a>

line-height と
					vertical-align の話（em-square）
Deep dive CSS: font
					metrics, line-height and vertical-align - Vincent De Oliveira
Blog -
					Next.js 12.2 | Next.js
SWC plugin を作成して Next.js に導入してみた
			
IEのサポートが終了した現在、古いCSSリセットからもう卒業！
					最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css | コリス
GitHub - filipelinhares/ress: 🚿 A modern CSS
					reset
<legend> - HTML:
					HyperText Markup Language | MDN
<fieldset>: フィールドセット要素
					- HTML: HyperText Markup Language | MDN
Using
					the fieldset and legend elements - Accessibility in government
HTML フォームへの高度なスタイル設定
					- ウェブ開発を学ぶ | MDN
useDatePicker – React Aria
			
Safari
					14.1 未満のバージョンに Flexbox の gap プロパティのフォールバックスタイルを追加するための CSS ハック | Johnykei.net
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ –
					Webrandum
https://twitter.com/derSchepp/status/1346513882664357888
			
名古屋大学に不正アクセス　「ブラインドSQLインジェクション」攻撃でメアド2086件漏えいか
					- ITmedia NEWS

Next.js 12.2, reset.css, Safari Styling Hacks

<a
					href="https://github.com/TanStack/table">TanStack/table: 🤖 Headless UI for building powerful tables
					&amp; datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table</a>
			<a
					href="https://developer.chrome.com/en/blog/new-in-chrome-103/">New in Chrome 103 - Chrome
					Developers</a>
			<a
					href="https://gigazine.net/news/20220622-google-chrome-103/">「Google Chrome 103」安定版リリース、HTTP 103
					レスポンスコード対応などウェブ高速化への取り組み - GIGAZINE</a>
			<a
					href="https://blog.jxck.io/entries/2016-12-16/103-early-hints.html">HTTP の新しいステータスコード 103 Early
					Hints | blog.jxck.io</a>
			<a
					href="https://dunglas.fr/2021/02/using-the-103-early-hints-status-code-in-go-applications/">Using
					the “103 Early Hints” Status Code in Go Applications - Kévin Dunglas</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/HTTP/Status#%E6%83%85%E5%A0%B1%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9">HTTP
					レスポンスステータスコード - HTTP | MDN</a>
			<a
					href="https://github.com/vercel/next.js/discussions/16854">RFC: Eager &lt;head&gt; · Discussion
					#16854 · vercel/next.js</a>
			<a
					href="https://local-font-access.glitch.me/demo/">Local Fonts Demo</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/CSS/@font-face">@font-face - CSS: カスケーディングスタイルシート |
					MDN</a>
			<a
					href="https://developer.mozilla.org/ja/docs/Web/API/Fetch_API">Fetch API - Web API | MDN</a>
			<a
					href="https://www.itmedia.co.jp/news/articles/2206/22/news088.html">GitHub、AIプログラミング機能「Copilot」の一般提供開始　月額10ドル
					- ITmedia NEWS</a>
			<a
					href="https://www.kaggle.com/competitions/amex-default-prediction/leaderboard">American Express -
					Default Prediction | Kaggle</a>
			<a
					href="https://ics.media/entry/220610/">JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA</a>

TanStack/table: 🤖 Headless UI for building powerful tables
					& datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
New in Chrome 103 - Chrome
					Developers
「Google Chrome 103」安定版リリース、HTTP 103
					レスポンスコード対応などウェブ高速化への取り組み - GIGAZINE
HTTP の新しいステータスコード 103 Early
					Hints | blog.jxck.io
Using
					the “103 Early Hints” Status Code in Go Applications - Kévin Dunglas
HTTP
					レスポンスステータスコード - HTTP | MDN
RFC: Eager <head> · Discussion
					#16854 · vercel/next.js
Local Fonts Demo
@font-face - CSS: カスケーディングスタイルシート |
					MDN
Fetch API - Web API | MDN
GitHub、AIプログラミング機能「Copilot」の一般提供開始　月額10ドル
					- ITmedia NEWS
American Express -
					Default Prediction | Kaggle
JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA

HTTP Status Code 103, Chrome 103, ES2022

<a
 href="https://twitter.com/cssnite/status/1536445932237365248">CSS NiteさんはTwitterを使っています:
 「2021年8月24日に開催した〈行動・認知プロセスモデルを知って、UIを的確に改善しよう〉／松田 直樹さん（まぼろし）@readymadegogo のアーカイブ動画を公開します。
 https://t.co/xv0ss3qRtc https://t.co/k3r54E6Wrx」 / Twitter</a>
 <a
 href="https://www.ipa.go.jp/security/announce/ie_eos.html">Microsoft 社 Internet Explorer のサポート終了について：IPA
 独立行政法人 情報処理推進機構</a>
 <a
 href="https://blog.jxck.io/entries/2022-06-16/HTTP-RFCs.html">HTTP 関連 RFC が大量に出た話と 3 行まとめ | blog.jxck.io</a>
 
 <a
 href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/1416367.html">次世代Web通信プロトコル「HTTP/3」がついに標準化
 ～有志による無償解説本が話題に - やじうまの杜 - 窓の杜</a>
 <a
 href="https://github.com/flano-yuki/http3-note">flano-yuki/http3-note: My HTTP/3 Note</a>

CSS NiteさんはTwitterを使っています:
          「2021年8月24日に開催した〈行動・認知プロセスモデルを知って、UIを的確に改善しよう〉／松田 直樹さん（まぼろし）@readymadegogo のアーカイブ動画を公開します。
          https://t.co/xv0ss3qRtc https://t.co/k3r54E6Wrx」 / Twitter
Microsoft 社 Internet Explorer のサポート終了について：IPA
          独立行政法人 情報処理推進機構
HTTP 関連 RFC が大量に出た話と 3 行まとめ | blog.jxck.io
      
次世代Web通信プロトコル「HTTP/3」がついに標準化
          ～有志による無償解説本が話題に - やじうまの杜 - 窓の杜
flano-yuki/http3-note: My HTTP/3 Note

認知プロセスとデザイン、HTTP/3

<a
 href="https://www.cresco.co.jp/blog/entry/14335/">PlayWright を使ってE2Eテストを書いてみた</a>
 <a
 href="https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/">News from WWDC22:
 WebKit Features in Safari 16 Beta | WebKit</a>
 <a
 href="https://twitter.com/clockmaker/status/1533955369130934272">池田 泰延 (@clockmaker)</a>
 <a href="https://www.youtube.com/user/Apple/videos">Apple -
 YouTube</a>
 <a
 href="https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/">Human Interface
 Guidelines - Human Interface Guidelines - Design - Apple Developer</a>
 <a
 href="https://developer.apple.com/design/human-interface-guidelines/patterns/entering-data">Data Entry -
 Patterns - Human Interface Guidelines - Design - Apple Developer</a>
 <a
 href="https://twitter.com/usagimaruma/status/1534345790700654593">usagimaru ⌘ (@usagimaruma)</a>
 <a
 href="https://zenn.dev/kazuma1989/articles/7749fb8de658a3">複雑な React コンポーネントを JSX のネストで表現する</a>
 <a
 href="https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6">5 Advanced React Patterns. An
 overview of 5 modern advanced React… | by Alexis Regnaud | JavaScript in Plain English</a>
 <a
 href="https://developer.chrome.com/docs/devtools/performance-insights/">Performance insights: Get actionable
 insights on your website&#x27;s performance - Chrome Developers</a>
 <a
 href="https://zenn.dev/futa/articles/8cf0f84eadc910400b02">Webに最適なメディアフォーマットを整理する - 2021</a>
 <a href="https://blog.socialcast.jp/04/post-712/">H.264
 H.265のコーデック・プロファイル・レベルとは | 動画サイト運営ノウハウブログ by ソーシャルキャスト</a>
 <a
 href="https://developer.android.com/guide/topics/media/media-formats?hl=ja">サポートされているメディア形式 | Android デベロッパー |
 Android Developers</a>

PlayWright を使ってE2Eテストを書いてみた
News from WWDC22:
          WebKit Features in Safari 16 Beta | WebKit
池田 泰延 (@clockmaker)
Apple -
          YouTube
Human Interface
          Guidelines - Human Interface Guidelines - Design - Apple Developer
Data Entry -
          Patterns - Human Interface Guidelines - Design - Apple Developer
usagimaru ⌘ (@usagimaruma)
複雑な React コンポーネントを JSX のネストで表現する
5 Advanced React Patterns. An
          overview of 5 modern advanced React… | by Alexis Regnaud | JavaScript in Plain English
Performance insights: Get actionable
          insights on your website's performance - Chrome Developers
Webに最適なメディアフォーマットを整理する - 2021
H.264
          H.265のコーデック・プロファイル・レベルとは | 動画サイト運営ノウハウブログ by ソーシャルキャスト
サポートされているメディア形式 | Android デベロッパー |
          Android Developers

Safari 16 Beta (WebPush), Human Interface Guidelines, webp avif webm HLS ...

<a href="https://nextjs.org/blog/layouts-rfc">Blog - Layouts RFC | Next.js</a>
<a href="https://www.anaconda.com/blog/pyscript-python-in-the-browser">Anaconda | New from Anaconda: Python in the Browser</a>
<a href="https://www.matuzo.at/blog/2022/please-stop-disabling-zoom/">Please, stop disabling zoom - Manuel Matuzović</a>
<a href="https://github.com/webpack-contrib/css-loader/issues/1050#issuecomment-592541379">Interoperability across tools and support plain JS modules imports · Issue #1050 · webpack-contrib/css-loader · GitHub</a>
<a href="https://github.com/vercel/next.js/issues/15542">[Docs] Recommend CSS Modules over css-in-js · Issue #15542 · vercel/next.js · GitHub</a>

Blog - Layouts RFC | Next.js
Anaconda | New from Anaconda: Python in the Browser
Please, stop disabling zoom - Manuel Matuzović
Interoperability across tools and support plain JS modules imports · Issue #1050 · webpack-contrib/css-loader · GitHub
[Docs] Recommend CSS Modules over css-in-js · Issue #15542 · vercel/next.js · GitHub

Layout RFC of Nextjs, zoom無効化について, css moduleのその後

<a href="https://io.google/2022/program/intl/ja/">Google I/O</a>
<a href="https://web.dev/state-of-css-2022/">State of CSS 2022</a>
<a href="https://www.w3.org/TR/css-color-5/#relative-LCH">Relative LCH colors</a>
<a href="https://wpt.fyi/interop-2022">web-platform-tests dashboard</a>
<a href="https://en.wikipedia.org/wiki/Fitzpatrick_scale">Fitzpatrick scale - Wikipedia</a>
<a href="https://web.dev/interop-2022/#what-is-interop-2022">Interop 2022: browsers working together to improve the web for developers</a>
<a href="https://zenn.dev/seya/articles/f642acf1c47358">新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜</a>
<a href="https://gigazine.net/news/20180502-css-illustration/">HTML/CSSで絵を描く猛者が作品を公開中 - GIGAZINE</a>
<a href="https://twitter.com/tiyou01/status/1527610411696025601">STUDIO Blueprint機能</a>
<a href="https://medium.com/@hannah.heinson/atomic-2-0-d94e5601200c">Atomic 2.0. Revisiting the Atomic Design Method for… | by Hannah Heinson | Medium</a>

Google I/O
State of CSS 2022
Relative LCH colors
web-platform-tests dashboard
Fitzpatrick scale - Wikipedia
Interop 2022: browsers working together to improve the web for developers
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
HTML/CSSで絵を描く猛者が作品を公開中 - GIGAZINE
STUDIO Blueprint機能
Atomic 2.0. Revisiting the Atomic Design Method for… | by Hannah Heinson | Medium

State of CSS 2022 (interop 2022)

<a href="https://www.youtube.com/watch?v=GDzzIlRhEzM">Thinking on ways to solve DIALOG - YouTube</a>
<a href="https://gui-challenges.web.app/dialog/dist/">Dialog | GUI Challenges</a>
<a href="https://web.dev/building-a-dialog-component/">Building a dialog component</a>
<a href="https://twitter.com/bramusblog/status/1516554256546996230">Bram.us / Twitter</a>
<a href="https://www.bram.us/2022/04/20/the-future-of-css-css-toggles/">The Future of CSS: CSS Toggles – Bram.us</a>
<a href="https://toggles.oddbird.net/">CSS Toggles demo</a>
<a href="https://css.oddbird.net/toggles/explainer/">CSS Toggles Explainer &amp; Proposal</a>
<a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー - 開発者ガイド | MDN</a>
<a href="https://www.borndigital.co.jp/book/25999.html">HTML解体新書 | ボーンデジタル</a>
<a href="https://twitter.com/SaekiTominaga/status/1517340136585187328">トミー / Twitter</a>
<a href="https://blog.w0s.jp/671">HTML のアウトラインアルゴリズムが見出しレベルをベースとしたものに刷新されそう</a>
<a href="https://foreignkey.toyao.net/archives/1503">HTML5 のセクショニングとアウトラインアルゴリズムの再確認 – Foreignkey, Inc.</a>
<a href="https://www.searchenginejournal.com/on-page-seo/header-tags/">How To Use Header Tags: SEO Best Practices</a>

Thinking on ways to solve DIALOG - YouTube
Dialog | GUI Challenges
Building a dialog component
Bram.us / Twitter
The Future of CSS: CSS Toggles – Bram.us
CSS Toggles demo
CSS Toggles Explainer & Proposal
コンテンツカテゴリー - 開発者ガイド | MDN
HTML解体新書 | ボーンデジタル
トミー / Twitter
HTML のアウトラインアルゴリズムが見出しレベルをベースとしたものに刷新されそう
HTML5 のセクショニングとアウトラインアルゴリズムの再確認 – Foreignkey, Inc.
How To Use Header Tags: SEO Best Practices

Dialog要素, toggle-root, コンテンツカテゴリー, アウトラインアルゴリズムの変更

<a
 href="https://developer.chrome.com/blog/new-in-devtools-100/">What&#x27;s New In DevTools (Chrome 100) -
 Chrome Developers</a>
 <a
 href="https://developer.chrome.com/blog/new-in-chrome-100/">New in Chrome 100 - Chrome Developers</a>
 <a
 href="https://reactjs.org/blog/2022/03/29/react-v18.html">React v18.0 – React Blog</a>
 <a
 href="https://www.youtube.com/watch?v=lDukIAymutM">useTransition() vs useDeferredValue | React 18 -
 YouTube</a>
 <a
 href="https://ja.reactjs.org/docs/concurrent-mode-patterns.html">並列的 UI パターン（実験的機能） – React</a>
 <a
 href="https://codesandbox.io/s/zealous-mccarthy-fiiwu2?file=/src/index.js">zealous-mccarthy-fiiwu2 -
 CodeSandbox</a>
 <a
 href="https://github.com/igtm/tue-ofuro/blob/3f1e064042556df653e3279a4148573e5f828633/styles/dangerous.css">tue-ofuro/dangerous.css
 at 3f1e064042556df653e3279a4148573e5f828633 · igtm/tue-ofuro · GitHub</a>
 <a
 href="https://cloudfour.com/thinks/resetting-inherited-css-with-revert/">Resetting Inherited CSS with “Revert”
 - Cloud Four</a>
 <a
 href="https://developer.mozilla.org/ja/docs/Web/CSS/all">all - CSS: カスケーディングスタイルシート | MDN</a>
 <a
 href="https://developer.mozilla.org/ja/docs/Web/CSS/revert">revert - CSS: カスケーディングスタイルシート | MDN</a>
 <a
 href="https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/">Windows
 High Contrast Mode, Forced Colors Mode And CSS Custom Properties — Smashing Magazine</a>
 <a
 href="https://developer.mozilla.org/ja/docs/Web/CSS/forced-color-adjust">forced-color-adjust - CSS:
 カスケーディングスタイルシート | MDN</a>
 <a
 href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">Styling
 for Windows high contrast with new standards for forced colors - Microsoft Edge Blog</a>
 <a
 href="https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/">Those HTML Attributes You Never
 Use — Smashing Magazine</a>

What's New In DevTools (Chrome 100) -
          Chrome Developers
New in Chrome 100 - Chrome Developers
React v18.0 – React Blog
useTransition() vs useDeferredValue | React 18 -
          YouTube
並列的 UI パターン（実験的機能） – React
zealous-mccarthy-fiiwu2 -
          CodeSandbox
tue-ofuro/dangerous.css
          at 3f1e064042556df653e3279a4148573e5f828633 · igtm/tue-ofuro · GitHub
Resetting Inherited CSS with “Revert”
          - Cloud Four
all - CSS: カスケーディングスタイルシート | MDN
revert - CSS: カスケーディングスタイルシート | MDN
Windows
          High Contrast Mode, Forced Colors Mode And CSS Custom Properties — Smashing Magazine
forced-color-adjust - CSS:
          カスケーディングスタイルシート | MDN
Styling
          for Windows high contrast with new standards for forced colors - Microsoft Edge Blog
Those HTML Attributes You Never
          Use — Smashing Magazine

Chrome 100, React 18 で追加された新しいhooks(useTransition, useDeferredValue)

<a
 href="https://blog.kenall.jp/entry/address-form-best-practice">これだけは押さえよう！住所フォームの作り方 - ケンオールブログ</a>
 <a
 href="https://qiita.com/yaju/items/0ceb6a0343561b4d208e">押下(おうか)にまつわる話 - Qiita</a>
 <a
 href="https://developer.chrome.com/en/blog/new-in-chrome-99/">New in Chrome 99 - Chrome Developers</a>
 <a
 href="https://forest.watch.impress.co.jp/docs/news/1394209.html">JavaScriptに「型」を ～Microsoftが新構文を提案へ - 窓の杜</a>
 
 <a
 href="https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/">A Proposal For Type
 Syntax in JavaScript - TypeScript</a>
 <a
 href="https://qiita.com/access3151fq/items/85b34a395e8268dd518a">ついにTypeScriptがブラウザで動くようになりそう 〜
 JavaScriptへの型構文の導入について - Qiita</a>
 <a
 href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/">Announcing TypeScript 4.6 -
 TypeScript</a>
 <a href="https://nextjs.org/blog/next-12-1">Blog - Next.js
 12.1 | Next.js</a>
 <a
 href="https://www.oreilly.co.jp/books/9784873119854/">O&#x27;Reilly Japan - デザインと障害が出会うとき</a>
 <a
 href="https://www.oreilly.co.jp/books/9784873119533/">O&#x27;Reilly Japan - データビジュアライゼーションの基礎</a>
 <a
 href="https://www.itmedia.co.jp/news/articles/2203/08/news089.html">Googleの折りたたみ・大画面向けモバイルOS「Android
 12L」が正式版に　SamsungやMicrosoftが採用へ - ITmedia NEWS</a>
 <a
 href="https://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/">Building
 Web Layouts For Dual-Screen And Foldable Devices — Smashing Magazine</a>
 <a
 href="https://www.youtube.com/watch?v=c2Ld63fS-c4">【衝撃の結果】ダークモードって本当に電池もつの？ - YouTube</a>
 <a href="https://css-tricks.com/css-cascade-layers/">A
 Complete Guide to CSS Cascade Layers | CSS-Tricks - CSS-Tricks</a>
 
 
 <a
 href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html">How to Upgrade to the React 18 Release
 Candidate – React Blog</a>

これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
押下(おうか)にまつわる話 - Qiita
New in Chrome 99 - Chrome Developers
JavaScriptに「型」を ～Microsoftが新構文を提案へ - 窓の杜
      
A Proposal For Type
          Syntax in JavaScript - TypeScript
ついにTypeScriptがブラウザで動くようになりそう 〜
          JavaScriptへの型構文の導入について - Qiita
Announcing TypeScript 4.6 -
          TypeScript
Blog - Next.js
          12.1 | Next.js
O'Reilly Japan - デザインと障害が出会うとき
O'Reilly Japan - データビジュアライゼーションの基礎
Googleの折りたたみ・大画面向けモバイルOS「Android
          12L」が正式版に　SamsungやMicrosoftが採用へ - ITmedia NEWS
Building
          Web Layouts For Dual-Screen And Foldable Devices — Smashing Magazine
【衝撃の結果】ダークモードって本当に電池もつの？ - YouTube
A
          Complete Guide to CSS Cascade Layers | CSS-Tricks - CSS-Tricks
How to Upgrade to the React 18 Release
          Candidate – React Blog

Type Syntax in Javascript, Typescript4.6, Nextjs 12.1, React 18, CSS @layer, 

<a
 href="https://color-combinations-generator.vercel.app/">Color Combinations Generator</a>
 <a href="https://www.npmjs.com/package/apca-w3">apca-w3 -
 npm</a>
 <a
 href="https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">達成基準 1.4.3 を理解する | WCAG
 2.0解説書</a>
 <a
 href="https://blog.datawrapper.de/color-contrast-check-data-vis-wcag-apca/">It&#x27;s time for a more
 sophisticated color contrast check for data visualizations - Datawrapper Blog</a>
 <a
 href="https://twitter.com/PostCSS/status/1493616359875481601">PostCSS さん CSS Color Module 4 got a new oklab()
 and oklch() color functions. / Twitter</a>
 <a
 href="https://triple-underscore.github.io/css-color-ja.html#ok-lab">CSS Color Module Level 4 （日本語訳）</a>
 <a href="https://bottosson.github.io/posts/oklab/">A
 perceptual color space for image processing</a>
 <a
 href="https://www.publickey1.jp/blog/22/amazon_prime_videowebassemblywasm_vm.html">Amazon Prime
 Videoが動画再生にWebAssemblyを採用。再生デバイス上にWasm VMをデプロイ、高フレームレートなど実現 － Publickey</a>
 <a
 href="https://engineering.linecorp.com/ja/blog/webassembly-runtime-used-in-blockchain/">ブロックチェーンで使われるWebAssembly
 Runtime - LINE ENGINEERING</a>
 <a
 href="https://engineering.linecorp.com/ja/blog/webassembly-expected-to-be-used-beyond-the-web/">Web 以外でも期待される
 WebAssembly - Blockchain との親和性について - LINE ENGINEERING</a>
 <a href="https://github.com/WAVM/WAVM">WAVM/WAVM:
 WebAssembly Virtual Machine</a>
 <a href="https://roadmap.sh/frontend">Frontend Developer
 Roadmap: Learn to become a modern frontend developer</a>
 <a
 href="https://ja.reactjs.org/docs/test-utils.html">テストユーティリティ – React</a>
 <a href="https://2021.stateofjs.com/en-US/awards/">The State
 of JS 2021: Awards</a>
 <a
 href="https://twitter.com/sukoyakarizumu/status/1494261309642506243">すこやさん アクセシビリティツリー / Twitter</a>
 <a href="https://projectfluent.org/">Project Fluent</a>
 <a
 href="https://www.youtube.com/watch?v=sKfNppvcv5o">自作ブラウザを拡張する作業配信 - ローカル変数をJavaScriptインタプリタに追加する
 #low_layer_girls - YouTube</a>
 
 
 
 
 tamux参考
 <div class="indented">
 <a
 href="https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/renderer/core/dom/text.cc">third_party/blink/renderer/core/dom/text.cc
 - chromium/src - Git at Google</a>
 <a
 href="https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/renderer/core/dom/">third_party/blink/rende

Color Combinations Generator
apca-w3 -
          npm
達成基準 1.4.3 を理解する | WCAG
          2.0解説書
It's time for a more
          sophisticated color contrast check for data visualizations - Datawrapper Blog
PostCSS さん CSS Color Module 4 got a new oklab()
          and oklch() color functions. / Twitter
CSS Color Module Level 4 （日本語訳）
A
          perceptual color space for image processing
Amazon Prime
          Videoが動画再生にWebAssemblyを採用。再生デバイス上にWasm VMをデプロイ、高フレームレートなど実現 － Publickey
ブロックチェーンで使われるWebAssembly
          Runtime - LINE ENGINEERING
Web 以外でも期待される
          WebAssembly - Blockchain との親和性について - LINE ENGINEERING
WAVM/WAVM:
          WebAssembly Virtual Machine
Frontend Developer
          Roadmap: Learn to become a modern frontend developer
テストユーティリティ – React
The State
          of JS 2021: Awards
すこやさん アクセシビリティツリー / Twitter
Project Fluent
自作ブラウザを拡張する作業配信 - ローカル変数をJavaScriptインタプリタに追加する
          #low_layer_girls - YouTube
tamux参考
      
third_party/blink/renderer/core/dom/text.cc
            - chromium/src - Git at Google
third_party/blink/rende

oklab/oklchとlab/lchの違い, The State of JS 2021, Wasm VM

<a
 href="https://app.stateofjs.com/survey/state-of-js/2021/">State of JavaScript 2021/2022</a>
 <a
 href="https://engineering.linecorp.com/ja/blog/line-securities-frontend-4/">【LINE証券
 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話 - LINE ENGINEERING</a>
 <a
 href="https://developers.google.com/web/updates/2015/08/using-requestidlecallback">Using requestIdleCallback
  |  Web  |  Google Developers</a>
 <a
 href="https://developer.mozilla.org/ja/docs/Web/API/Window/requestIdleCallback">requestIdleCallback - Web API
 | MDN</a>
 <a
 href="https://github.com/facebook/react/issues/13206#issuecomment-418926993">[Umbrella] Releasing Suspense ·
 Issue #13206 · facebook/react</a>
 <a
 href="https://triple-underscore.github.io/requestidlecallback-ja.html">Cooperative Scheduling of Background
 Tasks（日本語訳）</a>
 <a
 href="https://github.com/facebook/react/blob/main/packages/scheduler/src/forks/Scheduler.js#L97-L103">react/Scheduler.js
 at main · facebook/react</a>
 <a href="https://web.dev/isinputpending/">Better JS
 scheduling with isInputPending()</a>
 <a
 href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/">Announcing TypeScript 4.6
 Beta - TypeScript</a>
 <a
 href="https://github.com/microsoft/TypeScript/wiki/Performance-Tracing">Performance Tracing ·
 microsoft/TypeScript Wiki</a>
 <a
 href="https://github.com/microsoft/TypeScript/pull/47078/files#diff-d9ab6589e714c71e657f601cf30ff51dfc607fc98419bf72e04f6b0fa92cc4b8R8486-R8491">Explicitly
 Omit unspreadable properties from rest type in the generic case by jakebailey · Pull Request #47078 ·
 microsoft/TypeScript</a>
 <a
 href="https://engineering.linecorp.com/ja/blog/uit-baseline-for-front-end-development-in-2022/">2022年におけるフロントエンド開発のベースライン
 - LINE ENGINEERING</a>

State of JavaScript 2021/2022
【LINE証券
          Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話 - LINE ENGINEERING
Using requestIdleCallback
           |  Web  |  Google Developers
requestIdleCallback - Web API
          | MDN
[Umbrella] Releasing Suspense ·
          Issue #13206 · facebook/react
Cooperative Scheduling of Background
          Tasks（日本語訳）
react/Scheduler.js
          at main · facebook/react
Better JS
          scheduling with isInputPending()
Announcing TypeScript 4.6
          Beta - TypeScript
Performance Tracing ·
          microsoft/TypeScript Wiki
Explicitly
          Omit unspreadable properties from rest type in the generic case by jakebailey · Pull Request #47078 ·
          microsoft/TypeScript
2022年におけるフロントエンド開発のベースライン
          - LINE ENGINEERING

requestAnimationFrameとrequestIdleCallback, Typescript 4.6 beta

<a href="https://github.com/whatwg/html/pull/4184">Focus the
 dialog element instead of the first focusable item by dpogue · Pull Request #4184 · whatwg/html</a>
 <a href="https://html.spec.whatwg.org/">HTML Standard</a>
 
 <a
 href="https://gihyo.jp/design/column/newyear/2022/web-standards-and-browsers">2022年のブラウザとウェブ標準：新春特別企画｜gihyo.jp
 … 技術評論社</a>
 <a
 href="https://blog.jxck.io/entries/2016-09-29/vender-prefix-to-origin-trials.html">Web 標準化のフィードバックサイクルを円滑にする
 Origin Trials について | blog.jxck.io</a>
 <a
 href="https://developer.chrome.com/origintrials/#/trials/active">Origin Trials</a>
 <a
 href="https://gihyo.jp/design/column/newyear/2022/css-prospect">2022年のCSS：新春特別企画｜gihyo.jp … 技術評論社</a>
 <a
 href="https://www.itmedia.co.jp/news/articles/2201/11/news160.html">OSS「faker.js」と「colors.js」の開発者、自身でライブラリを意図的に改ざん　「ただ働きはもうしない」
 - ITmedia NEWS</a>
 <a href="https://parceljs.org/blog/parcel-css/">Announcing
 Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!</a>
 <a
 href="https://developers-jp.googleblog.com/2022/01/bento.html">Google Developers Japan: Bento のご紹介</a>
 <a href="https://github.com/igtm/manaita">igtm/manaita:
 Simple Markdown-Driven Scaffolding tool written by Go</a>
 <a href="https://blog.wadackel.me/2019/scaffdog/">Markdown
 Driven な scaffolding ツールを作った - wadackel.me</a>
 <a
 href="https://www.reddit.com/r/golang/comments/s34y7e/simple_markdowndriven_code_generator_written_by_go/">Simple
 Markdown-Driven Code Generator written by Go : golang</a>

Focus the
    dialog element instead of the first focusable item by dpogue · Pull Request #4184 · whatwg/html
HTML Standard
      
2022年のブラウザとウェブ標準：新春特別企画｜gihyo.jp
          … 技術評論社
Web 標準化のフィードバックサイクルを円滑にする
          Origin Trials について | blog.jxck.io
Origin Trials
2022年のCSS：新春特別企画｜gihyo.jp … 技術評論社
OSS「faker.js」と「colors.js」の開発者、自身でライブラリを意図的に改ざん　「ただ働きはもうしない」
          - ITmedia NEWS
Announcing
          Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!
Google Developers Japan: Bento のご紹介
igtm/manaita:
          Simple Markdown-Driven Scaffolding tool written by Go
Markdown
          Driven な scaffolding ツールを作った - wadackel.me
Simple
          Markdown-Driven Code Generator written by Go : golang

HTML Living Standard, Origin Trials, 2022年のCSS

<a
 href="https://github.com/tc39/notes/tree/master/meetings">tc39-notes/meetings at master ·
 rwaldron/tc39-notes</a>
 <a
 href="https://qiita.com/Syoitu/items/244c6bf99a6b7bf5ab9c">DenoがTypeScriptの使用をやめる5つの理由 - Qiita</a>
 <a
 href="https://262.ecma-international.org/12.0/#sec-performeval">ECMAScript® 2021 Language Specification</a>
 
 <a href="https://github.com/tc39/test262">tc39/test262:
 Official ECMAScript Conformance Test Suite</a>
 <a
 href="https://ja.wikipedia.org/wiki/ECMAScript#%E5%AE%9F%E8%A3%85">ECMAScript - Wikipedia</a>
 <a
 href="https://twitter.com/tonkotsuboy_com/status/1475656135026028544">array.prototype.groupBy</a>
 <a
 href="https://github.com/tc39/notes/blob/master/meetings/2021-10/oct-27.md#array-grouping-for-stage-2">notes/oct-27.md
 at master · tc39/notes</a>
 <a
 href="https://twitter.com/kawaz/status/1477809915729448961">ReDos攻撃</a>
 <a
 href="https://ja.reactjs.org/docs/concurrent-mode-suspense.html#using-suspense-in-practice">サスペンスを使ったデータ取得（実験的機能）
 – React</a>
 <a
 href="https://aframe.io/docs/1.2.0/introduction/">Introduction – A-Frame</a>
 <a
 href="https://blog.asial.co.jp/1648">VRコンテンツをHTMLとJavascriptで作る | アシアルブログ</a>
 <a
 href="https://github.com/n5ro/aframe-extras/blob/master/src/misc/grab.js">aframe-extras/grab.js at master ·
 n5ro/aframe-extras</a>
 <a href="https://junni.co.jp/release/481/">Three.js +
 Cannon.jsでWebVRコンテンツを作ってみた | 株式会社ジュニ</a>
 <a
 href="https://schteppe.github.io/cannon.js/">schteppe/cannon.js @ GitHub</a>

tc39-notes/meetings at master ·
          rwaldron/tc39-notes
DenoがTypeScriptの使用をやめる5つの理由 - Qiita
ECMAScript® 2021 Language Specification
      
tc39/test262:
          Official ECMAScript Conformance Test Suite
ECMAScript - Wikipedia
array.prototype.groupBy
notes/oct-27.md
          at master · tc39/notes
ReDos攻撃
サスペンスを使ったデータ取得（実験的機能）
          – React
Introduction – A-Frame
VRコンテンツをHTMLとJavascriptで作る | アシアルブログ
aframe-extras/grab.js at master ·
          n5ro/aframe-extras
Three.js +
          Cannon.jsでWebVRコンテンツを作ってみた | 株式会社ジュニ
schteppe/cannon.js @ GitHub

tc39-notes 読んで見る, 正規表現のパフォーマンス問題, A-Frameで作るWebVR など

<a href="https://developers.cyberagent.co.jp/blog/archives/32747/">重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog</a>
<a href="https://open-props.style/#getting-started">Open Props: sub-atomic styles</a>
<a href="https://twitter.com/argyleink/status/1469321254188560384?t=tc4H1rx-tcvil-Q89VbmaQ&amp;s=09">Adam Argyle / Twitter</a>
<a href="https://www.youtube.com/watch?v=R75ZVW4LW5o">Thinking on ways to solve TOASTS - YouTube</a>
<a href="https://coliss.com/articles/build-websites/operation/css/new-css-logical-properties.html">CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方 | コリス</a>
<a href="https://developer.mozilla.org/ja/docs/Web/API/Document/getAnimations">Document.getAnimations() - Web API | MDN</a>
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/output">&lt;output&gt;: 出力要素 - HTML: HyperText Markup Language | MDN</a>
<a href="https://conf.reactjs.org/stage">React Conf 2021</a>
<a href="https://www.youtube.com/watch?v=FZ0cG47msEk">React 18 Keynote - YouTube</a>
<a href="https://www.youtube.com/watch?v=lGEMwh32soc">React without memo - YouTube</a>
<a href="https://www.youtube.com/watch?v=pj5N-Khihgc">Streaming Server Rendering with Suspense - YouTube</a>
<a href="https://qiita.com/uhyo/items/255760315ca61544fe33">Promiseをthrowするのはなぜ天才的デザインなのか - Qiita</a>
<a href="https://swr.vercel.app/docs/suspense">Suspense – SWR</a>
<a href="https://react-query.tanstack.com/guides/suspense">Suspense | React Query | TanStack</a>
<a href="https://2021.stateofcss.com/en-US/">The State of CSS 2021</a>
<a href="https://css-tricks.com/snippets/css/complete-guide-grid/#fluid-columns-snippet">A Complete Guide to Grid - CSS-Tricks</a>
<a href="https://www.webprofessional.jp/difference-between-auto-fill-and-auto-fit/">これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る – WPJ</a>
<a href="https://logmi.jp/tech/articles/325589">レイアウトシフトの問題は解消、ユーザーの誤タップも減る　LINE NEWSが独自のSkeletonScreen実装した理由 - ログミーTech</a>

重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
Open Props: sub-atomic styles
Adam Argyle / Twitter
Thinking on ways to solve TOASTS - YouTube
CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方 | コリス
Document.getAnimations() - Web API | MDN
<output>: 出力要素 - HTML: HyperText Markup Language | MDN
React Conf 2021
React 18 Keynote - YouTube
React without memo - YouTube
Streaming Server Rendering with Suspense - YouTube
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
Suspense – SWR
Suspense | React Query | TanStack
The State of CSS 2021
A Complete Guide to Grid - CSS-Tricks
これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る – WPJ
レイアウトシフトの問題は解消、ユーザーの誤タップも減る　LINE NEWSが独自のSkeletonScreen実装した理由 - ログミーTech

CSS of 2021, React Conf, Suspense for data fetching

<a
 href="https://developer.chrome.com/blog/new-in-chrome-96/">New in Chrome 96 - Chrome Developers</a>
 <a href="https://web.dev/bfcache/">Back/forward cache</a>
 
 <a
 href="https://developer.chrome.com/blog/new-in-devtools-96/">What&#x27;s New In DevTools (Chrome 96) - Chrome
 Developers</a>
 <a
 href="https://developer.chrome.com/blog/deps-rems-96/">Deprecations and removals in Chrome 96 - Chrome
 Developers</a>
 <a
 href="https://developer.chrome.com/blog/lighthouse-9-0/">What&#x27;s new in Lighthouse 9.0 - Chrome
 Developers</a>
 <a
 href="https://ameblo.jp/ca-seo/entry-12709719452.html">アメブロのAMPを終了します | CyberAgent SEO
 Information　　(サイバーエージェントSEO情報ブログ)</a>
 <a
 href="https://gigazine.net/news/20211119-twitter-amp-support-no-longer/">TwitterがGoogle主導で開発されたウェブサイトを高速化する形式「AMP」のサポートを打ち切ることが判明
 - GIGAZINE</a>
 <a href="https://deno.com/blog/slack">Slack Introduces New
 Platform With Help From Deno</a>
 <a
 href="https://api.slack.com/tutorials/tracks/read_write_to_hosted_database">How to store and retrieve data
 from Slack hosted tables | Slack</a>
 <a
 href="https://mobile.twitter.com/kani_b/status/1460703588502626311">カルビ生焼け王さんはTwitterを使っています 「うおーアツい、ついに Slack
 上で TypeScript のコードをホストできるようになる、Workflow に任意の Function を組み込める、DynamoDB っぽい DB を組み込みテーブルとして使えるようになる」 /
 Twitter</a>
 <a
 href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/">Announcing TypeScript 4.5 -
 TypeScript</a>
 <a
 href="https://github.com/microsoft/TypeScript/pull/45771/files#diff-dbfa0e7f632eca196a5ee0e08e00743c46c03799e2704206cfccc065bb6f9e3aR2886-R2904">https://github.com/microsoft/TypeScript/pull/45771/files#diff-dbfa0e7f632eca196a5ee0e08e00743c46c03799e2704206cfccc065bb6f9e3aR2886-R2904</a>
 
 <a
 href="https://twitter.com/clockmaker/status/1461503892693213193">池田 泰延 / ICSさんはTwitterを使っています
 「GoogleのライブラリBudouX。 改行位置の最適化のヒントが得られるツール。 HTMLで日本語の動的文字列に適用したら、良い感じの場所で改行されました。JavaScriptバンドルだと12KBで省容量です。」 /
 Twitter</a>
 <a href="https://www.apple.com/jp/iphone/">iPhone -
 Apple（日本）</a>
 <a href="https://remix.run/">Remix - Build Better
 Websites</a>
 <a
 href="https://www.youtube.com/watch?v=wsJaUjd1rUo">Introducing Remix v1 💿 - YouTube</a>

New in Chrome 96 - Chrome Developers
Back/forward cache
      
What's New In DevTools (Chrome 96) - Chrome
          Developers
Deprecations and removals in Chrome 96 - Chrome
          Developers
What's new in Lighthouse 9.0 - Chrome
          Developers
アメブロのAMPを終了します | CyberAgent SEO
          Information　　(サイバーエージェントSEO情報ブログ)
TwitterがGoogle主導で開発されたウェブサイトを高速化する形式「AMP」のサポートを打ち切ることが判明
          - GIGAZINE
Slack Introduces New
          Platform With Help From Deno
How to store and retrieve data
          from Slack hosted tables | Slack
カルビ生焼け王さんはTwitterを使っています 「うおーアツい、ついに Slack
          上で TypeScript のコードをホストできるようになる、Workflow に任意の Function を組み込める、DynamoDB っぽい DB を組み込みテーブルとして使えるようになる」 /
          Twitter
Announcing TypeScript 4.5 -
          TypeScript
https://github.com/microsoft/TypeScript/pull/45771/files#diff-dbfa0e7f632eca196a5ee0e08e00743c46c03799e2704206cfccc065bb6f9e3aR2886-R2904
      
池田 泰延 / ICSさんはTwitterを使っています
          「GoogleのライブラリBudouX。 改行位置の最適化のヒントが得られるツール。 HTMLで日本語の動的文字列に適用したら、良い感じの場所で改行されました。JavaScriptバンドルだと12KBで省容量です。」 /
          Twitter
iPhone -
          Apple（日本）
Remix - Build Better
          Websites
Introducing Remix v1 💿 - YouTube

Chrome96, Typescript4.5, AMPの終焉, wbrタグなど

<a href="https://my.diffend.io/npm/coa/2.0.2/2.0.3">NPM -
 coa - Versions diffs - 2.0.2 → 2.0.3 - Diffend - OSS supply chain security and management platform</a>
 <a
 href="https://www.bleepingcomputer.com/news/security/popular-coa-npm-library-hijacked-to-steal-user-passwords/">Popular
 &#x27;coa&#x27; NPM library hijacked to steal user passwords</a>
 <a href="https://web.dev/cds2021-updates/">Everything
 announced at Chrome Dev Summit 2021</a>
 <a
 href="https://developer.chrome.com/docs/devtools/recorder/">Record, replay and measure user flows - Chrome
 Developers</a>
 <a
 href="https://blog.autify.com/ja/why-id-should-not-be-used">なぜE2Eテストでidを使うべきではないのか | Autify Blog</a>
 <a
 href="https://www.publickey1.jp/blog/21/chrome_97devtoolswebpuppeteer.html">Chrome
 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも － Publickey</a>
 <a href="https://web.dev/responsiveness/">Feedback wanted:
 An experimental responsiveness metric</a>
 <a href="https://web.dev/smoothness/">Towards an animation
 smoothness metric</a>
 <a
 href="https://developer.chrome.com/blog/auto-dark-theme/">Auto Dark Theme - Chrome Developers</a>

NPM -
  coa - Versions diffs - 2.0.2 → 2.0.3 - Diffend - OSS supply chain security and management platform
Popular
          'coa' NPM library hijacked to steal user passwords
Everything
          announced at Chrome Dev Summit 2021
Record, replay and measure user flows - Chrome
          Developers
なぜE2Eテストでidを使うべきではないのか | Autify Blog
Chrome
          97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも － Publickey
Feedback wanted:
          An experimental responsiveness metric
Towards an animation
          smoothness metric
Auto Dark Theme - Chrome Developers

Chrome Dev Summit 2021, npm package "coa"

<a href="https://jamstack.org/survey/2021/#choices">Jamming
 into the Mainstream: Jamstack Community Survey 2021 | Jamstack</a>
 <a
 href="https://addyosmani.com/blog/browser-sync/">AddyOsmani.com - Browser-Sync: Sync Scrolls, Clicks, Forms
 And Edits In Multiple Browsers For Free</a>
 <a
 href="https://twitter.com/sonatard/status/1449928479365992451?s=20">そな太@GraphQLの記事を書くぞ / Twitter</a>
 <a
 href="https://www.infoq.com/news/2021/10/facebook-css-js-stylex/">Facebook CSS-in-JS Solution Stylex
 Introduced at React Finland 2021</a>
 <a href="https://stateofcss.com/">The State of CSS
 Survey</a>
 <a
 href="https://twitter.com/dan_abramov/status/1452324924421550080">Dan / Twitter</a>
 <a
 href="https://overreacted.io/ja/things-i-dont-know-as-of-2018/">2018年の段階で私が知らないこと — Overreacted</a>
 <a href="https://www.youtube.com/watch?v=nh3F21Kn-sk">LIVE:
 React State Animations | @keyframers 4.10 - YouTube</a>
 <a
 href="https://developer.chrome.com/blog/new-in-chrome-95/">New in Chrome 95 - Chrome Developers</a>
 <a
 href="https://developer.chrome.com/blog/new-in-devtools-95/">What&#x27;s New In DevTools (Chrome 95) - Chrome
 Developers</a>
 <a
 href="https://twitter.com/RReverser/status/1453007990689251333?s=20">Ingvar Stepanyan / Twitter</a>
 <a href="https://nextjs.org/blog/next-12">Blog - Next.js 12
 | Next.js</a>
 <a
 href="https://zenn.dev/catnose99/articles/0df722f3f025bb">Next.jsのmiddlewareはVercel以外でも問題なく使えるか</a>
 <a
 href="https://jwchang0206.medium.com/make-create-react-app-faster-with-rust-6c75ffa8fdfd">Make
 Create-React-App Faster with Rust | by Jeong Woo Chang | Medium</a>
 <a
 href="https://www.wantedly.com/companies/wantedly/post_articles/314403">RustでProtocol BuffersからGraphQL
 BFFを自動生成してみた知見 | Wantedly Engineer Blog</a>
 <a href="https://m3.material.io/">Material Design 3</a>
 <a
 href="https://twitter.com/jacobrossi/status/1453776349299019778?s=20">Jacob Rossi / Twitter</a>
 <a href="https://www.youtube.com/watch?v=0t0272OUD1o">Pixel
 6 Pro vs iPhone 13 Pro、どっちがいいの？ - YouTube</a>
 <a href="https://www.youtube.com/watch?v=pEBeyjfyFNw">#7
 佐野実生（コンセント）「『わかりやすく伝える』ための書体選び」【GAAD Japan 2020】 - YouTube</a>
 <a
 href="https://designpocket.jp/static/font/frutiger/default.aspx">Frutiger（フルティガー）は視認性の高い定番欧文フォント -
 デザインポケット</a>

Jamming
 into the Mainstream: Jamstack Community Survey 2021 | Jamstack
AddyOsmani.com - Browser-Sync: Sync Scrolls, Clicks, Forms
          And Edits In Multiple Browsers For Free
そな太@GraphQLの記事を書くぞ / Twitter
Facebook CSS-in-JS Solution Stylex
          Introduced at React Finland 2021
The State of CSS
          Survey
Dan / Twitter
2018年の段階で私が知らないこと — Overreacted
LIVE:
          React State Animations | @keyframers 4.10 - YouTube
New in Chrome 95 - Chrome Developers
What's New In DevTools (Chrome 95) - Chrome
          Developers
Ingvar Stepanyan / Twitter
Blog - Next.js 12
          | Next.js
Next.jsのmiddlewareはVercel以外でも問題なく使えるか
Make
          Create-React-App Faster with Rust | by Jeong Woo Chang | Medium
RustでProtocol BuffersからGraphQL
          BFFを自動生成してみた知見 | Wantedly Engineer Blog
Material Design 3
Jacob Rossi / Twitter
Pixel
          6 Pro vs iPhone 13 Pro、どっちがいいの？ - YouTube
#7
          佐野実生（コンセント）「『わかりやすく伝える』ための書体選び」【GAAD Japan 2020】 - YouTube
Frutiger（フルティガー）は視認性の高い定番欧文フォント -
          デザインポケット