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.
This visual approach to demonstrating how CSS selectors work is really handy.
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).
Eileen Gunn writes in the Smithsonian magazine on the influence of science fiction.
Science fiction, at its best, engenders the sort of flexible thinking that not only inspires us, but compels us to consider the myriad potential consequences of our actions.
or: how I learnt to stop worrying and love the blog.
This is a really nice introduction to the basics of the Indie Web …with nice illustrations too.
I like this idea. It would be nice to see it catch on…
- Report a bug for any website or browser.
- Our team of volunteers diagnoses the bug.
- We send a fix to the site owner or browser.
A thoughtful in-depth piece that pulls together my hobby horses of independent publishing, responsive design, and digital preservation, all seen through the lens of music:
Music, Publishing, Art and Memory in the Age of the Internet
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.
The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.
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.
If you insist on having a fixed header on your site, please, please, please add this script to your site. I often use the spacebar to page down so this would be a life-saver.
I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.
This is a wonderful piece of writing and thinking from Frank. A wonderful piece of design, then.
A personal view on generalists and trans-media design
Some sleuthing uncovers an interesting twist in New York’s psychogeography:
All of the buildings have been demolished, and in some cases the entire street has since been erased. But a startling picture still emerged: New York once had a neighborhood for typography.
Here’s the font that Brian created at the line-mode browser hack day at CERN.
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.
We need a web design museum.
I am, unsurprisingly, in complete agreement. And let’s make lots of copies while we’re at it.
John echoes some of my recent thinking about what qualifies as a web browser and, by extension, what qualifies as the web:
We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.
That said, I think he is perhaps underestimating the power of URLs. Addressability—particularly over an extended time period—remains the powerful feature of the web.
A nice stroll around Marseilles at night without any of the traditional danger.
What a wonderful way to go online!
A useful text editor that analyses your writing for excess verbiage and sloppy construction. It helps you process your words, as it were.
I don’t work in the tech industry. I work on the Web.
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).
Funny because it’s true:
The thing I regret the most is how my class addiction affected my relationship with HTML.
A great talk by Amber on the history of personal publishing and the ideas and technologies driving the Indie Web movement.
The transcript of Malarkey’s recent talk. Good thoughtful stuff.
A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.
A reusable set of responsive patterns and templates for UK councils.
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.
Some sensible thoughts from Addy on how Web Components might be peer-reviewed.
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.
Cleanup of Silicon Valley Superfund site takes environmental toll | The Center for Investigative Reporting
A terrific piece of well-illustrated data-driven journalism.
A cute approach to pairing typefaces: treat it like a dating game.
Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.
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.
I like the way Aaron thinks. I also like the way he makes.
This is a wonderful piece by Maciej—a magnificent historical narrative that leads to a thunderous rant. Superb!
A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!
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.
Well, this is pretty nifty: Dan Gilmour is at Indie Web Camp in San Francisco and he’s already got some code up and running on his site.
Y’know, I’m not missing South by Southwest in the slightest this year …but I’m really missing Indie Web Camp.
I can’t wait to see this documentary on the monumental work at CERN.
Scott writes an absolutely spot-on skewering of the idea that progressive enhancement means you’re going to spend your time catering to older browsers. The opposite is true.
Progressive Enhancement frees us to focus on the costs of building features for modern browsers, without worrying much about leaving anyone out. With a strongly qualified codebase, older browser support comes nearly for free.
A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.
Fast Company features Aral’s tantalising Indie Phone project that he’s been working on at Clearleft Towers.
Good to see Oskar the dog getting the recognition he deserves.
On the top floor of a commercial building in the old maritime city of Brighton, England, Balkan has been quietly hacking away at Indie Phone for the last several months with the rest of his team—Victor Johansson, an industrial designer, Laura Kalbag, a professional web designer (and Balkan’s partner), and her Husky, Oskar.
Excellent tips and tools from Google’s Paul Lewis on performance testing.
I did some consulting with the Wellcome Trust on this new magazine-like project, and it’s great to see it go live—excellent stories of science, all published under a Creative Commons licence.
A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.
The alphabet illustrated with CSS.
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.
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.
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
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!
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.
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.
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
Great stuff from James Wragg and the gang at Madgex: a way of lazy-loading ads for responsive sites without messing with the ad code.
This may be the only slideshow on a website I’ve ever actually bothered to click all the way through.
This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.
Nice! A Yeoman generator for scaffolding your own pattern primer.
(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)
Thoughts from Luke Bacon on two topics that fascinate me: archives and design principles.
This is a really great idea—a portable open device lab. It’s UK-based and you can hire it out for a few days at a time.
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.
A lovely little tour of eleven ubiquitous icons.
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!
A fascinating look at the early history of HTML, tracing its roots from the dialect of SGML used at CERN.
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.
Such a classic game, well worth playing again.
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.
Okay, this might just be my new favourite blog:
This site is dedicated to all aspects of movie and TV typography and iconography as it appears in Sci-Fi and fantasy movies.
The first post is all about 2001, and the writing is just the right shade of fun.
I’m already looking forward to future posts. (See what I did there?)
Words of wisdom from Seb when it comes to personal projects: finish what you start.
Most people don’t finish their projects so simply by getting it done, you’re way ahead of the crowd.
A nice look at responsive design, progressive enhancement, and the principle of One Web.
Don’t get me wrong: jQuery is great, but for a lot of projects, you might not need 90% of the functionality it provides. So try starting with vanilla JS and only pulling in jQuery if and when you need it.
A great series of articles on the sci-fi films of the ’60s and ’70s:
The Laser Age examines a rich period in the history of science-fiction filmmaking that began in the late 1960s and faded away by the mid 1980s.
…all wrapped up in a nice responsive design too.
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.
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.
I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).
This observation by Josh seems obvious in hindsight (all the best insights do), but there’s a powerful idea there:
So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new?
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.
Des is right, y’know.
Scope grows in minutes, not months. Look after the minutes, and the months take care of themselves.
This tool for building ScrAPIs is an interesting development—the current trend for not providing a simple API (or even a simple RSS feed) is being interpreted as damage and routed around.
Some easily-digestible nuggets of advice on public speaking.
A handy one-stop-shop for documentation on web technologies.
Some sensible thinking from Tim on measuring performance gains.
Web-Thang is a chrome extension that replaces all instances of the term ‘web thang’ or ‘web thang/web thang’ with the term ‘web thang’.
An in-depth look at using icon fonts without any nasty edge-cases ruining your day.
Got an old phone lying around that you don’t need any more? Why not donate it to a device lab? You know it makes sense.
A collaboration between Zooniverse and the Imperial War Museum. Now citizen scientists can become citizen historians by classifying diaries from World War One.
Hey, look! The Clearleft interns are in Wired. That’s nice.
A great analysis of how centralised hubs are the easiest attack vector for bad actors like the NSA and GCHQ:
How did we get such industry concentration? Why is a network famously based on distributed processing, routing, and peer connections characterized now by a few choke points that the NSA can skim at its leisure?
Chris is putting together a series about the neglected building blocks of the web. First up; the much-abused hyperlink, the very foundation of the world wide web.
It is the most simple and most effective world-wide, open and free publishing mechanism. That it is why we need to protect them from extinction.
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.
There were some technical difficulties with microphones, and it was a bit weird presenting inside a cinema, but I still had fun yapping on at last year’s Future Of Web Design in New York.
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).
Want to implement webmentions but you’re using static pages a-la Jekyll? No problem. Pelle’s got you covered.
There’s something very satisfying about this televisual sleuthing:
Images of the computer code appearing in TV and films and what they really are.
Having experienced the death of a friend, I wonder how many have considered the ghosts in the machine.