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

Saya diberitahu bahwa lebih khusus bahwa ini adalah 'Yaezakura'

Read More

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

Paul Kinlan

Posting ini merupakan kelanjutan dari posting tentang debugging KaiOS device with Web IDE , tetapi alih-alih menggunakan macOS, Anda sekarang dapat menggunakan Chrome OS (m75) dengan Crostini. Saya KaiOS Environment Setup dari KaiOS Environment Setup yang merupakan awal yang baik, tetapi tidak cukup untuk menjalankan Chrome OS dan Crostini. Di bawah ini adalah panduan kasar yang saya ikuti. Pastikan Anda menggunakan setidaknya Chrome OS m75 (saat ini saluran dev pada 15 April), lalu:

Read More

New WebKit Features in Safari 12.1 | WebKit

Paul Kinlan

Pembaruan besar untuk Safari terbaru!

Saya pikir ini adalah pengumuman yang sangat besar, dan kebalikan dari Google yang beberapa waktu lalu mengatakan bahwa Google Pay Lib adalah cara yang disarankan untuk menerapkan pembayaran … Maksud saya, ini tidak jauh dari jutaan, Google Pay dibangun di atas Permintaan Pembayaran, tetapi ini bukan PR terlebih dahulu.

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

Read full post .

Dan fitur favorit saya diberikan sejarah saya dengan 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.

Sekarang hanya untuk mendapatkan API Target Saham dan kami menuju ke pemenang! :)

Offline fallback page with service worker

Paul Kinlan

Bertahun-tahun yang lalu, saya melakukan riset tentang bagaimana aplikasi asli merespons kurangnya konektivitas jaringan. Sementara saya kehilangan tautan ke analisis (saya yakin itu ada di Google+), narasi menyeluruhnya adalah bahwa banyak aplikasi asli terkait dengan internet yang tidak dapat dipisahkan dari apa yang mereka tolak menolak untuk berfungsi. Kedengarannya seperti banyak aplikasi web, hal yang membedakannya dari web adalah bahwa pengalaman itu masih 'on-brand', Bart Simpson akan memberi tahu Anda bahwa Anda harus online (misalnya), namun untuk sebagian besar pengalaman web Anda mendapatkan 'Dino' (lihat chrome: // dino).

Kami telah bekerja pada Pekerja Layanan untuk waktu yang lama sekarang, dan sementara kami melihat semakin banyak situs memiliki halaman yang dikontrol oleh Pekerja Layanan, sebagian besar situs bahkan tidak memiliki pengalaman dasar mundur ketika jaringan tidak tersedia.

Saya bertanya kepada teman baik saya, Jake, apakah kami memiliki petunjuk tentang cara membuat halaman cadangan umum dengan asumsi bahwa Anda tidak ingin membuat pengalaman yang sepenuhnya offline-pertama, dan dalam 10 menit dia telah membuatnya. Check it out .

Untuk singkatnya, saya telah menempelkan kode di bawah karena panjangnya hanya sekitar 20 baris. Itu cache aset offline, dan kemudian untuk setiap pengambilan yang merupakan 'navigasi' mengambil itu akan melihat apakah itu kesalahan (karena jaringan) dan kemudian membuat halaman offline di tempat konten asli.

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;
    }
  }());
});

Itu semuanya. Ketika pengguna sedang online mereka akan melihat pengalaman default.

Dan ketika pengguna sedang offline, mereka akan mendapatkan halaman fallback.

Saya menemukan skrip sederhana ini sangat kuat, dan ya, sementara itu masih dapat ditingkatkan, saya percaya bahwa bahkan hanya perubahan sederhana dalam cara kami berbicara kepada pengguna kami ketika ada masalah dengan jaringan memiliki kemampuan untuk secara fundamental meningkatkan persepsi web untuk pengguna di seluruh dunia.

