TypeSript 2.8で追加された Conditional Typesの基本的な使い方を調べた 型定義における条件分岐で、型が互換性を満たす場合に任意の型を返却できる JSの三項演算子のようにT extends X ? X : Zという構文で表される Mapped Typesでの利用 interface Propert…

昨日の記事に引き続いて同様のエラーが発生した Expected leading [0-9a-fA-F] character but was 0xd 同様のエラーについて uga-box.hatenablog.com ここのissueにもあるように、APIのレスポンスデータの欠損が問題みたい github.com いまのところ解決策は…

GCPのError Reportingで以下のエラーが検知されていた java.io.EOFException: source exhausted prematurely AppEngineがある外部サービスのAPIにOkHttpを使ってアクセスしたときに発生している ここにissueが上がっており、やりとりを見ると github.com 結…

Vercel製のSWRライブラリ「SWR」を調査してみる github.com SWRは、リモートデータフェッチ用のReactHooksライブラリ 「SWR」という名前はHTTPのstale-while-revalidateに由来していて、このキャッシュ戦略に影響を受けている stale-while-revalidateについ…

OGPと聞いてパッと何かがわからなかったので調べた ogp.me OGPとは OGPはOpen Graph Protocolの略 SNSでwebページや記事がシェアされた時に、そのページのtitle、URL、description、imageを表示させる仕組み ユーザのアクセス数を伸ばすためには気をかけた方…

Cloudinaryにアップロードしている画像がキャッシュされていないことがわかった これによりLCPが低い原因になっている そこで、リクエストを事前にしてキャッシュさせるキャッシュウォームアップを行いたい キャッシュウォーマー（クローラー）をJavaScript…

Cypressで404ページに遷移することを確認したいケースがある ただCypressdeではデフォルで404ページに遷移するケースはテストが失敗で終わるので、これを失敗にしないようにしたい failOnStatusCodeを使う 結論 Cypress.request() のfailOnStatusCodeオプシ…

あるページのコンテンツが少ない場合はフッターをウィンドウ下部に固定し、コンテンツがウィンドウサイズを超える場合はフッターをコンテンツの下におくというレイアウトをCSS3のflexboxを使って行っていた 実装は以下のような感じ body{ display: flex; min…

クリックジャグリングというサイバー攻撃を聞いてパッと説明できないなと思ったので調べた www.ipa.go.jp クリックジャグリング攻撃とは、ユーザーを視覚的にだまして正常に見えるウェブページ上のコンテンツをクリックさせ、別のウェブページのコンテンツを…

複数の画像のリサイズをDocker上で行いたい できればCLIで実行できるツールがよく、探しているとImagemagickというオープンソースをみつけた この魔法使いみたことあるので、有名なやつだと思うが使ったことがないで使ってみる imagemagick.org Dockerイメー…

node.jsからBucket内のファイルリストを取得する際、なにもオプションで指定しないと、そのBucket内の全てのファイルが取得されてしまう Bucket内のあるディレクトリ配下のみを取得したかったので、その方法を調査した prefixオプションを使う ドキュメント…

あるページのステータスコードが知りたく、手軽にcURLを使ってステータスコードだけを抽出することがしたい curl -LI example.com -o /dev/null -w '%{http_code}\n' -s option 概要 -L リダイレクトの遷移を追えるようにする -I HTTPレスポンスヘッダーの取…

AppEngineからGCSにある画像のSigned URLの一覧を取得したい こちらの記事が参考になった medium.com ツールのための簡易的なアプリケーションのため最低限の構成とする まず、権限をつける サービスアカウントを作成する App Engine 管理者とストレージ管理…

Next.jsのサンプルプログラムをローカルで動かしているときにホットリロード機能によってページが更新するためにIntelliJのindexingが動いて作業ができないため抑止したい Project Structure -> Modules を選んで、索引付けしたくないディレクトリをExclude…

Next jsを使用していて一部のページでSSRを無効にしたい 理由としてはモジュールにブラウザでのみ機能するライブラリが含まれているため やり方はコンポーネントを遅延読み込みし、SSRを無効にする方法が公式ドキュメントに記載されている https://nextjs.or…

Spring Bootで作ったJava アプリケーションからElasticsearchにbulk requestするところで以下のエラーが発生した org.elasticsearch.action.ActionRequestValidationException: Validation Failed: 1: no requests added BulkRequest request = new BulkRequ…

DockerでCypressを動かすためにはdocker run -it --ipc=host --shm-size=1024Mのコマンドで起動する必要があることがわかった uga-box.hatenablog.com Cloud Build で実行できるdockerコンテナイメージ（gcr.io/cloud-builders/docker）があるのでそれを利用…

Cypressをローカルで試したときはうまくいったが、GCP上のCloud Buildで動かそうとしたら失敗した uga-box.hatenablog.com ログは以下 Step #1: Step #1: Running: sample.spec.js (1 of 1) Step #1: Step #1: Step #1: country Step #1: [428:0806/021104.4…

Cypressを使ってE2Eテストを実施することにしたが、これをCloud Buildで実施したい uga-box.hatenablog.com 考えているフロー Cypressのdocker imageをCloud Buildで利用する そして、Cloud BuildでCypressを実行したあと、ScreenshotをGCSに登録する ローカ…

Cypressで画面のScreenshotを取得する その際に、以下の設定を行いたいので設定の仕方を調査 Screenshot取得前に前回のファイルを消したい Screenshotの出力先を変更したい Screenshotを取得するタイミングを延ばしたい docs.cypress.io 設定 やりたいこと …

Cypressでfull screenshotを指定した場合、viewport分スクロールをしてスクリーンショットを撮り、それを繋ぎ合わせる そのため、position: fixedまたはposition: stickyのコンテンツが最終的なスクリーンショットに複数回表示されることになる これを制御す…