Of all the tools in my Web Developer’s Toolkit™, perhaps the most used, and the most useful, is a trick called the CSS Sprite. It’s an “advanced” technique that is actually deceptively simple, and leads to fantastic advantages in loading times of web pages.

First, a quick primer. A “sprite” doesn’t refer to a carbonated soft-drink, or a mythical fairy. It’s an archaic computer term that simply refers to a graphic, stored in memory, that can be drawn on the screen. Old video games would define regions of memory (later called a “sprite sheet”) that contain the individual frames of an animation, and by cycling through these regions, the objects on screen would appear to animate.

A sprite sheet (left) and the resulting animation (right). Super Mario is registered trademark of Nintendo Co., Ltd.

The relationship between video games becomes clearer when you think about these sprite sheets. Instead of producing an animation, we can use the technique to reduce code complexity, decrease loading times, improve accessibility, optimize the site for search engines, and provide a “rollover” effect (making the image appear to change when the user moves the mouse over it).

Getting Started

The first step is identifying the images. In the screenshot below, I’ve highlighted the items that I would replace with sprites on my company’s new web site. It’s important to note that these are layout elements. They are not a part of the content of the page, and will not change as frequently.

Click to Embiggen

In this image, the logo in the top left, styled text in the middle, and button will have better accessibility and search engine friendliness. The icons in the top right and center of the page will have improved loading times, and the large chili will benefit from easier positioning and smoother rendering.

You’ll notice I didn’t highlight the portfolio thumbnails in the bottom right. This is because these images are dynamically inserted by a script, and therefore likely to change. Making them sprites would make them harder to manage in the future.

The Markup

Now that we’ve identified our images, it’s time to write the structure of the page in (X)HTML. Essentially, you can treat every element as if it were a piece of text, as the text will be replaced with images when the page is displayed.

Here is the markup for the very top bar, where the logo and social networking icons are displayed.

<h1><a href="#" id="logo">Chili Code Solutions</a></h1>
<ul id="social-networks">
	<li>
		<a href="#" id="facebook" title="Join us on Facebook">
			Join us on Facebook
		</a>
	</li>
	<li>
		<a href="#" id="twitter" title="Follow us on Twitter">
			Follow us on Twitter
		</a>
	</li>
	<li>
		<a href="#" id="linkedin" title="Connect on LinkedIn">
			Connect with us on LinkedIn
		</a>
	</li>
</ul>

On a text-only browser, assistive screen reader, or search engine robot, these elements will be displayed as text. Accessible and search engine optimized in one fell swoop!

The Stylesheet

To replace the text with an image, we need to use a little CSS magic. This code is proven to work in all but the most obscure browsers.

/* For the logo */
#logo {
	display: block;
	text-indent: -9999px; /* Move the text left 9999px */
	overflow: hidden; /* Hide elements outside the block */
	width: 240px; /* Width of image */
	height: 40px; /* Height of image */
	/* Image */
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
}

This demonstrates the basic principle, but it is not a CSS sprite. The web browser will still make an HTTP request to load the image if it isn’t cached, and there will be no performance benefit.

Real Sprites

The social networking icons are best implemented as true CSS sprites. We can reduce load times, as well as create a rollover effect.

The sprite image is a combination of all the images, arranged into one, similar to the following:

The top row is normal, the bottom is for the mouse-over state.

The idea is we’ll use the background-position CSS property, to position the background inside the visible area.

Left: Normal style. Right: mouse-over style.

/* For the facebook icon */
#facebook {
	display: block;
	text-indent: -9999px; /* Move the text left 9999px */
	overflow: hidden; /* Hide elements outside the block */
	width: 34px; /* Width of image */
	height: 34px; /* Height of image */
	/* Image */
	background: url('images/social-networks.png');
	background-repeat: no-repeat;
	background-position: 0px 0px; /* Position Image */
}
#facebook:hover {
	background-position: 0px -34px; /* Position Image */
}

Now, when the image is hovered, the background position will change, and the “over” state will be displayed.
By combining the Facebook, Twitter, and LinkedIn into one image, you can reduce the number of HTTP requests, and simply position the background image.

/* Combine into one definition */
#social-networks a {
	display: block;
	text-indent: -9999px; /* Move the text left 9999px */
	overflow: hidden; /* Hide elements outside the block */
	width: 34px; /* Width of image */
	height: 34px; /* Height of image */
	/* Image */
	background: url('images/social-networks.png');
	background-repeat: no-repeat;
}
/* Facebook */
#facebook {
	background-position: 0px 0px; /* Position Image */
}
#facebook:hover {
	background-position: 0px -34px; /* Position Image */
}
/* Twitter */
#twitter {
	background-position: -34px 0px; /* Position Image */
}
#twitter {
	background-position: -34px -34px; /* Position Image */
}
/* LinkedIn */
#linkedin {
	background-position: -68px 0px; /* Position Image */
}
#linkedin:hover {
	background-position: -68px -34px; /* Position Image */
}

