Twitchでライブ配信中 -- https://www.twitch.tv/tue_ofuroでライブ視聴.

ふろんとえんどな話 #165

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

ふろんとえんどな話 #164

ふろんとえんどな話 #163

ふろんとえんどな話 #162

ふろんとえんどな話 #160

ふろんとえんどな話 #159

ふろんとえんどな話 #158

Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/tue_ofuro.

ふろんとえんどな話 #157

ふろんとえんどな話 #156

ふろんとえんどな話 #155

ふろんとえんどな話 #154

ふろんとえんどな話 #153

ふろんとえんどな話 #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

みなさん、こんにちは！今日の動画はデザイン、ツールチェーン、言語モデル、それにCSSについてのホットトピックスを ...

【デザイン初心者必見】Noto Sans JPの正しい使い方と知られざるアドバイス | ふろんとえんどな話 #133

State of Javascript 2023 Hey there Javascript enthusiasts! In this video, we're diving deep into the current state of Javascript in ...

JavaScriptの最新動向2023: React 19とSuspenseの3幕劇解説 ふろんとえんどな話 #132

こんにちは、皆さん！今回の新しいビデオでは、Web周辺技術の最新情報と、素晴らしいチュートリアルをいくつか紹介します！

HHKB Studio紹介＆Tailwind CSSでのデザインシステム構築！さらにiOS18カスタム絵文字生成AIとCSSフォントメトリクスについても解説 ふろんとえんどな話 #130

まずはGodot Engineについてです。Godotはフリーかつオープンソースの2Dと3Dゲームエンジンです。技術仕様や使い方 ...

ゲーム開発からMySQLのUUID問題まで！技術トレンドと解説2024 ふろんとえんどな話 #129

初めに、datalist要素について深掘りします。これがどのように動作するのか、なぜそれが重要なのかを解説します。

Web開発者のための全て！Reactでのアクセシブルなコンボボックス実装から、Auth0方式のSPA認証、CSSのlengthとoverflow-blockをピックアップ ふろんとえんどな話 #128

こんにちは！今回のビデオでは5つの異なるウェブ開発に関するトピックについて解説していきます。 まず最初に「Defensive ...

効果的なDefensive CSSの書き方とSPA認証トークンの最適解！TOASTSを解決するための戦略とWeb開発の実用テクニック | ふろんとえんどな話 #127

みんな！こんにちは、どうもありがとう、今日の動画でカバーする主要な記事を一緒にチェックする時間です！   まず、「How ...

CSSセンタリングから格子状レイアウトまで: HTMLコーディング入門 | Shopifyの新機能, Rive使い方, ESLint v9.0.0の詳細解説 | ふろんとえんどな話 #126

Hey guys! 今回の動画では、ウェブデザインの中でも特に重要な「リンクの入れ子」について考察します！   そして、なんと！

Subgridを使った最適なリンクの入れ子の作り方 | ふろんとえんどな話 #125

Hey everyone! 今回の動画ではいくつかの興味深い記事とその内容をわかりやすく解説していきます！ まず、Million.jsに関する ...

TC39会議の新情報から手書きイラストでサイトを作成する方法まで！最新フロントエンド技術とAppleのPWAトピックを解析する  | ふろんとえんどな話 #123

こんにちは、皆さん！今回のビデオでは、テクノロジーやウェブ開発の世界から様々なトピックを深掘りします。 まずは、React ...

Reactコンポーネントの最強ガイド: 新機能RSD詳細解説と最新のSPA開発メソッドを探る！ | ふろんとえんどな話 #122

ふろんとえんどな話 #121

【新動画アップしました！】 みんな、HTMXについて知ってる？ニューカマーのHTMXについて掘り下げてみたよ～！背後に ...

HTMLとReactの新境地！htmxとuse RFCの深掘り解説！+ iOS 17.4ベータ版のPWA更新情報

ふろんとえんどな話 #119

ふろんとえんどな話 #118

ふろんとえんどな話 #115

<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

ふろんとえんどな話 #114

ふろんとえんどな話 #113

<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（フルティガー）は視認性の高い定番欧文フォント -
          デザインポケット

Nextjs 12, Connect 2021, Jamstack Survey, Material You, Fontのはなし

