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

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

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

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

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

Safari 17.2, CSS 2023, Tailwind v3.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome 108, Viewport on Android, SVG sprite

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

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

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

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

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

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

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

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

Critical CSS, CommonJS vs ESM, Design

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

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

:has(), Infinite Scrolling, Topics API

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

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

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

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

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

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

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

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

Variable Units, State of CSS 2022, bfcache, nanoid

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

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

Centering CSS, DIDs. WAI-ARIA, Font Subsetting

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

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

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

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

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

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

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

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

HTTP Status Code 103, Chrome 103, ES2022

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

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

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

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

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

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

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

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

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

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

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

State of CSS 2022 (interop 2022)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

requestAnimationFrameとrequestIdleCallback, Typescript 4.6 beta

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

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

HTML Living Standard, Origin Trials, 2022年のCSS

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

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

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

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

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

CSS of 2021, React Conf, Suspense for data fetching

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

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

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

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

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

Chrome Dev Summit 2021, npm package "coa"

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

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

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技術 |
          ネットワンシステムズ

Chrome93, Nextjs ISRを Vercel以外でやる方法, s-maxageと max-ageの違い, オンラインゲームのラグについて

<a
 href="https://engineering.mercari.com/blog/entry/20210823-a57631d32e/">メルカリShops のフロントエンド | メルカリエンジニアリング</a>
 
 <a
 href="https://engineering.mercari.com/blog/entry/20210823-8128e0d987/">新しいメルカリDesign System Web |
 メルカリエンジニアリング</a>
 <a
 href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement">HTMLElement - Web API | MDN</a>
 <a
 href="https://developer.mozilla.org/en-US/docs/Web/API/Microdata_DOM_API#htmlpropertiescollection">Microdata
 DOM API - Web APIs | MDN</a>
 <a
 href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/">Announcing TypeScript 4.4 |
 TypeScript</a>
 <a
 href="https://techracho.bpsinc.jp/hachi8833/2017_11_28/48435">Unicodeで絶対知っておくべきセキュリティ5つの注意（翻訳）｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社</a>
 
 <a
 href="https://www.jiji.com/sp/article?k=2021082700540&amp;g=int">アップル、他社決済も容認　米アプリ開発者と合意：時事ドットコム</a>
 <a href="https://www.youtube.com/watch?v=1VaPAnUGRz8">Chrome
 93 - What’s New in DevTools - YouTube</a>
 <a
 href="https://caniuse.com/?search=CSS%20Container%20Queries">&quot;CSS Container Queries&quot; | Can I use...
 Support tables for HTML5, CSS3, etc</a>

メルカリShops のフロントエンド | メルカリエンジニアリング
      
新しいメルカリDesign System Web |
          メルカリエンジニアリング
HTMLElement - Web API | MDN
Microdata
          DOM API - Web APIs | MDN
Announcing TypeScript 4.4 |
          TypeScript
Unicodeで絶対知っておくべきセキュリティ5つの注意（翻訳）｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社
      
アップル、他社決済も容認　米アプリ開発者と合意：時事ドットコム
Chrome
          93 - What’s New in DevTools - YouTube
"CSS Container Queries" | Can I use...
          Support tables for HTML5, CSS3, etc

WebComponentsとReactの相性, Typescript 4.4, Chrome 93, CSS Container Queries

<a href="https://zenn.dev/qnighy/articles/6ff23c47018380">CORSの仕様はなぜ複雑なのか</a>
<a href="http://blog.a-way-out.net/blog/2015/03/23/stateless-csrf-protection/">独自ヘッダをチェックするだけのステートレスなCSRF対策は有効なのか？ — A Day in Serenity (Reloaded) — PHP, CodeIgniter, FuelPHP, Linux or something</a>
<a href="https://web.dev/2021-scroll-survey-report/">2021 Scroll Survey Report</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action">touch-action - CSS: Cascading Style Sheets | MDN</a>
<a href="https://labs.cybozu.co.jp/blog/akky/2021/08/empty-npm-package-downloaded-sub-one-million-times/">‘-‘ という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ – 秋元@サイボウズラボ・プログラマー・ブログ</a>
<a href="https://zenn.dev/sosukesuzuki/articles/d21d69a5914a03">JavaScript で文字数を length で数えるのはやめようの実例</a>
<a href="https://engineering.mercari.com/blog/entry/20210810-mercari-shops-tech-stack/">メルカリShops の技術スタックと、その選定理由 | メルカリエンジニアリング</a>
<a href="https://twitter.com/github/status/1425505817827151872">GitHub 「New shortcut: Press . on any GitHub repo.」 / Twitter</a>
<a href="https://distrowatch.com/dwres.php?resource=popularity">DistroWatch.com: Put the fun back into computing. Use Linux, BSD.</a>
<a href="https://forest.watch.impress.co.jp/docs/news/1345073.html">Windows 11のISOイメージファイルが配布開始 ～プレビュー版Build 22000.132 - 窓の杜</a>
<a href="https://twitter.com/argyleink/status/1425082503455334402?s=09">Adam Argyle 「Responsive vs Adaptive Design in #CSS with Media Queries」 / Twitter</a>
<a href="https://github.com/vercel/next.js/discussions/11209">getServerSideProps error: "Reason: </a><a href="https://github.com/vercel/next.js/discussions/11209"><code>undefined</code></a><a href="https://github.com/vercel/next.js/discussions/11209"> cannot be serialized as JSON. Please use </a><a href="https://github.com/vercel/next.js/discussions/11209"><code>null</code></a><a href="https://github.com/vercel/next.js/discussions/11209"> or omit this value all together." · Discussion #11209 · vercel/next.js</a>
<a href="https://twitter.com/vercel/status/1425503907019730956">Vercel 「Next.js 11.1」 / Twitter</a>
<a href="https://github.com/vercel/next.js/security/advisories/GHSA-vxf5-wxwp-m7g9">Open Redirect in Next.js versions below 11.1.0 · Advisory · vercel/next.js</a>
<a href="https://qiita.com/ryokkkke/items/1bd858a5d6f261a9342a">SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 - Qiita</a>
<a href="https://web.dev/accent-color/">CSS accent-color</a>
<a href="https://qiita.com/41semicolon/items/985bdd2f551d9392463c">JavaScript・再帰・トランポリン - Qiita</a>

CORSの仕様はなぜ複雑なのか
独自ヘッダをチェックするだけのステートレスなCSRF対策は有効なのか？ — A Day in Serenity (Reloaded) — PHP, CodeIgniter, FuelPHP, Linux or something
2021 Scroll Survey Report
touch-action - CSS: Cascading Style Sheets | MDN
‘-‘ という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ – 秋元@サイボウズラボ・プログラマー・ブログ
JavaScript で文字数を length で数えるのはやめようの実例
メルカリShops の技術スタックと、その選定理由 | メルカリエンジニアリング
GitHub 「New shortcut: Press . on any GitHub repo.」 / Twitter
DistroWatch.com: Put the fun back into computing. Use Linux, BSD.
Windows 11のISOイメージファイルが配布開始 ～プレビュー版Build 22000.132 - 窓の杜
Adam Argyle 「Responsive vs Adaptive Design in #CSS with Media Queries」 / Twitter
getServerSideProps error: "Reason: undefined cannot be serialized as JSON. Please use null or omit this value all together." · Discussion #11209 · vercel/next.js
Vercel 「Next.js 11.1」 / Twitter
Open Redirect in Next.js versions below 11.1.0 · Advisory · vercel/next.js
SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 - Qiita
CSS accent-color
JavaScript・再帰・トランポリン - Qiita

CORS, 2021 Scroll Survey Report, VSCode Server, Next.js 11.1, getServerSideProps, JSの末尾再帰最適

<a href="https://www.npmjs.com/package/react-gui">react-gui - npm</a>
<a href="https://www.nngroup.com/articles/ten-usability-heuristics/">10 Usability Heuristics for User Interface Design</a>
<a href="https://gyo.gitlab.io/ui-alm/10-usability-heuristics/">10 Usability Heuristics for User Interface Design gyo.gitlab.io</a>
<a href="https://zenn.dev/irico/articles/d0b2d8160d8e63">ReactのCSSの選択肢を比較してみた</a>
<a href="https://airbnb.io/javascript/react/">Airbnb React/JSX Style Guide | Airbnb JavaScript Style Guide</a>
<a href="https://twitter.com/clockmaker/status/1417296577048109057">池田 泰延さん / Twitter</a>
<a href="https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/">TypeScript + React: Why I don't use React.FC</a>
<a href="https://www.publickey1.jp/blog/21/facebookaiblenderbot_20.html">Facebook、どんな話題にも対応できるAIチャットボット「BlenderBot 2.0」オープンソースで公開。会話しつつ裏でネット検索し最新情報を取得 － Publickey</a>
<a href="https://twitter.com/uhyo_/status/1417309040502214690">🈚️うひょ🤪✒📘さん / Twitter</a>
<a href="https://quipper.hatenablog.com/entry/2021/07/21/080000">「スタディサプリ」が React Native から卒業するまで、あるいは技術的負債への感謝と敬意 - Quipper Product Team Blog</a>
<a href="https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a">Sunsetting React Native. Due to a variety of technical and… | by Gabriel Peal | The Airbnb Tech Blog | Medium</a>
<a href="https://nextjs.org/docs/basic-features/layouts#per-page-layouts">Basic Features: Layouts | Next.js</a>
<a href="https://ja.reactjs.org/docs/forwarding-refs.html">ref のフォワーディング</a>
<a href="https://ja.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs">https://ja.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs</a>

react-gui - npm
10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design gyo.gitlab.io
ReactのCSSの選択肢を比較してみた
Airbnb React/JSX Style Guide | Airbnb JavaScript Style Guide
池田 泰延さん / Twitter
TypeScript + React: Why I don't use React.FC
Facebook、どんな話題にも対応できるAIチャットボット「BlenderBot 2.0」オープンソースで公開。会話しつつ裏でネット検索し最新情報を取得 － Publickey
🈚️うひょ🤪✒📘さん / Twitter
「スタディサプリ」が React Native から卒業するまで、あるいは技術的負債への感謝と敬意 - Quipper Product Team Blog
Sunsetting React Native. Due to a variety of technical and… | by Gabriel Peal | The Airbnb Tech Blog | Medium
Basic Features: Layouts | Next.js
ref のフォワーディング
https://ja.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs

react-gui, React.FC vs Function, ReactのCSSどれがいいのか

55:50 本編スタート
 
<a href="https://twitter.com/youyuxi/status/1411824059780849675?s=20">Evan You / Twitter</a>
<a href="https://twitter.com/kugehajime/status/1412562639847247875?s=20">久下玄 / Twitter</a>
<a href="https://twitter.com/pkell7/status/1411058236321681414">Patrick Kelly / Twitter</a>
<a href="https://nametake.github.io/posts/2020/08/10/css-svg-inline-descender/">SVGが特定のサイズ以下でずれる現象の原因と解決策 · nametake.info</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://gyo.gitlab.io/ui-alm/line-height-vertical-align/">line-height と vertical-align</a>
<a href="https://css-tricks.com/the-dilemma-of-naming-font-size-variables/">The Dilemma of Naming Font Size Variables | CSS-Tricks</a>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/font">font - CSS: カスケーディングスタイルシート | MDN</a>
<a href="https://productzine.jp/article/detail/553?p=2">「早くリリースして、早く改善しよう」の落とし穴―― 開発畑のプロダクトマネージャーの失敗から学べ (2/4)：ProductZine（プロダクトジン）</a>
<a href="https://www.amazon.co.jp/dp/B085W4YSZJ">データマネジメントが30分でわかる本 | ゆずたそ, はせりょ, ゆずたそ | 経営情報システム | Kindleストア | Amazon</a>

55:50 本編スタート

Evan You / Twitter
久下玄 / Twitter
Patrick Kelly / Twitter
SVGが特定のサイズ以下でずれる現象の原因と解決策 · nametake.info
Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
line-height と vertical-align
The Dilemma of Naming Font Size Variables | CSS-Tricks
font - CSS: カスケーディングスタイルシート | MDN
「早くリリースして、早く改善しよう」の落とし穴―― 開発畑のプロダクトマネージャーの失敗から学べ (2/4)：ProductZine（プロダクトジン）
データマネジメントが30分でわかる本 | ゆずたそ, はせりょ, ゆずたそ | 経営情報システム | Kindleストア | Amazon

line-height と vertical-align の話（em-square）

