火曜日のおフロ
Education Podcasts
@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。 https://tue-ofuro.vercel.app/
Location:
United States
Genres:
Education Podcasts
Description:
@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。 https://tue-ofuro.vercel.app/
Language:
Japanese
Website:
https://anchor.fm/tue-ofuro
Episodes
TaxyAI, ChatGPT, NUI, コルーチン, Generator, mix-blend-mode
1/13/2024
GitHub - TaxyAI/browser-extension: Automate your browser with GPT-4
LLMが変える、ユーザインターフェースの未来|Dory
JSやPythonのジェネレータを使うとアニメーションや通信の状態遷移を簡易に記述できる #Python - Qiita
CSSのブレンドモードが素敵! mix-blend-modeを使いこなそう - ICS MEDIA
Duration:00:47:56
Safari 17.2, CSS 2023, Tailwind v3.4
12/23/2023
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
Duration:02:17:19
WASM, Type Scaling, attr(), ACT Rules, WebAIM
1/14/2023
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
Duration:02:01:17
デジタル庁Webアクセシビリティー, JISS X 8341-3:2016, miChecker, Void element
12/17/2022
デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開 非技術者向け、専門用語は少なめに - ITmedia NEWS
JIS X 8341-3:2016 達成基準 早見表(レベルA & AA)
総務省|情報バリアフリー環境の整備|みんなのアクセシビリティ評価ツール:miChecker (エムアイチェッカー)Ver.2.0
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
Chrome Browser
Void element (空要素) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
ゆうてん🖖さんはTwitterを使っています: 「タイポグラフィつよつよの方で英語で説明できる方、ヘルプ!!」 / Twitter
Duration:01:45:38
Chrome 108(svh/lvh/dvh), lch/oklch WCAG 2.1, axe-core, XState
12/10/2022
ブログ: 日本のウェブデザインの特異な事例
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
Duration:02:57:24
Typescript4.9 (satisfies), Nextjs13, Twitter backend architecture
11/26/2022
Announcing TypeScript 4.9 - TypeScript
"satisfies" operator to ensure an expression matches some type (feedback reset) · Issue #47920 · microsoft/TypeScript · GitHub
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
Duration:02:09:03
Twitter alternative, Sapling (Git alternative written in Rust), HSTS Preload, OpenSSL 3.x.x, Structural Subtyping
11/19/2022
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
Duration:02:21:37
Chrome 108, Viewport on Android, SVG sprite
11/12/2022
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
Duration:01:33:42
RUST, JSONC, TOML, openapi-yup-generator, ri-calculator, TUI, Nextjs 13, Turbopack
11/5/2022
ゼロからはじめる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
Duration:02:34:31
Design System, Font-Family, .well-known/change-password
10/22/2022
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
Duration:02:28:05
Critical CSS, CommonJS vs ESM, Design
10/15/2022
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
Duration:02:11:31
:has(), Infinite Scrolling, Topics API
9/10/2022
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
Duration:00:49:43
Bun, Zig/Rust, Next.js Conf, Chrome 105
9/3/2022
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
Duration:01:37:27
OpenProps, mdx(docusaurus), 擬似クラス, border-color, unicode regex, Emojipedia
8/27/2022
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
Duration:02:01:58
Variable Units, State of CSS 2022, bfcache, nanoid
8/13/2022
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
Duration:01:27:10
Centering CSS, DIDs. WAI-ARIA, Font Subsetting
7/30/2022
How to Center a Div with CSS – 10 Different Ways
CSSでのセンタリング
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
Duration:01:37:25
normalize.css, Body Margin 8px, input type=number, webfont
7/16/2022
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
Duration:01:21:55
Next.js 12.2, reset.css, Safari Styling Hacks
7/9/2022
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
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
Duration:02:03:05
HTTP Status Code 103, Chrome 103, ES2022
6/25/2022
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
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
Duration:01:38:42
認知プロセスとデザイン、HTTP/3
6/18/2022
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
Duration:01:20:57