Hello.

I am Paul Kinlan.

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

New WebKit Features in Safari 12.1 | WebKit

Paul Kinlan

最新のSafari用の大きなアップデート! これはかなり大きな発表だと思いました。Googleとは正反対の話で、Google Pay Libが支払いを実行するための推奨方法であると私は言いました。支払い要求の、しかしそれは最初にPRではありません。 Payment Request is now the recommended way to pay implement Apple Pay on the web. Read full post 。 そして私のお気に入りの機能はWeb Intentsでの私の歴史を与えてくれました。 Web Share API The Web Share API adds navigator.share(), a promise-based API developers can use to invoke a native sharing dialog provided the host operating system. This allows users to share text, links, and other content to an arbitrary destination of their choice, such as apps or contacts.

Read More

Offline fallback page with service worker

Paul Kinlan

何年も前に、ネイティブアプリケーションがネットワーク接続の欠如にどのように対応したかについて調査しました。私は分析へのリンクを失いましたが(Google+にあると誓うことができます)、多くのネイティブアプリケーションはインターネットに密接に結び付けられているため、機能を拒否することができます。多くのWebアプリのように思えますが、それらはWebとは一線を画したものですが、経験はまだ「オンブランド」であったということです。大部分のWebエクスペリエンスでは、「Dino」が表示されます(chrome:// dinoを参照)。 Service Workerには長い間取り組んできましたが、Service Workerによってページが制御されるサイトがますます増えている一方で、ネットワークが機能していないときには、ほとんどのサイトで基本的なフォールバックの経験がありません利用可能です。 私は私たちの良い友達Jakeに、あなたが完全にオフラインで最初のエクスペリエンスを作りたくないという仮定の下で一般的なフォールバックページをどのように作り上げるかについてのガイダンスがあるかと尋ねました。 Check it out 。 説明を簡潔にするために、コードの長さは約20行にすぎないので、以下に貼り付けました。オフラインアセットをキャッシュし、「ナビゲーション」フェッチであるすべてのフェッチについて、エラーが発生したかどうか(ネットワークが原因で)を確認し、元のコンテンツの代わりにオフラインページをレンダリングします。 addEventListener('install', (event) => { event.waitUntil(async function() { const cache = await caches.open('static-v1'); await cache.addAll(['offline.html', 'styles.css']); }()); }); // See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload addEventListener('activate', event => { event.waitUntil(async function() { // Feature-detect if (self.registration.navigationPreload) { // Enable navigation preloads! await self.registration.navigationPreload.enable(); } }()); }); addEventListener('fetch', (event) => { const { request } = event; // Always bypass for range requests, due to browser bugs if (request.

Read More

Editor.js

Paul Kinlan

私はHugoベースのエディタで更新し、EditorJSをブログのエディタとしても試してみた。 Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core. Read full post 。 私はそれがうまくいくと思います。 私は少しコードベースと苦労しました、例はすべてESモジュールを使用します、しかしNPM distはすべてIIFE ES5コードで出力されます。しかし、そのハードルを乗り越えれば、もう少し中程度の外観のUIを構築するのは非常に簡単です。

Read More

Debugging Web Pages on the Nokia 8110 with KaiOS

Paul Kinlan

私たちは最近フィーチャーフォンで多くの開発をしてきました、そしてそれは大変でしたが、楽しいです。最も難しいのは、KaiOS上で、特に私たちが持っているハードウェア上で、Webページをデバッグすることが不可能であることがわかったということです(The Nokia 8110)。ノキアは素晴らしいデバイスです、それは私たちが知っているKaiOSで造られますそれはFirefox 48に似た何かに基づいています、しかしそれはロックされています、簡単にWebIDE。 2、3のブログを読むことと、 adbについて少し知っていることの組み合わせを通して、私はそれをする方法をadbました。他の人がそれを行うことができたかもしれないことに注意してください、しかしそれは一箇所に明確に文書化されていません。 (上の画像はDevToolsとスクリーンショットツールの出力を示しています) 手順は次のとおりです。 USBケーブルを接続します。メインマシンにadbインストールされていることを確認してください。 Firefox 48コピーをダウンロードする 3.携帯電話から*#*#33284#*#*入力して「開発者モード」を有効にします(ダイヤラは使用しないでください)。画面上部に小さな「バグ」アイコンが表示されます。 [Source ] USBケーブルを取り付けます 5.開発マシン上で以下のコマンドを実行します。 adb start-server あなたの電話が接続されていることを確認するためのadb devices 。 adb forward tcp:6000 localfilesystem:/data/local/debugger-socketこれはあなたのマシンから電話のソケットへのチャンネルを設定します。これがWeb IDEが使用するものです。 FirefoxをWeb IDEを起動し、[ツール]、[Web IDE]のWeb IDEします。 Web IDEが開きます。[Remote Runtime]をクリックし、[localhost:6000]の[開く]ボタンをクリックします(これはTCP転送ポートです)。 8.電話でページを開くと、左側に表示されます。ほら。

Read More

Object Detection and Augmentation

Paul Kinlan

私はChromeでShape Detection APIてきましたが、その可能性を本当に気に入っています。たとえば、非常に単純なQRCode detectorにはJSポリフィルがありますが、 new BarcodeDetector() APIが使用可能な場合 形状検出APIの他の機能、 Face Detection 、 Barcode Detection 、およびText Detectionを使用してここで作成した他のデモをいくつか見ることができます。 私が偶然見つけたとき、私は驚きましたJeeliz週末に、私は彼らのツールキットのパフォーマンスに非常に感銘を受けました-付与された私はPixel3 XLを使用していたが、顔の検出がで可能であるものよりも大幅に速く見えたFaceDetector API。 Checkout some of their demos 。 私はたくさん考えました。このオブジェクト検出用のツールキット(およびそれに類するもの)は、Web上で広く利用可能なAPI、特にカメラアクセス、WebGL、およびWASMを使用します。 )豊富なエクスペリエンスを簡単に構築し、すべてのプラットフォームにわたって一貫したエクスペリエンスを持つ何十億ものユーザーに到達するために使用できます。 増強はそれが面白くなるところ(そして実際に私がこの記事で紹介したいもの)であり、そしてあなたが今プラットフォームに来ているミドルウェアライブラリを必要とするところで、私達はMASSIVEアプリをインストールせずに楽しいsnapchat-esqueフェイスフィルターアプリを構築できますこれは、ユーザーのデバイスから大量のデータを収集します(システムへの根本的なアクセスがないため)。 楽しいデモ以外では、次のように非常に高度なユースケースをすばやく簡単に解決できます。 *カメラから直接テキスト選択、またはユーザーからの写真 *カメラからの言語のライブ翻訳 *インラインQRコード検出機能なので、WeChatを常時開く必要はありません:) *画像からWebサイトのURLまたはアドレスを自動抽出する *クレジットカードの検出と番号抽出(より早くあなたのサイトにサインアップするユーザーを取得する) あなたの店のウェブアプリで*ビジュアル商品検索。 あなたの店のWebアプリでより多くの製品の詳細については*バーコードルックアップ *プロフィール写真を人の顔にすばやくトリミング。 *シンプルなA11Yは、ユーザーが画像にあるテキストを聞くことができるようにします。 私はたった5分でこれらのユースケースについて考えました - もっとたくさんあることを私は知っています - しかし私達はカメラを利用している多くのサイトやウェブアプリを見ていないことを襲ったユーザーがアプリをダウンロードする必要があります。これ以上行う必要はないと思います。 最新情報私たちのチームのThomas Steinerが私たちのチームチャットで、私は現在のShapeDetection APIが好きではないようにShapeDetection 。このAPIがそれぞれのシステムそれぞれのネイティブ出荷実装へのアクセスを提供するという事実を私は気に入っていますが、 The Lumpy Webで書いたThe Lumpy Web 、Web開発者はプラットフォームの一貫性を切望し、要約すると: APIはChromeにのみあります ChromeのAPIは、基盤となる実装が異なるため、プラットフォームごとに大きく異なります。 Androidには、口や目など、macOSにアウトラインがあるランドマーク用のポイントしかありません。 Androidでは、 TextDetectorは検出されたテキストを返し、MacOSの場合は「テキストの存在」インジケータを返します。これは、Surmaが見つけたすべてのバグについて言及していないことです。 配布のためのプラットフォームとしてのウェブはこれらの経験にとってとても意味があるのでやりたくないと思いますが、上記の2つの問題のグループはすべての機能を長期にわたって実装する必要があることに疑問を投げかけます。 WebGL、WASM、そして将来のWeb GPUなど、今日のプラットフォームの機能を使用して出荷されるパッケージに優れたソリューションを実装することができれば、ネイティブなWebプラットフォーム。 とにかく、私たちがウェブ上でこれを行うことができるという事実が大好きです。

