Archive: April, 2013

42

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

map

Tuesday, April 30th, 2013

The open internet and the web

A history lesson from Vint Cerf. I can’t help but picture him as The Architect in The Matrix Reloaded.

When Tim Berners-Lee invented and released the World Wide Web (WWW) design in late 1991, he found an open and receptive internet in operation onto which the WWW could be placed. The WWW design, like the design of the internet, was very open and encouraged a growing cadre of self-taught webmasters to develop content and applications.

The First Website by Mark Boulton

Mark writes about his work with CERN to help restore the first website to its original URL.

I have two young children and I want them to experience the early web and understand how it came to be. To understand that the early web wasn’t that rudimentary but incredibly advanced in many ways.

Anniversary

A funny thing happened when I was in Berlin two weekends ago. I was walking down the street that my AirBnB apartment was on when I heard someone say “Jeremy Keith?” It turned out it was Andre Jay Meissner, one of the founders of the excellent Open Device Lab website. We had emailed but never met before. Small world!

The Twitter account for the open device lab in Nuremburg pointed out that it’s been one year since I wrote a blog post about the open device lab I set up:

Much as I’d love to take credit for the idea of an open device lab, it simply isn’t true. Jason and Lyza had been working on setting up the open device lab in Portland for quite a while when I flung open the doors of the Clearleft test lab. But I will take credit for the “Ah, fuck it!” attitude that I introduced to the idea of sharing test devices with the community. Partly because I had seen how long it was taking the Portland device lab to get off the ground while they did everything by the book, I decided to just wait for the worst to happen instead of planning for it:

There are potential pitfalls to opening up a testing suite like this. What about the insurance? What about theft? What about breakage? But the thing about potential pitfalls is that they’re just that: potential. I’m treating all of them as YAGNI issues. I’ll address any problems if and when they occur rather than planning for worst-case scenarios.

It proved to be a great policy. So far, nothing has gone wrong. And it also served as an example to other people thinking about opening up device labs at their companies: “don’t sweat it; I didn’t!”

But as far as anniversaries go, the one-year birthday of the Clearleft device lab is not the most significant event of April 30th. Today is the twentieth anniversary of the publication of one of the most important documents in technological history: the document that officially put the World Wide Web into the public domain.

Open device labs are a small, small part of working on the web but I like to think that they represent the same kind of spirit of openness and sharing that Tim Berners-Lee and his colleagues demonstrated at CERN:

I really, really like the way that communal device labs have taken off. It’s like a physical manifestation of the sharing and openness that has imbued the practice of web design and development right from the start. View source, mailing lists, blog posts, Stack Overflow, and Github are made of bits; device labs are made of atoms. But they are all open for you to use and contribute to.

At UX London I had dinner with a Swiss entrepreneur who was showing off his proprietary native app on his phone and proudly declaring that he had been granted a patent. He seemed like a nice chap, but his attitude kind of made my skin crawl. It seemed so antithetical to the spirit of sharing and openness that I’m used to from the web.

James Gleick once described the web as the patent that never was:

Tim Berners-Lee invented the Web and the Web browser — that is, the world as we now know it — pretty much single-handedly, starting in about 1989, when he was working as a software engineer at CERN, the particle-physics laboratory in Geneva. He didn’t patent it, or any part of it. On the contrary, he has labored tirelessly to keep cyberspace open and nonproprietary.

We are all reaping the benefits of Sir Tim’s kindness and generosity.

Cern

It was twenty years ago today:

On 30 April 1993 CERN published a statement that made World Wide Web technology available on a royalty free basis, allowing the web to flourish.

Monday, April 29th, 2013

Here is today

A long-zoom data visualisation.

Scalable Bitmaps

Some thoughts (and code) on responsive images.

Sunday, April 28th, 2013

Dragons

Just as every instance of “the cloud” can be replaced with “the moon” or “my butt”, so too can every instance of the word “markets” in business reporting be replaced with the word “dragons”.

James has got you covered with this bookmarklet to do just that.

The dragons reacted strongly to the news.

A Digital Tomorrow on Vimeo

A design fiction video depicting technology that helps and hinders in equal measure.

Google Poetics

The accidental beauty in Google’s autosuggest algorithm.

Saturday, April 27th, 2013

Internet Archive on Vimeo

A beautiful short film on the amazing work being done at the Internet Archive, produced on the occasion of their 10 petabyte celebration.

Truly awe-inspiring.

Textastrophe

These are mostly just mean …but kinda funny.

Tech companies that only hire men

Job postings that only use male pronouns.

