Hello.

I am Paul Kinlan.

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

Simulating Apache mod_include for Vercel

Paul Kinlan

I run a static site, it’s built with Hugo and hosted on the edge with Vercel. Sometimes, I just want to include a small piece of server-side logic (Copyright notice anyone?) without having to spin up a complex node server or api endpoints. Sometimes I want to be able to drop a small piece of dynamic content in one single page on my static site. That’s what I loved about Apache mod_include.

Read More
Picture of me smiling.

Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

RSS Github Medium

I finished reading my first book in Japanese today

Paul Kinlan

I’ve been learning a bit of Japanese for a little while now and whilst I find it very hard, I was quite happy to have read this book to my daughter today though!

Read More

I love that my printer advertises to me

Paul Kinlan

Read More

Streaming Templates in node and the browser

Paul Kinlan

I’m currently building a simple web app and I needed a simple templating engine that can stream dynamically generated responses to the network. It’s hard to build sites that are fast. One known pattern for building sites that render quickly is to ensure that the browser gets the HTML as quickly as possible. Yet, many of the tools (middleware and templating engines) that developers use to build sites wait for the response from the server application to be completely created before they are put on to the wire and send to the client.

Read More

Shiming Request.formData in Safari

Paul Kinlan

I’m currently building a simple CRUD client-side only data logger PWA that contains no client-side JavaScript apart from what is inside the service worker. To do that I am following basic REST principles, and just using the Form element to submit data to the service-worker that then stores in it IndexedDB and renders the results back out to the client. I will explain more in another post, but in this post I want to quickly document how I fixed an issue in Safari.

Read More

:D tabs open

Paul Kinlan

Idly browsing the web whilst I’m on paternity leave and saw that I have a lot of open tabs. :D

Read More

Twitter is using PWA shortcuts

Paul Kinlan

I thought this was rather cool and I discovered it by accident, but it looks like Twitter implemented shortcuts. It’s great to see web sites and web apps being able to do things that users expect installed applications to be able to do.

Read More

View Source for Safari on iOS with Shortcuts

Paul Kinlan

I love view-source, it’s a nifty super power of the web that nearly all mobile browsers are trying to kill. Not exactly sure why. View-source is what got me into web development because I could see how other people structured their pages, and at the time I started web development it was pretty much the only way to debug web pages. I’ve also been using my iPad Pro whilst I am not at work for the next month or so… It’s a great device, and it appears to be locked down in a way that restricts me from doing exactly what I want… this is until I found out about the Shortcuts app that is built in to iOS.

Read More

Quick Console bookmarklet for Desktop and Mobile

Paul Kinlan

Sometimes when I am on my mobile, I just want quick access to the JS console so that I can see what is going on inside the web page: Does the page have any logs, warnings or errors etc; without having to plug my phone into a laptop and hooking up to Chrome DevTools. I really wish you could use DevTools more easily on a mobile device. That being said, I have a partial solution that solves my problem.

Read More

Use Bookmarklets on Chrome on Android

Paul Kinlan

I love Bookmarklets, they let you quickly customise web sites in a lighter way than a Chrome extension, and for the longest time (5 years), I thought it wasn’t possible to run Bookmarklets on Chrome on Android. It turns out, I was wrong. You just can’t run them the traditional way. The way that most people access Bookmarks on Android doesn’t let you run a Bookmarklet, i.e, via “Select Bookmarks” in the main menu;

Read More

Quick Picture in Picture Bookmarklet

Paul Kinlan

Picture in Picture is an amazing API, it let’s you keep on working in another tab but have a little playable live thumbnail of the video on the screen for you to keep up with. Yet there are a number of sites that disable the feature. I just wanted a quick and easy access button that I can press in my browser that will just PIP the video. So I made a bookmarklet.

Read More

Getting a list of Blink Components

Paul Kinlan

This is mostly for me to remember. I needed to build a mapping of DevRel support to Blink Components, and I really didn’t want to have to manually work out all the components by hand. If you want to get a list of components in Blink, there is a file that has all the details you need. If you are Promise inclined, here is a quick way to do it.

Read More

River Dee in Llangollen before and after heavy rain

Paul Kinlan

One of my favourite activities is driving, specifically through hilly terrain, and North Wales is one of my preferred places to drive. As is my want, I normally pass through Llangollen. For those who don’t know, Llangollen is a town in North Wales that is set on the River Dee, and during the summer months when it’s flow is slower than normal you can go out onto the rocks and paddle a little bit (warning: the flow is still strong).

Read More

Scroll to text bookmarklet

Paul Kinlan

I forgot that Scroll to Text fragment was a thing that is launching soon in Chrome (81 and not 80 as mentioned in Chrome Status), until I saw this Tweet. I love this feature, it let’s you link to more than just named elements. Domenic Denicola asked if there was an extension that did this. I don’t think you need one, because bookmarklets are awesome and underused. I decieded that it should be pretty quick to write up a simple bookmarklet that creates a link with a scroll to text anchor that you can share with people.

Read More

What do you want from a Web Browser Developer Relations team?

Paul Kinlan

It’s my 10 year anniversary at Google today, and I’ve had an incredible time. I’ve been able to work on Chrome for the entire time here, starting as the most junior member to be being able to run a great team of passionate Developer Advocates, Developer Programs Engineers, Tech Writers, Program Managers and Developer Marketers all whose goal is to focus on helping make web development easier and better (sometimes with a Chrome focus, most of the time an holistic focus of Cross browsers).

