火曜日のおフロ

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:

October 15, 2022 Critical CSS, CommonJS vs ESM, Design
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
...more
2h 12min
September 10, 2022 :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
Google Japan Blog: プライバシーサンドボックスの新しい Topics API について
Topics を紹介します。 | Privacy Sandbox - YouTube
...more
50min
September 03, 2022 Bun, Zig/Rust, Next.js Conf, Chrome 105
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

...more
1h 38min
August 27, 2022 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

New Emojis In 2022-2023

📙 Emojipedia — 😃
Home of Emoji Meanings 💁👌🎍😍

All Vendors
& Platforms
...more
2h 2min
August 13, 2022 Variable Units, State of CSS 2022, bfcache, nanoid
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
...more
1h 28min
July 30, 2022 Centering CSS, DIDs. WAI-ARIA, Font Subsetting
How to
Center a Div with CSS – 10 Different Ways

CSSでのセンタリング

- 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
...more
1h 38min
July 16, 2022 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

input[type="number"]をやめた話

- 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編集部

症状に関連する病名についてAIで無料で調べる
症状検索エンジン「ユビー」 by Ubie
...more
1h 22min
July 09, 2022 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

Blog -
Next.js 12.2 | Next.js

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

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
...more
2h 4min
June 25, 2022 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

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

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
...more
1h 39min
June 18, 2022 認知プロセスとデザイン、HTTP/3
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

...more
1h 21min

FAQs about 火曜日のおフロ:

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

The podcast currently has 80 episodes available.