Photo by HOerwin56

My new job has got me thinking about the payment funnel more than I was required to do previously. The trick with the funnel seems to be to never give the customer any reason to leave it.

Proud day

This came to mind today, when I tried to purchase the second fridge freezer I have ever bought. This is an exciting landmark in any life and I was understandably nervous. Rather than forming aesthetic opinions about fridge freezers (surely the path to madness) I decided to let Ethical Consumer dictate which one to buy. …

Photo by Daniel Reche from Pexels

I got a 99% Google Lighthouse performance the other day and it’s made me a bit obsessed with performance. So when I saw I’d need to build a “please rank this product” input, I wondered how far I could take it, without JavaScript.

Too busy for this nonsense? Just check out the final Codepen.

You’ve probably seen these kinds of controls before — they look like this:


… and as you mouse over them, the current star and every previous star highlights, to indicate your current selection

As I’m rebuilding an exiting site, I peeked to see how this control…

Photo by Inside Weather on Unsplash

An anonymous friend texted me the following:

“Is there a sofa seat to cushion ratio? My parents have a four seater but surely no excuse for 12 cushions?”

Well, today is Christmas eve and I’m (nominally) working, so let’s explore this question together.

My personal preference is for zero cushions but (quickly checks privilege into the cloakroom) I am a reasonably tall man. I’m aware I’m at the extreme end of the following bell curve:

A selection of icons from the Segoe MDL2 Assets typeface.

I built an icon search tool, which ran into performance problems. This is how I fixed them…

The kind of projects I most enjoy involve taking a new set of brand guidelines and building a front end for them. Making Lego-like blocks, which can stick together in infinite combinations and offer a huge amount of flexibility for years to come.

I’ve come to realise that the best place to start such projects is to work with a designer and put together a digital design guidelines site. …

The ESPER machine from the film Blade Runner (1982)

You might remember the scene from Blade Runner where Harrison Ford’s character enhances a photo beyond anything which seems possible. How close are we to achieving this? Blade Runner is set in 2017. It’s now 2019. We don’t have the ESPER device from the film, but we do have ESRGAN. ESRGAN (Enhanced SRGAN) is a way of enlarging low-resolution images and somehow adding detail. A bit. It’s really really hard to get working under Windows 10. Which is why I’m going to document it here, in painstaking detail. You’re welcome.

First, let’s show you what it does. In the image…

The “TL;DR” version

  • Set up an instant messager group containing everyone in your room
  • Tell them the current status of the air conditioning units
  • Ask them if they’re too hot (🔥), just right (☯️) or too cold (❄️)
  • Attach the 🔥, the ☯️ and the ❄️ emojis to the bottom of the message, so they can vote
  • If there’s a strong mandate, change the air conditioning setting or turn them on or off
An example of an air conditioning voting message in Slack.

The Oh-God-It’s-Long version

I’m not claiming to have solved the issue of office air conditioning, but I’d like to document the system we have in our part of the office, just in case…

Tabs are a solved problem, right? WRONG.

Recipe index cards dividers by Roy Guisinger.

For a user interface which stretches back to the 1970s (in digital form, at least), you might be surprised how little consensus there is about how they work. You might not agree with everything you’re about to read, but I can 100% guarantee* you will learn something.

* All guarantees come with the understanding that you know less than I do, in this particular area.

The markup

Rather than reading through the ARIA accessibility specs, let’s get a piggyback from a giant: the WAI-ARIA Authoring Practice guide. Here’s their version of tabs. Job done, right…

This was the old way of doing first-letter. A lot of mead was involved.

:first-letter's an ancient pseudo-element, which has excellent modern support. It can be used to add a drop-capital to paragraphs, like this. You're probably looking at it and thinking “this is another pseudo-element, right? Cool. I know how to use this. I've tinkered with :before and :after.”

Perhaps I’m projecting, because that’s exactly what I thought last week. I was wrong. Please, allow me to share what I’ve learned (I’ve created examples of all of these on this codepen).

It’s more of a selector, than an element

The :first-letter selector finds the first character within an element, then applies certain styles to it. That even applies if…

The following is a talk I plan to present to school pupils close to leaving age. It’s an introduction to what it’s like to be a web developer in a large agency. This is a work in progress!

My name’s Ross and I work at a web design agency called AmazeRealise. We have offices in Leith, Liverpool, Manchester and London.

I’d like to start by telling you a story. Three years ago, my company organised a competition. Each department within the agency would get to take over the company Twitter account for a week and Tweet whatever they wanted. At…

“Tongue out” by Thom Quine on Flickr.

Recently, I was putting together a presentation for work based on my pure CSS select box (now featuring actual JavaScript!). It’s not a completely successful experiment (although, in my defence, as far as I know, no-one else has managed to do it before), so I was busy turning it into a sort of rambling shaggy-dog story, where the junior developers might learn a thing or two along the way, even if the final destination is full of fleas and smells of wee.

One of the concepts I wanted to cover was adjacent and…

Ross Angus

Knight-errant Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store