Minimal Monkey - Stephen Burgess

Hello World, I’m still here

Thu, 03 Jul 2014 00:00:00 +0000

It’s been over 1 year since my last blog post, a very poor showing, so this is just a quickie to say hi and talk about the past year.

About a year ago I was in the process of packing my things up and moving across country to San Francisco. Having already moved around a bit during my career I was surprised at how stressful this move was. Previous moves have always been solo adventures but this time I had my new wife with me so every decision (house, furniture etc) was a joint one.

The first thing was finding a place to live. Having already navigated my way around the rental markets of London and New York I thought San Francisco wouldn’t be that bad. I definitely underestimated that and finding somewhere in San Francisco was a real challenge. The market is very competitive and the prices are crazy!

We got lucky in the end though and found a great place, a fantastic landlord and amazing views from our balcony (it’s so nice having outdoor space!).

My new job also took some adjusting. I’ve previously worked for agencies (they’ve not always liked to call themselves agencies – “studio”, “boutique” etc, but they were essentially agencies). My current job is working in-house, which is great but took time to get used to. My last couple of offices had around 20 people in them. My current job has a campus. Finally, my previous jobs were all based in a city but I’m now a long commute away.

I’m really enjoying living in California. Having grown up in a small village in the English countryside I need to venture out the city from time to time. In London I just hopped on a (overpriced) train and went to visit my parents. In NYC it was a bit more difficult and at times it could feel a bit suffocating. In SF it’s so easy to escape, just jump in the car and (if traffic is good) I can be out the city in 25 minutes. I’ve got my wife, who’s a New Yorker born and bred, into hiking and we’ve already taken some epic trips.

So why has the blog gone so quiet? Well, I can’t talk about anything I do at work and since the only really interesting stuff I’m doing right now is either stuff at work or stuff directly related to it, that doesn’t really leave me with anything to blog about. I debated for a while about blogging about other stuff I like but I want to use this site as a sort of portfolio, so I didn’t want to clutter it up with posts about cakes and cats. I do have a couple of things drafted, one of which I hope to finish soon (about moving to the US from the UK). But in general it may remain relatively quiet on here for the foreseeable future.

Anyway, I’m still alive and well. I still really appreciate all the hits this site gets, all the positive emails I receive (I try to reply to them all) and people featuring this site on other blogs etc. I’m also still tweeting over at @minimalmonkey so follow me and say hello.

Relocated to San Francisco

Wed, 22 May 2013 00:00:00 +0000

After 15 amazing months living in New York City I have moved west to the mecca of technology, San Francisco. It was definitely sad to say goodbye to a city I’ve grown to love and my exit was much earlier than I had anticipated but I was presented with an opportunity in San Francisco that I just couldn’t say no to.

Big thanks to everyone at Fi who I worked with. They truly are a talented bunch and I learnt more working there than I could have imagined! Special mention to Kris Hedstrom and Erik Kallevig for being awesome mentors when I arrived. Working on the relaunch of USA Today was definitely a highlight for me and a site I’m still very proud to say I worked on.

I won’t go into too much detail about my new role here. It’s a front end developer gig. That’s all I’ll say for now. I’m really excited to be in a city that breathes technology and I really hope to keep learning and growing as a developer here.

If you’re based in San Francisco and know any good tech meetups I should go along to please send me an email and let me know!

Dynamic Bezel Lines Experiment

Tue, 14 May 2013 00:00:00 +0000

I actually wrote this little experiment whilst on a plane to San Francisco a couple of months ago (more on that soon) but then totally forgot about it. I had some time last week and remembered it – I tidied it up and here it is.

It’s inspired by this piece of art work from my good friend Tobias. At first I made it so the art work was just generated by code but it was kind of boring. I then added the interaction so the depth amount was defined by the mouse position. This instantly made it much more interesting and fun to play with.

A quick summary of how it works. I use canvas to either write text or draw an image to. I then get the canvas data and loop through each pixel on the determined lines. When I hit a pixel that isn’t transparent I store it’s position and do likewise when I next hit a transparent pixel. I then use bezier curves to make the lines nice and smooth. I’ll let you explore the code further here to see how it works. Post a comment if you have any questions about the code – I’m always happy to help.

