presentation.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Twirkshop"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "### a Twilio Workshop"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Me"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Devloper, Educator, Developer Educator"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "You can find me around Internettown as craigsdennis"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "And...you're hiring 👋"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## What's In It For You?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "> \"...teach a small group of technical people a technical skill of some kind.\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## What's In It For You?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "> \"This is where we get to know you as a teacher and witness your ability to break down technical concepts into something your fellow developers can understand...we'd like to see how you approach things.\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## I Love to Experiment"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Shows"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Improv Workshops"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Fun is crucial"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Enter Analysis Paralysis"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "I can teach anything in any format for any amount of time"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Whatever I pick I'm for sure gonna use a **Jupyter Notebook**."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Hey...wait a second..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## So Let's Get a Little Meta"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Let's walk through different features of the Jupyter Project"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Discuss how they work for various teaching styles. Like this one."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Believe It or Not"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "You're looking at a notebook right now"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Jupyter Notebooks can be exported. One format is [Reveal.js](https://revealjs.com) slideshows"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Reveal.js\n",
    "\n",
    "A powerful open source JavaScript based presentation application"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### You Can Dive Deeper"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "When you need to"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Like one of those Choose Your Own Adventure books"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### Tons of Features"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Rich plugins and custom styling"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Configurable hotkeys"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "Show help"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Presenter Notes (_hotkey T_)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "Discuss 🌮and 🌯"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Project Jupyter"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "It's not spelled wrong"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "**Ju**lia **Pyt**hon and **R**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Whatever"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Jupyter Notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Web based application"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Narrate, execute, and display results"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "There are various **kernels** that handle the interactive code "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Python Kernel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "122"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "1 + 121"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Imagine You Haven't Seen This Before"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "This is making use of the powerful [Python List Comprehension](https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['e-scooters',\n",
       " 'e-cigarettes',\n",
       " 'e-bikes',\n",
       " 'e-mail',\n",
       " 'e-ink',\n",
       " 'e-trading',\n",
       " 'e-learning',\n",
       " 'e-sports',\n",
       " 'e-gum',\n",
       " 'e-skateboards',\n",
       " 'e-tattoos']"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ideas = ['scooters', 'cigarettes', 'bikes', 'mail', 'ink', 'trading', 'learning', 'sports',\n",
    "         'eggs', 'gum', 'earning', 'skateboards', 'tattoos']\n",
    "['e-' + idea for idea in ideas if not idea.startswith('e')]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "## Shortcuts\n",
    "* `Ctrl + Enter` executes a Cell\n",
    "* `Alt + Enter` executes a Cell and adds a new blank below\n",
    "* Enter `Command mode` with `esc`\n",
    "* `a` adds a blank cell above and `b` adds a blank cell below\n",
    "* `dd` deletes a Cell\n",
    "* Use arrow keys and `j` and `k`\n",
    "* Switch Cell types with `m` for markdown and `y` for code\n",
    "* Enter `Edit mode` with Enter"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "## Cell Execution Order matters\n",
    "\n",
    "Note the `In [X]` next to each Code Cell. This is the order in which the cell was executed. Use this to see if things are in order as Cells don't execute automatically."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "def hello(name=\"World\"):\n",
    "    print(f\"Hello {name}\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "Now let's edit the `hello` function to have a comma and an exclamation point, and re-execute the cell. Note how we need to re-execute the function to get the change."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello World\n"
     ]
    }
   ],
   "source": [
    "hello()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "## Environments\n",
    "\n",
    "Every Jupyter Notebook has access to environment variables.\n",
    "\n",
    "You can also install Python Packages to your environment, and they will be available.\n",
    "\n",
    "In this example, I use the Python [Twilio API Client](https://pypi.org/project/twilio/).  I installed it into my environment using pip"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The Country code is US and formatted it is (971) 351-3060\n"
     ]
    }
   ],
   "source": [
    "from twilio.base.exceptions import TwilioException\n",
    "from twilio.rest import Client\n",
    "\n",
    "try:\n",
    "    client = Client()\n",
    "    phone_number = client.lookups.phone_numbers('+19713513060').fetch()\n",
    "    print(f'The Country code is {phone_number.country_code} and formatted it is {phone_number.national_format}')\n",
    "except TwilioException as err:\n",
    "    print(\"You might need to set your environment variables. https://www.twilio.com/blog/2017/01/how-to-set-environment-variables.html\")\n",
    "    print(err)\n",
    "          "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "## Better Output\n",
    "\n",
    "Instead of just printing, you can produce very rich content.\n",
    "\n",
    "This ranges from graphs, audio, video and entire web applications."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       ".twilio-app {\n",
       "    border: 3px dashed #F22F46;\n",
       "    color: #0D122B;\n",
       "    padding: 30px;\n",
       "}\n",
       "</style>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "HTML('''\n",
    "<style>\n",
    ".twilio-app {\n",
    "    border: 3px dashed #F22F46;\n",
    "    color: #0D122B;\n",
    "    padding: 30px;\n",
    "}\n",
    "</style>\n",
    "''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "%%html\n",
    "<div class=\"twilio-app\">\n",
    "    <h2>Example Twilio Sync Serverless Application</h2>\n",
    "    <p>Text a good thing to (971) 351-3060</p>\n",
    "    <ul id=\"synced\">\n",
    "    </ul>\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "## JavaScript\n",
    "\n",
    "You can even tap into JavaScript.\n",
    "\n",
    "Jupyter currently uses [require.js](https://requirejs.org/) for module management."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "requirejs.config({\n",
       "    paths: { \n",
       "        'twilioSync': ['//media.twiliocdn.com/sdk/js/sync/releases/0.8.5/twilio-sync.min'], \n",
       "    },                                         // strip .js ^, require adds it back\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "requirejs.config({\n",
    "    paths: { \n",
    "        'twilioSync': ['//media.twiliocdn.com/sdk/js/sync/releases/0.8.5/twilio-sync.min'], \n",
    "    },                                         // strip .js ^, require adds it back\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require(['twilioSync'], function(twilioSync) {\n",
       "    function prependItems(items) {\n",
       "        const el = document.getElementById('synced');\n",
       "        items.forEach(item => {\n",
       "            const li = document.createElement('LI');\n",
       "            li.appendChild(document.createTextNode(item.data.value.body));\n",
       "            el.prepend(li);\n",
       "        });\n",
       "    }\n",
       "    async function syncMessages() {\n",
       "        const response = await fetch('https://quartz-ant-5504.twil.io/sync-token');\n",
       "        const json = await response.json();\n",
       "        const sync = new twilioSync.SyncClient(json.token);\n",
       "        const list = await sync.list('messages');\n",
       "        const page = await list.getItems();\n",
       "        prependItems(page.items);b\n",
       "        list.on('itemAdded', (evt) => prependItems([evt.item]));    \n",
       "    };\n",
       "    syncMessages();\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require(['twilioSync'], function(twilioSync) {\n",
    "    function prependItems(items) {\n",
    "        const el = document.getElementById('synced');\n",
    "        items.forEach(item => {\n",
    "            const li = document.createElement('LI');\n",
    "            li.appendChild(document.createTextNode(item.data.value.body));\n",
    "            el.prepend(li);\n",
    "        });\n",
    "    }\n",
    "    async function syncMessages() {\n",
    "        const response = await fetch('https://quartz-ant-5504.twil.io/sync-token');\n",
    "        const json = await response.json();\n",
    "        const sync = new twilioSync.SyncClient(json.token);\n",
    "        const list = await sync.list('messages');\n",
    "        const page = await list.getItems();\n",
    "        prependItems(page.items);b\n",
    "        list.on('itemAdded', (evt) => prependItems([evt.item]));    \n",
    "    };\n",
    "    syncMessages();\n",
    "});\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "## Sharing\n",
    "\n",
    "You can share notebooks [like this one on GitHub](https://github.com/craigsdennis/twirkshop/blob/master/presentation.ipynb). Because the format of `ipynb` is standard, GitHub uses the html converter.\n",
    "\n",
    "[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/craigsdennis/twirkshop/master?filepath=ebikes.ipynb)\n",
    "\n",
    "And you can even recreate an entire environment using what is known as a Binder. \n",
    "\n",
    "# https://bit.ly/twirkshop\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Learn More\n",
    "\n",
    "* [jupyter4edu](https://jupyter4edu.github.io/jupyter-edu-book/index.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Thanks!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.1"
  },
  "livereveal": {
   "theme": "solarized"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}