火曜日のおフロ

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:

December 18, 2021 CSS of 2021, React Conf, Suspense for data fetching
重いサイトを軽くしろ！年末年始は #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
: 出力要素 - 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
...more
2h 5min
November 20, 2021 Chrome96, Typescript4.5, AMPの終焉, wbrタグなど
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
...more
2h 60min
November 13, 2021 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' 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
...more
1h 48min
October 30, 2021 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

そな太@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（フルティガー）は視認性の高い定番欧文フォント -
デザインポケット
...more
2h 37min
October 16, 2021 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

Ingvar Stepanyan / Twitter

TypeScriptでNominal Typingを実現する4つの方法 - Qiita

Material3(Material You) の変更点 /
Changes in Material3(Material You) - Speaker Deck

usagimaru ⌘ / Twitter
...more
1h 22min
October 09, 2021 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 - 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
...more
2h 14min
October 02, 2021 Material UI v5, 有償版 MUI X Pro, GridのLayoutShift
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で美しいシャドウを実装する方法
| コリス
...more
1h 46min
September 25, 2021 音声遅延, 海底ケーブル JUPITER, iPhone 13, Safari 15, iOS 15のプライベートリレー, APCA(色のコントラスト)
データサイエンティスト検定™ リテラシーレベル | 一般社団法人データサイエンティスト協会

世界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
...more
2h 44min
September 18, 2021 Epic&Apple, React Code Splitting, Lazy loading, Material You, DevTools Chrome 94
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
...more
2h 2min
September 11, 2021 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

Next.js Conf
...more
1h 21min

FAQs about 火曜日のおフロ:

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

The podcast currently has 80 episodes available.