CSS Transitions and old browser fallbacks

Thu, 02 May 2013 00:00:00 +0000

Using CSS3 transitions are great. Supporting old browsers, not so great. As I stated in a tweet recently I think that for non-essential animations it’s fine to use CSS3 without a JavaScript fallback. If the user is viewing in an old browser like IE8, then stuff will just pop/snap without transitions. They still get to see all the content, we’re not depriving them of that, they just don’t get the nice transitions.

Let’s take a simple image gallery like the one below. I’m using opacity and CSS3 Transitions to smoothly crossfade between images.

This gallery works great in modern browsers but when we remove CSS opacity and transition support there is an obvious issue – the user will continuously see the last image. We could use display: none; instead of opacity but then we won’t have our smooth transitions in modern browsers.

The other fallback is to use a negative margin, e.g. margin-left: -99999px; That sort of works but in modern browsers there’s no fadeout transitions, or rather the transition happens, but off the page. You see the background color pop in then the image fades in, like this.

It’s close but not as smooth as it could be by having the images crossfade. The trick is to keep the negative margin in, but add it with a delay to your transitions.

When fading an image out we have a delay so we don’t adjust the margin until the fadeout is complete in modern browsers.

transition: opacity 1s, margin-left 0s linear 1s;

Fading an image in, we remove the delay.

transition: opacity 1s, margin-left 0s;

Now we get the nice crossfade in modern browsers, and when the transition is complete we set the negative margin so it also works in older browsers. The delay on the margin is ignored in older browser as transitions are not supported so we just pop between images. It’ll look like this.

But in modern browsers we get the nice smooth crossfade transitions as show in the first example up top.

One thing to make sure of is that you have your transition properties in the correct order.

transition: [ <transition-property> ||
<transition-duration> ||
<transition-timing-function> ||
<transition-delay> ]

If not the delay will not work in certain browsers. Also, always ensure to specify the type after duration, even when using 0. 0s or 0ms.

I’ve put a simple working example of what I’m showing above on CodePen here. Obviously this is dependant on client expectations on how the site should look/work in older browsers.

A Nice Recursion Example

Wed, 03 Apr 2013 00:00:00 +0000

Recursion is cool. It can be defined in a non computer science way as:

the process of repeating items in a self-similar way

You may have experienced a simple form of recursion in a clothing shop fitting room when each side of the cubicle has mirrors and you see your reflection repeated for infinity; as shown in this photo.

Recursion is also a really powerful programming technique. In computer science it’s defined as:

a method where the solution to a problem depends on solutions to smaller instances of the same problem

Before I go on a little background behind this blog post. A friend of mine (no, not me but I won’t mention who) was recently interviewing for a new job and as part of the process was presented with this problem:

Given a random matrix, where each cell is either 1 or 0, determine the groups of contiguous cells that have the value 1. Cells are considered contiguous if they are neighboring to the north, south, east or west; i.e. no disgonals

The solution to the problem can be visualised in the below image.

I had a quiet Monday night a couple of weeks ago and being a bit of a nerd I thought I’d give the challenge a go. You know, for fun.

At first I thought the problem would be really easy but soon I realised it wasn’t as simple as it first seems. After staring at it for a bit I realised the solution was to use recursion!

It’s actually a really nice example of recursion and that’s why I’m posting it here as I think it could help beginners understand what recursion is and how they can use it.

So let’s look at how to solve this problem. We obviously need to loop through and see if a cell is a 0 or 1. Once we find a 1 we give it a random color then check it’s adjacent cells and if they are also 1′s give them the same color. If an adjacent cell is a 1, we should also check that cell’s adjacent cells and repeat the process until we have find a cell with no adjacent 1′s.

So let’s look at this in code but with all the non-logic stuff stripped out – e.g. I’m not going to include the code for drawing to the canvas etc, you can view the final code with all that on CodePen here.

