buyco.ca

JavaScript Essentials: Compatibility

Buyco — Fri, 23 Jul 2010 21:30:05 +0000

Week 3 – JavaScript Essentials: Compatibility

Compatibility

Who are you programming for?

It’s one thing to create some amazing interactivity with JavaScript, it’s another if you can get it to work with all modern browsers, and it’s above and beyond when you also take into account the needs of browsers with JavaScript disabled.

Creating functionality to work on your site for one particular browser (and version) and for one particular operating system is easy. Getting it to work with other browsers on all operating systems is a more daunting task. Adding functionality to enable elegant error messages for browsers with JavaScript disabled is a work of art!

There are hundreds if not thousands of combinations of browser/operating system combinations. It’s our duty as web developers to ensure that our sites work with the most common browsers and operating systems, without sacrificing too much of the user’s experience. For this week’s session, we’re going to consider the following groups:

Modern browsers with JavaScript enabled

This group is going to be your best friend. These are the browsers which work exactly how you want them to, close to W3C spec and are compatible with almost every bit of modern JavaScript code–although their reliability can also be a big downfall in your habits. Always remember: Just because it works on Firefox on Windows, doesn’t mean it works for everything else.

Older browsers with JavaScript enabled

Although there are not too many users out there sporting the Internet Explorer 6.0 SP2, they shouldn’t be forgotten. It’s not difficult to test code for these types of browsers, you just have to not be lazy. But even if you are, there are alternatives to writing a completely different set of code just for compatibility’s sake.

Any browser with JavaScript disabled

This can include essentially any browser you can think of. This might be the easiest group to speak to because you can’t with JavaScript!

Honorable Mentions

There are some other types of browsers we are not going to consider for this particular week’s session, but it’s good to know that they exist.

Mobile Browsers

Here we enter the realm of mobile browsing. We are now dealing with even more platforms/operating systems, and types of mobile browsers. Now how many of them actually support JavaScript? This group I rarely worry about because I consider the demographic of my audience and this rarely falls within a project’s requirements. In the case of you having to build a site compatible with mobile devices, there are several emulators out there you can use on your computer to test the functionality of your site:

These are only a few of many emulators out there which you can use, but this is a good place to start.

Internet Explorer

Yes we will go over Internet Explorer, but IE should still be considered as a separate group only because of how easy it is to isolate this subset. Consider the following:

		
		
		
		Hello there

IE is the only browser you can explicitly call out like this. When writing your code, whether it is JavaScript or even CSS, remember you have this in your arsenal.

JavaScript Essentials: Event Handlers

Buyco — Fri, 09 Jul 2010 01:11:03 +0000

Week 2 – JavaScript Essentials: Event handlers

Events

What’s an event?

Exactly what you think it is. They are occurrences of actions happening on a web page. They can be triggered by a user or by the webpage itself. Some of the most commonly known events are ONLOAD, ONCLICK, and ONMOUSEOVER. Certain elements on a page can trigger any or many of these events. JavaScript has the ability to detect these events and may be utilized to execute functions based on these triggers.

List of common events

This is not comprehensive, but I’ve included several common events based on the element.

A

onMouseOver

Trigger: when you move your mouse over

onMouseOut

Trigger: user moves mouse off of element

onClick

Trigger: user clicks on the element
IMG

onMouseOver

Trigger: when you move your mouse over

onMouseOut

Trigger: user moves mouse off of element

onClick

Trigger: user clicks on the element

onLoad

Trigger: when the element is loaded
INPUT

onMouseOver

Trigger: when you move your mouse over

onMouseOut

Trigger: user moves mouse off of element

onFocus

Trigger: user focuses on an element

onBlur

Trigger: element loses focus

onKeyUp

Trigger: user is typing and after a key press

onKeyDown

Trigger: user is typing and on key press
SELECT

onChange

Trigger: user changes the selected value

onFocus

Trigger: user focuses on an element

onBlur

Trigger: element loses focus
FORM

onSubmit

Trigger: user attempts to submit a form
BODY

onLoad

Trigger: when the page is completely loaded

onUnLoad

Trigger: user leaves the page

A list of events can be found on the W3C website: http://www.w3.org/TR/DOM-Level-2-Events/events.htm. It is also important to understand that not all browsers handle events the same. An example reference can be found here: http://www.quirksmode.org/dom/events/index.html.

Event Handling

There are several ways to handle these events. Now that you have an understanding of what can trigger these events, we’re going to attempt to catch them and do something. For the sake of simplicity, we will just execute alert(‘Hello World’); for the next exercise. Each time an event is triggered, we will pop up a JavaScript dialog box which says “Hello World.”

Example: Anchor Events

Consider the following markup:

Hello there

This is the title

This is a paragraph with a link

We are going to change line 8 and add some event handlers:

This is a paragraph with a link

Try it for yourself. In the first example, when you click “with a link,” the dialog box should pop up. In the next, as soon as you move your mouse over the link, the dialog box should pop up. In the final example, when you move your mouse off the link (after it being over it), the dialog box should pop up.

The same method can be used with other event handlers where we directly input the JavaScript code in a new attribute in the element defined by the event handler name. For the most part this works just fine, but there are several reasons why we don’t want to do it this way:

Designers aren’t developers

