Pete LePage

Thoughts on web development, life, and photography.

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

Seeing the world through high DPI

At Google I/O this year every attendee got a brand new, beautiful Chromebook Pixel - for many, it was their first high DPI (a so called retina) laptop, and I think many people realized how, um, not so beautiful 1x images look on a 2x screen. In other words, how crappy most of the web looks on a high DPI display. While there, John Mellor and I gave a talk covering the best practices for building sites that look good on high DPI displays. We covered the theory behind the three different types of pixels and...

Viewport target-densitydpi support is being deprecated

Support for target-densitydpi in the viewport meta tag was recently removed from WebKit and with Chrome for Android moving forward to current revisions on WebKit, this change is now rolling out in Android. This change affects only a small number of sites because of the limited implementation of the target-densitydpi attribute. It brings Chrome and other WebKit based browsers in compliance with the specification and matches the behavior of other modern mobile browsers. In order to to best understand what’s...

Meta viewport syntax - comma or semi-colon?

TL;DR: If you’re using a semi-colon to separate values in your viewport meta tag, your site may break! Use a comma instead. Browsers can be pretty forgiving most days, they do their best to fix our coding mistakes; but it’s a tough job. Most days, they manage to get it right, but trying to fix all the possible error cases is pretty hard. Worse yet, sometimes one browser fixes our code for us, while others don’t. The viewport meta tag seems to be one of those elements that’s a little bit persnickety. The...