導入 PlaywrightやReg SuitなどのVRT（Visual Regression Testing）の結果は、HTMLで出力されます。Playwright のヘルプ1 でもレポートをダウンロードして確認する方法が記載されていますが毎回行うのは面倒です。また、レポートをGitHub Pagesにデプロイする方法もありますが、アクセス制限にはEnterpriseプランが必要だったり、Pull Requestごとの結果を保存するのに手間がかかるなどの問題があります 2 3。Amazon S3にレポートを置く方法もアクセス制限が面倒なことが知られています。 そこでこのエントリでは、レポートをCloudflare Pagesにデプロイする方法を紹介します。Cloudflare PagesにはPreview deployments4があるため、Pull Requestごとのレポートをデプロイ

こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。 ビュー機能とは ローカル環境で開発したい bm-view-previewの内部構成 ライブラリとしてのPlaywright ブラウザを人の手で操作できるようにする ウィンドウを表示する ウィンドウのリサイズに対応する ダイアログを自動で閉じない できなかったこと アプリ

Investigate bugs and flaky tests with perfect reproducibility. “Running our end to end tests through Replay saves us countless hours of manually reproducing and debugging CI failures, and lets us seamlessly share failed tests across our engineering teams. Vamsi Peri Director of Engineering, Metabase “Before Replay, some test flakes were simply not debuggable: we didn't have the information require

顔認識技術を利用したアプリケーションは身近なところにあります。たとえば、カメラで映した顔に猫耳やリボンなどのスタンプを自由に追加できる加工アプリ「SNOW」や、ビデオ会議ツール「Zoom」、「Microsoft Teams」で使用できるフィルター機能などがあります。これらの機能は、フェイストラッキング技術を利用しています。 この技術はアプリだけでなく、ウェブブラウザ上でも実現できます。今回は、Googleが開発した機械学習用JavaScriptライブラリ「TensorFlow.js」を使って、ウェブカメラでリアルタイムに顔が認識されるデモを作成してみました。 TensorFlow.jsとは TensorFlow.jsは、Pythonで広く利用されている機械学習ライブラリ「TensorFlow」をJavaScript用にラップしたもので、ブラウザ上で機械学習モデルを手軽に利用できるようにする

はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。 今回の記事で紹介するテストは以下のリポジトリで公開しています。 具体的には以下の点が最高でした。 独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。 シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。 クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効

mattn氏が実践しているエンジニアリング最適なメモ術。アウトプットを継続するための方法論 2024年6月18日 mattn 大学卒業後、ソフトウェアハウスやSIerなどでソフトウェア開発に携わる。vi派生のテキストエディタVimの日本語化やプラグイン、Go言語などでOSS（オープンソースソフトウェア）の開発・コミュニティ運営に参加し、2019年からGoogle Developers Expert。2021〜2023年 GitHub Stars。著書に『みんなのGo言語』（2016年、2019年に改訂2版、技術評論社、共著）、『Go 言語プログラミングエッセンス』（2023年、技術評論社、単著）がある。関西在住。 X:@mattn_jp GitHub 前回はアウトプットとは何か、何のためアウトプットするのか、についてお話しました。筆者はこれまで、アウトプットのやり方で悩んでいる方々に、どう