<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-beta/">Announcing TypeScript 4.4 Beta | TypeScript</a> <a href="https://google.github.io/styleguide/tsguide.html#null-vs-undefined">Google TypeScript Style Guide</a>
<a href="https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor">VSCode React Refactor</a>
<a href="https://copilot.github.com/">GitHub Copilot · Your AI pair programmer</a>
<a href="https://blog.jxck.io/entries/2021-06-26/amp-tone-down.html">本サイトの AMP 提供の停止とここまでの振り返り</a>
<a href="https://japan.googleblog.com/2021/06/cookie.html">Google Japan Blog: サードパーティ Cookie 廃止に関するタイムラインの変更について</a>
<a href="https://fontplus.jp/usage/services/chws-vchw">全角約物が連続したときのアキを調整する | Webフォント・サービス FONTPLUS</a>
<a href="https://letter-spacing.mimiguri.co.jp/">レタースペーシング タイポグラフィにおける文字間調整の考え方</a>
<a href="https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5">A Deep Dive into Airbnb’s Server-Driven UI System | by Ryan Brooks | The Airbnb Tech Blog | Jun, 2021 | Medium</a>
<a href="https://github.com/topics/server-driven-ui">server-driven-ui · GitHub Topics</a>
<a href="https://webkit.org/blog/11736/release-notes-for-safari-technology-preview-127/">Release Notes for Safari Technology Preview 127 | WebKit</a>
<a href="https://triple-underscore.github.io/css-color-ja.html#predefined">CSS Color Module Level 4 （日本語訳）</a>
<a href="https://drafts.csswg.org/css-color-5/#colorcontrast">CSS Color Module Level 5</a>
<a href="https://yogalayout.com/">Yoga Layout | A cross-platform layout engine</a>
<a href="https://github.com/ZupIT/beagle-web-react/blob/master/packages/beagle-react/src/render/component.tsx">beagle-web-react/component.tsx at master · ZupIT/beagle-web-react</a>

Announcing TypeScript 4.4 Beta | TypeScript Google TypeScript Style Guide
VSCode React Refactor
GitHub Copilot · Your AI pair programmer
本サイトの AMP 提供の停止とここまでの振り返り
Google Japan Blog: サードパーティ Cookie 廃止に関するタイムラインの変更について
全角約物が連続したときのアキを調整する | Webフォント・サービス FONTPLUS
レタースペーシング タイポグラフィにおける文字間調整の考え方
A Deep Dive into Airbnb’s Server-Driven UI System | by Ryan Brooks | The Airbnb Tech Blog | Jun, 2021 | Medium
server-driven-ui · GitHub Topics
Release Notes for Safari Technology Preview 127 | WebKit
CSS Color Module Level 4 （日本語訳）
CSS Color Module Level 5
Yoga Layout | A cross-platform layout engine
beagle-web-react/component.tsx at master · ZupIT/beagle-web-react

Typescript 4.4 Beta, Github Copilot, Server Driven UI, OpenTypeのchws/vchw

Safari v15の機能を導入した「Safari Technology Preview 126」をmacOS 11 Big SurにインストールするとSTPが動かない/クラッシュする問題があり一時的に非公開に。
<a href="https://applech2.com/archives/20210618-apple-pull-safari-technology-preview-126-for-big-sur.html">https://applech2.com/archives/20210618-apple-pull-safari-technology-preview-126-for-big-sur.html</a>
タイムゾーンを含むタイムスタンプ文字列表現の標準化 - ASnoKaze blog
<a href="https://asnokaze.hatenablog.com/entry/2021/06/21/010141">https://asnokaze.hatenablog.com/entry/2021/06/21/010141</a>
HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/1906/10/news038.html">https://www.itmedia.co.jp/news/articles/1906/10/news038.html</a>
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
<a href="https://future-architect.github.io/articles/20210621a/">https://future-architect.github.io/articles/20210621a/</a>
スタンドアロンなWebAssemblyランタイム「Wasmer 2.0」正式リリース、Win/Mac/Linux対応。SIMDに対応、実行速度が約50％改善、参照型対応など － Publickey
<a href="https://www.publickey1.jp/blog/21/webassemblywasmer_20winmaclinuxsimd50.html">https://www.publickey1.jp/blog/21/webassemblywasmer_20winmaclinuxsimd50.html</a>
Flutter Hooks, sometimes Jetpack Compose - Speaker Deck
<a href="https://speakerdeck.com/wasabeef/flutter-hooks-sometimes-jetpack-compose">https://speakerdeck.com/wasabeef/flutter-hooks-sometimes-jetpack-compose</a>
Google Developers Japan: Chrome の User-Agent 文字列削減に関する最新情報
<a href="https://developers-jp.googleblog.com/2021/06/chrome-user-agent.html">https://developers-jp.googleblog.com/2021/06/chrome-user-agent.html</a>
Permissions Policy is the new form of Feature Policy | Migrate to User-Agent Client Hints
<a href="https://web.dev/migrate-to-ua-ch/">https://web.dev/migrate-to-ua-ch/</a>
Top 10 performance pitfalls - HTTP 203 - YouTube
<a href="https://www.youtube.com/watch?v=Lh9q3h2khlc">https://www.youtube.com/watch?v=Lh9q3h2khlc</a>
正式仕様リリース！ JavaScriptの最新仕様ES2021で追加された新機能まとめ
<a href="https://zenn.dev/tonkotsuboy_com/articles/es2021-whats-new">https://zenn.dev/tonkotsuboy_com/articles/es2021-whats-new</a>
Google、ChromeでのサードパーティーCookie廃止を2023年まで延期 - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/2106/25/news067.html">https://www.itmedia.co.jp/news/articles/2106/25/news067.html</a>
「Windows 11」発表　Androidアプリが動作するように【更新終了】 - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/2106/25/news058.html">https://www.itmedia.co.jp/news/articles/2106/25/news058.html</a>
Windows 11のアプリ配信の仕組みから、マイクロソフトの「大きな変化」が見えてくる | WIRED.jp
<a href="https://wired.jp/2021/06/26/microsoft-windows-11-app-store-android/">https://wired.jp/2021/06/26/microsoft-windows-11-app-store-android/</a>

Safari v15の機能を導入した「Safari Technology Preview 126」をmacOS 11 Big SurにインストールするとSTPが動かない/クラッシュする問題があり一時的に非公開に。
https://applech2.com/archives/20210618-apple-pull-safari-technology-preview-126-for-big-sur.html
タイムゾーンを含むタイムスタンプ文字列表現の標準化 - ASnoKaze blog
https://asnokaze.hatenablog.com/entry/2021/06/21/010141
HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/1906/10/news038.html
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
https://future-architect.github.io/articles/20210621a/
スタンドアロンなWebAssemblyランタイム「Wasmer 2.0」正式リリース、Win/Mac/Linux対応。SIMDに対応、実行速度が約50％改善、参照型対応など － Publickey
https://www.publickey1.jp/blog/21/webassemblywasmer_20winmaclinuxsimd50.html
Flutter Hooks, sometimes Jetpack Compose - Speaker Deck
https://speakerdeck.com/wasabeef/flutter-hooks-sometimes-jetpack-compose
Google Developers Japan: Chrome の User-Agent 文字列削減に関する最新情報
https://developers-jp.googleblog.com/2021/06/chrome-user-agent.html
Permissions Policy is the new form of Feature Policy | Migrate to User-Agent Client Hints
https://web.dev/migrate-to-ua-ch/
Top 10 performance pitfalls - HTTP 203 - YouTube
https://www.youtube.com/watch?v=Lh9q3h2khlc
正式仕様リリース！ JavaScriptの最新仕様ES2021で追加された新機能まとめ
https://zenn.dev/tonkotsuboy_com/articles/es2021-whats-new
Google、ChromeでのサードパーティーCookie廃止を2023年まで延期 - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/2106/25/news067.html
「Windows 11」発表　Androidアプリが動作するように【更新終了】 - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/2106/25/news058.html
Windows 11のアプリ配信の仕組みから、マイクロソフトの「大きな変化」が見えてくる | WIRED.jp
https://wired.jp/2021/06/26/microsoft-windows-11-app-store-android/

Safari Technology Preview 126, タイムスタンプ文字列, Wasmer 2.0, Flutter Hooks, ES2021, Windows 11

ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
<a href="https://developers.cyberagent.co.jp/blog/archives/30373/">https://developers.cyberagent.co.jp/blog/archives/30373/</a>
 	https://abema.tv/polyfill.fd0550eafa7b16148ccb.js
Financial-Times/polyfill-useragent-normaliser
<a href="https://github.com/Financial-Times/polyfill-useragent-normaliser">https://github.com/Financial-Times/polyfill-useragent-normaliser</a>
Next.js Conf
<a href="https://nextjs.org/conf">https://nextjs.org/conf</a>
Next.js Conf – Special Edition - YouTube
<a href="https://www.youtube.com/watch?v=ze8ycxc1UzE">https://www.youtube.com/watch?v=ze8ycxc1UzE</a>
Next.js Conf – Afterparty - YouTube
<a href="https://www.youtube.com/watch?v=ANikp1R8zX8">https://www.youtube.com/watch?v=ANikp1R8zX8</a>
Next.js Live - Code in the browser. With your team.
<a href="https://nextjs.org/live">https://nextjs.org/live</a>
Introducing Aurora
<a href="https://web.dev/introducing-aurora/">https://web.dev/introducing-aurora/</a>
Conformance for Frameworks
<a href="https://web.dev/conformance/">https://web.dev/conformance/</a>
Adam ArgyleさんはTwitterを使っています / Twitter
<a href="https://twitter.com/argyleink/status/1405554160339079169">https://twitter.com/argyleink/status/1405554160339079169</a>
6.7.7 Input modalities: the inputmode attribute | HTML Standard
<a href="https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute">https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute</a>
Bramus!さんはTwitterを使っています / Twitter
<a href="https://twitter.com/bramus/status/1405867111692574721">https://twitter.com/bramus/status/1405867111692574721</a>
Tailwind CSS v2.2 – Tailwind CSS
<a href="https://blog.tailwindcss.com/tailwindcss-2-2">https://blog.tailwindcss.com/tailwindcss-2-2</a>
React 18 alpha版発表まとめ
<a href="https://zenn.dev/uhyo/articles/react-18-alpha-essentials">https://zenn.dev/uhyo/articles/react-18-alpha-essentials</a>
Chrome Platform Status
<a href="https://www.chromestatus.com/features/schedule">https://www.chromestatus.com/features/schedule</a>
TypeScript 4.4.0 (Beta) Milestone
<a href="https://github.com/microsoft/TypeScript/milestone/141">https://github.com/microsoft/TypeScript/milestone/141</a>
Origin Trials
<a href="https://developer.chrome.com/origintrials/#/trials/active">https://developer.chrome.com/origintrials/#/trials/active</a>
TC39 Process: Stage · ECMAScriptとは何か？
<a href="https://azu.github.io/slide-what-is-ecmascript/slide/12.html">https://azu.github.io/slide-what-is-ecmascript/slide/12.html</a>

ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
https://developers.cyberagent.co.jp/blog/archives/30373/
Financial-Times/polyfill-useragent-normaliser
https://github.com/Financial-Times/polyfill-useragent-normaliser
Next.js Conf
https://nextjs.org/conf
Next.js Conf – Special Edition - YouTube
https://www.youtube.com/watch?v=ze8ycxc1UzE
Next.js Conf – Afterparty - YouTube
https://www.youtube.com/watch?v=ANikp1R8zX8
Next.js Live - Code in the browser. With your team.
https://nextjs.org/live
Introducing Aurora
https://web.dev/introducing-aurora/
Conformance for Frameworks
https://web.dev/conformance/
Adam ArgyleさんはTwitterを使っています / Twitter
https://twitter.com/argyleink/status/1405554160339079169
6.7.7 Input modalities: the inputmode attribute | HTML Standard
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
Bramus!さんはTwitterを使っています / Twitter
https://twitter.com/bramus/status/1405867111692574721
Tailwind CSS v2.2 – Tailwind CSS
https://blog.tailwindcss.com/tailwindcss-2-2
React 18 alpha版発表まとめ
https://zenn.dev/uhyo/articles/react-18-alpha-essentials
Chrome Platform Status
https://www.chromestatus.com/features/schedule
TypeScript 4.4.0 (Beta) Milestone
https://github.com/microsoft/TypeScript/milestone/141
Origin Trials
https://developer.chrome.com/origintrials/#/trials/active
TC39 Process: Stage · ECMAScriptとは何か？
https://azu.github.io/slide-what-is-ecmascript/slide/12.html

polyfill-library, Next.js Conf, React 18などについて

&lt;p&gt;Java Edition 1.17 - Minecraft Wiki&lt;/p&gt;
&lt;p&gt;&lt;a href="https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17"&gt;https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Best practices for fonts&lt;/p&gt;
&lt;p&gt;&lt;a href="https://web.dev/font-best-practices/"&gt;https://web.dev/font-best-practices/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;CSS size-adjust for @font-face&lt;/p&gt;
&lt;p&gt;&lt;a href="https://web.dev/css-size-adjust/"&gt;https://web.dev/css-size-adjust/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;デジタル庁（準備中）さんはTwitterを使っています &nbsp;/ Twitter&lt;/p&gt;
&lt;p&gt;&lt;a href="https://twitter.com/digital_jpn/status/1402419950199795712"&gt;https://twitter.com/digital_jpn/status/1402419950199795712&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The Plan for React 18 – React Blog&lt;/p&gt;
&lt;p&gt;&lt;a href="https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html"&gt;https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;ReactさんはTwitterを使っています &nbsp;/ Twitter&lt;/p&gt;
&lt;p&gt;&lt;a href="https://twitter.com/reactjs/status/1403060135514329092"&gt;https://twitter.com/reactjs/status/1403060135514329092&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;並列モードの導入（実験的機能） – React&lt;/p&gt;
&lt;p&gt;&lt;a href="https://ja.reactjs.org/docs/concurrent-mode-intro.html"&gt;https://ja.reactjs.org/docs/concurrent-mode-intro.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Deno 1.11 Release Notes | Deno Blog&lt;/p&gt;
&lt;p&gt;&lt;a href="https://deno.com/blog/v1.11"&gt;https://deno.com/blog/v1.11&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Building a color scheme&lt;/p&gt;
&lt;p&gt;&lt;a href="https://web.dev/building-a-color-scheme/"&gt;https://web.dev/building-a-color-scheme/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Steve Jobs on privacy, Steve Jobs at the D8 Conference (Video) - YouTube&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=39iKLwlUqBo"&gt;https://www.youtube.com/watch?v=39iKLwlUqBo&lt;/a&gt;&lt;/p&gt;

