I particularly like Ethan’s Stop Making Sense era David Byrne suit.
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.
I think the move away from side projects toward doing a startup day one is not all good. There was something great about the ability to experiment with an idea before committing to it and before sucking other people’s money into it.
Here’s an interesting proposal from ppk: use
requestAnimationFrame to gauge how performant a browser in behaving and then enhance accordingly.
I’m so happy that Ember is moving to a server-side rendering model. Not only that, but as Tom points out here, it’s crucial that the server-side rendering is the default and the client-side functionality than becomes an enhancement.
An immortal deer wanders the world of Grand Theft Auto for all eternity. It’s remarkably calm and relaxing.
This article on airships has my new favourite sentence in the English language:
During the First World War, Germany and its allies ceased production of sausages so that there would be enough cow guts to make zeppelins from which to bomb England.
Of course it was Simon who pointed me to this. Of course.
Some solid sensible advice on optimising performance.
A film about Tim Berners-Lee and the World Wide Web. Details are scarce right now but watch this space.
This is really, really clever. You can’t use generated content (
:after) on replaced content. The
img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using
The Buckminster Fuller Institute has put together this collection of resources which explain the ideas behind “comprehensive anticipatory design science.”
Seems especially relevant in light of the first issue of the Journal of Design and Science from MIT.
The legacy of the Black Mountain College lives on.
The full text of Adam’s excellent talk at EnhanceConf.
There’s that Acheulean hand ax again.
The first ever object to be designed by man 1.7 million years ago was a flint hand axe. Flint has the same molecular structure as a crystal and they both consist of silica. The project juxtaposes the flint hand axe with the latest crystal technology; Xero chaton the world’s smallest precision cut crystal measuring 0.6mm in diameter, smaller than a grain of sand.
A comprehensive overview of
rel="preload" which looks very useful indeed …I just wish it wasn’t (like “nofollow”) a nonsensical value for the
rel attribute: a resource can’t have a relationship of “preload” to the linking document.
This looks like it could be quite a handy (and relatively lightweight) script for attaching events—like animations—to an item’s visibility, so the events only trigger when the item is scrolled into view.
Science fiction as a means of energising climatic and economic change:
Fiction, and science fiction in particular, can help us imagine many futures, and in particular can help us to direct our imaginations towards the futures we want. Imagining a particular kind of future isn’t just day dreaming: it’s an important and active framing that makes it possible for us to construct a future that approaches that imagined vision. In other words, imagining the future is one way of making that future happen.
But it’s important that these visions are preserved:
It’s very likely that our next Octavia Butler is today writing on WattPad or Tumblr or Facebook. When those servers cease to respond, what will we lose? More than the past is at stake—all our imagined futures are at risk, too.
You can do anything with CSS these days.
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
Earth as seen on one day in 2015 from Himawari-8. Beautiful.
A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the
:placeholder-shown pseudo-class which, alas, is not universal.
I was hoping that maybe
@supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!
I love this. I really love this. Remy absolutely nails what makes the web so great.
There’s the ubiquity:
If the viewer is using the latest technology beefy desktop computer that’s great. Equally they could view the website from a work computer, something old and locked in using a browser called IE8.
Then there’s the low barrier to entry—yes, even today:
It’s the web’s simplicity. Born out of a need to connect documents. As much as that might have changed with the latest generation of developers who might tell you that it’s hard and complex (and they’re right), at the same time it is not complicated. It’s still beautifully simple.
Anyone can do it. Anyone can publish content to the web, be it as plain text, or simple HTML formed only of <p> tags or something more elaborate and refined. The web is unabashed of it’s content. Everything and anything goes.
I might just print this out and nail it to the wall.
If you sit back for a moment, and think about just how many lives you can touch simply by publishing something, anything, to the web, it’s utterly mind blowing.
I think I’ve shown great restraint in not linking to loads of think-pieces about Star Wars and The Force Awakens, because believe me, I’ve been reading—and listening to—a lot.
What Jessica has written here is about The Force Awakens. But more than that, it’s about Star Wars. But more than that, it’s about childhood. But more than that…
What I’m saying is: if you only read one thing about the new Star Wars film, read this.
How the Web Works: A Primer for Newcomers to Web Development (or anyone, really) by Preethi Kasireddy
This is a great reminder of the fundamental nuts’n’bolts of the internet and the World Wide Web: clients, servers, URLs, DNS, HTTP, TCP/IP, packet switching, and all the other building blocks we sometimes take for granted.
This is part one of a four-part series:
- A Primer for Newcomers to Web Development (or anyone, really)
- Client-Server Model & the Structure of a Web Application
- HTTP & REST
- Stay tuned…
A nice self-contained script for animating items into view as the document scrolls.
(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)
A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.
We’ve got Space Ipsum for text. Now we have SpaceHolder for images.
A superb talk on performance, advertising, and the future of the web. No doubt a transcript will appear in due time on Maciej’s site and when it does, I will enjoy it all over again.
Trust me: you’ll want to watch this.
I always loved Matt’s light cone project—it was a big influence on the Radio Free Earth hack that I made with Chloe. Now it has been reborn as a Twitter bot. Here’s Matt’s documentation for his future self:
I haven’t made a habit of project write-ups before, but I’m taking an increasingly “long now” approach to the tech I make and use. How will I remember what I made in a decade? By reading this post.
Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).
He finishes with a plea to avoid unnecessary complexity:
It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.
Here’s a handy shortlist to run through, HIKE:
- H stands for headings and semantic markup.
- I stands for images and labels.
- K stands for keyboard navigation.
- E asks for you to ACT with a little extra love for custom components and more.
(ACT = ARIA, Colour Contrast, Text Size)
The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.
When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”
We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.
A really nicely put together sci-fi short film.
The missing font generator for Mac OS X.
Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.
Quite a few moving parts in this technique from Emil, but it’s very clever.
A subset of one of my favourite sites on the web:
Explore the Arctic of the past from the deck of a whaling ship.
Choose your vessel and get transcribing.
The new style guide and pattern library for Buzzfeed.
It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of
The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like
!important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).
Solid uses immutable, atomic CSS classes…
CSS is “mutable”. By design. I don’t think we should be working against that.
A breathtaking overview of Cassini’s mission. The timeline video—matching up footage from Saturn with contemporary events on Earth—is a beautiful and haunting dose of perspective.
You can even watch a four hour video of every single one of the 341,805 images that Cassini has sent up till now.
A short feature on the 10,000 year clock.
Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.
A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.
Critical thinking without hope is cynicism. Hope without critical thinking is naïveté.
Echoing Margaret Atwood’s observation:
If we abandon hope, we’re cooked. If we rely on nothing but hope, we’re cooked. So I would say judicious hope is necessary.
There are Inception-like layers of nostalgia here: firstly, this web series of web pages made by Matt are a throwback to an earlier era, and secondly, the story being told goes all the way back to the birth of the ARPAnet.
A nice navigable timeline of historical events from Wikipedia.
Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.
Nick Foster has put the audio of his fantastic dConstruct talk together with his slides.
It’s a terrific, thought-provoking presentation, superbly delivered …and it even has some relevance to progressive enhancement! (you’ll know what I mean if you watch/listen to the whole thing)
This is the best moment to write a blog post:
I just had my responsive images epiphany and I’m writing it all down before I forget everything.
Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.
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.
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.
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 death of the web has been greatly exaggerated.
There’s nothing else like it. It’s constantly improving. It’s up to you what you do with it.
The video of Richard’s great talk on responsive typography at the Up Front conference.
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).
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
A great presentation from Stephen. He takes a thoughtful look at our processes and tools.
This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.
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).
Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.
I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.
I’d like to do this for all Clearleft web projects.
How important is mobile for @nytimes? We’re blocking access to our home page on desktop in our building.
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
Did you know Google runs a free an open image resizing service?
I did not! This could be quite useful. Seeing as it’s an https endpoint, it could be especially useful on https sites that pull images from http domains (and avoid those mixed-content warnings).
A beautiful bit of design fiction.
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.
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.
By far the creepiest type experiment I have ever seen.
A long-zoom look at life, work, and success.
I’m not usually a fan of portmanteau neologisms, but I really like Tash’s coining of the word longtrepreneur.
Primer, but Twitter.
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).
Beautiful use of CSS transitions and transforms.
Also: CSS is officially the new Flash—”skip intro” is back.
Always worth bearing in mind when some perspective is needed.
If it is possible that our future species will go on to create simulations of our civilisation forerunners (us), then it is far more likely that we are currently in such a simulation than not.
Interstellar travel time dilation and status updates: a clever narrative combo.
A beautiful website for ISS-based biology experiments.
Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
Ant told us this harrowing story in the office two weeks ago. I honestly can’t imagine what it would be like to be in this situation.
This is a talk I gave at An Event Apart about eighteen months ago, all about irish music, the web, long-term thinking, and yes, you guessed it—progressive enhancement.
For people of a certain age, this will bring back memories of a classic screensaver.
If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.
A cheap’n’cheerful way of monitoring uptime for domains.
But as people spend more time on their mobile devices and in their apps, their Internet has taken a step backward, becoming more isolated, more disorganized and ultimately harder to use — more like the web before search engines.
How to get Yosemite to display five-digit years. It’s a bit of a hack, but we’ve got another 7,985 years to figure out a better solution.
Yet another brilliant far-ranging talk from Bret Victor.
I’ve tried to get him to come and speak at dConstruct for the past few years, but alas, with no success.
Curiosity’s journey so far, nicely visualised.
Seb will be running this workshop again at the start of February—details here. I can’t recommend it highly enough—it’s so, so good!
This is quite beautiful in its simplicity: the hexadecimal colour value of the current time.
Scenes of space from sci-fi films.
With all my talk about extending existing elements instead of making new ones, I was reminded of one of my favourite examples of custom elements in action: Github’s extensions of the
Sounds like a cute idea, right?
In fact it’s the best thing you’re ever likely to read on Peruvian ursine immigration.
A fascinating look at how the humble password gets imbued with incredible levels of meaning.
It reminds me of something I heard Ze Frank say last year: “People fill up the cracks with intimacy.”
This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.
Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.
A vision of humanity’s exploration of our solar system.