Fresh Click Media

I’ve just found this YouTube video showcasing Microsoft’s vision for our future:

This, however, is more likely to be the actual reality:

There’s no question that carefully chosen and presented typography can help a design to convey its message. Choosing fonts for a piece of work can, however, be a bewildering process.

Here, I present some useful links for font inspiration, in the hope that they’ll help you to choose the right font for the right job.

1. Die 100 Besten Schriften (The 100 Best Fonts of all time.)

   It’s a German language blog post, but it’s packed with (100, unsurprisingly) of the most recognised and often used fonts.

2. 21 Most Used Fonts by Professional Designers

   A great list of 21 of the most often used fonts, with screenshots of their variants.

3. Typefaces no one gets fired for using

   Well-known designer Cameron Moll gives his quick lowdown on his often used typefaces, and requests others do the same.

4. Top 100 Types survey

   The results of Paul Shaw’s readers’ top typefaces.

5. 30 Fonts That All Designers Must Know & Should Own

   Another good list of inspiring fonts.

6. 40+ Excellent Free Fonts for Professional Design

   The cost of professional typefaces can sometimes be prohibitive for the casual designer or someone on a strict budget. Smashing Magazine has put together a great list of more than 40 fonts that are free to use in your designs, and don’t skimp on quality.

Apple continues to ignore Flash support for the iPhone, and perhaps because of this, it’s pushing ahead with new features based on HTML and CSS. The iPhone has supported proprietary CSS on its Webkit-based browser, but things are now starting to take off on the desktop, as demonstrated by this YouTube video showing CSS on a Snow Leopard OS nightly build version of Safari:

Apparently, the effects on show have been proposed for standard adoption, and if approved, we’ll be seeing this sort of thing on other browsers. Certainly impressive, and it reminds me of Firefox plugin Cooliris. If you haven’t already seen Cooliris doing its stuff, you should check it out. It’s amazing to think that this sort of effect may soon be widely supported by our browsers.

If you’ve taken a look at the AppStore recently, you may have noticed that the top paid app is a little game from Ozzy developers Firemint. Yes, Flight Control is a top title, and with hoards of people heading abroad for summer sun, it seems quite appropriate to take a look if you haven’t already done so.

The idea of the game is very simple – you must guide aeroplanes and helicopters to safety on your airport’s two runways and helipad. To guide the planes, you select one and create a flight path by moving your finger on the touch-screen. It starts of quite sedately, but soon gets hectic, requiring a good measure of tactics and reactions.

The number 1 game is a great little time waster, and at only 59p, it’s an absolute steal.

I have recently been getting to grips with Adobe Flex for a project that I’ve been working on, and thought a fun little bit of work would be to write a Flex Gravatar Control. I’d done the equivalent for ASP.NET, so why not have another go?

Incidentally, I don’t know whether there’s much call for a Flex Gravatar control – if you’re reading this and find a use for it – great, but I hope that there may be something in this post that helps a budding Flex developer too.

The general idea of component development is to package up a reusable bit of code for use in applications. Since a Gravatar is just an image, it seems natural that the Gravatar component extends (otherwise known as inheriting) the Flex mx.controls.Image class. The benefit of inheritance here is that we get a bunch of functionality for free that we can use as a basis for our control. We’ll be adding our specific Gravatar code so that the image shown is a particular user’s Gravatar.

Let’s take a look at the Flex Navigator for the Gravatar Project.

Flex Navigator for the Gravatar Project

Aside from the standard stuff, as3corelib.swc is referenced in the libs folder. If you’re not aware of it, as3corelib is described as follows over at the project page hosted on Google Code.

The corelib project is an ActionScript 3 Library that contains a number of classes and utilities for working with ActionScript 3. These include classes for MD5 and SHA 1 hashing, Image encoders, and JSON serialization as well as general String, Number and Date APIs.

Since Gravatars use hashing for their URLs, we’ll be using the MD5 aspect of corelib.

