はてぶ・Qiita・Zennのトレンド記事を紹介
文字の縁取りを実装する場合、 text-stroke や SVG などいろいろな方法があると思います。今回は text-shadow を使った方法を紹介します。 text-shadow を使うケース一般的な縁取りは text-stroke と paint-order を組
Next.js 14.2.28 -> 15.3.1 のバージョンアップ対応 🔖 1
モチベーションCVE-2025-29927によるNext.jsのMiddlewareでパッチバージョンの脆弱性対応してたのもあり、14 -> 15にあげようとする対応は並行して検討してた脆弱性対応前から npx @next/codemod@canary upgra
CoR パターンで実装する Next.js の middleware 🔖 1
GoF が提唱したデザインパターンのうち、 Chain of Responsibility パターン(以下、CoR パターン) というものがあります。責任の連鎖とも訳されますね。CoR パターンはその名の通り、チェーンに見立てて処理を複数の関数へ順々に回していく仕組みです。自
複数のGitHubアカウントをWSL経由のDevcontainerで使う 🔖 1
Webエンジニアの4096mgです。複数のGitHubアカウントをWSL経由のDevcontainerで使うときに設定していることを備忘録として残しておきます。仕事用と個人用で複数のGitHubアカウントを使い分けたいという需要は大きいと思いますが、Windowsに対応した情
概要Vue.jsでSVGを表示するコンポーネントを作成する際に、アイコンごとにコンポーネントを作成するとアイコンの数が増えた時にコンポーネントの管理コストも高くなってしまうため、以下のように1つの汎用的なコンポーネントでまとめて扱える仕組みがあると便利です。<SvgIc
requestAnimationFrameを使ってアニメーションを作ってみる
ちょっと株式会社でフロントエンドエンジニアをしているでんです。業務の中でrequestAnimationFrameに触れる機会がありましたので紹介できればと思います。 requestAnimationFrameとはwindow.requestAnimationFrame
フレームワークのアップグレード作業を計画的に進めるための手順 🔖 3
Next.jsを14系から15系に、Reactを18系から19系にアップグレードする作業をしていて感じたのが「計画的に進めないと、見通しがつけられなくてしんどいな」ということ。最初は計画もなく一気に進めようとしていましたが、状況が把握しきれなくなり、情報を整理してから別ブランチ
MDX 内の画像を Astro の Picture コンポーネントに自動変換する remark プラグインを作る
モチベーションAstro で Markdown に書いた  形式のローカル画像は、自動で webp に変換される。しかし私は特定のパスにある記事だけ画像に quality を指定した上で picture タグにしたかったので、今までは下記の
はじめに仕事の中で小さなCLIツールを作る機会がありました。スピナーや対話型UIが欲しくなり、使えそうなライブラリを探そうと思ったものの、小さなツールなのでそこまで機能性が高いものは必要なさそうでした。AIに頼ればライブラリに依存しすぎることなく、小さくシンプルに作れるのではと
GitHub Actions をローカルで実行！ nektos/act の紹介 🔖 1
はじめにGitHub Actions を使っている方は多いと思います。新しいワークフローを作るとき、GitHubにpushして動作確認しなければいけなくて、手間が多いですよね。そこで、 nektos/act を使うと、自分のマシン上でワークフローを実行できます。公式サイトに
はじめにWebアプリケーションにおいて、ユーザーが重要な操作（データ削除など）を行う前に確認を取るケースがあります。この確認フローをモーダル等を使って実装すると、モーダルの開閉状態をstateで管理する必要があったりと実装が複雑になりがちです。今回は、react-callを活
satisfiesでmetaの型を定義したstorybookのファイルでtsのエラーが起きる 🔖 1
はじめにNext.jsでStorybookを使用し、satisfiesを利用してmetaの型定義を行った際に、以下のエラーが発生しました。Expression produces a union type that is too complex to represent.この