ウィンドウリサイズイベントで変更されたウィンドウの幅を取得するhooksのメモ リサイズしたとき無駄に発火しないように setTimeout() を入れています。 // useWindowWidth.ts import { useCallback, useLayoutEffect, useState } from "react"; /** * resizeイベントで変更されたウィンドウの幅を取得する * @param {number} ms - イベント発火後のdelay * @returns {number} window width */ export const useWindowWidth = (ms: number = 200): number => { const [width, setWidth] = useState(0); const updateWidth = useC

iMovie から Final Cut Pro への乗り換えは簡単。 そんなふうに考えていた時期が俺にもありました。 iMovie メニュー 「ファイル」＞「ムービーをFinal Cut Proに送信」 で上記のエラー 「アプリケーション“iMovie”から送信されたXML書類を読み込めませんでした。DTDバージョンが認識されません。」 が出てしまう😇 iMovie と Final Cut Pro の CurrentVersion.plist を見てみると、以下のようになっている。 <!-- iMovie --> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd

エラー proc macro "xxx" not expanded... という構文エラーになってしまったら ここに対応するissueがあるので github.com バージョンを上記対応版の 0.3.1277 に下げると解消します。 完全なる一時凌ぎですが、エディタが赤いとソワソワしてしまう方は是非👍

ECRのイメージをビルドするときに以下のエラーになりました。 => [internal] load build definition from Dockerfile.lambda 0.0s => => transferring dockerfile: 44B 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => CANCELED [internal] load metadata for docker.io/library/golang:1.18.5-alpin 1.2s => ERROR [internal] load metadata for public.ecr.aws/lambda/go:latest 0.7s ------ > [internal] load metadat

タイトルの通りなんだけど graphql-codegen のValidationエラーの原因がいつもよくわからない $ yarn graphql-codegen ... ❯ Generate outputs ❯ Generate /hoge/fuga/frontend/src/pages/User/graphql.ts ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Generate → GraphQL Document Validation failed with 1 errors Found 1 error ✖ /hoge/fuga/frontend/src/pages/User/graphql.ts AggregateError: GraphQL Document Validation failed with 1 errors at

