Dynamic import() · V8
Dynamic import() introduces a new function-like form of import that unlocks new capabilities compared to static import. This article compares the two and gives an overview of what’s new. Static import (recap) #Chrome 61 shipped with support for the ES2015 import statement within modules. Consider the following module, located at ./utils.mjs: // Default export export default () => { console.log('Hi
Let’s Understand Chrome V8: How Does V8 Implement a JavaScript Object?
Welcome to other chapters of Let’s Understand Chrome V8 We know that the JavaScript object is a set of properties and elements. For performance and memory reasons, V8 designed several different representations of properties such as in-object, slow property, and self-dict. In this chapter, let’s examine the JavaScript object in a little more depth. 1. JavaScript object layoutThe following Figure 1
Google 公式ウェブ開発者向けリソースのご紹介
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
ブラウザバックで画面遷移してきたことを判定し、処理を動かす - Qiita
はじめに ページの離脱直前に確認ダイアログを出すなど、そのページから遷移しようとすることをトリガーに処理を書く際はbeforeunloadイベントを使用するメジャーなやり方がありますが、ページの読み込み時( jQueryの$(document).readyが動くタイミング )にブラウザバックでこの画面に遷移してきたどうかを判定して処理したいケースがあり、無事実現できたのでご紹介します。（とてもレアケースだとは思いますが…） どんなケースで必要だったか気になる方に向けて使用した際の用途にも触れておきます。Bootstrapのtagsinputというプラグインを導入してフォーム画面のinputへの入力がタグ化されるようにしていたため、ブラウザバック時のフォーム復元には別途処理を実装する必要がありました。 復元するための入力値はsessionStorageに保存していたので、同一タブでブックマー
マイクロソフト、新しいEdgeでDevToolsの日本語化実現。Chromiumのソースコードにもコントリビュート
マイクロソフト、新しいEdgeでDevToolsの日本語化実現。Chromiumのソースコードにもコントリビュート Chromeには「DevTools」と呼ばれる開発者向けのツールが組み込まれており、表示しているWebページのHTML/CSSの詳細の把握やJavaScriptのデバッグなど、さまざまな機能が利用ができます。 DevToolsはWebサイトやWebアプリケーションの開発にはなくてはならないツールですが、その表示内容はすべて英語で行われており、ややとっつきにくいところがあります。 そのDevToolsの日本語化が実現します。 マイクロソフトは、Chromiumをベースにした新しいEdgeブラウザで、DevToolsの日本語化を実現したと発表しました。 日本語のほかにも中国語（简体、繁體）、フランス語、ドイツ語、イタリア語、ポルトガル語、韓国語、ロシア語、スペイン語などにも対応し
Verify phone numbers on the web with the WebOTP API | Identity | Chrome for Developers
What is the WebOTP API? These days, most people in the world own a mobile device and developers are commonly using phone numbers as an identifier for users of their services. There are a variety of ways to verify phone numbers, but a randomly generated one-time password (OTP) sent by SMS is one of the most common. Sending this code back to the developer's server demonstrates control of the phone n
Chrome(Canary) の Native File System API で ローカルファイルの読み書きをする - mizchi's blog
ブラウザ上でローカルファイルの読み書きができる Native File System API が ChromeCanary で実装された。 前々から欲しかった機能なので、自分が作ってる markdown preview ツールに実装してみた。 Intent to ship https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/noan0cgEBGQ/t8DuK8_hDwAJ 仕様 http://wicg.github.io/native-file-system/ 動かすとこんな感じ https://mdbuf.netlify.com/ で Meta+O/Meta+S のキーバインドを振ってる。 有効化 https://www.google.com/intl/ja/chrome/canary/ をダウンロード chrom
社内勉強会 TechLunch で Badging API について発表しました | MEDLEY Developer Portal
2019-08-27社内勉強会 TechLunch で Badging API について発表しましたみなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とはBadging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるよ
Chrome との非互換性 - Mozilla | MDN
ブラウザー拡張機能 始めましょう 拡張機能とは何か？ 初めての拡張機能 2 つめの拡張機能 拡張機能の中身 拡張機能の例 次にどうするのか？ 概念 JavaScript API 群 コンテンツスクリプト Background scripts マッチパターン ファイルの操作 国際化 Content Security Policy ネイティブメッセージング Differences between API implementations Chrome との非互換性 ユーザーインターフェイス ユーザーインターフェイス ツールバーボタン アドレスバーボタン サイドバー コンテキストメニュー項目 オプションページ 拡張機能ページ 通知 Address bar suggestions 開発者ツールパネル 逆引きリファレンス HTTP リクエストへの介入 ウェブページを変更する Insert extern
Chromeのストレージ永続化仕様を詳しく追ってみた - Qiita
1. はじめに ChromeやFirefoxで使えるストレージ永続化機能はご存知でしょうか。 https://developers.google.com/web/updates/2016/06/persistent-storage に Persistent Storage という題で詳しく触れられていますが、通常 LRU で消去されてしまう IndexedDB や CacheStorage の内容を永続化してくれる機能だと理解しています。 CacheStorage と Persistent Storage の組み合わせは強力で、理論上大容量のアセットを永続化できるようになることから、PWAでのオフライン戦略や通信量削減戦略に対して強力な武器になると考えています。 しかし残念ながら、例によって Safari はサポートしていません。そのため、WebKit の利用を強制される iOS では、例
The cost of JavaScript in 2019 · V8
Show navigation Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. “The cost of JavaScript” as presented by Addy Osmani at #PerfMatters Conference 2019.One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant cost
JSで3分でできる「 顔認識 」Shape Detection API（ネット接続も不要） - Qiita
1.2 開いたら以下画面が表示されます。 「Experimental Web Platform features」をEnabledに変更します。 「RELAUNCH NOW」ボタンでChrome再起動すると「Shape Detection API」が使用できるようになります。 2. Chromeブラウザで以下ファイルを開きます。 注意）http通信で表示してください。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Face Detection API sample</title> </head> <body> <img src="***顔写真のある画像を指定***" id="image"> <canvas id="canvas"></canvas> <script> const image = d
Shape Detection API + PWAでブラウザからそのまま使えるバーコードリーダーアプリを作ってみる - Qiita
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
Headless Chrome でファイルダウンロード先のパスを設定する方法 - Qiita
背景 Selenium を使って Headless Chrome で E2E テストを行う場合に、ファイルをダウンロードできるかどうか、ダウンロードしたファイルが正しいかどうかをテストしたい場合があります。このとき、Chrome に適切なオプションを渡すことでダウンロード先を指定します。 このとき、素の Chrome と Headless Chrome では指定の仕方が異なるので、その方法をまとめます。 解決策 Headless Chrome の場合、selenium に対して send_comand によってパラメータを登録する必要があります。 downloadPath に対して、ダウンロード先のパスを設定します。 const fetch = require('node-fetch'); browser.getSession().then((session) => { const ses
Chrome Developer Tools 入門 | 電子書籍とプリントオンデマンド（POD） | NextPublishing（ネクストパブリッシング）
目次 第1章 はじめに デベロッパーツール(Chrome Developer Tools)とは Google Chrome Canaryとは 他 第2章 inspect（要素の検証） 要素の検証方法 第3章 Device Mode（デバイスモード） デバイスモードの切り替え方法 メディアクエリを表示する 他 第4章 Elementsパネル HTML要素を編集する スタイル（CSS）を編集する 数値のCSSプロパティー値を、キーボードショートカットを駆使して編集する 他 第5章 Consoleパネル コンソールを表示する コンソール履歴のクリア 入力履歴をサジェスト表示する 他 第7章 Networkパネル キャッシュを無効にする オフライン／モバイル環境でWebサイトを読み込む ユーザーエージェントを他のブラウザーに変更する 他 第8章 Performanceパネル パフォーマンス記録前に
WebXR Device APIを試す
WebXR Device APIについて VR(仮想現実), AR(拡張現実), MR(複合現実)等の流行りの〇〇現実系がJavaScriptのAPIとして仕様の策定が進んでいます。 これまでにもVRヘッドセットのセンサー情報等にアクセスできるWebVR APIの策定と実装がされ、そこそこ実用的なAPIとなっていましたが、 ARやMR等の〇〇現実系を視野にいれたWebXR Device APIとしてインターフェースが統合されていくようです。 immersive-web/webxr WebXR Device APIは、 Google Daydream、Oculus Rift、Samsung Gear VR、HTC Vive、及びWindows Mixed Realityヘッドセット等の、バーチャルリアリティ（VR）拡張現実感（AR）のハードウェアに関連する、入力・出力機器へアクセスする機能を
Chrome Dev Summit 2018が開催！Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報 | コリス
先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。 ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。 Highlights from Chrome Dev Summit 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーション遷移（Navigation transitions） Squoosh -15kbのJavaScriptアプリ PageSpeedとLighthouse APIによる統一されたパフォーマンス分析 ChromeでもLazyloadをネイティブにサポート ナビゲーション遷移（
Chrome Dev Summitに参加しました！ - from scratch
Chrome Dev Summit に初参加しました！色々トピックとして気になったものを紹介してます。後直接 Addy Osmani とか Paul Irish とかに聞く機会があったので、色々ついでに聞いてきました。 Chrome DevRel teams create a Chrome cake #ChromeDevSummit [pic.twitter.com/5u6VPZ0oHb](http://pic.twitter.com/5u6VPZ0oHb)— Yosuke FURUKAWA (@yosuke_furukawa) November 12, 2018 Chrome も 10 周年なんですよねー。感慨深い。 1日目は「現在のChromeでできること、やってること」という感じで、ケーススタディやツールチェインの話が多めでした。 2日目は「未来のChromeでできること、今後やるべ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What's in the future of the web?
Chrome » 「他のデバイスからのタブ」に表示されているタブをJSONで取得する - Qiita