Release: Front End Coding Guidelines

I codified some of the practices and standards I follow when developing a front end project, and have released them here – Front End Coding Guidelines on GitHub.

This is the first draft, I imagine it’ll change a good bit after I’ve had some time to think a bit more about them, this draft is largely pulled from various emails to clients and colleagues over the last couple years.

Center and scale images

I’m building out a new Shopify theme, and as product images for themes are rarely predictable, I need to make sure the images fill the parent, but do not produce any distortion cause by min or max width. In addition, the images need to be centered vertically or horizontally (depending on which side is longer).

To do that we use a little JS.


var extraDelay = 0;
    $(".product-list li a.product-thumb img").each(function(){
        extraDelay = extraDelay + 50;

        var parentWidth = $(this).parent("a").width();
        var parentHeight = $(this).parent("a").height();

        var width = $(this).width();
        var height = $(this).height();

        if(width > height){
            // wider than tall

            var diff = width / height;
            var newWidth = parentHeight * diff;
            var offset = ((newWidth - parentWidth) / 2 )- 1;

            $(this).css({
                height: parentHeight,
                left: -offset
            });

        } else if(width < height){
            // taller than wide

            var diff = height / width;
            var newHeight = parentWidth * diff;
            var offset = ((newHeight - parentHeight) / 2 )- 1;

            $(this).css({
                width: parentWidth,
                top: -offset
            });
        }

        $(this).delay(200 + extraDelay/3).animate({
            opacity: 1
        }, 200 + (extraDelay / 1.5), function() {
            // yay faded in!
        });

    });

What this does, is get the height and width of the parent and the image we need to scale (overflow on the parent is set to hidden in the css). It then scales the shortest side of the image to match it's parent.On the longer side, the difference between it and it's parent is calculated, and then the image is moved by half that amount (either up or to the left, depending on wether the long side is height or width), thus centering the image in it's parent.

It also fades the image in so you don't have to see the scaling happen, and fades each image slightly later and for slightly longer than the one before it. Just makes it feel a bit nicer.

In the below image, you can see it in action. The blue highlight shows the actual image dimensions, properly centered within the parent.

Layout - Project Title

And this is the source image:
il_570xN.464762154_li1r_large

Building a game timer for Unity in JS

Making a timer that counts up from, say, the start of your level is pretty straightforward but can be a head scratcher if you’re new to programming or Unity.

The code below is what I’m using for the timer on Blockulous. It’s pretty simple and quite effective. I take the results of secondCount and minuteCount in the script below and use ToString() to put the result in a GUI label.

var numberBase		: int 			= 0;
var secondCount		: int 			= 0;
var minuteCount		: int 			= 0;

if(Time.timeSinceLevelLoad > numberBase + 1){
	numberBase = numberBase + 1;
	secondCount = secondCount + 1;

	print(secondCount + " seconds");
	print(minuteCount + " minutes");

	if(secondCount > 59){
		secondCount = 0;
		minuteCount = minuteCount + 1;
	}	
}

This will increment second all the way up through 59, and on 60 add a minute to the minute count, and reset the seconds back to zero and begin again.

This code below is not necessary for the count, but it’s what I use to clean up the results of the counter and then display it in a neat fashion…

if(minuteCount < 1){
	visualMinutes = 0;
} else{
	visualMinutes = minuteCount;			
}

if(secondCount < 10){
	visualSeconds = "0" + secondCount.ToString();	
} else{		
	visualSeconds = secondCount.ToString();
}

transform.GetComponent(UILabel).text = visualMinutes.ToString() + ":" + visualSeconds;

(this goes INSIDE the if(Time.time ...) line from above, AFTER the if(secondCount ...) line) and you'll need these additional variables as well:

var visualSeconds	: String;
var visualMinutes	: int 			= 0;

You'll need your own GUI element in place of transform.GetComponent(UILabel).text = visualMinutes.ToString() + ":" + visualSeconds; of course.

This is cross posted from my new dev blog http://indieee.com

sprCV | A Responsive Resume Template

It’s 2012, if you work on the web and are looking for a job, or want to be head hunted you need a resume, and it should be responsive.

PDF resume? No way. Can’t load them on most phones, few tablets, and they are unweldly – even more than in the past for Windows 8 users. It’s time everyone went responsive for their CV / resume.

To that end I’ve built my own (should drink my own cool-aid right?) fully responsive resume template, and am releasing it now. This is my real life CV, so hopefully I’ve not left any significant spelling or grammatical errors!

It’s available on Github, and you can see a demo of it here. It’s GPLv2 & MIT for the markup and CSS, logos remain property of my various clients.

Responsive Resume Template