A designer doesn’t always understand how the functionality of the page works. If he/she makes a change to a link with explicit event handlers defined, unexpected errors may occur.
Content management systems

Not all CMSs honor inline JavaScript and may remove it from the HTML.
Page overhead

Adding inline code adds additional overhead to your markup.
Coding standards

There are no real coding standards for JavaScript, except for the peace of mind knowing your logic is separated from your view. It makes things easier down the road if you need to make updates to your code. (ref: MVC architecture)

With browsers being updated very frequently, and functionality for JavaScript compatibility always on the bend, consolidating your code into one place makes things easier to update and makes your code much more scalable. The MVC concept works well with respect to JavaScript and although not completely necessary, it can make your life a lot easier in the long run.

Example: Unobtrusive Anchor Events

When we separate our JavaScript code from our HTML markup, we still need to listen to those event triggers. Unobtrusive JavaScript is centered around the idea of separating functionality and form; behavior and presentation; controller and view; etc. We will continue with our example with anchors, and do the same with unobtrusive JavaScript.

In the previous week’s topic, we discussed element selection. We are going to use the same ideas and incorporate event listening.

Consider the following markup:

Hello there

This is the title

This is a paragraph with a link

To simplify this example, we are going to take into consideration the pure JavaScript “domload” function which is called on the dom load referred to in Week 1′s workshop. For our prototype and jQuery examples, we are going to use their respective “domload” functions. We are then assuming this code will be placed in the document’s HEAD.

We will also be calling the following function when these events are triggered:


					// our hello world function
					function helloWorld(e) {
						alert('Hello World');
					}

Example: Listening to “onClick”

Pure Javascript

					// our domload function from Week 1
					initDOMLoad(function() {

						// check what kind of event listener function we need to call
						var m;
						window.addEventListener ? m = true : m = false;

						// select the link
						if (document.getElementById) {
							var objLink = document.getElementById('mylink');

							// use appropriate event listener
							if (m) {
								objLink.addEventListener('click', helloWorld, false);
							}
							else {
								objLink.attachEvent('onclick', helloWorld);
							}
						}
					});

Prototype

					// listen on dom load
					document.observe('dom:loaded',function() {

						// select the link and listen on click
						$('mylink').observe('click', helloWorld);
					});

jQuery

					// listen on dom load
					$(document).ready(function() {

						// select the link and listen on click
						$('a#mylink').click(helloWorld);
					});

Example: Listening to “onMouseOver”

Pure Javascript

					// our domload function from Week 1
					initDOMLoad(function() {

						// check what kind of event listener function we need to call
						var m;
						window.addEventListener ? m = true : m = false;

						// select the link
						if (document.getElementById) {
							var objLink = document.getElementById('mylink');

							// use appropriate event listener
							if (m) {
								objLink.addEventListener('mouseover', helloWorld, false);
							}
							else {
								objLink.attachEvent('onmouseover', helloWorld);
							}
						}
					});

Prototype

					// listen on dom load
					document.observe('dom:loaded',function() {

						// select the link and listen on click
						$('mylink').observe('mouseover', helloWorld);
					});

jQuery


					// listen on dom load
					$(document).ready(function() {

						// select the link and listen on click
						$('a#mylink').mouseover(helloWorld);
					});

Example: Listening to “onMouseOut”

Pure Javascript

					// our domload function from Week 1
					initDOMLoad(function() {

						// check what kind of event listener function we need to call
						var m;
						window.addEventListener ? m = true : m = false;

						// select the link
						if (document.getElementById) {
							var objLink = document.getElementById('mylink');

							// use appropriate event listener
							if (m) {
								objLink.addEventListener('mouseout', helloWorld, false);
							}
							else {
								objLink.attachEvent('onmouseout', helloWorld);
							}
						}
					});

Prototype

					// listen on dom load
					document.observe('dom:loaded',function() {

						// select the link and listen on click
						$('mylink').observe('mouseout', helloWorld);
					});

jQuery

					// listen on dom load
					$(document).ready(function() {

						// select the link and listen on click
						$('a#mylink').mouseout(helloWorld);
					});

JavaScript Essentials: Execution Order, Selectors, DOM manipulation

Buyco — Thu, 08 Jul 2010 00:33:47 +0000

Execution order

When does the script get executed?

It’s important to understand that JavaScript code will be run at different times during the page’s loading process, or even after. You can place code in a number of areas of a page: within the HEAD tag, the BODY tag or explicitly in elements within the BODY.

Consider the following markup:

Hello there

Or you can put it in an element like this link

Order of script execution

tag
tag
on DOM load
on PAGE load

This is most simply the order of script execution on your page. Before we get too deep into the mechanics of event handling, I will explain in the simplest terms what DOM load and PAGE load is. They are not specific areas where you can drop your code, rather they are points in time during the process of a browser loading the page and it’s contents. You can write scripts in the HEAD and BODY which tells your browser to execute scripts at those two points in time.

The moment at which the document is loaded and ready, but before any external references are even downloaded yet, is DOM load. By external references, I am talking about images, referenced style sheets, etc. After the document is ready, your browser starts to download those external resources (images, stylesheets, etc). When those resources are completely downloaded and displayed, this is the point in time when the PAGE is loaded.

Utada In The Flesh Experience

Buyco — Tue, 26 Jan 2010 22:33:29 +0000