<a
 href="https://jp.techcrunch.com/2021/03/16/apple-m-1-mac-asahi-linux-project/">Appleシリコン「M1」MacでLinux直接起動を目指す「Asahi
 Linux」、独自ブートローダーm1n1開発 | TechCrunch Japan</a>
 <a
 href="https://twitter.com/nuxt_js/status/1447927145922273289?s=20">NuxtJS / Twitter</a>
 <a
 href="https://twitter.com/RReverser/status/1448236041958273027?s=20">Ingvar Stepanyan / Twitter</a>
 <a
 href="https://qiita.com/suin/items/57cfc0ec9bb1a6995aa5">TypeScriptでNominal Typingを実現する4つの方法 - Qiita</a>
 <a
 href="https://speakerdeck.com/numeroanddev/changes-in-material3-material-you">Material3(Material You) の変更点 /
 Changes in Material3(Material You) - Speaker Deck</a>
 <a
 href="https://twitter.com/usagimaruma/status/1446885345467920386?s=20">usagimaru ⌘ / Twitter</a>

Appleシリコン「M1」MacでLinux直接起動を目指す「Asahi
          Linux」、独自ブートローダーm1n1開発 | TechCrunch Japan
NuxtJS / Twitter
Ingvar Stepanyan / Twitter
TypeScriptでNominal Typingを実現する4つの方法 - Qiita
Material3(Material You) の変更点 /
          Changes in Material3(Material You) - Speaker Deck
usagimaru ⌘ / Twitter

Nuxt.js 3 beta, Nominal Typing vs Structual Typing vs Duck Typing, Material You

<a
 href="https://speakerdeck.com/nkzn/react-native-for-webfalsekoremadekaradu-mijie-kureact-guifalsekorekara">React
 Native for Webのこれまでから読み解くReact GUIのこれから - Speaker Deck</a>
 <a
 href="https://twitter.com/clockmaker/status/1444211095854403586">池田 泰延 / ICSさん / Twitter</a>
 <a
 href="https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type">list-style-type - CSS: カスケーディングスタイルシート |
 MDN</a>
 <a
 href="https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg/edit">How Blink works -
 Google ドキュメント</a>
 <a
 href="https://nhiroki.jp/2021/09/04/talk-browser-architecture">JavaScript 処理系 V8 とレンダリングエンジン Blink
 のアーキテクチャ</a>
 <a
 href="https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/parser/CSSParser.cpp">Source/core/css/parser/CSSParser.cpp
 - chromium/blink - Git at Google</a>
 <a
 href="https://twitter.com/tonkotsuboy_com/status/1445209571128057858">Takeshi Kano 鹿野 壮さん / Twitter</a>
 <a
 href="https://zenn.dev/kounoike/articles/google-meet-bg-features">なぜGoogle Meetの背景ぼかしが最強なのか（一般公開版）</a>
 <a
 href="https://github.com/royshil/obs-backgroundremoval">royshil/obs-backgroundremoval: An OBS plugin for
 removing background in portrait images (video), making it easy to replace the background when screen
 recording.</a>
 <a
 href="https://dev.classmethod.jp/articles/rtmp-2021-and-beyond/">RTMPの2021年以降の話 ~ Adobe Flash以外の動画配信での使われ方 |
 DevelopersIO</a>
 <a href="https://aws.amazon.com/jp/elemental-live/">AWS
 Elemental Live</a>

React
          Native for Webのこれまでから読み解くReact GUIのこれから - Speaker Deck
池田 泰延 / ICSさん / Twitter
list-style-type - CSS: カスケーディングスタイルシート |
          MDN
How Blink works -
          Google ドキュメント
JavaScript 処理系 V8 とレンダリングエンジン Blink
          のアーキテクチャ
Source/core/css/parser/CSSParser.cpp
          - chromium/blink - Git at Google
Takeshi Kano 鹿野 壮さん / Twitter
なぜGoogle Meetの背景ぼかしが最強なのか（一般公開版）
royshil/obs-backgroundremoval: An OBS plugin for
          removing background in portrait images (video), making it easy to replace the background when screen
          recording.
RTMPの2021年以降の話 ~ Adobe Flash以外の動画配信での使われ方 |
          DevelopersIO
AWS
          Elemental Live

Google Meetの背景ぼかし技術(wasm SIMD), ライブ配信プロトコル(RTMP, HLS, MPEG-DASH), BlinkとGecko, Typescript 4.5 Template Literal Type, CSS小ネタ(list-style-type)

