Comparison slides with fragments.

preso/css/smackdown.css

@@ -1,5 +1,5 @@
 .down-arrow {
-    margin-top: 100px;
+    margin-top: 30px;
     font-weight: bold
 }
 
@@ -17,7 +17,7 @@ pre code {
 }
 
 .top {
-    top: -60px;
+    top: -200px;
 }
 
 .column2 {
@@ -36,4 +36,14 @@ pre code {
     text-align: right;
     color: #EEEEEE;
     font-size: 18px;
+}
+
+.comparison {
+    position: absolute;
+}
+
+.comparison .fragment {
+    position: absolute;
+    top: 0;
+    opacity: 0;
 }

preso/index.html

@@ -58,7 +58,7 @@ <h2>Why a Smackdown?</h2>
 
     <p style="margin-top: 100px">
         <i>
-            <small>- We wanted to know how they enhanced the Developer Experience (DX).</small>
+            <small>* We wanted to know how they enhanced the Developer Experience (DX).</small>
         </i>
     </p>
 </section>
@@ -775,9 +775,77 @@ <h3>Authentication - Play</h3>
 
 </section>
 
+<section>
+  <section>
+    <h2>Application Comparison</h2>
+    <ul>
+      <li><a href="#/8/1">YSlow</a></li>
+      <li><a href="#/8/2">PageSpeed</a></li>
+      <li><a href="#/8/3">Lines of Code</a></li>
+      <li><a href="#/8/4">Load Testing</a></li>
+    </ul>
+  </section>
+  <section class="top">
+    <h2>YSlow</h2>
+    <div class="comparison">
+      <img src="assets/images/yslow-bike.png" width="900"/>
+      <img class="fragment" src="assets/images/yslow-hike.png" width="900"/>
+    </div>
+  </section>
+
+  <section class="top">
+    <h2>PageSpeed</h2>
+    <div class="comparison">
+      <img src="assets/images/pagespeed-bike.png" width="900"/>
+      <img class="fragment" src="assets/images/pagespeed-hike.png" width="900"/>
+    </div>
+  </section>
+
+  <section class="top">
+    <h2>Lines of Code</h2>
+    <div class="comparison">
+      <img src="assets/images/cloc-grails.png" width="900"/>
+      <img class="fragment" src="assets/images/cloc-play.png" width="900"/>
+    </div>
+  </section>
+
+  <section class="top">
+    <h2>Load Testing with BrowserMob</h2>
+    <img src="assets/images/neustar-dashboard.png" width="900"/>
+  </section>
+  <section class="top">
+    <h2>Load Testing - 1 Dyno</h2>
+    <div style="width: 600px; margin: 0 auto">
+      <div style="float: left">
+        <img src="assets/images/bike-test-stats.png" height="254" width="258"/>
+        <p>Bike (Grails)</p>
+      </div>
+      <div style="float: right">
+        <img src="assets/images/hike-test-stats.png" height="255" width="260"/>
+        <p>Hike (Play)</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="top">
+    <h2>Load Testing - 1 Dyno</h2>
+    <div class="comparison">
+      <div>
+        <img src="assets/images/bike-throughput.png" width="800"/>
+        <p>Bike (Grails)</p>
+      </div>
+      <div class="fragment">
+        <img src="assets/images/hike-throughput.png" width="800"/>
+        <p>Hike (Play)</p>
+      </div>
+    </div>
+  </section>
+
+</section>
+
 <section>
     <section>
-        <h2>Comparison and Pretty Graphs</h2>
+        <h2>Framework Comparison</h2>
         <ul>
             <li>Jobs</li>
             <li>LinkedIn Skills</li>
@@ -978,11 +1046,6 @@ <h1>Action!</h1>
         query[ a.split('=').shift() ] = a.split('=').pop();
     });
 
-    // Fires when a slide with data-state=customevent is activated
-    Reveal.addEventListener('customevent', function () {
-        alert('"customevent" has fired');
-    });
-
     // Fires each time a new slide is activated
     Reveal.addEventListener('slidechanged', function (event) {
         // event.indexh & event.indexv

testing.txt

@@ -30,7 +30,3 @@ Feature Complete Testing
 8. Add rating and comment to Route
 9. Delete newly added route
 10. Logout
-
-Load Testing
-------------------
-TBD