igtm, tmr, ymdarake

火曜日のおフロ

Education JA ↓ 80 episodes

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

Author

igtm, tmr, ymdarake

Episodes

TaxyAI, ChatGPT, NUI, コルーチン, Generator, mix-blend-mode 13.01.2024 47:56

GitHub - TaxyAI/browser-extension: Automate your browser with GPT-4 LLMが変える、ユーザインターフェースの未来｜Dory JSやPythonのジェネレータを使うとアニメーションや通信の状態遷移を簡易に記述できる #Python - Qiita CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう - ICS MEDIA

Safari 17.2, CSS 2023, Tailwind v3.4 23.12.2023 2:17:19

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 D...

WASM, Type Scaling, attr(), ACT Rules, WebAIM 14.01.2023 2:01:33

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: カスケーディング...

デジタル庁Webアクセシビリティー, JISS X 8341-3:2016, miChecker, Void element 17.12.2022 1:45:48

デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開　非技術者向け、専門用語は少なめに - ITmedia NEWS JIS X 8341-3:2016 達成基準早見表（レベルA & AA）総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0 駒瑠市〜アクセシビリティ上の問題の体験サイト〜 Chrome Browser Void element （空要素） - MDN Web Docs 用語集: ウェブ関連用...

Chrome 108(svh/lvh/dvh), lch/oklch WCAG 2.1, axe-core, XState 10.12.2022 2:57:45

ブログ: 日本のウェブデザインの特異な事例 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 Deve...

Typescript4.9 (satisfies), Nextjs13, Twitter backend architecture 26.11.2022 2:09:22

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 p...

Twitter alternative, Sapling (Git alternative written in Rust), HSTS Preload, OpenSSL 3.x.x, Structural Subtyping 19.11.2022 2:21:54

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…&qu...

Chrome 108, Viewport on Android, SVG sprite 12.11.2022 1:34:06

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

RUST, JSONC, TOML, openapi-yup-generator, ri-calculator, TUI, Nextjs 13, Turbopack 05.11.2022 2:34:31

ゼロからはじめる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...

Design System, Font-Family, .well-known/change-password 22.10.2022 2:28:05

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

Critical CSS, CommonJS vs ESM, Design 15.10.2022 2:11:31

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 D...

:has(), Infinite Scrolling, Topics API 10.09.2022 49:43

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

Bun, Zig/Rust, Next.js Conf, Chrome 105 03.09.2022 1:37:27

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 の採用を検討しているのか. かなり雑に書いてるので、雑に読...

OpenProps, mdx(docusaurus), 擬似クラス, border-color, unicode regex, Emojipedia 27.08.2022 2:01:58

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 の動画への...

Variable Units, State of CSS 2022, bfcache, nanoid 13.08.2022 1:27:10

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/forwar...

Centering CSS, DIDs. WAI-ARIA, Font Subsetting 30.07.2022 1:37:25

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

normalize.css, Body Margin 8px, input type=number, webfont 16.07.2022 1:21:55

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 sh...

Next.js 12.2, reset.css, Safari Styling Hacks 09.07.2022 2:03:05

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

HTTP Status Code 103, Chrome 103, ES2022 25.06.2022 1:38:42

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 Application...

認知プロセスとデザイン、HTTP/3 18.06.2022 1:20:57

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

Safari 16 Beta (WebPush), Human Interface Guidelines, webp avif webm HLS ... 11.06.2022 1:36:02

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

Layout RFC of Nextjs, zoom無効化について, css moduleのその後 04.06.2022 1:52:04

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

State of CSS 2022 (interop 2022) 21.05.2022 2:05:28

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

Dialog要素, toggle-root, コンテンツカテゴリー, アウトラインアルゴリズムの変更 07.05.2022 1:54:25

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 のセクショニングと...

Chrome 100, React 18 で追加された新しいhooks(useTransition, useDeferredValue) 02.04.2022 2:11:45

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