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

Мне сказали, что более конкретно, что это «Yaezakura»

Read More

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

Paul Kinlan

Этот пост является продолжением поста об отладке KaiOS device with Web IDE , но вместо macOS теперь можно использовать Chrome OS (m75) с Crostini. Я пишу с KaiOS Environment Setup который является хорошим началом, но этого недостаточно для начала работы с Chrome OS и Crostini. Ниже приведено грубое руководство, которому я следовал. Убедитесь, что вы используете хотя бы Chrome OS m75 (в настоящее время канал разработки по состоянию на 15 апреля), а затем:

Read More

New WebKit Features in Safari 12.1 | WebKit

Paul Kinlan

Большие обновления для последней версии Safari!

Я думал, что это было довольно громкое объявление, и противоположность Google, который некоторое время назад сказал, что Google Pay Lib - это рекомендуемый способ осуществления платежей … Я имею в виду, что это не за миллион миль, Google Pay построен на вершине запроса на оплату, но это не 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.

Теперь просто получить API Share Target, и мы находимся на пути к победителю! :)

Offline fallback page with service worker

Paul Kinlan

Несколько лет назад я провел некоторое исследование того, как нативные приложения реагируют на отсутствие сетевого подключения. Хотя я потерял ссылку на анализ (могу поклясться, что это было в Google+), всеобъемлющим повествованием было то, что многие нативные приложения неразрывно связаны с Интернетом, и они просто отказываются работать. Похоже, что многие веб-приложения отличаются от веба тем, что этот опыт все еще остается «фирменным», Барт Симпсон скажет вам, что вам нужно быть онлайн (например), и все же для В подавляющем большинстве случаев вы получаете «Dino» (см. chrome: // dino).

Мы работаем над Service Worker в течение долгого времени, и, хотя мы видим, что все больше и больше сайтов имеют страницы, контролируемые Service Worker, подавляющее большинство сайтов даже не имеют базового запасного варианта, когда сеть не работает. имеется в наличии.

Я спросил моего хорошего друга Джейка, есть ли у нас какие-либо рекомендации о том, как создать общую резервную страницу, исходя из предположения, что вы не хотите создавать полностью автономный первый опыт, и в течение 10 минут он его создал. 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.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;
    }
  }());
});

Это все. Когда пользователь в сети, он увидит опыт по умолчанию.

А когда пользователь не в сети, он получит запасную страницу.

Я считаю этот простой сценарий невероятно мощным, и да, хотя его еще можно улучшить, я верю, что даже простое изменение в том, как мы говорим с нашими пользователями, когда есть проблема с сетью, способно существенно улучшить восприятие Интернета для пользователей по всему миру.

** Обновление ** Jeffrey Posnick kinldy напомнил мне об использовании предварительной загрузки Navigation для того, чтобы не нужно было ждать загрузки SW для всех запросов, это особенно важно, если вы управляете только failed сетевыми запросами.

testing block image upload

Paul Kinlan

Это всего лишь тест, чтобы увидеть, правильно ли я загрузил изображение. Если вы видите это, то да, я сделал :)

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-дистрибутив выводится в коде IIFE ES5. Но как только я преодолел это препятствие, стало довольно легко создать пользовательский интерфейс, который больше похож на средний.

Debugging Web Pages on the Nokia 8110 with KaiOS

Paul Kinlan

В последнее время мы много работали над функциональными телефонами, и это было сложно, но весело. Самое сложное в том, что на KaiOS мы обнаружили, что невозможно отлаживать веб-страницы, особенно на имеющемся у нас оборудовании (Nokia 8110). Nokia - отличное устройство, оно построено на KaiOS, которое, как мы знаем, основано на чем-то похожем на Firefox 48, но оно заблокировано, нет традиционного режима разработчика, как на других устройствах Android, что означает, что вы не можете подключить Firefox.

Read More

Object Detection and Augmentation

Paul Kinlan

Я много играл с Shape Detection API в Chrome, и мне очень нравится его потенциал, например, очень простой QRCode detector я написал давным-давно, имеет полизаполнение JS, но использует new BarcodeDetector() API, если он доступен.