// random matrix
var matrix = [[0,1,0,0,1],[1,1,0,0,1],[1,0,0,1,0],[0,0,1,1,1],[0,0,1,0,0]];

var init = function() {

  // for loops to iterate through each cell
  for(var row = 0; row < matrix.length; ++row) {
    for(var column = 0; column < matrix[rows].length; ++column) {

      // if cell is a 1
      if(matrix[row][column] === 1) {

        // create a random color
        var color = matrix[row][column] = randomColor();

        // check adjacent cells
        checkNeighbours(row, column, color);
      }
    }
  }
};

var checkNeighbours = function(rows, cols, color) {

  // check cell above
  if(rows-1 >= 0 && matrix[rows-1][cols] === 1) {
    matrix[rows-1][cols] = color;

    // call checkNeighbours function from within itself
    checkNeighbours(rows-1, cols, color); // recursion!
  }

  // check cell below
  if(rows+1 < matrix.length && matrix[rows+1][cols] === 1) {
    matrix[rows+1][cols] = color;

    // call checkNeighbours function from within itself
    checkNeighbours(rows+1, cols, color); // recursion!
  }

  // check cell to the left
  if(cols-1 >= 0 && matrix[rows][cols-1] === 1) {
    matrix[rows][cols-1] = color;

    // call checkNeighbours function from within itself
    checkNeighbours(rows, cols-1, color); // recursion!
  }

  // check cell to the right
  if(cols+1 < matrix[rows].length && matrix[rows][cols+1] === 1) {
    matrix[rows][cols+1] = color;

    // call checkNeighbours function from within itself
    checkNeighbours(rows, cols+1, color); // recursion!
  }

};

In the above example we call the checkNeighbours function from within itself and continue to do so until we find a cell that has no unset adjacent 1′s. This is recursion.

See the below image to visualise the order in which the code runs through and colors each cell.

I hope this helps anyone who was struggling to get their head around what recursion is and how to use it. If it doesn’t make sense give me a shout in the comments and I’ll try to explain it further!

SASS Triangle Mixin

Wed, 06 Mar 2013 00:00:00 +0000

If you’re not already using a CSS preprocessor then you should probably start now. They make writing CSS much more fun. I started out with LESS shortly after starting at Fi last year but have now moved over to SASS. They’re both pretty similar but SASS has slightly more features.

One of the great things about CSS preprocessors are mixins. Below is a useful mixin I recently wrote for creating CSS triangles.

//============================================================
//
// arrow
//
// @param width           :  px, em
// @param height          :  px, em
// @param direction       :  up, down, left, right
// @param color           :  hex, rgb
//
//============================================================

=arrow($width: 20px, $height: 20px, $direction: up, $color: red)

  width: 0
  height: 0

  // Right
  @if $direction == right
    border-top: $height/2 solid transparent
    border-bottom: $height/2 solid transparent
    border-left: $width solid $color

  // Left
  @if $direction == left
    border-top: $height/2 solid transparent
    border-bottom: $height/2 solid transparent
    border-right: $width solid $color

  // Up
  @if $direction == up
    border-left: $width/2 solid transparent
    border-right: $width/2 solid transparent
    border-bottom: $height solid $color

  // Down
  @if $direction == down
    border-left: $width/2 solid transparent
    border-right: $width/2 solid transparent
    border-top: $height solid $color

You can use the mixin to create triangles at your pleasure, like this.