The end result? Instead of loading 6 separate images, it loads one. Using background-position to display the area of the image, depending on the id of the element. It’s re-usable code, and it’s accessible, efficient, search-engine friendly. ]]> http://www.k3vin.net/2012/01/a-look-at-css-sprites/feed/ 0 http://www.k3vin.net/2011/07/qr-codes/ http://www.k3vin.net/2011/07/qr-codes/#comments Thu, 07 Jul 2011 22:53:41 +0000 Kevin Smith http://www.k3vin.net/?p=206 QR Codes are becoming more and more visible these days, appearing everywhere from magazines, to bus stop ads. They even had a dancer hold up a giant QR Code in Stephen Colbert’s hilarious rendition of Rebecca Black’s “Friday”. They’re a useful tool that can help connect the physical world to the virtual one.

A QR Code is basically a way of encoding text, and works in exactly the same way as the bar codes at the supermarket. Instead of being vertical lines, and read with a laser, the data is displayed on a grid, and read using the cameras in your smartphone. The name “QR Code” is short for “Quick Response Code”, due to the fact that they were designed to be instantly readable, even on low-power, embedded devices like “feature” phones.

If you want to make your own QR Codes, or use them in a project, there are a number of resources that make it easy to do.

First, take a look at this QR Code generator, at delivr: http://delivr.com/qr-code-generator

Using this, you can create a QR Code to be used in your project. Just choose the kind of code, enter your data, and click “Generate QR Code”!

If you need some more details on how they work, and how to make your own, take a look at the Wikipedia page on QR Codes, which provide information on how the encoding works, and how you can generate codes manually in your project.

Finally, a neat trick I noticed: Google automatically displays QR Codes as download links on Google Code, for example: here.

This means that Google QR Codes are being automatically generated for each download link. Knowing this, we can use Google’s Charts API (which is used to generate the codes) to provide quick and easily generated codes wherever they’re needed.

The format of the URL is as follows: https://www.google.com/chart?cht=qr&chld=L|1&chs=<width>x<height>&chl=<content>

Simply replace <width> & <height> with the size of the image you want (From about 25×25 pixels and up), and the <content> with a URL-encoded string of your choice. Google will return a QR Code with the details you specified, ready for embedding.

From personal experience, QR Codes can be a great way to attract customers if used properly, and I expect they will explode in popularity within the coming years.

1. Typing is actually pretty easy. In landscape orientation, anyways. Portrait is a different matter entirely, and the on-screen keyboard is just too small, but since every app rotates to accomodate how you want to view it, I don’t consider this an issue. While I haven’t measured my typing speed quantitatively, I can say I’m almost as fast on the on-screen keyboard as I am with my laptop’s keys. This makes writing my science fiction story, or an email, or even a comment on a website a reasonably pleasant experience.
2. It’s heavy. I shudder to think of the wrist-mangling weight that the original iPad carried, but the first thing you think about with this model is how sore your wrists might be after anything more than 10 minutes of use. In practice, it’s not as bad as I had originally thought, since I usually find something to rest it on fairly quickly (my lap or knees being the most common places) but it still takes some time to figure out.
3. The iPad isn’t just a big iPod Touch. The extra screen makes so much of a difference it’s frightening. Suddenly you can see the big picture. Look at several things at once, and not have to squint at the tiny (but Retina™ clear!) text that the iPhone would display. Apps on the iPhone feel tiny and cramped by comparison, and I find myself reaching for the iPad to do some of the things I would have done on my iPhone before.
4. It’s making me paranoid. Is that guy on the bus going to jump me the moment I get off and steal it? Probably not, but as is true with any expensive new shiny gadget, I am immediately aware of the possibility for it getting stolen. I run through horror stories in my head whenever I’m in the downtown east-side (which I walk through every day on the way to work). I remember the stories of the person who got their finger torn off when a thief yanked a bag containing a new iPad out of their hands. Not fun.
5. This is the #&%$*^ future. I think about this every time I pick up the iPad. Remember “Star Trek: The Next Generation” where everyone had these little handheld devices that did anything the show required of them? This is that. This is more than that. This is like the Hitchhiker’s Guide, and then some. My mind is constantly being blown at how far technology has advanced in the last few years, and the iPad 2 is the perfect example of that. I can stream movies, send e-mails, browse the web, play games… all at the flick of a finger. The new iOS software incorporates gestures that make performing simple tasks, such as closing an app, feel so natural and intuitive, I’ve often wondered why they haven’t appeared elsewhere before now.

