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.
A collection of cli-fi and cli-fact.
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.
The video of my talk at this year’s Beyond Tellerrand. I was pleased with how this went, except for the bit 16 minutes in when I suddenly lost the ability to speak.
An old-school styleguide.
What a lovely bit of progressive enhancement—styling data tables to display as charts.
Fire up Firefox and try out these demos: the CSS
element value is pretty impressive (although there are currently some serious performance issues).
To put it simply, this function renders any part of a website as a live image. A. Live. Image!
A lesson on the importance of handling each state of an interface:
- the blank state,
- the loading state,
- the partial state,
- the error state,
- and the ideal state
…instead of just focusing on that last one.
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.
Will the Big Think piece you just posted to Medium be there in 2035? That may sound like it’s very far off in the future, and who could possibly care, but if there’s any value to your writing, you should care. Having good records is how knowledge builds.
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.
A wonderful collection of treasures excavated from GeoCities. Explore, enjoy, and remember what a crime it is that Yahoo wiped out so much creativity and expression.
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.
It’s really great to see the performance improvements being made by the Vox team. This is the one that I think will make the most difference:
Our Revenue Team is increasing focus on the impact our advertising has on user experience and overall performance. One of their biggest initiatives has been to change the way ads load from synchronous to asynchronous, which has been underway for several months and is nearing deployment.
Twenty-six letters of independent publishing building blocks.
Yes! Yes! YES!
Marco makes the same comparison I did between the dark days of pop-up windows and the current abysmal state of bloated ads and tracking on today’s web.
I have one more thing to add to this list…
But publishers, advertisers, and browser vendors are all partly responsible for the situation we’re all in.
…developers. Somebody put those harm-causing
script elements on those pages. Like I said: “What will you be apologising for in decades to come?”
In a few years, after the dust has settled, we’re all going to look back at today’s web’s excesses and abuses as an almost unbelievable embarrassment.
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.
It’s a real shame that Hannah and Matt are shutting down This Is My Jam—it’s such a lovely little service—but their reliance on ever-changing third-party APIs sounds like no fun, and the way they’re handling the shutdown is exemplary: the site is going into read-only mode, and of course all of your data is exportable.
Yahoo, Google, and other destroyers could learn a thing or two from this—things like “dignity” and “respect”.
The video of Richard’s great talk on responsive typography at the Up Front conference.
You can now subscribe to my dConstruct 2015 podcast directly in iTunes so you can have my natterings with the lovely speakers delivered straight to your ocular orifices.
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).
Lara’s fantastic book is now available online in HTML for free. Have a read and then order a copy of the print book for your library.
Sounds like a good exercise for explaining just about anything. Smart.
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.
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
When another company achieves success, there’s a lot of pressure to investigate what they did right and apply that to our own organizations.
But we still have a chance. As long as we run brave organizations made up of even braver souls who are willing to embrace expression, trust their intuition and experiences, and stand up when everyone else is sitting down, we will survive.
A great presentation from Stephen. He takes a thoughtful look at our processes and tools.
Jeffrey weighs on the post I wrote about The Verge. I still feel like there’s a false dichotomy being presented here though: either performance or advertising. But advertising can be performant too. There’s a competitive advantage to be had there.
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.
This doorslam turned out to be bad for business.
It is a sad and beautiful world.
Thanks to their work, there was a moment in history when neuroscience, psychiatry, computer science, mathematical logic, and artificial intelligence were all one thing, following an idea first glimpsed by Leibniz—that man, machine, number, and mind all use information as a universal currency. What appeared on the surface to be very different ingredients of the world—hunks of metal, lumps of gray matter, scratches of ink on a page—were profoundly interchangeable.
A long zoom and then a deep dive into web typography.
It’s really good to see that Vox are taking measures to fix their atrocious performance problems. The Verge in particular is a case study in how not to serve up text and images on the web. There have been times in the past when I’ve wanted to link to an article there but then thought “I can’t in good conscience put a fellow human through that.”
A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.
A magnificent presentation from Maciej that begins by drawing parallels between the aviation industry in the 20th century and the technology industry in the 21st:
So despite appearances, despite the feeling that things are accelerating and changing faster than ever, I want to make the shocking prediction that the Internet of 2060 is going to look recognizably the same as the Internet today.
Unless we screw it up.
And I want to convince you that this is the best possible news for you as designers, and for us as people.
But if that sounds too upbeat for you…
Too much of what was created in the last fifty years is gone because no one took care to preserve it.
We have heroic efforts like the Internet Archive to preserve stuff, but that’s like burning down houses and then cheering on the fire department when it comes to save what’s left inside. It’s no way to run a culture. We take better care of scrap paper than we do of the early Internet, because at least we look at scrap paper before we throw it away.
And then there’s this gem:
It finishes with three differing visions of the web, one of them desirable, the other two …not so much. This presentation is a rallying cry for the web we want.
Let’s reclaim the web from technologists who tell us that the future they’ve imagined is inevitable, and that our role in it is as consumers.
Tantek posts a belated round-up of indie web activity in 2014:
2014 was a year of incredible gains, and yet, a very sad loss for the community. In many ways I think a lot of us are still coping, reflecting. But we continue, day to day to grow and improve the indieweb, as I think Chloe would have wanted us to, as she herself did.
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.
Google Fonts aren’t renowned for their quality but this is a beautiful demonstration of what you can accomplish with them.
The text of Nicole’s excellent talk on writing helpful, human microcopy.
This piece by Cennydd on ethics in digital design reminded me of something Jonathan Harris wrote a while back.
I like that he cautions against hiding the seams:
Designers should also strive to give digital products a healthy balance of seamlessness and interrogability. While it’s appealing to create technology that needs little human intervention, this sort of black box can be a breeding ground for dishonest behaviour.
Here’s the video of the panel I participated in at Edge conference, expertly moderated by Lyza.
Thanks to the video editing, you can’t see the face I’m making when the guy from Facebook talks about user-agent sniffing as a totally cool and reliable way of working.
A heartbreaking tale of companionship, memory and loss.
The full text of Jason’s great talk at this year’s CSS Summit. It’s a great read, clearing up many of the misunderstandings around progressive enhancement and showing some practical examples of progressive enhancement working at each level of the web’s technology stack
OpenGeofiction is a map of an imaginary world, created by a community of worldbuilders. You can take part in this project too.
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.
I recorded audio versions of some of my favourite blog posts.
Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:
The design issue here is solved by subtly inverting the problem.
A handy little bookmarklet for doing some quick accessibility checks.
Many believe we should leave the term “progressive enhancement” behind and start anew, but why not educate developers, clients and stakeholders and change many of the misconceptions surrounding it? Changing the name won’t change anything unless we address the real fundamental problems we have when describing the underlying concepts.
A superb illustration of why playing the numbers game and dismissing even a small percentage of your potential audience could be disastrous.
This is the way to approach building for the web:
I want to make as few of those assumptions as possible. Because every assumption I make introduces fragility. Every assumption introduces another way that my site can break.
It’s progressive enhancement, but like Stuart, Tim is no longer planning to use that term.
Stuart writes up his thoughts on progressive enhancement following the great discussions at Edge Conf:
So I’m not going to be talking about progressive enhancement any more. I’m going to be talking about availability. About reach. About my web apps being for everyone even when the universe tries to stop it.
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).
Dividing the world in two.
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!
Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.
The full text of Aaron’s magnificent closing keynote from Responsive Day Out.
This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.
If you were at Responsive Day Out on Friday and you liked the music that was playing during the breaks, here’s the track listing. Creative Commons licensed.
I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.
Jaime Caballero on Instagram: “Live blogging by @adactio. He almost didn’t make it for his 100 words challenge.”
When you’re out celebrating at the end of Responsive Day Out and realise it’s just a few minutes to midnight and you haven’t published your 100 words yet.
Know any talented recent graduates? Let ‘em know about this 3-month internship at Clearleft.
More of this kind of thing, please!
It seems grossly unfair to refer to this as an article. It’s a short book. It’s a very good short book; lucid and entertaining in equal measure. A very enjoyable read.
It is, unfortunately, surrounded by some distracting “enhancements” but perhaps you can use your cleaner-upper software of choice to route around their damage: Instapaper, Pocket, Readability, whatever works for you.
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 many benefits of an analogue detox. There’s neuroscience and everything.
It’s so important that we take the time to connect and switch on.
If you’re not sure if Indie Web Camp is for you, have a read of Charlotte’s take on it:
The reason I didn’t attend last time is because I didn’t know if I had enough experience to spend a weekend working on something completely new. Turns out it doesn’t matter how much coding experience you have. I know I won’t be the only new person at Indie Web Camp. The idea is that we figure out solutions together.
I think there’s a lot of truth to this. By any objective measurement, PHP is clearly inferior to just about every other programming language out there …but its preinstalled out-of-the-box nature means it’s the path of least resistance.
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.
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
A comparison of when to use percentages and when to use vw/vh in your CSS.