Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.
Saturday, May 12th, 2018
Thursday, May 3rd, 2018
The latest explainer/game from Nicky Case is an absolutely brilliant interactive piece on small world networks.
Sunday, April 15th, 2018
Friday, March 30th, 2018
Hot nuclear blasts in your area.
(like Eric’s HYDEsim)
Thursday, March 1st, 2018
Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.
Guidelines to consider before adding swooshy parallax effects:
- Respect the Physics
- Remember that We Call Them “Readers”
- Ask for Consent
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?
Thursday, December 21st, 2017
Tuesday, December 5th, 2017
The fascinating history of interactive fiction from adventure game to hypertext.
The split between parsers and hyperlinks reminds me of different approaches to chatbots: free text entry vs. constrained input.
Sunday, October 29th, 2017
A lovely interactive photo essay charting the results of what happens when evolution produces a life form that allows a planet to take selfies.
Monday, September 25th, 2017
A good analysis, but my takeaway was that the article could equally be called Why it’s tricky to measure Client-side Rendering performance. In a nutshell, just looking at metrics can be misleading.
Pre-classified metrics are a good signal for measuring performance. At the end of the day though, they may not properly reflect your site’s performance story. Profile each possibility and give it the eye test.
And it’s always worth bearing this in mind:
Monday, July 31st, 2017
Such a great primer on game theory—well worth half an hour of your time.
Tuesday, March 21st, 2017
Friday, September 23rd, 2016
This is rather lovely: explore a network of nodes, each of which contains the audio of a child describing a dream.
Inspired by the concept of an 8th continent to which all children belong, RadioEight is an interactive soundscape dedicated to the hidden world of dreams.
Wednesday, December 16th, 2015
I think this might be the most tasteful, least intrusive use of scroll events to enhance a Snowfallesque story. It’s executed superbly.
You can read all about the code. Interestingly, it’s using canvas to render the maps even though the maps themselves are being stored as SVG.
(There’s a caveat saying: “This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.” I don’t think that’s true: the story works just in IE …that browser just doesn’t get the mapping enhancements.)
Sunday, November 8th, 2015
Saturday, October 31st, 2015
Monday, March 2nd, 2015
A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.
Friday, August 8th, 2014
A nice bit of interactive citizen science storytelling from Google.
Note: if you have Adblock Plus installed, this won’t load at all. Funny that.
Wednesday, July 2nd, 2014
A new website for dConstruct 2014
dConstruct 2014 has a new website. Huzzah!
When I announced the original website two months ago, I was very, very excited about the line-up, but I was less excited about the design of the site itself. To be honest, it was a somewhat rushed affair. It did the job but it didn’t have much pizzazz. I had some design direction—colour, typography, texture—courtesty of Mikey, but I didn’t push it to do anything very interesting.
So Mikey took some time to iterate and revise, and he came up with a gorgeous new design. I think this does a much better job of capturing the spirit of dConstruct.
As well as a revised colour palette and lusher textures, there was also opportunity to do something quite playful in the masthead. Making sites for our own projects always presents a nice opportunity to try out some whacky stuff that we might not get a chance to do on client work.
In this case, the plan was to play with the theme of this year’s dConstruct—Living With The Network—and use it as part of the visual design, literally networking up parts of the interface.
It was a nice chance for me to play around with canvas. But I didn’t dive into code straight away. I had a think about how I could add this an enhancement to the responsive layout.
My plan was to generate a canvas element under the existing elements in the header using
z-index to keep them separated while maintaining the appearance of having everything connected up.
It worked out pretty well. But I wanted to push it further. How about making it an interactive element that responds to the user?
I know, I know. It’s very silly and frankly a bit wanky, but y’know, it felt like it would be nice and playful.
I had no idea how to do it though. At an internal code review here at Clearleft, I demoed what I had so far and asked for advice. The general consensus was that I should probably be using SVG rather than canvas for making interactive graphical elements. They’re probably right, but I distinctly remember learning about hit detection and mouse events in canvas during Seb’s excellent Creative JS workshop.
So I stuck with canvas and fiddled around with numbers until I got to something that felt lke it reacted nicely to hover events (or touch/clicks if hover isn’t available …or even if it is).
requestAnimationFrame was a godsend when it came to getting smooth animations.
Have a play with it. It’s hard to miss. It’s not exactly a subtle easter egg.
The content of the site remains much the same. While I was disatisfied with the original visual design of the site, I’m still pretty chuffed with the copy.
One small change I made was to give the code of conduct its own page (and expand on it a bit). Previously it was included with terms and conditions but there was a good chance that it could’ve been overlooked there.
Anyway, I hope you like the new site. I think Mikey did a terrific job with the design and it was a lot of fun to put together …especially the silly wanky bit. The only slight disadvantage is that the page weight comes in slightly larger than the previous design. But I’ll keep optimising to see if I can shave off some bytes here and there.
Oh, and you might notice one significant change on the home page. In addition to the speakers that are currently listed, there’s an addendum that reads “…and more”. That’s because the line-up for this year’s dConstruct, awesome as it is, is not yet complete. It’s going to get even better.
If you don’t have your ticket to this year’s dConstruct yet, what are you waiting for?
See you on September 5th.
Friday, November 1st, 2013
A superb piece of hypertext from The Guardian.
Tuesday, August 13th, 2013
On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.