【JavaScript】スクロールが終わった時に発生する「新しいイベントScrollend」とは？ - Qiita
はじめに みなさんは、JavaScriptでスクロールが終わった時に何か処理を行いたいと思ったことはありますか？ 「スクロールが終わった時にアニメーションしたい」や「スクロールが終わった時に動画や音楽を再生させたい」など、 そんな頻繁に思いはしないと思いますが、たまにはあると思います。 この記事では、そんな時に使えるスイベントscrollendを紹介します。 スクロールが終わった時に発生する Scrollend Scrollendは、実験的な機能です。 Chrome Canary, chrome 112以降, Firefox 109以降のブラウザで対応しています。 ※投稿日2023/2/10時点
Faster apps with JSON.parse (Chrome Dev Summit 2019)
Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript. This knowledge can be applied to improve start-up performance for web apps that ship large JSON-like configuration object literals (such as inline Redux stores). Presented by: Mathias Bynens - https://goo.gle/2Oh2tq6 More info → https://goo.gle/33czWGH #ChromeDevSummit All S
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に GoogleはWebブラウザのChrome 78ベータ版で「Native File System API」を試験的機能（Origin Trial）として搭載したことを明らかにしました。 Native File System APIはWeb Platform Incubator Community Groupが策定中のAPIで、Webアプリケーションからローカルファイルを開き、読み書きを行える機能です。 「The Native File System API: Simplifying access to local files」から引用します。 The Native File System API enables developers to build powe
TechCrunch | Startup and Technology News
The U.K.’s Competition and Markets Authority (CMA) has provisionally concluded that Adobe’s proposed $20 billion bid for digital design rival Figma could result in a “substantial lesseni Fidelity has further slashed the estimated worth of its holding in social platform Reddit and chat app Discord as well as SaaS startup Gupshup, giving a preview into how the asset manager sees the imp
GitHub - puppeteer/puppeteer: Node.js API for Chrome
import puppeteer from 'puppeteer'; (async () => { // Launch the browser and open a new blank page const browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate the page to a URL await page.goto('https://developer.chrome.com/'); // Set screen size await page.setViewport({width: 1080, height: 1024}); // Type into search box await page.type('.devsite-search-field', 'auto
デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能（Chrome Headlessにより）。 複数の
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！ | iSchool合同会社
このサイトでは、SEO・Googleビジネスプロフィール・ローカル検索など、Web集客に関する最新情報を配信しています。 拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバイルサイトでページ全体のキャプチャが必要なこともありますよね。 そんな時には、Chromeに標準で搭載されている機能を使えば、拡張機能を使わずに、ページ全体のスクリーンショットを撮ることが可能です。 PCサイトでページ全体のスクリーンショットを撮る方法PCサイトでページ全体のスクリーンショットを撮る方法についてです。 次の手順で行ってください。 デベロッパーツールを立ち上げる詳細機能を呼び出す「capture」もしくは「full」と入力し、「Captur
node.jsとGoogle Chromeによるローカルアプリケーション開発·node-chrome MOONGIFT
node-chromeはnode.jsをバックエンドに、フロントエンドをChromeを使ってローカルアプリケーションを開発します。 node.jsを使っていると何でもJavaScriptで完結したい気分になってきます。そこでターゲットになるのがローカルアプリケーションです。Gtkなどを使うことなく、何とChromeを使ってしまうソフトウェアがnode-chromeです。 デモアプリを立ち上げたところ。 デモのコードです。 node-chromeではGoogle Chromeのパスを指定し、普段使っているプロセスとは別でWebブラウザを立ち上げます。後はnode.jsのサーバとして動くのみです。ローカルでWebアプリケーションを立ち上げて利用するという新しいスタイルが実現しそうです。 node-chromeはnode.js製のソフトウェア（ソースコードは公開されていますがライセンスは明記され
Chromeの小技＆裏ワザまとめ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
グーグル、NoSQL軽量ライブラリ「LevelDB」を公開。ChromeブラウザのIndexedDBとして採用
LevelDBはSQLをサポートせず、クライアント／サーバ型でもなく、シングルプロセスからアクセスされることを想定したいわゆるNoSQLの高速なキーバリュー型データストアを実現するためのライトウェイトなライブラリだと説明されています。 ChromeブラウザでHTML5の仕様として策定中のIndexedDBを実装するものとして開発されたようです（ドキュメントに明記されていないのですが）。 LevelDBを開発した理由 LevelDBのWebサイトによると、LevelDBは以下の主な機能を備えています。 基本的な操作は、Put(key,value), Get(key), Delete(key) 1つのトランザクションとして複数の変更操作が可能 データは自動的に圧縮し保存される Hacker Newsの記事によると、当初はLevelDBを開発する代わりに平林幹雄氏が開発したTokyo Cabin
TechCrunch | Startup and Technology News
On Friday, Pal Kovacs was listening to the long-awaited new album from rock and metal giants Bring Me The Horizon when he noticed a strange sound at the end of…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ
ユーザーエージェント（UA）文字列は時代遅れ？ ～「Google Chrome」で凍結・非推奨に／早ければ「Google Chrome 81」から警告【やじうまの杜】
「Google Chrome 78」で削除された［他のタブをすべて閉じる］コマンド、復活へ／早期プレビュー版「Google Chrome Canary 80」に再追加【やじうまの杜】
[Å] Feedly利用者必見！見ているサイトをその場で即Feedlyに登録するPC版Chromeブックマークレット！![[Å] Feedly利用者必見！見ているサイトをその場で即Feedlyに登録するPC版Chromeブックマークレット！](https://cdn-ak-scissors.b.st-hatena.com/image/square/e67f596b7ff4ea08b4c184e1d206cde058d7595f/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Ffeedly-chorme-eye.jpg)
Chromeの使っていないタブ読み込みを停止してメモリを解放する拡張機能「TabMemFree」 | フリーソフトラボ.com
Chromeウェブストアの日本語版がオープン！ 合わせて日本語アプリ12本が公開！ | ライフハッカー・ジャパン
