JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
Surface Pro 9に機種変更後、Bluetoothマウスがカクカクする問題を回避する - JBS Tech Blog
小ネタです。会社貸与PCがSurface Pro 7からPro 9に変更になったのですが、変更後にBluetoothマウスがカクカクする問題に見舞われました。 対処方法についてメモを残します。 発生した症状 効果があった対処法 ある程度効果があった対処法 注意点 参考：効果がなかった対処法 おわりに 発生した症状 Surface Pro 9にBluetooth マウスを接続して利用しています。Pro 7の時にはなかったのですが、Pro 9に変えてからマウスがカクカクする挙動を取るようになりました。 複数のBluetooth マウス（およびトラックボール）で確認しましたが同様でした。 試したデバイスです。 ロジクール MX MASTER 3 ロジクール MX MASTER 3S ロジクール ERGO M575 ワイヤレス トラックボール 効果があった対処法 今回のケースでは、電源とバッテリー
検索エンジンがyahoo.co.jpからyahoo.comに変更されていた。【Android】 - Google Chrome コミュニティ
メイン コンテンツにスキップ false 検索検索をクリア検索を終了Google アプリメインメニュー
Node.js 14から18へアップデートする方法について
Corepackを使ってNode.jsをアップデートする ⬆️⬆️というタイトルで、Node.js 14からNode.js 18へのアップデートする方法について話した。 Node.js 14は4月末でEOLで、Node.js 18までアップデートする必要があるけど、npmの変更が混ざって大変です。 Corepackを使うことで、Node.jsとnpmのアップデートを同時にやらなくても良くなり、問題を分割して対応できます！ Corepackを使ってNode.jsをアップデートする ⬆️⬆️https://t.co/mRHsBcYbpn pic.twitter.com/HiiCe7c5YE — azu (@azu_re) April 28, 2023 スライド: Corepackを使ってNode.jsをアップデートする ⬆️⬆️ Note: Node.js 14は2023-04-30でEOLで
brew upgrade でのエラー対処からCommand Line Toolsについてまとめてみる｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事をさせてもらっているウイングドアのウメバヤシです。 最近、brew upgradeをした際に、Command Line Tools（以下「CLT」）が原因でエラーが出たのでその解決をしました。 その時にCLTについても少し調べてみたのですが、ネットで検索してヒットする情報の中には、間違った認識のものや、あやふやな内容のものが結構多いなという印象を受けました。 なので今回は、Homebrewのエラーの解決方法と、信頼できるソースや検証した結果を元に、CLTについてできるだけ正しく解説していきます。 検証環境 * PC : MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) * OS : macOS Big Sur バージョン 11.2.3（20D91） * Homebrew : 3.0.5 * xcod
Best practice for instantiating Prisma Client with Next.js
ProblemMany users have come across this warning while working with Next.js in development: warn(prisma-client) There are already 10 instances of Prisma Client actively running. There's a related discussion and issue for the same. In development, the command next dev clears Node.js cache on run. This in turn initializes a new PrismaClient instance each time due to hot reloading that creates a conne
warn(prisma-client) Already 10 Prisma Clients are actively runningの対処
TL;DR new PrismaClient() を複数回書いてる可能性があるので、 root直下でlibのようなファイルを作り、そこで、PrsimaClientのインスタンスを１度だけ生成し、そこからimportする形で、PrismaClientのインスタンスを使用すれば解決。 概要 Prismaを使用している時、 warn(prisma-client) Already 10 Prisma Clients are actively runningというメッセージがコンソールに表示されることがある。 本番Build時にこの箇所が原因で、DBのコネクション数の制限のエラーになることがある。 前提 Node.js: 14.16 TypeScript: 4.2.3 ts-node: 9.1.1 prisma: 2.18.0 @prisma/client: 2.18.0 原因 new Prisma
Windows11 WSL2 で systemd - hiroの長い冒険日記
Windows11 の WSL2 では systemd が動作しておらず、SystemV init とも異なるMicrosoft 独自の init が PID 1 で起動しています。Windows との連携や高速に仮想マシンを起動する為には必要な事なのかもしれませんが、現在の Linux distribution では systemd がほぼ標準で使用されている事もあり、daemon の起動・停止や各種サービスについての知識が活用できない事が多くあります。起動や処理速度が遅くなるのはある程度許容した上で、WSL2 で systemd を使えるようにしてみました。WSL2 で systemd を使用する方法には複数ありますので、それぞれについて試してみました。 2022.10.16 追記 Ubuntu 標準の systemd を使ってみました。 WSL2 に複数の Ubuntu を inst
GitHub Actions 最近のやらかし一覧 - Kengo's blog
FOSS開発で細かいやらかしを積み上げてきたのでまとめる。 テストの失敗原因レポートをartifactとしてアップロードしそこねる actions/upload-artifactを使ってテストレポートをartifactとしてアップロードする際、以下の書き方だと失敗する。 # bad - run: | ./gradlew test --no-daemon --stacktrace - uses: actions/upload-artifact@v2 with: name: reports path: build/reports これはテストが失敗した時点で後続のstepsが実行されなくなるため。明示的に失敗時でもアップロードされるように指示する必要がある。 # bad - run: | ./gradlew test --no-daemon --stacktrace - uses: actio
[Linux]ハードディスクが壊れる予兆を知る - Qiita
S.M.A.R.T.の情報からハードディスクの健康状態を確認できますが、時にはS.M.A.R.T.の状態がgoodであってもエラーがあって突然壊れてしまう場合もあります。 これまでの経験から、ハードディスクが壊れる前に起こりうる状況についてまとめました。 なお、当方、ハードディスク並びにUSBメモリでの故障しか経験していないため、SSDでは当てはまらないケースがあるかもしれません また、この記事で取り上げたメッセージはファイルシステム、Linuxカーネルのバージョンやディストリビューションの違いによって差異があるかもしれません。大まかな意味は変わらないと思いますので、メッセージ内容は参考程度に留めてください ディスクが壊れたと疑う前のチェック まず最初に、ハードディスク自体の故障を疑う前にディスクの設置環境を確認してみましょう。ハードディスクは正常であっても次のようなことがあれば故障と同じ
![[Linux]ハードディスクが壊れる予兆を知る - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/843c56d607799ad65bee0cae8dae7b2c2dc1df95/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTGludXglNUQlRTMlODMlOEYlRTMlODMlQkMlRTMlODMlODklRTMlODMlODclRTMlODIlQTMlRTMlODIlQjklRTMlODIlQUYlRTMlODElOEMlRTUlQTMlOEElRTMlODIlOEMlRTMlODIlOEIlRTQlQkElODglRTUlODUlODYlRTMlODIlOTIlRTclOUYlQTUlRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTMwYzQ0ZGE2N2U2NDE1ZDAyZmIyOWUzY2Y5ODYyY2Jl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXp1dHN1a2kwMjIwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NzczMzAzZjkxMmNhY2JmMWVlM2JkMGIzM2M4MmRjMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D9c42f767863eb2bcda7fda0d5d53ebd6)
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω｀) pic.t
PWAでカメラを使うためiOSとAndroidで異なるmanifestを読み込む - Qiita
TL;DR ・iOSのPWAでは表示モードがstandaloneの場合にカメラを開くことができない。 ・Androidでの起動時にはstandalone、iOSではbrowserで起動する。 ・ページアクセス時にuserAgentからOSを判定し、OSに応じて異なるmanifestを読み込む。 カメラを開く最小限のPWA構成 ファイル構成は下記の通りです。 icon.pngは適当な192x192の画像を用意してください。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="ico
美容内服薬ラボットメディカルクリニック【公式】
オンライン診療とは、自宅にいながら医師に直接毎日のスキンケアを相談したり、医薬品や漢方薬の処方を受けることができたりする診察のこと。お薬が処方された場合は郵送で薬局等にお薬を取りにいかなくても、自宅に届けられます。 普段、病院では発生する診察費用や処方箋費用はもちろん、お薬代以外の費用は一切かかりません。
AWS SDK (Node.js) で S3 putObjectするときに気をつけること
どーもです。まーやです。作業中にちょっとハマったので自分用にメモ。 やりたかったこと S3でstatic website hostingを実施 AWS Lambda 内で以下操作を行う(今回対象となるファイルはJSONファイル) S3 バケツ内のファイル読み込み 読み込んだファイルのデータを更新してS3へupload 読み込む＆uploadするファイルにはパブリックアクセス権限(everyone read)を付与したい Lambdaは諸事情によりNode.jsで実装しました。 やったこと S3のstatic web hostingについてはネット上にたくさん落ちているので割愛。 Lambda内でS3 getbjectもほぼチュートリアル通りに実装。 この後に、とってきたJSONを使ってごにょごにょしたかったのでPromise使って順番制御しました。 /** この変数群は後述するs3Uplo
【PWA】「ホーム画面に追加」の「Site cannot be installed: the page does not work offline」エラー対策
結論：serviceWorker用のJSファイルに「self.addEventListener('fetch', function(event) {});」と追記すれば直る。 自作のWebアプリで「ホーム画面に追加」機能を加えようと以下を用意しました。 manifest.json seviceWorker.js（空のファイル） HTMLのヘッダーで上記「manifest.json」を読み込むようにして、HTMLのフッターには以下のJSを追記。 window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register("/serviceWorker.js") .then(function(registration) { console.lo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【マイクラ】「お使いのアカウントでは現在、Minecraft Launcherをご利用いただけません。」エラーを修正する方法 - SHUSEI GRAPH｜大学受験×ゲーム×ソーシャルメディア
Bug: DevTools tabs don't show up sometimes in latest release · Issue #19002 · facebook/react
Config clone before validating kills Object data (7.3.0) · Issue #13427 · eslint/eslint
puppeteer/docs/troubleshooting.md at main · puppeteer/puppeteer
Loading...
