Playwrightで画面外のloading=’lazy’な画像もscreenshotに含める


 はじめに
例えば、「APIからのレスポンスをラジオボタンで表現したいがブラウザの幅に合わせて一定を超えるとプルダウンにしたい」などといった時に要素のリサイズを検知したくなります。
ReactではDOMにアタッチしたい場合useRefというAPIを用いることが多いと思います。しかし、useRefの返り値はプレーンなJavaScriptのオブジェクトであり、変更があってもコンポーネントのライフサイクルには影響しません。そのため、要素のサイズ変更を知りたい場合にはuseEffectと一緒にwindow.addEventListener('resize', () =&gt; {});などと書...

ResizeObserverを用いて要素のサイズ変更時に再レンダリングさせる

web-speed-hackathon-2022に挑戦した

2022年の振り返り

はじめに
この記事はHRBrain Advent Calendar 2022カレンダー2の6日目の記事です。
https://qiita.com/advent-calendar/2022/hrbra…

スタイルを上書きできるコンポーネントはなるべく作らない方がいいという話

nodeのバージョンマネージャーをfnmにした

なかなかクリーンかもしれないオレオレeslintrc.js

TILというrepositoryを作った


 概要
手元にGraphQLが動かせる環境が欲しかったので最小構成で作ってみました。
せっかくだからとApollo Clientではなくurqlを使ってみようとしたところgraphql-codegen周りでちょっと手が止まったのでメモがてら記事にします。
完成版はこちら

 環境

Node.js 16.16.0
yarn 1.22.10
Go 1.17


 server
基本的にgqlgenの公式ドキュメント通りに実行していきます。

 go mod init

go mod init github.com/${myname}/xxx-app

 tools.goを用意
gqlge...

React + Go + GraphQL + urqlを最小構成で試す

Next.jsとNotionAPIでブログを作り直した

ブログを作り直す

vscodeの拡張機能を作る

webブラウザを自作するには

今Reactで新規PJを作るなら 2022

ちゃんとRealWorldを作る

Reduxのテストを書くために学んだ・読んだもの

現在React Native + Expo + Twitter APIで個人開発をしているのですが、Twitter APIに苦戦したので書きます。
コードは基本的にReact/React Nativ…

Twitter APIで取得できるツイートのIDの丸め誤差問題を解決する

Next.jsに限った話ではないのですが、faviconを設定する時の手順をまとめました。
#Favicon用の画像を準備する
#Favicon Generator
プラットフォーム毎のアイコンを生…

Next.jsでFaviconを設定する

#はじめに
https://storybook.js.org/releases/6.0
2020年8月10日にStorybook6.0がリリースされました。
5.3からアップグレードを行う際に調べた…