I have changed the install method to now use the AIR badge installer so that should make life easier to install the application. As this is new I would be interested to hear your feedback on this.

So please read the original post for the updated installer at http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/

Just finished booking my flights and hotel for Flash in the can Amsterdam. I’ve become a bit of a conference junkie lately with Max in Barcelona then Flash on the beach and now FITC. I am a bit miffed that some of the speakers, who i’m sure get paid quite a bit for their attendance, are giving the same sessions as Flash on the Beach. Oh well I will just attend some of the different or new sessions.

Unfortunately i’m not going to be attending the now sold out Papervision 3d workshop on the Sunday but I’m determined to go to the many PV3d sessions during the event. So my provisional session schedule looks like this:

Monday Feb 25th

Tuesday Feb 26th

I think there is a good mixture there, although I hope that Hoss shows some different stuff to Flash on the beach should still be good.

So if you are heading to FITC please come and say hi and grab one of my fabulous Moo.com cards.

Step 1 – Identify your feeds

What do you use online frequently? Photos to Flickr?, bookmarks to Delicious or Magnolia? And I bet your a massive Twitter fan too right? Yes see you have a list already. Basically any web based service that you currently use could be used as an input to your lifestream. Most sites provide public RSS or JSON feeds for you to use those mentioned above do.

So go and list the URL’s for all of your feeds.

Step 2 – Mashing it up

Now there are so many ways in which you could combine your feeds together. You could do this server side using PHP like Jeremy Keith, or Django like Jeff Croft anything you are comfortable with. I decided to try a different route. Yahoo Pipes has been around for a while now and the toolset is getting better. Yahoo pipes is built for mashing up information into new feeds using a great drag and drop graphical user interface.

What I wanted to achieve with Yahoo! Pipes is to combine my RSS feeds together. Then tweak a few things like:

• Add a feed name to each item
• Add a foreword to each title element
• Sort all feeds by date

Better that explaining in detail what I have done in Pipes it’s better if you head on over and have a look for yourself.
You can view my lifestream pipe here.

Also be aware that Yahoo! Pipes caches it’s feed output for obvious performance reasons. I’m not sure what the actual time for the cache is.

Step 3 – Consuming your new mashed up feed

There are a number of different output formats that Pipes supports. Of most interest for us is going to be either RSS or JSON. The choice depending on how you are going to be consuming your data. If you plan on using Flash or Flex then it’s better to opt for an XML based feed like RSS. This time I decided that I was going to use client side JavaScript to inject my feed items into the DOM of my page, going to use JavaScript then it’s easier to use the native JSON format. It is worth pointing out that Pipes supports different formats from the same pipe so you don’t have to create new pipes for each format you wish to use, it’s just a parameter in the URL query string.

Using JSON can be pose a security risk especially if you don’t know or trust the source, this is because you need to eval the response on the client to turn it into JavaScript objects. Yahoo makes using JSON easier and safer (well they did come up with the idea) by passing a callback function name along in the query string. This eliminates the need to use Ajax for fetching the data then having to eval the response. The process is as follows:

• Dynamically add a new script tag into the page DOM setting the source as the URL of your pipe plus you callback function name
• Page loads this script as if it were native JavaScript in your page – the response back from Pipes is of type application/json
• Your callback function is called passing in the JSON object
• Your function then manipulates the data

Read more about Yahoo! and JSON within their web services here. It’s a good article that will really help you understand JSON better.

Step 4 – Injecting the results into the DOM

You now have a JavaScript object full of data from your feed, time to add it to your XHTML by injecting new elements into the DOM. Sounds scary well not really. This can be achieved using plain JavaScript but I felt the need to play with the MooTools JavaScript library, having previously used and loved the now very overweight PrototypeJS library. The great thing with MooTools is that you can pick the elements of the suite that you need reducing the file size dramatically if you don’t require all of the extras.

Firstly inject the new script tag containing your Pipes URL into the head of your page.

	
		var headId = document.getElementsByTagName("head")[0];
		var newScript = document.createElement('script');
		newScript.type = 'text/javascript';
		newScript.src = your pipes URL goes here as a string;
		headId.appendChild(newScript);
	

Using MooTools I have taken a class based approach to the JavaScript, doesn’t really make a difference here but I think it looks neater and prepares you for any bigger stuff.

To get the code to run when your page loads MooTools has a new event that you can attach to the window which detects when the DOM is ready. This is better in many sense because the DOM can be ready before your page is fully visually rendered by the browser:

	
		window.addEvent('domready', function(){init()});
	