See, this is why using “they”, while technically incorrect, can often be the least worst option.

Brewster’s trillions: Internet Archive strives to keep web history alive

A profile in The Guardian of the Internet Archive and my hero, Brewster Kahle (who also pops up in the comments).

Quietweet - A Simpler Twitter Reader

A cute little read-only Twitter client from James that only displays fully-formed tweets: no hashtags, no @-replies.

Friday, April 26th, 2013

Responsive Inspector

A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.

joshje/svg-for-web · GitHub

If, like me, you’ve been using the “export to SVG” plugin for Fireworks and then opening up the resultant file to trim it down, Josh has got you covered: here’s a version of “export to SVG” that will result in much slimmer files.

The Secure Transport of Light on booktwo.org

A beautiful piece by James on the history of light as a material for communication …and its political overtones in today’s world.

What is light when it is information rather than illumination? What is it when it is not perceived by the human eye? Deep beneath the streets and oceans, what is illuminated by the machines, and how are we changed by this illumination?

I know jQuery. Now what?

A terrific piece by Remy—based on a talk he gave—on when he uses jQuery and, more importantly, when he doesn’t. His experiences and conclusions pretty much mirror my own, but of course Remy is far more thoughtful and smart than I.

Really good stuff.

Thursday, April 25th, 2013

The Death of Upcoming.org - Waxy.org

Heartbreaking and angry-making.

Thursday, April 18th, 2013

Those who teach, learn.

I concur with Ryan’s findings:

The best way to get better at what you do is to teach others how to do it, too.

Wednesday, April 17th, 2013

CRAPCHA: Completely Ridiculous And Phony Captcha that Hassles for Amusement

These seem just about as reasonable as any other CAPTCHA.

A dao revisited

Pretty much every time I give a talk—be it on progressive enhancement, responsive design, or web development in general—I almost always make reference to John’s A Dao Of Web Design. Invariably, I ask for a show of hands: “Who’s read this article?” I ask. I try not to get too dispirited when only a few hands go up. Instead I encourage everyone—in the strongest possible terms—to seek it out and read it.

It’s not just that I consider A Dao Of Web Design to be part of the canon of great writing and thinking for web designers and developers. I’m also continually amazed by its longevity. Thirteen years is a very, very long time on the web, and yet just last week Richard referenced John’s article when he was describing how best to approach designing for the web today.

The only other article I can think that matches its importance is Ethan’s unveiling of Responsive Web Design three years ago, also on A List Apart. It’s no coincidence that Ethan’s article references John’s article from a decade before. Both pieces are essentially making the same rallying cry: stop fighting the flexible nature of the web. Embrace it.

I think that finally, finally we’re beginning to do just that.

MATTER and Medium

The news is finally public: Bobbie’s Matter has been bought my Ev’s Medium. Fingers crossed that they don’t fuck it up.

Responsive workshopping

I spent most of last week up in Greenwich for this year’s UX London. ‘Twas a most excellent event. The move to the new venue gave the whole event a much more fun vibe and the format of a morning of talks followed by an afternoon of workshops was perfect.

Andy did a great job curating the line-up. It had a bit of a dConstruct-y feel, and not just because we had old friends like Marty, Peter, and Hannah back: Genevieve Bell, Simone Rebaudengo and Richard Seymour all broke our brains in different wonderful ways.

Hats off to Kate who worked her ass off to make sure that everything ran smoothly. Seriously, you wouldn’t believe the amount of work she did. The change of venue and format for this year resulted in at least twice as much work as usual.

In the middle of UX London’s three days, I ran a workshop called Responsive UX. As I told the audience that morning when I was pitching the workshop, I got the title by taking the term “responsive design” and doing a find-and-replace on the word “design” with the phrase “UX”. After all, what’s the difference? Right, Peter?

Seriously though, this workshop was a little different in that I wasn’t covering any HTML or CSS or JavaScript. It was much more about planning for the unknown and good ol’-fashioned content priority and hierarchy.

I wasn’t entirely pleased with how it went. It was a workshop of two halves. The first half had far too much of me talking (and ranting), probably preaching to the choir. But I felt I had to lay the groundwork first. The second half—when everybody got hands on with paper-based exercises—was much better.

I learned my lesson: show, don’t tell. I’ll be doing a full day responsive workshop at Ampersand in June. I plan to make sure that there’s less of me talking and more making and collaborating. Also, because it’s a full day, I’ll be able to get down to the nitty-gritty of markup and style sheets.

And don’t forget; if you want me to come to your company sometime and do a workshop there, no problemo.

