火曜日のおフロ
By igtm, tmr, ymdarake
tue-ofuro.vercel.app/
火曜日のおフロJan 13, 2024
TaxyAI, ChatGPT, NUI, コルーチン, Generator, mix-blend-mode
Safari 17.2, CSS 2023, Tailwind v3.4
WebKit Features in Safari 17.2 | WebKit
ハンズオン 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
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化 | blog.jxck.io
WASM, Type Scaling, attr(), ACT Rules, WebAIM
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
音楽、数学、タイポグラフィ - シフトブレイン／スタンダードデザインユニット
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?
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
デジタル庁Webアクセシビリティー, JISS X 8341-3:2016, miChecker, Void element
デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開 非技術者向け、専門用語は少なめに - ITmedia NEWS
JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）
総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0
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.phpChrome 108(svh/lvh/dvh), lch/oklch WCAG 2.1, axe-core, XState
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
Google Online Security Blog: Memory Safe Languages in Android 13
今週のはてなブログランキング〔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
Typescript4.9 (satisfies), Nextjs13, Twitter backend architecture
Announcing TypeScript 4.9 - TypeScript
type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; type Palette = Record & { 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は書き方が便利になるだけ
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
Twitter alternative, Sapling (Git alternative written in Rust), HSTS Preload, OpenSSL 3.x.x, Structural Subtyping
cohost! - "October 2022 Financial Update"
Kizie - A better Twitter app for Web
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.
【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適
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（コードジン）
Chrome 108, Viewport on Android, SVG sprite
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
Intent to Ship: CSS Overflow for replaced elements
SVG sprites: old-school, modern, unknown, and forgotten — Vadim Makeev
RUST, JSONC, TOML, openapi-yup-generator, ri-calculator, TUI, Nextjs 13, Turbopack
ゼロからはじめるJavaScript(18) 可読性と表現力の高いデータ形式「JSONC」を活用しよう | TECH+（テックプラス）
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 - fdehau/tui-rs: Build terminal user interfaces and dashboards using Rust
Kubernetesを操作するターミナル用ツール、K9sとKDashを紹介 | Think IT（シンクイット）
GitHub - Geal/nom: Rust parser combinator framework
組込み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
Introducing Turbopack: Rust-based successor to Webpack – Vercel
GitHub - ogham/exa: A modern replacement for ‘ls’.
Design System, Font-Family, .well-known/change-password
デザインシステムにおけるタイポグラフィーの試行錯誤 - DMM inside
ios13から日本語フォントのboldがより太くなるケース - Qiita
Takeru Suzuki (@terkel) | Twitter
2022年に最適なfont-familyの書き方 - ICS MEDIA
State of JS 2022 Preliminary Discussions · Issue #47 · Devographics/surveys · GitHub
board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月） - ヴェルク - IT起業の記録
知ってるようで知らないRefererとReferrer-Policyのお話 - Qiita
Apple、開発者やデザイナー向けに「Human Interface Guidelines」の更新履歴を公開。
:has() - The CSS Podcast - YouTube
Help users change passwords easily by adding a well-known URL for changing passwords
Critical CSS, CommonJS vs ESM, Design
Critical CSS? Not So Fast! – CSS Wizardry – Web Performance Optimisation
tdarb.org / Making a Website Under 1kB
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デザインの改善事例。｜アプリマーケティング研究所
:has(), Infinite Scrolling, Topics API
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
Bun, Zig/Rust, Next.js Conf, Chrome 105
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画 － Publickey
ホーム ⚡ Zig Programming Language
Rust-based platform for the Web – SWC
Deno - A modern runtime for JavaScript and TypeScript
なぜ Zig の採用を検討しているのか. かなり雑に書いてるので、雑に読んでください。 | by V | Jul, 2022 | Medium
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
https://twitter.com/yuxiao_he/status/1565865694402469888
OpenProps, mdx(docusaurus), 擬似クラス, border-color, unicode regex, Emojipedia
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
Variable Units, State of CSS 2022, bfcache, nanoid
CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」 | コリス
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
Centering CSS, DIDs. WAI-ARIA, Font Subsetting
How to Center a Div with CSS – 10 Different Ways
W3C、中央集権的な管理を不要にする「Decentralized Identifiers (DIDs)」（分散型識別子）の仕様が勧告に到達 － Publickey
JSON-LD - JSON for Linking Data
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
normalize.css, Body Margin 8px, input type=number, webfont
open-props/normalize.css at main · argyleink/open-props · GitHub
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法 | コリス
Body Margin 8px | Miriam Eric Suzanne
- HTML: HyperText Markup Language | MDN
4.10.5.1.12 Number state (type=number)
Avoiding layout shifts: aspect-ratio vs width & height attributes - JakeArchibald.com
月間利用者数500万人超え！ 症状検索エンジン「ユビー」の誰もが使いやすい、見やすいフォントへのこだわりとは｜モリサワ note編集部
Next.js 12.2, reset.css, Safari Styling Hacks
line-height と vertical-align の話（em-square）
Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
SWC plugin を作成して Next.js に導入してみた
IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css | コリス
GitHub - filipelinhares/ress: 🚿 A modern CSS reset
- HTML: HyperText Markup Language | MDN
: フィールドセット要素 - HTML: HyperText Markup Language | MDN
Using the fieldset and legend elements - Accessibility in government
HTML フォームへの高度なスタイル設定 - ウェブ開発を学ぶ | MDN
Safari 14.1 未満のバージョンに Flexbox の gap プロパティのフォールバックスタイルを追加するための CSS ハック | Johnykei.net
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ – Webrandum
https://twitter.com/derSchepp/status/1346513882664357888
名古屋大学に不正アクセス 「ブラインドSQLインジェクション」攻撃でメアド2086件漏えいか - ITmedia NEWS
HTTP Status Code 103, Chrome 103, ES2022
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 · Discussion #16854 · vercel/next.js
@font-face - CSS: カスケーディングスタイルシート | MDN
GitHub、AIプログラミング機能「Copilot」の一般提供開始 月額10ドル - ITmedia NEWS
認知プロセスとデザイン、HTTP/3
Safari 16 Beta (WebPush), Human Interface Guidelines, webp avif webm HLS ...
News from WWDC22: WebKit Features in Safari 16 Beta | WebKit
Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer
Data Entry - Patterns - Human Interface Guidelines - Design - Apple Developer
複雑な React コンポーネントを JSX のネストで表現する
Performance insights: Get actionable insights on your website's performance - Chrome Developers
H.264 H.265のコーデック・プロファイル・レベルとは | 動画サイト運営ノウハウブログ by ソーシャルキャスト
Layout RFC of Nextjs, zoom無効化について, css moduleのその後
State of CSS 2022 (interop 2022)
Dialog要素, toggle-root, コンテンツカテゴリー, アウトラインアルゴリズムの変更
Chrome 100, React 18 で追加された新しいhooks(useTransition, useDeferredValue)
What's New In DevTools (Chrome 100) - Chrome Developers
New in Chrome 100 - Chrome Developers
useTransition() vs useDeferredValue | React 18 - YouTube
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
Type Syntax in Javascript, Typescript4.6, Nextjs 12.1, React 18, CSS @layer,
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
New in Chrome 99 - Chrome Developers
JavaScriptに「型」を ～Microsoftが新構文を提案へ - 窓の杜
A Proposal For Type Syntax in JavaScript - TypeScript
ついにTypeScriptがブラウザで動くようになりそう 〜 JavaScriptへの型構文の導入について - Qiita
Announcing TypeScript 4.6 - TypeScript
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
oklab/oklchとlab/lchの違い, The State of JS 2021, Wasm VM
達成基準 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
自作ブラウザを拡張する作業配信 - ローカル変数をJavaScriptインタプリタに追加する #low_layer_girls - YouTube
tamux参考
third_party/blink/renderer/core/dom/text.cc - chromium/src - Git at Google
requestAnimationFrameとrequestIdleCallback, Typescript 4.6 beta
【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
HTML Living Standard, Origin Trials, 2022年のCSS
2022年のブラウザとウェブ標準：新春特別企画｜gihyo.jp … 技術評論社
Web 標準化のフィードバックサイクルを円滑にする Origin Trials について | blog.jxck.io
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
tc39-notes 読んで見る, 正規表現のパフォーマンス問題, A-Frameで作るWebVR など
tc39-notes/meetings at master · rwaldron/tc39-notes
DenoがTypeScriptの使用をやめる5つの理由 - Qiita
ECMAScript® 2021 Language Specification
tc39/test262: Official ECMAScript Conformance Test Suite
notes/oct-27.md at master · tc39/notes
VRコンテンツをHTMLとJavascriptで作る | アシアルブログ
aframe-extras/grab.js at master · n5ro/aframe-extras
CSS of 2021, React Conf, Suspense for data fetching
重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
Thinking on ways to solve TOASTS - YouTube
CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方 | コリス
Document.getAnimations() - Web API | MDN
: 出力要素 - HTML: HyperText Markup Language | MDN
Streaming Server Rendering with Suspense - YouTube
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
Suspense | React Query | TanStack
A Complete Guide to Grid - CSS-Tricks
これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る – WPJ
レイアウトシフトの問題は解消、ユーザーの誤タップも減る LINE NEWSが独自のSkeletonScreen実装した理由 - ログミーTech
Chrome96, Typescript4.5, AMPの終焉, wbrタグなど
New in Chrome 96 - Chrome Developers
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
Chrome Dev Summit 2021, npm package "coa"
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
Nextjs 12, Connect 2021, Jamstack Survey, Material You, Fontのはなし
Jamming into the Mainstream: Jamstack Community Survey 2021 | Jamstack
AddyOsmani.com - Browser-Sync: Sync Scrolls, Clicks, Forms And Edits In Multiple Browsers For Free
Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
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
Next.jsのmiddlewareはVercel以外でも問題なく使えるか
Make Create-React-App Faster with Rust | by Jeong Woo Chang | Medium
RustでProtocol BuffersからGraphQL BFFを自動生成してみた知見 | Wantedly Engineer Blog
Pixel 6 Pro vs iPhone 13 Pro、どっちがいいの？ - YouTube
#7 佐野実生（コンセント）「『わかりやすく伝える』ための書体選び」【GAAD Japan 2020】 - YouTube
Nuxt.js 3 beta, Nominal Typing vs Structual Typing vs Duck Typing, Material You
Google Meetの背景ぼかし技術(wasm SIMD), ライブ配信プロトコル(RTMP, HLS, MPEG-DASH), BlinkとGecko, Typescript 4.5 Template Literal Type, CSS小ネタ(list-style-type)
React Native for Webのこれまでから読み解くReact GUIのこれから - Speaker Deck
list-style-type - CSS: カスケーディングスタイルシート | MDN
How Blink works - Google ドキュメント
JavaScript 処理系 V8 とレンダリングエンジン Blink のアーキテクチャ
Source/core/css/parser/CSSParser.cpp - chromium/blink - Git at Google
なぜGoogle Meetの背景ぼかしが最強なのか（一般公開版）
Material UI v5, 有償版 MUI X Pro, GridのLayoutShift
音声遅延, 海底ケーブル JUPITER, iPhone 13, Safari 15, iOS 15のプライベートリレー, APCA(色のコントラスト)
データサイエンティスト検定™ リテラシーレベル | 一般社団法人 データサイエンティスト協会
世界100万kmの海底ケーブル、地理と速度と冗長性を考える 「その経路、本当に冗長ですか？」【IIJ Technical DAY 2019】 - INTERNET Watch
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
Epic&Apple, React Code Splitting, Lazy loading, Material You, DevTools Chrome 94
EpicとAppleの『フォートナイト』裁判が決着。Apple独自決済の強制などが反競争的と認められ、該当規約の削除が言い渡される
Epic Games対Apple訴訟 - Wikipedia
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
Webviewアプリの話、Android 12, iOS15, iPhone13 RogPhone5, Next.js Conf
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
Chrome93, Nextjs ISRを Vercel以外でやる方法, s-maxageと max-ageの違い, オンラインゲームのラグについて
知ってると役立つかもしれない 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のような挙動を実現する
Migrating Notion's marketing site to Next.js
Advanced Features: Dynamic Import | Next.js
[CEDEC 2010]ネットゲームの裏で何が起こっているのか。ネットワークエンジニアから見た，ゲームデザインの大原則
「エーペックス」の仕組み:開発者によるサーバーとネットコードの解説
SMPTE2110とwebrtcのSDIゲートウエイを使わない連携 | mixi developers
WebComponentsとReactの相性, Typescript 4.4, Chrome 93, CSS Container Queries
メルカリShops のフロントエンド | メルカリエンジニアリング
新しいメルカリDesign System Web | メルカリエンジニアリング
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
CORS, 2021 Scroll Survey Report, VSCode Server, Next.js 11.1, getServerSideProps, JSの末尾再帰最適
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
react-gui, React.FC vs Function, ReactのCSSどれがいいのか
10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design gyo.gitlab.io
Airbnb React/JSX Style Guide | Airbnb JavaScript Style Guide
TypeScript + React: Why I don't use React.FC
Facebook、どんな話題にも対応できるAIチャットボット「BlenderBot 2.0」オープンソースで公開。会話しつつ裏でネット検索し最新情報を取得 － Publickey
「スタディサプリ」が React Native から卒業するまで、あるいは技術的負債への感謝と敬意 - Quipper Product Team Blog
Basic Features: Layouts | Next.js
https://ja.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs
line-height と vertical-align の話（em-square）
55:50 本編スタート
SVGが特定のサイズ以下でずれる現象の原因と解決策 · nametake.info
Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
The Dilemma of Naming Font Size Variables | CSS-Tricks
font - CSS: カスケーディングスタイルシート | MDN
「早くリリースして、早く改善しよう」の落とし穴―― 開発畑のプロダクトマネージャーの失敗から学べ (2/4)：ProductZine（プロダクトジン）
データマネジメントが30分でわかる本 | ゆずたそ, はせりょ, ゆずたそ | 経営情報システム | Kindleストア | Amazon
Typescript 4.4 Beta, Github Copilot, Server Driven UI, OpenTypeのchws/vchw
Announcing TypeScript 4.4 Beta | TypeScript Google TypeScript Style Guide
GitHub Copilot · Your AI pair programmer
Google Japan Blog: サードパーティ Cookie 廃止に関するタイムラインの変更について
全角約物が連続したときのアキを調整する | Webフォント・サービス FONTPLUS
レタースペーシング タイポグラフィにおける文字間調整の考え方
server-driven-ui · GitHub Topics
Release Notes for Safari Technology Preview 127 | WebKit
CSS Color Module Level 4 （日本語訳）
Yoga Layout | A cross-platform layout engine
beagle-web-react/component.tsx at master · ZupIT/beagle-web-react
Safari Technology Preview 126, タイムスタンプ文字列, Wasmer 2.0, Flutter Hooks, ES2021, Windows 11
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/
polyfill-library, Next.js Conf, React 18などについて
ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
https://developers.cyberagent.co.jp/blog/archives/30373/
https://abema.tv/polyfill.fd0550eafa7b16148ccb.jsFinancial-Times/polyfill-useragent-normaliser
https://github.com/Financial-Times/polyfill-useragent-normaliser
Next.js 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.
Introducing Aurora
https://web.dev/introducing-aurora/
Conformance for Frameworks
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
Minecraft 1.17, Web font, React 18, deno 1.11, React 並列モード
Java Edition 1.17 - Minecraft Wiki
https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17
Best practices for fonts
https://web.dev/font-best-practices/
CSS size-adjust for @font-face
https://web.dev/css-size-adjust/
デジタル庁（準備中）さんはTwitterを使っています / Twitter
https://twitter.com/digital_jpn/status/1402419950199795712
The Plan for React 18 – React Blog
https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
ReactさんはTwitterを使っています / Twitter
https://twitter.com/reactjs/status/1403060135514329092
並列モードの導入（実験的機能） – React
https://ja.reactjs.org/docs/concurrent-mode-intro.html
Deno 1.11 Release Notes | Deno Blog
Building a color scheme
https://web.dev/building-a-color-scheme/
Steve Jobs on privacy, Steve Jobs at the D8 Conference (Video) - YouTube
https://www.youtube.com/watch?v=39iKLwlUqBo
Web Font重い問題、JSのtry catch finallyの変わった挙動、Tailwind CSS
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