A beautiful website for ISS-based biology experiments.
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.
A friendly challenge from The Grey Lady for news sites to enable TLS.
Make a commitment to have your site fully on HTTPS by the end of 2015 and pledge your support with the hashtag #https2015.
A cute videolette on web standards.
A great primer on using
picture. I think I’ll be referring back to this a lot.
Tantek shares a fascinating history lesson from Tim Berners-Lee on how the IETF had him change his original nomenclature of UDI—Universal Document Identifier—to what we now use today: URL—Uniform Resource Locator.
Google has updated its advice to people making websites, who might want to have those sites indexed by Google. There are two simple bits of advice: optimise for performance, and use progressive enhancement.
Just like modern browsers, our rendering engine might not support all of the technologies a page uses. Make sure your web design adheres to the principles of progressive enhancement as this helps our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported.
Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.
Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.
It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.
Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.
You can catch a glimpse of my Daft Punk impression in this video of Seb’s frickin’ lasers.
Look, I would never usually link to a “listicle” on Buzzfeed, but this is all kinds of cumulative mirth.
A really nice little documentary about my friend Jeffrey.
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.
He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.
There are slides.
I can relate to every single word that Bastian has written here.
The longer I look at boilerplates, build tools, frameworks and ways to make my life as a developer easier, the more I long for the basics.
The image-stitching algorithm is trying its best.
Literally a library of patterns: y’know, for tiling background images. Old school!
Lighthouse are putting on their Improving Reality conference again this year. It’s the day before dConstruct. Come to both!
45 years ago today.
A look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.
These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).
In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.
A short film about Claude Shannon and Information Theory — not exactly as in-depth as James Gleick’s The Information, but it does a nice job of encapsulating the fundamental idea.
A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.
Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?
He’s right, y’know.
A lovely little selection of loading indicators powered by CSS animations and transitions.
A profile of Demetrios Matsakis, keeper of time at U.S. Naval Observatory, America’s equivalent to Greenwich in its importance for timekeeping in the modern world.
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
I finally got around to reading Red Men by Matthew De Abaitua recently. It’s like Nick Harkaway crossed with Jeff Noon.
Here’s hoping that this short film will be developed into a full-length feature.
A reusable set of responsive patterns and templates for UK councils.
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.
The alphabet illustrated with CSS.
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.)
This fun-looking short film—funded by Brighton’s Lighthouse Arts—is screening at the Duke Of York’s Cinema on Saturday, March 1st followed by a panel discussion with the director and science-comedienne Helen Keen.
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
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 sensible thinking from Tim on measuring performance gains.
Expanding on an exercise from last year’s Hackfarm, Brian and Mike have written a deliciously dystopian near-future short story.
The video of my closing talk at this year’s Full Frontal conference, right here in Brighton.
I had a lot of fun with this, although I was surprisingly nervous before I started: I think it was because I didn’t want to let Remy down.
John shares his concerns about the increasing complexity involved in developing for the web.
This was my favourite moment from the Handheld conference in Cardiff.
This is handy: a version of my pattern primer that can be run with Grunt.
This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.
Warning: it does get quite ranty towards the end.
Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.
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.
A superb piece of hypertext from The Guardian.
Have you tried turning it off and on again?
I heartily concur with Lyza’s mini-manifesto:
I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.
It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.
Simplicity is powerful.
A report from the BBC on this year’s Brighton Digital Festival including interviews with Honor, Timo, and Seb.
Iain M.Banks and dConstruct, together at last.
A timeline of technology.
Some examples to illustrate the UK Border Agency’s latest campaign.
Scenes from a future Sweden.
Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.
Improve your word power: here’s a timeline of terms used to describe male genitalia throughout history. And yes, there is a female equivalent.
A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.
WebKit nightlies now have support for
srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of
I’ve always maintained that the best solution to responsive images will be some combination of
picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by
picture, but the “retina” use case is better handled by
Beautiful animated GIFs showing the lungs of our planet.
I like this theory!
Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.
The closing hot topics panel I moderated at this year’s Mobilism conference in Amsterdam, featuring Remy, Wilto, Jake, and Dan.
This is a really nice and simple idea: view photos from a specific place taken at a specific time. Voyeuristic fun.
The line-up for this year’s Improving Reality conference looks great (as always).
It’s the day before dConstruct so why not come on down to Brighton a day early and double your fun?
Oh, no! How horrid! Now Twitter won’t control the “user experience” of that widget!
Instead, the person who actually posted the tweets in the first place gets to decide how they should be displayed. Crazy idea, isn’t it?
A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
I gave the opening keynote at the Beyond Tellerand conference a few weeks back. I’m talked about the web from my own perspective, so expect excitement and anger in equal measure.
This was a new talk but it went down well, and I’m quite happy with it.
My presentation from the Industry conference in Newcastle a little while back, when I stepped in for John Allsopp to deliver the closing talk.
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
A lovely little highlight reel that Craig put together from the Responsive Day Out.
Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.
A long-zoom data visualisation.
Some thoughts (and code) on responsive images.
A design fiction video depicting technology that helps and hinders in equal measure.
A beautiful short film on the amazing work being done at the Internet Archive, produced on the occasion of their 10 petabyte celebration.
Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.