Now, is the iPad worthy of being called “magical”? Probably not. What is is though, is a well-designed device that excels in ease-of-use. So far, it seems to fit my needs just fine, and is a lot more natural than the awkward netbook that it replaced. Overall, I’m fairly impressed with it, and I am looking forward to using it to its full potential, and even developing my own apps to make use of the unique hardware and software.

My model: Wi-Fi only, 32GB flash memory, black.

While exploring the APIs and functionality of a nifty online image editing service called Picnik, I created this funny little doodle out of their provided clip-art. My co-workers liked it so much I just had to make it into a full-size wallpaper. Here is the result.

I could not find any terms of use or licensing information for the artwork provided by either Divide By Zero or Picnik, additionally, neither party has made contact details available. I am therefore under the assumption that artwork provided is in the Public Domain, and my re-licensing and re-distribution of a derivative work under a creative commons license is lawful.

Ah, yes. t.co. That amazingly tiny url shortening service created by Twitter when they decided that they wanted to alienate and abandon all the 3rd party developers who helped make them into the powerhouse social networking service that they are today. Using t.co has big advantages on Twitter, too: the original link is shown when the twitter post is viewed on the website, but the link only counts for 20 characters max. Twitter also provides security features, so that if a link contains potentially dangerous content, a user will be notified as such beforehand.

A link of 20 characters is one of the shortest of the URL-shortening services I’ve ever seen. It would be fantastic if we could use them elsewhere, would it not?

So here’s a nifty trick to generate a t.co URL without actually posting it to Twitter. You can do this in any language and on any platform that can make HTTP requests (and it helps if you can filter the result using regular expressions). You will, however, need a twitter account to make this work, and therefore I do not recommend using this method in a professional, production environment. Twitter has Developer API keys for that. I use this method for quick, easy scripts: anything that occasionally needs a short URL.

In essence, Twitter has a “share” service, that you can use to share a website. This includes passing the URL in the query parameter (where it is shortened and added to your message), entering a “tweet”, and posting it to your account. The fact that it is shortened BEFORE you post is what we’re going to take advantage of.

To make these requests from a web script, I recommend using one of my favorite PHP libraries: Snoopy! Snoopy is a web request library with support for redirection and cookies, which is what makes it so useful. I’ve used it many times in the past, and it has more than proven its worth. I won’t go into other languages or implementations, but it should be pretty straightforward.

Take a look at the script below:

include 'Snoopy.class.php';
$link = "http://www.google.ca";
$http = new Snoopy();
$http->maxredirs = 0;
$http->submit("http://twitter.com/share", array(
		'url' => $link,
		'session[username_or_email]' => '<YOUR-TWITTER-ACCT>',
		'session[password]' => '<YOUR-TWITTER-PW>',
		'commit' => 'Sign in'
	));
$html = $http->results;

What this does is log you in with your twitter account, and pass the /share service the link you want to send. The result will be a webpage with the share box containing your shortened url (among a lot of other form fields, images, text, and things we don’t care about).

To extract the fields, I used a handy loop and some regex. This can definitely be done in a simpler way, but I wanted to be thorough, and account for possible changes in the resulting /share page.

$fields = array();
$matches = array();
preg_match_all('/<input([^>]+)>/', $html, $matches,
	PREG_PATTERN_ORDER,
	strpos($html, 'action="/share/update"')
);
foreach($matches[1] as $match)
{
	$name = array(); $value = array();
	if(preg_match('/name=["\']([^"\']+)["\']/',
			$match, $name)
		&& preg_match('/value=["\']([^"\']+)["\']/',
			$match, $value))
	{
		$fields[trim($name[1])] = trim($value[1]);
	}
}
unset($matches);

At the end of all this, $fields will contain something that looks like this:

Array
(
    [authenticity_token] => somelongstringiprobablyshouldntshare
    [url] => http://www.google.com
    [shortened_url] => http://t.co/0vYtROQ
)