Read More

Got web performance problems? Just wait...

Paul Kinlan

私はあなたを本当に根拠のある状態に保っている一連のローエンド機器でのテストについて良いMarikoで同僚のMarikoによるツイートを見ました。 つぶやきのコンテキストは、これらのクラスのデバイスを日常的に使用しているユーザー向けに構築するときにWeb開発がどのようなものかを検討しているということです。 チームは現在この分野で多くの仕事をしていますが、私はサイトを構築するのに1日を費やしました、そして少しでも合理的なレベルのパフォーマンスで何かを動作させることは信じられないほど困難でした。 *ビューポートの奇妙な点、および300msのクリックディレイの不思議な再導入(回避策)。 *画面全体の巨大な塗り替え、そして遅いです。 *ネットワークが遅い *メモリに制約があり、その後のGCがメインスレッドを数秒間ロックする *非常に遅いJS実行 * DOM操作が遅い 私が構築していたページの多くは、高速のwifi接続でもページのロードに数秒かかり、その後のやりとりは非常に遅いものでした。それは大変でした。メインスレッドからできるだけ多くのことを引き出そうとすることを含みました、しかしそれは私が私の伝統的なすべてのWeb開発のためにしなかったであろうパフォーマンスが大幅に向上しました。 長期的に何をするべきかわからない、私たちがより発展した市場で働いている開発者の巨大な群れが「私は[insert country x]にユーザーのためのサイトを構築していません」という反応を持つと思う。ハイレベルこの声明を議論するのは難しいですが、私は毎年何千万もの新しいユーザーがコンピューティングに来ていて、彼らがこれらのデバイスを使用することになるという事実を無視することはできません。私たちがrise of the meta platform満足しないように、コンテンツとアプリケーションのための選択の選択。 私達はこれからも長い間パフォーマンスを向上させ続ける必要があるでしょう。開発者がすばやくロードし、スムーズなユーザーインターフェースを持つことができるよう、ツールとガイダンスを作成し続けます。

