presentation.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Prototyping for Geologists\n",
    "## Wesley Banfield"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "from IPython.display import HTML, IFrame"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "bd1 = '''\n",
    "<!DOCTYPE html>\n",
    "<meta charset=\"utf-8\">\n",
    "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
    "<script src=\"cmx.js\" charset=\"utf-8\"></script>\n",
    "<style>.cmx-scene {font-size: 20px}</style>\n",
    "<body>\n",
    "  <div style=\"-webkit-transform:rotate(0deg)\">\n",
    "\n",
    "    <scene id=\"scene1\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
    "      <label pose=\"0,-10|23,446\">\n",
    "        <tspan x=\"0\" y=\"0em\">The Beginning</tspan>\n",
    "      </label>\n",
    "      <drawing t=\"translate(0,31)\">\n",
    "        <line stroke=\"green\">\n",
    "          <point x=\"0\" y=\"0\"></point>\n",
    "          <point x=\"350\" y=\"20\"></point>\n",
    "        </line>\n",
    "      </drawing>\n",
    "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|0,125\">\n",
    "        <bubble t=\"translate(9,11) rotate(6)\" pose=\"28,7|8,17|-53,56|79,148|39,227|-39,175\">\n",
    "          <tspan x=\"0\" y=\"-3em\" fill=\"red\">I had an idea today</tspan>\n",
    "          <tspan x=\"0\" y=\"2em\">What if ....</tspan>\n",
    "          <tspan x=\"0\" y=\"6em\">#!*#!!#!*&amp;&amp;</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|61,37|61,7|76,32|81,7|66,77|61,57|81,77|81,57\">\n",
    "        <bubble t=\"translate(-2,-9) rotate(-3)\" pose=\"0,0|-14,24|-36,69|45,138|26,182|-42,230\">\n",
    "          <tspan x=\"0\" y=\"0em\">Oh No</tspan>\n",
    "          <tspan x=\"0\" y=\"1em\">here we go</tspan>\n",
    "          <tspan x=\"0\" y=\"2em\">again ...</tspan>\n",
    "          <tspan x=\"0\" y=\"5em\">Great I'll </tspan>\n",
    "          <tspan x=\"0\" y=\"6em\">write a script</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "    </scene>\n",
    "\n",
    "    <scene id=\"scene2\" height=\"450px\" width=\"350px\">\n",
    "      <drawing t=\"translate(0,31)\">\n",
    "        <line stroke=\"green\">\n",
    "          <point x=\"0\" y=\"0\"></point>\n",
    "          <point x=\"350\" y=\"20\"></point>\n",
    "        </line>\n",
    "      </drawing>\n",
    "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83\">\n",
    "        <bubble t=\"translate(-4,-5) rotate(2)\" pose=\"0,0|-12,22|-46,61|62,83|9,152|-51,120\">\n",
    "          <tspan x=\"0\" y=\"-2em\">What's Python?'\n",
    "        </tspan></bubble>\n",
    "      </actor>\n",
    "      <actor t=\"translate(159,15)\" pose=\"99,15|101,123|99,105|99,95|99,85|99,65|89,45|84,15|104,40|109,15|94,85|89,65|109,85|109,65\">\n",
    "        <bubble t=\"translate(-2,-9)\" pose=\"0,0|7,33|63,83|-92,98|-43,218|-121,286\">\n",
    "          <tspan x=\"0\" y=\"1em\">All done you just</tspan>\n",
    "          <tspan x=\"0\" y=\"2em\">need to run</tspan>\n",
    "          <tspan x=\"0\" y=\"3em\">python cool_app.py</tspan>\n",
    "          <tspan x=\"0\" y=\"10em\">.... This is going</tspan>\n",
    "          <tspan x=\"0\" y=\"11em\">to take a while</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "    </scene>\n",
    "    \n",
    "    \n",
    "\n",
    "  </div></body>\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "hide_input": true,
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<!DOCTYPE html>\n",
       "<meta charset=\"utf-8\">\n",
       "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
       "<script src=\"cmx.js\" charset=\"utf-8\"></script>\n",
       "<style>.cmx-scene {font-size: 20px}</style>\n",
       "<body>\n",
       "  <div style=\"-webkit-transform:rotate(0deg)\">\n",
       "\n",
       "    <scene id=\"scene1\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
       "      <label pose=\"0,-10|23,446\">\n",
       "        <tspan x=\"0\" y=\"0em\">The Beginning</tspan>\n",
       "      </label>\n",
       "      <drawing t=\"translate(0,31)\">\n",
       "        <line stroke=\"green\">\n",
       "          <point x=\"0\" y=\"0\"></point>\n",
       "          <point x=\"350\" y=\"20\"></point>\n",
       "        </line>\n",
       "      </drawing>\n",
       "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|0,125\">\n",
       "        <bubble t=\"translate(9,11) rotate(6)\" pose=\"28,7|8,17|-53,56|79,148|39,227|-39,175\">\n",
       "          <tspan x=\"0\" y=\"-3em\" fill=\"red\">I had an idea today</tspan>\n",
       "          <tspan x=\"0\" y=\"2em\">What if ....</tspan>\n",
       "          <tspan x=\"0\" y=\"6em\">#!*#!!#!*&amp;&amp;</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|61,37|61,7|76,32|81,7|66,77|61,57|81,77|81,57\">\n",
       "        <bubble t=\"translate(-2,-9) rotate(-3)\" pose=\"0,0|-14,24|-36,69|45,138|26,182|-42,230\">\n",
       "          <tspan x=\"0\" y=\"0em\">Oh No</tspan>\n",
       "          <tspan x=\"0\" y=\"1em\">here we go</tspan>\n",
       "          <tspan x=\"0\" y=\"2em\">again ...</tspan>\n",
       "          <tspan x=\"0\" y=\"5em\">Great I'll </tspan>\n",
       "          <tspan x=\"0\" y=\"6em\">write a script</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "    </scene>\n",
       "\n",
       "    <scene id=\"scene2\" height=\"450px\" width=\"350px\">\n",
       "      <drawing t=\"translate(0,31)\">\n",
       "        <line stroke=\"green\">\n",
       "          <point x=\"0\" y=\"0\"></point>\n",
       "          <point x=\"350\" y=\"20\"></point>\n",
       "        </line>\n",
       "      </drawing>\n",
       "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83\">\n",
       "        <bubble t=\"translate(-4,-5) rotate(2)\" pose=\"0,0|-12,22|-46,61|62,83|9,152|-51,120\">\n",
       "          <tspan x=\"0\" y=\"-2em\">What's Python?'\n",
       "        </tspan></bubble>\n",
       "      </actor>\n",
       "      <actor t=\"translate(159,15)\" pose=\"99,15|101,123|99,105|99,95|99,85|99,65|89,45|84,15|104,40|109,15|94,85|89,65|109,85|109,65\">\n",
       "        <bubble t=\"translate(-2,-9)\" pose=\"0,0|7,33|63,83|-92,98|-43,218|-121,286\">\n",
       "          <tspan x=\"0\" y=\"1em\">All done you just</tspan>\n",
       "          <tspan x=\"0\" y=\"2em\">need to run</tspan>\n",
       "          <tspan x=\"0\" y=\"3em\">python cool_app.py</tspan>\n",
       "          <tspan x=\"0\" y=\"10em\">.... This is going</tspan>\n",
       "          <tspan x=\"0\" y=\"11em\">to take a while</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "    </scene>\n",
       "    \n",
       "    \n",
       "\n",
       "  </div></body>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(bd1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Virtual Environments\n",
    "\n",
    "- Anaconda \n",
    "- Docker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "bd2 = '''\n",
    "<!DOCTYPE html>\n",
    "<meta charset=\"utf-8\">\n",
    "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
    "\n",
    "<style>.cmx-scene {font-size: 20px}</style>\n",
    "<body>\n",
    "  <div style=\"-webkit-transform:rotate(0deg)\">\n",
    "   \n",
    "    <scene id=\"scene3\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
    "      <label pose=\"0,-10|18,444\">\n",
    "        <tspan x=\"0\" y=\"0em\">5 Projects Later</tspan>\n",
    "      </label>\n",
    "      <drawing t=\"translate(0,31)\">\n",
    "        <line stroke=\"green\">\n",
    "          <point x=\"0\" y=\"0\"></point>\n",
    "          <point x=\"350\" y=\"20\"></point>\n",
    "        </line>\n",
    "      </drawing>\n",
    "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|25,105\">\n",
    "        <bubble t=\"translate(9,11) rotate(1)\" pose=\"28,7|8,17|72,106|-73,174|-13,259|-71,210\">\n",
    "          <tspan x=\"0\" y=\"-3em\">Everything is broken</tspan>\n",
    "          <tspan x=\"0\" y=\"1em\">I get </tspan>\n",
    "          <tspan x=\"0\" y=\"2em\">AttributeError:...</tspan>\n",
    "          <tspan x=\"0\" y=\"10em\">A what?!?!</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|61,37|61,7|76,32|81,7|66,77|61,57|81,77|81,57\">\n",
    "        <bubble t=\"translate(-2,-9) rotate(-2)\" pose=\"0,0|-14,24|-59,111|85,136|20,222|-92,262\">\n",
    "          <tspan x=\"0\" y=\"0em\">Oh No here </tspan>\n",
    "          <tspan x=\"0\" y=\"1em\">we go again ...</tspan>\n",
    "          <tspan x=\"0\" y=\"5em\">That sounds like a</tspan>\n",
    "          <tspan x=\"0\" y=\"6em\">libraries mismatch</tspan>\n",
    "          <tspan x=\"0\" y=\"8em\">Did you use a</tspan>\n",
    "          <tspan x=\"0\" y=\"9em\">virtual</tspan>\n",
    "          <tspan x=\"0\" y=\"10em\">environment?</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "    </scene>   \n",
    "    \n",
    "\n",
    "  </div></body>'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<!DOCTYPE html>\n",
       "<meta charset=\"utf-8\">\n",
       "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
       "\n",
       "<style>.cmx-scene {font-size: 20px}</style>\n",
       "<body>\n",
       "  <div style=\"-webkit-transform:rotate(0deg)\">\n",
       "   \n",
       "    <scene id=\"scene3\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
       "      <label pose=\"0,-10|18,444\">\n",
       "        <tspan x=\"0\" y=\"0em\">5 Projects Later</tspan>\n",
       "      </label>\n",
       "      <drawing t=\"translate(0,31)\">\n",
       "        <line stroke=\"green\">\n",
       "          <point x=\"0\" y=\"0\"></point>\n",
       "          <point x=\"350\" y=\"20\"></point>\n",
       "        </line>\n",
       "      </drawing>\n",
       "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|25,105\">\n",
       "        <bubble t=\"translate(9,11) rotate(1)\" pose=\"28,7|8,17|72,106|-73,174|-13,259|-71,210\">\n",
       "          <tspan x=\"0\" y=\"-3em\">Everything is broken</tspan>\n",
       "          <tspan x=\"0\" y=\"1em\">I get </tspan>\n",
       "          <tspan x=\"0\" y=\"2em\">AttributeError:...</tspan>\n",
       "          <tspan x=\"0\" y=\"10em\">A what?!?!</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|61,37|61,7|76,32|81,7|66,77|61,57|81,77|81,57\">\n",
       "        <bubble t=\"translate(-2,-9) rotate(-2)\" pose=\"0,0|-14,24|-59,111|85,136|20,222|-92,262\">\n",
       "          <tspan x=\"0\" y=\"0em\">Oh No here </tspan>\n",
       "          <tspan x=\"0\" y=\"1em\">we go again ...</tspan>\n",
       "          <tspan x=\"0\" y=\"5em\">That sounds like a</tspan>\n",
       "          <tspan x=\"0\" y=\"6em\">libraries mismatch</tspan>\n",
       "          <tspan x=\"0\" y=\"8em\">Did you use a</tspan>\n",
       "          <tspan x=\"0\" y=\"9em\">virtual</tspan>\n",
       "          <tspan x=\"0\" y=\"10em\">environment?</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "    </scene>   \n",
       "    \n",
       "\n",
       "  </div></body>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(bd2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "pro_cons = ''' <table style=\"width:100%; font-size: 20px\">\n",
    "  <tr>\n",
    "    <th style=\"color: green;\">Pros</th>\n",
    "    <th style=\"color: red;\">Cons</th>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Separation</td>\n",
    "    <td>Installation</td>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>~UI for managing envs</td>\n",
    "    <td>Complicated for non dev</td>\n",
    "  </tr>\n",
    "</table> '''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       " <table style=\"width:100%; font-size: 20px\">\n",
       "  <tr>\n",
       "    <th style=\"color: green;\">Pros</th>\n",
       "    <th style=\"color: red;\">Cons</th>\n",
       "  </tr>\n",
       "  <tr>\n",
       "    <td>Separation</td>\n",
       "    <td>Installation</td>\n",
       "  </tr>\n",
       "  <tr>\n",
       "    <td>~UI for managing envs</td>\n",
       "    <td>Complicated for non dev</td>\n",
       "  </tr>\n",
       "</table> "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(pro_cons)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Local Web Server\n",
    "\n",
    "- Jupyter / Voila\n",
    "- ..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "bd3 = '''\n",
    "<!DOCTYPE html>\n",
    "<meta charset=\"utf-8\">\n",
    "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
    "<style>.cmx-scene {font-size: 20px}</style>\n",
    "<body>\n",
    "  <div style=\"-webkit-transform:rotate(0deg)\">   \n",
    "   <scene id=\"scene4\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
    "      <label pose=\"0,-10|18,444\">\n",
    "        <tspan x=\"0\" y=\"0em\">3 Geos Later</tspan>\n",
    "      </label>\n",
    "      <drawing t=\"translate(0,31)\">\n",
    "        <line stroke=\"green\">\n",
    "          <point x=\"0\" y=\"0\"></point>\n",
    "          <point x=\"350\" y=\"20\"></point>\n",
    "        </line>\n",
    "      </drawing>\n",
    "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|25,105\">\n",
    "        <bubble t=\"translate(9,11) rotate(1)\" pose=\"28,7|8,17|25,62|-37,89|-15,161|-57,265\">\n",
    "          <tspan x=\"0\" y=\"4em\">As long</tspan>\n",
    "          <tspan x=\"0\" y=\"5em\">it works</tspan>\n",
    "          <tspan x=\"0\" y=\"7em\">what port again??</tspan>\n",
    "          <tspan x=\"0\" y=\"9em\">uhh did you switch</tspan>\n",
    "          <tspan x=\"0\" y=\"10em\">your machine off</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|92,37|92,7|68,38|66,12|90,81|101,63|59,77|75,67\">\n",
    "        <bubble t=\"translate(-2,-9) rotate(-2)\" pose=\"0,0|29,33|104,83|-83,172|-4,239|-98,290\">\n",
    "          <tspan x=\"0\" y=\"0em\">Rrrr</tspan>\n",
    "          <tspan x=\"0\" y=\"1em\">I'll spin up a</tspan>\n",
    "          <tspan x=\"0\" y=\"2em\">local web server</tspan>\n",
    "          <tspan x=\"0\" y=\"3em\">just connect to ...</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "    </scene>\n",
    "  </div></body>'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<!DOCTYPE html>\n",
       "<meta charset=\"utf-8\">\n",
       "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
       "<style>.cmx-scene {font-size: 20px}</style>\n",
       "<body>\n",
       "  <div style=\"-webkit-transform:rotate(0deg)\">   \n",
       "   <scene id=\"scene4\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
       "      <label pose=\"0,-10|18,444\">\n",
       "        <tspan x=\"0\" y=\"0em\">3 Geos Later</tspan>\n",
       "      </label>\n",
       "      <drawing t=\"translate(0,31)\">\n",
       "        <line stroke=\"green\">\n",
       "          <point x=\"0\" y=\"0\"></point>\n",
       "          <point x=\"350\" y=\"20\"></point>\n",
       "        </line>\n",
       "      </drawing>\n",
       "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|25,105\">\n",
       "        <bubble t=\"translate(9,11) rotate(1)\" pose=\"28,7|8,17|25,62|-37,89|-15,161|-57,265\">\n",
       "          <tspan x=\"0\" y=\"4em\">As long</tspan>\n",
       "          <tspan x=\"0\" y=\"5em\">it works</tspan>\n",
       "          <tspan x=\"0\" y=\"7em\">what port again??</tspan>\n",
       "          <tspan x=\"0\" y=\"9em\">uhh did you switch</tspan>\n",
       "          <tspan x=\"0\" y=\"10em\">your machine off</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|92,37|92,7|68,38|66,12|90,81|101,63|59,77|75,67\">\n",
       "        <bubble t=\"translate(-2,-9) rotate(-2)\" pose=\"0,0|29,33|104,83|-83,172|-4,239|-98,290\">\n",
       "          <tspan x=\"0\" y=\"0em\">Rrrr</tspan>\n",
       "          <tspan x=\"0\" y=\"1em\">I'll spin up a</tspan>\n",
       "          <tspan x=\"0\" y=\"2em\">local web server</tspan>\n",
       "          <tspan x=\"0\" y=\"3em\">just connect to ...</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "    </scene>\n",
       "  </div></body>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(bd3)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "pro_cons = ''' <table style=\"width:100%; font-size: 20px\">\n",
    "  <tr>\n",
    "    <th style=\"color: green;\">Pros</th>\n",
    "    <th style=\"color: red;\">Cons</th>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>No Install</td>\n",
    "    <td>Know ports / Reverse proxy</td>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Easier Deploy</td>\n",
    "    <td>Relies on network and machine being on</td>\n",
    "  </tr>\n",
    "</table> '''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       " <table style=\"width:100%; font-size: 20px\">\n",
       "  <tr>\n",
       "    <th style=\"color: green;\">Pros</th>\n",
       "    <th style=\"color: red;\">Cons</th>\n",
       "  </tr>\n",
       "  <tr>\n",
       "    <td>No Install</td>\n",
       "    <td>Know ports / Reverse proxy</td>\n",
       "  </tr>\n",
       "  <tr>\n",
       "    <td>Easier Deploy</td>\n",
       "    <td>Relies on network and machine being on</td>\n",
       "  </tr>\n",
       "</table> "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(pro_cons)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Portainer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "bd4 = '''\n",
    "<!DOCTYPE html>\n",
    "<meta charset=\"utf-8\">\n",
    "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
    "<style>.cmx-scene {font-size: 20px}</style>\n",
    "<body>\n",
    "  <div style=\"-webkit-transform:rotate(0deg)\">\n",
    "  \n",
    "    <scene id=\"scene5\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
    "      <label pose=\"0,-10|18,444\">\n",
    "        <tspan x=\"0\" y=\"0em\">The end</tspan>\n",
    "      </label>\n",
    "      <drawing t=\"translate(0,31)\">\n",
    "        <line stroke=\"green\">\n",
    "          <point x=\"0\" y=\"0\"></point>\n",
    "          <point x=\"350\" y=\"20\"></point>\n",
    "        </line>\n",
    "      </drawing>\n",
    "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|25,105\">\n",
    "        <bubble t=\"translate(9,11) rotate(1)\" pose=\"28,7|8,17|34,54|-1,39|1,86|-11,92\">\n",
    "          <tspan x=\"0\" y=\"0em\">Yay!!!</tspan>\n",
    "        </bubble>\n",
    "      </actor>\n",
    "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|61,37|61,7|76,32|81,7|66,77|61,57|81,77|81,57\">\n",
    "        <bubble t=\"translate(-2,-9)\" pose=\"0,0|-14,24|-59,111|85,136|20,222|-110,283\">\n",
    "          <tspan x=\"0\" y=\"0em\">Right just connect</tspan>\n",
    "          <tspan x=\"0\" y=\"1em\">to the local server</tspan>\n",
    "          <tspan x=\"0\" y=\"2em\">and choose the app</tspan>\n",
    "          <tspan x=\"0\" y=\"3em\">you want through</tspan>\n",
    "          <tspan x=\"0\" y=\"4em\">this nice UI</tspan>\n",
    "\n",
    "        </bubble>\n",
    "      </actor>\n",
    "    </scene>\n",
    "    \n",
    "    \n",
    "\n",
    "  </div></body>\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<!DOCTYPE html>\n",
       "<meta charset=\"utf-8\">\n",
       "<link rel=\"stylesheet\" href=\"http://cmx.io/v/0.1/cmx.css\">\n",
       "<style>.cmx-scene {font-size: 20px}</style>\n",
       "<body>\n",
       "  <div style=\"-webkit-transform:rotate(0deg)\">\n",
       "  \n",
       "    <scene id=\"scene5\" ,=\"\" height=\"450px,\" width=\"350px\">\n",
       "      <label pose=\"0,-10|18,444\">\n",
       "        <tspan x=\"0\" y=\"0em\">The end</tspan>\n",
       "      </label>\n",
       "      <drawing t=\"translate(0,31)\">\n",
       "        <line stroke=\"green\">\n",
       "          <point x=\"0\" y=\"0\"></point>\n",
       "          <point x=\"350\" y=\"20\"></point>\n",
       "        </line>\n",
       "      </drawing>\n",
       "      <actor t=\"translate(71,19) rotate(-2)\" pose=\"-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|10,85|25,105\">\n",
       "        <bubble t=\"translate(9,11) rotate(1)\" pose=\"28,7|8,17|34,54|-1,39|1,86|-11,92\">\n",
       "          <tspan x=\"0\" y=\"0em\">Yay!!!</tspan>\n",
       "        </bubble>\n",
       "      </actor>\n",
       "      <actor t=\"translate(159,15)\" pose=\"71,7|73,115|71,97|71,87|71,77|71,57|61,37|61,7|76,32|81,7|66,77|61,57|81,77|81,57\">\n",
       "        <bubble t=\"translate(-2,-9)\" pose=\"0,0|-14,24|-59,111|85,136|20,222|-110,283\">\n",
       "          <tspan x=\"0\" y=\"0em\">Right just connect</tspan>\n",
       "          <tspan x=\"0\" y=\"1em\">to the local server</tspan>\n",
       "          <tspan x=\"0\" y=\"2em\">and choose the app</tspan>\n",
       "          <tspan x=\"0\" y=\"3em\">you want through</tspan>\n",
       "          <tspan x=\"0\" y=\"4em\">this nice UI</tspan>\n",
       "\n",
       "        </bubble>\n",
       "      </actor>\n",
       "    </scene>\n",
       "    \n",
       "    \n",
       "\n",
       "  </div></body>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(bd4)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"1000\"\n",
       "            height=\"700\"\n",
       "            src=\"http://localhost:9000/#/home\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x7f680c169a00>"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "IFrame('http://localhost:9000/#/home', 1000, 700)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "pro_cons = ''' <table style=\"width:100%; font-size: 20px\">\n",
    "  <tr>\n",
    "    <th style=\"color: green;\">Pros</th>\n",
    "    <th style=\"color: red;\">Cons</th>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Deployable anywhere</td>\n",
    "    <td></td>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Container Lookup</td>\n",
    "  </tr>\n",
    "</table> '''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       " <table style=\"width:100%; font-size: 20px\">\n",
       "  <tr>\n",
       "    <th style=\"color: green;\">Pros</th>\n",
       "    <th style=\"color: red;\">Cons</th>\n",
       "  </tr>\n",
       "  <tr>\n",
       "    <td>Deployable anywhere</td>\n",
       "    <td></td>\n",
       "  </tr>\n",
       "  <tr>\n",
       "    <td>Container Lookup</td>\n",
       "  </tr>\n",
       "</table> "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(pro_cons)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Resources\n",
    "\n",
    "- Slides / Repo : https://github.com/WesleyTheGeolien/t20-lightining-talk\n",
    "- Comics : http://cmx.io/\n",
    "- Portainer: https://www.portainer.io/\n",
    "\n",
    "\n",
    "- Docker: https://www.docker.com/\n",
    "- Anaconda: https://www.anaconda.com/\n",
    "- Jupyter: https://jupyter.org/\n",
    "\n",
    "- Linkedin Article: https://www.linkedin.com/pulse/building-prototyping-framework-wesley-banfield/?trackingId=Q6YU2ZFilRYxZojWCdxAhQ%3D%3D"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python (simpeg)",
   "language": "python",
   "name": "jupyter"
  },
  "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.8.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}