Read More

Thinking about Developer Satisfaction and Web Developers

Paul Kinlan

It would be an understatement to say that MDN’s Developer Needs Assessment has helped the Chrome Web Platform team prioritise their work for 2020, in fact it’s been central to DevRel and the Web Platform teams objective setting (more on that soon). Over the last year or so we’ve been fortunate to collaborate with the MDN team via the PAB (Product Advisory Board), and during that time we’ve been thinking about how we measure the satisfaction that developers have with the platform, and even if it’s important.

Read More

Hiring: Chrome Privacy Sandbox Developer Advocate🔗

Paul Kinlan

It’s looking like 2020 will be a big year for Privacy across the web and our team (Chrome) is no exception.

Chrome has a rather large number of projects that are coming in the following years that will continue to improve the privacy of all users on the web and we need the help of an awesome Developer Advocate to ensure that the entire cross-browser privacy story is heard, understood and implemented across the web.

The Developer Advocate role will help to accelerate the adoption of security and privacy related primitives from all browsers (think about all the great work browsers like Firefox, Safari, Brave etc are doing) across the web ecosystem and to make sure that our engineering and product teams are prioritising the needs of users and developers. It’s not going to be easy, because a lot of these changes impact the way developers build sites today; for example, the Same-Site change that is landing in Chrome imminently requires developers of widgets and anything that is hosted on a 3rd party origin meant to be used in a 1st party context, to declare that the correct SameSite attribute, lest they be automatically set to SameSite=Lax, which will restrict their usage slightly.

There’s going to be a lot of work to do, so being able to work with companies, frameworks and libraries in the ecosystem is going to be a key part of this role.

If you’re interested, my email is paulkinlan@google.com - or you can apply on the Job posting directly.

Correct image orientation for images - Chrome 81

Paul Kinlan

Looks like one of the oldest bugs in Chromium has been fixed. Chrome used to display images in landscape orientation even if they were taken in portrait on a phone. Now it appears that in Chrome 81 we will respect the image orientation from the files EXIF data and display the image in that orientation by default unless you override it with a CSS attribute image-orientation: none. Fun times.

Read More

Light fork of SimpleImage for Editor.js🔗

Paul Kinlan

I love Editor.js. It’s a nice simple block editor that I use to write these posts. It has a host of good plugins that enable you to extend the capabilities of the editor, such as the SimpleImage tool that allows you to add images to the editor without having to upload them.

It’s the SimpleImage that I briefly want to talk about. It’s a good tool, but it has two problems, 1) I can only drag images on to the editor, I can’t “add” an image; 2) It uses base64 data URL’s to host the image, this is a waste of memory and it should be using blob URLs.

I wrote a simple fork that addresses these two pain points. The first is that it uses less memory because it uses blob URLs. The second is that now you can add images in when adding in a new Block to the editor.

In fact, the following images are added using this new way.

Add Image
Choose file
Image added

Airhorner with added Web USB🔗

Paul Kinlan

This new year Andre Bandarra left me a little surprise on my desk: A physical airhorner built with Web USB!

Check it out, well actually it will be hard, Andre created a small sketch for an Arduino Uno that connects over USB that is not yet available, however the code on the site is rather neat and not too complex if you are experienced with any form of USB programming.

Andre’s code connects to the device and waits for the user to approve, configures the connection, and then continuously reads from the device looking for the string ‘ON’ (which is a flag that is set when the button is pressed).

const HardwareButton = function(airhorn) {
  this.airhorn = airhorn;
  this.decoder = new TextDecoder();
  this.connected = false;
  const self = this;
  this._loopRead = async function() {
    if (!this.device) {
      console.log('no device');
      return;
    }

    try {
      const result = await this.device.transferIn(2, 64);
      const command = this.decoder.decode(result.data);
      if (command.trim() === 'ON') {
        airhorn.start({loop: true});
      } else {
        airhorn.stop();
      }
      self._loopRead();
    } catch (e) {
      console.log('Error reading data', e);
    }
  };

  this.connect = async function() {
    try {
      const device = await navigator.usb.requestDevice({
        filters: [{'vendorId': 0x2341, 'productId': 0x8057}]
      });
      this.device = device;
      await device.open();
      await device.selectConfiguration(1);
      await device.claimInterface(0);
      await device.selectAlternateInterface(0, 0);
      await device.controlTransferOut({
        'requestType': 'class',
        'recipient': 'interface',
        'request': 0x22,
        'value': 0x01,
        'index': 0x00,
      });
      self._loopRead();
    } catch (e) {
      console.log('Failed to Connect: ', e);
    }
  };

  this.disconnect = async function() {
    if (!this.device) {
      return;
    }

    await this.device.controlTransferOut({
      'requestType': 'class',
      'recipient': 'interface',
      'request': 0x22,
      'value': 0x00,
      'index': 0x00,
    });
    await this.device.close();
    this.device = null;
  };

  this.init = function() {
    const buttonDiv = document.querySelector('#connect');
    const button = buttonDiv.querySelector('button');
    button.addEventListener('click', this.connect.bind(this));
    button.addEventListener('touchend', this.connect.bind(this));
    if (navigator.usb) {
      buttonDiv.classList.add('available');
    }
  };

  this.init();
};

If you are interested in what the Arduino side of things looks like, Andre will release the code soon, but it’s directly inspired by the WebUSB examples for Arduino.