Wednesday, July 3rd, 2019
Wednesday, May 29th, 2019
Impressively lightweight and smooth!
Thursday, August 16th, 2018
A step-by-step guide to wrapping up a self-contained bit of functionality (a camera, in this case) into a web component.
Mind you, it would be nice if there were some thought given to fallbacks, like say:
<simple-camera> <input type="file" accept="image/*"> </simple-camera>
Monday, July 9th, 2018
Browser implementations of Sol LeWitt’s conceptual and minimal art, many of which only exist as instructions like this:
Vertical lines, not straight, not touching, covering the wall evenly.
Thursday, June 21st, 2018
Thursday, April 5th, 2018
Graham is recreating the (beautiful and addictive) Geometry Wars in canvas.
Best played with a twin-stick controller (or WASD + Arrow keys as a fallback)
If you’re on Windows, XBONE or XB360 controllers are the easiest to use. On Mac, a PS4 Dualshock 4 or wired 360 controller (with a downloadable driver) works well.
Tuesday, March 27th, 2018
A fun game with pins and string in canvas.
Tuesday, January 2nd, 2018
Monday, September 25th, 2017
Thursday, February 9th, 2017
The texture here is shockingly realistic.
Monday, September 19th, 2016
But, like, have you have ever really looked at your hand?
Tuesday, August 9th, 2016
Sunday, July 3rd, 2016
Sunday, March 13th, 2016
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.)
Tuesday, August 25th, 2015
Building the dConstruct 2015 site
I remember when I first saw Paddy’s illustration for this year’s dConstruct site, I thought “Well, that’s a design direction, but there’s no way that Graham will be able to implement all of it.” There was a tight deadline for getting the site out, and let’s face it, there was so much going on in the design that we’d just have to prioritise.
I underestimated Graham’s sheer bloody-mindedness.
I love that. Even with the focus on the gorgeous illustration and futuristic atmosphere of the design, Graham took the time to think about the absolute basics: marking up the content in a logical structured way. Everything after that—the imagery, the fonts, the skewed style—all of it was built on a solid foundation.
There’s plenty of CSS trickery going on:
opacity. But for the icing on the cake, Graham reached for
canvas and programmed space elevator traffic with randomly seeded velocity and size.
Oh, and of course it’s all responsive.
So, putting that all together…
The dConstruct 2015 site is gorgeous, semantic, responsive, and performant. Conventional wisdom dictates that you have to choose, but this little site—built on a really tight schedule—shows otherwise.
Tuesday, July 22nd, 2014
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.
Sunday, June 1st, 2014
A lovely little from Josh that allows you to draw shapes in a canvas element and then copy the resulting code.
Sunday, July 21st, 2013
Brad has done a great job in documenting navigation patterns for responsive designs. More recently I came across Erick Arbé’s similar collection of patterns for responsive navigation. And, of course, at the Responsive Day Out, David gave a presentation on the subject.
As I mentioned in the chat after David’s talk, choosing a pattern doesn’t need to be an either/or decision. You can start with a simple solution and progressively enhance to a more complex navigation pattern.
But you don’t have to stop there. Now that you’ve got a simple solution that works everywhere, you can enhance it for more capable browsers.
I haven’t applied any media queries in this instance, but it would be pretty straightforward to apply absolute positioning or the
display: table hack to display the navigation by default at wider screen sizes. I’ll leave that as an exercise for the reader (bonus points: apply the off-canvas from the right of the viewport rather than the left).
Feel free to peruse the somewhat simplistic code. I’m doing a bit of feature detection—or cutting the mustard—to test for
On a recent project, I found myself implementing a number of different navigation patterns: off-canvas, overlay, and progressive disclosure. But each one began as an instance of the simple footer-anchor pattern.