Hello.

I am Paul Kinlan.

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

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

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

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.

Registering as a Share Target with the Web Share Target API

Paul Kinlan

Pete LePage memperkenalkan API Target Berbagi Web dan ketersediaan di Chrome melalui uji coba asal

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 ini adalah pengubah permainan di web, membuka web hingga sesuatu yang hanya pernah tersedia untuk aplikasi asli: Berbagi Asli. Aplikasi adalah silo, mereka menyedot semua data dan membuatnya sulit diakses di seluruh platform. Target Share mulai meratakan lapangan bermain sehingga web dapat bermain di game yang sama.

Pengalaman Twitter Mobile memiliki Target Target already enabled . Posting ini dibuat dengan menggunakan Target Target yang saya tentukan di manifest.json panel admin 'situs saya - itu bekerja dengan cukup baik, dan begitu mereka mendapatkan dukungan file saya akan dapat memposting gambar atau gumpalan pada perangkat saya ke blog saya.

Waktu yang sangat menyenangkan.

Baca pos tertaut untuk mempelajari lebih lanjut tentang garis waktu kapan API ini ditayangkan dan bagaimana menggunakan API.

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

Paul Kinlan

Artikel, video, dan contoh hebat oleh Thomas Steiner tentang pemberitahuan push yang bagus di 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 .

Web Push adalah API yang luar biasa kuat, tetapi mudah untuk menyalahgunakan dan mengganggu pengguna Anda. Hal buruk untuk situs Anda adalah jika pengguna memblokir pemberitahuan karena Anda meminta tanpa peringatan, maka Anda tidak mendapatkan kesempatan untuk bertanya lagi.

Perlakukan pengguna Anda dengan hormat, Konteks adalah raja untuk pemberitahuan Push Web.

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

Paul Kinlan

Kayce Basques, seorang penulis teknologi yang luar biasa di tim kami menulis artikel yang cukup menakjubkan tentang pengalamannya mengukur seberapa baik praktik terbaik dokumentasi yang ada untuk menjelaskan materi teknis. Praktik terbaik dalam hal ini bisa menjadi standar industri yang terkenal untuk penulisan teknis, atau bisa juga panduan gaya penulisan perusahaan Anda sendiri. Coba lihat!

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 .

Sementara saya bukan seorang penulis teknologi, peran saya melibatkan sejumlah besar keterlibatan dengan tim penulis teknologi kami dan juga menerbitkan banyak 'praktik terbaik' untuk pengembang sendiri. Saya kagum dengan seberapa dalam dan penelitian Kayce telah dilakukan pada seni menulis dokumen modern melalui lensa konten tim kami. Saya sepenuhnya mendorong Anda untuk membaca artikel Kayce secara mendalam - saya belajar banyak. Kayce terima kasih!

Grep your git commit log

Paul Kinlan

Finding code that was changed in a commit

Read More

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

Paul Kinlan

Saya berada di China beberapa minggu yang lalu untuk Hari Pengembang Google dan saya menunjukkan kepada semua orang [QRCode scanner] saya (0), itu berfungsi dengan baik sampai saya offline. Ketika pengguna offline (atau sebagian terhubung) kamera tidak akan mulai, yang berarti Anda tidak bisa mengambil kode QR. Saya butuh waktu lama untuk mengetahui apa yang terjadi, dan ternyata saya keliru memulai kamera di acara onload dan permintaan Google Analytics akan hang dan tidak selesai tepat waktu. Itu ini berkomitmen yang memperbaikinya.

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. How long is that certain period of time?

It’s 1 minute and 20 seconds.

If you have any render-blocking, critical, third party assets hosted on an external domain, you run the risk of showing users a blank page for 1.3 minutes.

Below, you’ll see the DOMContentLoaded and Load events on a site that has a render-blocking script hosted elsewhere. The browser was completely held up for 78 seconds, showing nothing at all until it ended up timing out.

Baca pos lengkap.

Saya mendorong Anda untuk membaca pos karena ada banyak wawasan luar biasa.

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

Paul Kinlan

Pada akhir pekan saya bermain-main dengan pembuat enkoder video Boomerang, Anda dapat membuatnya bekerja hampir secara langsung (akan saya jelaskan nanti). Saya membuatnya bekerja di Chrome di Desktop, tetapi tidak akan berfungsi dengan baik di Chrome pada Android. Lihat kode di sini.

Sepertinya ketika Anda menggunakan captureStream () pada <canvas>yang memiliki resolusi yang relatif besar (1280x720 dalam kasus saya) API MediaRecorder tidak akan dapat menyandikan video dan itu tidak akan salah dan Anda tidak dapat mendeteksi bahwa itu tidak dapat menyandikan video sebelumnya.

(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). In generall I would expect all frames sent to the canvas to be processed by the MediaRecorder API - yet they are not.

What happens instead?

It only captures the stream from the canvas for a partial part of the video and then stops. It’s not predicatable where it will stop.

I suspect there is a limit with the MediaRecorder API and what resolution it can encode depending on the device, and there is no way to know about these limits ahead of time.

As far as I can tell this has never worked on Android. If you use https://boomerang-video-chrome-on-android-bug.glitch.me which has a 640x480 video frame it records just fine. The demo works at higher-resolution just fine on desktop.

Baca pos lengkap.

Jika Anda ingin bermain-main dengan demo yang berfungsi pada keduanya, maka klik di sini

Why Microsoft and Google love progressive web apps | Computerworld

Paul Kinlan

Posting yang bagus tentang PWA dari Mike Elgan. Saya tidak yakin tentang tujuan Microsoft dengan PWA, tapi saya pikir kami cukup sederhana: kami ingin pengguna memiliki akses ke konten dan fungsi secara instan dan dengan cara yang mereka harapkan dapat berinteraksi dengannya di perangkat mereka. Web harus menjangkau semua orang di setiap perangkat yang terhubung dan pengguna harus dapat mengakses modalitas yang mereka sukai, sebagai aplikasi jika itu yang mereka harapkan (seluler, mungkin), atau suara pada asisten, dll.

Kami masih jauh dari web tanpa kepala, namun, satu hal yang benar-benar mengejutkan saya di artikel:

Another downside is that PWAs are highly isolated. So it’s hard and unlikely for different PWAs to share resources or data directly.

Baca pos lengkap.

Situs dan aplikasi di web tidak seharusnya diisolasi, web adalah dapat ditautkan, diindeks, sementara, tetapi kami semakin terdiam dengan setiap situs yang kami buat. Kami menciptakan silo yang tidak diinginkan karena platform tidak mudah memungkinkan pengguna untuk mendapatkan * data * mereka keluar masuk dengan mudah. Saya tidak berbicara tentang RDF atau sesuatu seperti itu, operasi dasar seperti salin dan tempel, seret dan lepas, bagikan ke situs dan bagikan dari situs rusak di web hari ini, dan itu sebelum kita sampai ke IPC antar bingkai, pekerja dan jendela.