リストのツールチップをgridで作る
リストの項目をクリックすることで詳細情報が展開されるタイプのUI（これツールチップって言うんか…？）。
- その項目の近くに表示されてほしい
- 詳細情報が表示されることでリストの配置が乱れてほしくない
という前提を置くと、position: absolteで配置するのがシンプルだろう。しかしabsoluteによる配置物はレスポンシブ化が難しい。詳細情報のwidthを固定すると画面の横幅が狭いとき小さくなってくれずにはみ出すし、逆に親であるリストに合わせて100%とするとリストの大きさを先に確定させる必要があり、リストの隣にも表示物があるので不都合だった。
いろいろ考慮した結果gridで詳細情報表示領域を確保してやるのがいい感じだった。まず4行のgridを作る（画像では5行あるがここでは関係ない目的で1つ多い。気にしないで）。詳細情報を表示する前の各項目は3行だけ利用する（grid-column: span 3;）。
■■■□
■■■□
■■■□
■■■□
■■■□そしてある項目の詳細情報を表示するときは、HTMLでその項目の直後に1行n列（図ではn=3）の要素を置く（grid-column-start: 4; grid-row: span 3; 4行目に3列分使って要素を配置する）。
■■■□
■■■□
■■■▤ <選択
■■■▤
■■■▤cssは本当に難しい。各要素の大きさがどこで決まっているのかわからない、ググったときに情報の質がピンキリ、プログラミングよりも1つの問題に対して様々な解決法があり良くない意味での創意工夫の余地が大きい。さらに個人開発で言うと終わりがない。いつまでも触れてしまう。僕はあまり考え過ぎたくなくてGoogle検索をひたすらパクるという方針でやっているのだが、Google検索のUIも少しずつ変化しているのでな…。
ローカルLLM環境構築
AI系の開発をやってみたいけどOpenAIに金払いたくないのでローカルマシンでLLMを動かすというのにチャレンジしていた。動かす事自体はそう難しくなくollama（LLM界のdocker cliみたいなやつ）を入れて、huggingface（LLM界のdockerhubみたいなやつ）からpullしてきてrunすれば済む。そこにwebuiをつけたりAPIアクセスしたりweb検索エンジンと連携させたり…みたいな細かい手間もあるが別にAIだから難しいということはない。
難しかったのは個人所有程度のマシンでLLMを動かしても速度も質も全然ダメというところだ。browser-useでURLを指定してこれを開けと指示するだけでもCPU100%で30分間かかってまだ終わらない。こういうのをやってみるとChatGPTがいかにものすごいか（LLMを実用レベルにするためにどれだけの半導体と電力をつぎ込んでいるのか）というのがわかる。
また今アツい分野であるだけに技術の進み方も速く、今日入れてみたパッケージが今日の更新で壊れてて3時間前にissueが立ってリアルタイムで解決法が共有されているという光景を目にした。不安定ではあるがダイナミックな活力がある（他分野から見るとwebフロントもこう見えるんだろうか、最近はさすがにすこし落ち着いていると思うが）。