<a href="https://mui.com/">MUI: The React component library
 you always wanted</a>
 <a
 href="https://zenn.dev/h_yoshikawa0724/articles/2021-09-26-material-ui-v5">こんにちはMUI！ 新しくなったMaterial UI v5</a>
 
 <a
 href="https://tech.techtouch.jp/entry/material-ui-v5_9">Material-UI v5を先取りする - Techtouch Developers Blog</a>
 
 <a href="https://mui.com/pricing/">Pricing - MUI</a>
 <a
 href="https://www.npmjs.com/package/@mui/x-data-grid">@mui/x-data-grid - npm</a>
 <a
 href="https://www.npmjs.com/package/@mui/x-data-grid-pro">@mui/x-data-grid-pro - npm</a>
 <a
 href="https://www.youtube.com/watch?v=7EKEav7Io5Y">Avoiding layout shift by putting the CSS in charge - HTTP
 203 - YouTube</a>
 <a
 href="https://coliss.com/articles/build-websites/operation/css/designing-beautiful-shadows-in-css.html">UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
 | コリス</a>

MUI: The React component library
    you always wanted
こんにちはMUI！ 新しくなったMaterial UI v5
      
Material-UI v5を先取りする - Techtouch Developers Blog
      
Pricing - MUI
@mui/x-data-grid - npm
@mui/x-data-grid-pro - npm
Avoiding layout shift by putting the CSS in charge - HTTP
          203 - YouTube
UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
          | コリス

Material UI v5, 有償版 MUI X Pro, GridのLayoutShift

<a
 href="https://www.datascientist.or.jp/dskentei/">データサイエンティスト検定™ リテラシーレベル | 一般社団法人 データサイエンティスト協会</a>
 <a
 href="https://internet.watch.impress.co.jp/docs/event/1221049.html">世界100万kmの海底ケーブル、地理と速度と冗長性を考える
 「その経路、本当に冗長ですか？」【IIJ Technical DAY 2019】 - INTERNET Watch</a>
 <a href="https://ja.wikipedia.org/wiki/Mumble">Mumble -
 Wikipedia</a>
 <a href="https://www.apple.com/jp/iphone-13-pro/">iPhone 13
 ProとiPhone 13 Pro Max - Apple（日本）</a>
 <a
 href="https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g">A11ycasts with Rob Dodson -
 YouTube</a>
 <div class="indented">
 <a href="https://www.youtube.com/watch?v=CZGqnp06DnI">Just
 use button -- A11ycasts #05 - YouTube</a>
 <a
 href="https://www.youtube.com/watch?v=8dCUzOiMRy4&amp;list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&amp;index=14">The
 art of labeling -- A11ycasts #12 - YouTube</a>
 <a
 href="https://www.youtube.com/watch?v=g9Qff0b-lHk&amp;list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&amp;index=14">Intro
 to ARIA -- A11ycasts #13 - YouTube</a>
 </div>
 
 <a
 href="https://www.pi-pe.co.jp/solution/article/mail/226/">改正個人情報保護法で認められたオプトアウトに必要なこととは？ |
 ITコラムdeパイプドビッツ｜パイプドビッツ公式HP</a>
 <div class="indented">
 <a
 href="https://www.namura-law.jp/legalessays/%E7%B1%B3%E5%9B%BD%E3%81%A7%E3%82%82%E5%A7%8B%E3%81%BE%E3%81%A3%E3%81%9F%E5%80%8B%E4%BA%BA%E6%83%85%E5%A0%B1%E4%BF%9D%E8%AD%B7%EF%BD%9E%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2cc/">米国でも始まった個人情報保護～カリフォルニアCCPAの概要～(25.Mar.20)
 | 大阪 弁護士法人 苗村 法律事務所</a>
 <a href="https://gori.me/ios/ios15/137552">iOS
 15「プライベートリレー」で利用不可になる、キャリア各社のサービスまとめ | ゴリミー</a>
 </div>
 
 <a
 href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance">Web
 Accessibility: Understanding Colors and Luminance - Accessibility | MDN</a>
 <a
 href="https://github.com/Myndex/SAPC-APCA/blob/master/WhyAPCA.md">SAPC-APCA/WhyAPCA.md at master ·
 Myndex/SAPC-APCA</a>
 <a href="https://www.myndex.com/APCA/fullmatrix">APCA-G
 4g</a>
 <a
 href="https://webaim.org/resources/contrastchecker/">WebAIM: Contrast Checker</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/clockmaker/status/1440106925622915081">池田 泰延 / ICSさん Twitter</a>
 <a
 href="https://twitter.com/tonkotsuboy_com/status/1440137120186699780">Takeshi Kano 鹿野 壮さん Twitter</a>
 <a
 href="https://twitter.com/malonso/status/1439999537133678593">Marcos Alonsoさん Twitter</a>

