Tags: ar

Data attributes and progressive enhancement - Simply Accessible

Derek’s excellent advice on avoiding over-reliance on data attributes has this brilliant nugget of insight:

In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works

Responsive design testing tool – Viewport Resizer

A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.

Learn CSS Selectors interactively

This visual approach to demonstrating how CSS selectors work is really handy.

Peter Nixey - How to be a great software developer

I’m not sure if I agree completely with every point, but this is a great shortlist of things you can do to make your code more resilient and understandable (thereby making you, by any sensible definition, a better programmer).

New product opportunities for the Internet of Normal Things | Berg Blog

I like Matt’s observation here that the simple combination of a barebones data format like HTML delivered over HTTP is a good-enough low-level API for joining up all kinds of internet-connected things.

In the last 60 years, the biggest software platform for interop and integration – for new products, services, businesses, and value creation – has not been Android, or iOS, or Windows, or the PDP-11. The biggest and best platform has been the web.

One implication is that successful products are not necessarily those with seamless, beautiful, tightly-controlled “experiences”, but rather the ones that are capable of talking to each other.

Small things, loosely joined.

James Bridle — Where You Are

The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.

Wearables versus there-ables.

Some interesting thoughts that follow on nicely from Scott Jenson’s ideas around just-in-time interactions:

What if the technology was actually already in the room when we got there? Maybe that’s the kind of Internet-of-things that will be more sustainable and will win long-term.

Avoiding ‘words to avoid’ | Inside GOV.UK

I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Airbag Intl. / Archives

Greg says:

We need a web design museum.

I am, unsurprisingly, in complete agreement. And let’s make lots of copies while we’re at it.

Google Night Walk

A nice stroll around Marseilles at night without any of the traditional danger.

Hemingway

A useful text editor that analyses your writing for excess verbiage and sloppy construction. It helps you process your words, as it were.

The Pastry Box Project: The Values of the Web by Brad Frost

I don’t work in the tech industry. I work on the Web.

Readmill Epilogue - Readmill

If your startup gets acquired and shut down by a larger company, this is the way to announce it—no “we’re excited to announce”; no “incredible journey”. Instead there’s an apology and regret (which is exactly what your users will be feeling).

Confessions Of A CSS Expert

Funny because it’s true:

The thing I regret the most is how my class addiction affected my relationship with HTML.

A Modern Designer’s Canvas | Smashing Magazine

The transcript of Malarkey’s recent talk. Good thoughtful stuff.

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

Bruce Lawson’s personal site  : Notes on accessibility of Web Components

Bruce’s thoughts on ensuring accessibility in Web Components. He thinks that the vocabulary of ARIA is up to the job, so that’s good enough for me.

Aerotwist - Web Components and the Three Unsexy Pillars

A healthy dose of scepticism about Web Components, looking at them through the lenses of accessibility, security, and performance.

I share some of this concern: Web Components might look like handy ready-made out-of-the-box solutions, but the truth is that web developers have to do much more of the hard graft that was traditionally left to the browser.

Meet the Geniuses on a Quixotic Quest to Archive the Entire Internet | TIME.com

A short video featuring Jason Scott and Brewster Kahle. The accompanying text has a shout-out to the line-mode browser hack event at CERN.

[this is aaronland] because ephemera are just memories that didn’t try hard enough

I like the way Aaron thinks. I also like the way he makes.

Our Comrade The Electron

This is a wonderful piece by Maciej—a magnificent historical narrative that leads to a thunderous rant. Superb!

BBC Radio 4 Extra - The Hitchhiker’s Guide to the Galaxy - The Hitchhiker’s Guide to the Galaxy Game - 30th Anniversary Edition

One of the most fiendish user-unfriendly (but oh-so-witty) adventure games of all time is now online for you to enjoy with some added graphical flourishes.

Particle Fever

I can’t wait to see this documentary on the monumental work at CERN.

If the Moon Were Only 1 Pixel - A tediously accurate map of the solar system

A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.

Node School in Brighton

Tom is running a Node School at 68 Middle Street on the evening of March 27th. I plan to attend and finally wrap my head around all this Node stuff.

4 Million Ravelers

A lovely bit of data celebration from Ravelry on the occasion of their 4 millionth user.

I’ve said it before and I’ll say it again: if you want to see a successful example of a real social networking site, don’t look at Facebook; look at Ravelry.

Platformed. — Unstoppable Robot Ninja

The importance of long-term thinking in web design. I love this description of the web:

