A nice combination of style guide and pattern library, with plenty of documentation.
We become obsessed with tools and methods, very rarely looking at how these relate to the fundamental basics of web standards, accessibility and progressive enhancement. We obsess about a right way to do things as if there was one right way rather than looking at the goal; how things fit into the broader philosophy of what we do on the web and how what we write contributes to us being better at what we do.
For almost a century and a half the West Pier has been Britain’s most iconic pier. Renowned for its wonderful architectural style, it has been visited and enjoyed by millions. Even today with its sculptural remains casting an eerie beauty over the seafront, the West Pier is still the most photographed building in Brighton.
Very thoughtful and sensible thinking from Paul.
Alex recounts the sordid history of vendor prefixes and looks to new ways of allowing browsers to ship experimental features without causing long-term harm.
What a lovely bit of progressive enhancement—styling data tables to display as charts.
I kind of want to link to every one of John’s post chronicling his 90 days at Clearleft, but this one is particular good, I think: how narrative ideas from the world of storytelling can help unlock some design problems.
Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:
Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.
She also makes this important point:
As you are doing this don’t forget to share what you know.
I enjoyed chatting with Marcus and Paul on the Boagworld podcast …mostly because I managed to avoid the topic at hand by discussing sci-fi for half an hour before we settled to the boring stuff about work, business, and all that guff.
A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.
So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.
The web – by its very nature – foregrounds the connections between different clusters of knowledge. Links link. One article leads to another. As you make the journey from destination to destination, all inevitably connected by that trail of links, you begin to tease out understanding.
It’s this drawing together, this weaving together of knowledge, that is the important part. Your journey is unique. The chances of another pursuing the same path, link by link (or book by book), is – statistically – impossible. Your journey leads you to discovery and, through reflection, comprehension. You see the connections others haven’t, because your journey is your own.
Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.
When you’re struggling to write something that sounds clear and sounds human (two of the essential basics of a good blog post, I’d argue), just use the words normal people would use. The best way to find out what those words are is to try talking the thing through to someone who doesn’t know anything about it. Remember what you just said, then write that.
Any sufficiently advanced hacking is indistinguishable from a haunting. In the same way that many Internet of Things objects are referred to as ‘enchanting’ or ‘magical,’ with an intervention, they can very quickly become haunted.
Kelli Anderson’s thesis on the Human Interference Task Force project set up to mark nuclear waste sites for future generations (a project I’ve referenced in some of my talks).
Exemplars proposing various solutions for the resilience of digital data and computation over long timeframes include the Internet Archive; redundantly distributed storage platforms such GlusterFS, LOCKSS, and BitTorrent Sync; and the Lunar supercomputer proposal of Ouliang Chang.
Each of these differs in its approach and its focus; yet each shares with Vessel and with one another a key understanding: The prospects of Earth-originating life in the future, whether vast or diminishing, depend upon our actions and our foresight in this current cultural moment of opportunity, agency, awareness, ability, capability, and willpower.
There’s something so beautifully, beautifully webbish about this: readings of blog posts found through a search for “no one will ever read this.”
Listen to all of them.
This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.
This is simply wondrous! A microcosm of Borges’s story made real on the world wide web.
We do not simply generate and store books as they are requested — in fact, the storage demands would make that impossible. Every possible permutation of letters is accessible at this very moment in one of the library’s books, only awaiting its discovery.
Huge have released their tool for generating front-end style guides.
Maciej has published the transcript of his magnificent (and hilarious) talk from dConstruct 2013.
From the people who brought you youmightnotneedjquery.com comes youmightnotneedjqueryplugins.com.
Don’t get me wrong—jQuery is great (some of the plugins less so) but the decision about whether to use it or not on any particular project should be an informed decision made on a case-by-case basis …not just because that’s the way things have always been done.
These sites help to inform that decision.
A really nicely-documented pattern library.
This was a fun way to spend the day—getting my hands dirty with ink and type.
A fantastic piece by David Weinberger on the changing uses of the internet—apparently in contradiction of the internet’s original architecture.
Some folks invented the Internet for some set of purposes. They gave it a name, pointed to some prototypical examples—sharing scientific papers and engaging in email about them—shaping the way the early adopters domesticated it.
But over time, the Internet escaped from its creators’ intentions. It became a way to communicate person-to-person via email and many-to-many via Usenet. The web came along and the prototypical example became home pages. Social networking came along and the prototype became Facebook.
A handy little bookmarklet for doing some quick accessibility checks.
This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).
An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.
You’ll want to back this—you’ll want to back the hell out of this!
Know any talented recent graduates? Let ‘em know about this 3-month internship at Clearleft.
I really like this impassioned love letter to the web. This resonates:
The web is a worthy monument for society. It cannot be taken away by apps in the app store or link bait on Facebook, but it can be lost if we don’t continue to steward this creation of ours. The web is a garden that needs constant tending to thrive. And in the true fashion of the world wide web, this is no task for one person or entity. It will require vigilance and work from us all.
I really like Alex’s framing of best-of-breed progressively enhanced websites as “progressive apps” (although Bruce has some other ideas about the naming).
It’s a shame that the add-to-homescreen part isn’t standardised yet though.
The first in a series of articles about the architecture of the internet and its security issues, this is a great history lesson of how our network came to be.
What began as an online community for a few dozen researchers now is accessible to an estimated 3 billion people. That’s roughly the population of the entire planet in the early 1960s, when talk began of building a revolutionary new computer network.
‘That pig was a good influence’ with Jeremy Keith and Jeffrey Zeldman on Unfinished Business on Huffduffer
I had a lot of fun recording this episode with Andrew and Jeffrey. It is occasionally surreal.
Stick around for the sizzling hot discussion of advertising at the end in which we compare and contrast Mad Men and Triumph Of The Will.
This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.
This article first appeared in Fast Company almost twenty years ago. It’s a fascinating look into the culture and process that created and maintained the software for the space shuttle. It’s the opposite of Silicon Valley’s “move fast and break things.”
To be this good, the on-board shuttle group has to be very different — the antithesis of the up-all-night, pizza-and-roller-hockey software coders who have captured the public imagination. To be this good, the on-board shuttle group has to be very ordinary — indistinguishable from any focused, disciplined, and methodically managed creative enterprise.
Two-thirds of the way through our 100 days project, Batesy takes stock of his journey so far.
(I should probably mention that I love each and every one of the pieces of hand lettering that he’s done …talented bastard.)
Hillary, legendary for being the first to scale Mount Everest with teammate Tenzing Norgay, was on board, and Armstrong was, too, saying he was curious to see what the North Pole looked like from ground level, as he’d only seen it from the moon. Astronaut problems.
It’s not about technology, performance and APIs – it’s about people.
Every single word that Lyza has written here speaks to me so, so much.
I have no idea what I’m doing and I’m nervous about messing up, but I keep doing this week after week because it feels important.
Get out of my head, Lyza!
I felt a great swell of pride watching Charlotte give an excellent presentation at the Talk Web Design conference at Greenwich University.
Much of the web’s early cultural and design history is at risk, despite efforts by the Internet Archive and renegade archivists. One of our realizations after 20 years on the web is that our responsibility isn’t just to the new; we also need to preserve what’s been built in the past.
Grant, like Emma, has recently started blogging again. This makes me very, very happy. And he’s doing it for what I consider to be all the right reasons:
But this is mostly a place for me to capture my thoughts, and an excuse to consider them, and an opportunity to understand them more fully.
More thoughts on the lack of a performance culture, prompted by the existence of Facebook Instant:
In my experience, the biggest barrier to a high-performance web is this: the means of production are far removed from the means of delivery. It’s hard to feel the performance impact of your decisions when you’re sitting on a T3 line in front of a 30 inch monitor. And even if you test on real devices (as you should), you’re probably doing it on a fast wifi network, not a spotty 3G connection. For most of us, even the ones I would describe as pro-performance, everything in the contemporary web design production pipeline works against the very focus required to keep the web fast.
The Indieweb approach has a lot in common with Ev’s ideas for Medium, but the key difference is that we are doing it in a way that works across websites, not just within one.
Zeldman looks back at Stewart Butterfield’s brilliant 5K contest. We need more of that kind of thinking today:
As one group of web makers embraces performance budgets and the eternal principles of progressive enhancement, while another (the majority) worships at the altar of bigger, fatter, slower, the 5K contest reminds us that a byte saved is a follower earned.
A handy way of quickly finding out how the weather in your area compares to the weather on Mars.
Progressive Enhancement remains the best option for solving web development issues such as wide-ranging browser support, maintenance and future-proofing your application.
Here’s a really nifty use of the
:checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.
The 17th century blind Irish harpist has been immortalised as a crater on Mercury.
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.
And that’s why you always use progressive enhancement!
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’.
A PDF of Clarke’s classic essay on the follies of prediction. From the 1972 collection The Futurists, edited by Alvin Toffler.
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.
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.
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.
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.
This is a fascinating bit of web archeology: John has annotated the code from one of the earliest versions of jQuery.
Pacman meets Pong meets Space Invaders.
A superb piece by Ross Penman on the importance of being true to the spirit of the web.
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.
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.
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.
Mark Rothko paintings recreated with CSS gradients.
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.
Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.
Hot on the heels of Github’s pattern library, here’s Heroku’s.
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).
Jeffrey muses on progressive enhancement and future-friendliness.
This year’s map from TeleGeography is looking lovely.
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.
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.
The most ambitious project from Archive Team yet: backing up the Internet Archive.
We can do this, people! Moore’s Law and all that.
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.
These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.
A terrific bit of smart CSS thinking from Heydon Pickering.
You know he’s speaking at Responsive Day Out, right?
A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.
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.
Interstellar travel time dilation and status updates: a clever narrative combo.