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…

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では、ユーティリティクラスで使用でき…

以下のようなマークアップに対して、 <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のようなユーティリティクラスベースでのスタイリングにすることはページ間の一貫性を守りやすいという…

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…

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が軒並み落ちるようになり対応したのでやったことをメモ 事象 原因 解決策 参考 事象 ブラウザエ…

display: flexで横並びにした要素をモバイルサイズの場合に縦並びにするときにいい感じのやり方を探して、少しハマったのでメモ 結論としては以下の通りモバイルサイズの時だけflex-direction: column;を指定すれば横並びが縦並びになる .items { display: f…

TypeScriptで普通の関数であればParameter<function>で関数の引数の型を取得できますが、Classのconstructorの引数の型を取得する方法がイマイチ分からず少しハマったのでやり方をメモ Parameters Constructs a tuple type from the types used in the parameters of a</function>…

個人のWebサービスのエラー通知にRollbarを利用しているのですが、以下の通りデフォルトではVueアプリケーション内で発生したエラー(コンポーネント内のロジックでエラーが起きたケース等)は通知されないことに今更気づき、通知されるようにしたので対応した…

2023/11/16 Vite v5がリリースされました⚡️ vitejs.dev リリースから2ヶ月経ちライブラリ側のサポートも揃ってきたので、 個人のWebサービスをVite 4系からVite v5系にアップデートしたので対応したこととかをメモしておきます 前提事項 Vite v5アップデート…

Git管理されたプロジェクトにいくつかTypeScriptのプロジェクトがあり、それらをまとめて型チェックしたくスクリプトを書いたのでメモ 以下がそのスクリプトです。 git ls-files -- root/dir | \ grep "tsconfig.json" | sed 's/tsconfig.json//' | \ xargs …

Vue.jsのSFCを利用している場合に極力Scoped CSSを利用してCSSの統制を取りたいと思いますが、eslint-plugin-vue-scoped-css を利用すると静的解析で強制することができることを最近学んだのでメモ future-architect.github.io やり方は簡単で公式ドキュメン…

Vue3から以下のドキュメント記載の通りディープセレクタを利用する際に::v-deepから:deepに変更になりました。 <style scoped> /* deep selectors */ ::v-deep(.foo) {} /* shorthand */ :deep(.foo) {} /* targeting slot content */ ::v-slotted(.foo) {} /* shorthand *…

Ruby on Rails 5.2からContent Security Policyヘッダーを設定するDSLが提供されました。 2.5 Content Security Policy Rails 5.2 ships with a new DSL that allows you to configure a Content Security Policy for your application. You can configure a…

影響の大きいライブラリのアップデートを行う際にsnapshotを全てupdateする必要だがPRの差分は一旦小さくするために後でsnapshotテストの更新を行いたいケース等で一部のテストの実行有無を環境変数で切り替えたい時もままある気がするのでやり方をメモ やり…

Vue3アップデートの破壊的変更として以下のカスタムコンポーネントのv-modelに関するものがあり結構影響範囲が広そうで何かソリューション無いかなと思っていたのですが、 v3-migration.vuejs.org eslint-plugin-vueのカスタムルールを作れば意外と簡単にカ…

URLSearchParamsを使って{ tile: "sample", ids: [1, 2] }みたいなObjectを?title=sample&ids[]=1&ids[]=2みたいな文字列に変換する方法でハマったのでメモ URLSearchParamsを使うといい感じにobjectをURLパラメーターに変換できますが、 developer.mozilla.…