Using Xcode Playgrounds for Presentations

Playground Presentation

Playgrounds are primarily designed as a learning tool, but with Xcode 7’s multiple pages and expanded rich markup support, they’re also really great for presentations – they allow you to mix slide-like text & image content with interactive code (for coding demos). Because everyone loves coding demos!

I used this technique last week at /dev/world/2015, and thought I’d share a few tips if you’re interested in doing your own playground presentations.

  1. Don’t try to put too much content on the one page; otherwise you’ll spend half the presentation scrolling up & down.
  2. Add a key binding to the ‘Show Rendered Markup’ menu option – you’ll be using it a lot!
  3. Use the image markup (//: ![[Alt Text]](image_name.jpg)) to show images from your ‘Resources’ folder – e.g. diagrams you’d normally put on a slide.
  4. Don’t use a dark text theme if you’ll be presenting on a projector – a light theme will be more readable. Also, don’t forget to change the Console font size in your presentation theme!
  5. Use custom Xcode snippets rather than typing in code – it’s much quicker & less error-prone, but your audience will still feel like the code is coming together in front of them. Another option is to pre-fill most of the code and just add the interesting bits live.
  6. If you’re using a Swift file in ‘Sources’ to hide supporting code, note that types must be public to be visible to the playground.
  7. Swift code in ‘Sources’ can’t link to custom frameworks, so you’ll need to put your supporting code in a separate framework if you want to do this. ‘Sources’ is best used for basic helper functions.
  8. Implementing CustomPlaygroundQuickLookable on your types can add a lot of fun to your presentation if it’s something that lends itself to a visual.

Lastly, be prepared for the playground to crash (because it will!)

My /dev/world talk is available online if you’d like to see the playground presentation in action.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s