If you have looked at my site recently you will see I have added a new feature into the footer. Its something I have nick named “Soundstream“. Basically its a progression on the idea of a twitter feed. But instead of using twitter, it uses XML feeds from Last.fm to create a list of the last 4 tracks I listened to. In this tutorial I will show you how I have created it, and just how easy it is to create one for yourself.

What You Need

In Order to build this you will need a server which runs PHP5, and a last.fm account. If you have not got one you can create an account for free. I personally recommend you do, as its a brilliant way to listen to your favorite music for free.

The RSS Feed

In order for our code to work, first of all we need to get a feed. There are a couple of ways we can do this. The first is using JSON to make a request to the Last.fm API to collect and display the information. However this is a slow way to do business, and and some API’s such as twitter will only allow you to make a certain number of requests per hour. Which is no good if you site is visited by a lot of people.

The second option is to get an XML RSS feed of all your latest tracks, this can then be parsed and used to display all your track info. This is my preferred option as it is much quicker and puts less load in the page, plus all the parsing can be done server side, which will cause browser bugs to be none existent.

In order to get The RSS feed you must talk to last.fm. You are permitted to pass certain parameters after the URL depending on the information you wish to get back. Here is an example.

http://ws.audioscrobbler.com/1.0/user/limitless86/recenttracks.xml?limit=2

here you can see the URL points to audioscrobbler, then passes a couple of directories, then you get to my username ‘limitless86′ then at the end I specify a limit of 2 tracks that I want to have returned. Hey presto the XML I get back looks something like this.

<pre id="line1"><span class="pi"><?xml version="1.0" encoding="UTF-8"?></span>
<<span class="start-tag">recenttracks</span><span class="attribute-name"> user</span>=<span class="attribute-value">"limitless86"</span>>
<<span class="start-tag">track</span><span class="attribute-name"> streamable</span>=<span class="attribute-value">"true"</span>>
<<span class="start-tag">artist</span><span class="attribute-name"> mbid</span>=<span class="attribute-value">"c33c2065-b1c3-4406-b066-d33a9e2ea71a"</span>>OneRepublic</<span class="end-tag">artist</span>>
<<span class="start-tag">name</span>>Someone To Save You</<span class="end-tag">name</span>>
<<span class="start-tag">mbid</span>></<span class="end-tag">mbid</span>>
<<span class="start-tag">album</span><span class="attribute-name"> mbid</span>=<span class="attribute-value">""</span>>Dreaming Out Loud</<span class="end-tag">album</span>>
<<span class="start-tag">url</span>>http://www.last.fm/music/OneRepublic/_/Someone+To+Save+You</<span class="end-tag">url</span>></pre>
<pre id="line9">                <<span class="start-tag">date</span><span class="attribute-name"> uts</span>=<span class="attribute-value">"1231262615"</span>>6 Jan 2009, 17:23</<span class="end-tag">date</span>>
</<span class="end-tag">track</span>>
<<span class="start-tag">track</span><span class="attribute-name"> streamable</span>=<span class="attribute-value">"true"</span>>
<<span class="start-tag">artist</span><span class="attribute-name"> mbid</span>=<span class="attribute-value">"516cef4d-0718-4007-9939-f9b38af3f784"</span>>Fall Out Boy</<span class="end-tag">artist</span>>
<<span class="start-tag">name</span>>Thnks Fr Th Mmrs</<span class="end-tag">name</span>>
<<span class="start-tag">mbid</span>></<span class="end-tag">mbid</span>>
<<span class="start-tag">album</span><span class="attribute-name"> mbid</span>=<span class="attribute-value">""</span>>Infinity On High</<span class="end-tag">album</span>>
<<span class="start-tag">url</span>>http://www.last.fm/music/Fall+Out+Boy/_/Thnks+Fr+Th+Mmrs</<span class="end-tag">url</span>></pre>
<pre id="line17">                <<span class="start-tag">date</span><span class="attribute-name"> uts</span>=<span class="attribute-value">"1231262409"</span>>6 Jan 2009, 17:20</<span class="end-tag">date</span>>
</<span class="end-tag">track</span>>
</<span class="end-tag">recenttracks</span>></pre>

