Home
Categories
EXPLORE
True Crime
Comedy
Society & Culture
Business
Sports
History
Music
About Us
Contact Us
Copyright
© 2024 PodJoint
00:00 / 00:00
Sign in

or

Don't have an account?
Sign up
Forgot password
https://is1-ssl.mzstatic.com/image/thumb/Podcasts115/v4/40/98/91/4098918c-56a0-d76a-2876-da5798347770/mza_6329512050688964188.jpg/600x600bb.jpg
火曜日のおフロ
igtm, tmr, ymdarake
80 episodes
1 week ago
@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。 https://tue-ofuro.vercel.app/
Show more...
How To
Education
RSS
All content for 火曜日のおフロ is the property of igtm, tmr, ymdarake and is served directly from their servers with no modification, redirects, or rehosting. The podcast is not affiliated with or endorsed by Podjoint in any way.
@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。 https://tue-ofuro.vercel.app/
Show more...
How To
Education
Episodes (20/80)
火曜日のおフロ
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

Show more...
1 year ago
47 minutes 56 seconds

火曜日のおフロ
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

Show more...
1 year ago
2 hours 17 minutes 19 seconds

火曜日のおフロ
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

Show more...
2 years ago
2 hours 1 minute 33 seconds

火曜日のおフロ
デジタル庁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
Show more...
2 years ago
1 hour 45 minutes 48 seconds

火曜日のおフロ
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

Show more...
2 years ago
2 hours 57 minutes 45 seconds

火曜日のおフロ
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<Colors, unknown> & {
 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

Show more...
2 years ago
2 hours 9 minutes 22 seconds

火曜日のおフロ
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

Show more...
2 years ago
2 hours 21 minutes 54 seconds

火曜日のおフロ
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

Show more...
2 years ago
1 hour 34 minutes 6 seconds

火曜日のおフロ
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

Show more...
3 years ago
2 hours 34 minutes 31 seconds

火曜日のおフロ
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

Show more...
3 years ago
2 hours 28 minutes 5 seconds

火曜日のおフロ
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

Show more...
3 years ago
2 hours 11 minutes 31 seconds

火曜日のおフロ
: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

Show more...
3 years ago
49 minutes 43 seconds

火曜日のおフロ
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

Show more...
3 years ago
1 hour 37 minutes 27 seconds

火曜日のおフロ
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

Show more...
3 years ago
2 hours 1 minute 58 seconds

火曜日のおフロ
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

Show more...
3 years ago
1 hour 27 minutes 10 seconds

火曜日のおフロ
Centering CSS, DIDs. WAI-ARIA, Font Subsetting

How to Center a Div with CSS – 10 Different Ways

CSSでのセンタリング

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

Show more...
3 years ago
1 hour 37 minutes 25 seconds

火曜日のおフロ
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"]をやめた話

<input type="number"> - HTML: HyperText Markup Language | MDN

4.10.5.1.12 Number state (type=number)

Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - JakeArchibald.com

月間利用者数500万人超え! 症状検索エンジン「ユビー」の誰もが使いやすい、見やすいフォントへのこだわりとは|モリサワ note編集部

症状に関連する病名についてAIで無料で調べる 症状検索エンジン「ユビー」 by Ubie

Show more...
3 years ago
1 hour 21 minutes 55 seconds

火曜日のおフロ
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

<legend> - HTML: HyperText Markup Language | MDN

<fieldset>: フィールドセット要素 - 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

Show more...
3 years ago
2 hours 3 minutes 5 seconds

火曜日のおフロ
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 <head> · 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

Show more...
3 years ago
1 hour 38 minutes 42 seconds

火曜日のおフロ
認知プロセスとデザイン、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

Show more...
3 years ago
1 hour 20 minutes 57 seconds

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