My feet were so sore, my legs were numb, and I was tired as hell. The trip started off with a drive to Seattle, WA leaving from Vancouver, BC at around 9:30am. Seems pretty early to me especially if we wanted to be at the Showbox by 4, but it gave us a chance to stop by the outlets on the way—where I got an awesome Burberry sweater for the low discounted price of $200. After explaining to Will we’d be late, and laughing at the picture of his reaction when we told him, we made our way downtown.

It was only 2:30pm when we circled 1st and Union, so we thought we were doing fairly well in terms of timing for the show. 10 mins of debating on parking was followed by a stroll by the Showbox just to check out the scenery. Unfortunately the scenery included a lineup on the street for the show. There were only about 10 people there, but we didn’t want to take any chances and waited in line anyways.

While standing in line with Will, hours before the show even started, I saw one of my old coworkers lining up to go to the same show. What a coincidence! Later on in the evening I ended up seeing another coworker there too. After a quick exchange of our expectations on how awesome the show was going to be, we went back to our spots in line.

At around 4:30pm we got the option to go into the bar (Green Room) beside the venue where we’d get even better priority over those in line. Interesting way of doing things actually—instead of waiting in the line, they offer you a seat in the bar and give you a number (1-5 based on priority). When they start letting people in for the show, they first allow those at the bar in based on their number. It’s a nice way to keep those, who show up early, nice and comfortable before the show. So, for the next 2 and a half hours we had some drinks, talked about how awesome the night is going to be, and played a bastardized version of Chai Mui.

They finally started letting people in at around 7pm, starting with us in the Green Room. After the quick frisk, and ticket check, there was a mad rush to the front of the stage to get the best spots. Lucky us, we found spots just off center and behind a couple midgets (not literally, but rather—hilariously). The four of us had a strategy of creating empty space in the middle of us, allowing room for crumple during the concert—which eventually worked well! After the first hour of waiting, we started getting impatient.

My feet were so sore, my legs were numb, and I was tired as hell.

DJ Mike Rizzo jumped on stage and started amping up the crowd. Unfortunately, it didn’t work on me because I don’t listen to the radio and reason being: top 40 doesn’t entertain me. An hour later I could feel the tension in the crowd and within me. We were already waiting for 5 hours and still no sign of her. At about 9:15pm, Mike blurts out—she’ll be out in 15 minutes! The whole venue goes crazy!

15 minutes later he says: “She’ll be here in 15 minutes!”

Another uproar, but I stood there pouting. At this point in my head I’m thinking, holy crap we’re going through a lot for this show. After 15 minutes of an internal debacle with myself, Mike leaves the stage and the roadies start setting up! My resting heart rate just jumped from 75 to 100!

For about 15 minutes, I worry that I’m going to pass out from all the excitement—then the music starts, and then Utada Hikaru kicks off with On and on! I can’t even explain how I felt, how it was like to be arms length away from her, to look in her eyes and receive the most beautiful smile back!

The show only got better and better. After a few English songs, she starts some dialogue and even at the introduction to her Japanese songs, the crowd went nuts! I went nuts! She did a few songs while on the keyboard as well. And I quote, “This is a keyboard!” When she started singing First Love I was afraid I wouldn’t hear her because of all the crowd singing along, but her voice of course broke through and was amazing! Every song she sang brought chills down my spine. Hikki’s voice was perfect all night, and every song sounded as beautiful as the first time I heard them.

Throughout the concert, cameras were disallowed, and I’m okay with that. There’s no way I’d forget those memories! There was, although, someone between us and the stage beside the bouncer taking photos. In between songs I looked… and it was Keiko Fuji aka Utada Junko, Hikki’s mom! I was in the presence of greatness! Being in such an intimate setting is beyond words. The venue was not very big, but it was packed! I’d compare it to about double the size of the venue stages during her United tour. We were up at the front with our eyes glued to Hikki, but I did get a chance to take a glance behind us and there wasn’t an inch of unmanned/unwomaned floor!

As the concert was coming to a close, she said her goodbyes and left the stage. Then we kept screaming for an encore. After about 2 minutes of screaming her name they came back on stage! Hikki ended off with Simple and Clean (with the awesome la da da da da da da ending). It looked like she grabbed her bag to leave, but it was actually a bag of 6-8 signed kumabucks balls! She began throwing them into the crowd and I was afraid I’d get trampled by other frantic fans.

So, you can think otherwise, but this is how it played out: she had a few left, and came back to the mid-left side of the stage (where we were). As she was grabbing a ball I was looking directly at her and she looked up, saw me and smiled, then tossed me the ball. It was all in slow motion in my brain and I’ll never forget those 5 seconds of my life (I sound like a creep right now lol). I couldn’t believe it, but it happened… and now my friends and gbones beside me at the concert hate me forever.

It was the most amazing night ever! I had so much fun, and couldn’t have asked for more (well, I could but that’d just be greedy). I don’t think I could ever go to another concert and have the same connection or feeling of bliss like I did at this one.

My feet were so sore, my legs were numb, and I was tired as hell.

…3 hours with Utada’s voice was well worth it

Links:
Official Tour Photos
Video clips and audio (removed these links, I guess you had to be there)

Leveraging JavaScript Frameworks to Make Your Life Easier

Buyco — Fri, 28 Aug 2009 09:51:44 +0000