a truly fluid, chaotic design medium serving millions of imperfect clients

Sharing Podcasts - daverupert.com

Great suggestions from Dave for podcasters keen on allowing easier sharing.

Oh, how I wish Soundcloud would do this and be less of an audio roach motel!

being a client (tecznotes)

Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:

Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.

Jonathan T. Neal | Thoughts on Media Queries for Elements

Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.

Why we left AngularJS: 5 surprisingly painful things about client-side JS

It’s funny: while I agree with the warning that this article provides (“rich client-side JavaScript frameworks aren’t a good fit for every site, especially content sites”), the reasons given here aren’t the reasons that I have any issues with.

22.7 Million Pixels Of Raw Slideshow Power

This may be the only slideshow on a website I’ve ever actually bothered to click all the way through.

Approaching Principles for Independent Archives | Equivalent Ideas

Thoughts from Luke Bacon on two topics that fascinate me: archives and design principles.

I’ve added these principles to my collection.

Robin Rendle › A Visual Lexicon

Some great thoughts in here about web development workflow and communication between designers and developers.

I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

Early History of HTML - 1990 to 1992

A fascinating look at the early history of HTML, tracing its roots from the dialect of SGML used at CERN.

Notes on a responsive Guardian redesign – Lozworld™

A great write-up of the design process behind The Guardian’s responsive site. It’s really gratifying to see UX designers talking about performance.

Play Steamshovel Harry, a free online game on Kongregate

Such a classic game, well worth playing again.

Kyle Bean - Whistleblower

If you picked up the Guardian this weekend, you’ll have seen some brilliant work by Kyle on the cover (and inside) the magazine section.

Best Collaborative Project : The Net Awards 2014

Well, this is nice: the Line-mode browser hack has been nominated in the Best Collaborative Project in the Net awards.

But 24 Ways has also been nominated, and let’s face it, that really is the best collaborative project.

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

Curiosity Hub

This nifty place in Brighton is just down the street from me:

Our classes allow kids to get creative with exciting, cutting-edge technology and software.

Operation War Diary

A collaboration between Zooniverse and the Imperial War Museum. Now citizen scientists can become citizen historians by classifying diaries from World War One.

An Ingeniously Designed Speaker That Creates Crowdsourced Playlists | Wired Design | Wired.com

Hey, look! The Clearleft interns are in Wired. That’s nice.

Photography, hello — Software ate the camera, but freed the photograph by Craig Mod

Craig recently had a piece published in the New Yorker called Goodbye, Cameras. It’s good …but this follow-on piece on his own site is truly wonderful.

Read. Absorb. Ponder.

Being close to the network does not mean being on Facebook, thought it can mean that, too. It does not mean pushing low-res images to Instagram, although there’s nothing wrong with that. What the network represents, in my mind, is a sort of ledger of humanity. The great shared mind. An image’s distance to it is the difference between contributing or not contributing to that shared ledger.

Scrap Ideas — David Cole

David Cole shares the ideas for projects he would like to develop further, but probably never will. I like this a lot (and there are some great ideas in here).

The Console Living Room : Free Software : Download

Here’s a nice Christmas gift from Jason and the archinauts at the Internet Archive: tons of games for living room consoles of the early ’80s, all playable in your browser, thanks to emulation in JavaScript.

Frank Chimero × Blog × Homesteading 2014

I’m with Frank. He’s going Indie Web for 2014:

I’m returning to a personal site, which flips everything on its head. Rather than teasing things apart into silos, I can fuse different kinds of content together.

Homesteading instead of sharecropping:

So, I’m doubling down on my personal site in 2014.

WarGames Magazine Identified By Michael Walden

Now this is what I call research:

Through the use of my knowledge of computer magazines, my sharp eyes, and other technical knowledge, I have overcome the limited amount of information available in the video content of WarGames and with complete certainty identified the exact name and issue number of the magazine read on screen by David L. Lightman in WarGames.

About Variables in CSS and Abstractions in Web Languages | CSS-Tricks

Chris has a written a response to my post (which was itself inspired by his excellent An Event Apart presentation) all about CSS, variables, and abstractions.

I love this kind of old-school blog-to-blog discussion.

Spimes: A Happy Birthday Story « optional.is/required

Expanding on an exercise from last year’s Hackfarm, Brian and Mike have written a deliciously dystopian near-future short story.

Happy 17th Birthday CSS | Web Directions

A lovely history lesson on CSS from John.

Myth - CSS the way it was imagined.

This looks interesting: a CSS postprocessor that polyfills support for perfectly cromulent styles.

