bearfrieze/slides.css

## slides.css
pre {
  font-size: 1.5rem;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

img {
  width: 100%;
}

## slides.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Comprehensions in Python the Jedi way</title>
  <style type="text/css">
    body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
  font-size: 100%;
}

.slide {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-color: #f7f7f7;
}

.slide-content {
  width: 800px;
  height: 600px;
  overflow: hidden;
  margin: 80px auto 0 auto;
  padding: 30px;

  font-weight: 200;
  font-size: 200%;
  line-height: 1.375;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.arrow {
  width: 0; height: 0;
  border: 30px solid #333;
  float: left;
  margin-right: 30px;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.prev {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;

  border-left-width: 0;
  border-right-width: 50px;
}

.next {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;

  border-left-width: 50px;
  border-right-width: 0;
}

.prev:hover {
  border-right-color: #888;
  cursor: pointer;
}

.next:hover {
  border-left-color: #888;
  cursor: pointer;
}

h1 {
  font-size: 300%;
  line-height: 1.2;
  text-align: center;
  margin: 170px 0 0;
}

h2 {
  font-size: 100%;
  line-height: 1.2;
  margin: 5px 0;
  text-align: center;
  font-weight: 200;
}

h3 {
  font-size: 140%;
  line-height: 1.2;
  border-bottom: 1px solid #aaa;
  margin: 0;
  padding-bottom: 15px;
}

ul {
  padding: 20px 0 0 60px;
  font-weight: 200;
  line-height: 1.375;
}

.author h1 {
  font-size: 170%;
  font-weight: 200;
  text-align: center;
  margin-bottom: 30px;
}

.author h3 {
  font-weight: 100;
  text-align: center;
  font-size: 95%;
  border: none;
}

a {
  text-decoration: none;
  color: #44a4dd;
}

a:hover {
  color: #66b5ff;
}

pre {
  font-size: 60%;
  line-height: 1.3;
}

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.progress-bar {
  width: 0%;
  height: 3px;
  background-color: #b4b4b4;

  -webkit-transition: width 0.05s ease-out;
  -moz-transition: width 0.05s ease-out;
  -o-transition: width 0.05s ease-out;
  transition: width 0.05s ease-out;
}

.hidden {
  display: none;
}

@media (max-width: 850px) {

  body {
    font-size: 70%;
  }

  .slide-content {
    width: auto;
  }

  img {
    width: 100%;
  }

  h1 {
    margin-top: 120px;
  }

  .prev, .prev:hover {
    border-right-color: rgba(135, 135, 135, 0.5);
  }

  .next, .next:hover {
    border-left-color: rgba(135, 135, 135, 0.5);
  }
}

@media (max-width: 480px) {
  body {
    font-size: 50%;
    overflow: hidden;
  }

  .slide-content {
    padding: 10px;
    margin-top: 10px;
    height: 340px;
  }

  h1 {
    margin-top: 50px;
  }

  ul {
    padding-left: 25px;
  }
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  @page {
    size: letter;
  }

  .hidden {
    display: inline;
  }

  html {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  body {
    margin: 0 auto !important;
    border: 0;
    padding: 0;
    float: none !important;
    overflow: visible;
    background: none !important;
    font-size: 52%;
  }

  .progress, .controls {
    display: none;
  }

  .slide {
    position: static;
  }

  .slide-content {
    border: 1px solid #222;
    margin-top: 0;
    margin-bottom: 40px;
    height: 3.5in;
    overflow: visible;
  }

  .slide:nth-child(even) {
    /* 2 slides per page */
    page-break-before: always;
  }
}

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333;
  font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080;
}

.hljs-string,
.hljs-doctag {
  color: #d14;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.hljs-regexp,
.hljs-link {
  color: #009926;
}

.hljs-symbol,
.hljs-bullet {
  color: #990073;
}

.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3;
}

.hljs-meta {
  color: #999;
  font-weight: bold;
}

.hljs-deletion {
  background: #fdd;
}

.hljs-addition {
  background: #dfd;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

pre {
  font-size: 1.5rem;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

img {
  width: 100%;
}

  </style>
</head>
<body>
    <div class="progress">
    <div class="progress-bar"></div>
  </div>

  <div class="slide" id="slide-1">
    <section class="slide-content"><h1 id="comprehensions-in-python-the-jedi-way">Comprehensions in Python the Jedi way</h1>
<h2 id="https-gist-github-com-bearfrieze-a746c6f12d8bada03589"><a href="https://gist.github.com/bearfrieze/a746c6f12d8bada03589">https://gist.github.com/bearfrieze/a746c6f12d8bada03589</a></h2>
</section>
  </div>
  <div class="slide hidden" id="slide-2">
    <section class="slide-content"><h3 id="collections">Collections</h3>
<ul>
<li>Droids</li>
<li>Jedis</li>
<li>Planets</li>
<li>Lightsabers</li>
</ul>
</section>
  </div>
  <div class="slide hidden" id="slide-3">
    <section class="slide-content"><h3 id="data-structures">Data structures</h3>
<ul>
<li>Lists: <code>[a, b, c]</code></li>
<li>Sets: <code>{a, b, c}</code></li>
<li>Dictionaries: <code>{&#39;a&#39;: 1, &#39;b&#39;: 2, &#39;c&#39;: 3}</code></li>
</ul>
</section>
  </div>
  <div class="slide hidden" id="slide-4">
    <section class="slide-content"><p><img src="https://imgur.com/oKCXrwA.gif" alt=""></p>
</section>
  </div>
  <div class="slide hidden" id="slide-5">
    <section class="slide-content"><h3 id="bleeps-and-bloops">Bleeps and bloops</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>bbs = <span class="hljs-string">'01110011001000000110111001101111001000000010000001101001001000000111001101101110001000000110010100100000001000000110100000100000001000000110010100100000011100100010000000100000011100000110110100100000011011110010000001100011'</span></code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-6">
    <section class="slide-content"><h3 id="ascii">ASCII</h3>
<ul>
<li>01000001 ↔ 65 ↔ A</li>
<li>01000010 ↔ 66 ↔ B</li>
<li>01000011 ↔ 67 ↔ C</li>
</ul>
</section>
  </div>
  <div class="slide hidden" id="slide-7">
    <section class="slide-content"><h3 id="list-slicing">List slicing</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>l = [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>l[<span class="hljs-number">1</span>:]
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>l[:<span class="hljs-number">4</span>]
[<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>l[<span class="hljs-number">1</span>:<span class="hljs-number">4</span>]
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>l[<span class="hljs-number">1</span>:<span class="hljs-number">-1</span>]
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-8">
    <section class="slide-content"><h3 id="imperative-approach">Imperative approach</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>octets = []
<span class="hljs-meta">&gt;&gt;&gt; </span><span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, len(bbs), <span class="hljs-number">8</span>):
<span class="hljs-meta">... </span>  octets.append(bbs[i:i+<span class="hljs-number">8</span>])

<span class="hljs-meta">&gt;&gt;&gt; </span>octets
[<span class="hljs-string">'01110011'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101001'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110011'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110010'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110000'</span>, <span class="hljs-string">'01101101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100011'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-9">
    <section class="slide-content"><h3 id="functional-approach">Functional approach</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>list(map(<span class="hljs-keyword">lambda</span> i: bbs[i:i+<span class="hljs-number">8</span>], range(<span class="hljs-number">0</span>, len(bbs), <span class="hljs-number">8</span>)))
[<span class="hljs-string">'01110011'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101001'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110011'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110010'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110000'</span>, <span class="hljs-string">'01101101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100011'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-10">
    <section class="slide-content"><h3 id="the-jedi-way-comprehensions-">The Jedi way (comprehensions)</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>[bbs[i:i+<span class="hljs-number">8</span>] <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, len(bbs), <span class="hljs-number">8</span>)]
[<span class="hljs-string">'01110011'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101001'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110011'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110010'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110000'</span>, <span class="hljs-string">'01101101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100011'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-11">
    <section class="slide-content"><p><img src="https://i.imgur.com/l1L9s0K.gif" alt=""></p>
</section>
  </div>
  <div class="slide hidden" id="slide-12">
    <section class="slide-content"><h3 id="comprehensions">Comprehensions</h3>
<p>Structure:</p>
<pre><code class="lang-python">[&lt;expression&gt; <span class="hljs-keyword">for</span> &lt;element&gt; <span class="hljs-keyword">in</span> &lt;iterable&gt;]</code></pre>
<p>Examples:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>[n <span class="hljs-keyword">for</span> n <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>)]
[<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>[n**<span class="hljs-number">2</span> <span class="hljs-keyword">for</span> n <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>)]
[<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>, <span class="hljs-number">9</span>, <span class="hljs-number">16</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>[bbs[i:i+<span class="hljs-number">8</span>] <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, len(bbs), <span class="hljs-number">8</span>)]
[<span class="hljs-string">'01110011'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101001'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110011'</span>, <span class="hljs-string">'01101110'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110010'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01110000'</span>, <span class="hljs-string">'01101101'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01101111'</span>, <span class="hljs-string">'00100000'</span>, <span class="hljs-string">'01100011'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-13">
    <section class="slide-content"><h3 id="decode">Decode</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>octets = [bbs[i:i+<span class="hljs-number">8</span>] <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, len(bbs), <span class="hljs-number">8</span>)]
<span class="hljs-meta">&gt;&gt;&gt; </span>chrs = [chr(int(octet, <span class="hljs-number">2</span>)) <span class="hljs-keyword">for</span> octet <span class="hljs-keyword">in</span> octets]
<span class="hljs-meta">&gt;&gt;&gt; </span>chrs
[<span class="hljs-string">'s'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'i'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'h'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'r'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'p'</span>, <span class="hljs-string">'m'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">'c'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-14">
    <section class="slide-content"><h3 id="filter">Filter</h3>
<p>Functional:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>list(filter(<span class="hljs-keyword">lambda</span> c: c != <span class="hljs-string">' '</span>, chrs))
[<span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'i'</span>, <span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'h'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'r'</span>, <span class="hljs-string">'p'</span>, <span class="hljs-string">'m'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'c'</span>]</code></pre>
<p>Comprehensions:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>[c <span class="hljs-keyword">for</span> c <span class="hljs-keyword">in</span> chrs <span class="hljs-keyword">if</span> c != <span class="hljs-string">' '</span>]
[<span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'i'</span>, <span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'h'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'r'</span>, <span class="hljs-string">'p'</span>, <span class="hljs-string">'m'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'c'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-15">
    <section class="slide-content"><h3 id="comprehensions">Comprehensions</h3>
<p>Structure:</p>
<pre><code class="lang-python">[&lt;expression&gt; <span class="hljs-keyword">for</span> &lt;element&gt; <span class="hljs-keyword">in</span> &lt;iterable&gt; <span class="hljs-keyword">if</span> &lt;expression&gt;]</code></pre>
<p>Examples:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>[n <span class="hljs-keyword">for</span> n <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>) <span class="hljs-keyword">if</span> n % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>]
[<span class="hljs-number">0</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>[n**<span class="hljs-number">2</span> <span class="hljs-keyword">for</span> n <span class="hljs-keyword">in</span> range(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>) <span class="hljs-keyword">if</span> n % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>]
[<span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">16</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span>[c <span class="hljs-keyword">for</span> c <span class="hljs-keyword">in</span> chrs <span class="hljs-keyword">if</span> c != <span class="hljs-string">' '</span>]
[<span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'i'</span>, <span class="hljs-string">'s'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'h'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'r'</span>, <span class="hljs-string">'p'</span>, <span class="hljs-string">'m'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'c'</span>]</code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-16">
    <section class="slide-content"><h3 id="join-and-reverse">Join and reverse</h3>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>chrs = [c <span class="hljs-keyword">for</span> c <span class="hljs-keyword">in</span> chrs <span class="hljs-keyword">if</span> c != <span class="hljs-string">' '</span>]

<span class="hljs-meta">&gt;&gt;&gt; </span><span class="hljs-string">''</span>.join(chrs)
<span class="hljs-string">'snoisneherpmoc'</span>

<span class="hljs-meta">&gt;&gt;&gt; </span><span class="hljs-string">''</span>.join(reversed(chrs))
<span class="hljs-string">'comprehensions'</span></code></pre>
</section>
  </div>
  <div class="slide hidden" id="slide-17">
    <section class="slide-content"><p><img src="https://i.imgur.com/NLg1gzC.gif" alt=""></p>
<p>Link to article available on Slack and Facebook.</p>
</section>
  </div>
  <div class="slide hidden author-slide" id="slide-18">
    <section class="slide-content"><div class="author">
  <h1 class="name">Bjørn Friese</h1>
    <h3 class="url">
      <a href="https://frieze.dk">https://frieze.dk</a>
    </h3>
    <h3 class="email">
      <a href="mailto:bearfrieze@gmail.com">bearfrieze@gmail.com</a>
    </h3>
</div>
</section>
  </div>


  <script type="text/javascript">
    /**
 * Returns the current page number of the presentation.
 */
function currentPosition() {
  return parseInt(document.querySelector('.slide:not(.hidden)').id.slice(6));
}


/**
 * Navigates forward n pages
 * If n is negative, we will navigate in reverse
 */
function navigate(n) {
  var position = currentPosition();
  var numSlides = document.getElementsByClassName('slide').length;

  /* Positions are 1-indexed, so we need to add and subtract 1 */
  var nextPosition = (position - 1 + n) % numSlides + 1;

  /* Normalize nextPosition in-case of a negative modulo result */
  nextPosition = (nextPosition - 1 + numSlides) % numSlides + 1;

  document.getElementById('slide-' + position).classList.add('hidden');
  document.getElementById('slide-' + nextPosition).classList.remove('hidden');

  updateProgress();
  updateURL();
  updateTabIndex();
}


/**
 * Updates the current URL to include a hashtag of the current page number.
 */
function updateURL() {
  try {
    window.history.replaceState({} , null, '#' + currentPosition());
  } catch (e) {
    window.location.hash = currentPosition();
  }
}


/**
 * Sets the progress indicator.
 */
function updateProgress() {
  var progressBar = document.querySelector('.progress-bar');

  if (progressBar !== null) {
    var numSlides = document.getElementsByClassName('slide').length;
    var position = currentPosition() - 1;
    var percent = (numSlides === 1) ? 100 : 100 * position / (numSlides - 1);
    progressBar.style.width = percent.toString() + '%';
  }
}


/**
 * Removes tabindex property from all links on the current slide, sets
 * tabindex = -1 for all links on other slides. Prevents slides from appearing
 * out of control.
 */
function updateTabIndex() {
  var allLinks = document.querySelectorAll('.slide a');
  var position = currentPosition();
  var currentPageLinks = document.getElementById('slide-' + position).querySelectorAll('a');
  var i;

  for (i = 0; i < allLinks.length; i++) {
    allLinks[i].setAttribute('tabindex', -1);
  }

  for (i = 0; i < currentPageLinks.length; i++) {
    currentPageLinks[i].removeAttribute('tabindex');
  }
}

/**
 * Determines whether or not we are currently in full screen mode
 */
function isFullScreen() {
  return document.fullscreenElement ||
         document.mozFullScreenElement ||
         document.webkitFullscreenElement ||
         document.msFullscreenElement;
}

/**
 * Toggle fullScreen mode on document element.
 * Works on chrome (>= 15), firefox (>= 9), ie (>= 11), opera(>= 12.1), safari (>= 5).
 */
function toggleFullScreen() {
  /* Convenient renames */
  var docElem = document.documentElement;
  var doc = document;

  docElem.requestFullscreen =
      docElem.requestFullscreen ||
      docElem.msRequestFullscreen ||
      docElem.mozRequestFullScreen ||
      docElem.webkitRequestFullscreen.bind(docElem, Element.ALLOW_KEYBOARD_INPUT);

  doc.exitFullscreen =
      doc.exitFullscreen ||
      doc.msExitFullscreen ||
      doc.mozCancelFullScreen ||
      doc.webkitExitFullscreen;

  isFullScreen() ? doc.exitFullscreen() : docElem.requestFullscreen();
}

document.addEventListener('DOMContentLoaded', function () {
  // Update the tabindex to prevent weird slide transitioning
  updateTabIndex();

  // If the location hash specifies a page number, go to it.
  var page = window.location.hash.slice(1);
  if (page) {
    navigate(parseInt(page) - 1);
  }

  document.onkeydown = function (e) {
    var kc = e.keyCode;

    // left, down, H, J, backspace, PgUp - BACK
    // up, right, K, L, space, PgDn - FORWARD
    // enter - FULLSCREEN
    if (kc === 37 || kc === 40 || kc === 8 || kc === 72 || kc === 74 || kc === 33) {
      navigate(-1);
    } else if (kc === 38 || kc === 39 || kc === 32 || kc === 75 || kc === 76 || kc === 34) {
      navigate(1);
    } else if (kc === 13) {
      toggleFullScreen();
    }
  };

  if (document.querySelector('.next') && document.querySelector('.prev')) {
    document.querySelector('.next').onclick = function (e) {
      e.preventDefault();
      navigate(1);
    };

    document.querySelector('.prev').onclick = function (e) {
      e.preventDefault();
      navigate(-1);
    };
  }
});


  </script>
</body>
</html>

## slides.md

      
    Raw
  

              slides.md
            
          
    title: Comprehensions in Python the Jedi way
author:
name: Bjørn Friese
email: bearfrieze@gmail.com
url: https://frieze.dk
output: slides.html
style: slides.css
controls: false
--
Comprehensions in Python the Jedi way

https://gist.github.com/bearfrieze/a746c6f12d8bada03589

--
Collections


Droids
Jedis
Planets
Lightsabers

--
Data structures


Lists: [a, b, c]
Sets: {a, b, c}
Dictionaries: {'a': 1, 'b': 2, 'c': 3}

--

--
Bleeps and bloops

>>> bbs = '01110011001000000110111001101111001000000010000001101001001000000111001101101110001000000110010100100000001000000110100000100000001000000110010100100000011100100010000000100000011100000110110100100000011011110010000001100011'
--
ASCII


01000001 ↔ 65 ↔ A
01000010 ↔ 66 ↔ B
01000011 ↔ 67 ↔ C

--
List slicing

>>> l = [0, 1, 2, 3, 4]

>>> l[1:]
[1, 2, 3, 4]

>>> l[:4]
[0, 1, 2, 3]

>>> l[1:4]
[1, 2, 3]

>>> l[1:-1]
[1, 2, 3]
--
Imperative approach

>>> octets = []
>>> for i in range(0, len(bbs), 8):
...   octets.append(bbs[i:i+8])

>>> octets
['01110011', '00100000', '01101110', '01101111', '00100000', '00100000', '01101001', '00100000', '01110011', '01101110', '00100000', '01100101', '00100000', '00100000', '01101000', '00100000', '00100000', '01100101', '00100000', '01110010', '00100000', '00100000', '01110000', '01101101', '00100000', '01101111', '00100000', '01100011']
--
Functional approach

>>> list(map(lambda i: bbs[i:i+8], range(0, len(bbs), 8)))
['01110011', '00100000', '01101110', '01101111', '00100000', '00100000', '01101001', '00100000', '01110011', '01101110', '00100000', '01100101', '00100000', '00100000', '01101000', '00100000', '00100000', '01100101', '00100000', '01110010', '00100000', '00100000', '01110000', '01101101', '00100000', '01101111', '00100000', '01100011']
--
The Jedi way (comprehensions)

>>> [bbs[i:i+8] for i in range(0, len(bbs), 8)]
['01110011', '00100000', '01101110', '01101111', '00100000', '00100000', '01101001', '00100000', '01110011', '01101110', '00100000', '01100101', '00100000', '00100000', '01101000', '00100000', '00100000', '01100101', '00100000', '01110010', '00100000', '00100000', '01110000', '01101101', '00100000', '01101111', '00100000', '01100011']
--

--
Comprehensions

Structure:
[<expression> for <element> in <iterable>]
Examples:
>>> [n for n in range(0, 5)]
[0, 1, 2, 3, 4]

>>> [n**2 for n in range(0, 5)]
[0, 1, 4, 9, 16]

>>> [bbs[i:i+8] for i in range(0, len(bbs), 8)]
['01110011', '00100000', '01101110', '01101111', '00100000', '00100000', '01101001', '00100000', '01110011', '01101110', '00100000', '01100101', '00100000', '00100000', '01101000', '00100000', '00100000', '01100101', '00100000', '01110010', '00100000', '00100000', '01110000', '01101101', '00100000', '01101111', '00100000', '01100011']
--
Decode

>>> octets = [bbs[i:i+8] for i in range(0, len(bbs), 8)]
>>> chrs = [chr(int(octet, 2)) for octet in octets]
>>> chrs
['s', ' ', 'n', 'o', ' ', ' ', 'i', ' ', 's', 'n', ' ', 'e', ' ', ' ', 'h', ' ', ' ', 'e', ' ', 'r', ' ', ' ', 'p', 'm', ' ', 'o', ' ', 'c']
--
Filter

Functional:
>>> list(filter(lambda c: c != ' ', chrs))
['s', 'n', 'o', 'i', 's', 'n', 'e', 'h', 'e', 'r', 'p', 'm', 'o', 'c']
Comprehensions:
>>> [c for c in chrs if c != ' ']
['s', 'n', 'o', 'i', 's', 'n', 'e', 'h', 'e', 'r', 'p', 'm', 'o', 'c']
--
Comprehensions

Structure:
[<expression> for <element> in <iterable> if <expression>]
Examples:
>>> [n for n in range(0, 5) if n % 2 == 0]
[0, 2, 4]

>>> [n**2 for n in range(0, 5) if n % 2 == 0]
[0, 4, 16]

>>> [c for c in chrs if c != ' ']
['s', 'n', 'o', 'i', 's', 'n', 'e', 'h', 'e', 'r', 'p', 'm', 'o', 'c']
--
Join and reverse

>>> chrs = [c for c in chrs if c != ' ']

>>> ''.join(chrs)
'snoisneherpmoc'

>>> ''.join(reversed(chrs))
'comprehensions'
--

Link to article available on Slack and Facebook.
	pre {
	font-size: 1.5rem;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	}

	img {
	width: 100%;
	}