データサイエンティスト検定™ リテラシーレベル | 一般社団法人 データサイエンティスト協会
世界100万kmの海底ケーブル、地理と速度と冗長性を考える
          「その経路、本当に冗長ですか？」【IIJ Technical DAY 2019】 - INTERNET Watch
Mumble -
          Wikipedia
iPhone 13
          ProとiPhone 13 Pro Max - Apple（日本）
A11ycasts with Rob Dodson -
          YouTube
      
Just
            use button -- A11ycasts #05 - YouTube
The
            art of labeling -- A11ycasts #12 - YouTube
Intro
            to ARIA -- A11ycasts #13 - YouTube
改正個人情報保護法で認められたオプトアウトに必要なこととは？ |
          ITコラムdeパイプドビッツ｜パイプドビッツ公式HP
      
米国でも始まった個人情報保護～カリフォルニアCCPAの概要～(25.Mar.20)
            | 大阪 弁護士法人 苗村 法律事務所
iOS
            15「プライベートリレー」で利用不可になる、キャリア各社のサービスまとめ | ゴリミー
Web
          Accessibility: Understanding Colors and Luminance - Accessibility | MDN
SAPC-APCA/WhyAPCA.md at master ·
          Myndex/SAPC-APCA
APCA-G
          4g
WebAIM: Contrast Checker
What's New In DevTools (Chrome 95) - Chrome
          Developers
池田 泰延 / ICSさん Twitter
Takeshi Kano 鹿野 壮さん Twitter
Marcos Alonsoさん Twitter

音声遅延, 海底ケーブル JUPITER, iPhone 13, Safari 15, iOS 15のプライベートリレー, APCA(色のコントラスト)

<a
 href="http://www.gamecast-blog.com/archives/65985335.html">EpicとAppleの『フォートナイト』裁判が決着。Apple独自決済の強制などが反競争的と認められ、該当規約の削除が言い渡される</a>
 
 <a
 href="https://ja.wikipedia.org/wiki/Epic_Games対Apple訴訟">Epic Games対Apple訴訟 - Wikipedia</a>
 <a
 href="https://ja.reactjs.org/docs/code-splitting.html">コード分割 – React</a>
 <a href="https://webpack.js.org/guides/lazy-loading/">Lazy
 Loading | webpack</a>
 <a href="https://webpack.js.org/guides/code-splitting/">Code
 Splitting | webpack</a>
 <a href="https://rome.tools/">Rome Toolchain</a>
 <a
 href="https://twitter.com/argyleink/status/1438893921514319874?s=09">Adam ArgyleさんはTwitterを使っています 「how are you
 tree shaking / dead code eliminating unused design tokens / custom properties?」 / Twitter</a>
 <a
 href="https://github.com/csstools/postcss-preset-env">csstools/postcss-preset-env: Convert modern CSS into
 something browsers understand</a>
 <a
 href="https://japan.cnet.com/article/35176578/">グーグル、新デザイン「Material You」を「Gmail」などのアプリに適用開始 - CNET Japan</a>
 
 <a
 href="https://developer.chrome.com/ja/blog/new-in-devtools-94/">DevTools の新機能 (Chrome 94) - Chrome
 Developers</a>
 <a
 href="https://jetbrains.github.io/ring-ui/master/?path=/story/components-date-picker--single-date">Components
 / Date Picker - single date ⋅ Storybook</a>
 <a
 href="https://developers.cyberagent.co.jp/blog/archives/31641/">Amebaのデザインシステム「Spindle」の全貌公開 | CyberAgent
 Developers Blog</a>
 <a
 href="https://www.hinatazaka46.com/s/official/?ima=0000">日向坂46公式サイト</a>
 <a
 href="https://material.io/design/motion/speed.html#easing">Speed - Material Design</a>

