Archive: May, 2010

51

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am        
4am    
8am                      
12pm                
4pm              
8pm                

Monday, May 31st, 2010

Awe Dee Oh

You may have noticed a lot of HTML5 vs. Flash talk lately. Substitute HTML5 for HTML5 video.

Frankly, I’m a little baffled by this supposed dichotomy because you don’t have to choose. The way that video works, according to the spec, is for fallback content to be placed between the opening and closing<video> tags. So you can go ahead and use object or embed or whatever you need to put your Flash video in your markup. Browsers that understand the video element will use that while less capable browsers will play the Flash movie in the object element (and because of the way the object element works, you can put yet another layer of fallback content between the opening and closing <object> tags).

It’s the same with audio. So, on Huffduffer, for example, I can wrap <audio> tags around the object element that embeds the Flash player:

<audio controls src="file.mp3">
 <object data="flashplayer.swf?audio=file.mp3">
  <param name="movie" value="flashplayer.swf?audio=file.mp3">
  <a href="file.mp3">ah, just download it</a>
 </object>
</audio>

But there’s a problem. Firefox understands the audio element but refuses to implement support for MP3 as long as it is patent-encumbered. Firefox users don’t get the fallback content (because the browser does support audio) but they don’t get the MP3 either. They get a broken icon.

So it’s safer to just use the Flash player, right? There’s a problem with that too. Mobile Safari doesn’t support Flash …but it does support the audio element. How can I serve up Flash to desktop browsers and HTML5 audio to the iPhone and iPad without going down the dark path of browser sniffing?

Easy. Just flip the order of what constitutes fallback content:

<object data="flashplayer.swf?audio=file.mp3">
 <param name="movie" value="flashplayer.swf?audio=file.mp3">
  <audio controls src="file.mp3">
   <a href="file.mp3">ah, just download it</a>
  </audio>
</object>

That works in Firefox—and any other browser with Flash installed—and it also works on the i(Pad|Phone|Pod).

Huffduffer — landscape

Friday, May 28th, 2010

Evolution and Creativity: Why Humans Triumphed - WSJ.com

Matt Ridley's new book sounds like a corker.

Thursday, May 27th, 2010

Fonts Live

Ascender is selling (and hosting) webfonts now.

Wednesday, May 26th, 2010

Mozilla hires open-standards guru Celik | The Social - CNET News

Tantek is working with Mozilla now. I expect great things will come of this.

Monday, May 24th, 2010

Rams’ Principles Series: 7 of 10 | Inksie Journal of Design & Culture

Mandy's take on Dieter Rams's design principle that "good design is long-lasting."

Wishlist » User Testing with Silverback

A nice little case study in using Silverback.

Saturday, May 22nd, 2010

Sparkmaps

Last week, on Richard’s recommendation, Jessica and I went out to eat at relatively new Kemp Town establishment, The Ginger Dog—all in the name of research for Prinicipia Gastronomica of course.

Being relatively new to this neighbourhood, I wanted to make sure we didn’t go astray. I don’t have an iPhone but I do have an iPod Touch so, before leaving the house, I loaded up the map app with walking directions.

The way to The Ginger Dog

Even though I didn’t have 3G, or even WiFi, to help me on my perambulation, the iPod Touch does have triangulation. So every time I checked the map, a blue dot marked my spot. I just had to make sure that the blue dot didn’t stray off the purple line.

On the way back, I opened up the map app again to retrace my steps. This time, the map tiles didn’t load. But my route home was still marked in purple, and the blue dot still showed my position.

That’s when I realised that all the other information on the map—the streets and landmarks—were irrelevant to the task of navigating my way from A to B. All I needed to do was keep the blue dot on the purple line. It’s the minimum information density for wayfinding: the mapping equivalent of a sparkline.

Map sparkline

Friday, May 21st, 2010

Win A Book Apart – Jeffrey Zeldman Presents The Daily Report

Use Gowalla? Want a copy of my book? Jeffrey has the details.

Thursday, May 20th, 2010

OpenPlatform Content API Explorer

A handy interface onto The Guardian's new API.

Google Font Directory

Google-hosted free-as-in-beer webfonts.

» UX London report: day 1 Johnny Holland – It's all about interaction » Blog Archive

A comprehensive report of the excellent first day of UX London.

The WebM Project : The WebM Project : Welcome to the WebM Project

Mozilla, Opera and Google are collaborating on an open format for audio and video for the web (a wrapper for Vorbis for audio and VP8 for video).

Wednesday, May 19th, 2010

Minimal Competence: Data Access, Data Ownership, and Sharecropping. - Laughing Meme

Kellan outlines the bare minimum you should expect from any service that you are putting data into.

