attribute teamweb graphic

huijing · Nov 13, 2018 · a4cd257 · a4cd257
1 parent d93ca28
commit a4cd257
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 24 deletions.
diff --git a/38-ffc-2018/index.html b/38-ffc-2018/index.html
@@ -28,7 +28,9 @@
           <img class="plain" style="max-width:5em;margin-bottom:1em" data-src="img/boxmodel.svg" alt="Do you Box Model?">
           <h1 style="text-transform:uppercase">Layout the web with CSS grid</h1>
           <h3>and the rest of team layout</h3>
-          <img class="plain" style="max-width:8em;margin-top:1em" data-src="img/teamweb.svg" alt="#TeamWeb">
+          <img class="plain" style="max-width:8em;margin-top:1em;margin-bottom:0" data-src="img/teamweb.svg" alt="#TeamWeb">
+          <p style="margin:0">↑</p>
+          <small style="display:block"><a href="https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/">Original image</a> by the amazing <a href="https://twitter.com/linclark">Lin Clark</a></small>
         </section>
 
         <section>

diff --git a/44-btconfws-2018/css/reveal.css b/44-btconfws-2018/css/reveal.css
@@ -426,8 +426,7 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  -ms-touch-action: none;
-      touch-action: none; }
+  touch-action: none; }
 
 @media only screen and (orientation: landscape) {
   .reveal.ua-iphone {
@@ -951,12 +950,10 @@ body {
   max-height: none;
   top: 0;
   left: 0;
-  -o-object-fit: cover;
-     object-fit: cover; }
+  object-fit: cover; }
 
 .reveal .slide-background[data-background-size="contain"] video {
-  -o-object-fit: contain;
-     object-fit: contain; }
+  object-fit: contain; }
 
 /* Immediate transition style */
 .reveal[data-background-transition=none] > .backgrounds .slide-background,
