N.B. The build along went ahead.
I’ve been toying around with this idea the last few weeks. I’ve decided to do a quick testing-the-water blog post to gauge interest and see whether anyone else would be into the idea. The story goes thus…
A few weeks ago I was building a page for my good friend and awesome chap Nick Payne—the page had been designed by another swell fella, Ian Thomas. We’re all pretty good friends and all excel in different areas, Ian designed Nick’s site and, as designers don’t need to code, I built it. Nick sorted all the back-end and is building it onto JAOSS.
N.B. Ian can and does actually code, but for this project we all wanted a slice of the action so, in this case, he didn’t…
Anyway, I always build static HTML files in my Dropbox public directory as people can have a quick look at it if I need to share it, plus I can test it on a variety of browsers on different devices. I gave Nick the URL early on and told him I was about to get to work…
An hour or so later I got a text from Nick saying that he was loving seeing the progress with every refresh, which I also thought was pretty cool.
Enter my idea… a live build-along!
The idea I’m toying with is that people (it could be pretty much anyone) get in touch (somehow) with PSDs they need building; a PSD that they were going to get their staff in their agency to do, or that they were going to give out to a freelancer, anything, and I will pick one and build it for free on the provision I can build it in my public directory and that people can watch along as I code away.
There are obviously some massive requirements:
- People would actually want to watch me code a page up; I feel I may be being terribly big-headed in assuming people might actually want to watch me code.
- The PSD is all above board, doesn’t break any NDAs etc.
- Whoever gets ‘picked’ doesn’t mind their work being made wholly public from the outset.
The outcomes would be:
- Someone gets a free template (one page) built.
- People who wouldn’t die of boredom get to follow along as I build a page (I seriously think the idea of seeing how someone tackles a build would be really cool, it’d be like watching TV and yelling along:
‘Clear your floats!!!’
)
So basically:
- People submit PSDs.
- I choose one.
- I pick an evening to build it.
- I share the URL on Twitter and in a blog post.
- People can keep the tab open and keep dipping in-and-out as I build, watching the progress.
- For people not in the right time-zone I could potentially record the screen.
- I finish and hand back a fully coded single-page.
Naturally there would be some informal terms and conditions that I’d iron out nearer the time but for now, anyone interested?
Lemme know!
Harry
By Harry Roberts on Tuesday, October 25th, 2011 in Web Development. Tags: Build-along, CSS, HTML | 26 Comments »
+
Aniket Pant said on 25 October, 2011 at 6:55 pm
Amazing idea. I am sure lot of other people might start off with this thing as it will help them learn as well as teach something new :)
Great thinking :D
Stephen Greig said on 25 October, 2011 at 7:00 pm
Would certainly be interested in watching.
Justafa said on 25 October, 2011 at 7:07 pm
Just go for it
Andy Kleeman said on 25 October, 2011 at 7:07 pm
Nice idea Harry. You could always do so and take part in the CSS-OFF ( http://www.unmatchedstyle.com/cssoff/ ) at the same time?
Any Paton said on 25 October, 2011 at 7:27 pm
Yep go for it. Maybe post a screen cast of you actually coding it afterwards? Would give an insight to your working methods.
Methemer said on 25 October, 2011 at 7:34 pm
Absolutely love the idea!
Only flaw is that I’d enjoy seeing the code in progress, rather than refreshing and looking what did you update. Some kind of livereload (for some reason I read that in my mind as liver-load all the time, hah).
Maryse said on 25 October, 2011 at 7:42 pm
I’d be interested in watching, or more seriously by the screen record.
Ash Robbins said on 25 October, 2011 at 8:15 pm
Yeah I agree, nice idea Harry. Would be well interested in watching or if that wasn’t possible then a screencast. Go for it.
Levi Flair said on 25 October, 2011 at 9:31 pm
Great idea! Well done sir.
Ian said on 26 October, 2011 at 6:43 am
Sounds like a great idea Harry, definitely agree with comments above re: Screencasting it as well.
Not sure I like the inference that I don’t code though…
Matt said on 26 October, 2011 at 6:52 am
“I pick an evening to build it.”
You make me jealous. I took me one evening to only make one part of a design work in IE7. And you build the markup of a complete page in just one evening?
Stianjaco said on 26 October, 2011 at 7:21 am
Greate idea! I’ve been thinking the same thing for months now, but never got around to do it :) Hope to see a great result!
Tony Jacobs said on 26 October, 2011 at 7:23 am
*eyes at the ready
Ben Cooper said on 26 October, 2011 at 7:26 am
Love the idea man im totally on board ….. how about a png file?
gabischiopu said on 26 October, 2011 at 2:17 pm
Count me in! Nice idea!
Ian Feather said on 26 October, 2011 at 2:19 pm
Maybe you also need to do a screencast of your text editor?
Sounds interesting. Plus, a time-lapse video of it afterwards would work well
Andrew said on 26 October, 2011 at 2:22 pm
I would be watching. I toyed with the idea of doing the same thing during the UnmatchedStyle CssOff, but didn’t have the capacity.
As an example, the guy who runs castingcode.tv does an excellent job of this, and one of the most important things is he vocalizes his thought processes while he does it, so consider that while you’re doing it.
Lawrie said on 26 October, 2011 at 2:23 pm
Really good idea Harry. The only thing I’d add is that it would be great to archive a copy of the work in progress every half hour or whatever – and annotate the changes you’ve made since the last save. So people not watching live can see the changes and progression.
Shannon said on 26 October, 2011 at 2:25 pm
That actually sounds like it would be really cool to watch
Luke Connolly said on 26 October, 2011 at 2:27 pm
I think it’s a great idea!
That being said, I would much rather watch what you put into your markup / CSS than the actual page coming together. It would be cool to see your process, and how you lay pages out and develop your CSS.
David Fitzgibbon said on 26 October, 2011 at 2:37 pm
I agree with Any Patton, do the Unmatched Style CSS off.
But also with a few others that seeing your actual code and process would be where the most advantage would be.
Let people watch as you build, but record it too and let us see your process in action.
This would be very useful for people, especially beginners. They could pause and see exactly what’s going on and take their time getting to know your process.
Maybe something like this: http://vimeo.com/24842361 but with code too?
Bryan said on 26 October, 2011 at 2:47 pm
Not exactly the same, but Eight Shapes is doing a lot of exploration into sharing the UX phases with clients remotely. I love these ideas.
http://bit.ly/p4TmOI
Dan Harper said on 26 October, 2011 at 2:55 pm
Awesome idea!
My friend @rogem002 built a Chrome extension, LivePage (https://chrome.google.com/webstore/detail/pilnojpmdoofaelbinaeodfpjheijkbh), essentially a browser wrapper for LiveJS (http://livejs.com/) to automatically update CSS, HTML & JS as it’s updated on the server.
This would work incredibly well for the build-along. Users just open your Dropbox URL, activate LivePage, and watch the page slide about as you make changes.
Stephanie said on 27 October, 2011 at 2:33 pm
Nice idea, I love the “For people not in the right time-zone I could potentially record the screen.”, it would be like watching a speed painting video, but for code. Would love to watch the video
Jordan Burke said on 27 October, 2011 at 8:02 pm
I’m always interested to see other designer/developers workflow. I think this is a great idea and I’d definitely tune in (or download the recording if available).
Kori said on 27 October, 2011 at 9:54 pm
I’m glad to see that you’re going through with this Harry. I would also be interested in seeing you do this visually with vocalization. It’s not big-headed of you at all and I for one would only be thankful that you’re offering your time and experience in the first place.
In regards to the Chrome plugin Dan Harper described above, well that’s exactly what I’ve been looking for today. It works beautifully. Thank you Dan!
However, the link posted is not valid. Try this instead.
LivePage
https://chrome.google.com/webstore/detail/pilnojpmdoofaelbinaeodfpjheijkbh?hl=en-US&utm_source=chrome-ntp