Tags: a

Archives in the Digital Age

I’m going to be taking part in a discussion upstairs in The Eagle in Brighton on May 14th, all about digital preservation. I think it’s going to be really fun. It’s free—you should come along.

It’s a Website | treevis

Apps:

Apps must run on specific platforms for specific devices. The app space, while large, isn’t universal.

Websites:

Websites can be viewed by anyone with a web browser.

And that doesn’t mean foregoing modern features:

A web browser must only understand HTML. Further, newer HTML (like HTML 5) is still supported because the browser is built to ignore HTML it doesn’t understand. As a result, my site can run on the oldest browsers all the way to the newest ones. Got Lynx? No problem. You’ll still be able to find matches nearby. Got the latest smartphone and plentiful data? It’ll work there, too, and take advantage of its features.

This is why progressive enhancement is so powerful.

My site will take advantage of newer technologies like geolocation and local storage. However, the service will not be dependent on them.

The Future of the Open Web - Broken Links

I completely understand Peter’s fears here, and to a certain extent, I share them. But I think there’s a danger in only looking to what native platforms can do that the web doesn’t (yet). Perhaps instead we should be looking to strengthen what only the web can offer: ubiquity, access, and oh yeah, URLs.

Google’s authentication-less, on-the-fly image resizing service

Did you know Google runs a free an open image resizing service?

I did not! This could be quite useful. Seeing as it’s an https endpoint, it could be especially useful on https sites that pull images from http domains (and avoid those mixed-content warnings).

The Web (Browser) We Forgot - Kimberly Blessing (Think Brownstone) keynote - YouTube

This is a wonderful presentation by Kimberley at O’Reilly’s Fluent Conference, running through the history of the Line Mode Browser and the hack project we worked on at CERN to emulate it.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

Future Library – Framtidsbiblioteket

Here’s a lovely project with an eye on the Long Now. Trees that were planted last year will be used to make paper to print an anthology in 2114.

Margaret Atwood is one of the contributors.

DYNAMO | A Science Fiction Webseries by KarmaPirates

This web series is better than most big-budget hollywood films; witty, entertaining, and perplexing in equal measure.

Tips for speakers — Cennydd Bowles

As a speaker and a conference organiser, I heartily concur with just about every item in this list.

Project Kronos on Vimeo

A beautiful bit of design fiction.

Everyone has JavaScript, right?

And that’s why you always use progressive enhancement!

screen shot from the TV series Arrested Development, showing a character whose catchphrase began 'And that's why...'

JavaScript is not Java – JavaScript is to Java as hamster is to ham.

Your once-a-decade reminder from Kaela Nichols.

What does Google need on mobile? — Benedict Evans

The key change in all of this, I think, is that Google has gone from a world of almost perfect clarity - a text search box, a web-link index, a middle-class family’s home - to one of perfect complexity - every possible kind of user, device, access and data type. It’s gone from a firehose to a rain storm. But on the other hand, no-one knows water like Google. No-one else has the same lead in building understanding of how to deal with this. Hence, I think, one should think of every app, service, drive and platform from Google not so much as channels that might conflict but as varying end-points to a unified underlying strategy, which one might characterize as ‘know a lot about how to know a lot’.

Creating the Schedule // beyond tellerrand

Marc and I have chatted before about the challenges involved in arranging the flow of talks at a conference. It’s great that he’s sharing his thoughts here.

ConferenceCall.biz

This is just like a real conference call.

Trigger warning: this is just like a real conference call.

[this is aaronland] did I mention it vibrates?

history is time breaking up with itself

A great piece of hypertext from Aaron on the purpose of museums, the Copper Hewitt Pen, and matter battles.

twoway.st - an independent explorer for the British Museum collection

I like this. It fills like a very webby way to explore a museum collection. Use any axis you like.

This is a sketch made quickly to explore what it means to navigate a museum catalogue made of over two million records. It’s about skipping around quickly, browsing the metadata as if you were wandering around the museum itself in Bloomsbury, or better yet, fossicking about unattended in the archives.

Hazards Of Prophecy by Arthur C. Clarke

A PDF of Clarke’s classic essay on the follies of prediction. From the 1972 collection The Futurists, edited by Alvin Toffler.

Accessibility and Low-Powered Devices | Brad Frost

Brad points out the importance of supporting—which is not the same as optimising for—the non-shiny devices out there.

I really like using the Kindle’s browser as a good baseline for checking that information is available and readable.

Progressive enhancement with handlers and enhancers | hiddedevries.nl

I like this declarative approach to associating JavaScript behaviours with HTML elements.

Keeping it simple: coding a carousel by Christian Heilmann

I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.

If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.

Codebar Brighton came to Clearleft.

Charlotte’s opening remarks at the most recent Codebar were, by all accounts, inspiring.

I was asked to give a short talk about my journey into coding and what advice I would give to people starting out.

The Failed Promise of Deep Links — Backchannel — Medium