Java Edition 1.17 - Minecraft Wiki
<a href="https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17">https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17</a>
Best practices for fonts
<a href="https://web.dev/font-best-practices/">https://web.dev/font-best-practices/</a>
CSS size-adjust for @font-face
<a href="https://web.dev/css-size-adjust/">https://web.dev/css-size-adjust/</a>
デジタル庁（準備中）さんはTwitterを使っています  / Twitter
<a href="https://twitter.com/digital_jpn/status/1402419950199795712">https://twitter.com/digital_jpn/status/1402419950199795712</a>
The Plan for React 18 – React Blog
<a href="https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html">https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html</a>
ReactさんはTwitterを使っています  / Twitter
<a href="https://twitter.com/reactjs/status/1403060135514329092">https://twitter.com/reactjs/status/1403060135514329092</a>
並列モードの導入（実験的機能） – React
<a href="https://ja.reactjs.org/docs/concurrent-mode-intro.html">https://ja.reactjs.org/docs/concurrent-mode-intro.html</a>
Deno 1.11 Release Notes | Deno Blog
<a href="https://deno.com/blog/v1.11">https://deno.com/blog/v1.11</a>
Building a color scheme
<a href="https://web.dev/building-a-color-scheme/">https://web.dev/building-a-color-scheme/</a>
Steve Jobs on privacy, Steve Jobs at the D8 Conference (Video) - YouTube
<a href="https://www.youtube.com/watch?v=39iKLwlUqBo">https://www.youtube.com/watch?v=39iKLwlUqBo</a>

Minecraft 1.17, Web font, React 18, deno 1.11, React 並列モード

