examples/History.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "9244ed0e-4edf-44f6-ab40-23d1ac7bb138",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "# A Brief History of Presenting with Jupyter\n",
    "\n",
    "> [Back to the main Deck](./README.ipynb#Documents)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c65149b8-19bd-49d2-93b6-2b9cf426d2f1",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "> **Note**\n",
    "> \n",
    "> Before we go any further, **PRETTY PLEASE**\n",
    "> - <kbd>f11</kbd> to view full-screen\n",
    "> - <kbd>ctrl+</kbd> up to something comfortable to you (maybe around 200%)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a588f617-29f9-43e2-9e32-decc24fff11f",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## What's the Problem?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "efb4c977-9e95-4027-a2ee-e65a002f4eb6",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- presenting from a **vanilla** Jupyter UI is often **distracting** for the audience...\n",
    "  - as a tool for _interactive computing_, it has many buttons and unfamiliar words\n",
    "  - as a tool for _publishing_, it has many options"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "27bf6c3a-e5a0-4b1a-afe2-2091acb57251",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- ... often made worse by **content** choices...\n",
    "  - **walls of text**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d15ceb78-b0e8-4859-a157-043864c613f5",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- and **presenter** choices...\n",
    "  - leaving browser/OS chrome visible\n",
    "  - using small **font sizes**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0e5e171c-6eb3-4071-a519-44d658360dde",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Notebooks as Static Slides"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f25c8f59-8cf7-419f-a06c-f6533dd21ada",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "> `nbconvert 4.0` added a `reveal.js` template for turning notebooks into **static but navigable** HTML representations"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "99a57a36-cc3b-4fb7-9b30-1b52a91839d7",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- ...and more or less **forces** some content **discipline**\n",
    "  - extra-long content just **can't be seen**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d53932c7-0b7b-46f0-bb29-630b63ccd5b0",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- ... `nbviewer` adopted this output (and more), making it easier to provide a single, predictable link to a notebook-as-slides"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2d3acc43-850a-4843-9782-138f8977aca0",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- this normalized (and to an extent, calcified) the `slide_type` metadata...\n",
    "  > _though it's **still** not part of the official Jupyter Notebook JSON Schema_"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c65e1809-7450-40ac-ab2f-13fd1ff603b1",
   "metadata": {},
   "source": [
    "> ### But it was still **static HTML**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2f855075-84f1-4ad5-95d0-4004417b0415",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Slides as Notebooks\n",
    "\n",
    "> Inverting the equation, where notebooks are **authored**, or a least **edited**, in a slide view might yield better content"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c32b42c6-8b83-41e4-beda-974a1b320f76",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### <i class=\"fa fa-bar-chart\"></i> RISE\n",
    "\n",
    "> `RISE` built on the `nbconvert` metadata, allowing inline **editing** and **execution**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2f849814-68e2-49f6-92d0-86dd24d4bcde",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- this works great for notebooks in full Jupyter environments like **Binder**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2932ec42-4481-438a-8ccc-b657e8112c17",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- **however**, `reveal.js` (and therefore `RISE`) have **extremely opinionated** CSS and DOM\n",
    "  - this made many other notebook extensions hard to use\n",
    "  - these have been hard to adapt to the multi-document JupyterLab UI"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4d66378f-9172-4e45-a8ca-2503a56462f8",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### <i class=\"fa fa-gift\"></i> `nbpresent`\n",
    "\n",
    "> `nbpresent` went _way_ off the beaten path, offering extensive **layout** and **theme** options"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8844ded6-243b-4298-807d-5953f1be17be",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- while somewhat compatible with `nbconvert`'s metadata, its more advanced features required unique metadata"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fabe8dfe-a1a3-4847-b137-19050e8887ed",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- it could build some [pretty cool demos](https://bl.ocks.org/bollwyvl/raw/00f85276fbd9b36e2868cfe74bbc788e/?raw=true)..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6b5e5bf2-e29d-4b09-b984-60d502404514",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- ... but has now been abandoned"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6a10e9b1-b4c1-4f82-a94d-71663dacd065",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Posters in JupyterLab\n",
    "\n",
    "> _Computational posters_ offer a complementary medium to slide-based presentations."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eee036ed-6002-4f20-b0aa-9ec1b6c8b6af",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### `jupyterlab-drawio`\n",
    "\n",
    "> `jupyterlab-drawio` demonstrated a direct embedding of the core `mxgraph` editor inside JupyterLab."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6a4b3a40-d875-4ec8-8708-9a4e358b963e",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- it is embedded directly in the JupyterLab app and DOM, presenting...\n",
    "  - **opportunities**, with full access to the underlying model of the diagram\n",
    "  - **challenges**, in managing two application frameworks that don't like to be embedded"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "adbeed2c-6cab-4d18-9d56-05e41351475f",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- as `mxgraph` is not packaged, it is basically a fork of several thousand files"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e328dc03-aba7-4c51-804f-fd163f29cfce",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- has not adopted the multi-page document format of `drawio`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f44ac6b1-5fc2-4e07-bf8a-2ea65652aaaf",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### `ipydrawio`\n",
    "\n",
    "> `ipydrawio` began as a series of PRs to `jupyterlab-drawio`, but became a \"hard\" fork"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1420e90e-e916-403a-b555-aea01acbbe4f",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- at run time, embeds `draw.io` in an IFrame and the (somewhat) documented JSON API to communicate"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a7d4b598-cff7-4560-b6fd-d4932558af73",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- at build time, includes the full `draw.io` component as a submodule with _light_ patches\n",
    "  - including 50 Mb of **stencils** and **templates**\n",
    "  - another copy of **MathJax**, **MermaidJS**, etc."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3e6e8b85-7063-4197-aa16-cfe5b84888b2",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- works with _many_ file types, including an embedding inside the Notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ee94f2a9-f686-437a-862f-7a6de37cc8eb",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## jupyterlab-deck\n",
    "\n",
    "> `jupyterlab-deck` is an attempt to combine..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a28528f2-35b6-4c49-a845-3ce018619533",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- the **author**-focused, multiple-document workflow of JupyterLab\n",
    "  - and its ecosystem of **composable** extensions, like `ipydrawio`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "51f000fd-597c-4e36-a65f-660ccf385c90",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- a **light** touch on style\n",
    "  - and leaving the rest to **themes** and other **plugins** like `jupyterlab-fonts`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bb79f4f0-de3e-4e1e-9443-e91bd83fc864",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- the **audience**-focused aesthetic of `RISE`\n",
    "  - and much of its **metadata**, without the `reveal.js` dependency"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9d6e5452-82eb-4821-aa7b-a9f8302d7f72",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Thanks!\n",
    "\n",
    "> **Hint**\n",
    ">\n",
    "> [Back to the main Deck](./README.ipynb#Documents)\n",
    "\n",
    "... or learn more, below..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "845ad4e1-e133-459f-9220-9ce0d6415f3a",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "## Learn More\n",
    "\n",
    "- [`nbconvert`](https://nbconvert.readthedocs.io/en/latest/usage.html#convert-revealjs)\n",
    "- [`nbviewer`](https://github.com/jupyter/nbviewer)\n",
    "- [RISE](https://github.com/damianavila/RISE)\n",
    "- [`nbpresent`](https://github.com/anaconda-platform/nbpresent)\n",
    "- [`mxgraph`](https://github.com/jgraph/mxgraph)\n",
    "- [`jupyterlab-drawio`](https://github.com/QuantStack/jupyterlab-drawio)\n",
    "- [`drawio`](https://github.com/jgraph/drawio)\n",
    "- [`ipydrawio`](https://github.com/deathbeds/ipydrawio)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.11.5"
  },
  "toc-autonumbering": true
 },
 "nbformat": 4,
 "nbformat_minor": 5
}