The Blog

Audit Web Pages With Lighthouse

16 November 2017 at 22:54

Writing and maintaining performant, accessible web pages that follow best practices is no easy task. The Google Lighthouse tool makes it simpler to stay on track by automating audits in these areas. It can be run via the audit tab in chrome dev tools, a cli tool, and node. There is also a chrome extension. I can see immense potential for keeping sites well tuned, especially as part of a CI pipeline.

The most direct path to usage is via chrome dev tools. The cli & node tools enable automation making it easy to add audits to your CI process. This could, for instance, fail a build if a certain threshold is not reached.

The tool runs tests in areas of Performance, Best Practices, Accessibility, and Progressive Web Apps. Generally it seems geared towards mobile, SPAs, and sites heavy on JavaScript, but all sites can benefit from it.

Performance

First meaningful paint, first interactive, consistently interactive, perceptual speed index, and estimated input latency are measured. These contribute to the responsiveness of a site and how likely a user is to enjoy their experience without hanging about. I found the metrics here vary massively between runs against the same site – from 40% to 80% for no apparent reason. The audits, however, are useful, reminding me to enable compression and inspiring me to slim my site’s payload right down. Also, after it failed with render-blocking scripts and stylesheets, I decided to remove some old social media widgets and font-awesome which greatly sped up pages.

Accessibility

Lighthouse incorporates Deque Labs aXe core accessibility engine into their tests, making it comprehensive in this important area.

Best Practices

Providing a mixture of suggestions such as enabling https, http/2, external anchors using rel=”noopener”, and avoiding application cache, this guides you towards modern best practices.

Progressive Web Apps

There’s a fair amount of buzz around PWAs these days. The audits here are geared towards ensuring that your site is seen as a PWA by Android. When it does, the site can be added to the home screen which then promotes it to looking and feeling like an app, having its own window with no location bar. It can also be uninstalled.

Whether you agree they are the next big thing or not Google is certainly pushing them hard. An evolving set of properties make up PWAs, but generally they are lightweight, discoverable, installable, work offline, use https, and can do something without JavaScript enabled. With Microsoft announcing future Edge and Windows Store support, and Apple recently announcing that Service Workers are in development on Safari, the big players seem to be aligned to make this happen. It remains to be seen whether the Apple Store will be as lenient as the Google Play Store when it comes to admitting PWAs to their store.

There you have it, my take on the Lighthouse tool. Crack open your dev tools and get auditing!

Build A Basic Audio Server

17 May 2014 at 00:31

I built a very simple and upgradeable music player which sounds rather nice for those on a budget. The advantage of custom building a PC instead of buying off the shelf are flexibility and cost. I spent roughly £200 not including an SSD and OS which I had already. This was my first PC build and it was surprisingly easy.

My research led me to two configurations. First I looked at the C.A.P.S v3 Carbon implementation. Whilst looking for parts I came across a company called Item Audio which is a U.K supplier of the SOtM USB audio card. They also provide the T1 Transport pre-built or cheaper as a DIY kit for £429. The more powerful Celeron processor in this build attracted me, however I didn’t have the cash to get the whole kit. Mark at Item Audio was very helpful and supplied me with the processor and motherboard, both part of the T1 recipe, which can be found here.

Here are my components:

1. Intel DH61DL Mini ITX Motherboard

2. Intel Celeron G550T Processor

3. PicoPSU-80 DC-DC Power Converter, 80 W

4. LGX MC500 Mini ITX Case

5. Seasonic Power Adapter DC 12 V, 60 W

The advantages of the processor and motherboard are outlined in the T1 recipe link above. I also bought a 4 Pin P4 Power Cable to 4 Pin Female ATX Connector to feed power to the processor, and some DDR3 RAM. I missed the connector initially and was disappointed when I couldn’t get any power on my first attempt without the part!

I ran the Computer Audio Design optimisation script which disables a number of services so the computer can operate uninterrupted for superior timing. I also installed JRiver Media Center to connect to my NAS, and Spotify.

How does it sound? Well, it’s a match for my Marantz CD player and can only sound better with future upgrades.

The convenience of having a dedicated PC connected to my DAC cannot be overstated, also the promise of clean sound coupled with the joy of the hobby is very pleasing.

Where does this basic setup fall short? I have crammed a 2.5” SSD in the chassis which is probably not very sensible for heat considerations, also there is no passive cooling. The fan’s noise is annoying for quiet pieces of music. The T1 build has a larger case for almost twice the price plus a cooler which would have alleviated these pains but I was on a budget. Lastly there was no hole to thread the power cable on the case so I had to hack the back panel for this.

So what next? A larger case with in-built cooling, one of the Streacom chassis’. A linear bench power supply, then tri-linear. SOtM SATA filter. Stillpoints fabric. Lastly a USB audio card, either SOtM, Adnaco, or PPA.

Let me know if you have any questions or want instructions putting this together.

Play Spotify On A UPnP Renderer

09 February 2014 at 23:24

A recent update to the fantastic android BubbleUPnP application allows you to stream the audio playing on your android device to a UPnP renderer. This means you can play Spotify, Google Music, etc on your phone or tablet and have it stream the audio to your television, Sonos, or Wd Live, for instance.

What's required for this to work? Firstly, and this will be a sticking point for many, your android device must be rooted. This is because Audio Cast relies on the xposed framework. A BubbleUPnP xposed module was added to the recent update to BubbleUPnP. This enables the Audio Cast functionality.

In order to play to another device it must be able to play a wmv stream or have a UPnP renderer. A number of modern televisions include this as well as many streaming boxes such as Sonos or Squeezeboxes; check your device's documentation if you're not sure. It's fairly simple to setup a computer with a renderer by installing xbmc, plex, or adding an extension to foobar2000, for example.

Unfortunately not all content will play from your android device - if an application uses a non-standard method of playing audio it won't work. Rdio is an example.

I did hit a couple of hitches playing from my HTC One. Firstly I couldn't always play from it - sometimes I had to navigate to the Audio Cast file from my television to get things running. Also my WD Live box doesn't show up as a renderer for some bizarre reason. This isn't the first time I've been bitten by HTC UPnP issues, meaning I use another device for this purpose.