Labs

Favourite Question (Bluesky)

What’s your favourite idea for a pointless Bluesky bot?

Parallax tracker

Two experiments with parallax animation of CSS layers, based on tracking - with face detection and with an accelerometer

ICU

Two experiments with getUserMedia, Face detection and speechSynthesis.

Google Form Heatmap

A custom HTML form that stores data in a Google Form, and uses this information to generate a heatmap using Leaflet and Leaflet.heat

Now Playing

Display in a web page details of the current Spotify/BBC 6music track that’s playing on a Chromecast / Google Home on the same local network.

Talkmoji

Add a realtime feedback emoji bar to HTML talk slides

Device Orientation - websockets

Display 3d representations of the current orientation of all devices connected to a website via websockets

Device Orientation - 3d

Display a 3d representation of a device’s current orientation

Device Orientation - 360

Scroll a web page through 360 degrees based on a device’s orientation

Device Orientation - Vertical

Scroll a web page vertically based on a device’s orientation

Background generator

Generate random background images of stars or vertical lines

Button Recorder

Run a custom python script on a Google Voice Kit (Raspberry Pi) to play and record silly sounds, using the Button Basher

Instagram uploader

Automatically upload images from a flickr account to Instagram

Jambot

A Raspberry Pi-powered soundboard inside a doll that plays stupid sound clips when squeezed.

Voicekitbot

Run a custom python script on a Google Voice Kit (Raspberry Pi) to do things, such control Spotify and pick someone in the studio to make tea

Awkbox

A Raspberry Pi-powered soundboard that plays stupid sound clips when shaken.

Eye Lighter

Visual display of who is currently working in Studio Awkward, with a programmable LED strip

Button Basher

Using a Makey Makey to control our studio mac mini

Django Component Library

A framework for creating a living component library with Django

Awkbot

A Slack bot that does…things

Guac-a-mole

A Meteor-powered multiplayer whack-a-mole game

Plane Spotter

A Node app to identify nearby aeroplanes with a Raspberry Pi, Dump1090, Node, an LCD touchscreen and some magic

Trigger warning

A node/websockets thing that displays a trigger warning message and plays a klaxon sound when a bad thing happens.

Arduino Wii Nunchuk Node Spotify

Control Spotify using an Arduino and a Wii Nunchuk

Raspberry Pi Python Garmin Strava

Automatically upload activities from a Garmin GPS watch to Strava when it is plugged into a Raspberry Pi

HMTL

Loosers talking about rubbish

Video slideshow

Proof-of-concept full-screen HTML slideshow (using fading transitions) with mixed video and image content

Process

A process document written with the Comrades! that outlines our working methods

One-click Resize

A Chrome extension that resizes your browser to a default size with a single click

Arduino Waving

Making a thing do stuff with an Arduino

Awe-inspring Synonyms

A Chrome extension that automatically replaces the word ‘awesome’ with a random (but superior) synonym

Munchkin

A hastily hacked together HTML page to keep track of Munchkin scores

ISS Tracker

See the location of the International Space Station, and when it’ll be overhead next

Favourite Question

What’s your favourite idea for a pointless website?

Unit Deconverter

Converts any unit into a useless measurement

Noisebox

Make weird noises happen on another computer, via the web

Timeago

Turn absolute dates into relative time with JavaScript - updated every second (with a single global timeout)

Slide Controller

Node.js-based controller for HTML slideshows - S5 and Google slides

Graf Wall

A basic multi-user drawing canvas/node/websockets thing

Archive Tweet

Retweet things from another account a set time after they were originally posted

Flickr Gallery

A simple single-page responsive HTML/CSS/JS image gallery, with a PHP script to generate HTML from flickr

Node Tweet Munger

A Node.js-based clone of the original (PHP-based) Tweet Munger

Single Editable Page

A very simple HTML page, editable via the browser

Lab badge

Add a little badge to any website by including a single JavaScript file

Wrrds

Allow people to add messages to be displayed on a screen

CSS3 Scale Translate3d

Using CSS3 transform properties scale and translate to move and zoom around HTML elements

CSS3 Transition Blocks

Playing around with CSS3 transitions

JavaScript Canvas Letters Banner

Scrolling pixel letters created with JavaScript and canvas

Browser Breakout

A bookmarklet that lets you play breakout with the images on any webpage

Javascript Canvas Letters

Animated pixel letters created with JavaScript and canvas

Mac PHP/JS Volume Control

Control OS X system volume from a browser

XVMB: XVMB Vault of Marketing Bollocks

A site that features some of the ‘best’ bits of marketing bollocks that we’ve experienced in recent years.

A Load of Bollocks

A site to display animated gifs full-screen in ‘modern’ browsers

Konami Code

Adding the Konami Code to a site

Ghetto blaster: a PHP/JavaScript soundboard

A simple soundboard that can be accessed through any web browser, which allows anyone to play a sound clip or synthesised speech through a capable web server.

Tweet Munger Custom Translations

Translate (mung) tweets from a specific user account through a custom set of translations, then re-tweet from a new account.

Tweet Munger

Translate (mung) tweets from a specific user account through several languages and back, then re-tweet from a new account.

Responsive Astronomy Picture of the Day

A responsive (mobile-optimised) version of the Astronomy Picture of the Day web page

PHP Delete Files and Folders

A simple PHP script that allows the easy deletion of files and folders within a directory

JavaScript Copter, with Canvas

An attempt to recreate the classic flash ‘copter’ game using Javascript and canvas

Boris: Localhost Browser

Boris is a PHP-based localhost browser that allows you to quickly browse through your local projects.

HTML Coding Standards

A brief description of how I tend to structure the HTML code for the majority of projects.

Horiznavlist

A quick way to turn an unordered list of links into horizontal navigation.

CSS Coding Standards

An overview of the way I tend to structure my CSS files for a typical site build.

JS Cookies

The script I tend to use when dealing with cookies. There are plenty out there, but this offers a couple of extra functions you don’t always find.

Form Default Text

Expand the functionality of a standard html form by auto-filling and removing default text from a text field

Canvas Pie Timer

A small experiment to test the basic animation potential of canvas, and potentially create a working visual timer system.

Select All Checkboxes

A javascript snippet that allows you to use a ‘select all’ checkbox to automatically fill multiple form elements

JS Grid Overlay

A handy javascript tool allowing you to overlay a grid or graphic to check pixel perfection across browsers

JS Particles

An old experiment playing with interacting particles

JS Tweening boxes

Experiments with a JavaScript tweening class that allows smooth scrolling of html elements