実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なSUM計算から複雑なクエリまで、シート上でのあらゆる計算を始め、ピボットテーブルの作成、条件付きフォーマットなどさまざまな処理が高速になるとのことです。 この性能向上は、JavaScriptで構築されていた計算エンジンをWebAssemblyに最適化したことで実現していると説明されており、そのためにWebAssemby GC（ガベージコレクション）機能を用いたとのことです。 そのため現時点ではChromeとMicrosoft
DevTools上でesbuildするChrome拡張を書いた - 詩と創作・思索のひろば
社内ではドキュメントの共有に Scrapbox が活発に使われており、するといきおい UserCSS や UserScript もさかんである。具体的には、/customize という共有のプロジェクトがあってみんなの自慢の装飾やカスタマイズが共有されている。これを個々人で import して使うんである。 こんな感じ。 自分の場合は /motemen/UserCSS/common に常に適用したいスタイルを書いておいて各プロジェクトから読み込んでいる。このページからさらに、共有プロジェクトや他人の個人プロジェクトページからよさそうな設定を import している次第。 つまりは多段インポート。こういうことを続けていると、だんだんと読み込みの遅さが気になってくる。こういうのはバンドルすればいいのだけど、巷のツールを普通に使うことはできない。インポートしてるリソースに認証がかかっているからだ
JavaScriptのnew URL()には気をつけろ
概要 new URL("") で独自のスキーマを扱う際には要注意 Chrome, Firefox, Edgeあたりは他と異なる挙動を示すぞ！ 実装の違う何かでPlaygroundするような愚を犯すべからず 背景 URLPatternなんてイカしたものを見つけてしまった。 URLのマッチングと、パス引数の解析をやってくれるらしい。 おいおいその辺のFWがあっちこっちで再開発していたアレが、Web APIの標準実装に載るのか！？ どこでも簡易ルーター作れて捗るんじゃないのォ！？とDenoでいじってみた。 某Vimプラグイン用に独自のスキーマを定義し、その処理をパスに従ってさばくルーターを書いてみようと思ったのだ。 ここでは皆さんの馴染みのある（？）スキーマとして、 git:// を使ったとして読んでもらおう。 過ち 何をどうひっくり返したらそういうことが思いつくのか自分でも良くわからん。 初手
Console Utilities API reference | Chrome DevTools | Chrome for Developers
The Console Utilities API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, querying objects, displaying data in readable format, stopping and starting the profiler, monitoring DOM events and function calls, and more. Looking for console.log(), console.error(), and the rest of the console.* functions? See Console API Reference. $_ $_
Web の仕様を眺めるシリーズ CSS Anchored Positioning｜Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。最近書いた JavaScript は Google Apps Script です。UI 書きたいけどマネージャーという名の雑用忙しいウオオ。 最上層に浮かせて表示したい UI の配置を制御する仕様 なんとなく Chrome Platform Status から Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルな仕様を眺めてみるシリーズです。本当にシリーズにするかは謎です。 今回は CSS Anchored Positioning を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 Microsoft Edge チームからの提案 MicrosoftEdge/MSEdgeExplainers にあることから Microsoft 社の Edge ない
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
なぜMozillaはXULアドオンを廃止したのか？（翻訳） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? （原著：David Teller, 2020年8月20日、CC BY-NC 4.0で公開されている内容の全訳。自サイトとのクロスポストです。） 要約：Firefoxはかつて、XULとXPCOMに基づく偉大な拡張機能の仕組みを持っていました。この仕組みは長い間私達によく尽くしてくれました。しかし、Firefox開発者と拡張機能開発者の両方にとって、メンテナンスコストは増大し続けるばかりでした。ある面では、増大していくコストは、Firefoxをセキュアにしたり、高速化したり、新しい事を試したりするための努力を、少しずつ破壊していきました。ま
JavaScriptのIntl.Segmenterで文章の意味分割を行う
コンピュータ上で文字列を扱う時、データ上は単にコードユニットの羅列でしかなく、そこに単語や文としての意味合いはありません。 しかし我々は人間であり、単なる文字列ではなく文章として処理したい場合があります。そんなとき、 Intl.Segmenter が役に立つかもしれません。 文章の分割と仕様の標準化 プログラムを書く上で、文字列の処理、というより「文章の処理」をしたくなることがしばしばあります。文章というのは単語や文で構成された、単なる文字コードの連続ではなく、人間的に意味を持つ単位が連続したものとなります。 今まで文字列の意味的な分割は Intl.v8BreakIterator を用いて行っていました。これはChromeやNode.jsで使用されているV8エンジンの独自の仕様であり、一般的な物ではありません。なおかつNode.jsでは意図的に無効化されています。 Intl.v8Break
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
Chromeに入るRecorder機能の利用と注意点 - 虎の穴ラボ技術ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
PPLサマースクール2021 「JavaScript処理系とChromeブラウザの実装技術」 - 日本ソフトウェア科学会 プログラミング論研究会 (JSSST-SIGPPL) (Special Interest Group on Programming and Programming Languages)
ニュース † Web ページを公開しました (6/29) 無事終了しました。講演資料へのリンクを追記しました (9/1) ↑ 概要 † JavaScript は世界でもっとも利用されている重要なプログラミング言語の一つであり、ウェブブラウザで利用可能なほぼ唯一のプログラミング言語という特徴から、ウェブアプリケーション開発で広く利用されています。 この重要性から、JavaScript処理系の性能改善に関する研究開発が活発に行われてきました。JavaScriptの性能改善は、動的な言語ながらの困難さも知られています。今年のサマースクールでは、鵜川さん（東京大学）にJavaScriptの実装技術について、その困難さをどう克服するか、基本的なところからご紹介いただきます。 JavaScriptを動作させるソフトウェアとして、Google が開発を主導するV8処理系、およびそれを利用するGoogle
Chrome 92以降のSharedArrayBuffer警告に対するZOZOTOWNが実施した調査と解決策 - ZOZO TECH BLOG
こんにちは、ZOZOTOWN部フロントエンドチームの高橋（@anaheim0894）です。 Chrome 92から「SharedArrayBuffer」の仕様が変更されます。それに伴い、ZOZOTOWNの対応方針と解決策をご紹介いたします。そもそも「SharedArrayBuffer」が何のことなのか分からず困っている方も多いかと思います。本記事で紹介するZOZOTOWNの取り組みが対応時に皆様の参考になれば幸いです。 取り組みのきっかけ 2021年3月、Google Search Consoleに以下メッセージが送られてきました。 Googleの公式アナウンスによると、「Chrome 92からはcross-origin isolation（クロスオリジン分離）が構成されていないと正常に動作しなくなる」と書かれていました。 つまりSharedArrayBufferを引き続き使うには、他サイ
ChromeでWebRTCステレオ配信 | さくらのナレッジ
こんにちは、テリーです。GoToEat使ってますか? 昼も夜もオトクに外食できるのはとてもありがたいですね。飲食店の方々は今年はずっと大変だったと思いますが、今回のキャンペーンを機に、キャッシュレス決済やオンライン予約など、DXを進めて成果を上げていただけるのを期待しています。 さて、今回はテレカンでステレオマイクを使うケースを取り上げたいと思います。テレワークの時代には1人1部屋で独立しているので、ノートパソコンのマイクやヘッドセットのマイクを使って音声収録している人がほとんどだと思いますが、会社に出社している方は、小会議室に2〜3人集まって、テレカンするケースもあるでしょう。もしくはテレカン中に高品質ビデオを共有配信し、臨場感のある音を確認するというケースもあるでしょう。 いまどきマイクはステレオになってるでしょ?と思っている人も多いと思いますが、ステレオになっているのはスピーカーだけ
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。 - clock-up-blog
疑惑どころか 99.99% くらい黒な話。 （後記：セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい） 追記：続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様（？）の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様（？）。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
Slackのチャンネルをprefixでまとめてくれる拡張を作りました！
チャンネルが増えすぎて目が辛いので、いい感じにまとめてくれる拡張を作りました！ これが こうなります インストールはこちら Chrome: Slack Channels Grouping - Chrome ウェブストア Firefox: Slack Channels Grouping – 🦊 Firefox (ja) 向け拡張機能を入手 Opera: Slack Channels Grouping extension - Opera add-ons Edge: Slack Channels Grouping – Microsoft Edge Addons 特徴 ハイフンやアンダースコアで区切られたものをまとめます。 chat-犬 chat_猫 DOMの更新を監視しているので、チャンネル作成や名前変更などにも対応しています。 タブが非アクティブな場合はDOMの監視は止めています。 経緯 チ
Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発
Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発 WebブラウザにはJavaScriptを実行するためのJavaScriptエンジンが搭載されています。それはChromeであれば「V8」、Firefoxであれば「SpiderMonkey」と呼ばれ、それぞれのWebブラウザベンダがECMAScriptの標準に準拠したうえで独自に実装しています。 そしてJavaScriptは以前から正規表現の機能を備えているため、正規表現を解釈し展開するための正規表現エンジンもそれぞれのWebブラウザベンダが実装を行っていました。 その正規表現エンジンについてMozillaは今後、V8の正規表現エンジンのコードをそのままFirefoxのSpiderMonkeyに取り込むようにすると表明しました。 Mozillaはこれを実現するため、V8用の正規表
Chromium版Microsoft Edge、明日1月15日に予定通り正式公開の見通し
マイクロソフトが開発中の新しいWebブラウザ、いわゆるChromium版Microsoft Edgeが、明日1月15日に予定通り正式版となり、公開される見通しです（おそらく日本時間で15日深夜頃からではないかと予想されます） 同社は2019年11月に行われたイベント「Microsoft Ignite 2019」で、1月15日がChromium版Microsoft Edgeの正式リリース日になると発表していました。 The new Microsoft Edge is coming January 15 -- with improved performance, security, and privacy. Download the Beta to check it out today! https://t.co/juVlca7jk3 pic.twitter.com/WQIz0KIb44 —
オープンソースのJavaScript／WebAssemblyエンジン「V8 release v8.0」が公開
オープンソースのJavaScript／WebAssemblyエンジン「V8 release v8.0」が公開：ポインタ圧縮の効果が大きい オープンソースのJavaScript／WebAssemblyエンジンの最新版「V8 release v8.0」が公開された。数週間後に正式リリース予定のWebブラウザ「Chrome 80」に搭載される。メモリ消費量が減ったために高速動作する他、プログラマーがバグを作り込みにくい仕組みを取り入れた。 オープンソースのJavaScript／WebAssemblyエンジン「V8」の開発チームは、2019年12月18日（米国時間）、最新版「V8 release v8.0」の公開を発表した。数週間後に正式リリース予定のWebブラウザ「Chrome 80」の安定版にも搭載される予定だ。 V8はC++で記述されており、ChromeやNode.jsなどに採用されている。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
