2020-prototyping-notebooks/jinja-templates.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Jinja templates"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "marking up plain text!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## What is a Jinja template?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from jinja2 import Template"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# To render HTML in a Jupyter notebook ...\n",
    "from IPython.display import HTML, display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "hello = '<h1>Hello <strong>{{ name }}</strong>!</h1>'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "template = Template(hello)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "\u001b[0;31mSignature:\u001b[0m \u001b[0mtemplate\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mrender\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m*\u001b[0m\u001b[0margs\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
       "\u001b[0;31mDocstring:\u001b[0m\n",
       "This method accepts the same arguments as the `dict` constructor:\n",
       "A dict, a dict subclass or some keyword arguments.  If no arguments\n",
       "are given the context will be empty.  These two calls do the same::\n",
       "\n",
       "    template.render(knights='that say nih')\n",
       "    template.render({'knights': 'that say nih'})\n",
       "\n",
       "This will return the rendered template as unicode string.\n",
       "\u001b[0;31mFile:\u001b[0m      /opt/tljh/user/lib/python3.7/site-packages/jinja2/environment.py\n",
       "\u001b[0;31mType:\u001b[0m      method\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "template.render?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = template.render(name='XPUB1')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<h1>Hello <strong>XPUB1</strong>!</h1>\n"
     ]
    }
   ],
   "source": [
    "# Print it as HTML (Python style)\n",
    "print(html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<h1>Hello <strong>XPUB1</strong>!</h1>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Print it as rendered HTML (Jupyter style)\n",
    "display(HTML(html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "--------------"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Multiple variables within one template"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "welcome = '<h1>Welcome <strong>{{ name }}</strong> here in <strong>{{ location }}</strong> through this <strong>{{ channel }}</strong>!</h1>'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "template = Template(welcome)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "variables = {}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "variables['name'] = 'XPUB1'\n",
    "variables['location'] = 'Rotterdam'\n",
    "variables['channel'] = 'hotline'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = template.render(variables)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<h1>Welcome <strong>XPUB1</strong> here in <strong>Rotterdam</strong> through this <strong>hotline</strong>!</h1>\n"
     ]
    }
   ],
   "source": [
    "# Print it as HTML\n",
    "print(html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<h1>Welcome <strong>XPUB1</strong> here in <strong>Rotterdam</strong> through this <strong>hotline</strong>!</h1>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Print it as rendered HTML\n",
    "display(HTML(html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "------------------------------"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Open templates from a file"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "example_template = open('jinja-templates-example.html', 'r').read()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "template = Template(example_template)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "variables = {}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "variables['title'] = 'A Vernacular Web'\n",
    "variables['summary'] = 'When I started to work on the World Wide Web I made a few nice things that were special, different and fresh. They were very different from what was on the web in the mid 90\\'s.'\n",
    "variables['introduction'] = ''' I'll start with a statement like this, not to show off my contribution, but in order to stress that -- although I consider myself to be an early adopter -- I came late enough to enjoy and prosper from the \"benefits of civilization\". There was a pre-existing environment; a structural, visual and acoustic culture you could play around with, a culture you could break. There was a world of options and one of the options was to be different.\n",
    "\n",
    "So what was this culture? What do we mean by the web of the mid 90's and when did it end?\n",
    "\n",
    "To be blunt it was bright, rich, personal, slow and under construction. It was a web of sudden connections and personal links. Pages were built on the edge of tomorrow, full of hope for a faster connection and a more powerful computer. One could say it was the web of the indigenous...or the barbarians. In any case, it was a web of amateurs soon to be washed away by dot.com ambitions, professional authoring tools and guidelines designed by usability experts.\n",
    "\n",
    "I wrote that change was coming \"soon\" instead of putting an end date at 1998, for example, because there was no sickness, death or burial. The amateur web didn't die and it has not disappeared but it is hidden. Search engine rating mechanisms rank the old amateur pages so low they're almost invisible and institutions don't collect or promote them with the same passion as they pursue net art or web design.\n",
    "\n",
    "Also new amateur pages don't appear at such amounts as ten years ago because the WWW of today is a developed and highly regulated space. You wouldn't get on the web just to tell the world, \"Welcome to my home page.\" The web has diversified, the conditions have changed and there's no need for this sort of old fashioned behavior. Your CV is posted on the company website or on a job search portal. Your diary will be organized on a blog and your vacation photos are published on iphoto. There's a community for every hobby and question.\n",
    "\n",
    "This is why I refer to the amateur web as a thing of the past; aesthetically a very powerful past. Even people who weren't online in the last century, people who look no further than the first 10 search engine results can see the signs and symbols of the early web thanks to the numerous parodies and collections organized by usability experts who use the early elements and styles as negative examples.\n",
    "\n",
    "Just as clothing styles come back into fashion so do web designs. On a visual level things reappear. Last year I noticed that progressive web designers returned to an eclectic style reincorporating wallpapers and 3D lettering in their work. In the near future frames and construction signs will show up as retro and the beautiful old elements will be stripped of their meaning and contexts.\n",
    "\n",
    "In the past few years I've also been making work that foregrounds this disappearing aesthetic of the past. With these works I want to apologize for my arrogance in the early years and to preserve the beauty of the vernacular web by integrating them within contemporary art pieces. But this is only half of the job.\n",
    "\n",
    "Creating collections and archives of all the midi files and animated gifs will preserve them for the future but it is no less important to ask questions. What did these visual, acoustic and navigation elements stand for? For which cultures and media did these serve as a bridge to the web? What ambitions were they serving? What problems did they solve and what problems did they create? Let me talk about the difficult destiny of some of these elements. '''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = template.render(variables)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "<head>\n",
       "    <title>Jinja template example</title>\n",
       "    <style>\n",
       "        body{\n",
       "            background-color:pink;\n",
       "            color:red;\n",
       "            margin: 100px;\n",
       "        }\n",
       "        section#summary{\n",
       "            font-size:150%;\n",
       "            margin-bottom:1em;\n",
       "        }\n",
       "    </style>\n",
       "</head>\n",
       "<body>\n",
       "    <h1>A Vernacular Web</h1>\n",
       "    <img src=\"http://art.teleportacia.org/observation/vernacular/decade/bg01.gif\">\n",
       "    <section id=\"summary\">When I started to work on the World Wide Web I made a few nice things that were special, different and fresh. They were very different from what was on the web in the mid 90's.</section>\n",
       "    <section id=\"intro\"> I'll start with a statement like this, not to show off my contribution, but in order to stress that -- although I consider myself to be an early adopter -- I came late enough to enjoy and prosper from the \"benefits of civilization\". There was a pre-existing environment; a structural, visual and acoustic culture you could play around with, a culture you could break. There was a world of options and one of the options was to be different.\n",
       "\n",
       "So what was this culture? What do we mean by the web of the mid 90's and when did it end?\n",
       "\n",
       "To be blunt it was bright, rich, personal, slow and under construction. It was a web of sudden connections and personal links. Pages were built on the edge of tomorrow, full of hope for a faster connection and a more powerful computer. One could say it was the web of the indigenous...or the barbarians. In any case, it was a web of amateurs soon to be washed away by dot.com ambitions, professional authoring tools and guidelines designed by usability experts.\n",
       "\n",
       "I wrote that change was coming \"soon\" instead of putting an end date at 1998, for example, because there was no sickness, death or burial. The amateur web didn't die and it has not disappeared but it is hidden. Search engine rating mechanisms rank the old amateur pages so low they're almost invisible and institutions don't collect or promote them with the same passion as they pursue net art or web design.\n",
       "\n",
       "Also new amateur pages don't appear at such amounts as ten years ago because the WWW of today is a developed and highly regulated space. You wouldn't get on the web just to tell the world, \"Welcome to my home page.\" The web has diversified, the conditions have changed and there's no need for this sort of old fashioned behavior. Your CV is posted on the company website or on a job search portal. Your diary will be organized on a blog and your vacation photos are published on iphoto. There's a community for every hobby and question.\n",
       "\n",
       "This is why I refer to the amateur web as a thing of the past; aesthetically a very powerful past. Even people who weren't online in the last century, people who look no further than the first 10 search engine results can see the signs and symbols of the early web thanks to the numerous parodies and collections organized by usability experts who use the early elements and styles as negative examples.\n",
       "\n",
       "Just as clothing styles come back into fashion so do web designs. On a visual level things reappear. Last year I noticed that progressive web designers returned to an eclectic style reincorporating wallpapers and 3D lettering in their work. In the near future frames and construction signs will show up as retro and the beautiful old elements will be stripped of their meaning and contexts.\n",
       "\n",
       "In the past few years I've also been making work that foregrounds this disappearing aesthetic of the past. With these works I want to apologize for my arrogance in the early years and to preserve the beauty of the vernacular web by integrating them within contemporary art pieces. But this is only half of the job.\n",
       "\n",
       "Creating collections and archives of all the midi files and animated gifs will preserve them for the future but it is no less important to ask questions. What did these visual, acoustic and navigation elements stand for? For which cultures and media did these serve as a bridge to the web? What ambitions were they serving? What problems did they solve and what problems did they create? Let me talk about the difficult destiny of some of these elements. </section>\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display(HTML(html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "-------------------"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Loops & Conditionals (what if? and else?)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [],
   "source": [
    "names = ['student1', 'student2', 'student3']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [],
   "source": [
    "welcome_all = '''\n",
    "{% for name in names %}\n",
    "    <h1>Welcome <strong>{{ name }}</strong>!\n",
    "{% endfor %}\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "    <h1>Welcome <strong>student1</strong>!\n",
       "\n",
       "    <h1>Welcome <strong>student2</strong>!\n",
       "\n",
       "    <h1>Welcome <strong>student3</strong>!\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "template = Template(welcome_all)\n",
    "html = template.render(names=names)\n",
    "display(HTML(html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "-------------------"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Multiple templates"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}