Some people at the workshop asked about me publishing my slides. The slides by themselves really don’t contain much information but I’ve published them on Speakerdeck anyway. But what’s more valuable are the URLs to articles and resources I mentioned along the way. So here’s the structure of the workshop together with links to examples and further reading…

Introduction

Myths

Progressive Enhancement

Planning

Conditional Loading

Visual Design

Navigation

Tuesday, April 16th, 2013

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Meet the Web’s Operating System: HTTP

A lovely description by Paul Ford of the Hypertext Transfer Protocol.

That simple handshake is the firmament upon which we have built trillion-dollar cathedrals and bazaars, the base upon which we construct other protocols and networks.

Saturday, April 13th, 2013

And be damned

Representing Clearleft, I wrote a little something for The Pastry Box. As Tantek pointed out, it’s somewhat ironic that it’s published on a third-party site, considering that I explicitly said “I really encourage you to publish on your own site.”

So here it is.

I had the great pleasure of organising the Responsive Day Out here in Brighton last month. It was a lovely gathering of front-end developers and designers getting together to swap stories and cry on one another’s shoulders about the challenges involved in responsive design.

There were some well-known names on the roster: people who speak at international conferences and whose work you’d be familiar with. But there were also some first-timers: people who had never spoken at a conference before.

So why would I, as a conference organiser, ask someone who has never spoken before to get up on stage and share their thoughts?

The answer is simple: their writing. Reading the intelligent and cogent blog posts and articles that they had published made me want to hear what they had to say …and I wanted to introduce their smarts to an audience. These people took the time to write down and publish their thoughts, and that led directly to their appearance at a web conference.

I really encourage you to publish on your own site. If you don’t have your own site, I think you should. In the meantime, there are plenty of other wonderful online publications: 24 Ways, Smashing Magazine, A List Apart. Why not get in touch with them if you’ve got an idea for an article?

To say that communication is a valuable skill when you’re working on the web would be quite an understatement. In a very real sense, the web was made to allow us all to share and communicate. Anybody can do it. That’s one of the great things about the web. You don’t need to ask anybody for permission. If you have an idea or a technique or a question that you want to share, all you need to do is publish it …as long as you take the time to write your thoughts down.

Write. Publish. Share. Speak.

Embracing the Medium

A lovely piece of writing from Richard on the nature of the web.

Content Parity on the web

A couple of years ago, the benefits of separate sites were more clear to me. Today, I can’t think of a good reason to maintain a separate mobile site.

On pattern portfolios | Clear Thinking - The Clearleft Blog

Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.

Wednesday, April 10th, 2013

Reorganization by Trent Walton

Trent hammers home the point that the kind of compartmentalisation that’s traditionally been part and parcel of the web dev workflow just won’t cut it anymore.

Bradshaw’s Guide For Tourists in Great Britain

Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.

Tuesday, April 9th, 2013

Responsive Nav — Responsive Navigation Plugin

This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!

Promo

The lovely and talented Paul and Kelly from Maxine Denver were in the Clearleft office to do some video work last week. After finishing a piece I was in, I suggested they keep “rolling” (to use an anachronistic term) so I could do a little tongue-in-cheek piece about the Clearleft device lab, a la Winnebago Man.

Here’s the result.

It reminded me of something, but I couldn’t figure out what. Then I remembered.

Saturday, April 6th, 2013

Thoughts on Blink

A good history lesson in rendering engines: KHTML, WebKit, and now, Blink.

Friday, April 5th, 2013

datalist experiment

This is wonderful stuff! I’m a big fan of the datalist element but I hadn’t realised how it could be combined with input types like range and date.

So nifty!

The Worst Things For Sale » The Internet’s most horrible items. A daily blog.

These are like chindogu, but they’re all available from Amazon with accompanying reviews.

Tuesday, April 2nd, 2013

Responsive Deliverables by Dave Rupert

Dave talks about the kind of deliverables that get handed over in a responsive project. Sounds a lot like what we do at Clearleft.

Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.

Check you’re wearing trousers first by Robert Heaton

Some cautionary tales of over-engineering solutions before doing some quick user-testing to establish what the real problems are.

It’s a pleasant delusion to believe that all our problems require hard solutions.

Responsive Day Out by Laura Kalbag

A terrific, in-depth round-up and recollection of the Responsive Day Out by Laura that ties all of the strands together.

Monday, April 1st, 2013

Fictive Kin, The Joke’s On Us?

The story of one site’s disgraceful handling of acquisition and shutdown (Punchfork, acquired by Pinterest) and how its owner actively tried to block efforts to preserve user’s data.