@@ -1222,7 +1219,6 @@ body {
 
 .reveal .overlay .viewport {
   position: absolute;
-  display: -ms-flexbox;
   display: flex;
   top: 40px;
   right: 0;

diff --git a/44-btconfws-2018/index.html b/44-btconfws-2018/index.html
@@ -25,7 +25,9 @@
           <img class="plain" style="max-width:5em;margin-bottom:1em" data-src="img/boxmodel.svg" alt="Do you Box Model?">
           <h1 style="text-transform:uppercase">Layout the web with CSS grid</h1>
           <h3>and the rest of team layout</h3>
-          <img class="plain" style="max-width:8em;margin-top:1em" data-src="img/teamweb.svg" alt="#TeamWeb">
+          <img class="plain" style="max-width:8em;margin-top:1em;margin-bottom:0" data-src="img/teamweb.svg" alt="#TeamWeb">
+          <p style="margin:0">↑</p>
+          <small style="display:block"><a href="https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/">Original image</a> by the amazing <a href="https://twitter.com/linclark">Lin Clark</a></small>
         </section>
 
         <section>
@@ -67,103 +69,121 @@ <h2>Evolution of browsers</h2>
         <section>
           <h2>Pre-grid techniques</h2>
           <p data-height="640" data-theme-id="9162" data-slug-hash="KGOmLZ" data-default-tab="html,result" data-user="huijing" data-pen-title="#0: Pre-Grid layout techniques" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/KGOmLZ/">#0: Pre-Grid layout techniques</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/KGOmLZ/">https://codepen.io/huijing/pen/KGOmLZ/</a></p>
         </section>
 
         <section>
           <h2>Flexbox basics</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="NEPwoj" data-default-tab="html,result" data-user="huijing" data-pen-title="Flexbox basics" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/NEPwoj/">Flexbox basics</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/NEPwoj/">https://codepen.io/huijing/pen/NEPwoj/</a></p>
         </section>
 
         <section>
           <h2>Image gallery</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="dQPZmL" data-default-tab="html,result" data-user="huijing" data-pen-title="Image gallery" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/dQPZmL/">Image gallery</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/dQPZmL/">https://codepen.io/huijing/pen/dQPZmL/</a></p>
         </section>
 
         <section>
           <h2>Configuration page</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="GwgMJx" data-default-tab="html,result" data-user="huijing" data-pen-title="Configuration page" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/GwgMJx/">Configuration page</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/GwgMJx/">https://codepen.io/huijing/pen/GwgMJx/</a></p>
         </section>
 
         <section>
           <h2>Defining a grid</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="mzKoNj" data-default-tab="html,result" data-user="huijing" data-pen-title="#1: Defining a grid" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/mzKoNj/">#1: Defining a grid</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/mzKoNj/">https://codepen.io/huijing/pen/mzKoNj/</a></p>
         </section>
 
         <section>
           <h2>The repeat() function</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="XxveJe" data-default-tab="html,result" data-user="huijing" data-pen-title="#2.1: The repeat() function" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/XxveJe/">#2.1: The repeat() function</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/XxveJe/">https://codepen.io/huijing/pen/XxveJe/</a></p>
         </section>
 
         <section>
           <h2>auto-fill versus auto-fit</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="GYVyMX" data-default-tab="html,result" data-user="huijing" data-pen-title="#2.2: auto-fill versus auto-fit" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/GYVyMX/">#2.2: auto-fill versus auto-fit</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/GYVyMX/">https://codepen.io/huijing/pen/GYVyMX/</a></p>
         </section>
 
         <section>
           <h2>grid-auto-row and grid-auto-column</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="ePqyMz" data-default-tab="html,result" data-user="huijing" data-pen-title="#2.3: grid-auto-row and grid-auto-column" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/ePqyMz/">#2.3: grid-auto-row and grid-auto-column</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/ePqyMz/">https://codepen.io/huijing/pen/ePqyMz/</a></p>
         </section>
 
         <section>
           <h2>The grid-auto-flow property</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="LgwegQ" data-default-tab="html,result" data-user="huijing" data-pen-title="#2.4: The grid-auto-flow property" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/LgwegQ/">#2.4: The grid-auto-flow property</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/LgwegQ/">https://codepen.io/huijing/pen/LgwegQ/</a></p>
         </section>
 
         <section>
           <h2>The fr unit</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="WaVdLN" data-default-tab="css,result" data-user="huijing" data-pen-title="#3.1: The fr unit" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/WaVdLN/">#3.1: The fr unit</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/WaVdLN/">https://codepen.io/huijing/pen/WaVdLN/</a></p>
         </section>
 
         <section>
           <h2>The minmax() function</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="jegYob" data-default-tab="css,result" data-user="huijing" data-pen-title="#3.2: The minmax() function" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/jegYob/">#3.2: The minmax() function</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/jegYob/">https://codepen.io/huijing/pen/jegYob/</a></p>
         </section>
 
         <section>
           <h2>Content-based sizing</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="bmXLpd" data-default-tab="html,result" data-user="huijing" data-pen-title="#3.3: Content-based sizing" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/bmXLpd/">#3.3: Content-based sizing</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/bmXLpd/">https://codepen.io/huijing/pen/bmXLpd/</a></p>
         </section>
 
         <section>
           <h2>Image gallery (part 2)</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="dQPZmL" data-default-tab="html,result" data-user="huijing" data-pen-title="Image gallery" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/dQPZmL/">Image gallery</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/dQPZmL/">https://codepen.io/huijing/pen/dQPZmL/</a></p>
         </section>
 
         <section>
           <h2>Line-based placement</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="pxMaYp" data-default-tab="css,result" data-user="huijing" data-pen-title="#4.1: Line-based placement" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/pxMaYp/">#4.1: Line-based placement</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/pxMaYp/">https://codepen.io/huijing/pen/pxMaYp/</a></p>
         </section>
 
         <section>
           <h2>grid-column and grid-row</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="zmgRgM" data-default-tab="css,result" data-user="huijing" data-pen-title="#4.2: grid-column and grid-row" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/zmgRgM/">#4.2: grid-column and grid-row</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/zmgRgM/">https://codepen.io/huijing/pen/zmgRgM/</a></p>
         </section>
 
         <section>
           <h2>The span keyword</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="NOQYMM" data-default-tab="css,result" data-user="huijing" data-pen-title="#4.3: The span keyword" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/NOQYMM/">#4.3: The span keyword</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/NOQYMM/">https://codepen.io/huijing/pen/NOQYMM/</a></p>
         </section>
 
         <section>
           <h2>Using the grid-area shorthand</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="vVoRzx" data-default-tab="css,result" data-user="huijing" data-pen-title="#4.4: Using the grid-area shorthand" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/vVoRzx/">#4.4: Using the grid-area shorthand</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/vVoRzx/">https://codepen.io/huijing/pen/vVoRzx/</a></p>
         </section>
 
         <section>
           <h2>Naming grid lines</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="xyvWBZ" data-default-tab="html,result" data-user="huijing" data-pen-title="#5.1: Naming grid lines" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/xyvWBZ/">#5.1: Naming grid lines</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+          <p><a href="https://codepen.io/huijing/pen/xyvWBZ/">https://codepen.io/huijing/pen/xyvWBZ/</a></p>
         </section>
 
         <section>
           <h2>Naming grid areas</h2>
-          <p data-height="640" data-theme-id="0" data-slug-hash="EdqLxP" data-default-tab="css,result" data-user="huijing" data-pen-title="#5.2: Naming grid areas" class="codepen">See the Pen <a href="https://codepen.io/huijin这g/pen/EdqLxP/">#5.2: Naming grid areas</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+          <p data-height="640" data-theme-id="0" data-slug-hash="EdqLxP" data-default-tab="css,result" data-user="huijing" data-pen-title="#5.2: Naming grid areas" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/EdqLxP/">#5.2: Naming grid areas</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/EdqLxP/">https://codepen.io/huijing/pen/EdqLxP/</a></p>
         </section>
 
         <section>
           <h2>Responsive dashboard</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="xQbXKO" data-default-tab="html,result" data-user="huijing" data-pen-title="Responsive dashboard" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/xQbXKO/">Responsive dashboard</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/xQbXKO/">https://codepen.io/huijing/pen/xQbXKO/</a></p>
         </section>
 
         <section>
@@ -182,6 +202,7 @@ <h2>Feature queries</h2>
         <section>
           <h2>Musician profile page</h2>
           <p data-height="640" data-theme-id="0" data-slug-hash="bQNoeO" data-default-tab="css,result" data-user="huijing" data-pen-title="Musician profile page" class="codepen">See the Pen <a href="https://codepen.io/huijing/pen/bQNoeO/">Musician profile page</a> by Chen Hui Jing (<a href="https://codepen.io/huijing">@huijing</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+          <p><a href="https://codepen.io/huijing/pen/bQNoeO/">https://codepen.io/huijing/pen/bQNoeO/</a></p>
         </section>
 
         <section>

diff --git a/45-btconf-2018/index.html b/45-btconf-2018/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Box Alignment</title>
-    <meta name="description" content="The web is fundamentally boxes. Every element in the document tree is a box. A lot of frustration with CSS often arises from trying to wrangle all the content on the page into their proper locations. CSS has gradually expanded over the years, granting us an increasing degree of control over the alignment, positioning and layout of these boxes. This talk will not only dive into how box alignment works, but also cover its interactions with other key parts of CSS layout, like display and writing-mode, as well as show how this module will continue to evolve, making layout even easier moving forward.">
+    <meta name="description" content="The web is made of boxes. But aligning them has not been the easiest task for web developers. Luckily, CSS has evolved to a point where we now have a suite of tools well-suited for aligning boxes along both the inline and block axes. This talk dives deep into the various alignment techniques across all the formatting contexts so you can figure out which method best fits your use-case.">
 
     <link rel="stylesheet" href="css/reveal.css">
     <link rel="stylesheet" href="css/theme/jing.css">