To remedy this, I’ve created g.k3vin.net, an ultra-minimalistic homepage with a Google search box, and nothing else.

Behold! Nothing!

The entire page is 3,753 bytes (yes… bytes), and is entirely self contained, so only one HTTP request is made when you visit the site. The result? It loads near instantly (488ms!), so you don’t have to wait before searching.

Compare this with Google’s main page: 272.5 kilobytes (1024 bytes), 23 HTTP requests, and a loading time of 1.51 seconds.

Not that Google’s page is big/slow by modern web standards, but it was an interesting experiment that’s proved useful on several occasions.

Before I delve into the remainder of this blog, go “play” Invincible… Forever!

Tumult Hype

Tumult Hype

I was recently introduced to a neat tool called Hype by San Francisco developer Tumult. Hype is an HTML 5 Animator, a tool to help build fast, fluid animated web content without using a proprietary or expensive program like Adobe’s Flash.

The result can be exported directly to a web page, or exported as an HTML 5 widget to insert into Apple’s iBooks Author, creating an animated, interactive e-book.

The concept isn’t entirely original, and several other companies are currently developing similar solutions: Adobe Edge (preview), and Sencha Animator ($199). Tumult Hype sets itself apart by its simplicity, ease of use, and a very reasonable $49.99 price tag.

Because HTML 5 animations are very cross-platform friendly, and work on all modern browsers, as well as many mobile devices, they’re a future-proof solution for producing more dynamic content for web pages.

The Making Of “Invincible… Forever!”

To test out the capabilities of this app, I decided to put together an animated “game” with sprites from the game Super Mario Bros. Mario would be invincible, and run to the right infinitely, while enemies appear on the right, collied with him, and die.

For running Mario, I simply imported an animated .gif image. Mario would remain stationary in the center of the screen, and the ground would move underneath him to give the appearance of movement.

For the ground, I created a box, set its background to the brick image, and set the image to repeat. Now I could animate it!

I positioned the box at the start, on the left, hit “record”, moved the slider along the timeline, and dragged the box across the screen. Presto! Mario runs.

Now for the enemies, shrubs and cloud: Create .gif images, drag into scene. Position, record, position, done! Surprisingly simple and straightforward.

Minor Quibbles

Despite the relative ease-of-use, I did run into a few minor issues that I feel limit the usefulness of Tumult Hype.

Sound

The animation was only half the work. Afterwards, I had to put together the simple web site, and add… sound? Hmm… yes it seems that Tumult Hype lacks any kind of support for sounds and/or music. The developer claims that HTML5 Audio is “lousy across browsers and devices” (source). To me, that seems like a lousy excuse. Within 10 minutes, and after a quick consultation to my CSS3 charts I had sound and music that works in most browsers.

Javascript

One issue with the sound/music is that they’re controlled by javascript completely independently of the animation. The problem with this is that after a little while, the sounds no longer sync up with the animation, due to differences in timing. One thing I really wanted to do was set keyframe-triggered javascript events. If I could fire an event on a specific keyframe, then I could hook into the event and trigger the sound, and never worry about it becoming out of sync.

Curves

Another thing I could find no mention of is a facility for creating custom, curved animation paths. When the enemies are hit by Mario, they go flying, and fall off the screen. If you hit something, it generally flies in a curved path, arcing upward before falling. This kind of effect is apparently impossible to create in Tumult Hype.

Left: The path I used... Right: The path I wanted.

In the end result, it doesn’t seem too apparent that I had to use an angular path, but it would have been nice… you know?

Better Keyframe Positioning

It doesn’t seem like there’s an easy way to fine-tune keyframe positioning. If I highlight one or more keyframes, and use the arrow keys, it either nudges the object’s position (Arrgh!) or moves the playhead around, de-selecting the keyframes in the process. It’s tricky to get that kind of fine-grained control on such a small user-interface element using a trackpad.

Conclusions

If Tumult keeps working on Hype, then it’s definitely going to have a place in the toolkits of future web developers. It could be a real competitor to Flash, and many other, much more expensive, HTML5 animators.

As it stands, I’d recommend that anyone who develops on the web take a little bit of time and at least check out the demo. At the very least, you might have fun putting together some neat animations on the internet.

I even printed it off as a poster, and hung it on the wall in our office. No joke.

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.

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.