開発
ブランドロゴ等で目立たせるために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…
Proc(lamda)を定義時ではなく実行時のコンテキスで実行する際にちょっとハマったのでメモ 結論: instance_exec(&proc)で実行すれば良かった。 以下のような外部で定義したprocを受け取って実行した際にhello! by Caller.と出ることを期待したのですが実行す…
Moment.jsは現在メンテナンスモードに入っているため、今更ながらDay.jsに乗り換えたのでやり方とかをメモ We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done. Moment.js | Docs Day.js…
markuplintとは markuplint.dev すべてのマークアップ開発者のためのHTMLリンター 適合性チェック マークアップは、有効なコードを記述する必要があります。これは、各ユーザーエージェントを介してウェブページを壊さないという標準の約束を守るために重要…
RSpecのカスタムマッチャの作り方をいろいろ調べたのでメモ 作り方 RSpec::Matchers.defineを使う moduleで定義する おわりに 参考 作り方 RSpec::Matchers.defineを使う カジュアルな追加方法としてRSpec::Matchers.defineで追加する方法があります。 以下…
Ruby on Railsを拡張するGemを作成する等、デフォルトの振る舞いといったものRails.application.configureで設定できるようにしたいなぁと思ったのですが、config.xは使わずにネストしたカスタム設定をいい感じに追加する方法をメモ🗒 Railsガイドを見ると以下…
Ruby on Railsのlink_toには、methodを指定してGET以外のリクエストを送信する機能があります。Viewを含めてフロント周りをVue.jsに置き換えるときに、この辺りの再現がネックになったのでVue.jsでの再現方法をメモ You can bind to the same Ajax events as…
はじめに 基本方針 実装したコード 利用例 おわりに はじめに RailsでVue.jsを採用している場合、Vue SFCのscoped cssを利用してCSS周りの統制と取りたくなりますが、RailsのView層に色々要素を書いてしまうとそれも難しくなってきます。 vue-loader-v14.vue…
Ruby on Railsで実装していたViewをVue.jsのComponentに置き換える場合に、form_withはよしなに行ってくれていたCSRF Tokenの設定やPATCH等のGET、POST以外のmethodをRailsに認識させるためにhiddenで送信したりする処理を独自に実装する必要があります。 fo…
Vue.jsを使っていてモーダルを実装する際にアクセシビリティ等々考慮したりすると実装が難しかったりするので何かしらライブラリを利用したいと思ったときにVue Final ModalがVue3にも対応していてサクッと実装できて便利だったのでメモ vue-final-modal.org…
以下のようなメニューを作るときに最後の要素以外にboarderを入れて区切り線をいれたいときに:notと:last-childを使うと簡単にできたのでメモ See the Pen menu-sample by madogiwa (@madogiwa0124) on CodePen. やり方は簡単で以下のような:not(:last-child…
bulmaを利用している際に@import 'bulma/bulma'をで全部入りを利用してしまうとCSSのサイズも大きくなりbulmaに強く依存してしまって外しにくくなってしまって困ってたのですがモジュール単位で利用できることを知ったのでメモ bulma.io やり方は簡単で以下…
Ruby on Rails製の個人のWebサービスにOpen APIのChat GPTを使った機能を盛り込んだ時にruby-openaiを使うと簡単にリクエス部分を実装できたので、ほとんど公式READMEの通りですがメモ github.com API KEYの取得方法等は以下の記事を参考にしてください。 ma…
個人のWebサービスで利用しているpackage managerをyarnからnpmに移行したのでメモ 移行のモチベーション 移行手順 関連ライブラリを最新の状態にする npmを最新のバージョンに更新 package.jsonの書き換え yarn.lock、node_modulesを削除してnpm installす…
ChatGPTのAPIで遊んだので設定周りとかメモ 準備 OpenAIのAPI KEYの作成 以下のページの「Get started」からアカウントを作成し、 openai.com https://platform.openai.com/account/api-keys から API KEYを作成します。 私が作成したときには2023年6月1日の…
CSS グリッドレイアウトを利用時にposition: stickyを効かせるにはstickyを指定するセレクターでalign-self: start;等を指定し高さをストレッチしないようにする必要がありますが、 coliss.com なぜかalign-self: start;を指定しても効かなかった事象があっ…
Ruby 3.2.0で導入されたYJITをHerokuで有効化してみたのでやり方をメモ github.com HerokuでYJITを有効化する 結論だけ言うと、以下のコマンドを実行して環境変数RUBYOPTに--enable-yjitを指定してあげればです✨ heroku config:set RUBYOPT="--enable-yjit" …
Vue 3.x系ではVue.extendが削除されています。 Vue.extend Removed Global API Application Instance | Vue 3 Migration Guide そのためOptions APIでTypeScriptを利用したComponentではdefineComponentを使う等の変更が必要になります。 -- import Vue from…
ESLintのカスタムルールを作る機会があったので手順とかメモ 公式Doc eslint.org ESLintのカスタムルールの作り方MEMO カスタムルールを配置するディレクトリを作成する カスタムルールの雛作る カスタムルールを実行するようにconfig及び実行コマンドを修正…
昨年末Ruby 3.2.0がリリースされましたね✨ www.ruby-lang.org 今更ながらローカルのRubyのバージョンをrbenvで3.2.0に上げようと思ったのですがエラーが発生したのでその対応方法とかをメモ 発生した問題 解決方法 発生した問題 いつもどおり以下のコマンド…
Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を…