今年も一年が終わるということで今年も振り返ってみる。 今年の振り返り アウトプット BLOG BLOGは、今年1年で51記事書いていて、1週間に1記事ぐらい書いてるので、そこそこ書いてた✍ (月間PV数は5000PVくらい) pickup madogiwa0124.hatenablog.com madogiwa…

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

Haml v6からHamlの内部実装がHamlitに置き換わりパフォーマンス向上等のメリットがありますが、 github.com 以下のissueでコメントされている通り、 github.com Vue.js等を利用している場合に以下のようなfalsyの値がv5系では<cutsom-element />となっていたのが、 %cutsom-ele</cutsom-element>…

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

vscode-standard-rubyでプリインストールのrubyで実行されてしまいパッケージマネージャーで関しているバージョンで実行されずLSPが落ちてしまいハマったので対応したことをメモ github.com 事象 解決方法 参考 事象 以下のようにターミナルで確認するとパッ…

rbenv+nodebrewからasdfに移行してみたのでやったことをメモしておきます github.com asdfインストール 公式はgit cloneの方法のようだが、homebrewからinstallできるようなのでinstall https://asdf-vm.com/guide/getting-started.html#_2-download-asdf $ …

テスト用にRoutingを動的にいじってテストしたいことがたまにあるのでやり方をメモ まず以下のようなテスト用のhelperを用意します。 中でやっていることは動的にrouteを追加するdraw_test_routesとそれをリセットするreload_routes!を実装しています。 modu…

TypeScript v5から導入されたverbatimModuleSyntaxをtrueにすると型定義を普通にimportするとエラーになります。 TypeScript 5.0 introduces a new option called --verbatimModuleSyntax to simplify the situation. The rules are much simpler - any impo…

ユーザーに安全なパスワードの設定を促すために強度を測定しフィードバックしたいといった時にDropbox製のzxcvbnがよく使われていると思います。 github.com ただ、このライブラリのサイズが大きかったりメンテナンスに不安があったりと、 So, I came across…

Ruby on RailsでメーラーのViewはデフォルトでapp/views配下に置かれてしまい数が多くなってくるとControllerからrenderされるものとMailerからrenderされるものが混在してしまい見通しが悪くなるケースがあります。 メーラーのビューは app/views/name_of_m…

今までVSCodeでRubyを使うときにはrebornix.rubyを使うことが多かったと思うのですが、 marketplace.visualstudio.com 現状は非推奨となっており、 Shopify's ruby-lsp and associated vscode-ruby-lsp are recommended alternatives to this extension. It …

ESLintのno-restricted-syntaxが便利だったので使い方をメモ eslint.org 例えばVue3へのアップデート時に以下のようなVue Test Utilsの変更がありアップデートするまでwrapper.destroyを禁止したいとします。 Wrapper API (mount) destroy: renamed to unmou…

2023/10/05にRuby on Rails v7.1がリリースされました rubyonrails.org 個人のwebサービスなので以下のように規模はかなり小さめですがやったこととかをメモ +----------------------+--------+--------+---------+---------+-----+-------+ | Name | Lines …

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…

VitestのIn-source testingを使ってみたのでメモ vitest.dev In-source testingとは？ 導入方法 テストコードの書き方 参考 In-source testingとは？ 以下のようにコード上のimport.meta.vitestの中にテストコードを直接書くことができる機能 // src/index.t…

影響の大きいライブラリのアップデートを行う際に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.…

あるcomponentのTransitionに合わせて別の要素もアニメーションで動かしたい時のメモ オフセット付きのサイドメニューを作成するような際に一方のトランジションに合わせて他の要素をアニメーションを設定して動かしたいと場合には、JavaScriptフックを使う…

Vue.js v3のtransitionで.v-enterを設定し表示時にアニメーションを定義したかったけど、動かず軽くハマったので対応方法をメモ 事象 原因 対応 おわりに 事象 transitionでアニメーションを動かそうと思い以下のコンポーネントのような実装をしたが、開始ア…

ブランドロゴ等で目立たせるためにWebフォントを利用する際に特定の文字列だけ取得して最適化する方法をメモ 結論 textパラメーターで利用した文字を付与してあげれば良い @import "https://fonts.googleapis.com/css2?family=Ubuntu&display=swap&text=Bra…

スクロールしてTOPに戻るボタンを実装する際にスムーズにスクロールさせるためにcssでscroll-behaviorを指定することがよくあると思いますが、 developer.mozilla.org Window.scrollBy()の実行時にも指定できることを知らなかったのでメモ developer.mozilla…

Media Queries: Range SyntaxがSafariを含むモダンブラウザで利用できるようになったので公式ドキュメントの通りですが、書き方をメモ 簡単ですが今までmax-widthで指定していたものが不等号で直感的に書けるようになりました before @media (max-width: 30e…

Rubyだとbrakemanのようなライブラリがありますが、 github.com JavaScriptでもこういうセキュリティ周りの静的解析系のライブラリがあるのかなと探してみたらeslint-plugin-securityなるものを見つけて個人のサービスに導入してみたのでメモ github.com 導…

Viteにもwebpackでいうところのcompression-webpack-pluginみたいな成果物をgzip圧縮するツールを探してみたところ、 github.com vite-plugin-compressionというまさになツールがあり個人のWebサービスに導入してみたので使い方をメモ github.com といっても…

待望のdependabotのgroup機能がpublic betaでリリースされたので早速設定してみたのでメモ github.blog (今まではrenoveteとかを使わないと出来なかった) github.com とりあえず以下のように.github/dependabot.ymlを設定してみました！ version: 2 updates:…

Playwrightを使ったビジュアルリグレッションテストの追加が思った以上に簡単にできたのでやり方をメモ playwright.dev Playwrightの導入 playwrightの導入方法に関しては以下を参照してください。 playwright.dev Playwrightによるビジュアルリグレッション…

タイトル通り、KombuというRuby on Railsでjavascriptで描画するcomponentを指定してrenderできるgemをリリースしました✨ (コンポーネント・レンダラブルを略してコンブ です) github.com モチベーション Ruby on Railsを利用してサービスが成長してくるとVu…

Ruby on Railsで管理画面とユーザーが閲覧する画面でlayoutを分けるようなケースが一定あると思いますが、 その際に以下のようにlayouts配下にディレクトリを切っていくとApplicationControllerとAdmin::ApplicationControllerでControllerを分けた際にRails…

タイトル通り、ポチポチしてRails newコマンドを作れるツールをAstro on Vue.jsで作った‍ madogiwa0124.github.io 機能的にはrails newで指定できる各optionをUI上からポチポチして以下のようなコマンドをコピーできるやつです。 $ rails new app_name --dat…