Read More

Browser Bug Searcher

Paul Kinlan

私はちょうどwork our team has doneいくつかをwork our team has doneていました、そして私はRobert NymanとEric Bidelmanが作成した2017年からのプロジェクトを見つけました。 Browser Bug Searcher! ほんの数回キーを押すだけで、すべての主要ブラウザエンジンにわたるお気に入りの機能の概要を把握できます。 Source code available 。 これは実際に私がcrbugとwebkitのバグトラッカーで抱えている問題の1つを強調しています、彼らはRSSのようなフォーマットでデータのフィードを得る簡単な方法を持っていません。私は自分のtopicdeckアグリゲーターをバグカテゴリーなどで使えるようにしたいと思っています。それで私はそれぞれのバグトラッカーからの最新の情報に基づいて興味があることすべてのダッシュボードを持っています。

Read More

Github's Web Components

Paul Kinlan

私はこのブログへの投稿をより簡単にすることができるようにhttps://www.webcomponents.org/上のクイックhttps://www.webcomponents.org/エディタを探していました、そして私はgithubによってきちんとしたコンポーネントのセットにgithub 。 私は彼らが<time-element>を持っていることを知っていましたが、私は彼らがそのような素晴らしく単純な一連の便利な要素を持っていることを知りませんでした。

Read More

London from Kingscross

Paul Kinlan

今日はちょっといいね。

Read More

The GDPR mess

Paul Kinlan

(業界として)私たちがGDPRの同意を実装する方法は、混乱しています。 「必要なCookieのみを使用する」以外のものを選択する理由がわからないのですが、どちらかの選択肢とどちらかの選択とのトレードオフの違いを理解することはできません。必要なクッキーのみを使用する。

Read More

Brexit: History will judge us all

Paul Kinlan

歴史はこの混乱について私たち全員を判断するでしょう、そしてそれがナショナリズム、自己利益、植民地時代の傲慢、有名人の崇拝の影響に関するすべての人のためのケーススタディになることを願っています。 ファッカー

Read More

Ricky Mondello: Adoption of Well-Known URL for Changing Passwords

Paul Kinlan

SafariチームのRicky Mondelloがつい最近、Twitterが./well-known/change-password仕様をどのように使用しているかについてのメモを共有しました。 I just noticed that Twitter has adopted the Well-Known URL for Changing Passwords! Is anyone aware of other sites that have adopted it? Twitter’s implementation: https://twitter.com/.well-known/change-password; Github’s: https://github.com/.well-known/change-password; Specification :https://github.com/WICG/change-password-url Read full post 。 よく知られた場所にファイルがあれば、ブラウザは複雑なUIをナビゲートする必要なしに素早くパスワードをリセットすることを可能にするUIをユーザに提供できます。 この仕様は一見シンプルです。よく知られているファイルには、アクションを実行したいときにユーザーに指示するURLが含まれているだけです。これは私が考えることを私に導きました、私達はこれらのより多くの機能を提供することができます: GDPRベースの同意モデル(cookie同意)のよく知られた場所 - サイトの所有者は、ユーザーがすべてのcookieおよびその他のデータ同意アイテムを管理し、潜在的に取り消すことができるページへのリンクを提供できます。 *ブラウザの権限管理のためのよく知られた場所 - サイトの所有者は、ユーザーが地理的位置、通知、その他のプリミティブなどのものに対する権限を取り消すことができるようにするための迅速な場所を提供できます。 *アカウントの削除と変更のためのよく知られたパス メーリングリスト購読管理のための*よく知られたパス リストは続きます….私はユーザーが一般的なユーザーの行動を発見するのを手助けするための単純なリダイレクトファイル、そしてブラウザがそれを表面化させる方法のためのアイデアが本当に好きです。 更新: issue to Chrome to see if we can get a similar implementationを追加しissue to Chrome to see if we can get a similar implementation 。

Read More

pinch-zoom-element

Paul Kinlan

Jakeとチームは、ブラウザ独自のピンチズームのダイナミクス以外のHTMLのセットでピンチズームを管理するための、このかなり素晴らしいカスタム要素を構築しました(モバイルビューポートズームを考えてください)。この要素は、Chrome Dev Summitで構築およびリリースしたsquooshアプリに必要な中心的コンポーネントの1つでした(…「Chrome Dev Summitでリリース」と言いますsquooshは、China 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