Pembaruan ** ** Jeffrey Posnick kinldy mengingatkan saya tentang penggunaan Navigasi Preload agar tidak harus menunggu boot SW untuk semua permintaan, ini sangat penting jika Anda hanya mengendalikan permintaan jaringan failed.

testing block image upload

Paul Kinlan

Ini hanya tes untuk melihat apakah saya dapat mengunggah gambar dengan benar. Jika Anda melihat ini, maka ya saya lakukan :)

Read More

Editor.js

Paul Kinlan

Saya telah memperbarui oleh editor berbasis Hugo untuk mencoba dan menggunakan EditorJS juga, editor untuk 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 .

Saya pikir itu berhasil.

Saya sedikit kesulitan dengan basis kode, contohnya semua menggunakan Modul ES, namun NPM dist semua output dalam kode II5 ES5. Tapi begitu saya mengatasi rintangan itu, cukup mudah untuk membangun UI yang terlihat lebih seperti medium.

Debugging Web Pages on the Nokia 8110 with KaiOS

Paul Kinlan

Kami telah melakukan banyak pengembangan pada ponsel fitur baru-baru ini dan itu sulit, tetapi menyenangkan. Bagian tersulitnya adalah bahwa pada KaiOS kami merasa tidak mungkin untuk men-debug halaman web, terutama pada perangkat keras yang kami miliki (Nokia 8110). Nokia adalah perangkat yang hebat, dibangun dengan KaiOS yang kami tahu didasarkan pada sesuatu yang mirip dengan Firefox 48, tetapi terkunci, tidak ada mode pengembang tradisional seperti yang Anda dapatkan di perangkat Android lainnya, yang berarti Anda tidak dapat menghubungkan Firefox WebIDE dengan mudah.

Read More

Object Detection and Augmentation

Paul Kinlan

Saya telah sering bermain-main dengan Shape Detection API di Chrome dan saya sangat suka potensi yang dimilikinya, misalnya QRCode detector sangat sederhana yang saya tulis dulu memiliki polyfill JS, tetapi menggunakan new BarcodeDetector() API jika tersedia.

Anda dapat melihat beberapa demo lain yang saya buat di sini menggunakan kemampuan lain dari deteksi bentuk API: Face Detection , Barcode Detection dan Text Detection .

Saya terkejut ketika saya menemukan Jeeliz di akhir pekan dan saya sangat terkesan dengan kinerja toolkit mereka - memang saya menggunakan Pixel3 XL, tetapi deteksi wajah tampak jauh lebih cepat dari yang mungkin terjadi dengan FaceDetector API.

Checkout some of their demos .

Itu membuat saya banyak berpikir. Toolkit ini untuk Deteksi Objek (dan yang seperti itu) menggunakan API yang tersedia secara luas di Web khusus akses Kamera, WebGL dan WASM, yang tidak seperti API Deteksi Bentuk Chrome (yang hanya di Chrome dan tidak konsisten di semua platform yang diaktifkan Chrome ) dapat digunakan untuk membangun pengalaman yang kaya dengan mudah dan menjangkau miliaran pengguna dengan pengalaman yang konsisten di semua platform.

Augmentasi adalah hal yang menarik (dan benar-benar apa yang ingin saya pamerkan di pos ini) dan di mana Anda memerlukan pustaka middleware yang sekarang datang ke platform, kita dapat membangun aplikasi filter wajah snapchat-esque yang asyik tanpa pengguna memasang aplikasi MASSIVE yang memanen sejumlah besar data dari perangkat pengguna (karena tidak ada akses mendasar ke sistem).

