Episodes

  • 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

  • Missing episodes?

    Click here to refresh the feed.

  • 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 AccessibilityThere'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