Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

pinch-zoom-element

Paul Kinlan

Jakeとチームは、ブラウザ独自のピンチズームのダイナミクス以外のHTMLのセットでピンチズームを管理するための、このかなり素晴らしいカスタム要素を作成しました(モバイルビューポートズームを考えてください)。この要素は、Chrome Dev Summitで作成およびリリースしたsquooshアプリに必要な中心的コンポーネントの1つでした(…「Chrome Dev Summitでリリース」と言いますsquooshは、中国のGoogle Developer Dayですべてのユーザーに公開しました。チームの他のメンバーが通商禁止になっていたとしても;)…) install: npm install --save-dev pinch-zoom-element <pinch-zoom> <h1>Hello!</h1> </pinch-zoom> Read full post 。 私はちょうどそれを私のブログに加えました(ほんの数分かかりました)、あなたは私が撮った写真を共有する私の「 life 」セクションでそれをチェックすることができます。タッチ対応デバイスを使用している場合は、複数の指の入力を処理できるトラックパッドを使用している場合は、要素をすばやくピンチズームできます。 この要素は、ユーザーインターフェイスコンポーネントを作成するためのモデルとしてWebコンポーネントが大好きな理由の良い例です。 pinch-zoom要素は、ワイヤ上で3kb未満(非圧縮)であり、構築のための最小限の依存関係であり、使いにくいカスタムアプリケーションレベルロジックを束縛することなく、1つの仕事を非常にうまく行っています。 vs Squooshアプリから学んだことに基づいて共有するアプリロジックコンポーネント。 たとえば、この要素が多くのコマースサイトで見られる画像ズーム機能を置き換えたり標準化したりして、開発者からその苦痛を永遠に取り去ることができると私は想像できます。

Read More

Registering as a Share Target with the Web Share Target API

Paul Kinlan

Pete LePageがオリジントライアルでWeb Share Target APIとChromeの可用性を紹介します Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button. Read full post 。 このAPIはウェブ上のゲームチェンジャーです、それはネイティブのアプリで利用可能であったことがあるものへのウェブを開く:ネイティブの共有。アプリはサイロであり、それらはすべてのデータを吸い込み、プラットフォームを越えてアクセスするのを難しくします。共有ターゲットは、Webが同じゲームで遊ぶことができるように競技場を平準化し始めます。 Twitter Mobileの経験には、Share Target already enabledます。この投稿は私のサイトの管理者パネルのmanifest.json定義した共有ターゲットを使って作成されました - それは非常にうまく機能し、ファイルサポートがあればmanifest.jsonに自分のデバイス上のイメージやブロブをブログに投稿できるようになります。 とてもエキサイティングな時代です。 リンクされた記事を読んで、このAPIがいつ公開されるべきか、およびAPIの使用方法のスケジュールについて詳しく学んでください。

Read More

Why Build Progressive Web Apps: Push, but Don't be Pushy! Video Write-Up

Paul Kinlan

Thomas SteinerによるWeb上の優れたプッシュ通知に関する素晴らしい記事とビデオ、およびサンプルです。 A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications. So where does this leave us? Read full post 。

Read More

Maybe Our Documentation "Best Practices" Aren''t Really Best Practices

Paul Kinlan

私たちのチームの素晴らしい技術ライターであるKayce Basquesは、既存のドキュメンテーションのベストプラクティスが技術的な資料を説明するためにどれほどうまく機能しているかを測定した彼の経験についてかなり驚くべき記事を書きました。この意味でのベストプラクティスは、テクニカルライティングの業界標準としてよく知られている場合もあれば、スタイルガイドを書いているあなた自身の会社の場合もあります。見てみな! Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild. I’m now on a mission to get a “was this page helpful?” feedback widget on every documentation page on the web. It’s not the end-all be-all solution, but it’s a start towards a more rigorous understanding of what actually makes our docs more helpful. Read full post 。

Read More

Performance and Resilience: Stress-Testing Third Parties by CSS Wizardry

