Hello.

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.

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.

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

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.

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.

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.

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;

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.

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.

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).

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.

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).

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.

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.

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.

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.

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.

Before we visited Yamadera we spent the day in Matsushima in Miyagi prefecture. It was an amazingly beautiful seaside town about an hour away from Sendai on the train, that is famous for it’s fresh Oysters, many islands and a number of rather fabulous red bridges. Matsushima got hit by the tsunami in 2011 (although the town says that the islets slowed down the tsunami a lot) and all around the town there area a lot of sobering reminders to how high the water got and the damage it caused.

Early in December we took a short day-trip to Yamadera Temple in Yamagata prefecture.  The temple area is said to be about 1000 years old, with the oldest remaining building being about 400 years old. The temple is built on to the side of a mountain that you have to walk up (it’s not too strenuous to reach the top), but it presents amazing views across the valley from the top.