The components directory contains a single file, GravatarImage.as, which contains the code for the Gravatar component, and Gravatar.mxml is the demo application’s MXML that uses the Gravatar component.

Let’s dive straight in and take a look at the component code:

package components
{
	// import the MD5 hashing code:
	import com.adobe.crypto.MD5;

	import mx.controls.Image;

	public class GravatarImage extends Image
	{
		public function GravatarImage()
		{
			super();
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);

			this.width = _size;
			this.height = _size;

			this.source = "http://www.gravatar.com/avatar/" +
							MD5.hash(_email).toString() + "?" +
							"size=" + _size +
							"&rating=" + _rating +
							"&d=" + _defaultImage;
		}

		private var _validRatings:Array = new Array('g', 'pg', 'r', 'x');
		private var _validDefaultImageTypes:Array = new Array('default', 'identicon', 'monsterid', 'wavatar');

		[Bindable]
		private var _email:String = new String();

		[Bindable]
		private var _size:Number = 80;		// default size of 80 pixels

		[Bindable]
		private var _rating:String = "G";	// default rating of G

		[Bindable]
		private var _defaultImage:String = "default"; // default to the blue 'G'				

		public function set email(value:String):void
		{
			// if the email is invalid, a default image will be returned:
			_email = value;
		}

		public function set size(value:Number):void
		{
			// sanity check on incoming value, must be between 1 and 512:
			if( value >= 1 && value < 512)
				_size = value;
			else
				_size = 80;
		}

		public function set rating(value:String):void
		{
			// do a sanity check on the rating, allowing values
			// only in the _validRatings array (defined above):
			if( _validRatings.indexOf( value.toLowerCase()) != -1)
				_rating = value;
		}

		public function set defaultImage(value:String):void
		{
			_defaultImage = value;
		}
	}
}

The code is pretty simple. The main function, updateDisplayList is called when the image should draw itself. It simply constructs a URL based on the properties that have been set, and makes a request to the gravatar service for the image. Note that the corelib’s MD5 hash is used to obfuscate the email address passed in.

The properties relate to those of the URL generated and are as follows:

email

The email address associated with the gravatar image.

size

The size property of the control can be in the range 1 to 512. If it is outside this range, a default of 80 will be used.

rating

The ‘highest’ allowed rating of image.

• A G rated gravatar is suitable for display on all websites with any audience type.
• PG rated gravatars contain may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
• R rated gravatars may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
• X rated gravatars may contain hardcore sexual imagery or extremely disturbing violence.

defaultImage

URL encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that gravatar has a rating higher than is allowed by the ‘MaxAllowedRating’ property. The default image type also supports ‘default’, ‘identicon’, ‘monsterid’, and ‘wavatar’ strings for alternative Gravatar default images.

So, how do we use the control? Again, it’s pretty simple. Let’s have a look at the application MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:components="components.*">

	<mx:Script>
		<![CDATA[

			[Bindable]
			private var postComments:XML =
                <comments>
                    <comment name="Shane Porter" email="anemail@somedomain" />
					<comment name="Kate" email="someotheremail@somedomain" />
					<comment name="Mr Unknown" email="xxx@xxxyyy.com" />
                </comments>;

		]]>
	</mx:Script>

	<mx:DataGrid id="myDataGrid" dataProvider="{postComments.comment}" rowHeight="88" rowCount="3">
		<mx:columns>
            <mx:DataGridColumn dataField="@name" headerText="Name"/>
            <mx:DataGridColumn dataField="@email" headerText="Gravatar">
              	<mx:itemRenderer>
              		<mx:Component>
              			<components:GravatarImage email="{data.@email}" size="80" rating="G" defaultImage="monsterid" />
              		</mx:Component>
              	</mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

There’s a component namespace reference on the outer Application element, and for illustrative purposes, some XML defined that is used as the data provider for a Data Grid control. The GravatarImage component is used as an item renderer for the ‘Gravatar’ column. The email property is set to the value of the email XML attribute, and the size, rating and defaultImage is also set.