Di luar demo yang menyenangkan, dimungkinkan untuk menyelesaikan kasus penggunaan yang sangat canggih dengan cepat dan sederhana untuk pengguna, seperti:

  • Pemilihan Teks langsung dari kamera atau foto dari pengguna
  • Terjemahan langsung bahasa dari kamera
  • Deteksi QRCode sebaris sehingga orang tidak harus membuka WeChat sepanjang waktu :)
  • Ekstrak URL situs web atau alamat dari suatu gambar
  • Deteksi kartu kredit dan ekstraksi nomor (membuat pengguna mendaftar ke situs Anda lebih cepat)
  • Pencarian produk visual di aplikasi web toko Anda.
  • Pencarian barcode untuk lebih detail produk di aplikasi web toko Anda.
  • Pemotongan cepat foto profil ke wajah orang.
  • Fitur A11Y sederhana untuk memungkinkan pengguna mendengar teks yang ditemukan dalam gambar.

Saya hanya menghabiskan 5 menit untuk memikirkan kasus penggunaan ini - saya tahu ada lebih banyak - tetapi saya sadar bahwa kita tidak melihat banyak situs atau aplikasi web menggunakan kamera, malah kita melihat banyak situs bertanya pengguna untuk mengunduh aplikasi, dan saya pikir kita tidak perlu melakukan itu lagi.

** Perbarui ** Thomas Steiner di tim kami yang disebutkan dalam Obrolan tim kami bahwa sepertinya saya tidak suka API ShapeDetection saat ini. Saya suka fakta bahwa API ini memberi kami akses ke implementasi pengiriman asli dari masing-masing sistem, namun seperti yang saya tulis di The Lumpy Web , Pengembang Web menginginkan konsistensi dalam platform dan ada sejumlah masalah dengan Shape Detection API yang dapat diringkas sebagai:

  1. API hanya di Chrome
  2. API di Chrome sangat berbeda di setiap platform karena implementasi yang mendasarinya berbeda. Android hanya memiliki poin untuk tengara seperti mulut dan mata, di mana macOS memiliki garis besar. Di Android, TextDetector mengembalikan teks yang terdeteksi, sedangkan pada macOS ia mengembalikan indikator 'Text Presence' … Ini belum lagi semua bug yang ditemukan Surma.

Web sebagai platform untuk distribusi sangat masuk akal untuk pengalaman seperti ini sehingga saya pikir tidak ada gunanya bagi kita untuk tidak melakukannya, tetapi dua kelompok masalah di atas membuat saya mempertanyakan kebutuhan jangka panjang untuk mengimplementasikan setiap fitur pada platform web secara asli, ketika kita dapat mengimplementasikan solusi yang baik dalam sebuah paket yang dikirimkan menggunakan fitur-fitur platform saat ini seperti WebGL, WASM dan di GPU Web masa depan.

Lagi pula, saya suka fakta bahwa kita bisa melakukan ini di web dan saya melihat ke depan untuk melihat situs yang disertakan bersama mereka.

Got web performance problems? Just wait...

Paul Kinlan

Saya melihat tweet dari teman dan kolega yang baik, Mariko , tentang pengujian pada serangkaian perangkat kelas bawah yang membuat Anda tetap Mariko tanah.

Konteks dari tweet ini adalah kita melihat seperti apa Pengembangan Web ketika membangun untuk pengguna yang hidup setiap hari di kelas perangkat ini.

Tim sedang melakukan banyak pekerjaan sekarang di ruang ini, tetapi saya menghabiskan satu hari membangun situs dan itu sangat sulit untuk membuat sesuatu bekerja pada tingkat kinerja yang bahkan sedikit masuk akal - berikut adalah beberapa masalah yang saya hadapi:

  • Keanehan tampilan, dan pengenalan misterius 300ms klik-tunda (dapat bekerja di sekitar).
  • Repaints besar seluruh layar, dan lambat.
  • Jaringan lambat
  • Memori terbatas, dan GC berikutnya mengunci utas selama beberapa detik
  • Sangat lambat eksekusi JS
  • Manipulasi DOM lambat

Untuk banyak halaman yang sedang saya bangun, bahkan pada koneksi wifi yang cepat, halaman butuh beberapa detik untuk memuat, dan interaksi selanjutnya sangat lambat. Itu sulit, itu melibatkan mencoba untuk mendapatkan sebanyak mungkin dari utas utama, tetapi juga sangat memuaskan pada tingkat teknis untuk melihat perubahan dalam algoritma dan logika yang saya tidak akan lakukan untuk semua pengembangan web tradisional saya, hasil peningkatan besar dalam kinerja.

