Hello.

I am Paul Kinlan.

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

Wood Carving found in Engakuji Shrine near Kamakura

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Sakura

Paul Kinlan

Tôi nói cụ thể hơn rằng đây là 'Yaezakura'

Read More

Debugging Web Pages on the Nokia 8110 with KaiOS using Chrome OS

Paul Kinlan

Bài đăng này là phần tiếp theo của bài đăng về gỡ lỗi KaiOS device with Web IDE , nhưng thay vì sử dụng macOS, giờ đây bạn có thể sử dụng Chrome OS (m75) với Crostini. Tôi đang KaiOS Environment Setup từ KaiOS Environment Setup , một khởi đầu tốt, nhưng không đủ để bắt đầu với Chrome OS và Crostini. Dưới đây là hướng dẫn sơ bộ mà tôi làm theo.

Read More

New WebKit Features in Safari 12.1 | WebKit

Paul Kinlan

Cập nhật lớn cho Safari mới nhất!

Tôi đã nghĩ rằng đây là một thông báo khá lớn và ngược lại với Google mà trước đây đã nói rằng Google Pay Lib là cách được đề xuất để thực hiện thanh toán … Yêu cầu thanh toán, nhưng đây không phải là PR trước.

Payment Request is now the recommended way to pay implement Apple Pay on the web.

Read full post .

Và tính năng yêu thích của tôi đưa ra lịch sử của tôi với Ý định web.

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.

Bây giờ chỉ để có được API mục tiêu chia sẻ và chúng tôi đang chiến thắng! :)

Offline fallback page with service worker

Paul Kinlan

Nhiều năm trước, tôi đã thực hiện một số nghiên cứu về cách các ứng dụng gốc phản ứng với việc thiếu kết nối mạng. Mặc dù tôi đã mất liên kết đến phân tích (tôi có thể thề là trên Google+), câu chuyện bao quát là nhiều ứng dụng gốc gắn chặt với internet mà chúng chỉ cần từ chối hoạt động. Nghe có vẻ giống như rất nhiều ứng dụng web, điều khiến chúng khác biệt so với web là trải nghiệm vẫn là 'thương hiệu', Bart Simpson sẽ nói với bạn rằng bạn cần phải trực tuyến (ví dụ), và cho phần lớn các trải nghiệm web bạn nhận được 'Dino' (xem chrome: // dino).

Chúng tôi đã làm việc với Service Worker từ lâu và trong khi chúng tôi thấy ngày càng nhiều trang có các trang được kiểm soát bởi Worker, thì phần lớn các trang web thậm chí không có trải nghiệm dự phòng cơ bản khi mạng không có sẵn.

Tôi đã hỏi Jake, người bạn tốt của tôi nếu chúng tôi có bất kỳ hướng dẫn nào về cách xây dựng một trang dự phòng chung chung với giả định rằng bạn không muốn tạo ra trải nghiệm ngoại tuyến hoàn toàn đầu tiên, và trong vòng 10 phút anh ấy đã tạo ra nó. Check it out .

Để cho ngắn gọn, tôi đã dán mã bên dưới vì nó chỉ dài khoảng 20 dòng. Nó lưu trữ các tài sản ngoại tuyến, và sau đó với mỗi lần tìm nạp là 'điều hướng', nó sẽ xem nếu nó bị lỗi (vì mạng) và sau đó hiển thị trang ngoại tuyến thay cho nội dung gốc.

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.headers.has('range')) return;
  event.respondWith(async function() {
    // Try to get from the cache:
    const cachedResponse = await caches.match(request);
    if (cachedResponse) return cachedResponse;

    try {
      // See https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response
      const response = await event.preloadResponse;
      if (response) return response;

      // Otherwise, get from the network
      return await fetch(request);
    } catch (err) {
      // If this was a navigation, show the offline page:
      if (request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      // Otherwise throw
      throw err;
    }
  }());
});

Đó là tất cả. Khi người dùng trực tuyến, họ sẽ thấy trải nghiệm mặc định.

Và khi người dùng ngoại tuyến, họ sẽ nhận được trang dự phòng.

Tôi thấy tập lệnh đơn giản này vô cùng mạnh mẽ và vâng, trong khi nó vẫn có thể được cải thiện, tôi tin rằng ngay cả một thay đổi đơn giản trong cách chúng ta nói với người dùng của mình khi có vấn đề với mạng có khả năng cải thiện cơ bản nhận thức của web cho người dùng trên toàn cầu.