Framework Preface

Are you a hardcore JavaScript/AJAX programmer who knows no bounds? Do you spend meticulous hours perfecting your code so it works on all browsers? I used to be like that. I still am, but the only difference is that I now don’t spend hours testing my code. This is mostly attributed to the Prototype framework. Today I’m going to go through a few features and benefits of using a JavaScript framework over writing custom code yourself which may require testing and re-testing. Of course there is still the need for testing even when using a framework, but the difference is that there will be a lot of cross-browser compliance which is no longer needed.

There are other frameworks out there like jQuery and MooTools, but today we’ll start with what I’m more familiar with and with what I first started with. The documentation for Prototype is very thorough and I don’t want to explain everything, so I’ll start off with the major items which will change your JavaScript programming life!

JavaScript Framework? Double you tee eff?

You’re asking the right question. For the longest time I was always stuck in my own little JavaScript world where everything I coded was job-specific, customized, and with my own techniques. There were also little quirks which JavaScript had when rendering/running under different browsers/operating systems–these too were also solved using my own super secret techniques. What Prototype does, as well as other JavaScript frameworks, is give you the simple building-blocks which solve those quirks without you even needing to address them specifically. For example, if you want a div element to show or hide, you simply select the element and program the action. Sounds simple, but selecting that element requires some browser detection and compatibility verification. Let’s make a couple comparisons..

Make your life easier

Continuing on with the previous example, let’s select that div element given the following markup:


	Lorem ipsom dolor sit amet

We’re not going to think of any invokers right now, let’s just try to hide the div. Here is what the JavaScript may have looked like prior to using Prototype:

var objDivId = 'copy';
objDiv = document.layers ? document.layers[objDivId] : document.all ? document.all[objDivId] : document.getElementById ? document.getElementById(objDivId) : null;
objDiv != null ? objDiv.style.display = 'none' : '';

Obviously this isn’t the most efficient way of doing this, ideally I would create a function, but this is the shortest of shorthands to select and hide the div element while respecting all web browsers. Now let’s have a look at how this would look using the Prototype framework:

var objDivId = 'copy';
objDiv = $(objDivId);
$(objDivId) ? $(objDivId).style.display = 'none' : '';

For this example, the difference is quite apparent. By using the $() utility method we can quickly select that div element without the worry of what browser is being used. Now, let’s see what happens when we try to hide more than one element. First here’s the HTML markup:


	Lorem ipsom dolor sit amet


	This is a button


	This is a preview section

I’m going to create a function to hopefully help the cause of the traditional JavaScript code and see how it compares to using Prototype. First the oldschool method:

function getObject(id) {
	return document.layers ? document.layers[id] : document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;
}
var objDivIds = new Array('copy','button','preview');
for (var i=0; i
And now the code for doing the same thing using Prototype:
$('copy','button','preview').invoke('hide');

Say what!? Yeah, it’s that easy. The traditional method utilizes a function which will return the object instance. We then iterate through the three div elements and update each one individually.
In the Prototype version, we’re using a couple of included extensions. First, the selector $() utility method returns an Enumerable list of objects, and the hide function is invoked across all of those objects. Easy fo-sheezy.
There are also other ways of selecting multiple elements within a page. You can do this by applying some CSS knowledge. For example, let’s attach a tracking script to all of the links within a page. We want to first select all of the A elements, then iterate through them by adding a short querystring tag to it’s href attribute.
var _TAG = '?source=buyco.ca';
$$('a').each(function(objA) {
	var url = objA.getAttribute('href');
	objA.setAttribute('href',url+_TAG);
});

This time I’m using the $$() utility method which will select a collection of elements. It takes in CSS-style selectors, such as: ‘a.external’ (select all a elements with the classname external), or ‘div#nav ul li’ (select all list items in the div with the id of ‘nav’). The full documentation on this can be found on the Prototype API documentation website.
Post face?
These are two short examples of a few things you can do (quicker) by utilizing a JavaScript framework. You will spend less time focused on browser compliance and more on the functionality and interactivity of your websites. It’s not a quick transition, but practice does make perfect! The documentation on the Prototype website is awesome, and I still find myself going back to learn new things. The main point I’m trying to get across here is that there are tools out there to make our lives (as web developers) a whole lot easier. Don’t get stuck in a place where you’re too comfortable or you’ll end up writing IE6-compliant code forever. Spend your time on more important things like user-experience, and wicked-awesome-flashy-effects. Your site visitors will thank you:)

Optimizing with Image Sprites and CSS for Beginners (Part 2)

Buyco — Thu, 27 Aug 2009 09:34:02 +0000

I know what a sprite is, now what?

In Part 1 of Optimizing with Image Sprites and CSS for Beginners I went through an explanation of what sprites are, how they work, and why to even bother. This time around we’re going to jump into some implementation of these sprites. I am still calling this Beginner stuff (only so that I can hit everyone with some hardcore code in the future), but if you happen to get confused follow me on Twitter and ask away!

What am I going to use the sprite for?

First let’s figure out what we’re even going to use the sprite for. When you’re ready to start slicing up your design, use your intuition and think of the graphical elements which will be used and reused on your site; this usually includes your navigation and maybe some buttons. In this example I’m going to use a sprite to create a “close” button and a textual navigation bar (SEO FTW). Here’s what I’ll be working with:

Let’s open with a close

This is the close button which I want sprite-ized:

Your processes may be different, but I always start off with the HTML markup. The reason is because I want it as clean as possible and easily accessible for our search crawler friends. With a few quick keystrokes and a little touch of magic, this is what my markup for the close button looks like:

Close

That was easy! Now let’s fancy this up with a bit of CSS magic and add the graphical close icon:

a#close {
	display: block;
	height: 14px;
	line-height: 14px;
	font: 11px 'Verdana','Arial',sans-serif;
	padding-left: 20px;
	background: url(sprites.gif) -32px -100px no-repeat;
}
a#close:hover {
	background-position: -32px -114px;
}
a#close:active {
	background-position: -32px -128px;
}

Wait.. what?

I skipped about 20 steps there, so let’s go through this line by line:

	display: block;

We need to give our link element layout so the graphic doesn’t get cropped. Display as block, kablammo problem solved! Almost..

	height: 14px;

The close button consists of a 14×14 area on our sprite map. We need to set the height so we don’t get any cropping.

	line-height: 14px;
	font: 11px 'Verdana','Arial',sans-serif;

This part is a bit arbitrary. I set the line-height just so the text is vertically positioned evenly, and the font is a tribute to Ikea (don’t hurt me ).

	padding-left: 20px;
	background: url(sprites.gif) -32px -100px no-repeat;

The fun part! The padding is there so that the text for “close” is shifted to the right and not disturbing the space for the graphic. But where the hell did I get the -32px -100px from? It’s the sprite’s position! 32 pixels from the left, and 100 pixels from the top. An easy way of finding your graphic positions in your sprite map is to open up the file in Photoshop, use the rectangular marquee tool (M), then start a selection from the top left of the document and end at the topmost and leftmost of the graphic. Check your Info window (F8) and take note of the width and height of your selection– and there are your positioning coordinates!

a#close:hover {
	background-position: -32px -114px;
}
a#close:active {
	background-position: -32px -128px;
}

These modifiers are just added to give a hover and click effect to the button. The only style changing here is the position of the background which then points to the coordinates of the hover and active states. Put this all together and you have yourself a close button!

I obviously geared the markup for this single example, not taking into account that you may want to reuse the code. With just a small change to select the class of the elements instead of styling based on ID, you can have multiple instances of this button:

a.close {
	display: block;
	height: 14px;
	line-height: 14px;
	font: 11px 'Verdana','Arial',sans-serif;
	padding-left: 20px;
	background: url(sprites.gif) -32px -100px no-repeat;
}
a.close:hover {
	background-position: -32px -114px;
}
a.close:active {
	background-position: -32px -128px;
}

For you newbies: it’s the dot.

Navigation Sprite’ing

This may seem a bit more advanced, but I am using very similar techniques as the example above. Once again, I’ll start off with the markup:


	
		Link 1
		
		Link 2
		
		Link 3
		
		Link 4
		
		Link 5

Wow that looks like some dirty code. Forgive me for the empty span tags, it’s getting late. I’m assuming everyone’s navigation markup looks pretty similar to this, so it shouldn’t be much of a stretch to update your style sheets. Speaking of which, here they are for this example:

div#navigation {
	font: 11px 'Verdana','Arial',sans-serif;
}
div#navigation ul {
	margin: 0;
	padding: 0;
	height: 50px;
	background: url(sprites.gif) 0 0 repeat-x;
	float: left;
	list-style-type: none;
}
div#navigation ul li {
	float: left;
	display: block;
	width: 50px;
}
div#navigation ul li.splitter {
	width: 2px;
	height: 50px;
	background: url(sprites.gif) -7px -100px no-repeat;
	float: left;
}
div#navigation ul li a {
	display: block;
	height: 50px;
	line-height: 50px;
	color: #606;
	text-decoration: none;
}
div#navigation ul li a:hover {
	background: url(sprites.gif) 0 -50px repeat-x;
	color: #404
}
div#navigation ul li a span	{
	display: block;
	padding: 0 5px;
}
div#navigation ul li a span#nav-first {
	display: block;
	position: absolute;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) 0 -100px no-repeat;
}
div#navigation ul li a:hover span#nav-first {
	background: url(sprites.gif) -16px -100px
}
div#navigation ul li a span#nav-last {
	display: block;
	position: absolute;
	margin: 0 0 0 44px;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) -10px -100px no-repeat;
}
div#navigation ul li a:hover span#nav-last {
	background: url(sprites.gif) -26px -100px;
}

Quite a bit of styles. It’s okay though, you’ve obviously gone through the first example a million times already, so this should be a breeze.

Now, a lot of the styling is there just for aesthetics so we’ll skip all of that. Let’s just jump to the areas where we’re using sprites:

div#navigation ul {
	margin: 0;
	padding: 0;
	height: 50px;
	background: url(sprites.gif) 0 0 repeat-x;
	float: left;
	list-style-type: none;
}

Here we are actually going to be repeating the sprite as the background in the x direction because I want this navigation bar to expand in the event of new sections. When creating a sprite with the intention of repeating it as a background, keep in mind that they can only be repeated in one direction: x or y. You cannot repeat a slice of a sprite in both directions, otherwise you may have other graphics in the sprite included in the repetition. Looking back at the original sprite, this background can be repeated in the x direction since there are no other slices to the left or right of that area.