Tuesday, May 18th, 2010

Pictaculous - A Color Palette Generator (courtesy of MailChimp)

A handy tool for generating colour palettes from images.

My Canvas Learning Page

Conway's Game of Life, implemented in canvas.

Monday, May 17th, 2010

These Golden Books Are Not For Children - Humor - Kotaku

Are you sitting comfortably? Then I'll begin.

Friday, May 14th, 2010

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything - Dive Into HTML5

A really handy list of really short JavaScript code for HTML5 feature detection.

New Programming Jargon — Global Nerdy

Some of the best neologisms in programming, many of them to do with bug-fixing.

Notes on HTML5 Parser History — Anne’s Weblog

Anne explains exactly why the HTML parser defined in HTML5 is A Very Good Thing for everyone.

HTML 5 Asteroids | Doug McInnes

Asteroids in canvas. Works a treat. Now I want Battlezone.

Thursday, May 13th, 2010

Long Snake City | booktwo.org

Snakes'n'ladders played on the streets of London. Fun!

Hyperbole and a Half: Things That Can Make You Feel Like an Idiot Almost Instantly

I'm going to have to start ticking things off this list.

Wednesday, May 12th, 2010

2010 Space Elevator Conference

I would really love to go to this. Our planet needs a space elevator.

Tuesday, May 11th, 2010

Firefox 4: the HTML5 parser – inline SVG, speed and more ✩ Mozilla Hacks – the Web developer blog

Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).

Happy Magic Fun Time — HTML5 For Drunks

I wasted my time writing HTML5 For Web Designers when clearly, this is the best tutorial on HTML5 ever.

Mojibakeru kanji-animal transformers ::: Pink Tentacle

Kanji characters that transform into the animal they represent.

Monday, May 10th, 2010

Geology in Art: The Thagomizer

"...after the late Thag Simmons." No, really. It's a proper paleontological term now.

LittleBigPlanet 2

A platform game? A platform for games!

A site for Science Hack Day

I spent the weekend immersing myself in HTML5 and CSS3.

I gave Principia Gastronomica a bit of a fine-tuning under the hood. I decided to ditch all the background images I was using to get rounded corners and drop shadows, and just use border-radius and box-shadow instead. Internet Explorer gets the same content with more pointy corners and without the illusion of depth.

I also launched a brand new site: ScienceHackDay.org. It’s a small little site designed to quickly dispense relevant information on the upcoming geektastic Science Hack Day in London on June 19th and 20th.

The front page is also a blog. I’ll be posting updates about the event there and I’ll also be highlighting science projects and hack ideas. Subscribe to the feed if you want get updates.

I couldn’t be bothered installing or writing blogging software for the site. It seemed like overkill for such a quick’n’nimble project so I’m just blogging in HTML using . It’s converted to Atom using Luke Arno’s handy service. I was going to use the transcoder on Microformatic.com but I think it uses which means it won’t work on the new HTML5 elements.

The underlying structure is a combination of microformats, HTML5 structural elements and ARIA roles. The styling is over-the-top CSS3. There’s border-radius, opacity and RGBa a-plenty. Setting colours using opacity and alpha transparency makes it a breeze to customise the colours on each page, so the schedule, location and not-so-FAQ pages all have a slightly different tint.

Internet Explorer doesn’t get any of this colourful or roundy goodness. It does however, get the typography and layout, much like the print stylesheet view. I wouldn’t do that for client work but I’m perfectly happy to do it for a weekend project.

Check out the site and if you decide that Science Hack Day looks like your kind of event, add your name on the wiki.

You can also follow @sciencehackday on Twitter to get bite-sized updates as they happen.

Transcription Services | uiAccess

A list of services you can use to get your podcast transcribed.

The Big Web Show 2: HTML5 Boogaloo

I had the pleasure of joining hosts Dan and Jeffrey for the second episode of The Big Web Show.

We talked about Pete Townsend and cats that look like Hitler but mostly we talked about HTML5. Specifically, we talked about what’s between the covers of .

The audio is available for your huffduffing pleasure so go ahead and huffduff it if you fancy an hour’s worth of three-way markup action.

The Big Web Show 2: HTML5 with Jeremy Keith on Huffduffer

Sunday, May 9th, 2010

theoriginofthe<blink>tag (www)

The origins of the blink element are fascinating. To nobody's surprise, alcohol was involved.

Saturday, May 8th, 2010

Cthulhu Is Not Cute | HiLobrow

Of plush toys and tentacle porn.

Async | The Brighton JavaScript meetup group

A new geek gathering in Brighton, every second Thursday, all about JavaScript.

Friday, May 7th, 2010

