🕹 Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This guide has recipes for automating Web Performance measurement with Puppeteer. An accompanying GitHub repository for this write-up is also available. Get a DevTools performance trace for a page load Puppeteer API: tracing.start() const puppeteer = require('puppeteer'

NEWREELのインタビューで「スリットスキャンというテクニックにしたって、まだまだ全然出尽くしてない」なんて偉そうなことを言っていたので、以前から考えていた手法を半日かけて試しました。スリットスキャンらしさってのは一見あまりないんだけど、れっきとしたスリットスキャン。 どのようにスリットスキャンするとどういう画が出力されるのかをイメージするのって案外難しくて。だからこの手法は「時間をどう前後させるか?」ではなくて「映像の1コマ1コマを積層させて出来上がった金太郎飴を、どのような断面でカットしていくか?」と考えると分かりやすいです。 金太郎飴を垂直にサクサク薄切りしていくと、その断面は普通に映像を再生したように変化します。斜め切りすると、いわゆるスリットスキャン。そう考えると、当てる包丁の形は別に真っ直ぐじゃなくて良いわけです。ギザギザでも何でも。 今回の動画の例でいうと、右から左へ移動す

はじめに 自作のRuby製ゲームボーイエミュレータ(Ruby Boy)を、WebAssemblyを使ってブラウザ上で動くようにしました！ リポジトリはこちら Ruby Boyの紹介記事はこちら この記事 どのようにしてRuby Boyをブラウザ上で動かしているかを説明します。 Rubyプログラムをブラウザ上で動かしたい人も参考になると思います。 システムの概要 Ruby製ファミコンエミュレータのOptcarrotをWasmで動かしているoptcarrot.wasmの実装を参考にしています。 +----------------+ DOM Events +----------------+ | index.html | (Keyboard & ROM) | index.js | | (Browser) |--------------------------->| (Main Thread) |

Hono アドベントカレンダー 2024 初日担当の おりばー です。 本記事では、11 月にリリースした漫画プラットフォーム「comilio」の開発事例をもとに、とにかく Hono が最強だということをつらつらと書いていく記事となります。 個人的 2024 年ベストオブ優勝フレームワークは Hono 一択です。Hono が無ければ、おそらくプロダクトを今もリリースできていなかったと言っても過言ではありません。 ぜひこの記事を参考にして、0 -> 1 を立ち上げる際は Hono を積極的に採用してもらえればと思います。 また、Hono という最高のプロダクトを生み出してくれた @yusukebe さんには全身全霊を持って感謝します。 「comilio」のインフラ構成 まず、今回の実例である漫画プラットフォーム「comilio」の構成を紹介します。 「comilio」では TypeScrip

例えば、Content-Typeメタデータの値を細工したオブジェクトを取得させることでXSSを発生させたり、Content-Dispositionメタデータを細工してRFD (Reflected File Download) を引き起こしたり、 x-amz-storage-classメタデータを操作して意図せぬストレージクラスを使用させEDoS (Economical Deninal of Sustainability)を発生させたり、といった攻撃が成立する可能性があります。 中でもContent-Typeを悪用したXSSは、S3の仕様や使用方法だけでなく、ブラウザの挙動にも注意を払う必要があり、アプリ開発者は攻撃の原理と対処を理解しておく必要があります。 9/21にAzaraさんとSecurity-JAWSのコラボで、この問題にフォーカスしたCTFイベント「とある海豹とSecurity-

この記事は以前 エンジニアと人生 というオンラインコミュニティで執筆し技術書典で頒布した本の中の、私の執筆した章をリライトしたものです。 無料公開の背景 本は有料で販売していたのでこの記事も有料記事にしようかとも思っていましたが、最近個人開発をネタにした特に中身のない記事を有料で買ってしまい後悔している友人を見かけて、そういうのにうんざりしていたので無料で公開することにしました。 個人開発云々いうなら中身のない情報商材じゃなくて自分のサービスで稼げよな！ ということで。でも投げ銭はありがたくいただくのでいいと思ったらバッジしてください！ 【追記】 上記に対して「有料記事がダメって事？」という反応を頂きました。書き方が悪く申し訳ありません。 有料でノウハウなどを販売する事は良いと思います！そしてそれでサービスの運営費を賄えるなら嬉しい事です。 なんならサービスに関する事ならこの記事の"データ

今まで id:mizdra はターミナルで Git ブランチを切り替えるときに、zsh + peco を使った Git ブランチ検索用のキーバインドを使用していた。 # .zshrc function select-git-branch() { selected_branch=$(git branch | cut -c 3- | peco) BUFFER="${LBUFFER}${selected_branch}${RBUFFER}" CURSOR=$#LBUFFER+$#selected_branch zle redisplay } zle -N select-git-branch bindkey '^b' select-git-branch zsh + peco で Git ブランチを切り替える様子 便利っちゃ便利なのだけど...沢山のブランチの中から「あの時作業していたあのブランチ」

相手に話が通じず物事を前に進めにくいと感じることがある。特に、階層化された組織の違うレイヤーの相手や他部署の相手の場合にありがちかもしれない。 そういう時はついついヒートアップしてしまい相手のせいにしてハレーションを生むような話し方をしてしまいがち。"相手が理解してくれないのは相手の頭が悪くて理解できないから"みたいな態度は相手に伝わり、関係がこじれてより一層物事を前に進めにくくなってしまう。 こういう時に感情的になってうまく対処できないのは解決のための引き出しが少ないのが原因なので、思いつく対処法を雑に書きとめておく。 いったん自責思考に切り替える あまりに話が通じないと感じると自分の方が賢くて相手が悪いみたいなスタンスになりがちなのでまずはリセットする 相手に勝とうとするのではなく、目的を思い出して相手も自分も勝つにはどうすればよいかを考えるよう切り替える ほぼ相手に非があることももち

2024/10/5 YAPC::Hakodate 2024

導入 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

Update: Rust Tooling for Workers has improved significantly since this post. Go here to check out Wrangler, our new Rust+Workers cli The Workers team just announced support for WebAssembly (WASM) within Workers. If you saw my post on Internet Native Apps, you'll know that I believe WebAssembly will play a big part in the apps of the future. It's exciting times for Rust developers. Cloudflare's Ser

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