火曜日のおフロ

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

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

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

デジタル庁、初心者向け「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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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