Application in Design View

When the app is run, the datagrid uses the XML as its data provider, and the Gravatars are rendered. Note that in this screenshot, I provided known email addresses associated with Gravatars. The bottom row is the same as the code shown previously, and since it is not associated with a Gravatar, the specified ‘monsterid’ default image is used.

The page shown in the browser

The last few months has seen the release of Google browser Chrome, IE8 on the horizon, and new releases for Safari and Firefox. Opera isn’t taking it easy however, and have released a video of their new ‘face gestures’ software, that allows users to control their browser through the power of their face.

Check out the YouTube video!

Since its release in early 2002, Microsoft’s ASP.NET platform has gone from strength to strength. Despite its strong uptake from Microsoft-centric software houses, there may be a few people who have hesitated in adopting ASP.NET for their web development platform. Here I present some things you might not know about ASP.NET. Perhaps it’ll encourage you to take a look at it.

Cost

There once was a time when the standard IDE for developing ASP.NET apps, Visual Studio, was prohibitively expensive for the average Joe. In late 2007, Microsoft released its first versions of ‘Express’ software, aimed at students and hobbyists. Though Express incarnations have fewer features than their full version cousins, they do offer the possibility of exploring ASP.NET. The Microsoft website offers a download page for Visual Web Developer 2008 Express Edition. An express version of SQL Server is also available, and can be downloaded from the SQL Server 2008 download page.

MVC Support

The MVC pattern is an established and well-recognised way of building web applications, and is familiar to RoR, Java and PHP developers. For many years, MVC was not available as a standard approach to developing ASP.NET websites, but Microsoft has recognised the deficiency and have (at the time of writing) released version 1.0 Release Candidate of ASP.NET MVC. The release has had a mixed response from the ASP.NET community, many of whom are used to the traditional code-behind model. Despite the inevitable squabbles as to which way is best, many have welcomed the MVC approach for its separation of concerns and finer control over JavaScript and markup. To find out more about the release candidate, head over to Scott Guthrie’s blog post.

Learning Resources

A big advantage for anybody learning a new technology is the wealth of learning material that is available. Although you can rely on a large number of books, the ASP.NET learn website contains many videos on both traditional and MVC ASP.NET as well as data access.

Intrinsic jQuery Support

The lightweight open source JavaScript library that’s taken the web by storm is now fully supported by Microsoft. As well as full intellisense support in Visual Studio, Microsoft will be using the library as-is, without forking or changing the code from the main jQuery branch. What’s more, Microsoft will be using jQuery as a basis for future ASP.NET and ASP.NET AJAX features. I feel this counters the argument of Microsoft not supporting open-source software.

Career Prospects

Microsoft’s ubiquity means that learning ASP.NET and supporting technologies will do no harm to your career prospects. .NET skills are ranked as some of the most in-demand in the UK.

Having registered with various job boards and spoken to various recruitment consultants in the past, it’s no surprise that I get a few ‘job’ emails from time to time.

The vast majority of these emails are essentially spam. Despite me entering details about preferred location, experience and daily rate requirements on job websites, I often get mails that are for the wrong end of the country, junior jobs and low rates.

I just got a mail from a recruiter that contained the following text:

Dear Shane

PUT PARAGRAPH ONE HERE

PUT PARAGRAPH TWO HERE (Or delete if unneccessary)

Put PARAGRAPH THREE HERE (Or delete if unneccessary)

{Name of person removed}
Microsoft .net Consultant
{Name of agency removed}

I didn’t feel the urge to deal with somebody who needed reminding that an email can be separated into separate paragraphs, and that if it contained less than 3 paragraphs, the unneccessary (sic) paragraph helper text should be removed.

Unbelievable. Still, at least they got my name right.

I have to admit to playing Super Mario Kart a great deal on the SNES, but this is something else.

Let’s be honest, the recent Macworld show was a disappointment – no iPhone nano, no update to the ancient Mac Mini.

But then, I found this baby – this is the future!