Link archive: July, 2011

The Tink Tank » Marking up the current page with HTML5 links

Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.

‪OSCON 2011, Ariel Waldman, “Hacking Space Exploration”‬‏ - YouTube

Ariel’s inspiring keynote from OSCON in Portland, featuring two very exciting Science Hack Day announcements at the end.

Forty Fords | Arts | National Post

Have some fun by finding these four Harrison Ford quotes amongst the forty characters he has played:

• “I didn’t kill my wife!”
• “My family!”
• “I’m looking for my wife!”
• “Dad!”

Please Send Me To The UK For The Update 2011 Conference :: Freelance WordPress Developer Amber Weinberg

Amber really wants to come to Aral’s Update conference. Can you help her out?

#rorschmap

Another beautiful piece of work from James: a kaleidoscope made from Google maps.

Personal names around the world

A terrific overview by Richard of the variations in names around the world:

How do people’s names differ around the world, and what are the implications of those differences on the design of forms, ontologies, etc. for the Web?

Page Speed Service Home

Performance shit just got real.

You can now sign up with Google to have your site pass every request through them and get your documents served up optimised.

Lava Lamp Installation on Vimeo

Brighton hacker Jason Hotchkiss demos his music-generating lava lamps in this promo video for the Brighton Maker Faire taking place the day after dConstruct.

Avoiding common HTML5 mistakes | HTML5 Doctor

A great round-up by Richard of some of the most common semantic pitfalls encountered with HTML5.

Paul Robert Lloyd

Paul has redesigned. Again. It’s gorgeous and it is, of course, responsive.

Contrast Rebellion - to hell with low-contrast fonts!

A cute website that’s a call-to-arms against low-contrast text on the web.

CreativeJS | The very best of creative JavaScript and HTML5

This is your one-stop shop for envelope-pushing in the browser:

The very best of creative JavaScript and HTML5.

Getting Sourcey – native HTML5 Audio and video | Web Directions

Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.

Ancient Lives | Help us to Transcribe Papyri

The Zooniverse boffins have done it again! This time you can help to transcribe ancient Egyptian texts. Brilliant!

BBC - BBC Internet Blog: BBC World Service Language Websites: user experience and typography

A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.

Tweeter Street

Portraits of people that tweet, what they tweet, where they tweet.

Google

A fascinating examination by Hixie of web technologies that may have technically been “better” than HTML, but still found themselves subsumed into the simpler, more straightforward, good ol’ hypertext markup language.

The follow-on comments are definitely worth a read too.

Responsive web design from the future — Warpspire

I really like the thinking that’s gone into the design of Github, as shown in this presentation. It’s not really about responsive design as we commonly know it, but boy, is it a great deep dive into the importance of URLs and performance.

Responsive Design Testing

Another browser-based tool for viewing the same site at different sizes, but this one displays them all the same time, side by side.

ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.

Another browser-based tool for testing your responsive designs at different screen sizes.

ART=WORK · Design for a Target Experience First

A thoughtful post on how to approach responsive web design. In short, it’s going to be different for every project.

responsivepx - find that tricky breakpoint

Remy created this tool for resizing a viewport to figure out where to put the breakpoints in your media queries.

Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions

A handy little service for viewing sites at different dimensions. Just be aware that it doesn’t actually emulate different devices.

Responsive images with ExpressionEngine — John Faulds

Here’s an approach to responsive images in the Expression Engine CMS …but I fundamentally disagree with the UA-sniffing required.

Responsive images using CSS3 – Nicolas Gallagher

Once there’s better support for the CSS3 attr() function, this could be a nifty way of handling responsive images (although large-screen user-agents will download more than one image).

Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

Another approach to responsive images, this time using background images. The disadvantage is that large-screen devices will download both images. Still, pretty darn clever.

Responsive images using cookies | Keith Clark

A well-thought approach to responsive images (although personally, I would use cookies to store the dimensions of the viewport rather than the dimensions of the screen).

Journal // One

It’s very gratifying to know that I encouraged someone to write something.

Beautiful Swear Words

A swear word a day, typeset.

The magic button — Make Everything OK

This feels so good.

Mark Perkins  ★  All Marked Up

I agree 100% with Mark’s thoughts on what a Content Management System should and shouldn’t attempt to do.

I think that markup is too important to be left in the hands of the people who make content management systems. They all too often don’t care enough about it, and they can never know the context that you will be using it in, and so in my opinion they shouldn’t be trying to guess.

xkcd: Standards

So true, it hurts.

>> blog » html5′s new bdi element

An excellent explanation from Richard of the bdi element (bi-directional isolate) for handling a mixture of left to right and right to left languages in HTML5.

Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet)

I agree with Oli’s conclusion:

Save IDs for fragment identifiers or JavaScript hooks.

You Say Responsive, I Say Adaptive | Sparkbox

On the importance of using fluid grids as part of responsive web design:

We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.

Responsive Containers - Blog | Andy Hume

