When I'm giving a talk about a client-side topic (JavaScript/HTML/CSS), I really like being able to show what I mean via actual live code. But I don't like having to switch back and forth between a slide deck and a browser and a text editor. So, lately, I've been using a combination of FathomJS, a jQuery slides library, and CodeMirror, an in-browser code editing library, so that I can have slides with actual runnable code in them. Sometimes I want to run some JavaScript, sometimes I want to append a SCRIPT tag to the page, sometimes I want to render some HTML — and I can do all of that with CodeMirror.
To see it in action, you can check out this example deck. It also shows a few other "features": showing speaker notes (something I do while both practicing and sharing), rendering JS results in an overlay (easier than making room on the slide), and using fun CSS3 backgrounds. That deck is deployed to Google App Engine, as I find they're the easiest host for static content. You can also check out other actual decks that I've done with this combo: Client-side APIs, Client-side Storage, and Mobile app options.
Want to use it for your next presentation? Fork it on Github, baby!
No comments:
Post a Comment