div#navigation ul li a:hover {
	background: url(sprites.gif) 0 -50px repeat-x;
	color: #404
}

Skipping all the positioning and font styles, I want to add a hover effect. Once again I’m utilizing a repeating background in the x-direction. The position is found using my marquee technique above.

div#navigation ul li.splitter {
	width: 2px;
	height: 50px;
	background: url(sprites.gif) -7px -100px no-repeat;
	float: left;
}

I thought the navigation bar would look a little weird without having some kind of splitter between each option, so the styles above should take care of that. Here I am actually specifying the width because I do not want the background to repeat.

div#navigation ul li a span#nav-first {
	display: block;
	position: absolute;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) 0 -100px no-repeat;
}
div#navigation ul li a:hover span#nav-first {
	background: url(sprites.gif) -16px -100px
}
div#navigation ul li a span#nav-last {
	display: block;
	position: absolute;
	margin: 0 0 0 44px;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) -10px -100px no-repeat;
}
div#navigation ul li a:hover span#nav-last {
	background: url(sprites.gif) -26px -100px;
}

Here I’m just being a little fancy and adding the smooth bits at each end of the navigation bar. Essentially the same techniques used above.

Holy Crap!

Yeah, it’s a lot to take in but I didn’t lie when I said this was a beginner guide because I assume everyone reading this is an expert with CSS.

The examples above are merely examples. I hope no one copy-and-pastes the markup because it won’t work for your site (figuratively speaking). I hope you learn from what was presented above, test out your own techniques, and apply it in your daily web development ventures. The best way of learning is to do it yourself, this guide is only here as a guide and also because I have nothing better to do at 2:00AM on a Wednesday morning

Day out in Victoria

Buyco — Tue, 18 Aug 2009 00:22:15 +0000

This weekend it was suggested to spend some time in Victoria and do a bit of local touristing. It’s a pretty close destination and therefore I didn’t think through the planning so much. I should have.

A bit of a preface: to get to Victoria it’s about a half an hour drive from Vancouver to Tsawwassen (/teh’wa:sehn/, /seh’wa:sehn/ or /tseh’wa:sen/) then an hour and 30 minute ferry ride to Swartz Bay, then another half hour drive to get to Downtown Victoria. Totalling to approximately 2 and a half hours of travel. Wrong.

The day before we left I attempted to reserve a spot on the 10am ferry so we wouldn’t have to worry about any waits. This didn’t work because the ferry reservation site was down–of course. I figured it shouldn’t be too busy getting to Victoria on a Sunday since it’s usually the day everyone comes back to Vancouver. Turns out I was right… but that only helped half of my cause (since we had to take a ferry back to Vancouver later that night).

Jumping ahead about 3 hours, we found ourselves in the middle of downtown Victoria. It had an old town feel, with city parking. No damn parking anywhere! For about half an hour we were trying to find street parking, and finally gave up and proceeded to search for underground pay parking. The first parkade we found was a diamond in the rough… free parking on Sundays! After settling in, we began the day…

We went to eat at the first cafe we saw and hot damn it was good. Ham and cheese omelette for me, veggie omelette for her. When eating under the hot sun, I do not recommend eating cheese. Take that advice with you and learn from my mistakes. After breakfast we walked around for a bit. There was a marketplace which was like Richmond nightmarket minus all the asian people, the horrific stage performers and food. Pretty bland if you ask me. From there we went around and took some pictures of the dragonboat festival, the parliament building and the Fairmont hotel.

After a short debate, we went to the museum. I haven’t been to a museum in about 20 years and I don’t know why. It was amazing! To stand in the presence of artifacts dating several millennia ago set me aback. These were all from the British Museum’s “Treasures” exhibit, featured in the Royal BC Museum. I think my favorite pieces were from ancient Egypt and ancient Rome. To see these artifacts so close and personal was an experience to me. I never thought I’d enjoy a visit to the museum so much. Easily on the top of my list for this visit.

We then did a bit of walking around, ran into some street performers and I found myself a replacement 4x4x4 Rubik’s cube (Rubik’s Revenge). The last one was demolished by my mom. I’ve never seen anything explode in someone’s hands like that before..

Finally it was time to make our last runs and stopped by the winery. This was a first for me and I had the biggest urge to just run through the grape field. No reasoning at all… I just want to do it. If I had to be somewhere fast, I would imagine myself surrounded by grapes.

Anyways…

The trip home wasn’t very awesome. Like I said above, “I figured it shouldn’t be too busy getting to Victoria on a Sunday since it’s usually the day everyone comes back to Vancouver.” We waited in the car for about an hour before we got to the actual toll to pay for the ride back home. From there we waited in line for about another two hours waiting for our ferry. Two hours later, we made it into Vancouver.

Putting this all together, there was about 8 and a half hours of transit in this day trip. We spent less time being tourists than we did traveling. How sick is that? But in the end, I thought it was a nice trip out of the city and I got to enjoy a beautiful view on the ride back.

Off to the city of bright lights and indecent acts of debauchery: Las Vegas

Buyco — Wed, 29 Jul 2009 04:46:01 +0000

I haven’t written anything personal on this blog of mine, but right now I have a few minutes to sit down and kill so why not.