For a full view of the different types of request you want to do check out the API.

The Code

So now you get the principle lets create a new page, name it soundStream.php. Inside this file we want to write the following code;

<html>
<head></head>
<body>
<h2>Soundstream</h2>
<?php
//get XML feed and assign
$LastFeed = new SimpleXMLElement("http://ws.audioscrobbler.com/1.0/user/limitless86/recenttracks.xml?limit=10", NULL, true);
//loop through XML and display track name and artists
foreach ($LastFeed->track as $LastTrackInfo) {
echo '<div class="SoundStream"><span class="artistName">' . $LastTrackInfo->artist[0] . '</span><span class="TrackName"><i>'. $LastTrackInfo->name[0] . '</i></span></div>';
}
?>
</body>
</html>

First we break into PHP and assign a new variable called $lastFeed and use PHP5′s SimpleXMLElement() to get the XML feed out. You will of course need to change the limit and your username to suit your own needs.

Once we have the XML feed assigned we want to loop through the returned results. What better way to do this than to use a foreach loop, which simply iterates over the returned XML array and puts the artists name and into the artistName span and the track name into the TrackName span. This is all wrapped in an echo statement which will put the spans onto the page, allowing you to style the output as you see fit.

That’s All Folks

That really is all their is to it. If you want to see the code in action check out the footer of this page, or better still look at this demo page. If your feeling adventurous why not try amalgamating your twitter and last.fm feeds into 1, to create a lifestream.

I recently decided to re-design my website logo. Its part of a long term plan to go freelance on the side. But before I could go ahead and design the business cards, create the headed paper and ultimately spend a lot of money I needed to be 100% satisfied with the way I represent myself. This isn’t a definitive guide, I don’t claim to be a guru. I’m just sharing my experience and things I have learned along the way.

Before You Begin

Before firing up photoshop, or doodling sketches, I had a long hard think about what I wanted “The Odin” to be. This sounds obvious, I mean I design and develop websites,  but its really something you should take your time over. This is important because how the logo looks will set the theme for what your company or site is about. I knew I wanted something subtle and understated, but at the same time it needed to be sophisticated enough to show any potential clients I mean business and I know what Im doing. Once your comfortable with what you want your direction to be, you should start think about the logo.

Get Some Inspiration

Before I got too far down the line, I looked at what the big boys were doing, and what made them stand out, I took examples from logos I liked, such as carsonified, FUEL and my personal favorite Function. They all have distinctive designed logos and their is a lot to be said for observation. I find this practice extremely useful and until you have completely deconstructed something, you cannot fully understand and appreciate it.

Its All About The Typography

There are a million things you can do with typography, there are entire sites and blog rolls dedicated to this art form, If you want some inspiration check out typographica and i love typography. The key to having a unique logo, is to think about the way the letters in your logo fit together, Certain letters do this, veryy well, try to explore the possibilities, with letter spacing and line kerning. There are a few places you can go to get great fonts, fontcubes is a brilliant resource, da font is another, both of which offer you a massive range of free fonts to download and use.

The logo I have used started with a simple font, which I modified, in to what became the final product. But the only real way to achieve this is by trial and error, use a lot of fonts and try everything, you may come up with something you love by the chance of putting together something you would not have expected to work. I wont lie, this can be a long and arduous process, but it will present you with results, you just have to stick at it.

To Suffix Or Not To Suffix

This was a question I spend a lot of time researching. It became somewhat clear to me however that most online companies these days have dropped the .com or .co.uk or whatever the suffix may be. Although there are many reasons for this, I personally believe that its down to the very way people search the Internet, its no longer about memorable URL’s in the taxonomy of web its about tagging, and searching and SEO and all those things which make your website so much easier to find, For that reason I left out the suffix as a bold move towards the future.

Trial Is Not An Error

