background-imageを使って画像を使わずにCSSだけで以下のような方眼紙の模様を背景の下半分だけに描画する方法をいろいろ調べたのでメモ 画像でやるとどうとでもなると思うのですが、画像だと容量が大きかったりしてパフォーマンスネックになりそうにも思っ…

多角形な要素を作りたいな〜と思った時にclip-pathを使うとCSSで実現できたので使い方をメモ 以下のような多角形をCSSで実現する場合には、 こういう感じで書けば大丈夫 ✨ .pentagon{ height: 200px; width: 240px; background-color: grey; clip-path: poly…

個人のサービスでpnpmのバージョン管理にCorepackを利用していたのですが、Corepackは以下の通りNode.jsから削除されてしまうようです zenn.dev そのためpnpmのv9.7で追加されたmanage-package-manager-versionsを使ってpnpmのバージョン管理をCorepackと同…

Vue.jsを使って以下のようなボタンクリック方式のシンプルなページャーを作成したのでメモ📝 以下のような感じでボタンクリックの度にサーバー側に/feeds?page=1のようなリクエストを送信して結果を元に処理を行うことができます。 <template> <div class="collection"> <p v-for="feed in feeds">{{ feed.title }}</p> <div class="button-pager"> <span v-if="status === 'complete'" class="button-pager__loader-info">全て読</span></div></div></template>…

Herokuにはheroku.ymlを使って簡単にpush時に自動デプロイする機能がありますが、 devcenter.heroku.com 簡単にできる反面、以下のようにRuntimeで設定される環境変数は利用できず、動的な値や秘匿値をセキュアにビルド時に設定するようなことはできません。…