I hardly get excited about going on any trips, especially to those destinations within continental North America. It’s weird that I was more excited about going to Calgary to visit some of my close friends, than I am leaving to the city that never stops partying. Why is that?

I’ve travelled quite frequently on business trips, and this is one of the few where I don’t have to speak about web development, and I don’t have to be at an 8am meeting, and I don’t have to set up a booth, and I specifically don’t have to give a damn about how I behave. So why do I not feel excited? I think work ruined it… I think it’s because I still have that routine mentality that as soon as I land, I’m going to have to do work. I’d like to say, this time I don’t, but unfortunately I promised some slides and estimates by tomorrow morning. What was I thinking lol.

Geez, 4 hours into my vacation and I’m already talking about work. Anyways…

I’m heading to Vegas in the morning and I expect to be in full party mode by 11AM. There should be quite a few of us down there, and by some miracle my sister will be down there too. Have you ever partied with your sibling? Have you ever partied with your sibling in Vegas? I expect no good to come out of this…

I am going absolutely nowhere with this entry lol, and it could be quite possibly be because of the heat… or the hair dye seeping into my brain. Yes, I dyed my hair on Saturday and again today… 3 days later. Don’t judge.

Note to self: do not start a blog post without thinking about what to say first.

And my final note… things to remember to not bring:

a camera
my inhibitions
a sense of self-respect
responsibility
decision making skills

That is all. Peace out, INTERNET.

Optimizing with Image Sprites and CSS for Beginners (Part 1)

Buyco — Wed, 01 Jul 2009 00:20:59 +0000

What the hell is an image sprite? Why do I care? How do I use it?!

That’s probably the same thought process I had when I first started reading about image sprites. After a few minutes of investigation via Google, I wanted to try to implement this technique every and anywhere possible on my websites. This isn’t necessarily a required method of implementation of a web site but it is still something that every web developer should at least have an understanding of.

In this 2-part series I’ll go over what an image sprite is, when to use them, how to use them, as well as provide a few examples.

What is an image sprite?

Back in the olden days (circa 90s), multiple images were merged into a single graphic file to quickly composite 2D games. Here is an example [source: wikipedia]. Certain parts of this single graphic would be extracted and used to animate objects, characters, etc. We can utilize the same methodology with our websites and optimize load times (as well as provide an easy means of updating graphics when the times come).

How does an image sprite work in the web-world?

One of the greatest things to happen to a web developer / designer is the invention of Cascading Style Sheets. We can use CSS to pick certain coordinates within a sprite and display those areas on our websites. It may sound a bit tedious to have to find the pixel by pixel locations of every sprite you want to use, but in doing this you may be able to shave off precious load times of your web page.

Decreasing load times? Wtf?

When you want to increase the performance of a website, one of your key objectives is to reduce the amount of time it takes for a particular page (or pages) to load. One way is to keep the number of HTTP requests to a minimum. Any time you insert an image, or include a JavaScript file, or any other file for that matter, it is an additional HTTP request. In the nature of a sprite, you are making a single HTTP request for that graphic, then referencing different parts of it to be displayed on a web page. This works great granted that the size of the single graphic is less than the size of all it’s containing graphics individually (we’re talking bits and bytes here, not lengths and widths).

Another potential advantage is browser caching. Take, for example, this navigation bar:

In this case we assume that this navigation bar is split up into 8 images: 4 for the “default state”, and 4 for the “hover state”. When the user hovers their mouse over a particular image, the “hover state” image is loaded on the fly. That’s a single HTTP request for that extra image. If a user does not hover over all the graphics, not all of them will load, so basically this page will only load the additional images if it *really* needs to. But still not the best situation…

Each graphic is around 1.097Kb – 0.997Kb totaling 8.11Kb. In actuality, I used a single sprite totaling 3.292Kb. By loading even only the “default state” images, we are still reaching a size larger than the single sprite.

Applications

That is only one situation where you can really utilize the benefits of using a sprite. Using them for navigation bars with hover states is probably the most common use, but some sites have taken it a step further.

Take Google for example. Shaving off a single millisecond of load time of their site can translate into some amazing results (probably because they get millions of hits a day). You may not see this type of traffic, but in either case you still don’t want to have a slow website.

Back to my point, lets have a look at a screenshot of my iGoogle homepage:

Looks like a simple logo right? In actuality, the logo is a part of an image sprite:

All those smaller icons are used as elements within the page. With some fancy CSS code-work, only a single image is used on this page! (That’s actually a lie since I have multiple gadgets running with external image sources).

Other high-volume sites like Yahoo and eBay also use image sprites so why don’t you!?

Tune in next time as I go through a few implementation examples: Optimizing with Image Sprites and CSS for Beginners (Part 2)

Another Review: MadCatz SF4 FightStick Tournament Edition

Buyco — Tue, 05 May 2009 03:57:33 +0000

How do you expand on describing the PS3 MadCatz SF4 FightStick Tournament Edition as.. AWEEEEEEESSSOMMMMEEEEE!!!?! Hmm… I’ll try…

I still have yet to personally own one of these badboys, but I did get a chance to go a few hours on one (more like 10 hours of Street Fighter 4). I can’t really comment much on the packaging, or the experience of opening it, which I’m sure will be the most fulfilling thing you do this year, but I’ll do my best to give some first thoughts on using it.

