kokh log

主にフロントエンドの備忘録

Vercel CLIから環境変数を設定する

Vercel のdashboardを経由せずに、Vercel CLIから環境変数を設定することができます。 使い方 Vercel CLIはインストールされている前提で進めます。 クラウドへ環境変数を設定 $ vercel env add ${KEY} ここから対話形式で値とセットする環境を選択すること…

Notion日報の更新を簡単にする

背景 2024年1月にNotionCalendarが登場したことがきっかけで、すべてのタスク管理をNotionに一元化しました。 ただ、Notionはかなり高性能であるがゆえ、シンプルなテキストエディタに比べとっさのメモをとるときに腰の重さを課題に感じていました。 ページ…

VSCodeのZenModeでマークダウンを書く環境設定

記事をNotionで書いてはてなに貼り付けてましたが、VSCodeで書いたほうが速く書けそうだなと思い準備しました。 やったこと mdの構文チェックを有効化 こちらは割愛しますが、とりあえずmarkdownlintをいれました。 もともと下記の設定をしていたので、保存…

日報から1ヶ月を振り返るプロンプトを作成した

ここ数年、日報代わりにNotionで日々の記録を書いています。 月の終わりに、目視で30日分の記録を振り返るのが億劫なことが課題だったのですが、 AIを使えばいい感じに振り返りができるのではないかと思いました。 思い通りの出力結果になるまでにプロンプト…

Intel Homebrewと決別した

M1発表からはや4年ですが、ターミナルもhomebrewもM1でたばかりの頃に設定したUniversal仕様のままになっていました。 かなり放置してしまっていたので全部arm64版に総とっかえしました。 背景 asdfでrubyのバージョンを3.3.1にアップデートしようとしたとき…

30分でOpenAI APIを動かしてみる

OpenAI APIを触ってみました。 細かいことはよくわかってないけど、とりあえずOpenAI APIを触ってみたい!という方(私)向けの記事です。 Node.js環境が既にローカルにある前提になります。 OpenAI APIのGPT-3.5 Turboモデルと同義の「Chat GPT API 」とい…

Node.js: dotenvなしで.envを指定する

Node.js v20.6.0 から コマンドラインでの環境変数ファイルの指定がbuilt-inしていました。 Command-line API | Node.js v20.14.0 Documentation これまでは環境変数を指定するには dotenv といった別のモジュールに依存するのが通例でしたが、 --env-file f…

イベントハンドラ内でthrowされたエラーをErrorBoundaryでキャッチしたい

ErrorBoundaryはReact内でruntimeエラーが起こった際に、エラーをキャッチし、あらかじめ設定しておいたFallback UIを表示するための仕組みをもつコンポーネントのことを指します。React16で導入されました。 例えば、下記のようにコンポーネント内のレンダ…

複数行のテキストでも下線追従アニメーション

小ネタです。 ホバー時に下線が左から右に流れるような追従アニメーション、今までafter疑似要素のscaleをtransitionする形で実装していたのですが、 この方法だと複数行対応ができないという欠点がありました。 テキストをinlineブロックで囲う background-…

Next.jsでmp3をimportする

前回はfile-loaderで動画メディアを変換する方法について書きましたが、 今回はmp3ファイルをimportします。 next.config.js のwebpack設定に以下を加えます。 const nextConfig = { ... webpack(config, options) { config.module.rules.push({ test: /\.mp…