Clayton McIlrath » front-end

Tip of the Day: CSS Formatting

Clay McIlrath — Wed, 07 Sep 2011 04:56:31 +0000

One thing I really hate about agile front-end dev is the lack of formatting standards between devs. Some developers block their rules, others keep everything on one line. Some indent their rules, others don’t. The list goes on and on. I have a list of formatting rules that my team has adopted and all the front-end devs that I respect also follow, so if you care about improving your code and agile development, please adopt a standard of some sort and stand firm by it:

Block vs Single Line

Default to single line, because many rules will only contain one or two styles and its a waste and pain to scroll vertically through code. Most editors support the 80 column rule, so if your styles get longer than that, convert to block (easy to set a macro to do it for you in most IDE’s and editors).

.foo { background: #ccc; float: left; margin: 0 10px; }
 
.bar {
	cursor: pointer;
	display: block;
	float: left;
	height: 29px;
	margin: 7px 0;
	padding: 0 16.2%;
	width: 26px;
}

Indentation

It’s so much easier to read code that is indented to show hierarchy and white space that separates or groups similar or related objects together. This is a standard I see most front-end developers following, but if you’re not, smack yourself now and get with the program.

ul { }
	li { }
		li a { }
 
.foo {}
	.bar {}

That’s all on formatting for now. Adopt these standards and read on, because I’m sure I’ll be back on this rant before too long.

Tip of the Day: Mobile Touch Events

Clay McIlrath — Tue, 30 Aug 2011 00:17:54 +0000

I recently got into a project that was a bit over my head. I had to build out a map that will work on desktop, mobile and tablets the same, but I quickly ran into issues tracking touch events in mobile Safari. All of the testing I was doing in iOS5 (beta) was working the exact same way as the browser, where I could monitor a click and drag (touchmove) event and get the properties pageX and pageY directly from the event. However, on other mobile browsers (specifically iOS4 and older) this property was returning 0 everytime. I then found that multi-touch events store each finger press so I had to get the array of fingers and return the page coordinates. Long story short, here is the code I ended up implementing:

document.ontouchstart = function (e) {
	if (e.touches.length == 1) { // Only deal with one finger
		var touch = e.touches[0], // Get information for finger #1
		    x = touch.pageX,
		    y = touch.pageY;
	}
}

Tip of the Day: CSS Border Radius

Clay McIlrath — Mon, 29 Aug 2011 05:05:46 +0000

Too often I look at code where developers aren’t keeping up with standards and browser adoption and compatibility. This tip will save you from writing a bunch of browser prefixes and thus writing extra, redundant code. As of the date of this posting the latest versions of Opera, Firefox, Chrome and Safari all support “border-radius” without a prefix. I’ve confirmed this on http://css3.info though I’m not sure what the latest adoption by IE9 is.

Also, for those that will rebuttal and argue that older versions of these browsers don’t support it, to you I’d say look up the statistics of old versions of these browsers being out in the wild and stuff it please, because the percentage of users that don’t upgrade these browsers is so low and insignificant that I really don’t want to hear the argument

That concludes today’s “Tip of the Day” check back again tomorrow!

Introduction to Flash and ActionScript

Clay McIlrath — Sun, 27 Feb 2011 05:30:19 +0000

For too long I’ve put off learning Flash because I never liked the layout of the program, but I decided today that like it or not, flash is a very popular front-end development tool. Being a front-end developer it’s important to know every tool and technology to some extent and understand the inner workings of each technology and how to integrate them with other markup and programming. So let’s dive into some screenshots and descriptions and learn Adobe Flash.

Getting to know the program

Create a new Flash File (Actionscript 3.0)

Create a new Flash File by going to File > New > Flash File (Actionscript 3.0)
Change the document size and frame rate to your liking (Modify > Document), I used 640 x 310 and 18 fps
Use the Rectangle tool and draw a rectangle on Layer 1 with the color you’d like
Create any other layers or draw any other objects or place text. I created a text object on top of the rectangle
Name “Layer 1″ to “Background” and create a new layer named “Code”
Save the Document

Create a new Actionscript File

Paste in the code

/* Blurry Lights Animation */
 
package Classes
{
	/* Import required classes */
 
	import flash.display.MovieClip;
	import flash.filters.BitmapFilter;
	import flash.filters.BlurFilter;
	import flash.events.Event;
 
	public class Lights extends MovieClip
	{
		/* Vars */
		private var lightsNumber:int;
		private var xSpeed:int;
		private var ySpeed:int;
		private var lightsDir:String;
		private var areaW:int;
		private var areaH:int;
		private var lights:Array = new Array();
 
		/* Main function */
		public function init(areaWidth:int, areaHeight:int, numberOfLights:int, lightSize:int, lightColor:uint, minimumScale:Number, hSpeed:int, vSpeed:int, dir:String, quality:int):void
		{
 
			/* Set variables */
			areaW = areaWidth;
			areaH = areaHeight;
			lightsNumber = numberOfLights;
			lightsDir = dir;
 
			/* Use a for to create the parameter-specified number of lights*/
			for (var i:int = 0; i < numberOfLights; i++)
			{
				/* Create the specified number of lights */
 
				var light:MovieClip = new MovieClip();
 
				/* Set random speed to x and y based on the params*/
 
				xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed);
				ySpeed = Math.round((Math.random() * vSpeed) + 0.5);
 
				light.xSpeed = xSpeed;
				light.ySpeed = ySpeed;
 
				/* Create lights */
 
				light.graphics.beginFill(lightColor);
				light.graphics.drawCircle(0, 0, lightSize / 2);
				light.graphics.endFill();
 
				/* Set a position based on the params specified */
 
				light.x = Math.floor(Math.random() * areaWidth);
				light.y = Math.floor(Math.random() * areaHeight);
 
				/* Add blur, we declare the var here to get a new blur w/every light */
 
				var b:int = Math.floor(Math.random() * 10) + 5;
 
				var blur:BitmapFilter = new BlurFilter(b,b,quality);
 
				var filterArray:Array = new Array(blur);
 
				light.filters = filterArray;
 
				/* Change alpha */
 
				light.alpha = Math.random() * 0.6 + 0.1;
 
				/* Scale */
 
				light.scaleX = Math.round(((Math.random() * (1 - minimumScale)) + minimumScale) * 100) / 100;
				light.scaleY = light.scaleX;
 
				/* Add the lights */
 
				addChild(light);
 
				/* Store lights in an array to use it later */
 
				lights.push(light);
 
				/* Check for lights direction */
 
				checkDirection();
			}
		}
 
		/* Check direction */
		private function checkDirection():void
		{
			for (var i:int = 0; i < lights.length; i++)
			{
				switch ( lightsDir )
				{
					case "up" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveUp);
 
						break;
					case "down" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveDown);
 
						break;
					case "right" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveRight);
 
						break;
					case "left" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);
 
						break;
					default :
 
						trace("Something weird just happened!");
				}
			}
		}
 
		/* Move Up function */
		private function moveUp(e:Event):void
		{
			e.target.x += e.target.xSpeed;
			e.target.y-=e.target.ySpeed;
 
			/* Reset light position, Y first, then X  */
 
			if (e.target.y + (e.target.height / 2) < 0)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
 
			if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Down function */
		private function moveDown(e:Event):void
		{
			e.target.x+=e.target.xSpeed;
			e.target.y+=e.target.ySpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH)
			{
				e.target.y = 0 - (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
 
			if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Right function */
		private function moveRight(e:Event):void
		{
			e.target.x+=e.target.ySpeed;
			e.target.y+=e.target.xSpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
			{
				e.target.x = 0 - (e.target.height / 2);
				e.target.y = Math.floor(Math.random()*areaH);
			}
 
			if ((e.target.x - e.target.width / 2) > areaW)
			{
				e.target.x = 0 - (e.target.height / 2);
				e.target.y = Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Left function */
		private function moveLeft(e:Event):void
		{
			e.target.x-=e.target.ySpeed;
			e.target.y-=e.target.xSpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
			{
				e.target.x = areaW + (e.target.width / 2);
				e.target.y=Math.floor(Math.random()*areaH);
			}
 
			if ((e.target.x + e.target.width / 2) < 0)
			{
				e.target.x = areaW + (e.target.width / 2);
				e.target.y=Math.floor(Math.random()*areaW);
			}
		}
	}
}

Note the line “package Classes” near the top. This is the name of the folder that will contain your class file. Make sure you have this folder in the same directory as your other flash file and that the name of the folder matches the name of the package.
Save the file inside your “Classes” directory

Add your Actions to your Flash File

You’ve created the ActionScript file and Lights class, now all you need to do is call that class and pass the parameters to the script. Do this by going to Window > Actions and pasting in the code. Save and preview / publish and you’re done!

Actions" title="Flash - Add your actions to your flash document" width="490" />

import Classes.Lights;
 
  var light:Lights = new Lights();
 
  light.init(640, 310, 10, 300, 0xFFFFFF, 0.5, 1, 1, "up", 2);
 
  addChild(light);

Want more?

jQuery Lightbox / Modal Plugin

Clay McIlrath — Sun, 02 Jan 2011 20:17:51 +0000

There are SO MANY different types of lightbox scripts in the wild, and while most of them are absolutely fantastic (shadowbox being one of my favorites) most of them are very limited in the control that they give you over the style, function and code. To make things worse, most of these lightbox scripts are also 5k or bigger, which is 5k more than you need sometimes. If you’re like me, and you do a lot of customization or want to tweak your code to be as fast as possible, then you’ll want this simple little jquery lightbox plugin. Style your lightbox exactly how you’d like and then simple invoke the modal() function and you’ll be able to trigger the lightbox.

jQuery.fn.modal = function() {
	return this.each(function(){
	var ah = $(this).height();
        var wh = $(window).height();
        var nh = (wh/2) - (ah/2);
 
        var aw = $(this).width();
        var ww = $(window).width();
        var nw = (ww/2) - (aw/2);
 
        // Trim body height, append overlay, and disable scrolling (this can be undone with a custom close button)
        $("body").height(wh).css('overflow','hidden').append('<\/div>');
        $(".overlay").fadeTo("slow", .8);
        $(this).css({'top':nh, 'left':nw}).fadeIn("slow");
	});
};

This code is what i use for the overlay, you can customize as you’d like. The actual div is appended to the body with JavaScript.

.overlay {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.8;
	filter: alpha(opacity=80);
}

This is an example of a modal/lightbox i did using this plugin. Very simple CSS:

.modal {
	background: #00121b;
	min-height: 54.5em;
	width: 56.5em;
	border: 1px solid #111e24;
	box-shadow: 0 0 1em #000;
	-moz-box-shadow: 0 0 1em #000;
	-webkit-box-shadow: 0 0 1em #000;
	display: none;
	position: absolute;
	z-index: 1002;
}

FBJS Slider Carousel

Clay McIlrath — Tue, 13 Apr 2010 04:50:25 +0000

I’ve made a nice little FBJS Slider that I use quite often for animation within facebook. I hope that little snippets and code like this will help other developers make more interested and appealing Facebook applications. If you want to hire or request help with fbjs, fbml, or facebook development in general, you can do so by contacting my company Chosen

First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.