Noto Sans JP のパフォーマンスへの影響
<a href="https://gyo.gitlab.io/ui-alm/noto-sans-jp/">https://gyo.gitlab.io/ui-alm/noto-sans-jp/</a>
Webフォント読み込み戦略（2021年） - MOL
<a href="https://t32k.me/mol/log/optimize-webfont-loading/">https://t32k.me/mol/log/optimize-webfont-loading/</a>
CSS for Web Vitals
<a href="https://web.dev/css-web-vitals/">https://web.dev/css-web-vitals/</a>
JavaScript — Errors and Exception Handling | by Miriam Bellon | JavaScript in Plain English
<a href="https://javascript.plainenglish.io/javascript-errors-exceptions-handling-43ae983cbbb3">https://javascript.plainenglish.io/javascript-errors-exceptions-handling-43ae983cbbb3</a>
Hoisting (巻き上げ、ホイスティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
<a href="https://developer.mozilla.org/ja/docs/Glossary/Hoisting#only_declarations_are_hoisted">https://developer.mozilla.org/ja/docs/Glossary/Hoisting#only_declarations_are_hoisted</a>
HTTP/3の基盤となる「QUICプロトコル」の標準化プロセスが完了、IETFの「RFC 9000」として － Publickey
<a href="https://www.publickey1.jp/blog/21/http3quicietfrfc_9000.html">https://www.publickey1.jp/blog/21/http3quicietfrfc_9000.html</a>
Google Developers Japan: Chrome への HTTP/3 と IETF QUIC の導入について
<a href="https://developers-jp.googleblog.com/2020/10/chrome-http3-ietf-quic.html">https://developers-jp.googleblog.com/2020/10/chrome-http3-ietf-quic.html</a>
TCP UDP HTTP/3
<a href="https://twitter.com/xkr47/status/1357606471324868613">https://twitter.com/xkr47/status/1357606471324868613</a>
A Thorough Analysis of CSS-in-JS | CSS-Tricks
<a href="https://css-tricks.com/a-thorough-analysis-of-css-in-js/">https://css-tricks.com/a-thorough-analysis-of-css-in-js/</a>
Tailwind CSSでサイトをリニューアルした感想 - to-R Media
<a href="https://www.to-r.net/media/tor-tailwind-css/">https://www.to-r.net/media/tor-tailwind-css/</a>
🔖 Boilerplates. HTML Boilerplate
<a href="https://twitter.com/smashingmag/status/1399265558357544970">https://twitter.com/smashingmag/status/1399265558357544970</a>
🔖 Design Patterns. Command Palettes
<a href="https://twitter.com/smashingmag/status/1400690762870841346">https://twitter.com/smashingmag/status/1400690762870841346</a>
UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方 | キネレット・イフラ, 郷司 陽子, 仲野 佑希 | コンピュータ・IT | Kindleストア | Amazon
<a href="https://www.amazon.co.jp/gp/product/B08QVKKKVR/">https://www.amazon.co.jp/gp/product/B08QVKKKVR/</a>

Noto Sans JP のパフォーマンスへの影響
https://gyo.gitlab.io/ui-alm/noto-sans-jp/
Webフォント読み込み戦略（2021年） - MOL
https://t32k.me/mol/log/optimize-webfont-loading/
CSS for Web Vitals
https://web.dev/css-web-vitals/
JavaScript — Errors and Exception Handling | by Miriam Bellon | JavaScript in Plain English
https://javascript.plainenglish.io/javascript-errors-exceptions-handling-43ae983cbbb3
Hoisting (巻き上げ、ホイスティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
https://developer.mozilla.org/ja/docs/Glossary/Hoisting#only_declarations_are_hoisted
HTTP/3の基盤となる「QUICプロトコル」の標準化プロセスが完了、IETFの「RFC 9000」として － Publickey
https://www.publickey1.jp/blog/21/http3quicietfrfc_9000.html
Google Developers Japan: Chrome への HTTP/3 と IETF QUIC の導入について
https://developers-jp.googleblog.com/2020/10/chrome-http3-ietf-quic.html
TCP UDP HTTP/3
https://twitter.com/xkr47/status/1357606471324868613
A Thorough Analysis of CSS-in-JS | CSS-Tricks
https://css-tricks.com/a-thorough-analysis-of-css-in-js/
Tailwind CSSでサイトをリニューアルした感想 - to-R Media
https://www.to-r.net/media/tor-tailwind-css/
🔖 Boilerplates. HTML Boilerplate
https://twitter.com/smashingmag/status/1399265558357544970
🔖 Design Patterns. Command Palettes
https://twitter.com/smashingmag/status/1400690762870841346
UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方 | キネレット・イフラ, 郷司 陽子, 仲野 佑希 | コンピュータ・IT | Kindleストア | Amazon
https://www.amazon.co.jp/gp/product/B08QVKKKVR/

Web Font重い問題、JSのtry catch finallyの変わった挙動、Tailwind CSS

Chrome DevTools for designers | Session - YouTube
<a href="https://www.youtube.com/watch?v=yNwwEu3Kcbs">https://www.youtube.com/watch?v=yNwwEu3Kcbs</a>
マイクロソフトはGPT-3を使い自然言語でコードを書けるようにする | TechCrunch Japan
<a href="https://jp.techcrunch.com/2021/05/26/2021-05-25-microsoft-uses-gpt-3-to-let-you-code-in-natural-language/">https://jp.techcrunch.com/2021/05/26/2021-05-25-microsoft-uses-gpt-3-to-let-you-code-in-natural-language/</a>
ここ🌸自由を愛するWebデザイナー / Twitter
<a href="https://twitter.com/cococo_design/status/1395130151768371206">https://twitter.com/cococo_design/status/1395130151768371206</a>
深沢幸治郎｜ウェブデザイナー・コワーキングスペース運営🎙毎週金曜・ラジオ風YouTubeやってます / Twitter
<a href="https://twitter.com/kojirofukazawa/status/1395422224471842822">https://twitter.com/kojirofukazawa/status/1395422224471842822</a>
せせり（大岡まひろ）@個人開発 / Twitter
<a href="https://twitter.com/sesere115/status/1395553291841380353">https://twitter.com/sesere115/status/1395553291841380353</a>
菱川拓郎 :: コンクリートファイブジャパン / Twitter
<a href="https://twitter.com/HissyNC/status/1395661189019967488">https://twitter.com/HissyNC/status/1395661189019967488</a>
綿貫 佳祐 / Ateam, Increments / Twitter
<a href="https://twitter.com/xrxoxcxox/status/1395531639665483778">https://twitter.com/xrxoxcxox/status/1395531639665483778</a>
池田 泰延 / IKEDA Yasunobu / Twitter
<a href="https://twitter.com/clockmaker/status/1396964812433674242">https://twitter.com/clockmaker/status/1396964812433674242</a>
MicrosoftのナデラCEO、「次世代Windowsを間もなく発表」：Build 2021 - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/2105/26/news055.html">https://www.itmedia.co.jp/news/articles/2105/26/news055.html</a>
Cybozu Frontend Monthly #11
<a href="https://cybozu.github.io/frontend-monthly/posts/2021-05#5-advanced-react-patterns">https://cybozu.github.io/frontend-monthly/posts/2021-05#5-advanced-react-patterns</a>
ブラウザによって色が異なる「色空間」の不思議な世界 - GIGAZINE
<a href="https://gigazine.net/news/20210528-browser-different-colors/">https://gigazine.net/news/20210528-browser-different-colors/</a>
色空間を表す「RGB(赤・緑・青)」と「HSL(色相・彩度・輝度)」の値の関係が視覚的に分かる「RGB & HSL」 - GIGAZINE
<a href="https://gigazine.net/news/20150217-rgb-hsl/">https://gigazine.net/news/20150217-rgb-hsl/</a>
Gaming with JS
<a href="https://bhumikhokhani.hashnode.dev/games-with-js">https://bhumikhokhani.hashnode.dev/games-with-js</a>
Gym
<a href="https://gym.openai.com/">https://gym.openai.com/</a>

Chrome DevTools for designers | Session - YouTube
https://www.youtube.com/watch?v=yNwwEu3Kcbs
マイクロソフトはGPT-3を使い自然言語でコードを書けるようにする | TechCrunch Japan
https://jp.techcrunch.com/2021/05/26/2021-05-25-microsoft-uses-gpt-3-to-let-you-code-in-natural-language/
ここ🌸自由を愛するWebデザイナー / Twitter
https://twitter.com/cococo_design/status/1395130151768371206
深沢幸治郎｜ウェブデザイナー・コワーキングスペース運営🎙毎週金曜・ラジオ風YouTubeやってます / Twitter
https://twitter.com/kojirofukazawa/status/1395422224471842822
せせり（大岡まひろ）@個人開発 / Twitter
https://twitter.com/sesere115/status/1395553291841380353
菱川拓郎 :: コンクリートファイブジャパン / Twitter
https://twitter.com/HissyNC/status/1395661189019967488
綿貫 佳祐 / Ateam, Increments / Twitter
https://twitter.com/xrxoxcxox/status/1395531639665483778
池田 泰延 / IKEDA Yasunobu / Twitter
https://twitter.com/clockmaker/status/1396964812433674242
MicrosoftのナデラCEO、「次世代Windowsを間もなく発表」：Build 2021 - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/2105/26/news055.html
Cybozu Frontend Monthly #11
https://cybozu.github.io/frontend-monthly/posts/2021-05#5-advanced-react-patterns
ブラウザによって色が異なる「色空間」の不思議な世界 - GIGAZINE
https://gigazine.net/news/20210528-browser-different-colors/
色空間を表す「RGB(赤・緑・青)」と「HSL(色相・彩度・輝度)」の値の関係が視覚的に分かる「RGB & HSL」 - GIGAZINE
https://gigazine.net/news/20150217-rgb-hsl/
Gaming with JS
https://bhumikhokhani.hashnode.dev/games-with-js
Gym
https://gym.openai.com/

Chrome DevTools for designers, Web Fontが重い話 React Component Pattern

Google I/O 2021
<a href="https://events.google.com/io/">https://events.google.com/io/</a>
A few things to know from Google I/O 2021 in under 9 minutes. - YouTube
<a href="https://www.youtube.com/watch?v=L7c4wS7T_T8">https://www.youtube.com/watch?v=L7c4wS7T_T8</a>
Apple event in 51 seconds - YouTube
<a href="https://www.youtube.com/watch?v=Gz8vBoEFArA">https://www.youtube.com/watch?v=Gz8vBoEFArA</a>
Google Workspaceを大幅強化するアップデート「Smart canvas」 - GIGAZINE
<a href="https://gigazine.net/news/20210519-google-workspace-smart-canvas/">https://gigazine.net/news/20210519-google-workspace-smart-canvas/</a>
Twitter、TL上の画像表示をトリミングなしに変更。モバイルアプリにて対応 - Engadget 日本版
<a href="https://japanese.engadget.com/twitter-full-size-image-031548584.html">https://japanese.engadget.com/twitter-full-size-image-031548584.html</a>
What’s new in Material Design | Keynote - YouTube
<a href="https://www.youtube.com/watch?v=rLKtIGY2Mgc&t=476s">https://www.youtube.com/watch?v=rLKtIGY2Mgc&t=476s</a>
Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ｜note
<a href="https://note.com/tabelog_frontend/n/n07b4077f5cf3">https://note.com/tabelog_frontend/n/n07b4077f5cf3</a>
Next.js Conf
<a href="https://nextjs.org/conf">https://nextjs.org/conf</a>
一般社団法人日本ディスレクシア協会 – Japan Dyslexia Association
<a href="https://jdyslexia.com/">https://jdyslexia.com/</a>
Accessible Unboxing of the Xbox Adaptive Controller - Xbox Wire
<a href="https://news.xbox.com/en-us/2018/07/25/accessible-unboxing-of-the-xbox-adaptive-controller/">https://news.xbox.com/en-us/2018/07/25/accessible-unboxing-of-the-xbox-adaptive-controller/</a>
「Codecov」への第三者からの不正アクセスによる当社への影響および一部顧客情報等の流出について | 株式会社メルカリ
<a href="https://about.mercari.com/press/news/articles/20210521_incident_report/">https://about.mercari.com/press/news/articles/20210521_incident_report/</a>
不正アクセスによる会員様情報流出に関するお詫びとお知らせ – 株式会社ネットマーケティング
<a href="https://www.net-marketing.co.jp/news/5873/">https://www.net-marketing.co.jp/news/5873/</a>
ワクチン予約システムで話題の「SQLインジェクション」って何？　試すと法律違反？　専門家に聞く - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/2105/19/news154.html">https://www.itmedia.co.jp/news/articles/2105/19/news154.html</a>

Google I/O 2021
https://events.google.com/io/
A few things to know from Google I/O 2021 in under 9 minutes. - YouTube
https://www.youtube.com/watch?v=L7c4wS7T_T8
Apple event in 51 seconds - YouTube
https://www.youtube.com/watch?v=Gz8vBoEFArA
Google Workspaceを大幅強化するアップデート「Smart canvas」 - GIGAZINE
https://gigazine.net/news/20210519-google-workspace-smart-canvas/
Twitter、TL上の画像表示をトリミングなしに変更。モバイルアプリにて対応 - Engadget 日本版
https://japanese.engadget.com/twitter-full-size-image-031548584.html
What’s new in Material Design | Keynote - YouTube
https://www.youtube.com/watch?v=rLKtIGY2Mgc&t=476s
Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ｜note
https://note.com/tabelog_frontend/n/n07b4077f5cf3
Next.js Conf
https://nextjs.org/conf
一般社団法人日本ディスレクシア協会 – Japan Dyslexia Association
https://jdyslexia.com/
Accessible Unboxing of the Xbox Adaptive Controller - Xbox Wire
https://news.xbox.com/en-us/2018/07/25/accessible-unboxing-of-the-xbox-adaptive-controller/
「Codecov」への第三者からの不正アクセスによる当社への影響および一部顧客情報等の流出について | 株式会社メルカリ
https://about.mercari.com/press/news/articles/20210521_incident_report/
不正アクセスによる会員様情報流出に関するお詫びとお知らせ – 株式会社ネットマーケティング
https://www.net-marketing.co.jp/news/5873/
ワクチン予約システムで話題の「SQLインジェクション」って何？　試すと法律違反？　専門家に聞く - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/2105/19/news154.html

Google I/O 2021について

［速報］マイクロソフト、無料でRPA機能「Power Automate Desktop」をWindows 10ユーザーに提供開始。Microsoft Ignite 2021 － Publickey
<a href="https://www.publickey1.jp/blog/21/rpapower_automate_desktop_for_windows_10microsoft_ignite_2021.html">https://www.publickey1.jp/blog/21/rpapower_automate_desktop_for_windows_10microsoft_ignite_2021.html</a>
GitHub security update: A bug related to handling of authenticated sessions | The GitHub Blog
<a href="https://github.blog/2021-03-08-github-security-update-a-bug-related-to-handling-of-authenticated-sessions/">https://github.blog/2021-03-08-github-security-update-a-bug-related-to-handling-of-authenticated-sessions/</a>
サーバサイドレンダリングの導入から生じるSSRF｜セキュリティブログ
<a href="https://ierae.co.jp/blog/ssr-ssrf/">https://ierae.co.jp/blog/ssr-ssrf/</a>
フォントのサイズ設定は役に立たない、問題点と解決方法 | コリス
<a href="https://coliss.com/articles/build-websites/operation/work/font-size-is-useless.html">https://coliss.com/articles/build-websites/operation/work/font-size-is-useless.html</a>
	[https://twitter.com/tonkotsuboy_com/status/1386886571710816256]
	[https://twitter.com/tonkotsuboy_com/status/1386891846522073089]
Blog - Next.js 10.2 | Next.js
<a href="https://nextjs.org/blog/next-10-2">https://nextjs.org/blog/next-10-2</a>
nextjsのISRを使うときのfallback指定について理解するまでの話
<a href="https://zenn.dev/terrierscript/articles/2021-04-28-nextjs-isr-fallback">https://zenn.dev/terrierscript/articles/2021-04-28-nextjs-isr-fallback</a>
text-underline-offset - CSS: カスケーディングスタイルシート | MDN
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-offset">https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-offset</a>
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
<a href="https://zenn.dev/berlysia/articles/624bc1aaffda58">https://zenn.dev/berlysia/articles/624bc1aaffda58</a>
カルビーのポテチを売上1.3倍にしたAIの正体--プラグの「パッケージデザインAI」の実力 - CNET Japan
<a href="https://japan.cnet.com/article/35169952/">https://japan.cnet.com/article/35169952/</a>
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ － Publickey
<a href="https://www.publickey1.jp/blog/21/javascriptromerome_tools_inc.html">https://www.publickey1.jp/blog/21/javascriptromerome_tools_inc.html</a>
Google Developers Japan: Chrome 91 ベータ版: 手書き文字認識、WebXR 平面検出など
<a href="https://developers-jp.googleblog.com/2021/05/chrome-91-webxr.html">https://developers-jp.googleblog.com/2021/05/chrome-91-webxr.html</a>
「iOS 14.5」のATT機能、ユーザーの約88％が「トラッキングしないように要求」を選択──Flurry調べ - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/2105/09/news014.html">https://www.itmedia.co.jp/news/articles/2105/09/news014.html</a>
Google Workspace Updates: Google Docs will now use canvas based rendering: this may impact some Chrome extensions
<a href="https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html">https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html</a>
google/zx: A tool for writing better scripts
<a href="https://github.com/google/zx">https://github.com/google/zx</a>
Google I/O 2021
<a href="https://events.google.com/io/?lng=ja">https://events.google.com/io/?lng=ja</a>

［速報］マイクロソフト、無料でRPA機能「Power Automate Desktop」をWindows 10ユーザーに提供開始。Microsoft Ignite 2021 － Publickey
https://www.publickey1.jp/blog/21/rpapower_automate_desktop_for_windows_10microsoft_ignite_2021.html
GitHub security update: A bug related to handling of authenticated sessions | The GitHub Blog
https://github.blog/2021-03-08-github-security-update-a-bug-related-to-handling-of-authenticated-sessions/
サーバサイドレンダリングの導入から生じるSSRF｜セキュリティブログ
https://ierae.co.jp/blog/ssr-ssrf/
フォントのサイズ設定は役に立たない、問題点と解決方法 | コリス
https://coliss.com/articles/build-websites/operation/work/font-size-is-useless.html
Blog - Next.js 10.2 | Next.js
https://nextjs.org/blog/next-10-2
nextjsのISRを使うときのfallback指定について理解するまでの話
https://zenn.dev/terrierscript/articles/2021-04-28-nextjs-isr-fallback
text-underline-offset - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-offset
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
https://zenn.dev/berlysia/articles/624bc1aaffda58
カルビーのポテチを売上1.3倍にしたAIの正体--プラグの「パッケージデザインAI」の実力 - CNET Japan
https://japan.cnet.com/article/35169952/
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ － Publickey
https://www.publickey1.jp/blog/21/javascriptromerome_tools_inc.html
Google Developers Japan: Chrome 91 ベータ版: 手書き文字認識、WebXR 平面検出など
https://developers-jp.googleblog.com/2021/05/chrome-91-webxr.html
「iOS 14.5」のATT機能、ユーザーの約88％が「トラッキングしないように要求」を選択──Flurry調べ - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/2105/09/news014.html
Google Workspace Updates: Google Docs will now use canvas based rendering: this may impact some Chrome extensions
https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html
google/zx: A tool for writing better scripts
https://github.com/google/zx
Google I/O 2021
https://events.google.com/io/?lng=ja

Chrome 91, Javascriptで書けるシェルスクリプト "zx", SSRF, useRefのRefObjectとMutableRefObject, Google DocsがCanvas移行

【Live Coding】Next.jsでホームページ作ってみる（音声のみ）

【Live Coding】Next.jsでホームページ作ってみる（音声のみ）

CSS Variables を JavaScript から操作する | スマホ神 – JavaScript 受託開発 –
<a href="http://smart.ataglance.jp/2016-06-02-manipulate-css-variables-from-javascript/">http://smart.ataglance.jp/2016-06-02-manipulate-css-variables-from-javascript/</a>
Browsers have a built-in Dark Mode color scheme
<a href="https://twitter.com/bramus/status/1358093784001740801">https://twitter.com/bramus/status/1358093784001740801</a>
color-scheme Demo
<a href="https://color-scheme-demo.glitch.me/">https://color-scheme-demo.glitch.me/</a>
Improving Progressive Web App offline support detection
<a href="https://twitter.com/agektmr/status/1359531534122770435">https://twitter.com/agektmr/status/1359531534122770435</a>
初期費用無料、最短1か月でオリジナルアプリの開発を可能にする “公式アプリ開発サービス”の提供を開始 | 株式会社クレヨン（CRAYON Inc.)
<a href="https://c-rayon.com/news/200609.html">https://c-rayon.com/news/200609.html</a>
CSSにContainer Queriesが来る
<a href="https://twitter.com/catnose99/status/1360162398552821760">https://twitter.com/catnose99/status/1360162398552821760</a>
Container Queries: Once More Unto the Breach – A List Apart
<a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach/">https://alistapart.com/article/container-queries-once-more-unto-the-breach/</a>
CSSのCascadingに追加されようとしているLayerという概念
<a href="https://blog.araya.dev/posts/2021-02-16/css-cascade-layer.html">https://blog.araya.dev/posts/2021-02-16/css-cascade-layer.html</a>
WebAssembly Summit 2021
<a href="https://webassembly-summit.org/">https://webassembly-summit.org/</a>
Appleが業界最高水準セキュリティの全貌を明らかに：Apple Platform Security Guide（1/2 ページ） - ITmedia PC USER
<a href="https://www.itmedia.co.jp/pcuser/articles/2102/19/news052.html">https://www.itmedia.co.jp/pcuser/articles/2102/19/news052.html</a>
Webブラウザセキュリティ ― Webアプリケーションの安全性を支える仕組みを整理する – 技術書出版と販売のラムダノート
<a href="https://www.lambdanote.com/products/wbs">https://www.lambdanote.com/products/wbs</a>
Streams—The definitive guide
<a href="https://web.dev/streams/">https://web.dev/streams/</a>
【 朗読 】 メイド と一緒に読書はいかがですか？2021.2.10【 Vtuber 配信 】 - YouTube
<a href="https://www.youtube.com/watch?v=YONUgaoFqjk">https://www.youtube.com/watch?v=YONUgaoFqjk</a>

CSS Variables を JavaScript から操作する | スマホ神 – JavaScript 受託開発 –
http://smart.ataglance.jp/2016-06-02-manipulate-css-variables-from-javascript/
Browsers have a built-in Dark Mode color scheme
https://twitter.com/bramus/status/1358093784001740801
color-scheme Demo
https://color-scheme-demo.glitch.me/
Improving Progressive Web App offline support detection
https://twitter.com/agektmr/status/1359531534122770435
初期費用無料、最短1か月でオリジナルアプリの開発を可能にする “公式アプリ開発サービス”の提供を開始 | 株式会社クレヨン（CRAYON Inc.)
https://c-rayon.com/news/200609.html
CSSにContainer Queriesが来る
https://twitter.com/catnose99/status/1360162398552821760
Container Queries: Once More Unto the Breach – A List Apart
https://alistapart.com/article/container-queries-once-more-unto-the-breach/
CSSのCascadingに追加されようとしているLayerという概念
https://blog.araya.dev/posts/2021-02-16/css-cascade-layer.html
WebAssembly Summit 2021
https://webassembly-summit.org/
Appleが業界最高水準セキュリティの全貌を明らかに：Apple Platform Security Guide（1/2 ページ） - ITmedia PC USER
https://www.itmedia.co.jp/pcuser/articles/2102/19/news052.html
Webブラウザセキュリティ ― Webアプリケーションの安全性を支える仕組みを整理する – 技術書出版と販売のラムダノート
https://www.lambdanote.com/products/wbs
Streams—The definitive guide
https://web.dev/streams/
【 朗読 】 メイド と一緒に読書はいかがですか？2021.2.10【 Vtuber 配信 】 - YouTube
https://www.youtube.com/watch?v=YONUgaoFqjk

Browser built-in Dark Mode color scheme、WebAssembly Summit 2021、Apple Platform Security などについて

【悲劇】初期不良系ユーチューバー、自作PCでとんでもないミスをやらかす。 - YouTube
<a href="https://www.youtube.com/watch?v=czbWkGbujgM">https://www.youtube.com/watch?v=czbWkGbujgM</a>
Tailwind CSSが私には合わなかった理由 | コリス
<a href="https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html">https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html</a>
アクセシビリティを重視したオープンソースの新デザインシステムをOktaがローンチ | TechCrunch Japan
<a href="https://jp.techcrunch.com/2021/02/05/2021-02-04-okta-launches-its-new-open-source-design-system-with-a-focus-on-accessibility/">https://jp.techcrunch.com/2021/02/05/2021-02-04-okta-launches-its-new-open-source-design-system-with-a-focus-on-accessibility/</a>
W3CとIETF、「WebRTC」が正式な標準仕様に到達したと発表 － Publickey
<a href="https://www.publickey1.jp/blog/21/w3cietfwebrtc.html">https://www.publickey1.jp/blog/21/w3cietfwebrtc.html</a>
WebSocketの次の技術！？WebTransportについての解説とチュートリアル - Qiita
<a href="https://qiita.com/yuki_uchida/items/d9de148bb2ee418563cf">https://qiita.com/yuki_uchida/items/d9de148bb2ee418563cf</a>
Webアプリがジョイコンなどに対応する「WebHID」、NFCタグを読み書きする「Web NFC」、シリアルポートで通信する「Web Serial」など、Chrome 89ベータではデフォルトで有効に － Publickey
<a href="https://www.publickey1.jp/blog/21/webwebhidnfcweb_nfcweb_serialchrome_89.html">https://www.publickey1.jp/blog/21/webwebhidnfcweb_nfcweb_serialchrome_89.html</a>
アップルのApp Tracking Transparency機能はデフォルトで有効に、早春にiOSで実装 | TechCrunch Japan
<a href="https://jp.techcrunch.com/2021/01/29/2021-01-27-apple-app-tracking-transparency/">https://jp.techcrunch.com/2021/01/29/2021-01-27-apple-app-tracking-transparency/</a>
Google、脱「クッキー」加速　4月から広告主と試験運用: 日本経済新聞
<a href="https://www.nikkei.com/article/DGXZQOGN260C40W1A120C2000000/">https://www.nikkei.com/article/DGXZQOGN260C40W1A120C2000000/</a>
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗｜note
<a href="https://note.com/taira_daishiro/n/nf037bf199ed8">https://note.com/taira_daishiro/n/nf037bf199ed8</a>
プログレスバー
<a href="https://twitter.com/nakamura/status/1354650792620298240">https://twitter.com/nakamura/status/1354650792620298240</a>

【悲劇】初期不良系ユーチューバー、自作PCでとんでもないミスをやらかす。 - YouTube
https://www.youtube.com/watch?v=czbWkGbujgM
Tailwind CSSが私には合わなかった理由 | コリス
https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html
アクセシビリティを重視したオープンソースの新デザインシステムをOktaがローンチ | TechCrunch Japan
https://jp.techcrunch.com/2021/02/05/2021-02-04-okta-launches-its-new-open-source-design-system-with-a-focus-on-accessibility/
W3CとIETF、「WebRTC」が正式な標準仕様に到達したと発表 － Publickey
https://www.publickey1.jp/blog/21/w3cietfwebrtc.html
WebSocketの次の技術！？WebTransportについての解説とチュートリアル - Qiita
https://qiita.com/yuki_uchida/items/d9de148bb2ee418563cf
Webアプリがジョイコンなどに対応する「WebHID」、NFCタグを読み書きする「Web NFC」、シリアルポートで通信する「Web Serial」など、Chrome 89ベータではデフォルトで有効に － Publickey
https://www.publickey1.jp/blog/21/webwebhidnfcweb_nfcweb_serialchrome_89.html
アップルのApp Tracking Transparency機能はデフォルトで有効に、早春にiOSで実装 | TechCrunch Japan
https://jp.techcrunch.com/2021/01/29/2021-01-27-apple-app-tracking-transparency/
Google、脱「クッキー」加速　4月から広告主と試験運用: 日本経済新聞
https://www.nikkei.com/article/DGXZQOGN260C40W1A120C2000000/
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗｜note
https://note.com/taira_daishiro/n/nf037bf199ed8
プログレスバー
https://twitter.com/nakamura/status/1354650792620298240

Tailwind CSSが私には合わなかった理由, 「WebRTC」が正式な標準仕様に到達、WebTransport、App Tracking Transparency、FLoCなどについて

&lt;p&gt;Announcing TypeScript 4.2 Beta | TypeScript&lt;/p&gt;
&lt;p&gt;&lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-2-beta/"&gt;https://devblogs.microsoft.com/typescript/announcing-typescript-4-2-beta/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;New in Chrome 88 - Chrome Developers&lt;/p&gt;
&lt;p&gt;&lt;a href="https://developer.chrome.com/blog/new-in-chrome-88/"&gt;https://developer.chrome.com/blog/new-in-chrome-88/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Release Notes for Safari Technology Preview 118 | WebKit&lt;/p&gt;
&lt;p&gt;&lt;a href="https://webkit.org/blog/11439/release-notes-for-safari-technology-preview-118/"&gt;https://webkit.org/blog/11439/release-notes-for-safari-technology-preview-118/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;バイデン新大統領就任でホワイトハウスのウェブサイトも刷新、ダークモード採用などアクセシビリティが大きく向上 | TechCrunch Japan&lt;/p&gt;
&lt;p&gt;&lt;a href="https://jp.techcrunch.com/2021/01/21/2021-01-20-white-house-dark-mode-biden-admin-refreshes-presidencys-website-vows-accessibility/"&gt;https://jp.techcrunch.com/2021/01/21/2021-01-20-white-house-dark-mode-biden-admin-refreshes-presidencys-website-vows-accessibility/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;シリコンバレーのスーパースターが続々集結!　テクノロジーで行政・社会の変革を目指す「米国政府デジタル・サービス」（市川 裕康） | 現代ビジネス | 講談社（1/3）&lt;/p&gt;
&lt;p&gt;&lt;a href="https://gendai.ismedia.jp/articles/-/41945"&gt;https://gendai.ismedia.jp/articles/-/41945&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;W3C Accessibility Guidelines (WCAG) 3.0&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.w3.org/TR/2021/WD-wcag-3.0-20210121/"&gt;https://www.w3.org/TR/2021/WD-wcag-3.0-20210121/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.mitsue.co.jp/knowledge/blog/a11y/202101/22_1035.html"&gt;https://www.mitsue.co.jp/knowledge/blog/a11y/202101/22_1035.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;content-visibility: auto; とページ内リンク&lt;/p&gt;
&lt;p&gt;&lt;a href="https://gyo.gitlab.io/ui-alm/content-visibility/"&gt;https://gyo.gitlab.io/ui-alm/content-visibility/&lt;/a&gt;&lt;/p&gt;

Announcing TypeScript 4.2 Beta | TypeScript
<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-2-beta/">https://devblogs.microsoft.com/typescript/announcing-typescript-4-2-beta/</a>
New in Chrome 88 - Chrome Developers
<a href="https://developer.chrome.com/blog/new-in-chrome-88/">https://developer.chrome.com/blog/new-in-chrome-88/</a>
Release Notes for Safari Technology Preview 118 | WebKit
<a href="https://webkit.org/blog/11439/release-notes-for-safari-technology-preview-118/">https://webkit.org/blog/11439/release-notes-for-safari-technology-preview-118/</a>
バイデン新大統領就任でホワイトハウスのウェブサイトも刷新、ダークモード採用などアクセシビリティが大きく向上 | TechCrunch Japan
<a href="https://jp.techcrunch.com/2021/01/21/2021-01-20-white-house-dark-mode-biden-admin-refreshes-presidencys-website-vows-accessibility/">https://jp.techcrunch.com/2021/01/21/2021-01-20-white-house-dark-mode-biden-admin-refreshes-presidencys-website-vows-accessibility/</a>
シリコンバレーのスーパースターが続々集結!　テクノロジーで行政・社会の変革を目指す「米国政府デジタル・サービス」（市川 裕康） | 現代ビジネス | 講談社（1/3）
<a href="https://gendai.ismedia.jp/articles/-/41945">https://gendai.ismedia.jp/articles/-/41945</a>
W3C Accessibility Guidelines (WCAG) 3.0
<a href="https://www.w3.org/TR/2021/WD-wcag-3.0-20210121/">https://www.w3.org/TR/2021/WD-wcag-3.0-20210121/</a>
W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
<a href="https://www.mitsue.co.jp/knowledge/blog/a11y/202101/22_1035.html">https://www.mitsue.co.jp/knowledge/blog/a11y/202101/22_1035.html</a>
content-visibility: auto; とページ内リンク
<a href="https://gyo.gitlab.io/ui-alm/content-visibility/">https://gyo.gitlab.io/ui-alm/content-visibility/</a>

TypeScript 4.2 Beta、Chrome 88(CSS aspect-ratio)、ホワイトハウスのウェブサイト、WCAG 3.0、content-visibility: auto; とページ内リンク

24:00 &nbsp;State of JS 2020
1:31:20 &nbsp;CSS Scroll-Linked Animations
 
 
State of JS 2020
<a href="https://2020.stateofjs.com/en-US/">https://2020.stateofjs.com/en-US/</a>
Developer Roadmaps
<a href="https://roadmap.sh/roadmaps">https://roadmap.sh/roadmaps</a>
2021年版、フロントエンドとバックエンドのデベロッパーに必要なスキルやツールをまとめたロードマップ | コリス
<a href="https://coliss.com/articles/build-websites/operation/developer-roadmaps-for-2021.html">https://coliss.com/articles/build-websites/operation/developer-roadmaps-for-2021.html</a>
CSS Scroll-Linked Animations
<a href="https://twitter.com/bramus/status/1349488687512432640">https://twitter.com/bramus/status/1349488687512432640</a>
Scroll-linked Animations
<a href="https://drafts4.csswg.org/static/scroll-animations-1/">https://drafts4.csswg.org/static/scroll-animations-1/</a>
Everything About React Server Components
<a href="https://twitter.com/vercel/status/1350157615595048961">https://twitter.com/vercel/status/1350157615595048961</a>

24:00  State of JS 2020
1:31:20  CSS Scroll-Linked Animations


State of JS 2020
https://2020.stateofjs.com/en-US/
Developer Roadmaps
https://roadmap.sh/roadmaps
2021年版、フロントエンドとバックエンドのデベロッパーに必要なスキルやツールをまとめたロードマップ | コリス
https://coliss.com/articles/build-websites/operation/developer-roadmaps-for-2021.html
CSS Scroll-Linked Animations
https://twitter.com/bramus/status/1349488687512432640
Scroll-linked Animations
https://drafts4.csswg.org/static/scroll-animations-1/
Everything About React Server Components
https://twitter.com/vercel/status/1350157615595048961

State of JS 2020、Scroll-linked Animations、Web アプリの反応速度について

Introducing Zero-Bundle-Size React Server Components – React Blog
<a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html">https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html</a>
レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2021最新版] - webのあれこれ
<a href="https://hashimotosan.hatenablog.jp/entry/2020/12/06/182327">https://hashimotosan.hatenablog.jp/entry/2020/12/06/182327</a>
最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる - GIGAZINE
<a href="https://gigazine.net/news/20201225-how-to-make-favicon/">https://gigazine.net/news/20201225-how-to-make-favicon/</a>
Lottie
<a href="https://airbnb.design/lottie/">https://airbnb.design/lottie/</a>
What Happens When Border Radii Overlap? | CSS-Tricks
<a href="https://css-tricks.com/what-happens-when-border-radii-overlap/">https://css-tricks.com/what-happens-when-border-radii-overlap/</a>
[Centering in CSS | CSS-Tricks https://css-tricks.com/centering-in-css/]https://css-tricks.com/centering-in-css/
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める | コリス
<a href="https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html">https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html</a>
width: fit-content;
<a href="https://gyo.gitlab.io/ui-alm/fit-content/">https://gyo.gitlab.io/ui-alm/fit-content/</a>
[css-sizing-4] [css-contain] Proposal to add `contain-intrinsic-size: auto;` to fix shifting scrollbar problem. · Issue #5815 · w3c/csswg-drafts
<a href="https://github.com/w3c/csswg-drafts/issues/5815">https://github.com/w3c/csswg-drafts/issues/5815</a>
Resize-Resilient `content-visibility` Fixes - Infrequently Noted
<a href="https://infrequently.org/2020/12/resize-resilient-deferred-rendering/">https://infrequently.org/2020/12/resize-resilient-deferred-rendering/</a>
`content-visiblity` Without Jittery Scrollbars - Infrequently Noted
<a href="https://infrequently.org/2020/12/content-visibility-scroll-fix/">https://infrequently.org/2020/12/content-visibility-scroll-fix/</a>
Material-UI v5を先取りする - Techtouch Developers Blog
<a href="https://tech.techtouch.jp/entry/material-ui-v5_9">https://tech.techtouch.jp/entry/material-ui-v5_9</a>
Designing Furniture With a 7:1 Color Contrast Ratio Makes a Huge Difference for the Visually Impaired
<a href="https://www.core77.com/posts/103624/Designing-Furniture-With-a-71-Color-Contrast-Ratio-Makes-a-Huge-Difference-for-the-Visually-Impaired">https://www.core77.com/posts/103624/Designing-Furniture-With-a-71-Color-Contrast-Ratio-Makes-a-Huge-Difference-for-the-Visually-Impaired</a>
G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text | Techniques for WCAG 2.0
<a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html">https://www.w3.org/TR/WCAG20-TECHS/G17.html</a>
The Best Color Functions in CSS? | CSS-Tricks
<a href="https://css-tricks.com/the-best-color-functions-in-css/">https://css-tricks.com/the-best-color-functions-in-css/</a>
Gyo / 2021-astrological-transit · GitLab
<a href="https://gitlab.com/gyo/2021-astrological-transit">https://gitlab.com/gyo/2021-astrological-transit</a>
火曜日のおフロ 2021年のアスペクト
<a href="https://bit.ly/35qd6PL">https://bit.ly/35qd6PL</a>

Introducing Zero-Bundle-Size React Server Components – React Blog
https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2021最新版] - webのあれこれ
https://hashimotosan.hatenablog.jp/entry/2020/12/06/182327
最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる - GIGAZINE
https://gigazine.net/news/20201225-how-to-make-favicon/
Lottie
https://airbnb.design/lottie/
What Happens When Border Radii Overlap? | CSS-Tricks
https://css-tricks.com/what-happens-when-border-radii-overlap/
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める | コリス
https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html
width: fit-content;
https://gyo.gitlab.io/ui-alm/fit-content/
[css-sizing-4] [css-contain] Proposal to add `contain-intrinsic-size: auto;` to fix shifting scrollbar problem. · Issue #5815 · w3c/csswg-drafts
https://github.com/w3c/csswg-drafts/issues/5815
Resize-Resilient `content-visibility` Fixes - Infrequently Noted
https://infrequently.org/2020/12/resize-resilient-deferred-rendering/
`content-visiblity` Without Jittery Scrollbars - Infrequently Noted
https://infrequently.org/2020/12/content-visibility-scroll-fix/
Material-UI v5を先取りする - Techtouch Developers Blog
https://tech.techtouch.jp/entry/material-ui-v5_9
Designing Furniture With a 7:1 Color Contrast Ratio Makes a Huge Difference for the Visually Impaired
https://www.core77.com/posts/103624/Designing-Furniture-With-a-71-Color-Contrast-Ratio-Makes-a-Huge-Difference-for-the-Visually-Impaired
G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text | Techniques for WCAG 2.0
https://www.w3.org/TR/WCAG20-TECHS/G17.html
The Best Color Functions in CSS? | CSS-Tricks
https://css-tricks.com/the-best-color-functions-in-css/
Gyo / 2021-astrological-transit · GitLab
https://gitlab.com/gyo/2021-astrological-transit
火曜日のおフロ 2021年のアスペクト
https://bit.ly/35qd6PL

React Server Components, レスポンシブデザインでデバイスごとのブレイクポイントをどこで切るか, content-fit, 明度７：１の法則などについて

15:20 Chrome Dev Summit Recap 2020
1:15:25 Nuxt Tailwind v3.4.0 is out with the config viewer ✨
1:23:40 Centering in CSS (CSSで要素を中央に配置する５つの方法)
 
Google Developers Japan: Chrome Dev Summit Recap 2020を開催しました
<a href="https://developers-jp.googleblog.com/2020/12/chrome-dev-summit-recap-2020-report.html">https://developers-jp.googleblog.com/2020/12/chrome-dev-summit-recap-2020-report.html</a>
Houdini.how
<a href="https://houdini.how/">https://houdini.how/</a>
Introducing the Privacy Budget - YouTube
<a href="https://www.youtube.com/watch?v=0STgfjSA6T8">https://www.youtube.com/watch?v=0STgfjSA6T8</a>
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion">https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion</a>
Web Vitals
<a href="https://web.dev/vitals/">https://web.dev/vitals/</a>
$40M to Build the Next Web – Vercel
<a href="https://vercel.com/blog/series-b-40m-to-build-the-next-web">https://vercel.com/blog/series-b-40m-to-build-the-next-web</a>
Nuxt Tailwind v3.4.0 is out with the config viewer ✨
<a href="https://twitter.com/nuxt_js/status/1339630526408384512">https://twitter.com/nuxt_js/status/1339630526408384512</a>
Centering in CSS
<a href="https://web.dev/centering-in-css/">https://web.dev/centering-in-css/</a>

15:20 Chrome Dev Summit Recap 2020
1:15:25 Nuxt Tailwind v3.4.0 is out with the config viewer ✨
1:23:40 Centering in CSS (CSSで要素を中央に配置する５つの方法)

Google Developers Japan: Chrome Dev Summit Recap 2020を開催しました
https://developers-jp.googleblog.com/2020/12/chrome-dev-summit-recap-2020-report.html
Houdini.how
https://houdini.how/
Introducing the Privacy Budget - YouTube
https://www.youtube.com/watch?v=0STgfjSA6T8
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion
Web Vitals
https://web.dev/vitals/
$40M to Build the Next Web – Vercel
https://vercel.com/blog/series-b-40m-to-build-the-next-web
Nuxt Tailwind v3.4.0 is out with the config viewer ✨
https://twitter.com/nuxt_js/status/1339630526408384512
Centering in CSS
https://web.dev/centering-in-css/

Chrome Dev Summit Recap 2020, Houdini, Privacy Budget, Web Vitals, Nuxt Tailwind, Centering in CSS

06:58 M1 Mac
23:25 2020年はTailwindの年 (The State of CSS 2020)
49:30 font-family: system-uiの挙動
1:21:30 input type="number" のハマりどころ
1:29:00 inactive-css
1:33:20 Github Universe 2020
1:43:10 GitHubで最も使われている言語はJavaScript　TypeScriptが急上昇でPHPは下落
 
New – Use Amazon EC2 Mac Instances to Build &amp; Test macOS, iOS, iPadOS, tvOS, and watchOS Apps | AWS News Blog
<a href="https://aws.amazon.com/jp/blogs/aws/new-use-mac-instances-to-build-test-macos-ios-ipados-tvos-and-watchos-apps/">https://aws.amazon.com/jp/blogs/aws/new-use-mac-instances-to-build-test-macos-ios-ipados-tvos-and-watchos-apps/</a>
Amazon EC2 を Arm に切り替えたら幸せなことしかありませんでした | CyberAgent Developers Blog
<a href="https://developers.cyberagent.co.jp/blog/archives/27782/">https://developers.cyberagent.co.jp/blog/archives/27782/</a>
CentOS Project shifts focus to CentOS Stream – Blog.CentOS.org
<a href="https://blog.centos.org/2020/12/future-is-centos-stream/">https://blog.centos.org/2020/12/future-is-centos-stream/</a>
AppleシリコンをサポートしたDockerのプレビュー版が公開 - ソフトアンテナブログ:
<a href="https://www.softantenna.com/wp/software/apple-silicon-docker-preview/">https://www.softantenna.com/wp/software/apple-silicon-docker-preview/</a>
The State of CSS 2020
<a href="https://2020.stateofcss.com/en-US/">https://2020.stateofcss.com/en-US/</a>
翻訳：CSSユーティリティクラスと「関心の分離」（いかにしてユーティリティファーストにたどり着いたか） - yuhei blog
<a href="https://yuheiy.hatenablog.com/entry/2020/05/25/021342">https://yuheiy.hatenablog.com/entry/2020/05/25/021342</a>
RFC: Tailwind Support · Discussion #20030 · vercel/next.js
<a href="https://github.com/vercel/next.js/discussions/20030">https://github.com/vercel/next.js/discussions/20030</a>
rogden/tailwind-config-viewer: A local UI tool for visualizing your Tailwind CSS configuration file.
<a href="https://github.com/rogden/tailwind-config-viewer">https://github.com/rogden/tailwind-config-viewer</a>
Typography &amp; Native HTML Elements - YouTube
<a href="https://www.youtube.com/watch?v=aaro26rK61o&amp;feature=youtu.be&amp;t=39">https://www.youtube.com/watch?v=aaro26rK61o&amp;feature=youtu.be&amp;t=39</a>
CSS Houdini | MDN
<a href="https://developer.mozilla.org/ja/docs/Web/Houdini">https://developer.mozilla.org/ja/docs/Web/Houdini</a>
代表的な総称フォントファミリ
<a href="https://gyo.gitlab.io/ui-alm/font-family/">https://gyo.gitlab.io/ui-alm/font-family/</a>
How to add dark mode to a Gatsby site
<a href="https://www.joshwcomeau.com/react/dark-mode/">https://www.joshwcomeau.com/react/dark-mode/</a>
- HTML: HyperText Markup Language | MDN
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number">https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number</a>
captainbrosset/inactive-css: A list of rules for when CSS properties have no effect
<a href="https://github.com/captainbrosset/inactive-css">https://github.com/captainbrosset/inactive-css</a>
GitHub Universe 2020の基調講演で発表された新機能を紹介、GitHub ActionsのアップデートやDependency reviewなど - クラウド Watch
<a href="https://cloud.watch.impress.co.jp/docs/news/1293969.html">https://cloud.watch.impress.co.jp/docs/news/1293969.html</a>
GitHubで最も使われている言語はJavaScript　TypeScriptが急上昇でPHPは下落 - ITmedia NEWS
<a href="https://www.itmedia.co.jp/news/articles/2012/07/news146.html">https://www.itmedia.co.jp/news/articles/2012/07/news146.html</a>
The State of the Octoverse | The State of the Octoverse explores a year of change with new deep dives into developer productivity, security, and how we build communities on GitHub.
<a href="https://octoverse.github.com/">https://octoverse.github.com/</a>

06:58 M1 Mac
23:25 2020年はTailwindの年 (The State of CSS 2020)
49:30 font-family: system-uiの挙動
1:21:30 input type="number" のハマりどころ
1:29:00 inactive-css
1:33:20 Github Universe 2020
1:43:10 GitHubで最も使われている言語はJavaScript　TypeScriptが急上昇でPHPは下落

New – Use Amazon EC2 Mac Instances to Build & Test macOS, iOS, iPadOS, tvOS, and watchOS Apps | AWS News Blog
https://aws.amazon.com/jp/blogs/aws/new-use-mac-instances-to-build-test-macos-ios-ipados-tvos-and-watchos-apps/
Amazon EC2 を Arm に切り替えたら幸せなことしかありませんでした | CyberAgent Developers Blog
https://developers.cyberagent.co.jp/blog/archives/27782/
CentOS Project shifts focus to CentOS Stream – Blog.CentOS.org
https://blog.centos.org/2020/12/future-is-centos-stream/
AppleシリコンをサポートしたDockerのプレビュー版が公開 - ソフトアンテナブログ:
https://www.softantenna.com/wp/software/apple-silicon-docker-preview/
The State of CSS 2020
https://2020.stateofcss.com/en-US/
翻訳：CSSユーティリティクラスと「関心の分離」（いかにしてユーティリティファーストにたどり着いたか） - yuhei blog
https://yuheiy.hatenablog.com/entry/2020/05/25/021342
RFC: Tailwind Support · Discussion #20030 · vercel/next.js
https://github.com/vercel/next.js/discussions/20030
rogden/tailwind-config-viewer: A local UI tool for visualizing your Tailwind CSS configuration file.
https://github.com/rogden/tailwind-config-viewer
Typography & Native HTML Elements - YouTube
https://www.youtube.com/watch?v=aaro26rK61o&feature=youtu.be&t=39
CSS Houdini | MDN
https://developer.mozilla.org/ja/docs/Web/Houdini
代表的な総称フォントファミリ
https://gyo.gitlab.io/ui-alm/font-family/
How to add dark mode to a Gatsby site
https://www.joshwcomeau.com/react/dark-mode/
- HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number
captainbrosset/inactive-css: A list of rules for when CSS properties have no effect
https://github.com/captainbrosset/inactive-css
GitHub Universe 2020の基調講演で発表された新機能を紹介、GitHub ActionsのアップデートやDependency reviewなど - クラウド Watch
https://cloud.watch.impress.co.jp/docs/news/1293969.html
GitHubで最も使われている言語はJavaScript　TypeScriptが急上昇でPHPは下落 - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/2012/07/news146.html
The State of the Octoverse | The State of the Octoverse explores a year of change with new deep dives into developer productivity, security, and how we build communities on GitHub.
https://octoverse.github.com/

2020年はTailwindの年（The State of CSS）、SSRでDarkmode対応する方法、font-family: system-ui について、Github Universe 2020

東京在住の@igtm, @tmr と ニュージランド在住の@ymdarakeが、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします
 
1:25 Manjaro Linux
25:55 スクラムガイド2020のアップデート
39:00 次世代画像形式のWebP2、AVIF
1:04:57 Tailwind CSS v2.0&nbsp;
1:43:55 JavaScriptの奇妙な挙動：Why Is {} &gt; []?&nbsp;
2:20:10 「火曜日のお風呂」による、最強 font-family 2021年決定版（proposal v0.1）
 
Manjaro - enjoy the simplicity
<a href="https://manjaro.org/">https://manjaro.org/</a>
Scrum Inc. Japan #TeamworkMakesTheDreamWork ｜ スクラムガイド2020のアップデートについて
<a href="https://scruminc.jp/blog/2885/">https://scruminc.jp/blog/2885/</a>
Agile Tool for Web and App Development Teams | Scrum Mate
<a href="https://scrummate.com/">https://scrummate.com/</a>
Scrum Guide | Scrum Guides
<a href="https://www.scrumguides.org/scrum-guide.html">https://www.scrumguides.org/scrum-guide.html</a>
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format - Phoronix
<a href="https://www.phoronix.com/scan.php?page=news_item&amp;px=Google-Experimental-WebP2">https://www.phoronix.com/scan.php?page=news_item&amp;px=Google-Experimental-WebP2</a>
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
<a href="https://ics.media/entry/201001/">https://ics.media/entry/201001/</a>
AVIF：新しい次世代の画像圧縮形式の使い方
<a href="https://lpeg.info/webworks/image_avif.html">https://lpeg.info/webworks/image_avif.html</a>
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
<a href="https://ics.media/entry/2441/">https://ics.media/entry/2441/</a>
AVIF for Next-Generation Image Coding | by Netflix Technology Blog | Netflix TechBlog
<a href="https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4">https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4</a>
Tailwind V2 Released 🎉
<a href="https://devdojo.com/tnylea/tailwind-v2-released">https://devdojo.com/tnylea/tailwind-v2-released</a>
Tailwind CSS v2.0 – Tailwind CSS
<a href="https://blog.tailwindcss.com/tailwindcss-v2">https://blog.tailwindcss.com/tailwindcss-v2</a>
Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer
<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/">https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/</a>
Why Is {} &gt; []?
<a href="https://amyshackles.codes/why-is-empty-object-greater-than-empty-array">https://amyshackles.codes/why-is-empty-object-greater-than-empty-array</a>
Hoisting (巻き上げ、ホイスティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
<a href="https://developer.mozilla.org/ja/docs/Glossary/Hoisting">https://developer.mozilla.org/ja/docs/Glossary/Hoisting</a>
新規タブリンクの恐ろしい仕様、Chrome 88で変更へ ～Safari/Firefoxに合わせた安全な仕様に - やじうまの杜 - 窓の杜
<a href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/1291549.html">https://forest.watch.impress.co.jp/docs/serial/yajiuma/1291549.html</a>

東京在住の@igtm, @tmr と ニュージランド在住の@ymdarakeが、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします

1:25 Manjaro Linux
25:55 スクラムガイド2020のアップデート
39:00 次世代画像形式のWebP2、AVIF
1:04:57 Tailwind CSS v2.0 
1:43:55 JavaScriptの奇妙な挙動：Why Is {} > []? 
2:20:10 「火曜日のお風呂」による、最強 font-family 2021年決定版（proposal v0.1）

Manjaro - enjoy the simplicity
https://manjaro.org/
Scrum Inc. Japan #TeamworkMakesTheDreamWork ｜ スクラムガイド2020のアップデートについて
https://scruminc.jp/blog/2885/
Agile Tool for Web and App Development Teams | Scrum Mate
https://scrummate.com/
Scrum Guide | Scrum Guides
https://www.scrumguides.org/scrum-guide.html
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format - Phoronix
https://www.phoronix.com/scan.php?page=news_item&px=Google-Experimental-WebP2
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
https://ics.media/entry/201001/
AVIF：新しい次世代の画像圧縮形式の使い方
https://lpeg.info/webworks/image_avif.html
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
https://ics.media/entry/2441/
AVIF for Next-Generation Image Coding | by Netflix Technology Blog | Netflix TechBlog
https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
Tailwind V2 Released 🎉
https://devdojo.com/tnylea/tailwind-v2-released
Tailwind CSS v2.0 – Tailwind CSS
https://blog.tailwindcss.com/tailwindcss-v2
Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
Why Is {} > []?
https://amyshackles.codes/why-is-empty-object-greater-than-empty-array
Hoisting (巻き上げ、ホイスティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
https://developer.mozilla.org/ja/docs/Glossary/Hoisting
新規タブリンクの恐ろしい仕様、Chrome 88で変更へ ～Safari/Firefoxに合わせた安全な仕様に - やじうまの杜 - 窓の杜
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1291549.html

次世代画像形式 WebP2とAVIF、JavaScriptの奇妙な挙動（型が異なる値の比較など）、Chrome88で "_blank"時に"rel=noopener"不要に

16:45 Apple M1チップとソフト対応状況
46:20 Google Chrome 87正式版リリース
54:20 GridとFlexboxの違い
1:51:15 Font-Familyって結局何指定したらいいの？
 
Apple SiliconことM1チップ対応Chromeブラウザー、再び公開 - Engadget 日本版
<a href="https://japanese.engadget.com/apple-silicon-m1-chrome-re-release-062002736.html">https://japanese.engadget.com/apple-silicon-m1-chrome-re-release-062002736.html</a>
Docker社、Appleシリコン搭載Mac用の「Docker Desktop」を開発中と表明。Rosetta 2による変換では十分に動かない模様 － Publickey
<a href="https://www.publickey1.jp/blog/20/_dockerapplemacdocker_desktoprosetta_2.html">https://www.publickey1.jp/blog/20/_dockerapplemacdocker_desktoprosetta_2.html</a>
AppleシリコンMacでのインテル系アプリ、初回起動は約20秒かかると判明 - Engadget 日本版
<a href="https://japanese.engadget.com/applesilicon-mac-x64-20seconds-050000703.html">https://japanese.engadget.com/applesilicon-mac-x64-20seconds-050000703.html</a>
Google Chrome 87正式版リリース、ウェブカメラを操作するAPIが搭載される - GIGAZINE
<a href="https://gigazine.net/news/20201118-google-chrome-87/">https://gigazine.net/news/20201118-google-chrome-87/</a>
CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス
<a href="https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html">https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html</a>
グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout</a>
グリッドレイアウトと他のレイアウト方法との関係 - CSS: カスケーディングスタイルシート | MDN
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout</a>
display:table-cell;を安易に使うべきでない理由いろいろ - Qiita
<a href="https://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc">https://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc</a>
基本的なテキストとフォントの装飾 - ウェブ開発を学ぶ | MDN
<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Fundamentals">https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Fundamentals</a>
CSS Fonts Module Level 4
<a href="https://drafts.csswg.org/css-fonts/#generic-font-families">https://drafts.csswg.org/css-fonts/#generic-font-families</a>
15 Best Web Safe HTML &amp; CSS Fonts | websitesetup.org
<a href="https://websitesetup.org/web-safe-fonts-html-css/">https://websitesetup.org/web-safe-fonts-html-css/</a>
CSSで数字だけフォントを変えたい - Qiita
<a href="https://qiita.com/macoshita/items/9901538bbb339b61bfc9">https://qiita.com/macoshita/items/9901538bbb339b61bfc9</a>

16:45 Apple M1チップとソフト対応状況
46:20 Google Chrome 87正式版リリース
54:20 GridとFlexboxの違い
1:51:15 Font-Familyって結局何指定したらいいの？

Apple SiliconことM1チップ対応Chromeブラウザー、再び公開 - Engadget 日本版
https://japanese.engadget.com/apple-silicon-m1-chrome-re-release-062002736.html
Docker社、Appleシリコン搭載Mac用の「Docker Desktop」を開発中と表明。Rosetta 2による変換では十分に動かない模様 － Publickey
https://www.publickey1.jp/blog/20/_dockerapplemacdocker_desktoprosetta_2.html
AppleシリコンMacでのインテル系アプリ、初回起動は約20秒かかると判明 - Engadget 日本版
https://japanese.engadget.com/applesilicon-mac-x64-20seconds-050000703.html
Google Chrome 87正式版リリース、ウェブカメラを操作するAPIが搭載される - GIGAZINE
https://gigazine.net/news/20201118-google-chrome-87/
CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス
https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html
グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
グリッドレイアウトと他のレイアウト方法との関係 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
display:table-cell;を安易に使うべきでない理由いろいろ - Qiita
https://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc
基本的なテキストとフォントの装飾 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Fundamentals
CSS Fonts Module Level 4
https://drafts.csswg.org/css-fonts/#generic-font-families
15 Best Web Safe HTML & CSS Fonts | websitesetup.org
https://websitesetup.org/web-safe-fonts-html-css/
CSSで数字だけフォントを変えたい - Qiita
https://qiita.com/macoshita/items/9901538bbb339b61bfc9

Apple M1チップとソフト対応状況、Google Chrome 87正式版リリース、GridとFlexboxの違い、Font-Familyって結局何指定したらいいの？について

9:55 Firebase Summit 2020
22:02 Apple M1 チップ
 
Firebase Summit 2020のまとめと所感 https://nabettu.com/9359dcae953248e0b001046b0b49459c Apple、M1チップを発表 - Apple (日本) https://www.apple.com/jp/newsroom/2020/11/apple-unleashes-m1/ Adobe Apps Not Officially Supported on Apple Silicon Running Rosetta 2 https://petapixel.com/2020/11/13/adobe-apps-not-officially-supported-on-apple-silicon-running-rosetta-2/ Aesthetics Over Usability — Google's New App Icons https://blog.moeminmamdouh.com/aesthetics-over-usability-googles-new-app-icons Chrome Extensions You Should Install Today https://nialljoemaher.hashnode.dev/chrome-extensions-you-should-install-today AutoPagerize - Chrome ウェブストア https://chrome.google.com/webstore/detail/autopagerize/igiofjhpmpihnifddepnpngfjhkfenbp Duplicate Tab Shortcut - Chrome ウェブストア https://chrome.google.com/webstore/detail/duplicate-tab-shortcut/klehggjefofgiajjfpoebdidnpjmljhb EditThisCookie - Chrome ウェブストア https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg Keepa - Amazon Price Tracker - Chrome ウェブストア https://chrome.google.com/webstore/detail/keepa-amazon-price-tracke/neebplgakaahbhdphmkckjjcegoiijjo Octotree - GitHub code tree - Chrome ウェブストア https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc Talend API Tester - Free Edition - Chrome ウェブストア https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm TabCopy - Chrome ウェブストア https://chrome.google.com/webstore/detail/tabcopy/micdllihgoppmejpecmkilggmaagfdmb Link to Text Fragment - Chrome ウェブストア https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg

9:55 Firebase Summit 2020
22:02 Apple M1 チップ

Firebase Summit 2020のまとめと所感 https://nabettu.com/9359dcae953248e0b001046b0b49459c Apple、M1チップを発表 - Apple (日本) https://www.apple.com/jp/newsroom/2020/11/apple-unleashes-m1/ Adobe Apps Not Officially Supported on Apple Silicon Running Rosetta 2 https://petapixel.com/2020/11/13/adobe-apps-not-officially-supported-on-apple-silicon-running-rosetta-2/ Aesthetics Over Usability — Google's New App Icons https://blog.moeminmamdouh.com/aesthetics-over-usability-googles-new-app-icons Chrome Extensions You Should Install Today https://nialljoemaher.hashnode.dev/chrome-extensions-you-should-install-today AutoPagerize - Chrome ウェブストア https://chrome.google.com/webstore/detail/autopagerize/igiofjhpmpihnifddepnpngfjhkfenbp Duplicate Tab Shortcut - Chrome ウェブストア https://chrome.google.com/webstore/detail/duplicate-tab-shortcut/klehggjefofgiajjfpoebdidnpjmljhb EditThisCookie - Chrome ウェブストア https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg Keepa - Amazon Price Tracker - Chrome ウェブストア https://chrome.google.com/webstore/detail/keepa-amazon-price-tracke/neebplgakaahbhdphmkckjjcegoiijjo Octotree - GitHub code tree - Chrome ウェブストア https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc Talend API Tester - Free Edition - Chrome ウェブストア https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm TabCopy - Chrome ウェブストア https://chrome.google.com/webstore/detail/tabcopy/micdllihgoppmejpecmkilggmaagfdmb Link to Text Fragment - Chrome ウェブストア https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg

Firebase Summit 2020, AppleM1チップ, オススメのChrome Extension, 最強のFont-familyについて

Next.js の状態管理 2020
<a href="https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020">https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020</a>
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
<a href="https://qiita.com/jagaapple/items/faf125e28f8c2860269c">https://qiita.com/jagaapple/items/faf125e28f8c2860269c</a>
Recoil
<a href="https://recoiljs.org/">https://recoiljs.org/</a>
binder | Flutter Package
<a href="https://pub.dev/packages/binder">https://pub.dev/packages/binder</a>
週刊 Dart & Flutter インプット 43. 毎週金曜日に、@ntaoo がインプットした Dart & Flutter… | by ntaoo | Nov, 2020 | Medium
<a href="https://medium.com/@ntaoo/%E9%80%B1%E5%88%8A-dart-flutter-%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88-43-8273fd9f09fc">https://medium.com/@ntaoo/%E9%80%B1%E5%88%8A-dart-flutter-%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88-43-8273fd9f09fc</a>
content-visibility: the new CSS property that boosts your rendering performance
<a href="https://web.dev/content-visibility/">https://web.dev/content-visibility/</a>
React Virtuoso: virtual list component + batteries included
<a href="https://virtuoso.dev/">https://virtuoso.dev/</a>
「スマホでのコンテンツ視聴に占める広告の比率調査」を実施｜株式会社KADOKAWAのプレスリリース
<a href="https://prtimes.jp/main/html/rd/p/000007697.000007006.html">https://prtimes.jp/main/html/rd/p/000007697.000007006.html</a>
TeaEAT｜ティート ｜ TEAtriCO｜ティートリコ
<a href="https://teatrico.jp/teat/">https://teatrico.jp/teat/</a>
知恩院サウンドセラピー | 浄土宗総本山 知恩院
<a href="https://www.chion-in.or.jp/soundtherapy/">https://www.chion-in.or.jp/soundtherapy/</a>

Next.js の状態管理 2020
https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
https://qiita.com/jagaapple/items/faf125e28f8c2860269c
Recoil
https://recoiljs.org/
binder | Flutter Package
https://pub.dev/packages/binder
週刊 Dart & Flutter インプット 43. 毎週金曜日に、@ntaoo がインプットした Dart & Flutter… | by ntaoo | Nov, 2020 | Medium
https://medium.com/@ntaoo/%E9%80%B1%E5%88%8A-dart-flutter-%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88-43-8273fd9f09fc
content-visibility: the new CSS property that boosts your rendering performance
https://web.dev/content-visibility/
React Virtuoso: virtual list component + batteries included
https://virtuoso.dev/
「スマホでのコンテンツ視聴に占める広告の比率調査」を実施｜株式会社KADOKAWAのプレスリリース
https://prtimes.jp/main/html/rd/p/000007697.000007006.html
TeaEAT｜ティート ｜ TEAtriCO｜ティートリコ
https://teatrico.jp/teat/
知恩院サウンドセラピー | 浄土宗総本山 知恩院
https://www.chion-in.or.jp/soundtherapy/

Next.jsの状態管理、ReactのRecoilとFlutterのbinder、仮想スクロールとcontent-visibility、占星術、座禅、フルーツティー、サウンドセラピーなどについて

yewstack/yew: Rust / Wasm framework for building client web apps
<a href="https://github.com/yewstack/yew">https://github.com/yewstack/yew</a>
React v17.0 – React Blog
<a href="https://reactjs.org/blog/2020/10/20/react-v17.html">https://reactjs.org/blog/2020/10/20/react-v17.html</a>
Blog - Next.js 10 | Next.js
<a href="https://nextjs.org/blog/next-10">https://nextjs.org/blog/next-10</a>
Say No to Faux Bold – A List Apart
<a href="https://alistapart.com/article/say-no-to-faux-bold/">https://alistapart.com/article/say-no-to-faux-bold/</a>
Web フォントを使うときの注意点
<a href="https://gyo.gitlab.io/ui-alm/web-font/">https://gyo.gitlab.io/ui-alm/web-font/</a>
【真夜中のOpenTypeフィーチャー講座】 / Twitter
<a href="https://twitter.com/monokano/status/834444809263730688">https://twitter.com/monokano/status/834444809263730688</a>
Adobe Fonts User Guide
<a href="https://helpx.adobe.com/jp/fonts/user-guide.html/jp/fonts/using/open-type-syntax.ug.html">https://helpx.adobe.com/jp/fonts/user-guide.html/jp/fonts/using/open-type-syntax.ug.html</a>

yewstack/yew: Rust / Wasm framework for building client web apps
https://github.com/yewstack/yew
React v17.0 – React Blog
https://reactjs.org/blog/2020/10/20/react-v17.html
Blog - Next.js 10 | Next.js
https://nextjs.org/blog/next-10
Say No to Faux Bold – A List Apart
https://alistapart.com/article/say-no-to-faux-bold/
Web フォントを使うときの注意点
https://gyo.gitlab.io/ui-alm/web-font/
【真夜中のOpenTypeフィーチャー講座】 / Twitter
https://twitter.com/monokano/status/834444809263730688
Adobe Fonts User Guide
https://helpx.adobe.com/jp/fonts/user-guide.html/jp/fonts/using/open-type-syntax.ug.html

ブラウザがbold,italicなFontを自動で作っちゃう件（@font-face）,プロポーショナルメトリクス,自動カーニング,Web Assembly(Rust), Next.js 10

Webpack 5 release (2020-10-10) | webpack
<a href="https://webpack.js.org/blog/2020-10-10-webpack-5-release/">https://webpack.js.org/blog/2020-10-10-webpack-5-release/</a>
evanw/esbuild: An extremely fast JavaScript bundler and minifier
<a href="https://github.com/evanw/esbuild">https://github.com/evanw/esbuild</a>
iPhone 12とiPhone 12 mini - Apple（日本）
<a href="https://www.apple.com/jp/iphone-12/">https://www.apple.com/jp/iphone-12/</a>
Google Pixel スマートフォン - Google ストア
<a href="https://store.google.com/jp/magazine/compare_pixel">https://store.google.com/jp/magazine/compare_pixel</a>
ドバイに移住しリモート環境で働く機会を提供する「バーチャル・ワーキング・プログラム」が開始 | TechCrunch Japan
<a href="https://jp.techcrunch.com/2020/10/16/live-and-work-remotely-in-dubai/">https://jp.techcrunch.com/2020/10/16/live-and-work-remotely-in-dubai/</a>
クボタが目指す“完全無人農機”、AI開発にNVIDIAをエンドツーエンドで採用
<a href="https://monoist.atmarkit.co.jp/mn/articles/2010/08/news044.html">https://monoist.atmarkit.co.jp/mn/articles/2010/08/news044.html</a>
生産者のこだわりが正当に評価される世界へ
<a href="https://vivid-garden.co.jp/">https://vivid-garden.co.jp/</a>
f7キーを押してもカタカナに変換されません - Google Chrome Community
<a href="https://support.google.com/chrome/thread/75613650?hl=ja">https://support.google.com/chrome/thread/75613650?hl=ja</a>

Webpack 5 release (2020-10-10) | webpack
https://webpack.js.org/blog/2020-10-10-webpack-5-release/
evanw/esbuild: An extremely fast JavaScript bundler and minifier
https://github.com/evanw/esbuild
iPhone 12とiPhone 12 mini - Apple（日本）
https://www.apple.com/jp/iphone-12/
Google Pixel スマートフォン - Google ストア
https://store.google.com/jp/magazine/compare_pixel
ドバイに移住しリモート環境で働く機会を提供する「バーチャル・ワーキング・プログラム」が開始 | TechCrunch Japan
https://jp.techcrunch.com/2020/10/16/live-and-work-remotely-in-dubai/
クボタが目指す“完全無人農機”、AI開発にNVIDIAをエンドツーエンドで採用
https://monoist.atmarkit.co.jp/mn/articles/2010/08/news044.html
生産者のこだわりが正当に評価される世界へ
https://vivid-garden.co.jp/
f7キーを押してもカタカナに変換されません - Google Chrome Community
https://support.google.com/chrome/thread/75613650?hl=ja

Webpack 5、iPhone 12、ドバイのバーチャル・ワーキング・プログラム、AgriTech、カーソルブラウジングとF7、占星術の使い方、自作PCのその後、などについて

00:05:20 自作PC
00:53:00 将棋ソフト・竜王戦第一局
01:20:10 Chromeのバージョン84以降で「もっと見る」の挙動が変な件
01:35:10 New in Chrome 86
01:47:10 CSS in JS/Shadow DOM
02:03:50 Flashゲーム
 
GPU：GeForce RTX 3080
<a href="https://amzn.to/2GSugMx">https://amzn.to/2GSugMx</a>
CPU：Ryzen 9 RTX 3900X
<a href="https://amzn.to/2SJuNTI">https://amzn.to/2SJuNTI</a>
マザーボード：X570 STEEL LEGEND
<a href="https://amzn.to/3lpphBM">https://amzn.to/3lpphBM</a>
CPUクーラー：NH-U12a
<a href="https://kakaku.com/item/K0001152530/">https://kakaku.com/item/K0001152530/</a>
電源：RM850 CP-9020196-JP
<a href="https://amzn.to/30QpBSo">https://amzn.to/30QpBSo</a>
メモリ：CFD
<a href="https://amzn.to/36Oz2FJ">https://amzn.to/36Oz2FJ</a>
SSD：ADATA XPG GAMMIX S50 1TB SSD NVMe PCIe Gen4
<a href="https://amzn.to/3jKK2Yo">https://amzn.to/3jKK2Yo</a>
rbreaves/kinto: A better Linux &amp; Windows keyboard layout for professional mac users
<a href="https://github.com/rbreaves/kinto">https://github.com/rbreaves/kinto</a>
将棋・電王戦でコンピューター将棋ソフト"GPS将棋"側が使用した東大・駒場キャンパスにある約670台のiMacが話題に | AAPL Ch.
<a href="https://applech2.com/archives/26981849.html">https://applech2.com/archives/26981849.html</a>
Real time communication at scale with Elixir at Discord
<a href="https://elixir-lang.org/blog/2020/10/08/real-time-communication-at-scale-with-elixir-at-discord/">https://elixir-lang.org/blog/2020/10/08/real-time-communication-at-scale-with-elixir-at-discord/</a>
Chromeのバージョン84以降で「もっと見る」の挙動が変な件
<a href="https://zenn.dev/nontan/articles/0cd8ea48bdf05faf1c26">https://zenn.dev/nontan/articles/0cd8ea48bdf05faf1c26</a>
Scroll anchoring for web developers Tuesday, April 11, 2017
<a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html</a>
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog
<a href="https://developers.cyberagent.co.jp/blog/archives/636/">https://developers.cyberagent.co.jp/blog/archives/636/</a>
New in Chrome 86 | Web | Google Developers
<a href="https://developers.google.com/web/updates/2020/10/nic86">https://developers.google.com/web/updates/2020/10/nic86</a>
New in Chrome 86: File System Access, WebHID, new CSS features, and more! - YouTube
<a href="https://www.youtube.com/watch?v=GNuG-5m4Ud0">https://www.youtube.com/watch?v=GNuG-5m4Ud0</a>
次の時代のCSS in JSはWeb Componentsを従える
<a href="https://zenn.dev/uhyo/articles/next-gen-css-in-js">https://zenn.dev/uhyo/articles/next-gen-css-in-js</a>
今年サービス終了の伝説の鬼畜ゲー【オワタの大冒険2】 - YouTube
<a href="https://www.youtube.com/watch?v=H3f0W3jgu2s">https://www.youtube.com/watch?v=H3f0W3jgu2s</a>
障害物を動かす その１ | 初心者からクリエイター志望まで Flashゲームの作り方 入門
<a href="https://www.greenowl5.com/lv0game/lv01/lv01_100.html">https://www.greenowl5.com/lv0game/lv01/lv01_100.html</a>
FLASHからHTML 5 CANVASへの移行について
<a href="https://kumastudio.amebaownd.com/posts/6751382/">https://kumastudio.amebaownd.com/posts/6751382/</a>

00:05:20 自作PC
00:53:00 将棋ソフト・竜王戦第一局
01:20:10 Chromeのバージョン84以降で「もっと見る」の挙動が変な件
01:35:10 New in Chrome 86
01:47:10 CSS in JS/Shadow DOM
02:03:50 Flashゲーム

GPU：GeForce RTX 3080
https://amzn.to/2GSugMx
CPU：Ryzen 9 RTX 3900X
https://amzn.to/2SJuNTI
マザーボード：X570 STEEL LEGEND
https://amzn.to/3lpphBM
CPUクーラー：NH-U12a
https://kakaku.com/item/K0001152530/
電源：RM850 CP-9020196-JP
https://amzn.to/30QpBSo
メモリ：CFD
https://amzn.to/36Oz2FJ
SSD：ADATA XPG GAMMIX S50 1TB SSD NVMe PCIe Gen4
https://amzn.to/3jKK2Yo
rbreaves/kinto: A better Linux & Windows keyboard layout for professional mac users
https://github.com/rbreaves/kinto
将棋・電王戦でコンピューター将棋ソフト"GPS将棋"側が使用した東大・駒場キャンパスにある約670台のiMacが話題に | AAPL Ch.
https://applech2.com/archives/26981849.html
Real time communication at scale with Elixir at Discord
https://elixir-lang.org/blog/2020/10/08/real-time-communication-at-scale-with-elixir-at-discord/
Chromeのバージョン84以降で「もっと見る」の挙動が変な件
https://zenn.dev/nontan/articles/0cd8ea48bdf05faf1c26
Scroll anchoring for web developers Tuesday, April 11, 2017
https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog
https://developers.cyberagent.co.jp/blog/archives/636/
New in Chrome 86 | Web | Google Developers
https://developers.google.com/web/updates/2020/10/nic86
New in Chrome 86: File System Access, WebHID, new CSS features, and more! - YouTube
https://www.youtube.com/watch?v=GNuG-5m4Ud0
次の時代のCSS in JSはWeb Componentsを従える
https://zenn.dev/uhyo/articles/next-gen-css-in-js
今年サービス終了の伝説の鬼畜ゲー【オワタの大冒険2】 - YouTube
https://www.youtube.com/watch?v=H3f0W3jgu2s
障害物を動かす その１ | 初心者からクリエイター志望まで Flashゲームの作り方 入門
https://www.greenowl5.com/lv0game/lv01/lv01_100.html
FLASHからHTML 5 CANVASへの移行について
https://kumastudio.amebaownd.com/posts/6751382/