火曜日のおフロ

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:

January 13, 2024 TaxyAI, ChatGPT, NUI, コルーチン, Generator, mix-blend-mode
GitHub - TaxyAI/browser-extension: Automate your
browser with GPT-4

LLMが変える、ユーザインターフェースの未来｜Dory

JSやPythonのジェネレータを使うとアニメーションや通信の状態遷移を簡易に記述できる
#Python - Qiita

CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう - ICS MEDIA
...more
48min
December 23, 2023 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 regressions, and improve prompt quality.

ハンズオン 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

Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS

Cookie2 とは何か | blog.jxck.io

ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io

Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化 | blog.jxck.io
...more
2h 18min
January 14, 2023 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
音楽、数学、タイポグラフィ - シフトブレイン／スタンダードデザインユニット
auto-resize のJS実装
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?
The state of HTTP in 2022
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
...more
2h 2min
December 17, 2022 デジタル庁Webアクセシビリティー, JISS X 8341-3:2016, miChecker, Void element
デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開　非技術者向け、専門用語は少なめに - ITmedia NEWS
JIS X 8341-3:2016 達成基準早見表（レベルA & AA）
総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
Chrome Browser
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.php
...more
1h 46min
December 10, 2022 Chrome 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

LCH – Figma

Google
Online Security Blog: Memory Safe Languages in Android 13

Adventar

今週のはてなブログランキング〔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

UIデザインにおけるステートマシン - 弁護士ドットコム株式会社
Creators’ blog
...more
2h 58min
November 26, 2022 Typescript4.9 (satisfies), Nextjs13, Twitter backend architecture
Announcing TypeScript
4.9 - TypeScript

"satisfies" operator to ensure
an expression matches some type (feedback reset) · Issue #47920 · microsoft/TypeScript · GitHub

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は書き方が便利になるだけ

State of JavaScript 2022

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

GitHub -
pola-rs/polars: Fast multi-threaded, hybrid-streaming DataFrame library in Rust | Python |
Node.js

高速な文字列探索：Daachorseの技術解説 - LegalForce
Engineering Blog
...more
2h 10min
November 19, 2022 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
app for Web

エクスプローラー
- Vivaldi Social

nitter

Welcome to Feedly

Inoreader - ニュースフィードを自由に操ろう

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.

フック API リファレンス – React

【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適

SSL脆弱性診断テストでA評価をとってみよう

SSLとTLSの違いとは | さくらのSSL

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（コードジン）

Inline assembly - The Rust
Reference

Structural
Subtyping
...more
2h 22min
November 12, 2022 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

Google Developers Japan:
Chrome 108 ベータ版 : CSS の新しいビューポートの単位、Federated Credential Management API、可変 COLRv1 フォントなど

Intent to
Ship: CSS Overflow for replaced elements

SVG sprites: old-school, modern, unknown, and
forgotten — Vadim Makeev

デザインシステム｜デジタル庁

COCOA機能停止版アプリ
/ Twitter
...more
1h 35min
November 05, 2022 RUST, JSONC, TOML, openapi-yup-generator, ri-calculator, TUI, Nextjs 13, Turbopack
ゼロからはじめるJavaScript(18)
可読性と表現力の高いデータ形式「JSONC」を活用しよう | TECH+（テックプラス）

TOML っていいな

やっぱり YAML は無いと思う

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
- igtm/ri-calculator

GitHub -
fdehau/tui-rs: Build terminal user interfaces and dashboards using Rust

Kubernetesを操作するターミナル用ツール、K9sとKDashを紹介 | Think
IT（シンクイット）

GitHub -
Geal/nom: Rust parser combinator framework

tui - Rust

組込み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

Blog -
Next.js 13 | Next.js

Introducing Turbopack: Rust-based successor to Webpack –
Vercel

GitHub -
vercel/turbo: Incremental bundler and build system optimized for JavaScript and TypeScript, written
in Rust – including Turborepo and Turbopack.

Nushell

GitHub -
ogham/exa: A modern replacement for ‘ls’.

GitHub -
ogham/dog: A command-line DNS client.

GitHub -
s
...more
2h 35min
October 22, 2022 Design System, Font-Family, .well-known/change-password
Tailwind考 - uhyo/blog

AI
Programmer

デザインシステムにおけるタイポグラフィーの試行錯誤
- DMM inside

ios13から日本語フォントのboldがより太くなるケース - Qiita

Takeru Suzuki (@terkel) | Twitter

2022年に最適なfont-familyの書き方 - ICS MEDIA

San
Francisco フォントを探る - Qiita

State of JS 2022 Preliminary Discussions ·
Issue #47 · Devographics/surveys · GitHub

The
State of GraphQL 2022

State of CSS
2022

board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月）
- ヴェルク - IT起業の記録

知ってるようで知らないRefererとReferrer-Policyのお話 -
Qiita

Apple、開発者やデザイナー向けに「Human
Interface Guidelines」の更新履歴を公開。

:has() - The CSS Podcast - YouTube

web.dev

Help
users change passwords easily by adding a well-known URL for changing passwords

A Well-Known URL for Changing
Passwords
...more
2h 29min

FAQs about 火曜日のおフロ:

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

The podcast currently has 80 episodes available.