Skip to content

Dicey Devices post-mortem

Yesterday I just about managed to finished all the bits and bobs that I wanted to for Dicey Devices. There are lots of things I’d like to improve about it, of course. It was a fun experiment, and I might like to look at it more seriously again later.

What I did finish

Dicey Devices takes six icons and throws randomly on to a 3 x 2 grid, then applies a couple of filters and transformations to them, namely:

  • stretching the devices horizontally and / or vertically, by a little or a lot;
  • apply a 3d twist to them left or right, by a little or a lot;
  • colouring them in;
  • by mimicking bad or old screens by fading, desaturating, blurring, darkening, or showing a crack on the screen;
  • super secret "night-mode”.

The site being previewed can be fed in using a query string like so: ?url=example.com

What I didn’t finish / room for improvement

  • I used h5bp for my HTML template, so there are bits there I should strip out: stray js files and classes.
  • jQuery is included, but is not necessary: the only bit I use it for is looping through two arrays.
  • modernizr is included, but not used.
  • Simplifying the maths. I’m sure I ran myself around in circles with the SASS calcs for positioning.
  • Randomising the sizes of the devices.
  • To add the cracked screens effects, I added an extra div: this breaks scrolling in the iframe.
  • Fitting it to the screen.