This is an excellent idea from Andy: selector queries. Like media queries but at the component level. Quite often it isn’t the width of the viewport that matters, it’s the width of the containing element for whatever you’re trying to style.

Content Choreography | Trent Walton

A wonderful post by Trent Walton on the thinking and workflows we can employ with responsive design. So many opportunities!

Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.

Muff Diving Donegal Ireland Scuba Diving Ireland

Fnar, fnar, and indeed, fnar.

Why not become a lifetime member of the Muff Diving Club? Makes a perfect gift as you will get a Muff Diving Club membership card posted out to proove that you’re an official Muff diver.

HTML5 Rocks - HTML5 vs Native: The Mobile App Debate

An even-handed weighing up of the pros and cons of native and web app development for mobile.

2011 Mobilism workshops announced · Blog · Mobilism

Stephen and PPK are taking their two-day mobile workshop on the road, including two dates in the UK (one of which is Brighton!). There’s a welcome emphasis on testing.

Designing for Content: Creating a Message Hierarchy - Web Standards Sherpa

Steph Hay takes a look at how websites can allow a narrative to unfold, with the Ben The Bodyguard site as a case study.

HTML5Pattern

A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.

Document Outlines | HTML5 Doctor

Mike takes on the very tricky task of explaining the new outline algorithm—definitely one of the hardest features of HTML5 to explain, in my opinion.

See something or say something - a set on Flickr

These lovely visualisations of geotagged photos and tweets are almost indistinguishable from aerial views of cities at night.

Physical GIF by Greg Borenstein — Kickstarter

What a wonderful idea! Create a zoetrope from an animated .gif.

An iPhoneography and Mobile Photography Conference

The world’s first mobile photography conference will take place in San Francisco on September 24th this year, featuring Dan Rubin, Jessica Zollman and more.

manifestR - offline web apps made easy (well easier)

A bookmarklet to help you figure out what files you might want to put in your cache manifest for offline storage.

Get off(line) | Web Directions

John has written a very in-depth look at offline storage (using the cache manifest) in HTML5.

Why We Need the New News Environment to be Chaotic « Clay Shirky

Clay Shirky takes a long hard look at the present (and future) of newspapers and—more important—of journalism. A good read.

How to fail at mobile web [Legends of the Sun Pig - Martin Sutherland’s Blog]

It’s a provocative title but I certainly agree with this post’s premise. And the situation it describes is all too familiar.

Terry Bisson’s “They’re Made Out of Meat” on Huffduffer

A classic (very) short science fiction story that posits an interesting solution to the Fermi paradox.

loads.in - test how fast a webpage loads in a real browser from over 50 locations worldwide

A handy tool for checking page load times.

[whatwg] The blockquote element spec vs common quoting practices

I’m getting behind Oli’s proposal to allow non-quoted footers within blockquotes in HTML. Here’s where I quote the design principles to support his case.

Citizen Science Alliance

Those excellent Zooniverse people—who gave us such excellent projects Galaxy Zoo and the amazing Old Weather—are soliciting proposals for more citizen science efforts.

Mobile-First Responsive Web Design | Brad Frost Web

A nice round-up of responsible responsive web design techniques, ‘though I would go a bit further and suggest that the rallying cry is not so much about Mobile First but Content First.

Responsive by default - Blog | Andy Hume

A superb long-zoom view of responsive design from Andy. He also talks about the pragmatism required from any front-end developer.

Archives & Museum Informatics: Museums and the Web 2010: Papers: Cope, A.S., Buckets and Vessels

Here’s one to add to Instapaper or Readability to savour at your leisure: Aaron Straup Cope’s talk at Museums and the Web 2010:

This paper examines the act of association, the art of framing and the participatory nature of robots in creating artifacts and story-telling in projects like Flickr Galleries, the API-based Suggestify project (which provides the ability to suggest locations for other people’s photos) and the increasing number of bespoke (and often paper-based) curatorial productions.

SVK - Products - BERG

This comic is the result of a collaboration between Warren Ellis and BERG. It must, therefore, be splendid. I’ve ordered mine.

Which Fish

A handy mobile-friendly list from Mike Stenhouse of which fish are currently having their stocks depleted. It uses offline storage so once you’ve visited once, you’ll be able to pull it up anywhere.

YouTube - ‪The Loving Trap‬‏

Pitch-perfect parody of Adam Curtis’s particular style of documentary guff.

Dear Photograph

Atemporality can be very moving.

Examples of blockquote metadata ❧ Oli.jp (@boblet)

Now this is how you make progress on getting changes made to a spec: by documenting real-world use cases.

Pretenders: Why mobile Web apps should stop trying to act like native apps « cvil.ly

I agree with this. I like it. I plus one it. So to speak.

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

Post-Artifact Books and Publishing — by Craig Mod

Take some time out to read this. Read all of this. Craig’s thoughts on the nature of publishing today:

Digital’s effect on how we produce, distribute and consume content.

Tiny-Ass Boba Fett « Chloe Weil

I can confirm that this crocheted mini Boba Fett is just about the cutest and simultaneously awesomest thing ever!