Skip to content

Commit 7361c77

Browse files
dumbNicknamedumbNickname
committed
Aligned with conventions introduced in previous commit (credits under code and images), wrapped links into a paragraph (proper font will be used) and introduced credits class.
1 parent 4c5cfc0 commit 7361c77

File tree

2 files changed

+96
-41
lines changed

2 files changed

+96
-41
lines changed

‎index.html‎

Lines changed: 92 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,18 @@ <h3>Declaring and using variables</h3>
4646
<h1 style="font-size: 4.5em; margin-bottom: -0.25em;" class="primaryColor" >What's</h1>
4747
<h1 style="font-size: 3em; margin-bottom: -0.25em;" class="fallbackColor" >new?</h1>
4848
</section>
49+
50+
4951
<section data-background-color="var(--secondary-color)">
5052
<h1 style="font-size: 3em; margin-bottom: -0.25em;" class="fallbackColor">We have</h1>
5153
<h1 style="font-size: 3.5em; text-transform: none" class="flippedColor" >ECMAScript 2015!</h1>
5254
<h1 style="font-size: 1.5em; margin-bottom: -0.25em; text-transform: none" class="primaryColor" >Let's go through a few of its highlights...</h1>
5355
</section>
56+
5457
<section>
55-
<section>
56-
<h3>ES2015 Classes</h3>
57-
<pre><code class="javascript" data-trim data-noescape>
58+
<section>
59+
<h3>ES2015 Classes</h3>
60+
<pre><code class="javascript" data-trim data-noescape>
5861
class Shape {
5962
constructor(x, y) {
6063
this.move(x, y);
@@ -71,13 +74,16 @@ <h3>ES2015 Classes</h3>
7174
this.height = height;
7275
}
7376
}
74-
</code></pre>
75-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
77+
</code></pre>
78+
<p>
79+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
80+
</p>
7681

77-
</section>
78-
<section>
79-
<h3>ES5 Constructor Functions and Prototypal Inheritance</h3>
80-
<pre><code class="javascript" data-trim data-noescape>
82+
</section>
83+
84+
<section>
85+
<h3>ES5 Constructor Functions and Prototypal Inheritance</h3>
86+
<pre><code class="javascript" data-trim data-noescape>
8187
var Shape = function (x, y) {
8288
this.move(x, y);
8389
};
@@ -91,16 +97,18 @@ <h3>ES5 Constructor Functions and Prototypal Inheritance</h3>
9197
};
9298
Rectangle.prototype = new Shape(1, 5);
9399
var smallRectangle = new Rectangle(10, 20);
94-
</code></pre>
95-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
100+
</code></pre>
101+
<p>
102+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
103+
</p>
96104

97-
</section>
105+
</section>
98106
</section>
99107

100108
<section>
101109
<section>
102110
<h3>ES2015 Arrow Functions / Lexical <span style="font-family: monospace">this</span></h3>
103-
<pre><code class="javascript" data-trim data-noescape>
111+
<pre><code class="javascript" data-trim data-noescape>
104112
class Classroom {
105113
constructor() {
106114
this.students = [
@@ -117,13 +125,15 @@ <h3>ES2015 Arrow Functions / Lexical <span style="font-family: monospace">this</
117125
});
118126
}
119127
}
120-
</code></pre>
121-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
122-
128+
</code></pre>
129+
<p>
130+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
131+
</p>
123132
</section>
133+
124134
<section>
125135
<h3>ES5 <span style="font-family: monospace">bind()</span></h3>
126-
<pre><code class="javascript" data-trim data-noescape>
136+
<pre><code class="javascript" data-trim data-noescape>
127137
var classroom = {
128138
students: [
129139
{name: 'Joe', isMyFriend: false},
@@ -138,14 +148,19 @@ <h3>ES5 <span style="font-family: monospace">bind()</span></h3>
138148
}.bind(this)); // binds this to the function context
139149
}
140150
};
141-
</code></pre>
142-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
151+
</code></pre>
152+
<p>
153+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
154+
</p>
143155