.label
    background-color: #e88565
    height: 60px
    line-height: 60px
    position: absolute
    text-transform: uppercase
    width: 280px

    &:after
        +arrow(40px, 30px, down, #e88565)
        content: ''
        left: 0
        margin: 60px 0 0 120px
        position: absolute
        top: 0

Have a play around with them on CodePen here.

Fun animations with CSS3

Sat, 02 Mar 2013 00:00:00 +0000

Finally a new blog post! I launched the site nearly a month ago and the response to it has been both surprising and a little overwhelming. I’ve had, as of today, over 160,000 page views and my followers on twitter have almost quadrupled. This is a short blog post on how I made some of the fun animations on the site.

As I started my career as a Flash Developer I came to the CSS game pretty late. However, I think it’s been a perfect time to get started as new(ish) CSS3 features such as transition and animation/keyframe are awesome. I used them plentifully on this site.

One of the things people have noticed most about the site is all the little touches such as the twitter bird animation so I’ve just picked out a few of them to talk about here.

Twitter Bird Animation

I’ll start with the one that people seem to love the most – the flying twitter bird you can see when hovering the top right corner of the nav bar. The thing I’m most pleased about with this is that it uses no JavaScript.

This is made possible by CSS3 animation and the sprite sheet shown above. If you haven’t played around with them yet you can read a little about them here.

Below are two examples. The one on the left was my first attempt, I just jumped straight in without thinking and I got the effect you’ll see if you hover the bird. Kind of an obvious mistake. The example on the right uses the step parameter. It took a little searching to find out about step but once I knew about it I got the perfect effect without the need for any JavaScript. Hover the bird on the right to see it in action.

.twitter-bird {
    background-image: url(twitter-bird-sprite.png);
    display: inline-block;
    height: 150px;
    width: 150px;
}

.twitter-bird:hover {
    animation: fly 0.2s steps(3) 0 infinite;
}

@keyframes fly {
    from { background-position: 0 0; }
    to { background-position: -450px 0; }
}

Logo Bounce

Next up is my favourite little animation on the site – the bouncy hover state on the logo.

This doesn’t use a sprite sheet and instead simply uses animation and margins to get the effect:

.logo {
    background-image: url(logo.png);
    background-repeat: no-repeat;
    height: 150px;
    margin: 50px;
    width: 154px;
}

.logo:hover {
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes bounce {
    45% {
        height: 130px;
        margin-top: 70px;
    }
    55% {
        height: 130px;
        margin-top: 70px;
    }
    75% {
        height: 170px;
        margin-top: 0px;
    }
}

Pretty simple right? And again, no JavaScript required here.

Button Hovers

Finally I want to talk about the rolly hover states of the nav buttons. This effect is used a lot at the moment and I personally really like it as it looks slick but gives the user clear feedback of when a button is hovered.

To get this effect on your site requires a little extra markup:

<div class="button">
    <span class="label">Button Label</span>
    <span class="label">Button Label</span>
</div>

Again all the work is done by CSS3 with no need for JavaScript.

.button {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.label {
    display: block;
    height: 100%;
    position: relative;
    top: 0%;
    transition: top 0.35s;
    width: 100%;
}

.button:hover .label {
    top: -100%;
}

A full working example of all the code that you can play with and modify can be found here on CodePen.

Welcome Minimal Monkey

Wed, 06 Feb 2013 00:00:00 +0000

First a disclaimer. I could probably sit on this site for another 3 months tinkering with it. There’s still a few bugs I know about that need to be fixed and a long list of improvements / added features I indeed to get to. However, after a little encouragement from some good friends I knew it was time to get it out in the open and see what people think of it. I’ll continue to improve it over the next few months but for now (I guess) I’m happy with it.

Just before the New Year I decided it was time to redesign my site. Initially I planned to just make the old design responsive but the markup and CSS weren’t great (damn former me – although to be fair I was still learning CSS) and I didn’t really like the design that much anyway so decided it was time for a fresh start.

I came up with a few ideas of how I wanted the site to work and sketched them down. However, when I tried to translate these ideas into designs they never quite looked as slick as they did in my head.

During this time one of the designers at Fi, Tobias van Schnieder, had just moved from the Stockholm office to NYC. I explained my predicament to him, showed him my sketches and asked if I could pick his brain on design stuff once I had something half decent in Photoshop. The very next day, without me asking, he came in with designs for me!

I loved the stuff Tobias came up with and you can see from the screenshots below that the final site changed very little from his original designs.

A couple of people I spoke to thought it was a little strange that, being a web developer, I didn’t design my own site. However, I have to disagree. Let me put it this way, if I was going to build my own house I’d get an architect to design it otherwise I’d end up living somewhere like this.

One of the main requirements for my site, which I think Tobias got spot on, was that I needed something to look great but I don’t necessarily have lots of nice images that I can use. Plus prepping graphics for a blog post takes time and might put me off adding content. I was worried that without images my blog would just look plain and boring but, with the colors, I think it looks great!

Another great thing about the designs is that all my old blog posts from over the past few years fit nicely with minimal work required to integrate them. Whether they should all still be here is another debate and I may well delete some of the older, now irrelevant posts.

Flash Monkey alias retires

People that used to visit my old site will obviously notice the change of alias / domain. I’ve been debating whether to get ride of old Flash Monkey for sometime now. It’s been about a year since I did any Flash / ActionScript work and I really don’t see that changing in the future. I’m not going to declare Flash is finally dead (although, perhaps in terms of use for websites it is, but that’s a whole other topic) but for me and my day to day work it certainly isn’t relevant anymore.

I think the thing that finally pushed me over the edge is that since LinkedIn added the endorsements feature people keep endorsing me for Flash related skills! I don’t do Flash anymore, stop endorsing me for it!

Anyway, Flash has played a big part in my career and I learn’t a lot of skills that I still use in JavaScript and CSS every day. I’ll be keeping my old blog up as it still (strangely) gets a fair few hits but going forward I’ll only be posted on this site.

Thanks Tobias

So a huge thanks to Tobias for the awesome designs and also for keeping me motivated and pushing me to get the site to the point it is today. Also, some appreciation to my girlfriend Junith who’s been patient over the past month whilst I’ve spent many evenings putting this site together. All the late nights reminded me of why I stopped doing freelance on the side many moons ago.

Now I need to start writing regularly to make all the work worthwhile! I’m planning a series of posts about stuff I’ve learnt whilst making the site so watch this space.

CSS 3D Cube Mobile

Mon, 30 Jul 2012 00:00:00 +0000

Shortly after I posted the CSS 3D cube tutorial last week my friend Marlon jumped on the comments and suggested I create a mobile version. I played around with device orientation and JavaScript earlier in the year when me and Marlon were working together at Specialmoves so I presumed this is what he meant and it was a great idea!

I’ve now had a bit of time to put it together and created both an orientation version using the device accelerometer and also a touch event version (as whenever I showed someone the orientation one they tried to spin the cube with their finger!). Before you attempt to view the links you’ll need to be using either a tablet or mobile device and viewing in a browser that is WebKit powered as with the tutorial (iPhone, iPad and Android phones should be fine). Don’t start touching your computer monitor as nothing will happen (that was mostly for my Dad). ;)

Device accelerometer

First up the orientation version which can be view here. To get a device orientation via JavaScript is as simple as merely listening to an event.

var orientation = 0;

window.addEventListener("orientationChanged", function(event) {
    orientation = event.orientation;
}, true);

window.addEventListener("deviceorientation", function(event) {
    // process event.alpha, event.beta and event.gamma

    var x, y;

    if(orientation == 0)    x = event.beta;
    else                    x = (orientation == 90) ? event.gamma : event.gamma * -1;

    if(orientation == 0)    y = event.gamma;
    else                    y = (orientation == 90) ? event.beta : event.beta * -1;

    $('.cube')[0].style.webkitTransform = "rotateX("+(x * -1)+"deg) rotateY("+(y * -1)+"deg)";
}, true);

The orientationChanged event is dispatched when the window changes from portrait to landscape and visa versa. deviceorientation then gives you the x / y / z orientation of the device.

Touch Events

Next we’ll look at the touch event version which can be viewed here. Again the code is pretty simple as shown below. I’m planning on writing a simple tutorial for touch events so hopefully should have that up soon.

var vx = 0, vy = 0;
var px = 0, py = 0;
var lastx, lasty;

document.addEventListener('touchstart', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    lastx = touch.pageX;
    lasty = touch.pageY;
}, false);

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    var mousex = touch.pageX;
    var mousey = touch.pageY;
    if(lastx !== mousex) vx = mousex - lastx;
    if(lasty !== mousey) vy = mousey - lasty;
    lastx = mousex;
    lasty = mousey;
}, false);