The Big Web Show 2: HTML5 with Jeremy Keith | 5 by 5

I had a lot of fun chatting with Dan Benjamin and Jeffrey Zeldman about HTML5 for Web Designers. Now you can watch the video or listen to the podcast.

HTML Lint

Finally! A lint tool for HTML (including HTML5) so you can enforce strictness in your writing style.

The format of The Long Now

In 01992, Tim Berners-Lee wrote a document called HTML Tags.

In September 02001, I started keeping this online journal. Back then, I was storing my data in XML, using a format of my own invention. The XML was converted using PHP into (X)HTML, RSS, and potentially anything else …although the “anything else” part never really materialised.

In February 02006, I switched over to using a MySQL database to store my data as chunks of markup.

In February 02007, Ted wrote about data longevity

To me, being able to completely migrate my data — with minimal bit-rot — from system to system is the key in the never-ending and easily-lost fight to keep my data accessible over the entirety of my life.

He’s using non-binary, well-documented standards to store and structure his data: Atom, HTML and microformats.

Meanwhile, the HTML5 spec began defining error-handling for HTML documents. Ian Hickson wrote:

The original reason I got involved in this work is that I realised that the human race has written literally billions of electronic documents, but without ever actually saying how they should be processed.

I decided that for the sake of our future generations we should document exactly how to process today’s documents, so that when they look back, they can still reimplement HTML browsers and get our data back, even if they no longer have access to Microsoft Internet Explorer’s source code.

In August 2008, Ian Hickson mentioned in an interview that the timeline for HTML5 involves having two complete implementations by 02022. Many web developers were disgusted that such a seemingly far-off date was even being mentioned. My reaction was the opposite. I began to pay attention to HTML5.

HTML is starting to look like a relatively safe bet for data longevity and portability. I’m not sure the same can be said for any particular flavour of database. Sooner rather than later, I should remove the unnecessary layer of abstraction that I’m using to store my data.

This would be my third migration of content. I will take care to head Mark Pilgrim’s advice on data fidelity:

Long-term data preservation is like long-term backup: a series of short-term formats, punctuated by a series of migrations. But migrating between data formats is not like copying raw data from one medium to another.

Fidelity is not a binary thing. Data can gradually degrade with each conversion until you’re left with crap. People think this only affects the analog world, like copying cassette tapes for several generations. But I think digital preservation is actually much harder, in part because people don’t even realize that it has the same issues.

He’s also betting on HTML:

HTML is not an output format. HTML is The Format. Not The Format Of Forever, but damn if it isn’t The Format Of The Now.

I don’t think that any format could ever be The Format Of The Long Now but HTML is the closest we’ve come thus far in the history of computing to having a somewhat stable, human- and machine-readable data format with a decent chance of real longevity.

Fake Science

An excellent education resource.

Thursday, May 6th, 2010

HTML5, ARIA Roles, and Screen Readers in May 2010 — Research — Accessible Culture

Test results for screen readers navigating content that uses new HTML5 elements and ARIA roles.

Wednesday, May 5th, 2010

WAI-ARIA Schemata

There is a doctype for HTML4 + ARIA but "This DTD is made available only as a bridging solution for applications requiring DTD validation but not using HTML 5."

IAA SETI Permanent Study Group: Post-Detection Protocols

A nine-point document that constitutes a "Declaration of Principles Concerning Activities Following the Detection of Extraterrestrial Intelligence."

Debatable act

I took part at an event held last week in the same building as the Clearleft office. It was called Debating the Digital Economy Act …except it wasn’t really a debate. Everyone was in agreement that the legislation is dreadful and that the way it has been rushed through parliament was a travesty.

Nonetheless, it was still a valuable gathering. Instead of debating on the pros and cons of something that has no redeeming qualities, we tried to tackle the issue of what we can do about it.

One of the best points of the night came from Pete who pointed out how important it was that we de-geekify the discussion lest we get brushed aside as pitchfork-wielding digerati.

The event began with opening remarks from each of the white, middle-aged panelists. My own remarks were definitely on the geeky side: a long-zoom perspective entitled Fear is the Mind-killer. You can read it now or add it to Instapaper to read later.

I made an audio recording of my opening remarks. You can listen to it now or you can huffduff it to listen to it later.

Fear Is the Mind-killer by Jeremy Keith on Huffduffer

It’s licensed under a Creative Commons attribution license. Do with it as you wish.

FontDeck: Exclusive Sneak Peek | Design Shack

Get a glimpse behind Fontdeck's curtain.

Tuesday, May 4th, 2010

Question Park | Captcha in the Rye

If you do insist on having a captcha, why not make it a bit more interesting? Also: best blog post title ever.