Earth wind map

A beautiful real-time visualisation of winds on our planet.

Ted Nelson’s Eulogy for Douglas Engelbart - YouTube

A searing, angry, heartfelt eulogy.

Brian Aldiss: ‘These days I don’t read any science fiction. I only read Tolstoy’ | Books | The Guardian

A profile of Brian Aldiss in The Guardian.

I still can’t quite believe I managed to get him for last year’s Brighton SF.

Flickr: The British Library’s Photostream

This is a wonderful addition to the already-wonderful Flickr Commons: over one million pictures from the British Library, available with liberal licensing.

Y’know, I’m worried about what will happen to my own photos when Flickr inevitably goes down the tubes (there are still some good people there fighting the good fight, but they’re in the minority and they’re battling against the douchiest of Silicon Valley managerial types who have been brought in to increase “engagement” by stripping away everything that makes Flickr special) …but what really worries me is what’s going to happen to Flickr Commons. It’s an unbelievably important and valuable resource.

Hackfarm- One Week, a Dozen Projects, 20 “Lefties”

Ant—the latest super-smart addition to the Clearleft team—describes this year’s Hackfarm, which happened a couple of weeks ago.

It was Ant’s first week. Or, as he described it when we were wrapping up all the hacking, “Best first week at a job ever!”

An Hour of Code spawns hours of coding

Here’s a heartwarming tale. It starts out as a description of processing.js project for Code Club (which is already a great story) and then morphs into a description of how anyone can contribute to make a codebase better …resulting in a lovely pull request on Github.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Building for the device agnostic web | Talks | Decade City

Some excellent practical advice on progressive enhancement.

Unify – Unicode support on browsers and devices

Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.

Proto HTML

A nice bit of markup archeology, tracing the early development of HTML from its unspecced roots to the first drafts.

I recognise some of the extinct elements from the line-mode browser hack days at CERN e.g. HP1, HP2, ISINDEX, etc.

Against the Balkanization of the Web

A fascinating snapshot from 1995, arguing for the growing power of HTML instead of the siren song of proprietary formats.

I’m very happy that this is still available to read online 18 years later.

Laying The Groundwork For Extensibility—Smashing Coding

The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.

There’s a lot to like here, with some practical examples of where we’ve seen a disconnect between JavaScript APIs and declarative HTML (looking at you, Geolocation).

Star Axis is a profound meditation on the sky – Ross Andersen – Aeon

A beautiful exploration of the Star Axis sculpture—an artwork of the Long Now.

The ancients had pyramids to tame the sky’s mystery. We have Star Axis, a masterpiece forty years in the making.

Long Term Web Semantics on Infrequently Noted

Alex starts with a bit of a rant about the phrase “semantic HTML”, which should really just be “well-written HTML, but there then follows some excellent thoughts on the emergence of meaning and the process of standardising on vocabularies.

Prerender - AngularJS SEO, BackboneJS SEO, or EmberJS SEO

I despair sometimes.

Here’s a ridiculous Heath-Robinsonesque convoluted way of getting the mighty all-powerful Googlebot to read the web thangs you’ve built using the new shiny client-side frameworks like Angular, Ember, Backbone…

Here’s another idea: output your HTML in HTML.

That solution works for machines and humans. As a bonus, outputting your HTML in HTML avoids turning JavaScript into a single point of failure.

isMobileDevice and the death of innocence

A nice bit of sleuthing to trace the provenance of one piece of ill-advised user-agent sniffing JavaScript code.

Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.

A Book Apart, New store discounts and bundle options

This is a great idea from A Book Apart—the more different books you buy at the same time, the more of a discount you get.

Got to get ‘em all!

Styleguide | MapBox

Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.

Pattern Library | MailChimp

The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.

cite and blockquote – reloaded | HTML5 Doctor

The definition of the cite element (and the blockquote element) has been changed for the better in HTML5 …at least in the W3C version anyway.

Wallop Slider

I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.

NSA files decoded: Edward Snowden’s surveillance revelations explained

A superb piece of hypertext from The Guardian.

Steve & Steve: a graphic novel by Patrick Sean Farley

This is absolutely delightful, nicely weird, and thoroughly entertaining.

Moving in, moving on — Paul Robert Lloyd

I’m going to miss having Paul around at Clearleft …and it sounds like he’s going to miss us too.

In many respects, Clearleft can be regarded as a family. Andy and Rich are the parents while perhaps Jeremy is the fun uncle sending postcards from his adventures around the world.