Saya tidak yakin apa yang harus dilakukan dalam jangka panjang, saya curiga sejumlah besar pengembang yang bekerja sama dengan kami di pasar yang lebih maju akan memiliki reaksi 'Saya tidak membangun situs untuk pengguna di [masukkan negara x]', dan pada tingkat tinggi sulit untuk memperdebatkan pernyataan ini, tetapi saya tidak dapat mengabaikan fakta bahwa 10 dari jutaan pengguna baru datang ke komputasi setiap tahun dan mereka akan menggunakan perangkat ini dan kami ingin web menjadi * platform * pilihan untuk konten dan aplikasi agar kita tidak senang dengan rise of the meta platform .

Kita harus terus mendorong kinerja untuk waktu yang lama. Kami akan terus membuat alat dan panduan untuk membantu pengembang memuat dengan cepat dan memiliki antarmuka pengguna yang lancar :)

Browser Bug Searcher

Paul Kinlan

Saya hanya merenungkan beberapa work our team has done dan saya menemukan proyek dari 2017 yang dibuat oleh Robert Nyman dan Eric Bidelman. Browser Bug Searcher! .

Sungguh luar biasa bahwa hanya dengan beberapa penekanan tombol, Anda memiliki gambaran hebat fitur favorit Anda di semua mesin browser utama.

Source code available .

Ini sebenarnya menyoroti salah satu masalah yang saya miliki dengan pelacak bug crbug dan webkit, mereka tidak memiliki cara sederhana untuk mendapatkan umpan data dalam format seperti RSS. Saya ingin dapat menggunakan agregator topicdeck saya dengan kategori bug dll. Jadi saya memiliki dashboard semua hal yang saya tertarik berdasarkan informasi terbaru dari masing-masing pelacak bug.

Github's Web Components

Paul Kinlan

Saya sedang mencari editor penurunan harga cepat di https://www.webcomponents.org/ sehingga saya dapat membuat posting ke blog ini lebih mudah dan saya menemukan serangkaian komponen oleh github .

Saya tahu bahwa mereka memiliki <time-element> tetapi saya tidak tahu mereka memiliki seperangkat elemen berguna yang bagus dan sederhana.

London from Kingscross

The GDPR mess

Paul Kinlan

Cara kami (sebagai industri) menerapkan persetujuan GDPR sangat berantakan. Saya tidak yakin mengapa ada orang yang memilih selain 'Hanya menggunakan cookie yang diperlukan', namun saya benar-benar tidak dapat membedakan antara opsi dan trade-off dari salah satu pilihan, belum lagi saya dapat memverifikasi bahwa itu hanya hanya menggunakan cookie yang diperlukan.

Read More

Brexit: History will judge us all

Paul Kinlan

Sejarah akan menilai kita semua dalam kekacauan ini, dan saya berharap ini akan menjadi studi kasus untuk semua tentang efek nasionalisme, kepentingan diri sendiri, kolonialisme-hubris, selebriti-bafoonery.

Bajingan.

File Web Share Target

Paul Kinlan

Saya sering mengatakan bahwa agar aplikasi web bersaing secara efektif di dunia aplikasi, mereka perlu diintegrasikan ke semua tempat yang diinginkan pengguna. Komunikasi antar-aplikasi adalah salah satu bagian utama yang hilang dari platform web, dan khususnya salah satu fitur utama yang hilang terakhir adalah berbagi tingkat asli: Aplikasi web harus bisa mendapatkan data out of their silo dan masuk ke situs web dan aplikasi lain; mereka juga harus dapat menerima data dari aplikasi dan situs asli lainnya.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Ini menguji berbagi langsung dari aplikasi kamera. Sepertinya berhasil :)