** Cập nhật ** Jeffrey Posnick kinldy đã nhắc nhở tôi về việc sử dụng Navigation Preload để không phải chờ SW boot cho tất cả các yêu cầu, điều này đặc biệt quan trọng nếu bạn chỉ kiểm soát các yêu cầu mạng fails.

testing block image upload

Paul Kinlan

Đây chỉ là một thử nghiệm để xem nếu tôi có tải lên hình ảnh đúng. Nếu bạn thấy điều này, thì tôi đã làm :)

Read More

Editor.js

Paul Kinlan

Tôi đã cập nhật bởi trình soạn thảo dựa trên Hugo để thử và sử dụng EditorJS, cũng như trình chỉnh sửa cho blog.

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 .

Tôi nghĩ rằng nó hoạt động.

Tôi đã vật lộn một chút với codebase, tất cả các ví dụ đều sử dụng Mô-đun ES, tuy nhiên, NPM dist là tất cả đầu ra trong mã IIFE ES5. Nhưng một khi tôi đã vượt qua trở ngại đó, việc xây dựng một giao diện người dùng trông hơi giống phương tiện khá dễ dàng.

Debugging Web Pages on the Nokia 8110 with KaiOS

Paul Kinlan

Gần đây chúng tôi đã phát triển rất nhiều trên điện thoại tính năng và điều đó thật khó khăn, nhưng thú vị. Điều khó nhất là trên KaiOS, chúng tôi thấy không thể gỡ lỗi các trang web, đặc biệt là trên phần cứng mà chúng tôi có (Nokia 8110). Nokia là một thiết bị tuyệt vời, được xây dựng với KaiOS mà chúng ta biết dựa trên một cái gì đó giống với Firefox 48, nhưng nó bị khóa, không có chế độ nhà phát triển truyền thống như bạn có trên các thiết bị Android khác, có nghĩa là bạn không thể kết nối Firefox Web dễ dàng.

Read More

Object Detection and Augmentation

Paul Kinlan

Tôi đã chơi rất nhiều với Shape Detection API trong Chrome rất nhiều và tôi thực sự thích tiềm năng của nó, ví dụ như một QRCode detector rất đơn giản tôi đã viết cách đây rất lâu có một polyfill JS, nhưng sử dụng API new BarcodeDetector() nếu có.

Bạn có thể thấy một số bản demo khác mà tôi đã tạo ở đây bằng cách sử dụng các khả năng khác của API phát hiện hình dạng: Face Detection , Barcode DetectionText Detection .

Tôi đã rất ngạc nhiên khi tôi tình cờ gặp Jeeliz vào cuối tuần và tôi vô cùng ấn tượng với hiệu suất của bộ công cụ của họ - với điều kiện tôi đang sử dụng Pixel3 XL, nhưng việc phát hiện khuôn mặt có vẻ nhanh hơn đáng kể so với API FaceDetector .

Checkout some of their demos .

Nó khiến tôi suy nghĩ rất nhiều. Bộ công cụ này để phát hiện đối tượng (và những công cụ tương tự) sử dụng API có sẵn rộng rãi trên Web cụ thể là Truy cập máy ảnh, WebGL và WASM, không giống như API phát hiện hình dạng của Chrome (chỉ có trong Chrome và không nhất quán trên tất cả các nền tảng mà Chrome đang hoạt động ) có thể được sử dụng để xây dựng trải nghiệm phong phú dễ dàng và tiếp cận hàng tỷ người dùng với trải nghiệm nhất quán trên tất cả các nền tảng.

Mở rộng là nơi thú vị (và thực sự là những gì tôi muốn thể hiện trong bài đăng này) và là nơi bạn cần thư viện phần mềm trung gian hiện đang đến với nền tảng, chúng tôi có thể xây dựng các ứng dụng lọc khuôn mặt snapchat-esque thú vị mà không cần người dùng cài đặt ứng dụng MASSIVE thu hoạch lượng dữ liệu khổng lồ từ thiết bị người dùng (vì không có quyền truy cập cơ bản vào hệ thống).