Color Survey Results « xkcd

The wonderfully detailed analysis of a colour questionnaire.

Announcing HTML5 For Web Designers

For the third time in my life, I have written a book. HTML5 For Web Designers is available for pre-order now from A Book Apart.

That’s right—the same lovely people who brought you A List Apart are now delivering good ol’-fashioned dead tree publications.

The quality and craftsmanship of the resultant book is, as you would expect, stratospherically high. How could it not be given the team of superheroes who put it together:

Working with them has been an honour and a pleasure. I’m certain that is their generosity that spurred me on to deliver what is, in my opinion, the best thing I have ever written.

It’s not a long book. It’s about 16 kilowords long. That’s a feature, not a bug.

If I had more time, I would have written a shorter letter.

Whether that quote is attributable to Cicero, Twain or Pascal, it speaks to a real truth in writing. Omit needless words said William Strunk. Or, as Orwell wrote in Politics and the English Language:

If it is possible to cut a word out, always cut it out.

But that doesn’t mean that HTML5 for Web Designers is a mere exercise in brevity and information density. It’s also quite fun.

Fun isn’t a word that you often hear associated with technical subjects like markup languages but I knew that if I wanted to appeal to the right audience for this book, I had two watchwords:

  1. It has to be brief.
  2. It has to be entertaining.

That’s where the team behind A Book Apart really helped me.

I started with the first chapter and wrote it in my voice. This is usually the point at which a traditional publisher would respond with suggestions for improvements to the writing style to make itappeal to a wider audience …resulting in a watered-down bland shadow of the original.

Jeffrey, Mandy and Jason responded with so much enthusiasm and encouragement that I felt I could continue to just be myself when writing this book. The result is something I am truly proud of.

Given its brevity, HTML5 for Web Desigers is obviously not an exhaustive look at everything in HTML5. There is no mention of offline storage, drag’n’drop or any of the other advanced JavaScript APIs. Instead, I’ve focused on forms, rich media, and most importantly, semantics. The book is intended as a primer for web designers who are hearing a lot of conflicting and confusing things about this strange amalgamation of technologies called HTML5. I hope to bestow some measure of clarity and understanding.

The first hit is free. You can read chapter one, A Brief History of Markup, on A List Apart.

Jason describes the design process, Mandy tells of the business aspect and Jeffrey has written a very kind and flattering overview of the book. You can pre-order your copy now.

As excited and proud as I am of HTML5 for Web Designers, is it wrong that I am equally excited that the book is also an item on Gowalla?

Sunday, May 2nd, 2010

Fear Is the Mind-killer

These opening remarks were delivered at a debate on The Digital Economy Act held in Brighton in April 2010.

Understanding

Every so often I’ll read something on the web that somebody else has written and I’ll think Yes! That! That’s what I’ve been trying to say!

I’ve already told of experiencing just that whilst reading Raiding Eternity. Now I’ve experienced it again. This time the culprit is Ben Ward, the talented bastard.

He reeled me in with the synopsis of his latest article. It’s called Understand The Web:

Perceptions of the web are changing. People are advocating that we treat the web like another application framework. An open, cross-platform, multi-device rival to Flash and Cocoa and everything else. I’m all for making the web richer, and exposing new functionality, but I value what makes the web weblike much, much more.

On the one hand, it’s a straightforward fact-check and slap-down for the factually-incorrect nonsense being spouted on Twitter and elsewhere by those who are reconstructing the history of the web as a work of fiction spun in the own minds to match their misunderstandings of how browsers and standards bodies work. As Ben puts it:

This is the short, perhaps selective memory that the internet suffers from. It is not acceptable to me that 21st century knowledge retention has become so short and shallow as to be overwritten by influential ranting on Twitter. A greater tool for the dissemination of misinformation has never been known.

But the real reason why you should read Ben’s piece is that it encourages all of us to take a step back and think about what the web really is. It’s not just a choice of platform for building applications (whatever that means), it’s so much more:

Want to know if your ‘HTML application’ is part of the web? Link me into it. Not just link me to it; link me into it. Not just to the black-box frontpage. Link me to a piece of content. Show me that it can be crawled, show me that we can draw strands of silk between the resources presented in your app. That is the web: The beautiful interconnection of navigable content. If your website locks content away in a container, outside the reach of hyperlinks, you’re not building any kind of ‘web’ app. You’re doing something else.

I could quote the whole thing, so perfectly does it map to my own feelings and thoughts on the web, but instead I urge you to go to Ben’s site, read what he has written and understand the web.

MiniApps - HTML5 apps for iPhone, iPad, Android & other mobile platforms

A nice collection of free apps for your mobile device. No app store required, thanks to offline storage.