Read More

testing-file-share-target

Paul Kinlan

Ini adalah pengujian API Target Saham di Android dan kemampuannya berbagi file. Jika Anda melihat sesuatu di sini, maka semuanya baik-baik saja :)

Read More

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

Paul Kinlan

Ricky Mondello di tim Safari baru-baru ini membagikan catatan tentang bagaimana Twitter menggunakan spesifikasi ./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 .

Fitur ini benar-benar melewati saya, tetapi ini adalah ide yang rapi: diberikan file di lokasi yang terkenal, dapatkah browser menawarkan UI kepada pengguna yang memungkinkan mereka untuk dengan cepat mengatur ulang kata sandi mereka tanpa harus menavigasi situs UI yang kompleks ..

Spesifikasinya tampak sederhana: file terkenal hanya berisi URL untuk mengarahkan pengguna ketika mereka ingin melakukan tindakan. Ini membuat saya berpikir, dapatkah kami menawarkan lebih banyak fitur ini:

  • Lokasi terkenal untuk model persetujuan berbasis GDPR (izin cookie) - pemilik situs dapat menawarkan tautan ke halaman tempat pengguna dapat mengelola dan berpotensi mencabut semua cookie dan item persetujuan data lainnya.
  • Lokasi yang terkenal untuk manajemen izin browser - pemilik situs dapat menawarkan tempat cepat bagi pengguna untuk dapat mencabut izin untuk hal-hal seperti lokasi geografis, pemberitahuan dan primitif lainnya.
  • Jalur yang terkenal untuk penghapusan dan perubahan akun
  • Jalur yang terkenal untuk manajemen berlangganan milis

Daftar ini terus berjalan …. Saya sangat menyukai ide untuk file pengalihan sederhana untuk membantu pengguna menemukan tindakan umum pengguna, dan untuk cara browser memunculkannya.

pinch-zoom-element

Paul Kinlan

Jake dan tim membangun elemen kustom yang agak luar biasa ini untuk mengelola pinch zooming pada set HTML apa pun di luar dinamika pinch-zoom browser sendiri (pikirkan zoom mobile viewport). Elemen itu adalah salah satu komponen utama yang kami butuhkan untuk aplikasi squoosh yang kami buat dan rilis di Chrome Dev Summit (… Saya katakan 'dirilis di Chrome Dev Summit' - Jake menunjukkannya kepada semua orang di China Google Developer Day. meskipun anggota tim lainnya berada di bawah embargo;) …)

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

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

Read full post .

Saya baru saja menambahkannya ke blog saya (hanya butuh beberapa menit), Anda dapat memeriksanya di bagian ' life ' tempat saya berbagi foto yang telah saya ambil. Jika Anda menggunakan perangkat yang mendukung sentuhan, Anda dapat dengan cepat mencubit-zoom pada elemen, jika Anda menggunakan track-pad yang dapat menangani beberapa input jari yang berfungsi juga.

Elemen ini adalah contoh yang bagus mengapa saya suka komponen web sebagai model untuk membuat komponen antarmuka pengguna. Elemen pinch-zoom tepat di bawah 3kb pada kabel (tidak terkompresi) dan dependensi minimal untuk membangun dan itu hanya melakukan satu pekerjaan dengan sangat baik, tanpa mengikat setiap logika tingkat aplikasi kustom yang akan membuatnya sulit untuk digunakan (saya punya beberapa pemikiran tentang logika UI vs komponen logika aplikasi yang akan saya bagikan berdasarkan pembelajaran saya dari aplikasi Squoosh).

Saya akan senang melihat elemen seperti ini mendapatkan lebih banyak kesadaran dan penggunaan, misalnya saya bisa membayangkan bahwa elemen ini dapat menggantikan atau membakukan fungsi zoom gambar yang Anda lihat di banyak situs perdagangan dan selamanya menghilangkan rasa sakit dari pengembang.