Ngoài các bản demo vui nhộn, có thể giải quyết các trường hợp sử dụng rất tiên tiến một cách nhanh chóng và đơn giản cho người dùng, chẳng hạn như:

  • Lựa chọn văn bản trực tiếp từ máy ảnh hoặc ảnh từ người dùng
  • Dịch trực tiếp các ngôn ngữ từ máy ảnh
  • Phát hiện QRCode nội tuyến để mọi người không phải mở WeChat mọi lúc :)
  • Tự động trích xuất URL trang web hoặc địa chỉ từ một hình ảnh
  • Phát hiện thẻ tín dụng và trích xuất số (giúp người dùng đăng ký vào trang web của bạn nhanh hơn)
  • Tìm kiếm sản phẩm trực quan trong ứng dụng web của cửa hàng của bạn.
  • Tra cứu mã vạch để biết thêm chi tiết sản phẩm trong ứng dụng web của cửa hàng của bạn.
  • Cắt nhanh ảnh hồ sơ trên khuôn mặt của mọi người.
  • Các tính năng A11Y đơn giản để cho phép người dùng nghe văn bản tìm thấy trong hình ảnh.

Tôi mới dành 5 phút để suy nghĩ về các trường hợp sử dụng này - tôi biết còn nhiều điều nữa - nhưng tôi nhận ra rằng chúng ta không thấy nhiều trang web hoặc ứng dụng web sử dụng máy ảnh, thay vào đó chúng ta thấy rất nhiều trang web hỏi họ người dùng tải xuống một ứng dụng và tôi không nghĩ chúng ta cần phải làm điều đó nữa.

** Cập nhật ** Thomas Steiner trong nhóm của chúng tôi đã đề cập trong nhóm của chúng tôi Trò chuyện rằng có vẻ như tôi không thích API ShapeDetection hiện tại. Tôi thích thực tế rằng API này cho phép chúng tôi truy cập vào các triển khai vận chuyển riêng của từng hệ thống tương ứng, tuy nhiên như tôi đã viết trong The Lumpy Web , Nhà phát triển web khao khát sự nhất quán trong nền tảng và có một số vấn đề với API phát hiện hình dạng có thể được tóm tắt là:

  1. API chỉ có trong Chrome
  2. API trong Chrome rất khác nhau trên mọi nền tảng vì các triển khai cơ bản của chúng là khác nhau. Android chỉ có điểm cho các điểm mốc như miệng và mắt, nơi macOS có đường viền. Trên Android, TextDetector trả về văn bản được phát hiện, trong đó trên macOS, nó trả về chỉ báo 'Hiện diện văn bản' … Đây không phải là đề cập đến tất cả các lỗi mà Surma tìm thấy.

Web với tư cách là một nền tảng để phân phối có ý nghĩa rất lớn đối với những trải nghiệm như thế này đến nỗi tôi nghĩ rằng chúng ta sẽ không làm điều đó, nhưng hai nhóm vấn đề nêu trên khiến tôi đặt câu hỏi về nhu cầu lâu dài để thực hiện mọi tính năng trên nền tảng web thực sự, khi chúng ta có thể triển khai các giải pháp tốt trong gói được vận chuyển bằng các tính năng của nền tảng hiện nay như WebGL, WASM và trong GPU Web trong tương lai.

Dù sao, tôi thích thực tế là chúng ta có thể làm điều này trên web và tôi đang tìm kiếm để thấy các trang web giao hàng với họ.

Got web performance problems? Just wait...

Paul Kinlan

Tôi đã thấy một tweet của một người bạn tốt và đồng nghiệp, Mariko , về việc thử nghiệm trên một loạt các thiết bị cấp thấp giữ cho bạn thực sự có căn cứ.

Bối cảnh của tweet là chúng tôi đang xem xét Phát triển Web như thế nào khi xây dựng cho người dùng sống hàng ngày trên các lớp thiết bị này.

Nhóm hiện đang làm rất nhiều việc trong không gian này, nhưng tôi đã dành một ngày để xây dựng một trang web và thật khó để làm bất cứ điều gì hoạt động ở mức độ hợp lý thậm chí hơi hợp lý - đây là một số vấn đề mà tôi gặp phải:

  • Chế độ xem kỳ lạ và giới thiệu lại bí ẩn về độ trễ nhấp chuột 300ms (có thể hoạt động xung quanh).
  • Việc sơn lại toàn bộ màn hình rất lớn và chậm.
  • Mạng chậm
  • Bộ nhớ bị hạn chế và các GC tiếp theo khóa luồng chính trong nhiều giây
  • Thực thi JS cực kỳ chậm
  • Thao tác DOM chậm

Đối với nhiều trang tôi đang xây dựng, ngay cả trên các trang kết nối wifi nhanh cũng mất nhiều giây để tải và các tương tác tiếp theo chỉ đơn giản là chậm. Thật khó khăn, nó liên quan đến việc cố gắng lấy càng nhiều càng tốt khỏi luồng chính, nhưng nó cũng rất hài lòng ở cấp độ kỹ thuật để thấy những thay đổi trong thuật toán và logic mà tôi đã không làm cho tất cả sự phát triển web truyền thống của mình cải thiện lớn về hiệu suất.