Just look! We have just obtained a t.co URL without having to post to Twitter! You can now use this URL for whatever purposes you wish, such as, but not limited to repeatedly tricking your friends and coworkers into watching Rick Astley’s “Never Gonna Give You Up” (http://t.co/aSObE9L)

The original light-room wallpaper is amazing, since it makes the desktop feel much bigger than it actually is — like a window into a vast, digital world. This wallpaper was never updated for high-resolution widescreen displays, so I’ve taken it upon myself to clean it up. Removed a lot of JPG compression artifacts, and adjusted it to a widescreen aspect ratio using a special technique to reduce the appearance of stretching or distortion.

A while ago, I came across some Pac Man wallpapers, and didn’t like any of them. Most people (Namco included, apparently) decided the retro arcade look modernizes into neon lights. While it works on some levels, neon lights don’t make a particularly good wallpaper. I decided to make my own, and combine mat colours with subtle glow and reflections.

1. Syntax is overly verbose – This is great in theory because you’d expect your code to read like natural language, and it’d be easier to understand. In practice, the code is hard to read, because it forces strict, programming-like syntax that breaks the flow of the language, and makes it seem awkward.
2. It reminds me of VBScript – Like VBScript, AppleScript allows you to automate tasks in, and between applications. They even share similar syntax with “if … then … end if” blocks. Why is this bad? To put it quite simply, VBScript has made Microsoft Office a nightmare to work with, with embedded scripts that reference missing files, written by people who don’t know what they’re doing and shouldn’t be using a computer, let alone a scripting language. Thankfully this is less of a concern in Mac OS X, but my point still stands. VBScript gives me nightmares. Reminding me of it is probably not the best idea.
3. Command-line is more powerful – Why would I want to learn a new scripting language, when Shell Scripting is much more powerful? Most of my experience with AppleScripts have been “Get input from user. Run shell script with input. Exit.”. Apple Script becomes just a friendly GUI wrapper for a command-line utility.

So despite all of this, I decided to adapt a command-line script into a little utility that can change the extension of a group of files. I may not like AppleScript, but it has proven to be pretty handy in this scenario.

Some Google searches got me most of the code, and after a little tweaking, I can present to you: Batch Change Extension.

Run it, and it will ask you for the files (multiple-select file open dialog), and the new extension. Simple enough. You can also use it like a droplet, and drag & drop the files you want to change onto it. In this case, it asks for extension only.

Download Here: Batch Change Extension

Right now, I’d like to draw your attention to two really fantastic applications for Mac OS X: Twitterrific and Sparrow

Twitterrific

I got the original version of Twitterrific a while ago in a MacHeist Bundle, and while it was good, it didn’t exactly stand out the way Tweetie did. I eventually stopped using it, and adopted Tweetie as my go-to Mac Twitter client.

Shortly afterwards, Tweetie (and developer Atebits) was acquired by Twitter.com, and all development stopped. Tweetie 2 (long promised) became Twitter for Mac, the official Mac client.

Now, anyone who’s seen me work, or at least seen my previous post (My IO Graph Day) knows how much I use spaces for Mac. The official Twitter for Mac client shipped with spaces completely broken. I don’t know if this is a result of using a non-standard window, or just an oversight, but for me, it’s a complete deal breaker.

They quickly tried to fix this, and proceeded to make it even worse. The official Twitter application follows me onto every space, and sits above other windows, and gets in my way. Since the original Tweetie lacks native retweet support, I was forced to deal with this horrible monstrosity for a while. I eventually stopped using it altogether, and started using the website again.

Then, as if the gods answered my pleas, a review of Twitterrific 4 shows up on my news feed from Ars Technica, and the verdict is pretty decent. Combine that with a $7.95 upgrade price, and you have a real winner.

Sparrow

Next up: Sparrow. You’d think e-mail clients are pretty straightforward these days. Mail.app for Mac OS X is pretty standard. It supports a lot of mail accounts, and comes bundled with new Macs. If you’re looking for a more feature-filled mail client, Outlook (bundled with Microsoft Office) handles the job nicely, integrating calendars, contacts, and improved Exchange support.

But Sparrow is a case where outstanding design trumps features. Sparrow is basically a desktop GMail client. It uses GMail’s built-in IMAP syncing for e-mail, and currently only supports GMail (although standard IMAP support is coming). It takes a lot of cues from Tweetie and iOS for the user interface, and basically presents e-mail as a social stream. This idea works on so many levels, I can’t fathom why nobody else has done it this way.

Add to that the convenient widescreen-friendly dual-pane view, and a simple task like checking e-mail becomes a wonderful thing.

My main gripe is the lack of option to disable loading of remote images, but I’ve worked around this pretty well using Little Snitch to allow Sparrow access to GMail’s servers only.

Sparrow retails for $9.99, and is the first of what I hope will be many more applications inspired by the simplicity and ease-of-use of iOS applications.