I have a saying that I often use in the face of defeat, and although sometimes I question it myself. I always stick to it. “failure is the long way round to success”. I went through numerous attempts at designs before I got close to any that I thought were worth pursuing as you can see; but sticking with it did pay off,

Use Illustrator

I must admit I myself am guilty of creating everything in photoshop, but its especially important when you are designing logos, to use a vector based program such as Adobe Illustrator for the final product. It will make the design look much cleaner and will save you all sorts of hassle when you come to re-size the design for different media.

The Final Product

Probably one of the most important, if not the most important tips I can give, is to get feedback. It may not always be what you want to hear, and so don’t take it to heart, but if you listen to what people are telling you, and act upon their advise, you may well end up with something that looks even better. On that note I would like to present you with my final design, and call upon anyone reading this, to leave their feedback and suggestions, so that The Odin can move forward and grow from this experience.

I have finally decided to take the plunge and get The Odin registered as an official company. Whats supervised me most about the experience is just how easy it has been to take action. I the inland revenue were surprisingly helpful, giving great advice. The formation of the company was also an easy step to achieve. I looked high and low for a website which looked vaguely trust worthy, only to decide that I would stick with switch media the same company I set up my domain name with.

Of course It is not as simple as just registering and paying. Having your own company comes with its responsibilities. I have put my experience into a guide which you may find useful if you are thinking of embarking on a similar endeavor.

Getting Ready

Before you get too far into the process you want to make sure that you are ready to make the phone call You will be asked when you want to declare yourself self employed. This is the important bit, you will be asked if you wish to make yourself self employed, or a company that you own. So make sure that you have decided what you want, to do. If its a company you will need to get the company formed before you make the phone call. The HMRC will ask for a month and take it from the start of that month. So make sure you know when that Is, to save yourself panicking. Its worth noting that you do not need to declare yourself self employed until after you are working, but this must be done within the first 3 months of working for yourself.

Form the Company

Now that the ground work is complete you are all set to form your company. All this really means is you will have the legal documentation to create your business, meaning you will be a recognised company with a VAT number as so on. It doesn’t matter if you have no premises at this point. But you will be able to fill this out later on. there are a lot of companies out there which will offer this service. I have only tried switch media. The process may take a couple of days to complete although if your in a hurry you can pay more to have things speeded up.

Office Equipment

When you first start out, the temptation is go buy buy buy. But be reasonable, if you don’t absolutely need it, don’t go out and buy it. you will save yourself a lot of money this way, only treat yourself when you are reaping the rewards for your hard work.

Business Cards

This is another none essential requirement, especially if you have not settled on a logo or other such important issues. However if you feel you need them, check out moo.com for a cheap solution.

Logo

This is another none essential part of the setup, as long as you are decided on the name, the rest is not as important.this is something you can think about when your building the website.

Website

To start with if you don’t already this is something which can be setup very easily, all you will need is a domain and hosting, Its up to you how your build your site, there are a lot of solutions out there, one of the best is wordpress which is a blogging tool which is very easy to install and you can even get free hotsing.

Create A Paper Trail

The best way to account for your transactions is to buy yourself a receipt and an Invoice book. Make sure you keep receipts of everything work related. Buy a folder to put things in, I found it easiest to keep reciepts by month, but its up to you how you choose to organize yourself. Receipts should include the amount you paid/earned without tax and the VAT amount. This will make life easier if you need to check anything at a later date.

Use a spread Sheet

Although creating a paper trail is important I cannot stress how useful setting up a spreadsheet will be. I would go as far as saying it is essential if you want to run your business properly. It will also save you the headaches in April when the end of the financial year creeps round and you need to fill out your tax return.

If you don’t have any spreadsheet software you can use google docs for free. It does everything you need it to and there is lots of documentation to help you. I set up 2 documents,

1. profit and loss sheet
2. Taxable Income sheet.

The first helps you see your income and your outgoings this will tell you if you are making any money or loosing it, very useful whatever your circumstance. The second will help you keep track of your tax to date. i tend to do this from 1 financial year to the next, April – April, it just makes life a lot easier. The spreadsheets format looks something like this:

Profit and loss:

Taxable Income:

Aside from this you are pretty much ready to rock and roll. Running a business can be tricky. The key is devotion. Look after your business and your business will look after you.

For a number of years now the web has been expanding into new horizons, with the progressive enhancements of web development as the driving force we are beginning to see more and more free open source methods to convey and display information. This goes beyong the new media hash and rehash so many of us are use to seeing, into a new dimension, not just of thought, but of being.

I have been thinking about this rather a lot just recently, mulling over the possibilities and implications of pursuing such courses. The big question that still hangs doubt in my mind, is why bother? do your family and friends really care what you are doing, maybe, maybe not, it depends on who you are and what you are doing I suppose.

This rise in whats become known as “life streams” (nothing to do the FFVII) has been ignited with inspiration from applications such as twitter and facebook, which push this prospect of a news feed of your life. What facebook began has now escalated into a snowball of twitter clients talking to RSS which amalgamate and parse RSS feeds, all of which leading to the possibility of having an ever updating feed, in which your actions become the catalyst for the events displayed. This is particularly interesting when you think of services such as last.fm and many others which offer you the potential to share your actions with others.

Perhaps then this is the natural progression from the blogging phenomenon. Maybe this should be seen as then natural first step, there are already pioneers who are pushing these ideas forward, making headway for the next big online social enterprise. In the meantime while I ponder over the possibilities here are a couple of good links to examples where these new waters are being tested.

Yale Lifestream project

Lifestream open source PHP script

Tumbling sox lifestream

FriendFeed lifestreaming solution

This is an Idea that I have heard bouncing around the web for a while now. I read a very insightful article on hacification which strengthened the argument considerably.

Good Reasoning

One of the best reasons for charging extra is to enable the client to recognize the time and effort that goes into fully browser complaint websites, it takes blood sweat and tears go get compatibility just right. So charging for this as an extra service is not entirely unreasonable, after all this comes separate to the time spent designing and developing a websites look and functionality.

The truth is there has never been a de jure standard for browsing the web, which in my own opinion is one the webs greatest downfalls. Instead there is too much choice on how to navigate your way through. This has lead to a grey area when talking about web design. The assumption that a website should be viewable through any means is a fallacy, but no one has ever acknowledged this properly. The W3C have introduced standards and done a lot of very good work, but it means nothing when designers are still expected to cater for decrepit platforms such as IE6 & 7, after all lets face it Microsoft just don’t get web, They should stick to what they know, which is desktop applications. By its very means Windows messenger, and Windows Hotmail, is a complete cop out, when Im looking at my emails on my OSX im not opening my messages with a different operating system, but anyway that’s besides the point.

Problems with the Plan

As with any great suggestion there are flaws. The main concern I have is how well the argument stands up in the real world. Consider that you were sold a car, but told you could only drive it on motorways, as the wheels may fall off if you drove it on any other roads. You wouldnt stand for it, so is it acceptable in web? This is something I have thought about an awful lot, but something Im still not sure I could actually do. Perhaps it depends on the client and their requirements, the scale of the project also make a great impact. I would be interested to know what others thoughts are on this topic!?

CSS Hacks have become something of an expectation in web design, with the mutitude of browsers your audience may choose to view your site through its important that your website looks its best whatever the platform. The statistics for browser usage portray 72% of the market is taken by ever faithful Internet Explorer users, followed by Firefox with 19% and Safari in 3rd place with 6%

Within these browsers you then need to contend with version control, in which you may see one version behave wildly different to its predicessor, no where is this more apprent than in IE6 – IE7. With all these considerations in mind, why not make life a little easier for yourself and try using the following CSS at the top of your stylesheet.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

What we are doing here is declaring some master styles which will overwitre any browser specific ones, take for example IE’s broken box model, this no longer becomes an issue meaning that you save yourself a lot of time, writting exemptions on id’s and classes. which means you can spend longer thinking abut how to make the site look great, and less time on how it will format in other browsers. Its as simple as that!