Now create a function to handle the response callback from your Pipe. This must be the same as what you passed in on the query string URL earlier to Yahoo!. My callback is called ProcessJSON(obj). Inside this function you will need to loop over each item in the JSON object:

	function ProcessJSON(obj)
	{
		var items = obj.value.items;
		
		//Go through all of the items
		for(var i = 0; i <  items.length; i++)
		{
			//build new DOM elements for each item here
		}
	}	

To build a new DOM element using MooTools is really easy, see the example below for creating a new definition description DOM element then adding some text to that element:

	// create element
	var myDD = new Element('dd', { id:'feedItem', 'class':'vevent'});
	
	// add text node to above element
	myDD.appendText("hello i'm a text node");
	
	// add an element inside of the dd - example 
	var myAbbr = new Element('abbr', {'class':'dstart published dtend', title:currentItem.pubDate}).injectInside(myDD);
	myAbbr.appendText(postedTime);
	
	// now add inside the dd created above
	myHref.injectInside(myDD);
	
	// once you have all of your elements add them into the DOM
	$('lifeStream').appendChild(myDD);

For my lifestream I used a definition list to hold all of my items. I think this is a really semantic way of marking up this type of data. For the titles I have the date of the posts then underneath I then have a series of definition descriptions that describe the item for that date. My Javascript contains a little more date sorting to get the nice headings out of the numeric dates sent from Pipes, view the javascript and take a look. It’s all fairly harmless, I promise.

Step 5 – Feed icons

To get the icons I made my own and placed them into an images directory, naming them the same as the feedname that I added during my Pipe creation. That way in my code when I’m building the elements I can just place the feedname for the image file name:

	var myImgIcon = new Element('img', {'class':'postType', src:'images/' + currentItem.feedName + '.gif', width:'32', height:'32', alt:currentItem.feedName});
	myImgIcon.injectInside(myHref);

Step 6 – Showing your flickr thumbnails (if you have flickr images)

I wanted to show a thumbnail image of the photo that I uploaded to my flickr account.

This is really easy as the feed from flickr has the url for the thumbnail already set in the response. You will have to be a little careful as it is namespaced to ‘media’. So just add a new image DOM element setting the source to be the url from your flickr feed and the size is 75px square. Don’t forget your alt tags I use the image title again as that makes semantic sense.

	//if flickr
	if(currentItem.feedName == "flickr")
	{
		var myImgFlickr = new Element('img', {'class':'flickrImg', src:currentItem["media:thumbnail"].url, width:'75', height:'75', alt:currentItem["media.title"]});
		myImgFlickr.injectInside(myHref);
	}

Step 7 – Styling

Well I shall leave that up to you!

Finish – grab a nice cool beer!

I hope that has given you a few pointers and ideas that will help you build a lifestream for your site. All the techniques used here can be done with any JavaScript library or none at all. You could go crazy with effects etc if you like, I have just opted for a nice fade in when all of the elements are built.

The good thing is that you now have a feed that you could re-use in Flash or Flex and display your lifestream in new and fantastic ways. Go crazy!

For years we have touted the phrase ‘the web is not print’ and consequently have forgotten about the basics of designing for type, like working to a baseline rhythm. I have come across many a design where the developer has not thought about typography before diving straight into the code. The result is a mess of random amounts of padding and margin married with unnecessary style rules, this in turn leads to CSS code that is harder to understand and maintain.

One of the key concepts that we can use within our sites is consistent line-height in CSS terms. If you think of a ruled notebook, the lines are all equal heights.

The concept is fairly straight forward but in practice can be confusing especially for a CSS newcomer. All sizing needs to be relative to the base size. This allows for easy scaling up or down while keeping the required spacing and layout consistent, this can be refereed to as an elastic layout. To allow this we need to specify measurements in percent or em.

What is an em measurement?

A pixel is the ‘dot’ on your computer screen. Displays are measured in pixels across and down like 1024 × 768. These dots are unscalable and fixed in size. In some situations this is desirable and it would be better to set your measurements as pixels.

An em is a relative measurement based on the square of the font size at that particular point. As font sizes can vary across differing systems and displays, the result is that the em measurement will always be relatively sized and scalable.

As we are now developing for a wider range of devices and screen sizes we should look to adopt em instead of pixels in all of our designs. Let’s take a look at how.

The browser default size

Modern browsers ( IE7, Opera, Safari and Mozilla ) have a built in default font size of 16px so we can use that as the cornerstone for all of our sizing calculations from now on. At this point we need to make a choice as to the base font-size we are going to work with, nominally this will be 12px or 14px which we can set as a percentage of the 16px browser default. An example for 12px required size would be:

*/ 12 / 16 * 100 = 75% /*

As usual it’s not always that simple and Safari 2 does apply a 13px base size to fixed width fonts. To overcome this situation you will need to tell Safari to use a base size as a set pixel value, like 16px or 12px. Beware though that you must use conditional comments to block that statement from IE. For IE’s font scaling to work correctly it needs to be given a relative base size set in percent or em. For more guidance I refer you to Richard’s article on A List Apart titled – how to size text in CSS.

Working out a required font-size

Well that’s why I built the calculator! to save you the hassle of all of those calculations. I’m going to cheat here and direct you to a great article on 24ways titled – composing to a vertical rhythm. This is the background to the calculations behind my calculator.

Using the calculator

The calculator defaults to a required base font-size of 12px and a 21px line-height. If you have set yours to be any different then please change this now. Some people prefer a line-height to be 1.5 x the base font-size, I personally prefer a larger 1.75 x the font size. It give more breathing space I feel.

Now you have set the base sizes you need to start adding some style rules, so click the button and the interface will expand down. Now give the style a name, this could be p or h1 or any standard rule or your own based on your markup. This name will be in the CSS and can be altered later.

The parent rule is there for creating cascading calculations. Font-sizes in em’s are always based of the parent font-size. So if you need it it’s there if not then leave it set to document base.

Next type your required font-size in pixels and push the calculate button. Your CSS will be there ready to copy to the clipboard and the options to add padding or margins that will live update in the CSS code. BEWARE that if you change your font-size you will need to click the recalculate button as all the other measurements are based off the font-size.

The margins and padding are in line height units, refer to the 24ways article for more understanding or send me an email if your stuck.

The final thing is that you have a simple em calculator for working out pixel to em values based upon the current set font-size. You could use this for working out the width of an element in em’s. Where your design is say 120px you could get that value in em’s. Just enter the pixel value in the box and it will auto calculate.

The calculator

Em Calculator – now for your desktop!

I have now produced the calculator as an Adobe AIR application so that you can run it on your desktop. To run the application you will need the latest Adobe AIR runtime (version 1.0). It will then install and off you go. This version is just the same as the online version shown above. I’m still working on an AIR app with the integrated browser.

Contributions

If you like the EM Calculator and would like to make a contribution to it’s development please use the button below thanks.

BEGIN PKCS7——-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——-END PKCS7——-
“>

Feedback and questions

This site has been built using an elastic layout and em sizing so feel free to have a look at the CSS, usual thing don’t steal it all but look, learn or challenge it.

If you find this useful or have any feedback please let me know. It is a beta version there could be a few little gremlins hanging around which I will address in future versions.

I am working on an Adobe AIR version that has an integrated browser for instant visual feedback so check back for that soon.

Apart from our friends at Apple wanting to charge a staggering £12.99 for a firmware update for my iPod Touch ( daylight robbery if you ask me ! ), I am really impressed by the introduction of webclips for the iTouch and iPhone. Basically you can zoom into a webpage using mobile Safari and then save it as a web clip, an icon appears on your home screen for easy retrieval of your clip. According to Apple’s iPhone webapps page the homescreen can contain up to nine different web clips. This is a great bridge between the web and the convenience of a desktop shortcut, I see it as a small step towards something like Adobe AIR on a mobile device.

So this site now has an icon that the iPhone will use if anyone makes a web clip out of my site.

My icons is shown below:

How to create a custom iPhone web clip icon

Working just like the favicon.ico file simply place a 57px x 57px ( or a now confirmed 158px x 158px ) PNG file called apple-touch-icon.png into the root of your web server.

If you need to override the bookmark on a specific page it’s possible by placing a rel link in the head of that page like this:

<link rel="apple-touch-icon" href="/customIcon.png"/>

The original article on the Apple Developer site is here.

You don’t need to concern yourself with rounded corners or flashy highlights as the iPhone will add these ontop of your icon. Until I can bring myself to say goodbye to my jailbroken iTouch and pay Steve £12.99 for the official firmware I don’t have a picture of my icon as a webclip on an iPhone. If you do have an image then please send it into me and I will place it here.

Update: Drew McLellan has produced a bookmarklet that allows you to set the icon for any site. It works using script to place the link rel markup into the head of the document. Theoretically this will work although you might need to place it above any other previously defined custom icon rel link.

The presentation is not to technical in its delivery. The audience we have at the user group can cover designer, manager developer and complete newbie so the presentation had to reflect this. The main aim was to show that Flex did not have to look like Flex. You can achieve very interesting results by investing some time in planning, designing and developing the user experience of your application.

Many Flex applications forget to restyle the pre-loader. While not being the easiest component to style or add extra behavior to it sure can give your application that polished look. There are a number of ways in which you can prepare your assets for use within a Flex application. PNG from Fireworks or Photoshop to SWF from Flash or Illustrator.

This presentation was targeted around Flex 2. Flex 3 has dramatically changed the way you work with skinning assets from programs like Adobe Illustrator or Flash, and I will cover this in future posts.

If you have any questions regarding this presentation please contact me and I will be happy to help. It is released under Creative Commons share alike 3.0 so please distribute it around.

On another note I have only just discovered SlideShare and so far have found lots of useful presentations from conferences like Future of Web Apps, Future of Web Design and Flash in The Can that I have been unable to attend.

Adobe Max Europe

Having never attended a proper web development conference before things changed during 2007. Thanks to Adobe and Andrew Shorten I won a ticket to Barcelona and the first Adobe Max Europe event. I must say that I had the best time, learnt lots of good valuable information and met some really cool people. It was well organised with three very full days of presentations and after-event meet ups. The only thing that let it down was the catering, quite poor and for someone who does not eat fish I was somewhat forced to seek alternative cuisine elsewhere.

The keynote theatre was a huge impressive widescreen affair with great audio and presentations to match. Peter Elst and Grant Skinner’s ActionScript 3 presentations stood out as well as some of the sneak peaks sessions from the likes of Effective UI and Adobe Consulting. Due to the great british postal strike, I never received my Moo cards before Max which as not the best for networking without any cards to give out.

Flash on the beach

So off to the second conference of the year down in sunny Brighton, UK. I love visiting Brighton and combined with some cool Flash presentations what could be better? This time it was a work paid for conference so there were a few of us that headed down including Mark, Jon and Jodie.

While not as polished as Max and the focus seemed to be more on the creating patterns and playing with Flash rather than any RIAs it was still interesting. Ted Patrick’s presentation on Flex provided some useful tips while Hos Gifford (ThirdEyeDesign), Jared Tarbell and Joshua Davies provided some inspirational relief.

Travel to Australia

2007 saw our second trip to Australia. We visited Fremantle near Perth then drove down through the wine regions of Margaret River sampling some of the local goodies on offer and seeing the most fantastic countryside there is to see. From there we flew to Melbourne which just blew me away, then we drove the Great Ocean Road past the twelve apostles. As we were in winter the roads were empty but the weather rather inclement, having covered rain, hail, sunshine, galeforce winds in just a few days it was an experience!

From Melbourne we flew across to Sydney and spent some quality time learning to surf at Manley beach. Surfing has to be one of the best thing you can do in the sea, Rachel loved it despite being hit in the mouth with a surf board. Finally spending a few days in the city of Sydney and climbing the harbor bridge at night. As a second visit to Sydney we were less impressed this time around and if I were to move here it would definitely be to Melbourne. Melbourne seems more relaxed and friendly, but to be honest I would not say no to moving to either, anyone got any jobs over there?

I have over 1000 pictures in RAW format that i’m ashamed to say I’m still processing, so soon there will be some photos on my Flickr stream.

iPod Touch

The iPhone seems nice but without 3G and GPS it seems very expensive compared to my current phone on the Three network. That said I’m like a magpie when it comes to nice shiny things from Apple and my 6 month old 80gb iPod was soon placed on ebay to be replaced with a lovely 16gb iTouch.

I can truly say that this device is fantastic, so much more that just an MP3 or MPEG 4 player. After jailbreaking it I now have my email, weather and complete (yes minus the Flash player) web browser in my pocket. No need to open the laptop to quickly check your mail or find a route on Google maps, a quick tap on the iTouch is all that is needed. Yes it has some short comings but when compared to everything else this is a joy to use and look at.

So until the iPhone gets GPS and 3G my iPod touch is my tool of choice, Steve just one request, can we have bluetooth on the iPod please?

Forward into 2008

Gadgets – Well we have the new Apple notebook and 3G iPhone to look forward to and I will be hopefully upgrading my Macbook Pro to the new 45nm Penryn powered Macbook pro when they get released in the first quarter of this year. Oh and a Playstation 3 might make an appearance by the time the words ‘Gran Turismo’ and PS3 are muttered in teh same sentence.

Travel – Rachel and I have yet to decide what our travel plans will be this year, I would like to visit San Francisco and possibly Canada, we will have to spend some time investigating.

Career – well I’m always looking for that fantastic opportunity and hopefully 2008 will be the year.

Happy New Year all !

It’s early days and I’ve got a long road ahead to achieve a good following but hopefully there are a few people out there that are interested! I’m currently developing some little sidebar widgets starting with my Twitter feed so keep you eyes peeled.