Tôi không chắc chắn sẽ làm gì lâu dài, tôi nghi ngờ một lượng lớn các nhà phát triển mà chúng tôi làm việc ở các thị trường phát triển hơn sẽ có phản ứng 'Tôi không xây dựng trang web cho người dùng ở [insert country x]' và tại ở cấp độ cao, thật khó để tranh luận với tuyên bố này, nhưng tôi không thể bỏ qua thực tế rằng 10 triệu người dùng mới sẽ đến máy tính mỗi năm và họ sẽ sử dụng các thiết bị này và chúng tôi muốn web trở thành * nền tảng * lựa chọn cho nội dung và ứng dụng vì chúng tôi hài lòng với rise of the meta platform .

Chúng ta sẽ cần tiếp tục thúc đẩy hiệu suất trong một thời gian dài sắp tới. Chúng tôi sẽ tiếp tục tạo các công cụ và hướng dẫn để giúp các nhà phát triển tải nhanh và có giao diện người dùng mượt mà :)

Browser Bug Searcher

Paul Kinlan

Tôi chỉ phản ánh về một số work our team has done và tôi đã tìm thấy một dự án từ năm 2017 mà Robert Nyman và Eric Bidelman đã tạo ra. Browser Bug Searcher! .

Thật đáng kinh ngạc khi chỉ với một vài lần nhấn phím, bạn đã có một cái nhìn tổng quan tuyệt vời về các tính năng yêu thích của mình trên tất cả các công cụ trình duyệt chính.

Source code available .

Điều này thực sự làm nổi bật một trong những vấn đề mà tôi gặp phải với trình theo dõi lỗi của bọ và webkit, chúng không có cách đơn giản để lấy nguồn cấp dữ liệu ở các định dạng như RSS. Tôi rất thích có thể sử dụng topicdeck tổng hợp topicdeck của mình với các danh mục lỗi, v.v. vì vậy tôi có bảng điều khiển về tất cả những điều tôi quan tâm dựa trên thông tin mới nhất từ mỗi trình theo dõi lỗi.

Github's Web Components

Paul Kinlan

Tôi đang tìm kiếm một trình soạn thảo đánh dấu nhanh trên https://www.webcomponents.org/ để tôi có thể đăng bài lên blog này dễ dàng hơn và tôi tình cờ tìm thấy một bộ các thành phần gọn gàng của github .

Tôi biết rằng họ có <time-element> nhưng tôi không biết họ có một bộ phần tử hữu ích đơn giản và đẹp như vậy.

London from Kingscross

The GDPR mess

Paul Kinlan

Cách chúng tôi (như một ngành công nghiệp) thực hiện sự đồng ý GDPR là một mớ hỗn độn. Tôi không chắc tại sao mọi người lại chọn bất cứ thứ gì ngoài 'Chỉ sử dụng cookie cần thiết', tuy nhiên tôi thực sự không thể biết được sự khác biệt giữa lựa chọn và sự đánh đổi của một trong hai lựa chọn, không đề cập đến chỉ sử dụng cookie cần thiết.

Read More

Brexit: History will judge us all

Paul Kinlan

Lịch sử sẽ phán xét tất cả chúng ta về mớ hỗn độn này, và tôi hy vọng nó sẽ là một trường hợp nghiên cứu cho tất cả các tác động của chủ nghĩa dân tộc, lợi ích cá nhân, sự kiêu ngạo của thực dân, người nổi tiếng.

Đồ ngu.

File Web Share Target

Paul Kinlan

Tôi thường nói rằng để các ứng dụng web cạnh tranh hiệu quả trong thế giới ứng dụng, chúng cần được tích hợp vào tất cả các địa điểm mà người dùng mong đợi ứng dụng. Giao tiếp giữa các ứng dụng là một trong những phần bị thiếu chính của nền tảng web và cụ thể một trong những tính năng bị thiếu chính cuối cùng là chia sẻ cấp độ bản địa: Các ứng dụng web cần có thể có được data out of their silo và vào các trang web và ứng dụng khác; họ cũng cần có khả năng nhận dữ liệu từ các ứng dụng và trang web gốc khác.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Đây là thử nghiệm chia sẻ trực tiếp từ ứng dụng camera. Có vẻ như nó đã làm việc :)

