One thing I would like to point out is that even with html5, I will be using flash to stream the movies and music on my sites. Many people have questioned my logic about this and I will reply here as I see the situation. Firstly, html5 and JS have been pushed as the ‘solution’ to problems that most users do not even recognise – notably that Flash is a relatively closed format compared to the open standards of html. While I completely agree that this is a major restriction with the Flash format, the actual swf that you see embedded on sites are based on completely open standards and html5 now even has an embed tag designed specifically for compliant embedding of plugins like flash.

So what does this mean for you the end user?

Nothing. Absolutely nothing! Like stated above, your end users do not necessarily care about how you have implemented the technology, only about how the technology integrates with their own experience. Or in poetic terms :

Any sufficiently advanced technology is indistinguishable from magicArthur C. Clarke

My users want a complete and simple solution that just works! So, I hear you ask, why are you still using flash now that html5 is becoming popular? Well, that is a very unusual question, probably influenced by a certain Apple enthusiast. Html5 is a semantic markup language. Html5 itself does not play audio, nor movies, it is only the guide that tell your browser that the page you are viewing contains media types. This is a huge deal in the slow moving world of the internet as it finally allows media types to be accessible to screen readers and the new markup allows pages to be ‘read’ by SEO spiders. All in all, html5 brings a range of features that improves readabilty and interoperability and ironically is a perfect compliment for flash!

Why Flash still?

Politics aside, flash is a lightweight toolkit that has specialised since 1998 in streaming multimedia and interaction. It originally was developed for 46mhz machines and is perfect for the internet and lower powered devices. There seems to be some dispute about the performance of flash and as a result, you will hear many people saying that, "flash is dead" and is to be replaced by html5 which according to these people, uses less memory and demands fewer resources. The reality is very different. I ported my actionscript media player library to javascript (I had to remove much of the functionality such as preloading, cross fading and seamless playback) and after a few simple benchmarks, I discovered that the JS and html5 used more memory, a larger memory cache, was slower on playback and used a greater volume of computer resources. All in all, there are no benefits favouring html5 and JS over flash at this moment in time. Flash has has 10 years of development and has evolved systematically with the internet – it is the single best way of delivering multimedia on the internet today. That comment may make me unpopular in today’s zeitgeist, what with flash being systematically denied on the iPad (even though flash apps are sold in the iStore) but the reality of the situation is far from obviously clear cut. I am still working on my simple JS framework for audio to fallback back on if flash is not available with my close friend Vincent Roman, former developer for Last.fm. If you feel like you have something to say, leave me a comment!

After writing about vertical rhythms and using a fixed baseline to set type to fit perfectly  onto a grid,  I thought it fitting to release my Typographic CSS generator – a super simple script that creates beautiful, balanced typography that can be dropped straight into your webpage. It’s job is three fold, firstly, it resets and normalises all styles (negating the use for a reset.css), secondly it sets a cross-browser compatible baseline and adjusts all type to fit accordingly, and thirdly it kerns text to make it as readable as possible, especially at the smallest sizes.Try it out for yourself over at the Test Page

The power lies in the different settings you can append to the query line (adding the options after the ? in the url by prefixing it with an &). The easiest and most fun way is to simply play around with the test page above or pick from one of the examples below.

1. Example 01 : Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts
2. Example 01 : Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals
3. Example 01 : Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels
4. Example 02 : Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals
5. Example 03 : Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels
6. Example 04 : Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points
7. Example 05 : Double size deafults
8. Example 06 : An example site, similar to this one!

Note : the query sent to the test page is identical to the query sent to the dynamic CSS file.

