yuheiy

import { useId, useState } from 'react';
import {
  ActionButton,
  Content,
  ContextualHelpPopover,
  DialogTrigger,
  Heading,
  Switch,
  Text,
} from '@react-spectrum/s2';

yuheiy

React Spectrumにおけるプロパティごとのrem単位とpx単位の使い分け

プロパティ	単位
border-spacing	rem
flex-basis	rem
gap	rem
height	rem
width	rem
contain-intrinsic-width	rem

yuheiy

Tailwind CSS テーマ変数の順序ガイド

ソート原則

1. 機能的グループ化: 関連する変数を論理的にグループ化
2. property-order.tsとの整合性: CSSプロパティの出力順序と一致
3. サイズ順: 同じカテゴリ内では小→大の順序（xs → sm → md → lg → xl）
4. 色相順: カラーパレットは赤→紫のスペクトル順
5. デフォルト値は最後: --default-*変数は最後に配置

yuheiy

Tailwind CSS Border-Width Detector

A Node.js CLI tool to detect and list Tailwind CSS border-width related classes in your project files with their exact locations.

Features

• 🔍 Detects all border-width related Tailwind CSS classes
• 📍 Shows exact file paths and line numbers
• 🎯 Supports multiple file formats (HTML, JSX, Vue, PHP, etc.)
• ⚡ Fast scanning with built-in file filtering

yuheiy

Tailwind Breakpoint Replacer

A CLI tool to replace Tailwind CSS breakpoint variants from sm:/md:/lg:/xl:/2xl: to max-sm:/max-md:/max-lg:/max-xl:/max-2xl: with precise class extraction based on Tailwind's official extractor logic.

Features

• Precise extraction: Uses the same logic as Tailwind CSS's Rust-based extractor for accurate class detection
• Safe replacements: Only replaces within class and className attributes
• Smart filtering:
  • Skips classes that already have max- prefix

yuheiy

4.8.4.4 Requirements for providing text to act as an alternative for images

4.8.4.4.1 General guidelines

Except where otherwise specified, the alt attribute depend on what the image is intended to represent, as described in the following sections.

The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.

So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.

yuheiy

function App() {
  return (
    <>
      {(() => {
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <Button onClick={() => setOpen(true)}>First</Button>
            <Popover isOpen={isOpen} onOpenChange={setOpen}>
              ...

yuheiy

function HooksSeparator<T>({
  setup,
  children,
}: {
  setup: () => T;
  children: (prop: T) => ReactNode;
}) {
  return children(setup());
}

yuheiy

import type { Dispatch, DispatchWithoutAction, ReactNode, SetStateAction } from 'react';
import { useCallback, useState } from 'react';

/**
 * The implement a hooks version of React PowerPlug’s `<State />`.
 * https://renatorib.github.io/react-powerplug/#/docs-components-state
 *
 * @example
 * <State initial={false}>
 *   {({ state: isOpen, setState: setOpen }) => (

yuheiy

なんでもないようなことを書きたい。少し考えてみて、それが今の僕の求めているものだと気づいた。意味とか、理由とか、そういう目的ありきの思考パターンの外で、ただなにかを感じられるようになりたい。

僕は昔から、正しさを探していた。たぶん物心がついたくらいのころからしばらく、あらゆる物事には正しいやり方があり、唯一の答えがあるという世界認識をしていた。理屈っぽかったし、そこから逸脱することが気持ち悪かった。

なにかふざけたことをするときには、そのモードに入るためのスイッチを意識的に切り替えなければならなかった。オンかオフの2方向しかない、間のない機械的なメカニズム。しかしその先にも正しさからの逸脱はなく、今あるのとは別のもう一つの正しさの体系があるだけだった。

学校の課題で一番苦手なのは作文だった。どれくらいのものかと言うと、一文字も書けないまま数時間フリーズしてしまう程度には書けなかった。答えがいろいろあるということも理由の一つではあったが、いま考えると、自分がイメージできる正解の線が見つからなかったからだと思う。もちろん、一文字の綻びもない完全な解答が存在するとまでは考えていなかったが、それでも、こういう場合にはこういうことを書くもんだ、という正解パターンの型が常に存在するようには思っていた。

その型を見い出して実演できるだけの技量などは到底なかった。けれど完璧主義者の僕にとっては、不格好でもとりあえずやってみて60点の解答を目指すよりは、失敗の形跡を残さずに0点を出した方が自尊心を傷つけずに済んだ。当時、国語の成績はむしろ良い方だった。