個人のサービスで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で設定される環境変数は利用できず、動的な値や秘匿値をセキュアにビルド時に設定するようなことはできません。…

Viteを使っていてRollbarにSourceMapをアップロードする際には下記の通りですが、 Vite plugin There is a community-maintained Rollbar Sourcemap Plugin for Vite. Please check the Readme doc for details on the project and usage instructions. http…

結論「REXML::Security.entity_expansion_text_limitに任意の値を設定する。」 結論としては上記の通りなのですが、個人で運営しているサービスで、Ruby標準ライブラリのRSSによるパース時にThis is not well formed XML\nentity expansion has grown too la…

以下の通り、Rails v7.1 から新規アプリケーション生成時にDockerfileが生成されるようになりました。 2.1 新規RailsアプリケーションでDockerfileが生成されるようになった 新規Railsアプリケーションでは、デフォルトでDockerがサポートされるようになりま…

openapi-fetchを使っていてサーバー側のレスポンスがエラー相当の場合にデフォルトで例外を発生させる方法メモしておきます。 openapi-ts.dev 以下の記事で記載の通り、openapi-fetchでは例外がthrowされません。 レスポンスエラーと思われるようなステータ…

サーバーサイドをRest APIでやりとりする際にはOpenAPIを使ってインターフェースを定義してやりとりすることがあるかと思います。 www.openapis.org 今まではナイーブにOpen APIのyamlを見て型を書き起こして利用するようなことをすることが多かったのですが…

最近、CSS設計に思いを馳せることが多くなってきたので現時点での自分の所感をメモしておく。 結論 基本線CSSはBEM(block-name__element-name--modifire-name)に従って書くで良いと思う。 昨今はフレームワーク等の進化によりCSSのカプセル化ができるように…

Tailwind CSSのメリットとしてtailwind.config.jsでデザイントークンを定義し、それをユーティリティクラスとして提供して利用することでルールに基づいた値でスタイリングできるというものがあると思います。 Tailwindでは、ユーティリティクラスで使用でき…

ruby v3.3.3でbundle install時に以下のエラーが発生した。 Downloading net-pop-0.1.2 revealed dependencies not in the API or the lockfile (net-protocol (>= 0)). Running `bundle update net-pop` should fix the problem. どうやらruby v3.3.3に同梱…

以下のようなマークアップに対して、 <div class="container"> <article> this is short text </article> <article> this text is veeeeeeeeeeryyyyyyyyyyyy loooooooooooooooooooooooooooooooong word. </article> <article> this is short text </article> <article> this text is veeeeeeeeeeryyyyyyyyyyyy loooooooooooooooooooooooooooo…</article></div>

プロジェクト内でVueのComponentの記法を合わせておきたいなーと思った際に以下のvue/component-api-styleを使うとOptions APIだったりComposition APIだったりといった記法に統一できて便利だったのでメモ eslint.vuejs.org 使い方は簡単で以下のような感じ…

以下の通り、まだ正式リリースではないですが、ESLint v9対応が入ったtypescript-eslintのv8使ってESLint v9にアップデートしたので必要だった対応等をメモ typescript-eslint.io 前提として以下の記事に記載したFlat Configに移行済みのTypeScript, Vue.js…

今まで個人のWebサービスのStyleの記述にSassを利用していたのですが、 sass-lang.com CSSにも変数が追加される等、色々強化されてきており一部の機能をPostCSSでオプトインするぐらいでも十分に思えたので移行してみました。 postcss.org 移行にあたって有…

Vite Rubyを使っていたDockerで立ち上げた環境でHMRをしようと思いvite.config.tsでserver.hostをtrueにしてみたが、なぜかhostが変わらずハマったので解決方法をメモ server.host サーバーがリッスンすべき IP アドレスを指定します。 0.0.0.0 もしくは tru…

