表の1行や文の中に収まる小さな折れ線グラフ（スパークライン）を、ライブラリを使わずに React と SVG の polyline で描きました。最小値と最大値で縦の位置を決める計算、全部同じ値や1件だけのときの扱い、最後の点の丸が切 ...

名前を1行に1人ずつ書いてボタンを押すと、ランダムにグループへ分ける部品を React で作りました。混ぜてから順番に配って人数の差を1人以内にする方法と、分けた結果を描画のたびに作り直さないよう、ボタンを押したときだけ state ...

選んだ画像の全面に、斜めに並べた文字の透かしを入れて保存する仕組みを React で作りました。パターンを回して角まで埋める方法、縁取りした文字を均一に薄くする方法、JPEG で保存するときの透明な部分の扱いを、検証環境で確かめていま ...

入力した文字を UTF-8 のバイト列にして、16進数・2進数・%記法で表示する部品を React で作りました。TextEncoder の使い方、1文字ごとのバイト数、encodeURIComponent との違い、絵文字や孤立サロ ...

親に position: relative、再生ボタンに position: absolute; inset: 0; margin: auto を付けて真ん中に重ねます。三角の位置の合わせ方と、video の上で hidden が効か ...

URLを貼ると、ホストやパスに分け、クエリを名前と値の表で直せる部品をReactで作りました。状態をURLの文字列1つにする作り方と、書き戻したときに「+」や「%20」などの書き方が変わる点を、ブラウザで確かめています。

ボタンに position: relative を付け、::before を inset: -10px で外にはみ出させると、見た目は 24px のまま、押せる範囲が 44px 四方に広がります。隣のボタンと重なったときや、overf ...

「0 9 * * 1-5」のような cron の式から、次に実行される時刻を5件並べる部品を React で作りました。cron-parser での求め方、タイムゾーンの指定、日と曜日を両方書いたときの数え方、夏時間の日の結果も確かめ ...

float した画像に shape-outside を付けると、文章が四角ではなく円や画像の輪郭に沿って回り込みます。circle() と border-radius の組み合わせ、透明な PNG の輪郭を使う url()、余白の付け ...

東京やニューヨークなどの今の時刻を並べ、時差と「前日・翌日」も出す世界時計を React で作りました。Intl.DateTimeFormat の timeZone で時刻を出し、夏時間の切り替わりや30分単位の時差も確かめています。 ...