Pete LePage

Thoughts on web development, life, and photography.

Is my PWA installed?

Update: This post is out of date. See Detect how the PWA was launched on web.dev for details on how to check if your PWA is installed, how it was launched and if the user switches between standalone and a browser tab view. I got a question via email this morning asking if there was a way for a PWA to check if it’s installed. The site wanted to know what state the app was running in, either a browser tab, or a standalone window. First, you can use the getInstalledRelatedApps() API to check if your...

Google I/O Device Lab

One of my highlights from Google I/O this year was the Device Lab that Matt Gaunt and I built to show developers how their site looks across the multi-device web. It was a really cool thing to see all kinds of different sites working on phones, phablets, tablets, computers and even TVs. A few folks have asked how we set things up, and how we did it, so I figured I’d document our process here! Device selection # We ended up with 46 different devices on the wall, including: Nexus 4 (x2) Nexus 5 (x10)...

A web UI for my Pi

My project this weekend on my home automation system was two-fold, first I wanted to clean up the code and make it a bit more object oriented, but I also wanted to add a web interface that is accessible outside my apartment. The largest part of the weekend was spent re-architecting things. Now, each component is effectively self-contained, so it will be easier to add or remove components later and making it easier for other people to use. Once that was done, I dug into the web interface. The Pi does a...

Home Automation For Geeks

I’ve always had a fascination with home automation systems, things that make your life easier and computers that do the stuff that I’m too lazy to do. In college, I had my tiny little apartment in Ottawa all wired up with X10 and this weekend, I “finished” my most recent creation. Though honestly, is it ever really done? It all started a few months ago when I picked up a set of the Philips Hue light bulbs - they’re amazing. LED light bulbs that are fully addressable and programmable via a simple to use...

High DPI: Tips and Tricks

During the presentation that John Mellor and I did at I/O this year covering building beautiful websites for high DPI displays, we summarized our talk into about 7 key points. If you follow these seven simple guidelines, you’ll find your site looks great on any high DPI display. Setting width=device-width means you only have to care about device independent pixels If you don’t set the viewport to width=device-width, or if you use a fixed width, you’re in a world of hurt. The devicePixelRatio on high DPI...