Read More

testing-file-share-target

Paul Kinlan

Đây là bản thử nghiệm API mục tiêu chia sẻ trên Android và đó là khả năng chia sẻ tệp. Nếu bạn thấy một cái gì đó ở đây, thì tất cả đều tốt :)

Read More

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

Paul Kinlan

Ricky Mondello trên nhóm Safari vừa mới chia sẻ một lưu ý về cách Twitter sử dụng thông số ./well- Unknown / exchange -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 .

Tính năng này hoàn toàn vượt qua tôi nhưng đó là một ý tưởng gọn gàng: được cung cấp một tệp ở một vị trí nổi tiếng, trình duyệt có thể cung cấp giao diện người dùng cho người dùng cho phép họ nhanh chóng đặt lại mật khẩu mà không phải điều hướng giao diện người dùng phức tạp ..

Thông số kỹ thuật rất đơn giản: tệp nổi tiếng chỉ chứa URL để hướng người dùng đến khi họ muốn thực hiện hành động. Điều này dẫn tôi đến suy nghĩ, chúng ta có thể cung cấp nhiều tính năng hơn không:

  • Một vị trí nổi tiếng cho các mô hình chấp thuận dựa trên GDPR (đồng ý cookie) - chủ sở hữu trang web có thể cung cấp liên kết đến trang nơi người dùng có thể quản lý và có khả năng thu hồi tất cả cookie và các mục đồng ý dữ liệu khác.
  • Một vị trí nổi tiếng để quản lý quyền trình duyệt - chủ sở hữu trang web có thể cung cấp một nơi nhanh chóng để người dùng có thể thu hồi quyền đối với những thứ như vị trí địa lý, thông báo và các nguyên thủy khác.
  • Một đường dẫn nổi tiếng để xóa tài khoản và thay đổi
  • Một đường dẫn nổi tiếng để quản lý đăng ký danh sách gửi thư

Danh sách này tiếp tục …. Tôi thực sự thích ý tưởng cho các tệp chuyển hướng đơn giản để giúp người dùng khám phá các hành động phổ biến của người dùng và để một cách để trình duyệt hiển thị nó.

pinch-zoom-element

Paul Kinlan

Jake và nhóm đã xây dựng yếu tố tùy chỉnh khá tuyệt vời này để quản lý thu phóng pinch trên bất kỳ bộ HTML nào bên ngoài động lực học pinch-zoom của trình duyệt (nghĩ rằng phóng to khung nhìn di động). Yếu tố này là một trong những thành phần trung tâm mà chúng tôi cần cho ứng dụng squoosh mà chúng tôi đã xây dựng và phát hành tại Chrome Dev Summit (… Tôi nói rằng 'được phát hành tại Chrome Dev Summit' - Jake đã hiển thị cho mọi người tại Ngày nhà phát triển Google Trung Quốc mặc dù phần còn lại của đội bị cấm vận;) …)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

Tôi vừa thêm nó vào blog của mình (chỉ mất vài phút), bạn có thể kiểm tra nó trên phần ' life ' của tôi nơi tôi chia sẻ ảnh mà tôi đã chụp. Nếu bạn đang sử dụng thiết bị hỗ trợ cảm ứng, bạn có thể nhanh chóng thu nhỏ phần tử, nếu bạn đang sử dụng bàn phím có thể xử lý nhiều đầu vào ngón tay cũng hoạt động.

Yếu tố này là một ví dụ tuyệt vời về lý do tại sao tôi yêu các thành phần web như một mô hình để tạo các thành phần giao diện người dùng. Phần tử pinch-zoom chỉ dưới 3kb trên dây (không nén) và phụ thuộc tối thiểu để xây dựng và nó chỉ thực hiện một công việc đặc biệt tốt, mà không cần sử dụng logic cấp độ ứng dụng tùy chỉnh nào khiến nó khó sử dụng (Tôi có một số suy nghĩ về logic UI vs các thành phần logic ứng dụng mà tôi sẽ chia sẻ dựa trên việc học của tôi từ ứng dụng Squoosh).

Tôi rất thích thấy các yếu tố như thế này nhận được nhiều nhận thức và sử dụng hơn, ví dụ tôi có thể tưởng tượng rằng yếu tố này có thể thay thế hoặc tiêu chuẩn hóa chức năng thu phóng hình ảnh mà bạn thấy trên nhiều trang web thương mại và mãi mãi lấy đi nỗi đau đó từ các nhà phát triển.