投稿の日時を「3分前」「昨日」のように出すコンポーネントを TypeScript で作りました。言葉は Intl.RelativeTimeFormat に任せ、単位の選び方、「昨日」の数え方、表示の自動更新は Chromium で確か ...

一覧の画像を押すと、画面いっぱいに大きく表示するライトボックスを、ライブラリを使わずに React と dialog 要素で作りました。画面に収める CSS、矢印キーでの送り、前の画像を残さない key の使い方、先読み、閉じたあとの ...

検索欄やボタンを1つずつ明るく残し、下か上に説明のカードを出す使い方ガイドを、ライブラリなしの TypeScript で作りました。アプリを初めて開いた人へのオンボーディングや、あとから見返せる操作のチュートリアルに使えます。部品の位 ...

月ごとのカレンダーを、ライブラリを使わずに React と TypeScript で作りました。日付を6行×7列に並べる計算、月をまたぐときの Date の扱い、今日と選んだ日の伝え方、矢印キーで日を移る動きを、Chromium で確 ...

記事をどこまで読んだかを画面の上のバーで示すフックを、React で作りました。割合はページ全体ではなく記事の要素から計算し、画像の読み込みで記事の高さが変わったときも ResizeObserver で計算し直します。CSS だけで作 ...

加工前と加工後のような2枚の画像を重ね、つまみを左右に動かして見比べる表示を、ライブラリを使わずに React で作りました。ビフォーアフターを1つの枠で見せたいときに使えます。clip-path で隠す理由、キーボードでの操作、po ...

スクロールで動画が画面から外れたら一時停止し、戻ってきたら続きを再生するフックを作りました。ユーザーが自分で止めた動画は勝手に再生しないこと、play() が中断されたときのエラーの受け方も確かめています。

長い文章を3行で切って「続きを読む」ボタンで広げるコンポーネントを TypeScript で作りました。行数で切る CSS、はみ出したときだけボタンを出す測り方、隠れた部分のリンクに Tab で入ったときの対策を Chromium で ...

canvas と Pointer Events で、マウスでも指でも書ける署名欄を React で作りました。線を点の配列で持って描き直す作りにし、画面の倍率、幅の変化、枠の外へのはみ出し、スクロールとの取り合い、画像への書き出しを確 ...

右クリックした位置に独自のメニューを出すコンポーネントを TypeScript で作りました。ブラウザのメニューの止め方、画面の端で反対側に開く計算、閉じる処理、Shift+F10 と矢印キーでの操作を Chromium で確かめてい ...