Вы можете увидеть некоторые другие демонстрации, которые я построил здесь, используя другие возможности API обнаружения формы: Face Detection , Barcode Detection и Text Detection .

Я был приятно удивлен, когда наткнулся на Jeeliz на выходных и был невероятно впечатлен производительностью их инструментария - разумеется, я использовал Pixel3 XL, но обнаружение лиц казалось значительно быстрее, чем это возможно с API FaceDetector .

Checkout some of their demos .

Это заставило меня много думать. Этот инструментарий для обнаружения объектов (и подобных ему) использует API-интерфейсы, которые широко доступны в Интернете, в частности доступ к камере, WebGL и WASM, что в отличие от Chrome Shape Detection API (которое имеется только в Chrome и не совместимо на всех платформах, на которых работает Chrome). ) можно легко использовать для создания богатого опыта и охвата миллиардов пользователей с единообразным опытом на всех платформах.

Расширение - это то, где это становится интересным (и действительно то, что я хотел показать в этом посте), и где вам нужны библиотеки промежуточного программного обеспечения, которые сейчас выходят на платформу, мы можем создавать забавные приложения для настройки лица в стиле Snapchat, не заставляя пользователей устанавливать MASSIVE приложения которые собирают огромное количество данных с устройства пользователя (потому что нет доступа к системе).

Помимо забавных демонстраций, можно быстро и просто решить очень сложные варианты использования, такие как:

  • Выбор текста прямо с камеры или фото от пользователя
  • Живой перевод языков с камеры
  • Встроенное обнаружение QRCode, чтобы людям не приходилось постоянно открывать WeChat :)
  • Автоматическое извлечение URL сайта или адреса из изображения
  • Обнаружение кредитной карты и извлечение номера (чтобы пользователи быстрее регистрировались на вашем сайте)
  • Визуальный поиск товаров в веб-приложении вашего магазина.
  • Поиск штрих-кода для получения дополнительной информации о продукте в веб-приложении вашего магазина.
  • Быстрая обрезка фотографий профиля на лицах людей.
  • Простые функции A11Y, позволяющие пользователю услышать текст, найденный на изображениях.

Я просто потратил 5 минут на обдумывание этих вариантов использования - я знаю, что их гораздо больше - но меня поразило, что мы не видим много сайтов или веб-приложений, использующих камеру, вместо этого мы видим, что многие сайты спрашивают их пользователи загружают приложение, и я не думаю, что нам нужно больше это делать.

** Обновление ** Томас Штайнер в нашей команде упомянул в ShapeDetection нашей команды, что, похоже, мне не нравится текущий API ShapeDetection . Мне нравится тот факт, что этот API дает нам доступ к собственным реализациям доставки каждой из соответствующих систем, однако, как я писал в The Lumpy Web , веб-разработчики жаждут согласованности в платформе, и с API Shape Detection существует ряд проблем, которые могут быть обобщено как:

  1. API есть только в Chrome
  2. API в Chrome сильно отличается на всех платформах, потому что их базовые реализации различны. Android имеет только точки для таких ориентиров, как рот и глаза, где у macOS есть контуры. В Android TextDetector возвращает обнаруженный текст, в то время как в macOS он возвращает индикатор «Text Presence» … Это не говоря уже о всех ошибках, обнаруженных Surma.

Сеть как платформа для распространения имеет такой смысл для такого опыта, что я думаю, что было бы упущением с нашей стороны не делать этого, но две вышеупомянутые группы вопросов заставляют меня усомниться в долгосрочной необходимости реализации каждой функции на веб-платформа изначально, когда мы могли бы реализовать хорошие решения в пакете, который поставляется с использованием функций платформы сегодня, таких как WebGL, WASM и в будущем Web GPU.

В любом случае, мне нравится тот факт, что мы можем сделать это в Интернете, и я с нетерпением жду возможности увидеть, что сайты будут с ними.

Got web performance problems? Just wait...