function render() {
    px += vx;
    py += vy;
    vx *= 0.9;
    vy *= 0.9;
    $('.cube')[0].style.webkitTransform = "rotateX("+px+"deg) rotateY("+py+"deg)";
}

setInterval(render, 50);

Finally I put them both together to create this version that utilizes both device orientation and touch events.

CSS 3D Cube Tutorial

Thu, 19 Jul 2012 00:00:00 +0000

In my last post I talked about doing a tutorial for the CSS 3D Clock I recently made. However, instead I think I’ll just go over how to create a simple cube with CSS, and rotate it a bit with JS so we can see it really is 3D. Once you have the basics it’s up to you to go away and do something creative with it.

Before we start I should mention that unless you are viewing this in a browser that is powered by WebKit you won’t see the examples. Currently that mean’s you would have to be using either Safari or Chrome.

So let’s start by looking at the markup. It’s very simple – a wrapper then 6 divs to represent each face of the cube.

<div class="cube">
    <div class="face one"></div>
    <div class="face two"></div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five"></div>
    <div class="face six"></div>
</div>

As you can probably imagine, given the name of this post, all the magic happens in the CSS. Let’s take a look starting with the styles applied to the cube’s wrapper.

.cube {
  height: 240px;
  position: relative;
  margin: 0 auto;
  width: 240px;
  -webkit-transform-style: preserve-3d;
}