以下のようなpropshaft、JavaScript Bundling for Rails(TypeScript, Rollup)、CSS Bundling for Rails(TailwindCSS)、View Componentを使ったRails wayなフロントエンド環境を試したみたので感想とかをメモ GitHub - rails/propshaft: Deliver assets for R…

外部のCSSファイルを限定して利用したいとき等のために正規表現にマッチするセレクターのスタイルを任意のセレクターが付与されている要素・子要素に限定するように改変するPostCSSプラグインを作ったのでメモ github.com 以下のようにpostcss.config.jsで指…

デザイントークンのグレースケールを相対的にしたいときに相対カラー構文を利用するといい感じにできそうだったのでメモ developer.mozilla.org (caniuseを見る限りfirefox以外のモダンブラウザでは利用できるようです) caniuse.com 以下はhslを利用して明る…

管理画面ではdaisyUI使うがユーザー画面では使いたくないみたいなケースでTalwindCSSのエントリー毎に利用するtailwind.config.jsを切り替えたくて、やり方を調べたのでメモ 結論から言うと管理画面で利用しているadmin/tailwind.cssの@configで利用したいta…

TailwindCSSを使うとtailwind.config.jsを使ってデザイントークンに即したユーティリティクラスを生成することができます。 tailwindcss.com TailwindCSSのようなユーティリティクラスベースでのスタイリングにすることはページ間の一貫性を守りやすいという…

好ましくはないですが、通常Rubyでprivateなメソッドを呼び出したい時にはsendを使うケースが多いです。 docs.ruby-lang.org しかしライブラリの破壊的変更等によりpublicだっだメソッドがprivateになる等、すでに大量に依存しているケースですべてをsendに…

以下の問題があったのでRuby v3.3.0へのアップデートを見送っていたのですが、 madogiwa0124.hatenablog.com Docker Hubの公式イメージに修正が入り正常に動作するようになったようなのでRuby on Rails製の個人サービスをRuby v3.3.0にアップデートしました✨…

2024/04/06 ESLint v9がリリースされました eslint.org Flat config is now the default and has some changesとあるように、 v9からは今までとは違うFlat Configという設定方法がデフォルトになります。(ESLINT_USE_FLAT_CONFIGにfalseを指定することで今ま…

ライブラリ内のVue SFCのコンポーネントを直接ビルドして利用したい等、Viteではnode_modules内のvueファイルと直接importして利用すると以下のようなエラーが発生します。 <template> <Component /> </template> <script lang="ts" setup> import Component from "madogiwa-ui/src/components/Component.vue"; </script> error d…

Capybaraで、読み込み中を表すコンポーネントが消えるのを待ってからスクショを撮りたいみたいな時に特定の要素が消えるのを待つ方法をMEMO 結論だけ言うと以下のようにスクリーンショットを習得する前にローダーが無くなることを判定すれば良い。 page.has_…

Ruby on Railsのsystem specで画面ショットを取りつつmasterとの画像比較してVRT的なことできないかなーと思っていたのですが、Capybaraのpage.save_screenshotとreg-cliを使うと実現できそうだったのでメモ ちなみにPlaywrightでは以下の通りtoHaveScreensh…

個人のWebサービスでconfig.content_security_policy_report_only=trueを外し、CSP違反があった場合にブラウザエラーを発生させるようにしたところ、Sytem Specが軒並み落ちるようになり対応したのでやったことをメモ 事象 原因 解決策 参考 事象 ブラウザエ…

Rubyのdefine_methodを使うと外部からレシーバーに任意のメソッドを定義できますが、キーワード引数を持つメソッドを定義するときにやり方を迷ったのでメモ docs.ruby-lang.org define_methodは以下のようにblockを渡してメソッドを定義できますが、block引…

Heroku等で運用しているとバッチサーバーを別のプロセスで実行するとお金が掛かったりするのでGoodJobを用いている場合にRailsアプリケーションと同一プロセスで起動する方法をメモ GoodJobについてはこちら madogiwa0124.hatenablog.com やり方としては簡単…