今個人のプロジェクトとしてChrome拡張機能を作っているのだけど、書いていたJavaScriptのコードを全消しした。
理由としては、全く同じ機能をCSSのみで実装できることに気づいたからである。36行もあったJavaScriptのコードが、3行のCSSに収まった。これはとても気持ちいい。
これと同じことが timer.team の開発でもあって、例えば一時停止中に数字が点滅するアニメーションはCSSで実装している。
クライアントサイドをプログラミングをしていると、ついついJavaScriptでDOM操作して力技で画面を書き換えたくなるけど、これは大変だしバグも生みかねない。CSSに頼れるときはCSSに頼ったほうが安全だし、動作も安定するし、保守性も高いことを改めて感じたレフ蔵であった。
作ってる拡張機能は金曜日辺りに公開できるといいけど、できるかな……
Vercel Authenticationの設定をOnly Preview Deploymentsに変えよう！
（以下はこまごまとした説明です）
最近、文字数カウントアプリをVercelにデプロイしました。
lef237/char-count: テキストの文字数をカウントするアプリ
Next.jsではとても簡単にOGP画像を設定することができます。
しかし、そのままだと自分の本番環境ではOGP画像が表示されませんでした。
色々調べたところ、OGP画像へのリンクにVercel Authenticationが掛かっていることが分かりました。そのため、自分以外のユーザー（サイト）がOGP画像へのリンクを辿れないため表示されないことが分かりました。
そのため、VercelのProject SettingからDeployment Protectionへと進み、Vercel Authenticationの設定を変える必要があります。
最初の設定ではStandard Protectionになっているのですが、これだとup-to-date Production Domainsしか公開されません。
しかし、DeploymentsのCurrentから最新のデプロイ状況を選択し、Open Graphに設定されている画像を見ると、このイメージはup-to-date Production Domainsに含まれていないドメインを含んだパスになっています。
そのため、外部に公開されず、OGP画像が表示されなかったというわけです。
（自分はVercelにログインしていない別のブラウザからDeveloper Toolを開いてURLの値を確認したところ、上記のドメインを含んだパスになっており、原因に気が付きました）
そして、Vercel Authenticationを「Only Preview Deployments」に切り替えたところ、うまく表示されるようになりました。
一点だけ不安なのが、これはVercelがリコメンドしているデフォルト設定ではないということです。
将来的にはこの変更をしなくてもOGPが表示されるようになると思いますが、現段階ではこのような設定が必要なので記事に残しました。
（本来であればパスもデプロイ先のドメインに追従して欲しいので）
参考になれば幸いです。
既存のDBにPrismaを導入するときはBaselineを設定しよう！
Prismaのドキュメントを読み進めていたとき、既存のプロジェクトにPrismaを導入するときの手順としてBaseline your databaseという項目が出てきました。
Baseline your database : typescript-postgresql | Prisma Docs
このドキュメントの手順通りに進めればBaselineは作成できるのですが、概要を理解するのに少し時間が掛かりました。
また、Baselineに関して日本語では触れている記事が少なかったのでまとめてみました。
既にデータベースが存在する既存のプロジェクトにPrisma Migrateを追加すると、「最初のマイグレーション（Initial migration）」が生まれます。
このマイグレーションには、Prisma Migrateを使用する前のデータベースの状態を再現するために必要なすべてのSQLが含まれます。
しかし、本番環境ではデータベースの状態の再現（作成やリセット）は必要ないので、この「最初のマイグレーション」は含めないようにする必要があります。
（もし含めてしまうと、エラーが発生してしまう可能性があります）
そのため、Baselineが必要になります。
Baselining tells Prisma Migrate to assume that one or more migrations have already been applied. This prevents generated migrations from failing when they try to create tables and fields that already exist.
ベースライン化はPrisma Migrateに、1つ以上の移行がすでに適用されていると仮定するように指示します。これにより、生成されたマイグレーションがすでに存在するテーブルやフィールドを作成しようとして失敗するのを防ぐことができます。
Baselining a database | Prisma Docs
つまり、Baselineを設定することで、Prisma Migrateに「このマイグレーションまでは適用済みである」と伝えることができます。
これによって、Prisma Migrateは、Baselineとして指定されたマイグレーションより前のマイグレーションを適用済みとみなし、それ以降のマイグレーションのみを適用します。
その結果、既存のテーブルやフィールドを再作成しようとするエラーを防ぐことができます。
例えば、それまでは違うORMでDBを操作していて、Prismaへと移行するときはBaselineが必要となるでしょう。
逆に最初からPrismaを使ってDBと紐づけていたときは、「データベースの状態を再現するマイグレーションファイル」は生まれないはずです。このときは特に気にせず、開発を進めても大丈夫だと思います。
Dash to Dock - GNOME Shell 拡張機能
このサイトでInstallをクリックする
細かい設定については、「拡張機能」のアプリから「設定」をクリックする
DebianをGUIとして使う場合、そのままだと機能が少ないです。Ubuntuであれば標準でついている機能がなくて困っていました。*1
macOSのDockのように表示する方法がないか調べていたところ、GNOMEの拡張機能をインストールすれば良いことが分かりました。
（他の拡張機能はDebian内のアプリを通じて入れていたのですが、Dockに関してはGNOMEのサイトを経由しないと入れられないことに気づくのに時間が掛かりました）
このことに気づくまで３ヶ月くらい掛かったので、後続の方のためにも記録を残しておきます。📝
Linuxデスクトップを使いやすくする10の方法 - ZDNET Japan
*1:UbuntuではDash to Dockの別ブランチであるUbuntu Dockが自動的にインストールされます → 第538回 Ubuntu Dockをカスタマイズする | gihyo.jp
システム設定→プライバシーとセキュリティ→ファイルとフォルダに進む。
そこで、アプリごとのアクセス範囲を制限する。
ターミナルでfzfを使っていたところ、iCloudのファイルも検索するようになってしまっていました。
以前、何も考えずに「アクセスを許可する」でOKをクリックしたのが原因でした。
この状態の何がまずいかというと、fzfのようなファイル検索ツールを使ったとき、開発とは関係ないファイルも検索するようになってしまうことです。
この許可を取り消すためには、上記の「結論」に書いたように、設定から制限をする必要があります。
（どこで設定するか分かりづらかったので記事にまとめました）
意外と情報が少なく、Remix SPAモードでTailwind CSSを動かすまでに苦労したので記事に残しました📝
※ページの最後に追記しました！（2024-03-13）
npx tailwindcss init --ts -pをするroot.tsxでimportする
import "./tailwind.css";）tailwind.config.tsのcontentをRemix SPA用に少し変えるnpm install -D tailwindcss postcss autoprefixer
postcssとautoprefixerも必要になりますnpx tailwindcss init --ts -p
postcss.config.jsも生成されます。tailwind.config.tsをRemix用にカスタマイズします。
content: ["./app/**/*.{js,jsx,ts,tsx}"],にしますtailwind.cssを作成しますroot.tsxでimportします
import "./tailwind.css";のようにそのままimportするだけでOKですこれでTailwind CSSが使えるようになります
こちらのPull Requestをご参考ください。
Make Tailwind CSS work in Remix SPA (stable) by lef237 · Pull Request #4 · lef237/lef237.github.io
投稿後に気づいたのですが、Coji Mizoguchiさんが自分よりも先に記事にまとめてくださっていました。ありがとうございます！🙏
Remix SPA Mode に TailwindCSS を入れて Cloudflare Pages にデプロイするスピードラン
