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.