火曜日のおフロ
ചാനൽ വിവരങ്ങൾ
火曜日のおフロ
@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。 https://tue-ofuro.vercel.app/
സമീപകാല എപ്പിസോഡുകൾ
80 എപ്പിസോഡുകൾ
TaxyAI, ChatGPT, NUI, コルーチン, Generator, mix-blend-mode
GitHub - TaxyAI/browser-extension: Automate your
browser with GPT-4
LLMが変える、ユーザインターフェースの未来|Dory
JSやPython...

Safari 17.2, CSS 2023, Tailwind v3.4
WebKit Features in Safari 17.2 | WebKit
GitHub - promptfoo/promptfoo: Test your prompts, models, RAGs. Evaluate and compare LLM outputs, catch r...

WASM, Type Scaling, attr(), ACT Rules, WebAIM
SQLite3 WASM JS、試すメモ|SQLite3 WASM(WebAssembly) 初級編、CMS作成など
GitHub - igtm/mdclient: Markdown Viewer Chrome Extension for Github

デジタル庁Webアクセシビリティー, JISS X 8341-3:2016, miChecker, Void element
デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開 非技術者向け、専門用語は少なめに - ITmedia NEWS
JIS X 8341-3:2016 達成基準 早...

Chrome 108(svh/lvh/dvh), lch/oklch WCAG 2.1, axe-core, XState
ブログ: 日本のウェブデザインの特異な事例
New in Chrome 108 - Chrome
Developers
Prepare for viewport resize
behavior...

Typescript4.9 (satisfies), Nextjs13, Twitter backend architecture
Announcing TypeScript
4.9 - TypeScript
"satisfies" operator to ensure
an expression matches some type (feedback reset) · I...

Twitter alternative, Sapling (Git alternative written in Rust), HSTS Preload, OpenSSL 3.x.x, Structural Subtyping
cohost!
cohost! - "October 2022
Financial Update"
Minds
TweetDeck
Kizie - A better Twitter

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 o...

RUST, JSONC, TOML, openapi-yup-generator, ri-calculator, TUI, Nextjs 13, Turbopack
ゼロからはじめるJavaScript(18)
可読性と表現力の高いデータ形式「JSONC」を活用しよう | TECH+(テックプラス)
TOML っていいな
やっ...

Design System, Font-Family, .well-known/change-password
Tailwind考 - uhyo/blog
AI
Programmer
デザインシステムにおけるタイポグラフィーの試行錯誤
- DMM inside
ios13から...

Critical CSS, CommonJS vs ESM, Design
Critical CSS? Not So Fast! – CSS
Wizardry – Web Performance Optimisation
重要でないCSSを延期する
tdarb.org / Making a Website U...

:has(), Infinite Scrolling, Topics API
https://twitter.com/myakura/status/1565986899097178112
Infinite Scrolling: When to Use It, When to Avoid It
無限スクロールは考慮することが...

Bun, Zig/Rust, Next.js Conf, Chrome 105
Oven: the company behind
Bun
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画
...

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