144156
</section>
157+
145158
<section>
146159
<img src="src/img/ben-halpern-tweet.png">
147160
</section>
148161
</section>
162+
163+
149164
<section>
150165
<section>
151166
<h3>ES2015 Promises</h3>
@@ -165,7 +180,9 @@ <h3>ES2015 Promises</h3>
165180
console.log(`Someone says: ${helloToEric}`);
166181
});
167182
</code></pre>
168-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
183+
<p>
184+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
185+
</p>
169186

170187
</section>
171188
<section>
@@ -184,10 +201,14 @@ <h3>ES5 callbacks</h3>
184201
});
185202
});
186203
</code></pre>
187-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
204+
<p>
205+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
206+
</p>
188207

189208
</section>
190209
</section>
210+
211+
191212
<section>
192213
<section>
193214
<h3>ES2015 Module Exports / Imports</h3>
@@ -202,9 +223,12 @@ <h3>ES2015 Module Exports / Imports</h3>
202223

203224
console.log(sayHelloTo('Joe'));
204225
</code></pre>
205-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
206-
226+
<p>
227+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
228+
</p>
207229
</section>
230+
231+
208232
<section>
209233
<h3>ES5 Namespace Pattern</h3>
210234
<pre><code class="javascript" data-trim data-noescape>
@@ -217,16 +241,14 @@ <h3>ES5 Namespace Pattern</h3>
217241
// my-code.js
218242
console.log(myNamespace.sayHelloTo('Joe'));
219243
</code></pre>
220-
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
221-
244+
<p>
245+
<a href="http://es6-features.org/" class="credits" target="_blank">Code examples from http://es6-features.org/</a>
246+
</p>
222247
</section>
223248
</section>
224249

225250

226251

227-
228-
229-
230252
<section data-background-color="var(--secondary-color)">
231253
<h1 style="font-size: 4.9em; margin-bottom: -0.25em;" class="fallbackColor" >Offline</h1>
232254
<h1 style="font-size: 4.5em; margin-bottom: -0.25em;" class="primaryColor" >caching</h1>
@@ -271,8 +293,7 @@ <h1 style="font-size: 4em;"class="flippedColor" >workers?</h1>
271293
</section>
272294

273295

274-
<!--https://www.html5rocks.com/en/tutorials/workers/basics/-->
275-
<section>
296+
<section>
276297
<h3>Workers</h3>
277298
<ul class="no-bullets">
278299
<li>Isolated thread</li>
@@ -281,11 +302,11 @@ <h3>Workers</h3>
281302
<li>Messages copied, not shared</li>
282303
<li>Same Origin</li>
283304
</ul>
284-
</section>
305+
</section>
285306

286307
<section>
287308
<h3>Main script:</h3>
288-
<pre><code class="js" data-trim data-noescape>
309+
<pre><code class="javascript" data-trim data-noescape>
289310
var worker = new Worker('task.js');
290311