Paul Kinlan

Я видел твит от хорошего Mariko и коллеги, Mariko , о тестировании на линейке бюджетных устройств, которые держат вас в курсе.

Контекст твита заключается в том, что мы смотрим на то, на что похожа веб-разработка при создании для пользователей, которые ежедневно живут на этих классах устройств.

Сейчас команда проделывает большую работу в этом пространстве, но я потратил целый день на то, чтобы создать сайт, и было невероятно сложно заставить что-либо работать даже при слегка приемлемом уровне производительности - вот некоторые из проблем, с которыми я столкнулся:

  • Странности видового экрана и таинственное повторное введение 300-миллисекундной задержки нажатия (можно обойти).
  • Огромные перекраски всего экрана, и это медленно.
  • Сеть медленная
  • Память ограничена, и последующие GC блокируют основной поток на несколько секунд
  • Невероятно медленное выполнение JS
  • DOM манипуляция медленная

Для многих страниц, которые я создавал, даже на страницах с быстрым Wi-Fi-соединением для загрузки требовалось несколько секунд, а последующие взаимодействия были просто медленными. Это было тяжело, требовалось попытаться получить как можно больше от основного потока, но на техническом уровне было также невероятно приятно видеть изменения в алгоритмах и логике, которые я бы не сделал для всей своей традиционной веб-разработки. большие улучшения в производительности.

Я не уверен, что делать в долгосрочной перспективе, я подозреваю, что у огромного числа разработчиков, с которыми мы работаем на более развитых рынках, будет реакция «Я не создаю сайты для пользователей в [вставить страну x]», и на на высоком уровне трудно поспорить с этим утверждением, но я не могу игнорировать тот факт, что десятки миллионов новых пользователей приходят на компьютер каждый год, и они будут использовать эти устройства, и мы хотим, чтобы Интернет был * * платформой Выбор контента и приложений, чтобы мы не были довольны rise of the meta platform .

Нам нужно продолжать повышать производительность в течение долгого времени. Мы будем продолжать создавать инструменты и руководства, чтобы помочь разработчикам быстро загружаться и иметь плавные пользовательские интерфейсы :)

Browser Bug Searcher

Paul Kinlan

Я только размышлял над некоторыми из work our team has done и нашел проект 2017 года, который создали Роберт Найман и Эрик Бидельман. Browser Bug Searcher! .

Невероятно, что с помощью всего нескольких нажатий клавиш у вас есть отличный обзор ваших любимых функций во всех основных браузерных движках.

Source code available .

Это фактически выдвигает на первый план одну из проблем, с которыми я сталкиваюсь с трекерами ошибок crbug и webkit: у них нет простого способа получать потоки данных в таких форматах, как RSS. Я хотел бы иметь возможность использовать мой агрегатор topicdeck с категориями ошибок и т. Д., Поэтому у меня есть панель со всеми интересующими меня вещами, основанная на последней информации от каждого из трекеров ошибок.

Github's Web Components

Paul Kinlan

Я искал быстрый редактор https://www.webcomponents.org/ на https://www.webcomponents.org/ чтобы я мог упростить публикацию в этом блоге, и я наткнулся на аккуратный набор компонентов github .

Я знал, что у них были <time-element> но я не знал, что у них был такой хороший и простой набор полезных элементов.

London from Kingscross

Paul Kinlan

Выглядит неплохо сегодня.

Read More

The GDPR mess

Paul Kinlan

То, как мы (как отрасль) реализуем согласие GDPR, - беспорядок. Я не уверен, почему кто-то выбрал бы что-либо, кроме «Использовать только необходимые файлы cookie», однако я действительно не могу определить разницу между любым из вариантов и компромиссом между обоими вариантами, не говоря уже о том, что я могу убедиться, что это только используя только необходимые куки.

Read More

Brexit: History will judge us all

Paul Kinlan

История рассудит нас всех по этому беспорядку, и я надеюсь, что это будет тематическое исследование для всех о влиянии национализма, личных интересов, колониального высокомерия, знаменитостей и шуток.

