tmegos blog

Web developer

リモートワークのためだけのワンルームマンションを借りたけど更新しなかった

前回のお話 tmegos.hatenablog.jp あれから2年が経ち、契約更新の時期になりました。 いろいろ思うところがあり、更新はしませんでした!

VSCodeでGitLensを使っているとmerge editorが表示されなくなった

GitLensを入れていて、かつVSCode 1.70以上を使っているとmerge editorが表示されなくなった (Visual Studio Code July 2022) 以前のようにmerge editorを表示させたい場合、設定で "git.mergeEditor": false にするとOK 戻りました

Viteでbackend integrationしているときのvite-plugin-checkerの設定

HTMLテンプレートに以下のscriptを追加する <script type="module"> import { inject } from 'http://localhost:5173/@vite-plugin-checker-runtime' inject({ overlayConfig: {}, base: '/' }) </script> (http://localhost:5173はViteが動作しているURL)

TauriでTweetDeckを開くだけのアプリを作ってみた

2022年7月1日からTweetDeckのMacクライアントが使えなくなったので、Nativefierを使ってクライアントもどきを使っていた 2022年7月1日をもってTwitterクライアント「TweetDeck for Mac」が利用できない状態に。 nativefierを使ってTweetDeck Web版のアプリ化…

物理Krisp買ったらめっちゃよかった

2年くらいKrispを使い続けていて、そのノイズキャンセル機能には満足していたのですが、 よくよく考えると「Krispに課金した額でもっといいマイクを買えばよかったのでは?」という気持ちになったのでいろいろ調べてみることにしました 配信用に性能のいいマ…

Cypressでテストするときだけstyleを適用したい

例えばビジュアルリグレッションテストを実行する前に、無視したい要素を非表示にしたい、みたいなことがあると思います 私の場合はtooltipを含むボタンを押すテストで、まれにtooltipが表示されてボタンを押せないことがあったので、Cypressを実行している…

リモートワークのためだけのワンルームマンションを借りてみた

住居とは別に、リモートワークをするためだけのワンルームマンションを借りてみました。

GitHubをhttpsで操作するときにusernameすら聞いてくれなくなった

GitHubでは2021/08/13からgit操作でのIDとパスワードによる認証ができなくなりました https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ Parsonal Access Token(PAT)を準備してfetchしてみると $ git fetch remote: …

Material UIでFont iconsを使うときに自動翻訳されないようにする

現象 Google Chromeなどで翻訳機能をONにしていると、Font iconsが翻訳されてアイコンが表示されない ハンバーガーメニューのアイコンが出るはずなのに「メ」になっている 開発者ツールで見ると、「menu」が「メニュー」と訳されてしまっている

Material UI v5でのスタイリングエンジンをemotionからstyled-componentsに切り替える

Material UI v5ではスタイリング用のライブラリとしてemotionが使われるようです next.material-ui.com Material UIとは別にstyled-componentsを利用している場合、スタイリング用のライブラリが複数存在することになります Material UIでもstyled-component…

VSCodeでhoverしたときのTypeScriptの型をすべて出す

tsconfig.jsonに"noErrorTruncation": trueを指定すればOK 以下のissueコメントのとおりです github.com

Reactの再レンダリングをWhy Did You RenderとReact Profilerを使って調べる

Reactでできたアプリケーションのパフォーマンスチューニングのために、再レンダリングを調査し、改善したときのメモです 方針 Why Did You Renderを使って、propsやstateが同じはずなのに再レンダリングが発生しているところを見つける 1で見つかった再レン…

macOS Big SurでメニューバーからSidecarを有効にできるようにする

システム環境設定から、Dockとメニューバーを選択します そして、ディスプレイの項目で 「メニューバーに表示」にチェックを入れる 「常に」を選択する の2つの項目を設定します すると、メニューバーにディスプレイのアイコンが追加され、ここからSidecarを…

NetlifyでNode.jsのバージョンを指定する

NODE_VERSION でバージョンを指定します 指定する場所は、 Site settings > Build & deploy > Environment > Environment variables です https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables https://docs.…

iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド

現象 iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる 例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています bugs.webkit.org 環境 iPadO…

Percyをsnapshotを取らずに使いたい場合

モチベーション PercyのSDKに存在しないフレームワークを使用している https://docs.percy.io/docs/sdks レスポンシブデザインをJavaScriptで頑張っている場合 PercyはDOMのスナップショットを取得して、それをもとにレスポンシブのテストを行っている。その…

Reactの仮想リストライブラリを調べたときのメモ

まとめ Slackのような仮想リストを実現するのは難しい いずれのライブラリも上方向へのスクロールは難しい 普通に使う分には、react-virtuosoはいいぞ

WebdriverIO

github.com 作業ログです

QA Wolf

github.com 作業ログです

TestCafe

github.com 作業ログ

Introduce playwright

github.com 作業ログです

手になじむE2E Testing Frameworkを探して

E2E

github.com Getting Startだけさわるとよさそうに感じるけど、実務で使っていくと要素が取れなかったり、データ取得を待てなかったり、CIで回すとランダムフェイルしたりと苦労します そこで実際のWebアプリに近いもので同じテストを書いてみて使い勝手を確…

GitLabでrenovateを使う

公式ドキュメントの通りにuser/renovate-runnerなど、renovateのrunnerを実行するだけのプロジェクトを作成して、renovateが必要なプロジェクトを参照してもらう方法がよさそうです gitlab.com 環境 gitlab.com GitLab Enterprise Edition 13.8.0-pre

Onsen UI x CordovaなアプリをIonic x Capacitorに移植したときにやったこと

以下のようなモチベーションで、自作アプリをIonicで書き換えてみることにしました Vue.jsでもTypeScriptが使いたい 2から3に上げたい Onsen UIの更新が止まっていそう…? ダークモードに対応させたい - before after Vue.js 2.6.11 3.0.0-0 UI Framework On…

AdMobを使っていてAppのプライバシーを入力するとき

トラッキングについては、Info.plistにNSUserTrackingUsageDescriptionが ある:トラッキングのデータタイプを指定する ない:トラッキングのデータタイプを指定しなくてもよい と考えてもよさそうです ドキュメントを読む限り、トラッキングについてユーザ…

Snowpackでfailed to resolve module specifierが出てライブラリが読み込まれない

新しくライブラリを追加した後、ライブラリを呼び出すと以下のエラーが発生 ブラウザのコンソール Uncaught TypeError: Failed to resolve module specifier "ライブラリ". Relative references must start with either "/", "./", or "../". Snowpackのコン…

未解決 iPadOSでinput type="file"が効かなくなるケースがある

iOS

※解決できていません ここでは再現手順や試したことをメモとして残しています 環境 iPadOS 13.5.1 現象 <input type="file"> というとても簡単なコードでも、ファイル選択のダイアログが出なくなるケースがある

半角記号にマッチする正規表現

[!-/:-@[-`{-~] ASCIIコードで、 ! 〜 /、: 〜 @、[ 〜 `、{ 〜 ~ にマッチするという意味 0-9などと同じ意味だけど、なんでこうなるんだっけと思ったのでメモ 参考 文字一覧 (ASCII) - instant tools ASCIIと半角カナ一覧 - instant tools

Material UIにてダイアログ内の入力欄がソフトウェアキーボードに隠れる問題を解決するための1つの方法

現象 Material UIでダイアログ内にautoFocusを有効にした入力欄がある場合、iOSで入力欄がソフトウェアキーボードに隠れる github.com 対策 ダイアログのtransitionを無効にすると、ソフトウェアキーボードが出たタイミングでスクロールされて入力欄が隠れな…

alpineにperfをインストールする

Node.jsのパフォーマンスを測定するために、perfをインストールしたときのメモ nodejs.org 環境 node:12.16.2-alpine 方法 /etc/apk/repositories に以下のリポジトリを追加 http://dl-cdn.alpinelinux.org/alpine/edge/main # elfutils-devの0.179-r0を入れ…