Most of this is simple stuff you will have seen a million times before. Height and width are self explanatory, position is relative and we’re using the margin to center the cube horizontally. However, something you may not have seen before is ‘preserve-3d’.

So what is ‘preserve-3d’ and why do we need it? You will require this if you are applying 3D transformations to the children of an already transformed element. Without it the child elements will appear on their own planes and would appear flat in front of their parent, as show below.

Next we need to apply styles to the cube’s faces. The initial .face class is relatively straight forward. Here we just set a height and width (remember them, we’ll need those later), then just add some general aesthetic stuff like some inner shadow and opacity to make the cube look nice.

.face {
  background-color: rgb(50, 50, 50);
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
  height: 240px;
  opacity: 0.7;
  position: absolute;
  width: 240px;
}

The only important thing here is ensuring positioning is set to absolute. This is so we can rotate the faces and move them about easily to create the cube – which brings us onto the next step.

Finally, the bit where our cube comes together. We have to rotate our faces on certain axis, as beautifully illustrated by me on the right (that’s right I’ve got 3 arms) and move their positions to create a cube. We are using the size (height/width) of the faces to position them. Simple!

.cube .one  {
  background-color: rgb(242, 24, 25);
  -webkit-transform: rotateX(90deg) translateZ(120px);
}

.cube .two {
  background-color: rgb(235, 41, 158);
  -webkit-transform: translateZ(120px);
}

.cube .three {
  background-color: rgb(252, 209, 22);
  -webkit-transform: rotateY(90deg) translateZ(120px);
}

.cube .four {
  background-color: rgb(44, 45, 213);
  -webkit-transform: rotateY(180deg) translateZ(120px);
}

.cube .five {
  background-color: rgb(125, 105, 181);
  -webkit-transform: rotateY(-90deg) translateZ(120px);
}

.cube .six {
  background-color: rgb(22, 226, 38);
  -webkit-transform: rotateX(-90deg) translateZ(120px) rotate(180deg);
}

Now we’ve got our cube let’s chuck in some simple JS to make it rotate in relation to the mouse position. Once again we’re using WebkitTransform rotateX and rotateY but this time we’re applying the style on the fly with JavaScript.

$(window).on('mousemove', function(event) {
    var width = $(window).width();
    var mouseX = event.pageX - (width * 0.5);
    var height = $(window).height();
    var mouseY = event.pageY - (height * 0.5);
    var xAngle = (mouseY / height) * 90;
    var yAngle = (mouseX / width) * 90;

    $('.cube')[0].style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
});

You can see a standalone version of the finished cube here and for further reading take a look at Peter Gasston’s Adventures In The Third Dimension: CSS 3D Transforms article over on Smashing Magazine’s website.