Flesh out the styles and finish the slides.

chat-app/static/css/main.css

@@ -57,17 +57,18 @@ div {
     padding: 1em 1.25em;
     margin-right: 1em;
     box-sizing: border-box;
-    font-famil: monospace !important;
+    font-family: monospace !important;
 }
-.chat-input > form > submit {
+.chat-input > form > input[type=submit] {
-    background-color: #020a03;
+    background-color: #dacaae;
-    border: none;
+    border: 1px solid #010a02;
     border-radius: 5px;
-    color: #fffbf6;
+    color: #0c0b09;
     font-weight: bold;
     padding: 0.75em 1em;
     margin-right: 0;
 }
+
 .chat-input > form > input[name="chatter"] {
     width: 20%;
     border: 1px solid #020a03;
@@ -109,12 +110,12 @@ div {
     }
 
     .chat-input > form > input[name="message"] {
-        width: 60%;
+        width: 65%;
         order: 2;
     }
 
     .chat-input > form > input[type=submit] {
-        width: 34%;
+        width: 30%;
         order: 3;
     }
 }

slides/deployment.html

@@ -35,10 +35,9 @@
             <section>
                 <h1>Dave Smith-Hayes</h1>
                 <ul>
-                    <li class="fragment">Developer</li>
                     <li class="fragment">Father</li>
+                    <li class="fragment">Developer</li>
                     <li class="fragment">JavaScript Enjoyer</li>
-                    <li class="fragment">Web Software Deployer</li>
                 </ul>
             </section>
 
@@ -65,16 +64,27 @@
 
             <section>
                 <ul>
-                    <li class="fragment">cPanel File Manager</li>
+                    <li>cPanel File Manager</li>
                     <li class="fragment">FTP to Shared Hosting</li>
                     <li class="fragment"><code>$ git pull</code></li>
                     <li class="fragment">Jenkins &amp; Ansible build VM Images</li>
-                    <li class="fragment">Packer &amp; Terraform build Continers</li>
+                    <li class="fragment">Packer &amp; Terraform build Containers</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Deployment Methods</h2>
+                <ul>
+                    <li class="fragment">In Place</li>
+                    <li class="fragment">Rolling</li>
+                    <li class="fragment">Immutable</li>
+                    <li class="fragment">Green/Blue</li>
                 </ul>
             </section>
 
             <section>
                 <h2>Doing it Yourself</h2>
+                <h3 class="fragment">What do you need?</h3>
                 <ul>
                     <li class="fragment">A domain</li>
                     <li class="fragment">A server with a public IP address</li>
@@ -86,8 +96,9 @@
             <!-- Dokku -->
             <section>
                 <h2>Dokku</h2>
-                <p>Self-hosted platform as a service</p>
+                <p>Self-hosted <strong>P</strong>latform as a <strong>S</strong>ervice (PaaS)</p>
-                <p>Your very own Heroku</p>
+                <p>Your very own <em>Heroku*</em></p>
+                <p class="fragment"><small><em>*I have never used Heroku</em></small></p>
             </section>
 
             <section>
@@ -103,20 +114,54 @@
                 </ul>
             </section>
 
+            <section>
+                <h2>How Dokku Works</h2>
+                <ul>
+                    <li>Sets up Application</li>
+                    <li>Becomes a Git remote repository</li>
+                    <li>Builds and deploys the app behind NGiNX</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Builders</h2>
+                <ul>
+                    <li>Heroku Buildpacks</li>
+                    <li>Dockerfile</li>
+                    <li>Nixpacks</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Plugins</h2>
+                <ul>
+                    <li>Let's Encrypt</li>
+                    <li>Databases (MySQL, Postgres)</li>
+                </ul>
+            </section>
+
+            <section>
+                <h1>Demo</h1>
+            </section>
+
             <section>
                 <h3>Anatomy of the Server</h3>
                 <ul>
                     <li>Linode VPS</li>
                     <li>Debian</li>
+                    <li>Nameservers</li>
                 </ul>
             </section>
 
             <section>
                 <h3>Anatomy of the Application</h3>
                 <ul>
-                    <li>Hono Web Server Application</li>
+                    <li>Chat Application</li>
-                    <li>Mithril.js Frontend Application</li>
+                    <li>Hono Backend</li>
+                    <li>Mithril.js Frontend</li>
+                    <li>Bun!</li>
                     <li>Dockerized</li>
+                    <li><a href="https://chat.freedoom.party">chat.freedoom.party</a></li>
                 </ul>
             </section>