ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)
ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。 私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。 そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。 これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目
Cloudflare、ヘッドレスブラウザ「Browser Rendering API」正式リリース。Puppeteerライブラリも提供開始
Cloudflare、ヘッドレスブラウザ「Browser Rendering API」正式リリース。Puppeteerライブラリも提供開始 Cloudflareは、同社のサーバレス基盤であるCloudflare Workersを通じてヘッドレスブラウザを操作できる「Browser Rendering API」の正式サービス化を発表しました。 これまではBrowser Rendering APIはオープンベータとして提供されていました。 Good morning! We'll keep it short: Browser Rendering API is now available to all paid Workers customers with improved session management. https://t.co/TP2W2KtgOx #DeveloperWeek — C
Chrome for Testing: reliable downloads for browser automation | Blog | Chrome for Developers
Today we’re happy to announce Chrome for Testing, a new Chrome flavor that specifically targets web app testing and automation use cases. This article explains why the Chrome team felt this was needed, and walks through concrete examples where Chrome for Testing might benefit you as a developer. Background Browser testing is a vital component of creating a high-quality web experience, regardless o
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
2023年5月末現在、昨年から続く生成系AIの進化は目覚ましいものがあり、私も技術の進化は楽しみにしています。 しかしながら、良くない使い方をする輩がわんさか湧いて出てくるのも世の常。 自分は音楽ストリーミングサービスはSpotifyを主に使っているのですが、RadioにおけるAI楽曲のプレイリスト汚染がシャレにならないレベルで鬱陶しいので私から見えているものを書いてみます。 自動再生Radioに引っかかってくる変な曲達 Spotifyでは探した楽曲が聴き終わるとそのままアルバムや楽曲のRadioが始まります。似たような曲を勝手に選んで再生してくれるもので、これによる偶然の出会いは結構楽しみに使っていました。 メジャーな楽曲であれば近しい同じぐらい有名な楽曲であったり同系統のジャンルからそれなりな楽曲を再生してくれるのですが、いつからかマイナーだったりアングラな曲を聞いたあとのRadioに
ウェブサイトやモバイルアプリの、エンドユーザーからみた動作を確認するテストはE2Eテスト（End-to-End Test）と呼ばれ、このE2Eテストの自動化ツールは、アジャイル開発の普及もあって、今では多くの開発現場で活用されるようになりました。ブラウザ操作の自動化ツールSelenium（セレニウム）は日本でも有名になり、ご存じの読者も多いでしょう。しかし近年、E2Eテスト自動化の世界では、Seleniumに代わる新たなツールがたくさん登場し、急速に利用者を増やしています。この記事では、これらの新しいE2Eテスト自動化ツールのトレンドについて紹介します。 E2Eテスト自動化トレンドの変遷 筆者はテスト自動化ツールを作る仕事にもう15年近く関わっていますが、これまでのトレンドを見ていくと、「非OSS（非オープンソースソフトウェア）の時代」「Seleniumの時代」「多極化の時代」の3つに分け
【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ Node.jsでヘッドレスブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」が、ブラウザ自動化の次世代標準である「WebDriver BiDi」（「BiDi」は双方向を表すため、読みは「ウェブドライバー バィディ」とのこと）への対応を開始しました。 Puppeteerは、ChromiumベースのWebブラウザに対してChrome DevTools Protocolを用いて通信することで、Webブラウザの操作を自動化するとともに、コンソールに表示される情報やログなどの収集、画面キャプチャなどの取得によって、テストの自動化を効率化してくれる機能を備えています。 このPuppeteerが、現在策定中の次世代標準の「WebDriver BiDi」に対応を開始しま
こんにちは！SmartHRで文書配付機能の開発を担当している、aanzaiです。 2022年末から2023年2月にかけて、文書配付機能で使用しているPDFのレンダリングライブラリの置き換えを行ったため、具体的にどのように移行したかをご紹介します。 文書配付機能の紹介 文書配付機能（旧:雇用契約）は、SmartHRの最初のオプション機能として開発された機能で、事前に作成した書類テンプレートをもとに、SmartHRに保存された従業員情報を差し込んで書類PDFを作成し、従業員に配付したり、契約書として合意を取ったりすることができる機能です。 書類テンプレートのレイアウトは、ユーザーがWYSIWYGエディタで作成したものがHTMLとして保存されています。書類を配付する際は、このレイアウトHTMLに従業員情報を差し込み、PDFに変換します。 PDFレンダリングライブラリ移行の理由 文書配付機能では、
// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
（表内のデータ確認日：2024/03/21） スター数だけで言えば prawn が強いですし、歴史もあります。 しかし、コミットが現在もされているものの、最新バージョンのリリースが2020年12月から3年以上空いてしまったのは気がかりです。 wicked_pdf や pdfkit は1年に1度以上は新バージョンのリリースがおこなわれているので、 この２つのどちらかが良さそうに思いました。 最終的には、README が充実していて使うまでのハードルが低そうな wicked_pdf を選びました。 1-1. WkHtmlToPDF 問題 wicked_pdf や pdfkit には重大な問題があります。 これらの gem は WkHtmlToPDF という HTML を PDF に変換する CLI ツールによって支えられているのですが、 これのメンテナンスが 2022/6/29 のコミットを最
クイックサマリー：2021年のWebパフォーマンスを高速化しましょう。 毎年恒例のフロントエンドパフォーマンスのチェックリスト（PDF、Apple Pages、MS Wordに対応）は、指標やツールからフロントエンドのテクニックに至るまで、現代のWebで高速なユーザ体験を生み出すために知る必要があるすべてを提供します。 このチェックリストは2016年から更新を続けてきました。 メールのニュースレターでも、フロントエンドに関する便利な情報をご確認いただけます。 このガイドは、LogRocketに勤務する筆者の友人の厚意によるサポートを受けています。 LogRocketは、フロントエンドパフォーマンスのモニタリング、セッションリプレイ、製品分析を組み合わせ、顧客体験の向上に貢献するサービスです。 また、DOM完了時間、サーバ初期応答時間（TTFB）、初回入力までの遅延時間（FID）、クライアン
Decker
Decker Decker is a multimedia platform for creating and sharing interactive documents, with sound, images, hypertext, and scripted behavior. You can try it in your web browser right now. Decker builds on the legacy of HyperCard and the visual aesthetic of classic MacOS. It retains the simplicity and ease of learning that HyperCard provided, while adding many subtle and overt quality-of-life improv
tl;dr ChatGPT の画像入力でラフスケッチから簡単なマークアップを生成させることができる 生HTML はプロンプトとして弱い。 typescript(tsx) や headless-ui でコンテキスト情報を足すといい感じになる。 ChatGPT にスクリーンショットを入力し、 ChatGPT に puppeteer に操作させれて E2E 生成を自動化したり無限の猿BOT が作れるのでは。 マークアップエンジニアではなく、プログラマ視点でCSSを生成させたい。ロジックはこちらが考えるから、それに合わせたものを作ってくれ、という感じ。 まだ figma 連携とかは考えておらず、雑なラフを食わせたり、一般的なパターンを生成してもらえれば良いと思って試している。 とか考えてるうちに、うちの ChatGPT に画像入力が来た。まだAPIが来てないが、これが来ることを前提にマークアップ補
Running Serverless Puppeteer with Workers and Durable Objects
Running Serverless Puppeteer with Workers and Durable Objects09/28/2023 Last year, we announced the Browser Rendering API – letting users running Puppeteer, a browser automation library, directly in Workers. Puppeteer is one of the most popular libraries used to interact with a headless browser instance to accomplish tasks like taking screenshots, generating PDFs, crawling web pages, and testing w
テストや検証に便利な開発者用の「Chrome for Testing」がリリースされる、Chromeのバージョンを指定して起動可能
ウェブアプリの開発をする時には実際にブラウザで操作してみて期待通りの動作をするかのテストを行うものですが、ブラウザのバージョンアップなど、開発者の変更以外の部分でテスト結果が変わってしまうのは困りものです。そうしたウェブアプリの開発者向けに、特定のバージョンのGoogle Chromeを利用できるようにした「Chrome for Testing」をGoogleがリリースしました。 Chrome for Testing: reliable downloads for browser automation - Chrome Developers https://developer.chrome.com/blog/chrome-for-testing/ 高品質なウェブアプリを開発したいなら、自動テストであれ手動テストであれ、ブラウザでのテストは不可欠ですが、これまで適切なテスト環境を用意すること
What's New in DevTools (Chrome 117) | Blog | Chrome for Developers
Network panel improvements Override web content locally even faster The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them. To override web content, open the Network panel, right-click a request, and select Override content. If you have local overrides set up but disabled, DevTools en
If you want to build AI products that are unique, valuable, and fast, don't do what everybody else is doing. I'll show you what to do instead. What not to doThe vast majority of AI products being built right now are just wrappers over other models, such as those that essentially involve calling ChatGPT over an API. While that's incredibly easy — you send natural language in and get natural languag
JSer.info #655 - Lighthouse v11.0.0がリリースされました。 Release v11.0.0 · GoogleChrome/lighthouse Node.js 16のサポート終了、デフォルトでは使われてなかったresource-summary/service-worker/first-contentful-paint-3gのAuditを削除などの変更が含まれます。 また、INPのAuditがStableへと移行されています。 Astro 2.10がリリースされました。 Astro 2.10: Persistent State in View Transitions | Astro Astro 2.9で実験的にサポートされたView Transitionsに加える形で、指定した要素を永続的にするtransition:persistディレクティブが追加されてい
はじめに React Developer Roadmap 2024 を眺めつつ筆者の独り言を書く記事です。筆者の React 歴は 3 年ちょっとです。 Visit JavaScript Roadmap React のロードマップは JavaScript の勉強が最初。Promise を基本とした非同期処理やクロージャ周りを理解しておくと、React への理解も更に深まった記憶がある。 非同期周りはこの本に助けられた。 CLI Tools Vite Create React App 新規に CSR の SPA を作る場合 Vite 一択だと思う。理由は、設定簡単 + 早い + 拡張性 ◎ + エコシステムが大きい。Vite は SSR もできるがライブラリ作者向け。 (宣伝) Vite を使用した環境構築方法は先日記事にしました。 なぜ Create React App が使われなくなりつ
こういう画像を作る仕組みを作った。 画像を生成したい人は世間にそこそこいるかもしれないし、自分は比較的？簡単な方法でそれを達成した。せっかくなのでやり方をみんなに教えようと思ってこの記事を書いている。 全てのソースコードは以下にOGImagekunという名前で公開している。 github.com OG:Image OG:Imageについて軽く説明しておく。知っている人は読み飛ばしていい。 Twitterやブログの埋め込み記事などで、このようなちょっと豪華な画像を見たことがあると思う。 最近のサイトでは、ユーザがより自分のコンテンツを見てくれるために、こういったサムネイルを表示するのが当たり前となっている。 これは、ウェブサイトや動画、記事などへのリンクをSNSなどに書き込むと、自動的にそのサムネイル的な画像を表示してくれる、という仕組みがそうしている。これはTwitterではTwitter
Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new features and improvements. This time we focused on polishing the work we shipped by graduating many of the new APIs to stable, addressing common developer requests, and experimentally releasing one of the most desired roadmap projects: zoneless change detection.
Browser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all users
Browser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all users04/05/2024 This post is also available in 简体中文, 繁體中文, 日本語, 한국어, Deutsch, Français and Español. Browser Rendering API is now available to all paid Workers customers with improved session managementIn May 2023, we announced the open beta program for the Browser Rendering API. Browser Render
PDF生成のgemといえば、一時期は wicked_pdf が主流だったと思います。 しかし、昨今では依存ライブラリである wkhtmltopdf の更新が事実上止まったため、以下のような影響が出ていて採用しづらいです。 モダンなブラウザでは意図したとおりにレンダリングできない可能性がある 脆弱性への対応体制に不安がある wicked_pdfのcontributerも、長期的には他のライブラリを採用するように勧めています。 Long term plans given the deprecation of wkhtmltopdf? · Issue #1081 · mileszs/wicked_pdf 代替の選択肢に悩むところですが、そのような中でPDF生成のために grover を採用したことがあったので、特記すべき点について共有しようと思います。 PDF生成のための一助となれば嬉しいです。
Ever wanted more different ways to understand what’s going on in a program? Here I catalogue a huge variety of tracing methods you can use for varying types of problems. Tracing has been such a long-standing interest (and job) of mine that some of these will novel and interesting to anyone who reads this. I’ll guarantee it by including 2 novel tracing tools I’ve made and haven’t shared before (loo
What's New in DevTools (Chrome 118) | Blog | Chrome for Developers
New section for custom properties in Elements > Styles The Elements panel now supports the @property CSS at-rule. It lets you define CSS custom properties explicitly and register them in a stylesheet without running any JavaScript. To inspect your registered custom properties, in Elements > Styles, hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to
Puppeteer in Node.js: Common Mistakes to Avoid | AppSignal Blog
Puppeteer is a powerful Node.js browser automation library for integration testing and web scraping. However, like any complex software, it comes with plenty of potential pitfalls. In this article, I'll discuss a variety of common Puppeteer mistakes I've encountered in personal and consulting projects, as well as when monitoring the Puppeteer tag on Stack Overflow. Once you're aware of these probl
2023 / 2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。 以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2023 8回目のJavaScript ライジングスターにようこそ！ ここでは、2023年のJavaScriptエコシ
フロントエンド技術選定のヒント 【令和五年度版】 - KAKEHASHI Tech Blog
こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書いていきたいと思います。 ただし、本記事では個人的な好みというよりは、npm trendsやGitHub Star Historyなど客観的な指標からどんな技術が世間に受け入れられているかの比較にしていきたいです。 もちろん数値などの比較以外に、ドキュメントを読んだり使ってみたりすることも重要だということは言うまでもないと思います。あくまでも今回の記事が知らないライブラリを知る機会だったり、ヒントになれば幸いです。 もくじ パッケージマネージャ ランタイム フロントエンドフレームワーク レンダリングフレームワーク ビルドツール
ヘッドレスchromeとは？CLIで実行する方法
ヘッドレスブラウザ(Headless Browser)とは？ ヘッドレスブラウザはGUI（グラフィカルユーザーインターフェイス）のないという点が特徴なブラウザーです。他には普通のウェブブラウザーと違いがないです。なので、タブやURLバー、インプットフィルド、ボタン、ブックマーク（お気に入り）などのインターフェース及び機能がありません。ヘッドレスブラウザはGUIがないため、ナビゲーションもできず、操作のため、コマンドラインインターフェースや自動スクリプトで操作する方法しかありません。 ヘッドレスブラウザを使う理由 ナビゲーションも簡単に使えないのになぜヘッドレスブラウザを使うのか、気になる方もいらしゃるでしょう。ヘッドレスブラウザの最大の利点はWebページのコンテンツをプログラム的にアクセスできるということです。 特に開発者やSEOマーケターの方々は以下の理由で利用する時が多いです。 「開発
Webパフォーマンスを自動計測しDatadogで可視化するまで - Money Forward Developers Blog
こんにちはマネーフォワードPay事業本部の藤村海都です。 GitHub、Twitterもどうぞ。 普段はフロントエンド周りの技術記事をZennに投稿しています。Zennはこちら。 2023年4月に新卒エンジニアとしてマネーフォワードに入社し、福岡拠点にてマネーフォワードPay for Businessのフロントエンド開発を担当しています。 今回は最近チームに導入したパフォーマンス監視について紹介します。 フロントエンドにおけるWebパフォーマンスの計測を自動化し、Datadogで可視化するまでの道のりを詳しく説明していこうと思います。 パフォーマンス監視はパフォーマンス改善の第一歩だと思っています。 初のテックブログなので温かい目で見ていただければと思います。よろしくお願いします！ 作ったもの 今回導入した仕組みでは次のような流れでパフォーマンスを可視化しています。 Puppeteerで認
こんにちは、品質向上の木下です。 この記事では、弊社でテスト自動化が根付くまでの、苦難な道のりをお伝えします。今後、テスト自動化を目指される方のための参考となれば幸いです。 品質向上チームが主管するテストとその課題 前提情報 まずは、本題に入る前に、弊社でのテスト工程での確認単位や確認観点について整理します。弊社の定義は、一般的なテストと定義が厳密には違うので、ご留意をお願いします。 テスト工程名 確認単位 確認観点 UT ユニット/コンポーネント単位のテスト ユニット/コンポーネントが意図通りに動作すること 機能単位のテスト 機能が設計通りに動作すること IT 機能間結合のテスト 機能間の設計に齟齬がないこと システム間結合のテスト システム間の設計に齟齬がないこと ST 本番相当データ・環境を使ったシステム間連携のテスト 設計で取り込んでおくべき想定外データ、設定差異等がないこと サイ
一般ユーザーの利用するChromeは、自動更新機能を備えており、最新のWebプラットフォーム機能、ブラウザ機能、バグ修正を含む最新かつ安全なバージョンが提供されている。 一方で開発者にとっては、繰り返しのテスト実行で一貫性のある再現可能な結果が必要であるものの、ブラウザの実行可能ファイルまたはバイナリが2回の実行の間に更新された場合、繰り返しのテスト実行ができなくなる可能性がある。また、特定のブラウザのバージョンを固定し、そのバージョン番号をソースコードリポジトリにチェックインして、古いコミットとブランチをチェックアウトし、その時点のブラウザバイナリに対してテストを再実行したいと考えている。 ほかにも、ユーザーがバージョン番号を気にすることなく、常に最新バージョンにできるだけ早く更新されるよう、Googleが意図的にバージョン付きのChromeを提供していないことから、特定バージョンのCh
いたくらです。 WSL2 で md-to-pdf を実行できるようになるまでをまとめました。 この記事で得られること WSL2（Linux ディストリビューション：Ubuntu）で md-to-pdf を実行するまでに必要な手順 実行環境 エディション：Windows 11 Pro バージョン：22H2 OS ビルド：22621.1702 Linux ディストリビューションについては以下コマンドで環境を確認します。 $ cat /etc/lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=22.04 DISTRIB_CODENAME=jammy DISTRIB_DESCRIPTION="Ubuntu 22.04.2 LTS" 0. 大まかな手順 md-to-pdf は npm でインストールするので、前提として node を入れないといけないのですが
こんにちは！SUZURI事業部デジタルコンテンツチームのyukunです。 最近、SUZURIの一部の機能に使っているNode.jsのアプリケーションが重くなりエラーやタイムアウトが頻発するという事象が起こりました。 そのアプリケーションはpuppeteerを使ってHTMLのスクリーンショットを撮りPNG画像として返すExpressサーバーです。 しかし、開発環境やステージング環境では動作していたので、原因はコードの変更によるものではなく、アクセス数の増加によるものだと推測しました。 まずは、水平スケーリングを行いコンピューティングリソースを増やすことを検討しましたが、アプリケーションの処理自体はそんなに遅くないはずだと思い最適化を試みました。 Node.jsのプロファイリングツールの0xとChatGPTを活用して、数時間で重い処理を特定してレスポンスを２倍速くする改善ができたので紹介します
Deno’s vision is to make programming as simple as possible, which is why the runtime ships with a robust toolchain, native TypeScript support, and web standard APIs, so you can skip configuration and learning a new set of APIs and be productive immediately. Today’s minor release brings us closer to that vision: a fast and convenient way to build web servers, Deno.serve(), is now stable improving n
@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプト 「axe-auto-reporter」 を公開しました。 「axe-auto-reporter」 という （名前に全くひねりがない）、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプトを GitHub で公開しました。 所謂、黒い画面 （CLI） で操作しますがテストしたい URL のリストをテキストファイルで作って、あとはコマンド 1つ実行するだけなので、多分ほとんどの人にとって難しくないと思います。 burnworks/axe-auto-repor
Announcing Vite 5.1
Vite 5.1 is out! February 8, 2024 Vite 5 was released last November, and it represented another big leap for Vite and the ecosystem. A few weeks ago we celebrated 10 million weekly npm downloads and 900 contributors to the Vite repo. Today, we're excited to announce the release of Vite 5.1. Quick links: Docs, Changelog Docs in other languages: 简体中文, 日本語, Español, Português, 한국어, Deutsch Try Vite
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
音楽ストリーミングにはびこる毒：AI生成楽曲
E2Eテスト自動化ツールの最新トレンド──Playwright？ ノーコード？ Seleniumから多極化の時代へ！
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
文書配付機能でPDFレンダリングのライブラリを置き換えた話 - SmartHR Tech Blog
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
Rails で PDF を作ったけど、時代遅れのやり方だったかもしれない
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-前編 | POSTD
ChatGPTの画像入力を使ったマークアップの自動生成とE2E自動化に関する考察
Don’t Build AI Products The Way Everyone Else Is Doing It
2023-08-10のJS: Lighthouse v11.0.0、Astro 2.10(View Transitions)、SharpのWebAssemblyビルド
React Developer Roadmap 2024 を眺める
自前でOG:Image生成メカニズムを構成する方法 - Lambdaカクテル
Angular v18 is now available!
Rails: groverでPDFを生成する方法｜TechRacho by BPS株式会社
All my favorite tracing tools: eBPF, QEMU, Perfetto, new ones I built and more - Tristan Hume
【JavaScript】JavaScript ライジングスター 2023 - Qiita
ウェルスナビにおけるテスト自動化までの苦難の道のり - ウェルスナビ開発者ブログ
Google、Webアプリケーションのテストと自動化用途に特化した「Chrome for Testing」を発表
WSL2 で md-to-pdf を使うために四苦八苦した話 | DevelopersIO
0xとChatGPTを活用したNode.jsアプリケーションの最適化 - Pepabo Tech Portal
Deno 1.35: A fast and convenient way to build web servers
axe-auto-reporter というアクセシビリティ自動テストのためのスクリプトを公開しました