Articles in the ‘Sketchnotes’ Category

Javascript Fun at London Web Standards #lwsfun

Last night was London Web Standards‘ April 2011 event, Fun with JavaScript. Speakers Rob Hawkes of Mozilla and Seb Lee-Delisle of Plug-in Media came to talk about all the fun stuff you can do with JavaScript, canvas, and HTML5. Sketchnotes for both talks are below.

We were also joined by a man showing us a quick look at Dreamweaver CS5.5 with it’s new HTML5 features. Unfortunately, the software had a few bugs which showed up in the talk, and after being burned by the very expensive adobe software for years, the crowd didn’t take to the UI very well, which wasn’t helped by a low-res projector. Still, it looks like a big improvement over the old version, but I’ll still use Coda when on my Mac.

Rob Hawkes: multiplayer gaming in HTML5

Sketchnotes of Rob Hawkes' talk Multiplayer Gaming with HTML5

Sketchnotes of Rob Hawkes' talk Multiplayer Gaming with HTML5

Rob is a canvas and animation guru. He’s not far out of uni and has a book out this month! He gave a new talk on multiplayer gaming, and how it was possible in HTML5.

Basically: Canvas + Websockets + a server (rob recommended Node.js) = multiplayer gaming on the web.

Rob didn’t go into much detail as to how to do all this, just talked us through the principles of what you should be doing, what you should avoid, how to prevent cheating and simple tricks to improve performance.

At the end, Rob proposed a HTML5 gaming knowledge repository, a community wiki and tutorial site, so that it’s easier for people to learn. Someone at the event will take him up on the offer, so look forward to more things soon!

Rob has a book on Foundation HTML5 Canvas: Gaming and Entertainment for pre-order on

Seb Lee-Delisle: Fun with JavaScript

Sketchnotes for Creative JS visual effects – Seb Lee-Delisle

Sketchnotes for Creative JS visual effects – Seb Lee-Delisle

Seb is a flash guy, but also a JavaScript guy and a graphics guy. He’s so multi-talented that he doesn’t know what exactly he does any more.

Seb has won two BAFTAs (thanks for correcting me Seb!) for some of his BBC kids web sites. He personally runs a javascript graphics workshop and took us through a few things that we’d do if we went on it.

He started with particles, showing us how to do basic (pseudo) physics in canvas and JavaScript. He then broke out his large array of particle demos, showing how complex effects can be produced with very simple code.

Seb then talked about performance, and how bad canvas is at the moment. DOM elements with hardware acceleration is easily twice as fast as canvas, especially on the iPad. The iPad’s saving grace is its touch screen, which can take 11 touch points (just in case we grow an extra finger). Seb created a simple asteroids game using touch events for input.

Seb finally talked about 3D and how using libraries was a great way to go from 2d to 3D very simply. He recommended Unity as a game engine and framework of choice, and they’re building HTML5 renderers on top of their regular OpenGL and DirectX methods. Exciting stuff indeed.

Real World HTML with Marcus Alexander – #LWSWorld

This month, Marcus Alexander of EMC Consulting and Arran Ross-Paterson (of this parish) talk about HTML in the real world, dealing with clients, and what a quality project actually looks like.

LWSWorld - Real world HTML - Marcus Alexander

Everything is designed that way for a reason
Semantic HTML may be brilliant, but all those extra bits are in there for a reason. Until you understand them, don’t mess with them

The best solution is the one that meets the requirements
Clients don’t really care about the technology, just about getting things done on time and on budget. If a solution meets all the requirements, it doesn’t matter how hacky it is, it’s the right solution.

Ask the right questions up front
The client may not have thought of everything, so go through your standard checklist of questions and get everything agreed before you start.

Bugs happen, deal with it
100 bugs in a project is normal, most of them will be problems with other people’s code. Deal with them and try not to let the client get carried away. Products will ship with bugs, just deal with them.

Developers will build a rocket ship to get to Ikea
And then they’ll only leave room in the rocket for a hot dog and some light bulbs. Internal coding standards aren’t very useful, try code reviews and examples of structure instead.

Deployment scripts are your friend
They do all the grunt work for a release for you. Make use of ANT or MSBuild to speed things up.

Finally, thanks to Marcus for a great talk. Update: his slides are on slideshare: See my notes on this meetup’s other talk: Arran Ross-Paterson on Why validate

Why Validate? – Arran Ross-Paterson #LWSWorld

This month, Marcus Alexander of EMC Consulting and Arran Ross-Paterson (of this parish) talk about HTML in the real world, dealing with clients, and what a quality project actually looks like.

These are my notes on Arran’s talk:

LWSWorld - Why Validate - Arran Ross-Paterson

Greeted by boos from the crowd, Arran’s controversial talk focused on why we shouldn’t worry that our web sites don’t validate in the W3C checker.

Browsers don’t care, nor does Google. Unless it’s a requirement, just use it as a sanity checker. Your code doesn’t always have to validate to be valid.

Alt tags
Alt tags never fully describe a picture. There’s no point in having an alt tag on an image if it’s not completely descriptive. If the image is just to attract attention, then don’t worry. If it’s an image map, you will need to add some more description.

Calendars look like tables, but they could be a list, and surely it’s ordered, but if you’re doing an event calendar, a definition list is the most semantic markup, except that <dl>s are really hard to style and missing tags can cause problems. Having <dd> inside a <dt> isn’t correct according to the validator, but feels more correct semantically.

Don’t abandon standards
Standards are very useful, so don’t abandon them. They’re great for learning and teaching people, to bring them up to a certain level, but as long as it works, don’t sweat it.

Thanks again to Arran for his talk. See my notes tonight’s other talk: Marcus Alexander’s on real world HTML

Interesting North #IntNorth

On my way to see some friends in Sheffield, tweeting away on the train, Chris Murray offered me a ticket for Interesting North as a way out of going shopping with the missus and her friends.

Jumping at the chance, I had a great time, learned a lot and laughed a lot. I made some notes and sketches, so take a look. Have a laugh at the “daft novels about nazis” (morning sketch at the bottom), they were brilliant.