All of the output CSS is w3c valid, cross browser compatible, scales neatly and is commented and laid out readably (unless in deploy mode .

You can access the latest version of the source code over at Google Code. The source code is released under the MIT license so please improve it however you see fit, just let me see your awesome developments once you are done so that we can both benefit.

Renegade Web Radio

Bored of the charts? Looking for sounds to keep you occupied? Look no longer with music and mixes from around the world in one simple interface – combining a podcast, blog and mix aggregator – held together with AJAX magic

check it out
nomadradio.fm

Features

• Cross Fading between tracks
• Prefetching of the next track so that there aren’t any gaps between songs
• A fast visualiser that reacts onbeat as well as to the frequencies
• Saved volume and a rotary dial
• AJAX backend so that you can browse around without losing audio
• Flash <-> Javascript bi-communication

Get involved and send over your mixes!

I have very personal preferences when it comes to typography, and for this site I want to focus on readability, rather than aesthetics. I like big fonts, with big gaps between words and lots of space between lines – making it very easy to read, and incredibly easy to skim read. This is an important quality as many people will stumble onto this site needing to be made instantly familiar with the context. For important words, and to highlight significant sentences there are a number of extra CSS classes to handle fancy formatting.

An important part of any site is how it moves your user’s eyes around the page, and in particular how the vertical spacing between headings,  paragraphs and other elements maintains a rhythmn that balances and spaces out all of the information. To develop, demonstrate and code the typography I have created a special test page which contains all the headings, paragraphs and special class codes that need to be styled for the content on this site. In the background you can see the vertical rythmn shown as equally spaced horizontal stripes, or ‘baselines’.

This is the vertical drumbeat for our content. All headings, paragraphs, images and charts have to be able to sit perfectly either on these lines or use margins to offset themselves asymnetrically between (like an offbeat). This beat runs through all sections of the site and never changes.

For designerZen, I am using an 18px baseline. This was derived from playing around with the basic 12pt font (that is used for most of the site content) and changing the leading until a long paragraph was easily readable, and short paragraphs were clear. 18px with a 12px base font means 12 pixels vertically of text, then 6 pixels of space below.

Check out this page for the test.

For all fonts smaller than 18px, it is important to add line-height so that their baseline extend to the full 18px. For fonts larger than 18px, it is important to set it so that the entire hieght of the font plus line-height is a direct multiple of 18px and also the margins above and below them. Take a look at the typography.css for more information.

There are many resources to help you build to a baseline, my favourite debugging tool is syncotype, which overlays a grid of horizontal lines spaced along a baseline that you can specify. Try it out for yourself on the test page!

introducing a new way to enjoy music!

Mix your favourite music blogs with your social bookmarks, add streaming radio and folksonomy… integrate with new music web services plus the latest web trends and what do you get…?

What is it?

A fancy new website that collects your favourite music blogs, MP3s and net playlists into one universally accessible site. Read about music, discover new music, and listen to & download the latest songs based on your web-based bookmarks and the social bookmarks of thousands.

What does it do?

The use of a social bookmarking service allows you to bookmark practically any music service. You can save simple RSS or ATOM feeds from your favourite music blog, your XSPF playlists, even M3U radiostreams! The volume of music services is growing by the day, so you can aggregate all your favourite music from sites such as Imeem, IJig, The Hype Machine, BlogDigger or any blog from the thousands collected on el.bo.ws.

Furthermore, if you use last.fm webservices – which I highly recommend – you can save your recently played songs, find out which songs you already have in your collection and get advice on music that you would like but just haven’t yet heard.

How does it work?

The channels are saved in your favourite online social bookmark collection. If you don’t have one, look no further than Del.icio.us…

Simply save the RSS feed from your favourite music blog using the tag mp3blogfeed and your music-blog will be automatically available to everybody in the world on the home page with the most recent at the top. If you prefer to only see your own bookmarks, simply enter your del.icio.us username in the settings box, or if you are using another service, the correct RSS URL.

Playlists are automatically saved onto your hard disk as shared flash-cookies along with such useful things as volume and the last page you visited – dive back in from where you started!

Technical details

Written entirely from the ground up in actionscript 2 – no components, no templates.
Uses Shared Local Objects to save xspf playlist, volume and recent browsing history.
Features javascript data api to allow bookmarking and the emailing of blog links.
Uses your existing social bookmarking services – imports RSS, XML & OPML.
Intelligent caching of data and pre-empting of user desired information.

Features a scrolling data window with mousewheel input, inertia and variable speed scrolling.

Note : This project has been discontinued due to lack of time thanks to my new job as the head of flash at Last.fm!

Ajax Multimedia webshop!

Dripping with high-tech features, this new music label offers free previews, podcasts and chances to buy digital songs or vinyl! This one stop site will cater for all your eclectic dance needs. Don’t forget about the secret button!

This new music label that cut its teeth releasing party vinyl has gone digital with a fresh new music website and shop!

Play music whilst shopping for music, previewing any track live. That was the main objective… well that along with high quality music delivery using Web2.0 features such as podcasting and rss feeds.

With a stark graphic style by Vacant Design we needed some strong visual animations as cue points for actions. The Flash-based music player is autonomous and animated as it loads an artist’s playlist or swaps between songs. For those not of a nervous disposition, there is always the secret hyper mode (*top dial on the left) if you find it too tame.

Speaking of the music player, let me mention a few unique features:

• automatic saving of your volume preference for when you come visit us again
• communicates with the artists’ pages so that songs can be selected outside of the music player
• wholly animated to reflect the party music is playing with regards to the volume
• super secret party mode for fast processors

If you would like to attend any events, join the mailing list and check out the news and live pages.

Technical details

⊗ ActionScript 2.0 Custom music player code with intelligent internal music database.

⊗ Flash mx compatible with ActionScript animated GUI.

⊗ Music Player loads XML, RSS and XSPF playlists from the netcast.

⊗ Javascript html music controls and feedback – communicating between flash and html.

⊗ On-the-fly xpsf and xml (atom or RSS) playlist creation with scraped coverart

⊗ Based on the Opensource CMS WordPress. Yes really!

⊗ SEO super optimised with analytical software to determine most important records.

⊗ All Artists and channels have relevant RSS and ATOM feeds.

⊗ AJAX page requests into dynamic html.

⊗ Down-gradeable to simple html shop.