A really great piece by Scott Rosenberg that uses the myopic thinking behind “deep linking” in native apps as a jumping-off point to delve into the history of hypertext and the web.

It’s kind of weird that he didn’t (also) publish this on his own site though.

Talking design

Mariana Mota is writing a book on the collaborative design process. She’s sharing her research videos as she goes.

The first video features Gerry Leonidas.

Sound Mirrors

Before there was radar, there were acoustic mirrors along the coast of England—parabolic structures designed to funnel the distant sound of approaching aircraft.

A Lot Of Sorrow

I don’t want to get over you.

On 05 May 2013 The National played the song ‘Sorrow’ for 6 hours…

Profits from the soon-to-be-released recording go to Partners In Health:

A non-profit that brings the benefit of modern medical science to those most in need.

The One-Minute Test — Medium

I really like this idea of Jared’s. Finish up a meeting by having everyone write down the answers to these three questions in 60 seconds:

  1. What was the big idea? (What was the most important thing you heard at the meeting?)
  2. What was your big surprise? (What was the thing you saw or heard that surprised you the most?)
  3. What’s your big question? (What’s the biggest unanswered question you have at this time?)

I can certainly relate to these findings:

We find that it’s not unusual to discover that different people in the room had just attended completely different meetings. People are surprised by things that other people take as a matter of course. People take away a different emphasis about what was discussed. People’s fears and concerns are reflected in their outstanding questions.

Dev.Opera — UX accessibility with aria-label

A great run-down by Heydon of just one ARIA property: aria-label.

SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need

A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.

Bruce Lawson’s personal site  : The misadventures of my meteorological nipples

Truly great literature not only tells us more about the human condition, it also tells us more about ourselves and does so in a beautiful way that changes us forever more.

So anyway, this is about Bruce’s nipples.

CloudConvert - convert anything to anything

Ignore the silly name: this looks a supremely useful service—convert just about any file format into just about any other file format.

The Path to Performance

A new podcast for your huffduffing pleasure. It’s all about performance and it’s hosted by Katie and Tim.

15 Years of Dao · An A List Apart Blog Post

On the fifteenth anniversary of A Dao Of Web Design people who make websites share their thoughts.

Paul Ford’s is a zinger:

I don’t know if the issues raised in “A Dao of Web Design” can ever be resolved, which is why the article seems so prescient. After all, the Tao Te Ching is 2500 years old and we’re still working out what it all means. What I do believe is that the web will remain the fastest path to experimenting with culture for people of any stripe. It will still be here, alive and kicking and deployed across billions of computing machines, in 2030, and people will still be using it to do weird, wholly unexpected things.

John Resig - Annotated Version of the Original jQuery Release

This is a fascinating bit of web archeology: John has annotated the code from one of the earliest versions of jQuery.

pacapong by kingPenguin

Pacman meets Pong meets Space Invaders.

Accessibility Wins

Marcy’s Tumblr blog of examples of accessibility in action on the web.

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Jeremy Keith @ The Digital Pond - Responsive Design - YouTube

Here’s a talk give at a community event in London last summer.

Want to help prevent online bullying? Comment on Facebook

Proving something that Derek Powazek told us 15 years ago:

When we clearly show what is and is not acceptable, the tone does change. People who want to share thoughtful comments start to feel that theirs are welcome, and people who want to spew hatred start to realize theirs are not.

D’hear that, Reddit?

Codebar Brighton from Matchbox HQ - Matchbox Mobile

Jo writes about hosting Codebar Brighton. I share her enthusiasm—it feels like a great honour to be able to host such a great community event.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Native Scrolling by Anselm Hannemann

This gets nothing but agreement from me:

For altering the default scroll speed I honestly couldn’t come up with a valid use-case.

My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.

isolani - Web Standards: Flash’s slide into irrelevance

Mike runs through the history of Flash. Those who forget the history of the web are doomed to repeat it:

The struggle now seems to be turning to native apps versus non-native apps on the mobile platform. It is similar to Flash’s original battle ground: the argument that the Web technology stack is not suitable for building applications with a polished user-experience.

Tweets out of Context

Primer, but Twitter.

Rothkode

Mark Rothko paintings recreated with CSS gradients.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

The Brighton Makerlab - where technology meets awesome! by Simon Riley — Kickstarter

Still a few days left to back this great project for Brighton:

Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.

What Should I Design? - the design prompt generator

Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Culture Ship Randomizer · A gravitas free zone.

For when you just have to name something after a Culture General Systems Vehicle …or maybe a General Contact Unit.

Someone tell Elon.

» Responsive Field Day Portland! Cloud Four Blog

Aw, this is so sweet! Jason describes getting inspired by Responsive Day Out to create Responsive Field Day:

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton.

I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.

Responsive Field Day

Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

100 days: Archive

You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.

One down, 99 to go.

Responsive News — We’ve made it.

The responsive BBC News site is live! Hurrah!

Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.

Flickr: Official SpaceX Photos’ Photostream

SpaceX has a Flickr account, and you have permission to use these photos.

Zen and the Art of Wearable Markup

