Posted on June 8, 2012
Canvas-A-Go-Go: Lessons Learned From Teaching HTML5 Canvas at One Of Top Tech Companies On Earth
This week I spent a couple days on-site at “a very large technology company in the Silicon Valley”, working for a technical education company named Marakana, teaching a class on the HTML5 Canvas. Before I visited, I knew very little about the company. I knew they were an I.T. company. I knew that my previous employer, a very large consumer goods that employed me for 15 years, relied on their products. However, I had very little idea about the vast depth and breadth of this Silicon Valley company’s operations. While I can’t really go into detail about what I saw on the inside, I will say that I was very impressed by the company. They seem to place a high value on the education of their employees which I found exciting and refreshing. At the same time, their employees were a wonderfully diverse and interesting group of people. They reminded me of the early years at my previous employer, when technical employees felt respected and supported.
Anyway, here are some lessons I learned about both the HTML5 Canvas and about teaching to a highly skilled and technical audience.
Lessons Learned About The State Of HTML5 Canvas Development
- Video is hot.
HTML5 video is a hot topic. Video on the Canvas even hotter. Ways to get video to work on mobile scorching to the touch. I had to pull out all the video examples from my HTML5 Canvas book just to satiate the audience.
- People want animation above static images (duh!)
This probably seems obvious, but people want to know to to create animation on the Canvas. All of my exercises about displaying images, text and drawing were fine, but almost universally people said “and…” because in reality, most of that can be done in other ways in standard HTML. However, when we got to the animation, things started clicking. Animating text in a loop, tile-based animation with images, physics and math based animation, displaying and cutting apart video for the “matching game”, and the “drag and drop ” exercise all were very well received. It’s simply not enough to say that Canvas can “display things”, people want to see it all move and then find out how to do it.
- People want to know the best way to do things
Everyone (that I talked to) wants to know the “why” and “when” to implement different HTML5 technologies (DOM, CSS, Canvas, etc.). There is a lot of existential angst about this topic. When Flash was king, there was a very finite set of “best practices” for creating animations an games on the web. However, with HTML5, there is still no clear winner. I personally love the Canvas, but that doesn’t mean it’s right for everything. Many people only want to learn what is the “best” way to do things. While that is possible within the realm of certain technologies, from a broader perspective, that might not be possible right now unless you consider the exact needs of any one particular project,.
- Flash made things easier.
This is just true. When Flash was the dominate technology, it was easier to know the right answer for any particular situation.
Lessons learned about teaching classes to a technical audience.
- Three examples per topic seem like enough (easy, medium, difficult)
Three examples and exercises should suffice. One should be really basic, one should be add complexity, and the last one should “blow the roof” off with something amazing the students were not expecting.
- Exercises should not be “typing in whole programs”
This came very quickly as the students started my exercises. No one wants to type a complete program into their editor, and it takes up too much time to do it anyway. Instead, let students load in a complete program, and them assign 3-5 tasks for them to perform on the basic code. The first ones should be things that show they can get around in the code (change the text, chnage the color), while the later ones should show understanding of the concepts (i.e make the balls bounce off the walls, rotate the image on the fly, make the area clickable, etc.)
- Remember to take breaks
Students wants break. they need them. I was so excited about the topic, I forgot. Even me, who usually needs to a break every 45 minutes, was going for 3-4 hours at a time.
- Industry experience is appreciated
The students definitely appreciated the outside experience I brought to the material. They seemed to like hearing that customers were asking for certain technologies, or that certain things worked or did not work in real-world projects. They did not want me to read from a script. They liked a little bit of spontaneity, and they liked it when I got up draw stuff on the whiteboard. Anything to change things up, and show that the class was not a rote, by the numbers experience was greatly appreciated.