I recently watched Erin McKean’s Hooray for Arrays! presentation on JavaScript array functionality. I learned more in a half hour about the JavaScript arrays than I had over the past 2 months. Lots of credit should go to Erin, since the structure of the presentation starts slow and clear but quickly digs into specific, helpful details and examples for handling arrays in ES6.
But I was particularly interested in how she showed live code in her slides. As a teaching tool, I was really impressed. In this tutorial, I have quickly laid out how you can do it yourself using Jupyter Notebooks.
1. Embed Live Code Into Your Presentation
Erin is using open source Jupyter Notebooks to show live code in her presentation. This means each code snippet she shows, she runs for you right there and you can see the output. You can even grab the presentation yourself, edit the code, and see what happens.
This is a leap forward in interactivity for learning code. And it’s a lot better than slideware. Depending on the situation, it might even be better than a live demo.
2. Add JavaScript Support to Jupyter
To use Erin’s presentation, you’ll need both Jupyter Notebook and Jupyter NodeJS, which is the NodeJS kernel for Jupyter. A project that is similar to Jupyter NodeJS is iJavaScript.
In my system, Red Hat Linux, I installed Jupyter NodeJS from the GitHub repo. The only snag I ran into was that I didn’t have ZeroMQ installed initially. I installed it from the ZeroMQ site using apt-get. After Jupyter was set up with the NodeJS kernel, I downloaded Erin’s NI-Hooray-For-Arrays presentation from GitHub.
Start the Jupyter Notebook.
$ jupyter notebook
[I 16:45:51.044 NotebookApp] Writing notebook server cookie secret to
/run/user/1000/jupyter/notebook_cookie_secret
[I 16:45:51.465 NotebookApp] Serving notebooks from local directory:
[I 16:45:51.466 NotebookApp] 0 active kernels
[I 16:45:51.466 NotebookApp] The Jupyter Notebook is running at:
The command line jupyter notebook command will open up a web browser with a local directory structure. As I started the notebook from the clone of Erin’s repository, I immediately saw the notebook.
When you open her notebook, you can see Erin’s presentation.
Some of the notebook cells are slides and some are code.
The code segments are exciting because you can run them.
Pressing on Run will execute the code right in the notebook. Cool!
After running the cell, you can see that the array is an object.
You can also use a wide range of keyboard shortcuts.
By following this interactive approach to Erin’s presentation, you can go through her code snippets. Note that the variable iAmAnArray was defined in the previous cell.
You can also edit the cell and try out your own code snippets right next to Erin’s. Note the color highlighting of the matching parenthesis. You can press the enter key to start a new line of code. Run the code with shift-enter.
You can see the console.log output below.
3. Integrate Jupyter with Reveal.js for Presentations
Jupyter Notebook looks cool running locally on my Red Hat Linux workstation, but how does the presentation look? It looks like a normal presentation.
I’m not sure what package Erin is using, but I did find several packages that you can use to show a Jupyter Notebook as a presentation. The Jupyter project offers nbconvert to convert the notebook to other formats including Reveal JS, HTML, PDF, Markdown.
jupyter2slides is based on Reveal.js and looks fantastic. The slides can also be outputted as PDF for decktape. Another package is nbpresent.
I decided to check out nbconvert. It wasn’t installed on my system, but it was painless to install with pip.
$ pip install nbconvert
Collecting nbconvert
Downloading nbconvert-5.3.1-py2.py3-none-any.whl (387kB)
100% |████████████████████████████████| 389kB 1.2MB/s
Collecting entrypoints>=0.2.2 (from nbconvert)
Downloading entrypoints-0.2.3-py2.py3-none-any.whl
Collecting jinja2 (from nbconvert)
Downloading Jinja2-2.10-py2.py3-none-any.whl (126kB)
100% |████████████████████████████████| 133kB 2.1MB/s
After nbconvert was installed, I converted it to slides.
$ jupyter nbconvert --to slides HoorayForArrays.ipynb
[NbConvertApp] Converting notebook HoorayForArrays.ipynb to slides
[NbConvertApp] Writing 324270 bytes to HoorayForArrays.slides.html
The output options are: 'asciidoc', 'custom', 'html', 'latex', 'markdown', 'notebook', 'pdf', 'python', 'rst', 'script', 'slides'.
In order to get the slides to display properly, I also needed to install reveal.js.
$ git clone https://github.com/hakimel/reveal.js.git
Cloning into 'reveal.js'...
remote: Counting objects: 10104, done.
remote: Total 10104 (delta 0), reused 0 (delta 0), pack-reused 10103
Receiving objects: 100% (10104/10104), 7.52 MiB | 130.00 KiB/s, done.
Resolving deltas: 100% (5559/5559), done.
As a test, I created my own notebook and experimented with the use of pictures.
Summary
Jupyter Notebooks are a great way to collaborate and share information. With a few extra tools, they are also great for teaching and presentations. The interactive code features of Jupyter Notebooks make your presentations or reports more valuable to other developers. It’s free, open source, and fun. Give it a try.
Erin will be presenting at Index SF (Feb 20-22) in San Francisco as part of the Community Day events for Open API Initiative.