Paul Kinlan

私は数週間前にGoogle Developer Dayで中国にいましたが、皆さんに私のQRCode scannerを公開していました。オフラインになるまではうまくいっていました。ユーザーがオフライン(または部分的に接続されている)の場合、カメラは起動せず、QRコードをスナップできませんでした。私は何が起こっているのか分かりませんでした。私は誤って onloadイベントでカメラを起動していました.Googleアナリティクスのリクエストはハングアップし、適時に解決されませんでした。それはそれを修正したこのコミットでした。 Because these types of assets block rendering, the browser will not paint anything to the screen until they have been downloaded (and executed/parsed). If the service that provides the file is offline, then that’s a lot of time that the browser has to spend trying to access the file, and during that period the user is left potentially looking at a blank screen. After a certain period has elapsed, the browser will eventually timeout and display the page without the asset(s) in question.

Read More

Chrome Bug 897727 - MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android

Paul Kinlan

週末にはBoomerangエフェクトビデオエンコーダを使って遊んでいましたが、ほぼリアルタイムで動作させることができます(後で説明します)。私はそれをデスクトップ上のChromeで動作させましたが、AndroidのChromeでは正常に動作しません。 コードはここにあるを参照してください。 captureStream()を ` (私の場合は1280x720)、MediaRecorder APIはビデオをエンコードすることができず、エラーもなく、事前にビデオをエンコードできないことを検出できません。 (1) Capture a large res video (from getUM 1280x720) to a buffer for later processing. (2) Create a MediaRecorder with a stream from a canvas element (via captureStream) sized to 1280x720 (3) For each frame captured putImageData on the canvas (4) For each frame call canvasTrack.requestFrame() at 60fps context.putImageData(frame, 0, 0); canvasStreamTrack.requestFrame(); Demo: https://boomerang-video-chrome-on-android-bug.glitch.me/ Code: https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:21:42 What is the expected result? For the exact demo, I buffer the frames and then reverse them so you would see the video play forwards and backwards (it works on desktop).

Read More

Why Microsoft and Google love progressive web apps | Computerworld

Paul Kinlan

マイク・エルガンのPWAに関する素晴らしい記事。マイクロソフトの目標はPWAではわかりませんが、私たちは非常に単純だと考えています。ユーザーがコンテンツや機能に即座にアクセスできるように、デバイス上で対話できるようにしたいと考えています。ウェブは、接続されたすべてのデバイスのすべての人に届くはずです。ユーザーは、自分の好みのモダリティにアクセスできる必要があります(モバイル、多分)、またはアシスタントなどでの音声 私たちはまだヘッドレスウェブから遠く離れている(0)が、記事では本当に私を驚かせた: Another downside is that PWAs are highly isolated. So it’s hard and unlikely for different PWAs to share resources or data directly. 全文を読む ウェブ上のサイトとアプリは分離されていないと思われますが、ウェブはリンク可能、インデックス可能、一時的です(0)。私たちは、プラットフォームがユーザーに簡単にサイト内外の*データを取得することを許可していないため、意図しないサイロを作成しています(1)。私はRDFやそのようなことについては言及していません。コピー&ペースト、ドラッグ&ドロップ、サイトへの共有、サイトからの共有などの基本的な操作は今日のWeb上で壊れています。と窓。

Read More

894556 - Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element

Paul Kinlan

最初の問題は、ウェブ上でビデオエディタを作成するです。 私は複数のビデオストリーム(デスクトップとウェブカム)を持っています。私はワンビデオ要素のビデオストリームを切り替えることができるようにしたいので、Webカメラとデスクトップを素早く切り替えることができ、 MediaRecorderを破ることはできません。 あなたが videoTracksオブジェクトのselectedプロパティを <video>要素が含まれていますが、トラックの配列に含まれる要素は1つだけです(MediaStreamの最初のビデオトラック)。 What steps will reproduce the problem? (1) Get two MediaStreams with video tracks (2) Add them to a new MediaStream and attach as srcObject on a videoElement (3) Check the videoElement.videoTracks object and see there is only one track Demo at https://multiple-tracks-bug.glitch.me/ What is the expected result? I would expect videoElement.videoTracks to have two elements. What happens instead? It only has the first videoTrack that was added to the MediaStream.

Read More

Barcode detection in a Web Worker using Comlink

Paul Kinlan

私はQRコードの大ファンです。実世界とデジタル世界の間でデータを交換するための非常にシンプルできれいな方法です。数年前から、私はQRSnapperと呼ばれる小さなプロジェクトを持っていました。まあそれはいくつかの名前を持っていますが、これは私が解決したものです&mdash;これは getUserMedia APIを使用してユーザのカメラからライブデータを取得し、ほぼリアルタイムでQRコードをスキャンすることができます。 このアプリの目標は、UIで60fpsを維持し、QRコードをすぐに検出できるようにすることでした。これは、検出コードをWebワーカー(かなり標準的なもの)に入れなければならないことを意味しました。この記事では、comlinkを使ってワーカーのロジックを大幅に単純化する方法を簡単に共有したいと思っていました。 qrclient.js import * as Comlink from './comlink.js'; const proxy = Comlink.proxy(new Worker('/scripts/qrworker.js')); export const decode = async function (context) { try { let canvas = context.canvas; let width = canvas.width; let height = canvas.height; let imageData = context.getImageData(0, 0, width, height); return await proxy.detectUrl(width, height, imageData); } catch (err) { console.log(err); } }; qrworker.js(ウェブワーカー) import * as Comlink from './comlink.js'; import {qrcode} from './qrcode.js'; // Use the native API's let nativeDetector = async (width, height, imageData) => { try { let barcodeDetector = new BarcodeDetector(); let barcodes = await barcodeDetector.

Read More

Running FFMPEG with WASM in a Web Worker

Paul Kinlan

私はFFMPEG.jsが大好きです。これは、asm.jsでコンパイルされた素敵なツールです。そして、私はビデオをすばやく編集できるJS Webアプリケーションを作成しましょう。 FFMPEG.jsもWebワーカーと連携して、メインスレッドをブロックせずにビデオをエンコードすることができます。 私はComlinkも大好きです。 Comlinkでは、複雑な postMessageステートマシンを扱わなくても、関数やクラスを公開することで、Webワーカーと簡単にやりとりすることができます。 私は最近、この2つを組み合わせる必要があります。私はFFMPEGをWebアセンブリにエクスポートして実験しました(これはうまくいきます)、現在のFFMPEG.jsプロジェクトでpostMessageの作業をすべてクリーンアップしたかったのです。以下は、コードが今のように見えるものです - 私はそれがかなりきちんとしていると思います。私たちにはffmpeg.jsとcomlinkをインポートするワーカーがいて、単にffmpegインターフェイスを公開するだけです。次に、workerを読み込んだ後、comlinkを使ってffmpeg APIへのプロキシを作成するWebページがあります。 きちんとした worker.js importScripts('https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js'); importScripts('../ffmpeg-webm.js'); Comlink.expose(ffmpegjs, self); client.html let ffmpegjs = await Comlink.proxy(worker); let result = await ffmpegjs({ arguments: ['-y','-i', file.name, 'output.webm'], MEMFS: [{name: file.name, data: data}], stdin: Comlink.proxyValue(() => {}), onfilesready: Comlink.proxyValue((e) => { let data = e.MEMFS[0].data; output.src = URL.createObjectURL(new Blob([data])) console.log('ready', e) }), print: Comlink.proxyValue(function(data) { console.log(data); stdout += data + "\n"; }), printErr: Comlink.proxyValue(function(data) { console.

Read More

Translating a blog using Google Cloud Translate and Hugo

Paul Kinlan

私は最近、Google4Indiaイベント(近いうちに報告)に出席し、多くの企業や開発者と出会うためにインドへの旅行から帰ってきました。議論された最も興味深い変更の1つは、国のユーザーの言語でより多くのコンテンツを求めていたことでした。特に、ユーザーの言語で検索しやすくすること、コンテンツを見つけること、テキストまたは音声形式でユーザにそれを読み戻すことができます。 旅行全体が私に考えさせてくれました。私のブログはHugoで構築されています。 Hugoは現在、複数の言語で書かれたコンテンツをサポートしています。 Hugoは完全に静的なので、新しいコンテンツを作成することは、新しいファイルを作成してビルドシステムに魔法をかけることの問題です。翻訳ツールを使用して静的コンテンツを実行することで、より多くの人がコンテンツを利用できるようにすることができます。なぜなら、コンテンツの翻訳者は非常に高額なためです。 私の飛行前にイギリスに帰国する数時間前に、自分のマークダウンファイルを取得し、Google Cloud Translateで実行してクイック検索を作成するスクリプトを作成しました私はすぐにホストすることができますページの翻訳。ソリューション全体を以下に示します。これは比較的基本的なプロセッサーで、「コード」を無視したHugoプリアンブルを無視し、プル・クォートを無視しています。これらは常に書かれたままにしておくことを前提としていました。 注:翻訳用のラーニングソフトウェアのように見えるので、学習ツールでGoogle Translatedコンテンツをアルゴリズムの入力として使用しないようにページをマークアップすることが重要です(https://cloud.google.com/translate/マークアップ)。 // Imports the Google Cloud client library const Translate = require('@google-cloud/translate'); const program = require('commander'); const fs = require('fs'); const path = require('path'); program .version('0.1.0') .option('-s, --source [path]', 'Add in the source file.') .option('-t, --target [lang]', 'Add target language.') .parse(process.argv); // Creates a client const translate = new Translate({ projectId: 'html5rocks-hrd' }); const options = { to: program.target, }; async function translateLines(text) { if(text === ' ') return ' '; const output = []; let results = await translate.

Read More

Apple - Web apps - All Categories

Paul Kinlan

Web AppsがiPhoneでアプリを使用するために推奨される方法を覚えていますか? What are web apps? Learn what they are and how to use them. 全文を読む。 2013年頃、Appleは/ webapps /トップレベルのディレクトリを/ iphone / ことは、ディレクトリは実際にはかなり良かった、そこのアプリの多くは今日も動作しています。しかし、AppStoreを見ると、開発者が持っていたより多くの問題が解決されました。 AppStoreはまた、支払いに関してユーザーや開発者から取り除かれた摩擦を具体的に紹介し始めました。

Read More

Gears API

Paul Kinlan

私は初期のモバイルWeb APIに関するブログ記事を書いているし、Alex RussellはGoogle Gearsを思い出させた Gears modules include: LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally Database Store data locally in a fully-searchable relational database WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously 全文を読む。 AppCacheとWebSQL、GeolocationとWebWorkersはGoogle Gearsのアイデアから出てきて、実際に生き残ったのは後者の2つだけです。 WebSQLは決して広くサポートされておらず、IndexedDBに置き換えられました。 ServiceWorkerに置き換えられたAppCache

Read More

RSS Feed to Google Chat Webhook using Cloud Functions for Firebase and Superfeedr

Paul Kinlan

私たちはGoogleチャットを内部的に使用してチーム全体でコミュニケーションを取っています。また、RSSフィードを介してアクセスできる多くのコンテンツを作成し、すべて見ることができるチームフィードを持っています。最近まで、WebHooks(https://developers.google.com/hangouts/chat/how-tos/webhooks)経由で単純なポストオンリーボットを作成することはかなり簡単であることがわかりました。私にはアイデアが与えられました。私はRSSフィードをポーリングして、私たちのチームチャットに直接投稿できるWebhookに送信する簡単なサービスを作成できます。 最後はかなりシンプルで、以下のコードをすべて含めました。私はFirebaseの機能を使用しました - これは他のサービス機能サイトやSuperfeedrと同じように簡単だと思われます。 SuperfeedrはPubsubhubbub ping(現在WebSub)を聞くことができるサービスで、Pubsubが設定されていないRSSフィードもポーリングします。フィードが見つかると、新しく見つかったフィードデータをXMLまたはJSON形式で構成されたURL(私の場合、FirebaseのCloud機能)にpingを実行します。データを解析して何かをするだけです。 const functions = require('firebase-functions'); const express = require('express'); const cors = require('cors'); const fetch = require('node-fetch'); const app = express(); // Automatically allow cross-origin requests app.use(cors({ origin: true })); app.post('/', (req, res) => { const { webhook_url } = req.query; const { body } = req; if (body.items === undefined || body.items.length === 0) { res.send(''); return; } const item = body.items[0]; const actor = (item.

Read More

'Moving to a Chromebook' by Rumyra's Blog

Paul Kinlan

Ruth JohnがChrome OSに移行しました(一時的に): The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it. I have the most recent Pixel, the 256GB version. Here’s what you do. Go to settings. Click on the hamburger menu (top left) - right at the bottom it says ‘About Chrome OS’ Open this and there’s an option to put your machine into dev mode It’ll restart and you’ll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags.

Read More

What are the pain points for web designers? - Mustafa Kurtuldu

Paul Kinlan

ムスタファは次のように書いている。 Tooling is complicated, we are a tooling focused industry, and they change so much. I have used maybe rough eight different tools, from Photoshop to Sketch. That’s before we add prototyping tools to the mix. This may be something we just have to accept. After all, type standards only really started to settle in the 90s, and typography is a 500-year-old discipline. Designers are still finding it difficult to prove the importance of the process.

Read More

Page Lifecycle API - Philip Walton

Paul Kinlan

Philip Walton氏は、ブラウザがタブをアンロードしたときの対応方法をChrome開発者がコントロールするために、Chromeチームが取り組んでいる新しいAPIについて深く掘り下げています。 Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user. On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

Read More

Add to homescreen changes in Chrome 68 - Pete LePage

Paul Kinlan

Pete LePageは、Chromeのホーム画面に追加するという重要な変更について書きます Add to Home Screen changes If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user. To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

Read More

A one year PWA retrospective - Pinterest Engineering

Paul Kinlan

PinterestのPWAの概要 The verdict Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board.

Read More

Configuring hugo server to serve 'mjs' ES modules

Paul Kinlan

デフォルトでは、Hugoは正しいコンテンツタイプの.mjsファイルを提供しません。実際、最近までhugoはMIMEタイプごとに複数のファイル拡張子を提供することはできませんでした。これは修正されたv0.43のように見えます。 [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] 全文を読む。 上記のコードでは、正しいMIMEタイプのESモジュール用のmjsファイルを提供できます(メモモジュールは ‘text / javascript’で提供する必要があります)。これはローカルテストにのみ必要です。ホスティングは別の問題です:)

Read More

Thoughts on importing npm modules to the web as JavaScript modules

Paul Kinlan

私はESモジュールについて昨日投稿した投稿を考えています I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require). I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:

Read More

This.Javascript: State of Browsers - YouTube

Paul Kinlan

This DotのTracy Leeは、ブラウザのベンダーの多くが取り組んでいることの概要を示すために、かなりきれいなライブストリームを編成しました。 Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers. Featured Speakers: Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software Paul Frazee - Works on Beaker Browser Matthew Claypotch - Developer Advocate at Mozilla Paul Kinlan - Senior Developer Advocate at Google Patrick Kettner - Edge at Microsoft Amal Hussein - Senior Open Web Engineer at Bocoup Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder 全文を読む

Read More

PWACompat: the Web App Manifest for all browsers - @ChromiumDev

Paul Kinlan

Sam Thorogoodからのメッセージ: You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen. And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify.

Read More