I must preface this with the fact that up until maybe 6 years ago I was more comfortable using a game pad rather than an arcade stick. But needless to say, I’ve been around the block for the last few years and have had a chance to play with North American-style as well as Japanese-style arcade joysticks. Purely based on my experience, and not expertise, will I give the most unbiased review on the FightStick.

Build

When you first pick this puppy up, you’ll realize immediately that it’s no lightweight. The FightStick can be described as sturdy. I wont say that it’s heavy, but even if it was then it would be for good reason. When you play Street Fighter in an arcade, you dont expect the console to move when you jerk at the joystick. Same goes with this stick–it doesn’t move.

A really cool feature for this controller is that there is a compartment in the front where you can hide the cord when travelling (handy for taking to tournaments like HGC). It also is nice for when you just put it away when not in use. Ideally it would be wireless, but I won’t complain.

The top surface of the control is very smooth and very similar to an actual arcade machine. It also helps that the joystick itself is a true Sanwa stick! The only oddity would be the two extra buttons, but I’ll get to that. The fact that this stick is easily moddable, no one should have complaints with the build or the components.

Experience

It’s an arcade in your livingroom (with the addition of the 3P and 3K buttons).

Buttons

Speaking of buttons, that would be my first complaint. Yes, a complaint. I’m complaining because the buttons are perfect. They are extremely sensitive and even with a slight press will the input be processed. This is something which I am not used to and frequently had issues with. I’m used to resting my fingers in the divets of the buttons and pressing as I see fit. With the FightStick you’re not given such convenience. This is a player preference, so I can’t really say this is something I would deter me from buying it.

Sanwa <3

The stick is also perfect. The Sanwa stick sits in a square gate which may take some getting used to if you have only played on the common North American-style octo-gate. The throw is really short with this stick and allows for quicker execution, or if you have fat hands and horrible dexterity–a lot of random jumping. I don’t have fat hands or horrible dexterity, but it still took a few rounds to really get used to the sensitivity. I just found it really weird using a joystick that actually worked.

Each direction in the gate has a difinitive clicking sound. I personally love this. No guessing if you actually moved in a direction. With the input clicks sound, you have no excuse. Play with this stick and put away your joystick excuses.

3P/3K

I always liked having a 3P/3K button because I’m a lazy ass. If you’ve ever used an X-Arcade stick, you’ll know that the 3P/3K buttons were easily accessible with your right thumb and somewhat out of the way of the other buttons. With the FightStick TE, this is not the case. The 3P/3K buttons are right beside your HP/HK buttons. I can’t tell you how many times I accidentally 3K’d randomly because of the way my right hand sits. That’s just because I suck. Some people might have the same issue, so keep that in mind.

Connectivity

Yep, it’s wired. Should it bug you? No. It’s a joystick which should be on a sturdy foundation. If you got complaints, shut the fuck up. In no way, shape or form should this affect your gameplay–that is unless you’re one of 3 people in the world who have a 100ft wide screen and need to sit 300ft away from the screen..in that case, buy an extension.

Final Thoughts

I only have one final thought… if you can somehow get your hands on one of these puppies, don’t waste any time and pick one of these bad boys up. You won’t find a setup like this anywhere else unless you make it yourself. Even then, this FightStick is fully customizable. Every button, the faceplate, even the Sanwa stick can be replaced with replacement parts.

It’s like build a bear…except it’s build a stick. It’s sick to think a stuffed bear would make a grown man happy, but adversely any time I use a TE I’m more than proud to have a FightStick wood.

buyco.ca

JavaScript Essentials: Compatibility

Week 3 – JavaScript Essentials: Compatibility

Compatibility

Who are you programming for?

Modern browsers with JavaScript enabled

Older browsers with JavaScript enabled

Any browser with JavaScript disabled

Honorable Mentions

Mobile Browsers

Internet Explorer

JavaScript Essentials: Event Handlers

Week 2 – JavaScript Essentials: Event handlers

Events

What’s an event?

List of common events

Event Handling

Example: Anchor Events

This is the title

Designers aren’t developers

Content management systems

Page overhead

Coding standards

Example: Unobtrusive Anchor Events

This is the title

Example: Listening to “onClick”

Example: Listening to “onMouseOver”

Example: Listening to “onMouseOut”

JavaScript Essentials: Execution Order, Selectors, DOM manipulation

Execution order

When does the script get executed?

Order of script execution

Utada In The Flesh Experience

Leveraging JavaScript Frameworks to Make Your Life Easier

Framework Preface

JavaScript Framework? Double you tee eff?

Make your life easier

Post face?

Optimizing with Image Sprites and CSS for Beginners (Part 2)

I know what a sprite is, now what?

What am I going to use the sprite for?

Let’s open with a close

Wait.. what?

Navigation Sprite’ing

Holy Crap!

Day out in Victoria

Off to the city of bright lights and indecent acts of debauchery: Las Vegas

Optimizing with Image Sprites and CSS for Beginners (Part 1)

What the hell is an image sprite? Why do I care? How do I use it?!

What is an image sprite?

How does an image sprite work in the web-world?

Decreasing load times? Wtf?

Applications

Another Review: MadCatz SF4 FightStick Tournament Edition

Build

Experience

Buttons

Sanwa <3

3P/3K

Connectivity

Final Thoughts