By the way, we’re hiring (two roles, because that’s what it’ll take to fill Paul’s unicorn shoes).

Line Mode on Parallel Transport

A love letter to HTML, prompted by the line-mode browser hack event at CERN.

What is EME?

Henri gives an overview of the DRM-style encryption proposed for HTML. It’s a very balanced unbiased description, but if you have the slightest concern about security, sentences like this should give you the heebie-jeebies:

Neither the browser nor the JavaScript program understand the bytes.

Web App Source Code Protection Community Group

This is the worst idea for a W3C community group ever. Come to think of it, it’s the worst idea for an idea ever.

The hits keep going… | MetaFilter

This gives me a warm fuzzy glow. The Mefites are using Radio Free Earth to find out which stars are receiving the number one hits from their birthdays.

Star Wars: Endor Holocaust

Realistically, what happens when you detonate a large metallic satellite (about the the size of the second Death Star) in orbit around an inhabited world (like, say, the forest moon of Endor).

It isn’t pretty.

Robert Cailliau’s world wide web on Dazed Digital

From CERN to singularity - the digital pioneer and cofounder of the WWW on 20 years of webscapades.

Internet and Web Pioneers: Robert Cailliau - YouTube

Once you get past the cheesy intro music, there are some gems from Robert Cailliau in here.

Smart Quotes for Smart People

Jason provides some instruction in using the correct quotation marks online.

LMB hack days: Jeremy Keith

I took a little time out of the hacking here at CERN to answer a few questions about the line-mode browser project.

UX Career Advice – User Experience

Speakers from this year’s UX Week conference provide career advice. I think my advice is clearly the best:

To be successful in today’s industry, UX professionals should have really killer paisley shirts. Some people will tell you that it’s more important to have good hair and straight teeth, but in my experience, a really good paisley shirt will really take you places.

68 Middle Street launch and Clearleft 8th birthday party - a set on Flickr

Some lovely pictures from the Clearleft office-warming party last weekend.

Explorers of the combined territory.

Inspired by dConstruct, Ellen is going to start exploring the world of smart objects.

Ask About Going Home

Some examples to illustrate the UK Border Agency’s latest campaign.

Shinseungback Kimyonghun: Portrait

Beautiful amalgamations of film characters:

A custom software detects faces from every 24 frames of a movie, and creates an average face of all found faces. The composite image reflects the centric figure(s) and the visual mood of the movie.

WTF Visualizations

Data visualisations that make no sense.

Progressive Enhancement. Still Alive and Kickin’

Dan explains the reasoning behind his “Sigh, JavaScript” Tumblr blog, and provides an excellent example of progressive enhancement in the process.

Go, Dan, go!

Enabling new types of web user experiences - W3C Blog

Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.

Simon Stålenhag Art Gallery

Scenes from a future Sweden.

The Twittertape Machine

I would love to have a ticker-tape machine for my tweets.

PRSM - The Sharing Network

Don’t ever worry about not sharing again.

Blogging Ourselves to Live

The internet never forgets? Bollocks!

We were told — warned, even — that what we put on the internet would be forever; that we should think very carefully about what we commit to the digital page. And a lot of us did. We put thought into it, we put heart into, we wrote our truths. We let our real lives bleed onto the page, onto the internet, onto the blog. We were told, “Once you put this here, it will remain forever.” And we acted accordingly.

This is a beautiful love-letter to the archival web, and a horrifying description of its betrayal:

When they’re erased by a company abruptly and without warning, it’s something of a new-age arson.

Should JavaScript devs build real things?

This post is about the pros and cons of using JavaScript to programme hardware, but within it is a great summation of what makes JavaScript so powerful:

In my opinion the greatest strengths of JavaScript are its immediacy and its accessibility. It has plenty of weakness (insanely weak typing, implicit casting for comparison, terrible problems with numbers, fluid syntax, I could go on…). Regardless, these weaknesses are entirely overcome by those two points above.

Having taught quite a few people to code, the benefit of being able to open a text editor or a browser console and type code that can immediately and reliably be executed is incredible. The power this brings to the learner is unmatched. When trying to learn new things it’s important to get positive reinforcement very quickly and JavaScript has this ability in spades.

Executing console.log(“hello world”) or window.alert(2+5-20) brings immediate feedback, makes you feel as though you’re getting somewhere and that you are interacting directly with the computer as a programmer. For those of you old enough to own a Spectrum, C64 or Vic20 – BASIC (itself heavily derided) had the same benefit.