EpicとAppleの『フォートナイト』裁判が決着。Apple独自決済の強制などが反競争的と認められ、該当規約の削除が言い渡される
      
Epic Games対Apple訴訟 - Wikipedia
コード分割 – React
Lazy
          Loading | webpack
Code
          Splitting | webpack
Rome Toolchain
Adam ArgyleさんはTwitterを使っています 「how are you
          tree shaking / dead code eliminating unused design tokens / custom properties?」 / Twitter
csstools/postcss-preset-env: Convert modern CSS into
          something browsers understand
グーグル、新デザイン「Material You」を「Gmail」などのアプリに適用開始 - CNET Japan
      
DevTools の新機能 (Chrome 94) - Chrome
          Developers
Components
          / Date Picker - single date ⋅ Storybook
Amebaのデザインシステム「Spindle」の全貌公開 | CyberAgent
          Developers Blog
日向坂46公式サイト
Speed - Material Design

Epic&Apple, React Code Splitting, Lazy loading, Material You, DevTools Chrome 94

<a href="https://logmi.jp/tech/articles/324800">React +
 TypeScriptで固めつつ、新しいことも取り入れる　LINE証券のフロントエンドエンジニアが大切にしていること - ログミーTech</a>
 <a
 href="https://gigazine.net/news/20210909-android-12-beta-5-release/">Android
 12の最終ベータ版がリリースされる、正式版のリリースは「数週間以内」 - GIGAZINE</a>
 <a
 href="https://gigazine.net/news/20210817-android-face-gesture-controls-camera-switches/">Android
 12のベータ版に「顔でスマホを操作する新機能」が登場 - GIGAZINE</a>
 <a
 href="https://jp.store.asus.com/store/asusjp/html/pbPage.rogphone/">ROG Phone 5 新登場
 満たされぬ、挑戦者たちへ。究極のゲーミングスマートフォン｜ASUS Store</a>
 <a
 href="https://css-tricks.com/eyedropper-api-dropped/">EyeDropper API Dropped | CSS-Tricks</a>
 <a
 href="https://css-tricks.com/fun-times-styling-checkbox-states/">Fun Times Styling Checkbox States |
 CSS-Tricks</a>
 <a
 href="https://vercel.com/home?utm_source=next-site&amp;utm_medium=banner&amp;utm_campaign=next-website">Develop.
 Preview. Ship. For the best frontend teams – Vercel</a>
 <a href="https://nextjs.org/conf">Next.js Conf</a>

React +
    TypeScriptで固めつつ、新しいことも取り入れる　LINE証券のフロントエンドエンジニアが大切にしていること - ログミーTech
Android
          12の最終ベータ版がリリースされる、正式版のリリースは「数週間以内」 - GIGAZINE
Android
          12のベータ版に「顔でスマホを操作する新機能」が登場 - GIGAZINE
ROG Phone 5 新登場
          満たされぬ、挑戦者たちへ。究極のゲーミングスマートフォン｜ASUS Store
EyeDropper API Dropped | CSS-Tricks
Fun Times Styling Checkbox States |
          CSS-Tricks
Develop.
          Preview. Ship. For the best frontend teams – Vercel
Next.js Conf

Webviewアプリの話、Android 12, iOS15, iPhone13 RogPhone5, Next.js Conf

