nakamoto
Reactの記事を纏めます。
AIの記事を纏めます。
みなさん、お疲れさまです。 nakamoto（@zksytmkn）です！ フロンエンド開発にReactを用いるとき様々なスタイリングソリューションがありますよね。今回は素のCSSとTailwind CSSとCSS-in-JSのどれを使用するかという観点から、それぞれおすすめのスタイリングソリューションをご紹介させていただきます。 素のCSS素のCSSならMantineというコンポーネントライブラリがおすすめです。 Mantineはもともと他のコンポーネントライブラリと比較
コンテナ内でデータベースを確認するときの個人的なメモです。 コンテナの確認 docker ps コンテナにログイン docker exec -it [コンテナID] /bin/bash データベースクライアントの起動 PostgreSQL なら psql -U [ユーザー名] -d [データベース名] MySQL なら mysql -u [ユーザー名] -p -D [データベース名] -p オプションはパスワードの入力を促します。 プロンプトが表示されたら、パスワー
Next.js の Image コンポーネントはデフォルトで Lazy loading（画像が見える位置にスクロールされたら表示されるよう）になってますが、priority を true にするとそれを無効として優先的に表示できます。 なので、ファーストビューの画像は priority を true として優先的に表示し、その他の画像は placeholder を blur として画像を読み込んでるときはぼかし画像を表示するのが一般的です。その際に src が動的画像なら
チェックボックスの背景色をチェックしたときのみ変更するには accent-color というプロパティがとても便利です。 input[type="checkbox"] { accent-color: red; } https://coliss.com/articles/blogroll/css-accent-color.html
SVG を上下反転させる transform="scale(1,-1) translate(0, -16)" という属性を適用する。scale(1,-1) によって上下逆さにし translate(0, -16) によって位置調整する。16 は縦横幅によって要調整です。
Docker Desktop って重すぎますよね。orbstack と podman-desktop がその代替サービスとなりそうです。前者は商用のみ有料、後者は無料です。 https://github.com/orbstack/orbstack https://github.com/containers/podman-desktop
sharepreviews を使ったら OGP 画像（SNS にホームページの URL をシェアすると表示される画像）を簡単に作成できそうです。 https://sharepreviews.com/home
Web サイトのプライバシーポリシーや利用規約等の法的文書を作成するとき Wonder.Legal が便利そうです。有料ではありますが、自ら作成するコストを考えるとコスパいいかもしれません。 https://www.wonder.legal/jp/
ESLint を使ってて Biome に移行したいとき @biomejs/biome migrate eslint コマンドを実行すると biome.json をアップデート（ESLint の設定を読みとって反映）できるようです。 https://github.com/biomejs/biome/pull/2103
Neon というポスグレの DBaaS があって現状もっとも近いリージョンはシンガポールですが、こちらの Neon ロードマップによると新しいリージョンを検討中のようです。もしかすると日本が来るかも知れないですね。 https://neon.tech/docs/introduction/roadmap#more-regions
フリーイラストを使うときは Pixels Market がよさそうです。検索窓にほしいイメージ（calendar など）を入力すると色んなイメージを出してくれます。無料です！🤩 https://pixels.market/
カレンダーコンポーネントのおすすめです。カレンダーってそれのみ探しても中々ないですし、こちらは React 以外でも使用できます。npm install でも CDN 経由でも Web Components でも使用できます。 https://github.com/WickyNilliams/cally
ドラッグアンドドロップライブラリの候補です。 React 専用はこちら https://github.com/hello-pangea/dnd/ React 以外でもならこちら https://github.com/atlassian/pragmatic-drag-and-drop/
Server Actions でフォームを作成する際に、フォームをリセットする方法は現状こちらです。ただフォームのリセットは今後 React がデフォルトで行ってくれるようになるそうです。 https://twitter.com/asidorenko_/status/1775495832877338838
onbordaは、Next.js向けのオンボーディングウィザードフロー（初めてサイトを訪れるユーザーを対象とするガイド）ライブラリで、framer motion、shadcn/uiを使用し、App Routerにも対応しています。 https://github.com/uixmat/onborda
PlanetScaleの無料プランがなくなりました。。 Neonはもっとも近くてシンガポールリージョンですし SQLiteでもいいならTursoがもっと使われるようになりそうですね https://planetscale.com/blog/planetscale-forever