WebAssembly Type Reflection JS APIと呼ばれるAPIのPolyfillを書いたので、その紹介です。WebAssemblyでスレッドを扱う際に少し便利になります。 WebAssembly Type Reflection JS APIとは WebAssembly Type Reflection JS APIは、WebAssemblyモジュールからimport/exportされる関数のシグネチャやメモリサイズの情報を取得するためのJavaScript APIです。 WebAssemblyモジュール自体にはそのような情報がもともと含まれており、処理系の中でも使っていたのですが、JavaScriptからその情報を取得するためのAPIが無かったため、新たにAPIが提案されました。 const module = await WebAssembly.compile(buff

イントロ さあ、やって参りました。 第1回Zig探訪のお時間です。 今回担当するのは、Zigを使い始めて早くも半年・永遠のニートことsmallkirbyです。 Zig探訪では、Zigの機能や特徴の中で面白いんじゃないかと思うものをピックアップして紹介していきます。 紹介しないこともあります。 第1回のテーマは、Zigの中でも特に重要なコンセプトであるcomptimeについてです。 Zigとは - Everything is Explicit Zigについておさらい 第1回ということで、最初に軽くZigについておさらいしておきましょう。 Zigは、2016年に開発が始まったコンパイル型汎用プログラミング言語です。 Rustが2015年に1.0リリースされた翌年に開発がスタートしたんですね。 最新のリリースはv0.12.0であり、大体1年くらいでマイナーアップデートされるようです。 まだ1.0

This post details CVE-2024-4367, a vulnerability in PDF.js found by Codean Labs. PDF.js is a JavaScript-based PDF viewer maintained by Mozilla. This bug allows an attacker to execute arbitrary JavaScript code as soon as a malicious PDF file is opened. This affects all Firefox users (<126) because PDF.js is used by Firefox to show PDF files, but also seriously impacts many web- and Electron-based a

We recently launched the JavaScript Registry - JSR. It’s a new registry for JavaScript and TypeScript designed to offer a significantly better experience than npm for both package authors and users: It natively supports publishing TypeScript source code, which is used to auto-generate documentation for your package It’s secure-by-default, supporting token-less publishing from GitHub Actions and pa

どういうこと？/TL;DR AWS → Cloudflareに移行したら費用が99%削減できました。 対象読者 今CloudFront + S3で構築しているけど転送量に困っている人 Cloudflare R2を検討している人 (CloudFrontとCloudflareをよく間違える人) はじめに 元々、動画CDNの構築はCloudFront + S3で構築していました。 この構成の場合、課金ポイントは主に三つあります。 CloudFrontのアクセス数に対する課金: そこそこ(多量ではない) S3の保管に対する課金: 200GB程度 CloudFrontの転送量(Egress)に対しての課金: 数TB そのため、毎回イベントごとにかなり費用がかかる状態でした。 動画の数もアクセス数もそこそこではあったのですが、動画特有の転送量が非常に多い… そういった状態でした。 導入前夜 この時はち

Leaner 開発チームの黒曜(@kokuyouwind)です。 RubyKaigi Takeout 2021真っ只中ですね。自分も視聴して実況ツイートを垂れ流しています。 でも今回はフロントエンドの話です。 TL;DR OpenAPI 定義を JSON で記述しておくと、 import schema from 'schema.json' で読み込んで Component などの定義を参照できます。 これを使って msw の Handler を定義すると、簡単に API をモックしてテストできるので便利です。 異常系のハンドラーも同じところで定義しておくと、テスト時のレスポンス差し替えもシンプルになって読みやすくなります。 OpenAPI 定義を msw に使いたい 以前書いたとおり、現在自分が担当しているプロダクトでは OpenAPI を使って API スキーマを定義しています。 このス

www.hageatama.org blog.hatenablog.com 自分の周辺でネットの開通で事故っている人に向けて書いた記事が、2023年のはてなブログで年間3位になっちゃった奴の続編です。引っ越しシーズンでまたアクセスがちょこちょこと伸びてるので今度こそ書き上げるぞ！と思ってたのに、言いたいこと全部書いたら電柱見上げる話で長文になってしまい完結しませんでした……。 前回のような、一般向け想定の妥協はしません。今回は本当の誰得記事なので、拾える枝葉も残しましたし、読みやすさも捨てました。 そもそも私自身、別にネットワークエンジニアどころか、IT業界の人間ですらないので専門的な正しさは保証できません。ぜひフィードバックはほしいし、何ならこの上位互換の記事を書いてください。私が読みたい。 【主張の概要】 光コンセントが元からある物件を選べ フレッツ光回線でプロバイダをいつでも切り替え

PHPerKaigi 2024 • Day 1での登壇資料です。 https://phperkaigi.jp/2024/ https://fortee.jp/phperkaigi-2024/proposal/0d0f8507-0a53-46f6-bca6-23386d78f17f ※ Author…

$MPVE fl BSF�8PSLFST�ͷ৔߹ w ։ൃ؀ڥ͸ςϯϓϨʔτΛ࢖ͬͯηοτΞοϓՄೳ� w ։ൃ؀ڥͱσϓϩΠ؀ڥͷဃ཭͕গͳ͍� w ϥϯλΠϜͷ�XPSLFSE�͸�044 IUUQT���HJUIVC�DPN�DMPVE fl BSF�XPSLFSE� w Πϯϑϥͷػೳ΋�XPSLFSE�Λܦ༝ͯ͠ར༻Ͱ͖Δ

タイトルと ↓ のスクショで出落ちという感じ……。 https://aws.amazon.com を開いたときの様子 CDNだったり、Varnishのようなキャッシュ系のミドルウェアの調査やデバッグをしているときは、ブラウザのDevToolsを使って、Cache-Control レスポンスヘッダだったり X-Cache レスポンスヘッダのようなレスポンスヘッダの様子をめちゃくちゃ睨みつけることになると思う。こういう仕事をしているときには、リロードしては新しいリクエストを選択し直して睨みつける、というような操作を繰り返すことになりがち。 ところが、ネットワークタブのリクエスト一覧表示の表みたいなやつには任意のレスポンスヘッダを表示することができるので、こうすると1クリックの手間が省けて嬉しいねという話。 やり方はこれだけ！ ネットワークタブのリクエスト一覧表のヘッダー部分を右クリックし、コン

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. GistPad 📘 GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork and star gists and repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulli

Deno Advent Calendar 2022の16日目の記事です！ Denoでこんな感じのコードを書いていました。内容的には大量（2000個以上）のSVGファイルをゴリゴリとTSXファイルに変換していくなんてことをやっています。 変換部分の本体はsvgrというライブラリを使っています。内容的にはよくわかっていませんが、babelでパースしてastでどうのみたいな感じのようです。 SVGファイルをバッチ的にTSXに変換していくんですが、最後に deno fmt は手作業でかけなければならずそれが微妙でした。ここはDeno.Commandの出番かな〜とも思ったんですが、前から作者に激推しされていたdaxを使うことにしてみました。 利用方法 というわけでdaxをimportしてきます。

こんにちは、AIShift バックエンドエンジニアの石井(@sugar235711)です。 AIShiftでは去年の11月からAI Worker[1]という新しいサービスの開発が始まりました。（以下AI Worker） 本格的に開発が始まり3ヶ月弱経ったので、その間に試してきた技術やチームの取り組みについてまとめてみたいと思います。 はじめに この記事では、AI Workerのおおまかな概要・設計を説明し、それらのバックエンドを実現する上でどのような技術を試してきたのか、技術以外でのチームの取り組みについてまとめます。 少し分量が多いので、ライブラリについての情報を求めている方は、目次から気になる部分を読んでいただければと思います。 何を作っているのか ざっくりまとめると、Microsoft Teams/Web上で動くAIを活用した業務改善プラットフォームを作成しています。 GPTとRAG