azukiazusa.dev
Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。

配列をグループ化する Object.groupBy 静的メソッド

TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。

TailwindCSS で複数行のテキストを省略するとき

tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。

tabIndex には 0 と -1 だけを指定する

Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。

Svelte の Props 省略記法

GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショートカットに慣れていた人にとっては、inline chat が表示されるのは意図しない動作でしょう。

GitHub Copilot Chat の inline chat のキーボードショートカットを無効にする

`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。

details 要素の name 属性による排他的アコーディオン

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

GitLens で特定のコミットを除外する

テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。

大きさが自動で変わる textarea を CSS だけで実現

TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。

TailwindCSS の data 属性