<a
 href="https://twitter.com/argyleink/status/1431613538196279296?s=19">Adam Argyle / Twitter</a>
 <a
 href="https://blog.gaji.jp/2021/06/17/7566/">知ってると役立つかもしれない min-height の話 ++ Gaji-Laboブログ</a>
 <a
 href="https://css-tricks.com/what-happens-when-border-radii-overlap/">What Happens When Border Radii Overlap?
 | CSS-Tricks</a>
 <a href="https://www.youtube.com/watch?v=R5RUVO_g2NI">New in
 Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more! - YouTube</a>
 <a
 href="https://developer.chrome.com/blog/new-in-chrome-93/">New in Chrome 93 - Chrome Developers</a>
 <a
 href="https://blog.studio.design/ja/posts/20210901">2021/9/1に発生したSTUDIOサービス全体における障害の経緯について | STUDIO Blog</a>
 
 <a
 href="https://www.itmedia.co.jp/news/articles/2109/01/news174.html">デジタル庁発足　公式サイトにITエンジニアから反応続々「シンプル」「重い」「ロゴが丁寧」「苦労が見える」（1/2
 ページ） - ITmedia NEWS</a>
 <a
 href="https://twitter.com/YAMITZKY/status/1325754377521360897?s=20">小笠原みつき / JX通信社 / 69.6㌕ / Twitter</a>
 <a
 href="https://dev.classmethod.jp/articles/play-with-shared-cache-response-header-s-maxage/">CDNキャッシュ向けレスポンスヘッダーCache-Control:s-maxage
 を触ってみた | DevelopersIO</a>
 <a
 href="https://zenn.dev/catnose99/articles/0b601c1f62019b">stale-while-revalidate対応のCDNでISRのような挙動を実現する</a>
 <a
 href="https://slides.hiroppy.me/cache-strategy-on-mercari-shops/#slide-7">メルカリShopsのキャッシュ戦略</a>
 <a
 href="https://www.notion.so/blog/migrating-notion-marketing-to-next-js">Migrating Notion&#x27;s marketing site
 to Next.js</a>
 <a
 href="https://nextjs.org/docs/advanced-features/dynamic-import">Advanced Features: Dynamic Import |
 Next.js</a>
 <a
 href="https://twitter.com/argyleink/status/1433828689192493058">Adam Argyle / Twitter</a>
 <a
 href="https://www.slideshare.net/imaifactory/ss-48388661">オンラインゲームの仕組みと工夫</a>
 <a
 href="https://www.4gamer.net/games/105/G010549/20100905002/">[CEDEC
 2010]ネットゲームの裏で何が起こっているのか。ネットワークエンジニアから見た，ゲームデザインの大原則</a>
 <a
 href="https://www.ea.com/ja-jp/games/apex-legends/news/servers-netcode-developer-deep-dive">「エーペックス」の仕組み:開発者によるサーバーとネットコードの解説</a>
 
 <a
 href="https://mixi-developers.mixi.co.jp/connecting-smpte2110-to-webrtc-without-sdigateways-e82f6b8d04e0">SMPTE2110とwebrtcのSDIゲートウエイを使わない連携
 | mixi developers</a>
 <a
 href="https://businessnetwork.jp/Detail/tabid/65/artid/8402/Default.aspx">低遅延伝送に挑んだミクシィ、IP映像伝送の最新規格SMPTE
 2110でインフラ構築 | ビジネスネットワーク.jp</a>
 <a
 href="https://www.netone.co.jp/knowledge-center/blog-column/knowledge_takumi_223/">Media over IPのPTP技術 |
 ネットワンシステムズ

Adam Argyle / Twitter
知ってると役立つかもしれない min-height の話 ++ Gaji-Laboブログ
What Happens When Border Radii Overlap?
          | CSS-Tricks
New in
          Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more! - YouTube
New in Chrome 93 - Chrome Developers
2021/9/1に発生したSTUDIOサービス全体における障害の経緯について | STUDIO Blog
      
デジタル庁発足　公式サイトにITエンジニアから反応続々「シンプル」「重い」「ロゴが丁寧」「苦労が見える」（1/2
          ページ） - ITmedia NEWS
小笠原みつき / JX通信社 / 69.6㌕ / Twitter
CDNキャッシュ向けレスポンスヘッダーCache-Control:s-maxage
          を触ってみた | DevelopersIO
stale-while-revalidate対応のCDNでISRのような挙動を実現する
メルカリShopsのキャッシュ戦略
Migrating Notion's marketing site
          to Next.js
Advanced Features: Dynamic Import |
          Next.js
Adam Argyle / Twitter
オンラインゲームの仕組みと工夫
[CEDEC
          2010]ネットゲームの裏で何が起こっているのか。ネットワークエンジニアから見た，ゲームデザインの大原則
「エーペックス」の仕組み:開発者によるサーバーとネットコードの解説
      
SMPTE2110とwebrtcのSDIゲートウエイを使わない連携
          | mixi developers
低遅延伝送に挑んだミクシィ、IP映像伝送の最新規格SMPTE
          2110でインフラ構築 | ビジネスネットワーク.jp
Media over IPのPTP技術 |
          ネットワンシステムズ