Variable Units, State of CSS 2022, bfcache, nanoid
CSSは確実に進化している!
新機能、単位を変数として利用できる「Variable Units(変数単位)」 | コリス
State of CSS 2022
[css-vari...

Centering CSS, DIDs. WAI-ARIA, Font Subsetting
How to
Center a Div with CSS – 10 Different Ways
CSSでのセンタリング
- CSS: カスケーディングスタイルシート |
MDN

normalize.css, Body Margin 8px, input type=number, webfont
open-props/normalize.css
at main · argyleink/open-props · GitHub
たった1行のCSSでこれなら簡単!すでに制作済みのWebサイト・スマホアプ...

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 O...

HTTP Status Code 103, Chrome 103, ES2022
TanStack/table: 🤖 Headless UI for building powerful tables
& datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
...

認知プロセスとデザイン、HTTP/3
CSS NiteさんはTwitterを使っています:
「2021年8月24日に開催した〈行動・認知プロセスモデルを知って、UIを的確に改善しよう〉/松田 直樹さ...

Safari 16 Beta (WebPush), Human Interface Guidelines, webp avif webm HLS ...
PlayWright を使ってE2Eテストを書いてみた
News from WWDC22:
WebKit Features in Safari 16 Beta | WebKit
池田 泰延 (@clockmak...

Layout RFC of Nextjs, zoom無効化について, css moduleのその後
Blog - Layouts RFC | Next.js
Anaconda | New from Anaconda: Python in the Browser
Please, stop disabling zoom - Manuel Matuzović
Inte...

State of CSS 2022 (interop 2022)
Google I/O
State of CSS 2022
Relative LCH colors
web-platform-tests dashboard
Fitzpatrick scale - Wikipedia
Interop 2022...

Dialog要素, toggle-root, コンテンツカテゴリー, アウトラインアルゴリズムの変更
Thinking on ways to solve DIALOG - YouTube
Dialog | GUI Challenges
Building a dialog component
Bram.us / Twitter
The Future of...

Chrome 100, React 18 で追加された新しいhooks(useTransition, useDeferredValue)
What's New In DevTools (Chrome 100) -
Chrome Developers
New in Chrome 100 - Chrome Developers
React v18.0 – React Blog

Type Syntax in Javascript, Typescript4.6, Nextjs 12.1, React 18, CSS @layer,
これだけは押さえよう!住所フォームの作り方 - ケンオールブログ
押下(おうか)にまつわる話 - Qiita
New in Chrome 99 - Chrome Developers
...

oklab/oklchとlab/lchの違い, The State of JS 2021, Wasm VM
Color Combinations Generator
apca-w3 -
npm
達成基準 1.4.3 を理解する | WCAG
2.0解説書
It's time for...

requestAnimationFrameとrequestIdleCallback, Typescript 4.6 beta
State of JavaScript 2021/2022
【LINE証券
Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話 - LINE ENG...

HTML Living Standard, Origin Trials, 2022年のCSS
Focus the
dialog element instead of the first focusable item by dpogue · Pull Request #4184 · whatwg/html
HTML Standard

tc39-notes 読んで見る, 正規表現のパフォーマンス問題, A-Frameで作るWebVR など
tc39-notes/meetings at master ·
rwaldron/tc39-notes
DenoがTypeScriptの使用をやめる5つの理由 - Qiita
ECMAScript® 2021 Langu...

CSS of 2021, React Conf, Suspense for data fetching
重いサイトを軽くしろ!年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
Open Props: sub-atomic styles
Adam Argy...

Chrome96, Typescript4.5, AMPの終焉, wbrタグなど
New in Chrome 96 - Chrome Developers
Back/forward cache
What's New In DevTools (Chrome 96) - Chrome
Developer...

Chrome Dev Summit 2021, npm package "coa"
NPM -
coa - Versions diffs - 2.0.2 → 2.0.3 - Diffend - OSS supply chain security and management platform
Popular
'coa' N...

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
...

Nuxt.js 3 beta, Nominal Typing vs Structual Typing vs Duck Typing, Material You
Appleシリコン「M1」MacでLinux直接起動を目指す「Asahi
Linux」、独自ブートローダーm1n1開発 | TechCrunch Japan
NuxtJS / Twitter

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
池田 泰延 / ICSさん / Twitter
list-style-type...

Material UI v5, 有償版 MUI X Pro, GridのLayoutShift
MUI: The React component library
you always wanted
こんにちはMUI! 新しくなったMaterial UI v5
Material-UI v5を先取...

音声遅延, 海底ケーブル JUPITER, iPhone 13, Safari 15, iOS 15のプライベートリレー, APCA(色のコントラスト)
データサイエンティスト検定™ リテラシーレベル | 一般社団法人 データサイエンティスト協会
世界100万kmの海底ケーブル、地理と速度と冗長性を考える

Epic&Apple, React Code Splitting, Lazy loading, Material You, DevTools Chrome 94
EpicとAppleの『フォートナイト』裁判が決着。Apple独自決済の強制などが反競争的と認められ、該当規約の削除が言い渡される
Epic Games対Ap...

Webviewアプリの話、Android 12, iOS15, iPhone13 RogPhone5, Next.js Conf
React +
TypeScriptで固めつつ、新しいことも取り入れる LINE証券のフロントエンドエンジニアが大切にしていること - ログミーTech
Android