291312
worker.addEventListener('message', function(e) {
@@ -301,11 +322,14 @@ <h3>Main script:</h3>
301322
</code></pre>
302323

303324
<h3>task.js (the worker)</h3>
304-
<pre><code class="js" data-trim data-noescape>
325+
<pre><code class="javascript" data-trim data-noescape>
305326
self.addEventListener('message', function(e) {
306327
self.postMessage(e.data);
307328
}, false);
308329
</code></pre>
330+
331+
<a href="https://www.html5rocks.com/en/tutorials/workers/basics/" class="credits" target="_blank">Code from https://www.html5rocks.com/en/tutorials/workers/basics/</a>
332+
309333
</section>
310334

311335
<section>
@@ -342,12 +366,15 @@ <h1 style="font-size: 3em;"class="flippedColor" >machine</h1>
342366
<section>
343367
<h3>On install - as a dependency</h3>
344368
<img class="plain" style="max-height: 12em;" src="/src/img/cm-on-install-dep.png">
369+
<p>
370+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Image from Jake Archibald`s offline cookbook</a>
371+
</p>
345372
</section>
346373

347374

348375
<section>
349376
<h3>On install - as a dependency</h3>
350-
<pre><code class="js" data-trim data-noescape>
377+
<pre><code class="javascript" data-trim data-noescape>
351378
self.addEventListener('install', function(event) {
352379
event.waitUntil(
353380
caches.open('mysite-static-v3').then(function(cache) {
@@ -361,18 +388,24 @@ <h3>On install - as a dependency</h3>
361388
})
362389
);
363390
});
364-
</code></pre>
391+
</code></pre>
392+
<p>
393+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Code from Jake Archibald`s offline cookbook</a>
394+
</p>
365395
</section>
366396

367397
<section>
368398
<h3>On install - not as a dependency</h3>
369399
<img class="plain" style="max-height: 12em;" src="/src/img/cm-on-install-not.png">
400+
<p>
401+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Image from Jake Archibald`s offline cookbook</a>
402+
</p>
370403
</section>
371404

372405

373406
<section>
374407
<h3>On install - not as a dependency</h3>
375-
<pre><code class="js" data-trim data-noescape>
408+
<pre><code class="javascript" data-trim data-noescape>
376409
self.addEventListener('install', function(event) {
377410
event.waitUntil(
378411
caches.open('mygame-core-v1').then(function(cache) {
@@ -385,19 +418,25 @@ <h3>On install - not as a dependency</h3>
385418
})
386419
);
387420
});
388-
</code></pre>
421+
</code></pre>
422+
<p>
423+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Code from Jake Archibald`s offline cookbook</a>
424+
</p>
389425
</section>
390426

391427

392428
<section>
393429
<h3>On activate - cleanup</h3>
394430
<img class="plain" style="max-height: 12em;" src="/src/img/cm-on-activate.png">
431+
<p>
432+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Image from Jake Archibald`s offline cookbook</a>
433+
</p>
395434
</section>
396435

397436

398437
<section>
399438
<h3>On activate - cleanup</h3>
400-
<pre><code class="js" data-trim data-noescape>
439+
<pre><code class="javascript" data-trim data-noescape>
401440
self.addEventListener('activate', function(event) {
402441
event.waitUntil(
403442
caches.keys().then(function(cacheNames) {
@@ -413,19 +452,25 @@ <h3>On activate - cleanup</h3>
413452
})
414453
);
415454
});
416-
</code></pre>
455+
</code></pre>
456+
<p>
457+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Code from Jake Archibald`s offline cookbook</a>
458+
</p>
417459
</section>
418460

419461

420462
<section>
421463
<h3>On user interaction</h3>
422464
<img class="plain" style="max-height: 12em;" src="/src/img/cm-on-user-interaction.png">
465+
<p>
466+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Image from Jake Archibald`s offline cookbook</a>
467+
</p>
423468
</section>
424469

425470

426471
<section>
427472
<h3>On user interaction</h3>
428-
<pre><code class="js" data-trim data-noescape>
473+
<pre><code class="javascript" data-trim data-noescape>
429474
document.querySelector('.cache-article').addEventListener('click', function(event) {
430475
event.preventDefault();
431476

@@ -440,7 +485,10 @@ <h3>On user interaction</h3>
440485
});
441486
});
442487
});
443-
</code></pre>
488+
</code></pre>
489+
<p>
490+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Code from Jake Archibald`s offline cookbook</a>
491+
</p>
444492
</section>
445493

446494

@@ -458,6 +506,9 @@ <h1>And more ...</h1>
458506
<img class="plain" style="max-height: 2.4em;" src="/src/img/ss-cache-then-network.png">
459507
<img class="plain" style="max-height: 2.4em;" src="/src/img/ss-generic-fallback.png">
460508
<img class="plain" style="max-height: 2.4em;" src="/src/img/ss-sw-side-templating.png">
509+
<p>
510+
<a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/" class="credits" target="_blank">Images from Jake Archibald`s offline cookbook</a>
511+
</p>
461512
</section>
462513

463514

‎src/css/common.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ html body {
7676
color: var(--link-color);
7777
}
7878

79+
.reveal .slides a.credits {
80+
font-size: 0.75em;
81+
}
82+
7983
.reveal .slides button {
8084
background: var(--bg-color);
8185
padding: 0.5em;

0 commit comments

Comments
 (0)