Jeffrey muses on progressive enhancement and future-friendliness.

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Share podcast episodes from iOS podcatchers directly to Huffduffer by Jan Beck

A walkthrough on using the iOS app Workflow to huffduff audio files from just about any app.

JavaScript and Archives | inkdroid

Thoughts on the long-term viability of sites that use JavaScript to render their content.

Submarine Cable Map 2015

This year’s map from TeleGeography is looking lovely.

The Smithsonian’s design museum just got some high-tech upgrades

A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

Writing for everyone.

Slides of really great practical advice on writing clearly.

The Nearly-Webs: Five Weird Ways We’ve Tried to Connect :: How We Get To Next

Alternative histories of communication.

What Does My Site Cost?

A terrific little tool from Tim that puts performance into perspective by measuring how much money users are spending just to view your website on a mobile device.

A JS framework on every table - Allen Pike

The Tower of JavaScript Babel.

The Path to Performance // Speaker Deck

The slides from Katie’s recent talk.

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

js;dr = JavaScript required; Didn’t Read.

Because in 10 years nothing you built today that depends on JS for the content will be available, visible, or archived anywhere on the web.

Dev.Opera — The State of Web Type

If you don’t have time to poke around StateOfWebType.com here’s the short version.

INTERNETARCHIVE.BAK - Archiveteam

The most ambitious project from Archive Team yet: backing up the Internet Archive.

We can do this, people! Moore’s Law and all that.

yurivictor/typebetter

A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

The Web’s Grain by Frank Chimero

Superb. Absolutely superb.

A magnificent tour-de-force by Frank on the web’s edgelessness.

Read. Absorb. Read again. This is the essence of responsive web design, distilled.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

Quantity Queries for CSS · An A List Apart Article

A terrific bit of smart CSS thinking from Heydon Pickering.

You know he’s speaking at Responsive Day Out, right?

Are You Living in a Simulation?

Always worth bearing in mind when some perspective is needed.

If it is possible that our future species will go on to create simulations of our civilisation forerunners (us), then it is far more likely that we are currently in such a simulation than not.

Troika - a new music podcast | The Hickensian

Jon has started a new little music podcast—and he’s using Huffduffer to generate the RSS feed—three thematically-linked pieces of music.

Have a listen to the first episode.

localFont - A localStorage solution for web font loading

A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Futures of text by Jonathan Libov

This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.

(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)

Password Masking

A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.

Major caveat: make sure you still offer the ability to mask passwords too.

Google’s experimental new “slow” label could revolutionize how we tackle web performance - Web Performance Today

It looks like Google is going to start explicitly labelling slow sites as such in their search results (much like they recently started explicitly labelling mobile-friendly sites). So far it’s limited to Google’s own properties but it could be expanded.

Personally, I think this is a fair move. If the speed of a site were used to rank sites differently, I think that might be going too far. But giving the user advanced knowledge and leaving the final decision up to them …that feels good.

Space Probes Art Print by Ariel Waldman

Now you can get a 7” x 10” print of the cast of Ariel’s fantastic spaceprob.es site.

I think this would look quite fetching in the Clearleft office.

All Videos | Five Simple Steps

Craig has collected a selection of the videos he has filmed at conferences over the years. I’m honoured that my opening keynote at Beyond Tellerrand two years ago has been included.

There are some great Responsive Day Out videos here too.

Killing Time at Lightspeed

Interstellar travel time dilation and status updates: a clever narrative combo.

Access Optional - TimKadlec.com

It will come as no surprise that I agree with every single word that Tim has written here.

Splatter

Unleash your inner Jackson Pollock.

BBC - Future Media Standards & Guidelines - Accessibility Guidelines v2.0

The minimum dependency for a web site should be an internet connection and the ability to parse HTML.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

spaceprobe.es Data From Space

A fantastic new site from Ariel and Lisa: a collection of probes that are out in space right now, with oodles of facts for each mission and links through to more resources. SCIENCE!

NASA GeneLab

A beautiful website for ISS-based biology experiments.

Progressive Enhancement is not about JavaScript availability. | Christian Heilmann

A great description of progressive enhancement.

Progressive enhancement in its basic form means not making assumptions

Seasonal posts × Katy DeCorah

This is such a simple little adjustment, but I think it’s kinda brilliant: tweaking the display of your site’s maps to match the season.

Making the case for Progressive Javascript — The Millstone — Medium

I think we can all agree that “isomorphic JavaScript” is a terrible name for a good idea. I quite like calling it “portable JavaScript”, but here’s a good case for calling it “progressive JavaScript.”

(Right up until the end when the author says “But mainly, it’s pretty safe to assume JavaScript will just work. Everywhere.” …which is precisely the kind of unfounded assumption that leads to the very problems that isomorphic/portable/progressive JavaScript can help fix.)

Better SVG Fallback and Art Direction With The <picture> Element

Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).

Infovore » Joe Chip’s problem was never his door

Objects that talk are useful, but objects that tattle aren’t.