Fuckers.

File Web Share Target

Paul Kinlan

Я часто говорил, что для того, чтобы веб-приложения эффективно конкурировали в мире приложений, они должны быть интегрированы во все места, где пользователи ожидают, что приложения будут. Обмен данными между приложениями является одной из основных недостающих частей веб-платформы, и, в частности, одной из последних основных отсутствующих функций является общий data out of their silo на уровне: веб-приложения должны иметь возможность получать data out of their silo и data out of their silo в другие веб-сайты и приложения; они также должны иметь возможность получать данные из других собственных приложений и сайтов.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Это тестирование обмена непосредственно из приложения камеры. Похоже, это сработало :)

Read More

testing-file-share-target

Paul Kinlan

Это тест API Target Share на Android и его способность обмениваться файлами. Если вы видите что-то здесь, то все хорошо :)

Read More

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

Paul Kinlan

Рики Монделло из команды Safari недавно поделился заметкой о том, как 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 .

Эта особенность полностью прошла мимо меня, но это хорошая идея: если файл находится в известном месте, может ли браузер предложить пользователю пользовательский интерфейс, который позволяет им быстро сбросить пароль без необходимости навигации по сложному пользовательскому интерфейсу сайтов.

Спецификация обманчиво проста: известный файл просто содержит URL-адрес, по которому пользователь может указать, когда он хочет выполнить действие. Это заставило меня задуматься, можем ли мы предложить больше этих функций:

  • Хорошо известное местоположение для моделей согласия на основе GDPR (согласие cookie) - владельцы сайтов могут предлагать ссылку на страницу, где пользователь может управлять и потенциально отзывать все файлы cookie и другие элементы согласия на получение данных.
  • Хорошо известное место для управления разрешениями браузера - владельцы сайтов могут предложить пользователям быстрое место для отзыва прав доступа к таким вещам, как геолокация, уведомления и другие примитивы.
  • Хорошо известный путь для удаления учетной записи и изменений
  • Хорошо известный путь для управления подпиской на рассылку

Этот список можно продолжить …. Мне очень нравится идея простых файлов перенаправления, чтобы помочь пользователям обнаружить общие действия пользователя, и для браузера.

pinch-zoom-element

Paul Kinlan

Джейк и его команда создали этот довольно удивительный пользовательский элемент для управления масштабированием пинча в любом наборе HTML, за исключением собственной динамики масштабирования в браузере (например, масштабирование в мобильной области просмотра). Этот элемент был одним из центральных компонентов, которые нам нужны для приложения squoosh , которое мы создали и выпустили на Chrome Dev Summit (… я говорю «выпущено на Chrome Dev Summit» - Джейк показывал его всем на Китайском дне разработчиков Google). хотя остальная часть команды была под эмбарго;) …)

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

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

Read full post .

Я только добавил его в свой блог (это заняло всего пару минут), вы можете проверить это в моем разделе « life », где я делюсь фотографиями, которые я сделал. Если вы работаете на устройстве с сенсорным экраном, вы можете быстро увеличить масштаб элемента, если вы используете трекпад, который может работать с несколькими нажатиями пальцев, что тоже работает.

Этот элемент является отличным примером того, почему я люблю веб-компоненты как модель для создания компонентов пользовательского интерфейса. Элемент pinch-zoom имеет pinch-zoom чуть меньше 3 КБ (без сжатия) и минимальные зависимости для сборки, и он просто отлично справляется с одной работой, не привязывая никакой пользовательской логики уровня приложения, которая затруднит его использование (у меня есть некоторые мысли по поводу логики пользовательского интерфейса) против компонентов логики приложения, которыми я поделюсь на основе своих знаний из приложения Squoosh).

Мне бы очень хотелось, чтобы такие элементы получили больше осведомленности и использования, например, я мог бы представить, что этот элемент может заменить или стандартизировать функциональность масштабирования изображения, которую вы видите на многих коммерческих сайтах, и навсегда избавить разработчиков от этой боли.