火曜日のおフロ

By igtm, tmr, ymdarake

@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。

https://tue-ofuro.vercel.app/... more

Download on the App Store

Download on the App Store

Get it on Google Play

FAQs about 火曜日のおフロ:

How many episodes does 火曜日のおフロ have?

The podcast currently has 80 episodes available.

火曜日のおフロ episodes:

June 11, 2022 Safari 16 Beta (WebPush), Human Interface Guidelines, webp avif webm HLS ...
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
...more
1h 37min
June 04, 2022 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ć
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
...more
1h 53min
May 21, 2022 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: 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
...more
2h 6min
May 07, 2022 Dialog要素, toggle-root, コンテンツカテゴリー, アウトラインアルゴリズムの変更
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
...more
1h 55min
April 02, 2022 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

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
...more
2h 12min
March 12, 2022 Type Syntax in Javascript, Typescript4.6, Nextjs 12.1, React 18, CSS @layer,
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ

押下(おうか)にまつわる話 - 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
...more
2h 10min
February 19, 2022 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 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
...more
2h 13min
January 29, 2022 requestAnimationFrameとrequestIdleCallback, Typescript 4.6 beta
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
...more
2h 7min
January 15, 2022 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

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
...more
1h 23min
January 08, 2022 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

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
...more
1h 53min

FAQs about 火曜日のおフロ:

How many episodes does 火曜日のおフロ have?

The podcast currently has 80 episodes available.