Laravel で、APIを追加したのにアクセスできないんだよな php artisan route:list にも出てこないんだよな ってことありませんか？ わたしは割とかなり良くある。 そういうときは雑に以下のコマンドを叩くとだいたい解決します。 rm bootstrap/cache/* && php artisan cache:clear && php artisan config:clear && php artisan config:cache && php artisan route:clear && php artisan view:clear && php artisan clear-compiled && php artisan optimize && composer dump-autoload Symfony で php symfony cc 叩けばだいたい解決したの

リモートワークで、作ったものをスクリーンキャプチャで共有する機会が多くなりまして ffmpeg を使って、mov を gif に変換する alias を登録しました。 $ brew install ffmpeg したあとに ~/.zshrc などに以下を追加 function m2g() { command ffmpeg -i $1 -r 6 $1.gif } んで source ~/.zshrc して $ m2g movie.mov とすると movie.mov と同じ場所に movie.mov.gif が作成されます。 20秒くらいなら github に貼れるサイズ (max10M) の gif になると思います。 もっとサイズを小さくしたい場合は、フレームレート (-r 6 のところ) の数値を小さくすればOKです👍

PHPで多言語対応の際使うメソッド Locale::acceptFromHttp() を利用するために intl を有効にします。 https://www.php.net/manual/ja/intro.intl.php んで、合わせて libicu-dev をインストールします。これを忘れちゃう！なのでメモ。 Dockerfile に追加してビルドすればOKです。 RUN apt-get update \ && apt-get install -y libicu-dev \ && docker-php-ext-install intl

必要に駆られて夜な夜な急遽作ったのですがせっかくなので置いておきます。 props でタイマーのON/OFFをセットするよ。 <!-- Usage --> <CountUpTimer :on-start="isStarted" /> <template> <div class="count-up-timer"> <div class="time"> {{ time }} </div> </div> </template> <script> export default { name: 'CountUpTimer', props: { onStart: { type: Boolean, required: true, default: false } }, data() { return { totalSec: 0, timeKeeper: null } }, computed: { tim

db:migrate は問題なくできる環境で、 rails console からのDB接続ができない。 $ bundle exec rails console [1] pry(main)> Hoge.all Mysql2::Error::ConnectionError: Can't connect to MySQL server on '127.0.0.1' (111 "Connection refused") from /usr/local/bundle/gems/mysql2-0.5.2/lib/mysql2/client.rb:90:in `connect' おかしいな？DBサーバー名は 127.0.0.1 じゃない値を設定しているのだけども。。 試行錯誤した結果、 springをオフにして実行したらDBにつながりました。 DISABLE_SPRING=1 bundle exec r

Dockerコンテナのなかで rails console すると起動出来ない。 $ rails console Could not find gli-2.19.0 in any of the sources Run `bundle install` to install missing gems. bundle install しても治らない。 $BUNDLE_PATH が上書きされていた。 $ echo $BUNDLE_PATH /usr/local/bundle # <= 正しいパス $ cat ~/.bundle/config --- BUNDLE_PATH: "vendor/bundle" # <= 上書きしてたパス 上書きしてたパスのファイルを削除したら治った！ $ rm ~/.bundle/config 去年も同じネタで嵌まっていた。 来年はこれで嵌まらないようにしたい。

php-cs-fixer.phar もパス通したのに「php general error」が解決出来ない。 拡張機能の組み合わせの相性が悪かったらしく、インテリセンスを変更したらなおった。 PHP IntelliSense をやめて PHP Intelephense に変更。

こういう構成のdocker-composeで、frontendコンテナ(Nuxt.js:localhost:3000)から backendコンテナ(Laravel:localhost:8000)にAPIリクエストをしたら [HPM] Error occurred while trying to proxy request /api/hoge from localhost:3000 to http://localhost:8000/ という504エラーが返ってきて、backendまで届いていない。。 これは フロントエンドの nuxt.config.js のproxy設定が間違っていて、 proxy: { '/api': { target: 'http://localhost:8000/api', pathRewrite: { '^/api/': '/' } } }, を以下のように修正して

コンテナでは起動を確認できる( docker-compose exec [コンテナ名] bash で、 curl localhost:8080 とすると起動してればhtmlが返る )のに、ホスト側で見れない。 package.json を以下のように書き換えたら見られるようになった。 # これを "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, # こうじゃ！ "scripts": { "dev": "HOST=0.0.0.0 PORT=8080 nuxt", # ココを変えた！ "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" },

throw new SAOError(`Failed to install ${packageName} in ${cwd}`) とか出て進まない。メッセージ違うけど、前もあったなこれ・・・ 今回はESListを外したら成功しました。成功した組み合わせ置いておきます。 ? Choose the package manager Yarn ? Choose UI framework Element ? Choose custom server framework None (Recommended) ? Choose Nuxt.js modules Axios ? Choose linting tools Prettier ? Choose test framework None ? Choose rendering mode Single Page App

axiosでAPIにアクセスするとき、エラーレスポンスをハンドリングすることは出来るんだけど、接続エラーなどの、サーバーからレスポンスが何も帰ってこないエラー(ネットワークエラー)は onError にも onResponse にも入ってこない。 // @/plugins/axios.js export default function({ $axios }) { $axios.onRequest(req => { // リクエスト前に呼び出されるコード }) $axios.onResponse(res => { // 成功レスポンスを受け取った時に呼び出されるコード // 接続エラーはここにこない(レスポンス自体ないから) }) $axios.onError(res => { // エラーレスポンスを受け取った時に呼び出されるコード // 接続エラーはここにこない(レスポンス自体ないから

Vue.js 開発環境で、chromeアップデートしたら Unchecked runtime.lastError: The message port closed before a response was received. がコンソールに出るようになった。 ぐぐると拡張機能のどれかが影響して出ているらしい。 でも、環境によって犯人が異なるみたい。 なので、インストール済みの拡張機能を少しずつオンオフしていくと、私の環境では、犯人は SkyChromeExtension だった。 速攻オフって平安を取り戻した。

なぜかうまくいかず時間がかかったのでメモ こういうページネーションのコンポーネントのテストを書くとき、 コンポーネントのpropsには以下のような値(現在のページ,ページあたりの件数,トータル件数)を設定できるとして <Pagination :config="{ current: 1, limit: 20, total: 100 }" @movePage="load" /> propsに値を設定したことを受け、watch に定義したメソッドで、data() の最終ページ lastPage の値を算出したい。 watch: { config: function(payload) { // ここではわかりやすく「5ページ >>」とか変数にいれてる this.lastPage = Math.ceil(payload.total / payload.limit) + 'ページ >>' // 上記例

よくあるSPAのドロップダウン。 ドロップダウンだ <n-link class="navbar-link" to="/members"> <span class="icon is-medium"> <i class="fas fa-lg fa-user"></i> </span> <span>メンバー管理</span> </n-link> <div class="navbar-dropdown"> <n-link class="navbar-item" to="/members">メンバー一覧</n-link> <n-link class="navbar-item" to="/members/new">メンバー登録</n-link> </div> これ、なぜか n-link click後にフォーカス状態が残ってしまい、閉じてくれない。 これは @click.native イベントに一行追加

こういうやつ // NG watch: { config: (val, oldVal) => { console.log(val) console.log(oldVal) } } functionにする必要があります。 // OK watch: { config: function(val, oldVal) { // functionにする console.log(val) console.log(oldVal) } } ウォッチャを定義するためにアロー関数を使用すべきではない と、ドキュメントにちゃんと、しかも太字で書いてありました。。サーセン jp.vuejs.org