├── .gitignore ├── .idea ├── .name ├── encodings.xml ├── es6-fm.iml ├── misc.xml ├── modules.xml ├── scopes │ └── scope_settings.xml ├── vcs.xml └── workspace.xml ├── README.md ├── app.yaml ├── arrow.html ├── classes.html ├── collections.html ├── config.rb ├── defaultparams.html ├── destructure.html ├── generators.html ├── history.html ├── images ├── adobe.png ├── barchart.png ├── blueprints.jpg ├── bucketes6.png ├── bucketharmony.png ├── bucketnext.png ├── buckets.png ├── celebration1.gif ├── chart.png ├── chrome-logo-tiny.png ├── cppvsjava.gif ├── dndgeek.jpg ├── doublestamp.gif ├── eatajax.jpg ├── es6.png ├── firefoxsuperhero.jpg ├── frontendmasters-frosty.png ├── frontendmasters-frosty2.png ├── frontendmasters_logo.png ├── google_developers_icon_128.png ├── google_developers_logo.png ├── google_developers_logo_tiny.png ├── google_developers_logo_white.png ├── io2012_logo.png ├── io2013_logo.png ├── jumpcanyon.jpg ├── lensesforcardboard.jpg ├── mozilla.png ├── mozillafoundation.png ├── mrafternoont.jpg ├── mrt.jpeg ├── ms.png ├── netscape.png ├── norrisgif.gif ├── nutshell.gif ├── ohwow.gif ├── opera.png ├── periodic.png ├── ptcfoo1.png ├── ptcfoo2.png ├── ptcfoo3.png ├── ptcfoon.png ├── ptcimproper.png ├── ptcproper.png ├── pyramid.png ├── sky.jpg ├── tc39.png ├── teamfight.gif ├── teamfight.jpg ├── teamfight.png ├── teamfightmaxresdefault.jpg ├── teamfightwinner.png ├── uofi.jpg ├── wtf1.jpg ├── yahoo.png └── ysoasync.jpg ├── index.html ├── js ├── hammer.js ├── modernizr.custom.45394.js ├── order.js ├── polyfills │ ├── classList.min.js │ ├── dataset.min.js │ └── history.min.js ├── prettify │ ├── lang-apollo.js │ ├── lang-clj.js │ ├── lang-css.js │ ├── lang-go.js │ ├── lang-hs.js │ ├── lang-lisp.js │ ├── lang-lua.js │ ├── lang-ml.js │ ├── lang-n.js │ ├── lang-proto.js │ ├── lang-scala.js │ ├── lang-sql.js │ ├── lang-tex.js │ ├── lang-vb.js │ ├── lang-vhdl.js │ ├── lang-wiki.js │ ├── lang-xq.js │ ├── lang-yaml.js │ ├── prettify.css │ └── prettify.js ├── require-1.0.8.min.js ├── slide-controller.js ├── slide-deck.js └── slides.js ├── letconst.html ├── modules.html ├── promises.html ├── ptc.html ├── rest.html ├── samples ├── MonsterClass.js ├── let.js └── temp │ └── let.tcr.js ├── scripts └── md │ ├── README.md │ ├── base.html │ ├── render.py │ └── slides.md ├── serve.sh ├── slide_config.js ├── spread.html ├── temp.html ├── template.html └── theme ├── css ├── default.css ├── fe.css └── phone.css └── scss ├── _base.scss ├── default.scss ├── fe.scss └── phone.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | *.pyc 10 | *.min.css 11 | #*.min.js 12 | .sass-cache/* 13 | 14 | # Packages # 15 | ############ 16 | # it's better to unpack these files and commit the raw source 17 | # git has its own built in compression methods 18 | *.7z 19 | *.dmg 20 | *.gz 21 | *.iso 22 | *.rar 23 | *.tar 24 | *.zip 25 | 26 | # Logs and databases # 27 | ###################### 28 | *.log 29 | *.sql 30 | *.sqlite 31 | 32 | # OS generated files # 33 | ###################### 34 | .DS_Store* 35 | ehthumbs.db 36 | Icon? 37 | Thumbs.db 38 | *~ 39 | .idea 40 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | es6-fm -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/es6-fm.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/scopes/scope_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Aaron's Instructions 2 | 3 | ###To run this, you simply launch a static server and open the `index.html` 4 | -------------------------------------------------------------------------------- /app.yaml: -------------------------------------------------------------------------------- 1 | application: my-io-talk 2 | version: 1 3 | runtime: python27 4 | api_version: 1 5 | threadsafe: yes 6 | 7 | handlers: 8 | - url: / 9 | static_files: template.html 10 | upload: template\.html 11 | 12 | - url: /slide_config\.js 13 | static_files: slide_config.js 14 | upload: slide_config\.js 15 | 16 | - url: /js 17 | static_dir: js 18 | 19 | - url: /theme 20 | static_dir: theme 21 | 22 | - url: /images 23 | static_dir: images 24 | -------------------------------------------------------------------------------- /arrow.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | Arrow Functions 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

34 |

35 |

36 |

Arrow Functions

37 |

38 |
39 | 40 | 41 | 42 |
43 |

Arrow Functions

44 |
45 |
46 |

Precedence

47 |
    48 |
  • Lambda
    • 49 |
  • Fat Arrow Function
    • 50 |
51 |

Defacto Standards

52 |
    53 |
  • CoffeeScript
    • 54 |
  • Fat Arrow Functions
    • 55 |
  • Skinny Arrow Functions
    • 56 |
  • ES6 uses Fat Arrow syntax, calls it Arrow Function
    • 57 |
58 |
59 | 68 | 69 | 70 | 71 |
72 |

Arrow Functions

73 |
74 |
75 |

Compared to regular functions

76 | 
 77 |   var fn1 = function(){return 2;};
 78 |   var fn2 = () => 2;
 79 |
80 |

81 |

    82 |
  • Parens for the parameters
    • 83 |
  • No braces for single-line arrow function bodies
    • 84 |
  • Single-line arrow, implicit return statement
    • 85 |
86 |

87 |
88 | 89 | 90 | 91 |
92 |

Arrow Functions

93 |
94 |
95 |

Parenthesis-Parameter Rules

96 | 
 97 |   var x;
 98 |   x = () => {};     //No parameters, MUST HAVE PARENS
 99 |   x = (val) => {};  //One parameter w/ parens, OPTIONAL
100 |   x = val => {};    //One parameter w/o parens, OPTIONAL
101 |   x = (y, z) => {}; //Two or more parameters, MUST HAVE PARENS
102 |   x = y, z => {};   //Syntax Error: must wrap with parens when using multiple params
103 |
104 |

105 |

    106 |
  • Must use parens, unless one param
    • 107 |
108 |

109 |
110 | 111 | 112 | 113 |
114 |

Arrow Functions

115 |
116 |
117 |

Method Body Declarations

118 | 
119 |   var square;
120 |   square = x => x * x; //Body w/o braces
121 |   square = x => { return x * x}; //Body w/ braces
122 |
123 |

124 |

    125 |
  • w/o braces, implicit return
    • 126 |
  • w/ braces, explicit return
    • 127 |
128 |

129 |
130 | 131 | 132 | 133 |
134 |

Arrow Functions

135 |
136 |
137 |

Use them in place of anonymous functions

138 | 
139 |   let nums = [1, 2, 3];
140 |   let res = nums.map( n => n * n );
141 |   console.log(res); //Logs [1, 4, 9]
142 |
143 |
144 | 145 | 146 | 147 |
148 |

Arrow Functions

149 |
150 |
151 |

Return an object literal, wrap in parens

152 | 
153 |   let key_maker = val => ({key: val});
154 |   console.log(key_maker(100)); //Logs {key: 100}
155 |
156 |
157 | 158 | 159 | 160 |
161 |

Arrow Functions

162 |
163 |
164 |

The REAL benefit: lexical binding of 'this'

165 |
    166 |
  • 167 | 
    168 |   var Widget = {
169 |     init: function() {
170 |       document.addEventListener("click", function(event) {
171 |         this.doSomething(event.type); // Why does this error?
172 |       }, false);
173 |     },
174 | 
175 |     doSomething: function(type) {
176 |       console.log("Handling " + type  + " event");
177 |     }
178 |   };
179 |   Widget.init();
180 |
    181 |
    • 182 |
183 | 184 |
185 | 208 | 209 | 210 | 211 |
212 |

Arrow Functions

213 |
214 |
215 |

The REAL benefit: lexical binding of 'this'

216 |
    217 |
  • 218 | 
    219 |   var Widget = {
220 |     init: function(){
221 |       document.addEventListener("click", (event) => {
222 |         this.doSomething(event.type);
223 |       }, false);
224 |     },
225 | 
226 |     doSomething: function(type){
227 |       console.log("Handling " + type  + " event");
228 |     }
229 |   };
230 |   Widget.init();
231 |
    232 |
    • 233 |
234 | 235 |
236 | 237 | 238 | 239 |
240 |

Arrow Functions

241 |
242 |
243 |

Additional Info about '() => {}'

244 |
    245 |
  • 246 | 
    247 |   typeof ()=>{}; //'function'
248 |
    249 |
    • 250 |
  • Although it doesn't have a prototype, this still happens :(
    • 251 |
  • 252 | 
    253 |   Object.getPrototypeOf(()=>{}); //Function.prototype
254 |
    255 |
    • 256 |
  • 257 | 
    258 |   var Foo = function(){};
259 |   var Bar = () => {};
260 |   new Foo();
261 |   new Bar(); //Bar is not a contructor
262 |
    263 |
    • 264 |
265 | 266 |
267 | 268 | 269 | 270 |
271 |

Arrow Functions

272 |
273 |
274 |

Additional Info about '() => {}'

275 |
    276 |
  • 277 | 
    278 |   function Widget(){
279 |     this.id = 123;
280 |     this.log = () => {
281 |       console.log('Widget Log', this.id);
282 |     }
283 |   }
284 |   var pseudoWidget = {
285 |     id: 456
286 |   };
287 |   new Widget().log.call(pseudoWidget);  //What Logs?
288 |
    289 |
    • 290 |
  • You can't alter 'this' on arrow functions
    • 291 |
292 | 293 |
294 | 295 | 296 | 297 |
298 |

Arrow Functions

299 |
300 |
301 |

Still Use Functions

302 |
    303 |
  • 304 | 
    305 |   var Widget = {
306 |     init: function(){
307 |       document.addEventListener("click", (event) => {
308 |         this.doSomething(event.type);
309 |       }, false);
310 |     },
311 | 
312 |     doSomething: function(type){
313 |       console.log("Handling " + type  + " event");
314 |     }
315 |   };
316 |   Widget.init();
317 |
    318 |
    • 319 |
  • Copy this to Traceur REPL
    • 320 |
321 | 322 |
323 | 324 | 325 | 326 | 327 | 328 | 329 |
330 |

Arrow Functions

331 |

Questions???

332 |
333 | #ES6 #frontendmasters @js_dev 334 |
335 |
336 | 337 | 338 | 339 |
340 |

TRY THIS

341 |
342 |
343 |
    344 |
  • Arrow Functions in Firefox
    • 345 |
  • Arrow Functions in Traceur Repl
    • 346 |
  • Arrow Functions inside an Object
    • 347 |
  • Arrow Functions with EventHandlers
    • 348 |
  • Arrow Functions w/ Array.prototype methods
    • 349 |
350 |
351 | 352 | 353 | 354 | 355 | 356 | 357 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /classes.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | Classes 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

34 |

35 |

36 |

Classes

37 |

38 |
39 | 40 | 41 | 42 |
43 |

Classes

44 |
45 |
46 |

47 |

History of ES6 Classes

48 |

49 | 55 |
56 | 57 | 58 | 59 |
60 |

Classes

61 |
62 |
63 |

64 |

Russell Leggett's Proposal

65 |

66 |
    67 |
  • Called "Maximall Minimal Classes"
    • 68 |
  • Points out the need for classes in JS, a la CoffeeScript
    • 69 |
  • Make sure it is enhanceable in Future Harmony Releases
    • 70 |
  • Points to Brendan's Goldilocks Proposal
    • 71 |
  • Proposes new analogy - Safety School Proposal
    • 72 |
  • Since we must have something in ES6, what is it?
    • 73 |
  • Wins Out! (not easily)
    • 74 |
75 |
76 | 77 | 78 | 79 |
80 |

Classes

81 |
82 | 88 | 89 | 90 | 91 |
92 |

Classes

93 |
94 |
95 |

96 |

Example

97 |

98 | 
 99 |   //FUNCTIONALLY SAME
100 |   function Foo(){
101 |     //....
102 |   }
103 | 
104 |   class Foo{
105 |     //....
106 |   }
107 |
108 |
    109 |
  • Class is sugar
    • 110 |
111 |
112 | 113 | 114 | 115 |
116 |

Classes

117 |
118 |
119 |

120 | Constructor 121 |

122 | 
123 |   class Animal{
124 | 
125 |     constructor(name){
126 |       this.name = name;
127 |     }
128 | 
129 |   }
130 |
131 |
132 | 133 | 134 | 135 |
136 |

Classes

137 |
138 |
139 |

140 | 141 | Private Properties 142 | 143 |

144 | 
145 |   const monsterHealth = Symbol();
146 | 
147 |   class Monster{
148 |     constructor(name, health){
149 |       this.name = name;
150 |       this[monsterHealth] = health;
151 |     }
152 |   }
153 |
154 | 157 |
158 | 159 | 160 | 161 |
162 |

Classes

163 |
164 |
165 |

166 | Get Properties 167 |

168 | 
169 |   const monsterHealth = Symbol();
170 | 
171 |   class Monster{
172 |     constructor(name, health){
173 |       this.name = name;
174 |       this[monsterHealth] = health;
175 |     }
176 | 
177 |     get isAlive(){
178 |       return this[monsterHealth] > 0;
179 |     }
180 |   }
181 |
182 |
183 | 193 | 194 | 195 | 196 |
197 |

Classes

198 |
199 |
200 |

201 | Set Properties 202 |

203 | 
204 |   //....
205 |   class Monster{
206 |     constructor(name, health){
207 |       this.name = name;
208 |       this[monsterHealth] = health;
209 |     }
210 |     //...
211 |     set health(val){
212 |       if(val < 0){
213 |         throw new Error('Health must be positive number');
214 |       }
215 |       this[monsterHealth] = val;
216 |     }
217 |   }
218 |
219 |
220 | 230 | 231 | 232 | 233 |
234 |

Classes

235 |
236 |
237 |

238 | Prototype Methods 239 |

240 | 
241 |   //....
242 |   class Monster{
243 |     constructor(name, health){
244 |       this.name = name;
245 |       this[monsterHealth] = health;
246 |     }
247 |     //...
248 |     attack(target){
249 |       console.log(this.name + ' attacks ' + target.name);
250 |     }
251 |   }
252 |
253 |
254 | 266 | 267 | 268 | 269 |
270 |

Classes

271 |
272 |
273 |

274 | Class Properties 275 |

276 | 
277 |   class Monster{
278 |     constructor(name, health){
279 |       this.name = name;
280 |       this[monsterHealth] = health;
281 |       Monster.allMonsters.push(this);
282 |     }
283 |     //....
284 |   }
285 |   Monster.allMonsters = [];
286 |
287 |
288 | 289 | 290 | 291 |
292 |

Classes

293 |
294 |
295 |

296 | Extend Classes 297 |

298 | 
299 |   class Monster{
300 |     constructor(name, health){
301 |       this.name = name;
302 |       this[monsterHealth] = health;
303 |     }
304 |     //....
305 |   }
306 |   class Godzilla extends Monster{
307 |     constructor(){
308 |       super('Godzilla', 10000);
309 |     }
310 |   }
311 |
312 |
    313 |
  • Could we do this with Prototypes?
    • 314 |
315 |
316 | 329 | 330 | 331 | 332 |
333 |

Classes

334 |
335 |
336 |

337 | Extend Classes via Expression 338 |

339 | 
340 |   class MySocket extends getClass() {
341 |     //....
342 |   }
343 | 
344 |   function getClass(){
345 |     if(isIE()){
346 |       return IEWebSocketImpl;
347 |     }
348 |     return WebSocket;
349 | 
350 |     function isIE(){
351 |       return false;
352 |     }
353 |   }
354 |
355 |
356 | 357 | 358 | 359 |
360 |

Classes

361 |
362 |
363 | 
364 |   class Monster{
365 |     constructor(name, health){
366 |       this.name = name;
367 |       this[monsterHealth] = health;
368 |     }
369 |     attack(target){...}
370 |   }
371 |   class Godzilla extends Monster{
372 |     constructor(){
373 |       super('Godzilla', 10000);
374 |     }
375 |     attack(target){
376 |       super(target);        //Currently THIS
377 |       super.attack(target); //Could Change to THIS
378 |     }
379 |   }
380 |
381 |
382 | 383 | 384 | 385 |
386 |

Classes

387 |
388 |
389 |

390 |

Classes Do No Hoist

391 |

392 | 
393 |   new Bar(); //runtime error
394 | 
395 |   class Bar{}
396 |
397 |
398 | 399 | 400 | 401 |
402 |

Classes

403 |
404 |
405 |

406 |

If no constructor, default behavior

407 |

408 | 
409 | 
410 |   constructor(..args){
411 |     super(...args);
412 |   }
413 | 
414 |
415 |
416 | 417 | 418 | 419 |
420 |

Classes

421 |
422 |
423 |

424 |

Benefits of Classes

425 |

426 |
    427 |
  • Sugar
    • 428 |
  • Easier to learn #noobs
    • 429 |
  • Subclassing easier to learn #noobs
    • 430 |
  • Subclass built in object: Array, Error, etc
    • 431 |
  • Code more portable between JS Frameworks
    • 432 |
  • Possible Perf Gains
    • 433 |
434 |
435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 |
444 |

Classes

445 |

Questions???

446 |
447 | #ES6 #frontendmasters @js_dev 448 |
449 |
450 | 451 | 452 | 453 |
454 |

TRY THIS

455 |
456 |
457 |
    458 |
  • Classes in Traceur Repl
    • 459 |
  • Classes: build some inheritance model
    • 460 |
  • Build something in Prototype AND Class
    • 461 |
  • Force method implementation from Super
    • 462 |
463 |
464 | 465 | 466 | 467 | 468 | 469 | 470 | 481 | 482 | 483 | 484 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "theme/css" 6 | sass_dir = "theme/scss" 7 | images_dir = "images" 8 | javascripts_dir = "js" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | output_style = :compressed #:expanded or :nested or :compact or :compressed 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # To disable debugging comments that display the original location of your selectors. Uncomment: 17 | # line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /defaultparams.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | Default Parameters 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

34 |

35 |

36 |

Default Parameters

37 |

38 |
39 | 40 | 41 | 42 |
43 |

Default Parameters

44 |
45 |
46 |

47 |

Some other ways to refer to Default Parameters

48 |

49 |
    50 |
  • Default Arguments
    • 51 |
  • Default Values
    • 52 |
  • Default Function Arguments
    • 53 |
  • Default Optional Parameters
    • 54 |
  • Some similar combination of words from these examples
    • 55 |
56 |
57 | 58 | 59 | 60 |
61 |

Default Parameters

62 |
63 |
64 |

65 |

New version of an old seam

66 |

67 |
    68 |
  • C++
    • 69 |
  • Python
    • 70 |
  • CoffeeScript
    • 71 |
  • Now EcmaScript!!!!
    • 72 |
73 |
74 | 75 | 76 | 77 |
78 |

Default Parameters

79 |
80 |
81 |

82 |

Historically

83 |

84 |
    85 |
  • 86 | Short-Circuit Expression 87 | 
     88 |   function test(a) {
 89 |     a = a || getSomeDefaultValue(); //DATAPROOFING
 90 |     /*Your code*/
 91 |   }
 92 |
    93 |
    • 94 |
  • 95 | Ternary Expression 96 | 
     97 |   function test(a) {
 98 |     a = a ? a : getSomeDefaultValue(); //DATAPROOFING
 99 |     /*Your code*/
100 |   }
101 |
    102 |
    • 103 |
104 |
105 | 106 | 107 | 108 |
109 |

Default Parameters

110 |
111 |
112 |

113 |

Example of Default Parameters

114 |

115 | 
116 |   function sayHello(name = "World"){
117 |     console.log("Hello " + name + "!");
118 |   }
119 | 
120 |   sayHello("Dt Dew"); //Hello Dt Dew!
121 |   sayHello(""); //Hello !
122 |   sayHello(); //Hello World!
123 |   sayHello(undefined);//Hello World!
124 |
125 |
    126 |
  • Undefined: TRIGGERS
    • 127 |
  • Empty String: DOESN'T TRIGGER
    • 128 |
  • Explicit Undefined: TRIGGERS
    • 129 |
130 | 131 |
132 | 133 | 134 | 135 |
136 |

Default Parameters

137 |
138 |
139 |

140 |

What Does It Get Me?

141 |

142 |
    143 |
  • Write Less Code
    • 144 |
  • Easier To Read
    • 145 |
  • Improved Predictability
    • 146 |
147 |
148 | 149 | 150 | 151 |
152 |

Default Parameters

153 |
154 |
155 |

156 |

Assign w/ Method Call

157 |

158 |
    159 |
  • 160 | 
    161 |   function getRand(){
162 |     return Math.ceil(Math.random() * 10000000) + new Date().getTime();
163 |   }
164 | 
165 |   function myFunction(id=getRand()){
166 |     console.log("My ID: "+id);
167 |   }
168 | 
169 |   myFunction(); //Logs random number
170 |   myFunction(1); //Logs 1
171 |
    172 |
    • 173 |
174 |
175 | 176 | 177 | 178 |
179 |

Default Parameters

180 |
181 |
182 |

183 |

Assign w/ Method Call

184 |

185 |
    186 |
  • 187 | 
    188 |   function die(){ throw "x"}
189 | 
190 |   function test(a = die()){
191 |     console.log("Didn't die");
192 |   }
193 | 
194 |   test(); // throws an error
195 |
    196 |
    • 197 |
  • Errors from a default assignment function will propagate
    • 198 |
199 |
200 | 201 | 202 | 203 |
204 |

Default Parameters

205 |
206 |
207 |

208 |

Assignment Happens Lexically (Avoid This)

209 |

210 |
    211 |
  • 212 | 
    213 |   var x = "INIT";
214 | 
215 |   function test(a = x) {
216 |     var x;
217 |     return a;
218 |   }
219 | 
220 |   console.log( test() ); //undefined
221 |
    222 |
    • 223 |
  • Using var names that exist in your function scope will result in 'undefined'
    • 224 |
225 |
226 | 227 | 228 | 229 |
230 |

Default Parameters

231 |
232 |
233 |

234 |

Not All Parameters Need Default Values

235 |

236 |
    237 |
  • 238 | 
    239 |   function test(a = 1, b){ //This is OK
240 |     //Your Code
241 |   }
242 |
    243 |
    • 244 | 245 |
246 |
247 | 248 | 249 | 250 |
251 |

Default Parameters

252 |
253 |
254 |

255 |

Default Param Gotchas

256 |

257 |
    258 |
  • 259 | 
    260 |   function f ( ...rest=100 ) { //SyntaxError
261 |     //Your Code
262 |   }
263 |
    264 |
    • 265 |
  • No Default Params w/ Rest Parameters
    • 266 |
267 |
268 | 269 | 270 | 271 |
272 |

Default Parameters

273 |
274 |
275 |

276 |

Default Param Gotchas

277 |

278 |
    279 |
  • 280 | 
    281 |   function test (a = 1, b = 2, c = 3){
282 |     console.log(arguments.length);
283 |   }
284 | 
285 |   test(); // 0
286 |   test(1); // 1
287 |   test(1,2,3,4,5); // 5
288 |
    289 |
    • 290 |
  • Default Values don't appear in 'arguments'
    • 291 |
292 |
293 | 294 | 295 | 296 | 297 | 298 | 299 |
300 |

Default Parameters

301 |

Questions???

302 |
303 | #ES6 #frontendmasters @js_dev 304 |
305 |
306 | 307 | 308 | 309 |
310 |

TRY THIS

311 |
312 |
313 |
    314 |
  • Default Parameters in Firefox
    • 315 |
  • Default Parameters in Traceur Repl
    • 316 |
  • Default Parameters via method call
    • 317 |
318 |
319 | 320 | 321 | 322 | 323 | 324 | 325 | 336 | 337 | 338 | 339 | -------------------------------------------------------------------------------- /images/adobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/adobe.png -------------------------------------------------------------------------------- /images/barchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/barchart.png -------------------------------------------------------------------------------- /images/blueprints.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/blueprints.jpg -------------------------------------------------------------------------------- /images/bucketes6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/bucketes6.png -------------------------------------------------------------------------------- /images/bucketharmony.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/bucketharmony.png -------------------------------------------------------------------------------- /images/bucketnext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/bucketnext.png -------------------------------------------------------------------------------- /images/buckets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/buckets.png -------------------------------------------------------------------------------- /images/celebration1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/celebration1.gif -------------------------------------------------------------------------------- /images/chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/chart.png -------------------------------------------------------------------------------- /images/chrome-logo-tiny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/chrome-logo-tiny.png -------------------------------------------------------------------------------- /images/cppvsjava.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/cppvsjava.gif -------------------------------------------------------------------------------- /images/dndgeek.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/dndgeek.jpg -------------------------------------------------------------------------------- /images/doublestamp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/doublestamp.gif -------------------------------------------------------------------------------- /images/eatajax.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/eatajax.jpg -------------------------------------------------------------------------------- /images/es6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/es6.png -------------------------------------------------------------------------------- /images/firefoxsuperhero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/firefoxsuperhero.jpg -------------------------------------------------------------------------------- /images/frontendmasters-frosty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/frontendmasters-frosty.png -------------------------------------------------------------------------------- /images/frontendmasters-frosty2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/frontendmasters-frosty2.png -------------------------------------------------------------------------------- /images/frontendmasters_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/frontendmasters_logo.png -------------------------------------------------------------------------------- /images/google_developers_icon_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/google_developers_icon_128.png -------------------------------------------------------------------------------- /images/google_developers_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/google_developers_logo.png -------------------------------------------------------------------------------- /images/google_developers_logo_tiny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/google_developers_logo_tiny.png -------------------------------------------------------------------------------- /images/google_developers_logo_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/google_developers_logo_white.png -------------------------------------------------------------------------------- /images/io2012_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/io2012_logo.png -------------------------------------------------------------------------------- /images/io2013_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/io2013_logo.png -------------------------------------------------------------------------------- /images/jumpcanyon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/jumpcanyon.jpg -------------------------------------------------------------------------------- /images/lensesforcardboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/lensesforcardboard.jpg -------------------------------------------------------------------------------- /images/mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/mozilla.png -------------------------------------------------------------------------------- /images/mozillafoundation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/mozillafoundation.png -------------------------------------------------------------------------------- /images/mrafternoont.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/mrafternoont.jpg -------------------------------------------------------------------------------- /images/mrt.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/mrt.jpeg -------------------------------------------------------------------------------- /images/ms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ms.png -------------------------------------------------------------------------------- /images/netscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/netscape.png -------------------------------------------------------------------------------- /images/norrisgif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/norrisgif.gif -------------------------------------------------------------------------------- /images/nutshell.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/nutshell.gif -------------------------------------------------------------------------------- /images/ohwow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ohwow.gif -------------------------------------------------------------------------------- /images/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/opera.png -------------------------------------------------------------------------------- /images/periodic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/periodic.png -------------------------------------------------------------------------------- /images/ptcfoo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ptcfoo1.png -------------------------------------------------------------------------------- /images/ptcfoo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ptcfoo2.png -------------------------------------------------------------------------------- /images/ptcfoo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ptcfoo3.png -------------------------------------------------------------------------------- /images/ptcfoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ptcfoon.png -------------------------------------------------------------------------------- /images/ptcimproper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ptcimproper.png -------------------------------------------------------------------------------- /images/ptcproper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ptcproper.png -------------------------------------------------------------------------------- /images/pyramid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/pyramid.png -------------------------------------------------------------------------------- /images/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/sky.jpg -------------------------------------------------------------------------------- /images/tc39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/tc39.png -------------------------------------------------------------------------------- /images/teamfight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/teamfight.gif -------------------------------------------------------------------------------- /images/teamfight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/teamfight.jpg -------------------------------------------------------------------------------- /images/teamfight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/teamfight.png -------------------------------------------------------------------------------- /images/teamfightmaxresdefault.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/teamfightmaxresdefault.jpg -------------------------------------------------------------------------------- /images/teamfightwinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/teamfightwinner.png -------------------------------------------------------------------------------- /images/uofi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/uofi.jpg -------------------------------------------------------------------------------- /images/wtf1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/wtf1.jpg -------------------------------------------------------------------------------- /images/yahoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/yahoo.png -------------------------------------------------------------------------------- /images/ysoasync.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/images/ysoasync.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 |
39 |

40 |

41 |

42 |
43 | 44 | 45 | 46 |
47 |

About me!

48 |
49 |
50 |
    51 |
  • Came from QA (5 years)
    • 52 |
  • College Dropout (SLCC Bruins!)
    • 53 |
  • Associate Computer Science
    • 54 |
  • Started learning JavaScript with???
    • 55 |
  • Husband & Father 56 |
      57 |
    • 2 Girls
      • 58 |
    • 1 Boy w/ 1 OTW
      • 59 |
    60 |
    • 61 |
  • <3 Ice Fishing
    • 62 |
  • 63 | I have an identical twin brother
    64 | I am the smart, good-looking one 65 |
    • 66 |
67 |
68 | 73 | 74 | 75 |
76 |

About me!

77 |
78 | 92 | 93 | 94 | 95 | 96 |
97 |

Need a Volunteer

98 |
99 |
100 |

Write Down All Questions

101 |
102 | 103 | 104 | 105 |
106 |

Mad Props

107 |
108 |
109 |

Rick Waldron - @rwaldron

110 |
    111 |
  • Curated Slides
    • 112 |
  • Showed Errors
    • 113 |
  • Insite
    • 114 |
115 |
116 | 117 | 118 | 119 | 120 |
121 |

Today's Topics

122 |
123 |
124 |
    125 |
  • History of JavaScript
    • 126 |
  • Steering Committee
    • 127 |
  • New Features
    • 128 |
  • Build Tools
    • 129 |
130 |
131 | 132 | 133 | 134 | 135 |
136 |

Today's Topics - ES6 Compatability Table

137 |
138 |
139 | 140 |
141 | 142 | 143 | 144 |
145 |

Schedule Format

146 |
147 |
148 |

As we talk about the new features

149 |
    150 |
  • Teaching Time 151 |
      152 |
    • Origin
      • 153 |
    • Examples
      • 154 |
    155 |
    • 156 |
  • Hacking Time 157 |
      158 |
    • Browser
      • 159 |
    • Node.js
      • 160 |
    • Traceur REPL
      • 161 |
    162 |
    • 163 |
164 | 165 |

We want everyone to practice writing the new syntax

166 |
167 | 168 | 169 | 170 |
171 |

TOPICS

172 |
173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 227 | 228 | 229 | 230 | -------------------------------------------------------------------------------- /js/modernizr.custom.45394.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.5.3 (Custom Build) | MIT & BSD 2 | * Build: http://www.modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexbox_legacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-mq-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function C(a){i.cssText=a}function D(a,b){return C(m.join(a+";")+(b||""))}function E(a,b){return typeof a===b}function F(a,b){return!!~(""+a).indexOf(b)}function G(a,b){for(var d in a)if(i[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function H(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}return!1}function I(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),H(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d",a,""].join(""),k.id=g,(l?k:m).innerHTML+=h,m.appendChild(k),l||(m.style.background="",f.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},y=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return x("@media "+b+" { #"+g+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=v.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e});var J=function(c,d){var f=c.join(""),g=d.length;x(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch||(j.touch&&j.touch.offsetTop)===9,e.csstransforms3d=(j.csstransforms3d&&j.csstransforms3d.offsetLeft)===9&&j.csstransforms3d.offsetHeight===3,e.generatedcontent=(j.generatedcontent&&j.generatedcontent.offsetHeight)>=1,e.fontface=/src/i.test(h)&&h.indexOf(d.split(" ")[0])===0},g,d)}(['@font-face {font-family:"font";src:url("https://")}',["@media (",m.join("touch-enabled),("),g,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",m.join("transform-3d),("),g,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join(""),['#generatedcontent:after{content:"',k,'";visibility:hidden}'].join("")],["fontface","touch","csstransforms3d","generatedcontent"]);r.flexbox=function(){return I("flexOrder")},r["flexbox-legacy"]=function(){return I("boxDirection")},r.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},r.canvastext=function(){return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){try{var d=b.createElement("canvas"),e;e=!(!a.WebGLRenderingContext||!d.getContext("experimental-webgl")&&!d.getContext("webgl")),d=c}catch(f){e=!1}return e},r.touch=function(){return e.touch},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.websqldatabase=function(){return!!a.openDatabase},r.indexedDB=function(){return!!I("indexedDB",a)},r.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return!!a.history&&!!history.pushState},r.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},r.websockets=function(){for(var b=-1,c=o.length;++b0&&g.splice(0,a);setTimeout(function(){b.parentNode.removeChild(b)},15)}}function m(a){var b,c;a.setAttribute("data-orderloaded","loaded");for(a=0;c=h[a];a++)if((b=i[c])&&b.getAttribute("data-orderloaded")==="loaded")delete i[c],require.addScriptToDom(b);else break;a>0&&h.splice(0, 7 | a)}var f=typeof document!=="undefined"&&typeof window!=="undefined"&&document.createElement("script"),n=f&&(f.async||window.opera&&Object.prototype.toString.call(window.opera)==="[object Opera]"||"MozAppearance"in document.documentElement.style),o=f&&f.readyState==="uninitialized",l=/^(complete|loaded)$/,g=[],j={},i={},h=[],f=null;define({version:"1.0.5",load:function(a,b,c,e){var d;b.nameToUrl?(d=b.nameToUrl(a,null),require.s.skipAsync[d]=!0,n||e.isBuild?b([a],c):o?(e=require.s.contexts._,!e.urlFetched[d]&& 8 | !e.loaded[a]&&(e.urlFetched[d]=!0,require.resourcesReady(!1),e.scriptCount+=1,d=require.attach(d,e,a,null,null,m),i[a]=d,h.push(a)),b([a],c)):b.specified(a)?b([a],c):(g.push({name:a,req:b,onLoad:c}),require.attach(d,null,a,k,"script/cache"))):b([a],c)}})})(); 9 | -------------------------------------------------------------------------------- /js/polyfills/classList.min.js: -------------------------------------------------------------------------------- 1 | /* @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | "use strict";if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(a){var f="classList",d="prototype",e=(a.HTMLElement||a.Element)[d],g=Object;strTrim=String[d].trim||function(){return this.replace(/^\s+|\s+$/g,"")},arrIndexOf=Array[d].indexOf||function(k){for(var j=0,h=this.length;j")&&c[0]);return a>4?a:!1}();return a},m.isInternetExplorer=function(){var a=m.isInternetExplorer.cached=typeof m.isInternetExplorer.cached!="undefined"?m.isInternetExplorer.cached:Boolean(m.getInternetExplorerMajorVersion());return a},m.emulated={pushState:!Boolean(a.history&&a.history.pushState&&a.history.replaceState&&!/ Mobile\/([1-7][a-z]|(8([abcde]|f(1[0-8]))))/i.test(e.userAgent)&&!/AppleWebKit\/5([0-2]|3[0-2])/i.test(e.userAgent)),hashChange:Boolean(!("onhashchange"in a||"onhashchange"in d)||m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<8)},m.enabled=!m.emulated.pushState,m.bugs={setHash:Boolean(!m.emulated.pushState&&e.vendor==="Apple Computer, Inc."&&/AppleWebKit\/5([0-2]|3[0-3])/.test(e.userAgent)),safariPoll:Boolean(!m.emulated.pushState&&e.vendor==="Apple Computer, Inc."&&/AppleWebKit\/5([0-2]|3[0-3])/.test(e.userAgent)),ieDoubleCheck:Boolean(m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<8),hashEscape:Boolean(m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<7)},m.isEmptyObject=function(a){for(var b in a)return!1;return!0},m.cloneObject=function(a){var b,c;return a?(b=k.stringify(a),c=k.parse(b)):c={},c},m.getRootUrl=function(){var a=d.location.protocol+"//"+(d.location.hostname||d.location.host);if(d.location.port||!1)a+=":"+d.location.port;return a+="/",a},m.getBaseHref=function(){var a=d.getElementsByTagName("base"),b=null,c="";return a.length===1&&(b=a[0],c=b.href.replace(/[^\/]+$/,"")),c=c.replace(/\/+$/,""),c&&(c+="/"),c},m.getBaseUrl=function(){var a=m.getBaseHref()||m.getBasePageUrl()||m.getRootUrl();return a},m.getPageUrl=function(){var a=m.getState(!1,!1),b=(a||{}).url||d.location.href,c;return c=b.replace(/\/+$/,"").replace(/[^\/]+$/,function(a,b,c){return/\./.test(a)?a:a+"/"}),c},m.getBasePageUrl=function(){var a=d.location.href.replace(/[#\?].*/,"").replace(/[^\/]+$/,function(a,b,c){return/[^\/]$/.test(a)?"":a}).replace(/\/+$/,"")+"/";return a},m.getFullUrl=function(a,b){var c=a,d=a.substring(0,1);return b=typeof b=="undefined"?!0:b,/[a-z]+\:\/\//.test(a)||(d==="/"?c=m.getRootUrl()+a.replace(/^\/+/,""):d==="#"?c=m.getPageUrl().replace(/#.*/,"")+a:d==="?"?c=m.getPageUrl().replace(/[\?#].*/,"")+a:b?c=m.getBaseUrl()+a.replace(/^(\.\/)+/,""):c=m.getBasePageUrl()+a.replace(/^(\.\/)+/,"")),c.replace(/\#$/,"")},m.getShortUrl=function(a){var b=a,c=m.getBaseUrl(),d=m.getRootUrl();return m.emulated.pushState&&(b=b.replace(c,"")),b=b.replace(d,"/"),m.isTraditionalAnchor(b)&&(b="./"+b),b=b.replace(/^(\.\/)+/g,"./").replace(/\#$/,""),b},m.store={},m.idToState=m.idToState||{},m.stateToId=m.stateToId||{},m.urlToId=m.urlToId||{},m.storedStates=m.storedStates||[],m.savedStates=m.savedStates||[],m.normalizeStore=function(){m.store.idToState=m.store.idToState||{},m.store.urlToId=m.store.urlToId||{},m.store.stateToId=m.store.stateToId||{}},m.getState=function(a,b){typeof a=="undefined"&&(a=!0),typeof b=="undefined"&&(b=!0);var c=m.getLastSavedState();return!c&&b&&(c=m.createStateObject()),a&&(c=m.cloneObject(c),c.url=c.cleanUrl||c.url),c},m.getIdByState=function(a){var b=m.extractId(a.url),c;if(!b){c=m.getStateString(a);if(typeof m.stateToId[c]!="undefined")b=m.stateToId[c];else if(typeof m.store.stateToId[c]!="undefined")b=m.store.stateToId[c];else{for(;;){b=(new Date).getTime()+String(Math.random()).replace(/\D/g,"");if(typeof m.idToState[b]=="undefined"&&typeof m.store.idToState[b]=="undefined")break}m.stateToId[c]=b,m.idToState[b]=a}}return b},m.normalizeState=function(a){var b,c;if(!a||typeof a!="object")a={};if(typeof a.normalized!="undefined")return a;if(!a.data||typeof a.data!="object")a.data={};b={},b.normalized=!0,b.title=a.title||"",b.url=m.getFullUrl(m.unescapeString(a.url||d.location.href)),b.hash=m.getShortUrl(b.url),b.data=m.cloneObject(a.data),b.id=m.getIdByState(b),b.cleanUrl=b.url.replace(/\??\&_suid.*/,""),b.url=b.cleanUrl,c=!m.isEmptyObject(b.data);if(b.title||c)b.hash=m.getShortUrl(b.url).replace(/\??\&_suid.*/,""),/\?/.test(b.hash)||(b.hash+="?"),b.hash+="&_suid="+b.id;return b.hashedUrl=m.getFullUrl(b.hash),(m.emulated.pushState||m.bugs.safariPoll)&&m.hasUrlDuplicate(b)&&(b.url=b.hashedUrl),b},m.createStateObject=function(a,b,c){var d={data:a,title:b,url:c};return d=m.normalizeState(d),d},m.getStateById=function(a){a=String(a);var c=m.idToState[a]||m.store.idToState[a]||b;return c},m.getStateString=function(a){var b,c,d;return b=m.normalizeState(a),c={data:b.data,title:a.title,url:a.url},d=k.stringify(c),d},m.getStateId=function(a){var b,c;return b=m.normalizeState(a),c=b.id,c},m.getHashByState=function(a){var b,c;return b=m.normalizeState(a),c=b.hash,c},m.extractId=function(a){var b,c,d;return c=/(.*)\&_suid=([0-9]+)$/.exec(a),d=c?c[1]||a:a,b=c?String(c[2]||""):"",b||!1},m.isTraditionalAnchor=function(a){var b=!/[\/\?\.]/.test(a);return b},m.extractState=function(a,b){var c=null,d,e;return b=b||!1,d=m.extractId(a),d&&(c=m.getStateById(d)),c||(e=m.getFullUrl(a),d=m.getIdByUrl(e)||!1,d&&(c=m.getStateById(d)),!c&&b&&!m.isTraditionalAnchor(a)&&(c=m.createStateObject(null,null,e))),c},m.getIdByUrl=function(a){var c=m.urlToId[a]||m.store.urlToId[a]||b;return c},m.getLastSavedState=function(){return m.savedStates[m.savedStates.length-1]||b},m.getLastStoredState=function(){return m.storedStates[m.storedStates.length-1]||b},m.hasUrlDuplicate=function(a){var b=!1,c;return c=m.extractState(a.url),b=c&&c.id!==a.id,b},m.storeState=function(a){return m.urlToId[a.url]=a.id,m.storedStates.push(m.cloneObject(a)),a},m.isLastSavedState=function(a){var b=!1,c,d,e;return m.savedStates.length&&(c=a.id,d=m.getLastSavedState(),e=d.id,b=c===e),b},m.saveState=function(a){return m.isLastSavedState(a)?!1:(m.savedStates.push(m.cloneObject(a)),!0)},m.getStateByIndex=function(a){var b=null;return typeof a=="undefined"?b=m.savedStates[m.savedStates.length-1]:a<0?b=m.savedStates[m.savedStates.length+a]:b=m.savedStates[a],b},m.getHash=function(){var a=m.unescapeHash(d.location.hash);return a},m.unescapeString=function(b){var c=b,d;for(;;){d=a.unescape(c);if(d===c)break;c=d}return c},m.unescapeHash=function(a){var b=m.normalizeHash(a);return b=m.unescapeString(b),b},m.normalizeHash=function(a){var b=a.replace(/[^#]*#/,"").replace(/#.*/,"");return b},m.setHash=function(a,b){var c,e,f;return b!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.setHash,args:arguments,queue:b}),!1):(c=m.escapeHash(a),m.busy(!0),e=m.extractState(a,!0),e&&!m.emulated.pushState?m.pushState(e.data,e.title,e.url,!1):d.location.hash!==c&&(m.bugs.setHash?(f=m.getPageUrl(),m.pushState(null,null,f+"#"+c,!1)):d.location.hash=c),m)},m.escapeHash=function(b){var c=m.normalizeHash(b);return c=a.escape(c),m.bugs.hashEscape||(c=c.replace(/\%21/g,"!").replace(/\%26/g,"&").replace(/\%3D/g,"=").replace(/\%3F/g,"?")),c},m.getHashByUrl=function(a){var b=String(a).replace(/([^#]*)#?([^#]*)#?(.*)/,"$2");return b=m.unescapeHash(b),b},m.setTitle=function(a){var b=a.title,c;b||(c=m.getStateByIndex(0),c&&c.url===a.url&&(b=c.title||m.options.initialTitle));try{d.getElementsByTagName("title")[0].innerHTML=b.replace("<","<").replace(">",">").replace(" & "," & ")}catch(e){}return d.title=b,m},m.queues=[],m.busy=function(a){typeof a!="undefined"?m.busy.flag=a:typeof m.busy.flag=="undefined"&&(m.busy.flag=!1);if(!m.busy.flag){h(m.busy.timeout);var b=function(){var a,c,d;if(m.busy.flag)return;for(a=m.queues.length-1;a>=0;--a){c=m.queues[a];if(c.length===0)continue;d=c.shift(),m.fireQueueItem(d),m.busy.timeout=g(b,m.options.busyDelay)}};m.busy.timeout=g(b,m.options.busyDelay)}return m.busy.flag},m.busy.flag=!1,m.fireQueueItem=function(a){return a.callback.apply(a.scope||m,a.args||[])},m.pushQueue=function(a){return m.queues[a.queue||0]=m.queues[a.queue||0]||[],m.queues[a.queue||0].push(a),m},m.queue=function(a,b){return typeof a=="function"&&(a={callback:a}),typeof b!="undefined"&&(a.queue=b),m.busy()?m.pushQueue(a):m.fireQueueItem(a),m},m.clearQueue=function(){return m.busy.flag=!1,m.queues=[],m},m.stateChanged=!1,m.doubleChecker=!1,m.doubleCheckComplete=function(){return m.stateChanged=!0,m.doubleCheckClear(),m},m.doubleCheckClear=function(){return m.doubleChecker&&(h(m.doubleChecker),m.doubleChecker=!1),m},m.doubleCheck=function(a){return m.stateChanged=!1,m.doubleCheckClear(),m.bugs.ieDoubleCheck&&(m.doubleChecker=g(function(){return m.doubleCheckClear(),m.stateChanged||a(),!0},m.options.doubleCheckInterval)),m},m.safariStatePoll=function(){var b=m.extractState(d.location.href),c;if(!m.isLastSavedState(b))c=b;else return;return c||(c=m.createStateObject()),m.Adapter.trigger(a,"popstate"),m},m.back=function(a){return a!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.back,args:arguments,queue:a}),!1):(m.busy(!0),m.doubleCheck(function(){m.back(!1)}),n.go(-1),!0)},m.forward=function(a){return a!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.forward,args:arguments,queue:a}),!1):(m.busy(!0),m.doubleCheck(function(){m.forward(!1)}),n.go(1),!0)},m.go=function(a,b){var c;if(a>0)for(c=1;c<=a;++c)m.forward(b);else{if(!(a<0))throw new Error("History.go: History.go requires a positive or negative integer passed.");for(c=-1;c>=a;--c)m.back(b)}return m};if(m.emulated.pushState){var o=function(){};m.pushState=m.pushState||o,m.replaceState=m.replaceState||o}else m.onPopState=function(b,c){var e=!1,f=!1,g,h;return m.doubleCheckComplete(),g=m.getHash(),g?(h=m.extractState(g||d.location.href,!0),h?m.replaceState(h.data,h.title,h.url,!1):(m.Adapter.trigger(a,"anchorchange"),m.busy(!1)),m.expectedStateId=!1,!1):(e=m.Adapter.extractEventData("state",b,c)||!1,e?f=m.getStateById(e):m.expectedStateId?f=m.getStateById(m.expectedStateId):f=m.extractState(d.location.href),f||(f=m.createStateObject(null,null,d.location.href)),m.expectedStateId=!1,m.isLastSavedState(f)?(m.busy(!1),!1):(m.storeState(f),m.saveState(f),m.setTitle(f),m.Adapter.trigger(a,"statechange"),m.busy(!1),!0))},m.Adapter.bind(a,"popstate",m.onPopState),m.pushState=function(b,c,d,e){if(m.getHashByUrl(d)&&m.emulated.pushState)throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(e!==!1&&m.busy())return m.pushQueue({scope:m,callback:m.pushState,args:arguments,queue:e}),!1;m.busy(!0);var f=m.createStateObject(b,c,d);return m.isLastSavedState(f)?m.busy(!1):(m.storeState(f),m.expectedStateId=f.id,n.pushState(f.id,f.title,f.url),m.Adapter.trigger(a,"popstate")),!0},m.replaceState=function(b,c,d,e){if(m.getHashByUrl(d)&&m.emulated.pushState)throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(e!==!1&&m.busy())return m.pushQueue({scope:m,callback:m.replaceState,args:arguments,queue:e}),!1;m.busy(!0);var f=m.createStateObject(b,c,d);return m.isLastSavedState(f)?m.busy(!1):(m.storeState(f),m.expectedStateId=f.id,n.replaceState(f.id,f.title,f.url),m.Adapter.trigger(a,"popstate")),!0};if(f){try{m.store=k.parse(f.getItem("History.store"))||{}}catch(p){m.store={}}m.normalizeStore()}else m.store={},m.normalizeStore();m.Adapter.bind(a,"beforeunload",m.clearAllIntervals),m.Adapter.bind(a,"unload",m.clearAllIntervals),m.saveState(m.storeState(m.extractState(d.location.href,!0))),f&&(m.onUnload=function(){var a,b;try{a=k.parse(f.getItem("History.store"))||{}}catch(c){a={}}a.idToState=a.idToState||{},a.urlToId=a.urlToId||{},a.stateToId=a.stateToId||{};for(b in m.idToState){if(!m.idToState.hasOwnProperty(b))continue;a.idToState[b]=m.idToState[b]}for(b in m.urlToId){if(!m.urlToId.hasOwnProperty(b))continue;a.urlToId[b]=m.urlToId[b]}for(b in m.stateToId){if(!m.stateToId.hasOwnProperty(b))continue;a.stateToId[b]=m.stateToId[b]}m.store=a,m.normalizeStore(),f.setItem("History.store",k.stringify(a))},m.intervalList.push(i(m.onUnload,m.options.storeInterval)),m.Adapter.bind(a,"beforeunload",m.onUnload),m.Adapter.bind(a,"unload",m.onUnload));if(!m.emulated.pushState){m.bugs.safariPoll&&m.intervalList.push(i(m.safariStatePoll,m.options.safariPollInterval));if(e.vendor==="Apple Computer, Inc."||(e.appCodeName||"")==="Mozilla")m.Adapter.bind(a,"hashchange",function(){m.Adapter.trigger(a,"popstate")}),m.getHash()&&m.Adapter.onDomLoad(function(){m.Adapter.trigger(a,"hashchange")})}},m.init()})(window) -------------------------------------------------------------------------------- /js/prettify/lang-apollo.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-apollo.js -------------------------------------------------------------------------------- /js/prettify/lang-clj.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (C) 2011 Google Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | var a=null; 17 | PR.registerLangHandler(PR.createSimpleLexer([["opn",/^[([{]+/,a,"([{"],["clo",/^[)\]}]+/,a,")]}"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:def|if|do|let|quote|var|fn|loop|recur|throw|try|monitor-enter|monitor-exit|defmacro|defn|defn-|macroexpand|macroexpand-1|for|doseq|dosync|dotimes|and|or|when|not|assert|doto|proxy|defstruct|first|rest|cons|defprotocol|deftype|defrecord|reify|defmulti|defmethod|meta|with-meta|ns|in-ns|create-ns|import|intern|refer|alias|namespace|resolve|ref|deref|refset|new|set!|memfn|to-array|into-array|aset|gen-class|reduce|map|filter|find|nil?|empty?|hash-map|hash-set|vec|vector|seq|flatten|reverse|assoc|dissoc|list|list?|disj|get|union|difference|intersection|extend|extend-type|extend-protocol|prn)\b/,a], 18 | ["typ",/^:[\dA-Za-z-]+/]]),["clj"]); 19 | -------------------------------------------------------------------------------- /js/prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", 2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /js/prettify/lang-go.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-go.js -------------------------------------------------------------------------------- /js/prettify/lang-hs.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t-\r ]+/,null,"\t\n \r "],["str",/^"(?:[^\n\f\r"\\]|\\[\S\s])*(?:"|$)/,null,'"'],["str",/^'(?:[^\n\f\r'\\]|\\[^&])'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:--+[^\n\f\r]*|{-(?:[^-]|-+[^}-])*-})/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^\d'A-Za-z]|$)/, 2 | null],["pln",/^(?:[A-Z][\w']*\.)*[A-Za-z][\w']*/],["pun",/^[^\d\t-\r "'A-Za-z]+/]]),["hs"]); 3 | -------------------------------------------------------------------------------- /js/prettify/lang-lisp.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(+/,a,"("],["clo",/^\)+/,a,")"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,a], 3 | ["lit",/^[+-]?(?:[#0]x[\da-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[de][+-]?\d+)?)/i],["lit",/^'(?:-*(?:\w|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?)?/],["pln",/^-*(?:[_a-z]|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?/i],["pun",/^[^\w\t\n\r "'-);\\\xa0]+/]]),["cl","el","lisp","scm"]); 4 | -------------------------------------------------------------------------------- /js/prettify/lang-lua.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-lua.js -------------------------------------------------------------------------------- /js/prettify/lang-ml.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-ml.js -------------------------------------------------------------------------------- /js/prettify/lang-n.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["str",/^(?:'(?:[^\n\r'\\]|\\.)*'|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,a,'"'],["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,a,"#"],["pln",/^\s+/,a," \r\n\t\xa0"]],[["str",/^@"(?:[^"]|"")*(?:"|$)/,a],["str",/^<#[^#>]*(?:#>|$)/,a],["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,a],["com",/^\/\/[^\n\r]*/,a],["com",/^\/\*[\S\s]*?(?:\*\/|$)/, 3 | a],["kwd",/^(?:abstract|and|as|base|catch|class|def|delegate|enum|event|extern|false|finally|fun|implements|interface|internal|is|macro|match|matches|module|mutable|namespace|new|null|out|override|params|partial|private|protected|public|ref|sealed|static|struct|syntax|this|throw|true|try|type|typeof|using|variant|virtual|volatile|when|where|with|assert|assert2|async|break|checked|continue|do|else|ensures|for|foreach|if|late|lock|new|nolate|otherwise|regexp|repeat|requires|return|surroundwith|unchecked|unless|using|while|yield)\b/, 4 | a],["typ",/^(?:array|bool|byte|char|decimal|double|float|int|list|long|object|sbyte|short|string|ulong|uint|ufloat|ulong|ushort|void)\b/,a],["lit",/^@[$_a-z][\w$@]*/i,a],["typ",/^@[A-Z]+[a-z][\w$@]*/,a],["pln",/^'?[$_a-z][\w$@]*/i,a],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,a,"0123456789"],["pun",/^.[^\s\w"-$'./@`]*/,a]]),["n","nemerle"]); 5 | -------------------------------------------------------------------------------- /js/prettify/lang-proto.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.sourceDecorator({keywords:"bytes,default,double,enum,extend,extensions,false,group,import,max,message,option,optional,package,repeated,required,returns,rpc,service,syntax,to,true",types:/^(bool|(double|s?fixed|[su]?int)(32|64)|float|string)\b/,cStyleComments:!0}),["proto"]); 2 | -------------------------------------------------------------------------------- /js/prettify/lang-scala.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-scala.js -------------------------------------------------------------------------------- /js/prettify/lang-sql.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-sql.js -------------------------------------------------------------------------------- /js/prettify/lang-tex.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-tex.js -------------------------------------------------------------------------------- /js/prettify/lang-vb.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-vb.js -------------------------------------------------------------------------------- /js/prettify/lang-vhdl.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-vhdl.js -------------------------------------------------------------------------------- /js/prettify/lang-wiki.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronfrost/es6-femasters-slides/bc18a5d79c6aaa192b9bc159a9a1bdc9e2b373e4/js/prettify/lang-wiki.js -------------------------------------------------------------------------------- /js/prettify/lang-yaml.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:>?|]+/,a,":|>?"],["dec",/^%(?:YAML|TAG)[^\n\r#]+/,a,"%"],["typ",/^&\S+/,a,"&"],["typ",/^!\S*/,a,"!"],["str",/^"(?:[^"\\]|\\.)*(?:"|$)/,a,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,a,"'"],["com",/^#[^\n\r]*/,a,"#"],["pln",/^\s+/,a," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\n\r]|$)/],["pun",/^-/],["kwd",/^\w+:[\n\r ]/],["pln",/^\w+/]]),["yaml","yml"]); 3 | -------------------------------------------------------------------------------- /js/prettify/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /js/prettify/prettify.js: -------------------------------------------------------------------------------- 1 | var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; 2 | (function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= 3 | [],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), 9 | l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, 10 | q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, 11 | q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, 12 | "");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), 13 | a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} 14 | for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], 18 | "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], 19 | H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], 20 | J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ 21 | I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), 22 | ["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", 23 | /^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), 24 | ["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", 25 | hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= 26 | !k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p0&&(g.splice(m-1,2),m-=2);m=q.pkgs[g=b[0]];b=b.join("/");m&&b===g+"/"+m.main&&(b=g)}else b.indexOf("./")=== 9 | 0&&(b=b.substring(2));return b}function l(b,f){var g=b?b.indexOf("!"):-1,m=null,a=f?f.name:null,h=b,e,d;g!==-1&&(m=b.substring(0,g),b=b.substring(g+1,b.length));m&&(m=c(m,a));b&&(m?e=(g=n[m])&&g.normalize?g.normalize(b,function(b){return c(b,a)}):c(b,a):(e=c(b,a),d=G[e],d||(d=i.nameToUrl(b,null,f),G[e]=d)));return{prefix:m,name:e,parentMap:f,url:d,originalName:h,fullName:m?m+"!"+(e||""):e}}function j(){var b=!0,f=q.priorityWait,g,a;if(f){for(a=0;g=f[a];a++)if(!s[g]){b=!1;break}b&&delete q.priorityWait}return b} 10 | function k(b,f,g){return function(){var a=ha.call(arguments,0),c;if(g&&K(c=a[a.length-1]))c.__requireJsBuild=!0;a.push(f);return b.apply(null,a)}}function t(b,f,g){f=k(g||i.require,b,f);$(f,{nameToUrl:k(i.nameToUrl,b),toUrl:k(i.toUrl,b),defined:k(i.requireDefined,b),specified:k(i.requireSpecified,b),isBrowser:d.isBrowser});return f}function p(b){var f,g,a,c=b.callback,h=b.map,e=h.fullName,ca=b.deps;a=b.listeners;var j=q.requireExecCb||d.execCb;if(c&&K(c)){if(q.catchError.define)try{g=j(e,b.callback, 11 | ca,n[e])}catch(k){f=k}else g=j(e,b.callback,ca,n[e]);if(e)(c=b.cjsModule)&&c.exports!==r&&c.exports!==n[e]?g=n[e]=b.cjsModule.exports:g===r&&b.usingExports?g=n[e]:(n[e]=g,H[e]&&(T[e]=!0))}else e&&(g=n[e]=c,H[e]&&(T[e]=!0));if(x[b.id])delete x[b.id],b.isDone=!0,i.waitCount-=1,i.waitCount===0&&(J=[]);delete M[e];if(d.onResourceLoad&&!b.placeholder)d.onResourceLoad(i,h,b.depArray);if(f)return g=(e?l(e).url:"")||f.fileName||f.sourceURL,a=f.moduleTree,f=P("defineerror",'Error evaluating module "'+e+'" at location "'+ 12 | g+'":\n'+f+"\nfileName:"+g+"\nlineNumber: "+(f.lineNumber||f.line),f),f.moduleName=e,f.moduleTree=a,d.onError(f);for(f=0;c=a[f];f++)c(g);return r}function u(b,f){return function(g){b.depDone[f]||(b.depDone[f]=!0,b.deps[f]=g,b.depCount-=1,b.depCount||p(b))}}function o(b,f){var g=f.map,a=g.fullName,c=g.name,h=N[b]||(N[b]=n[b]),e;if(!f.loading)f.loading=!0,e=function(b){f.callback=function(){return b};p(f);s[f.id]=!0;A()},e.fromText=function(b,f){var g=Q;s[b]=!1;i.scriptCount+=1;i.fake[b]=!0;g&&(Q=!1); 13 | d.exec(f);g&&(Q=!0);i.completeLoad(b)},a in n?e(n[a]):h.load(c,t(g.parentMap,!0,function(b,a){var c=[],e,m;for(e=0;m=b[e];e++)m=l(m,g.parentMap),b[e]=m.fullName,m.prefix||c.push(b[e]);f.moduleDeps=(f.moduleDeps||[]).concat(c);return i.require(b,a)}),e,q)}function y(b){x[b.id]||(x[b.id]=b,J.push(b),i.waitCount+=1)}function D(b){this.listeners.push(b)}function v(b,f){var g=b.fullName,a=b.prefix,c=a?N[a]||(N[a]=n[a]):null,h,e;g&&(h=M[g]);if(!h&&(e=!0,h={id:(a&&!c?O++ +"__p@:":"")+(g||"__r@"+O++),map:b, 14 | depCount:0,depDone:[],depCallbacks:[],deps:[],listeners:[],add:D},B[h.id]=!0,g&&(!a||N[a])))M[g]=h;a&&!c?(g=l(a),a in n&&!n[a]&&(delete n[a],delete R[g.url]),a=v(g,!0),a.add(function(){var f=l(b.originalName,b.parentMap),f=v(f,!0);h.placeholder=!0;f.add(function(b){h.callback=function(){return b};p(h)})})):e&&f&&(s[h.id]=!1,i.paused.push(h),y(h));return h}function C(b,f,a,c){var b=l(b,c),d=b.name,h=b.fullName,e=v(b),j=e.id,k=e.deps,o;if(h){if(h in n||s[j]===!0||h==="jquery"&&q.jQuery&&q.jQuery!== 15 | a().fn.jquery)return;B[j]=!0;s[j]=!0;h==="jquery"&&a&&W(a())}e.depArray=f;e.callback=a;for(a=0;a0)return r;if(q.priorityWait)if(j())A();else return r;for(h in s)if(!(h in L)&&(c=!0,!s[h]))if(b)a+=h+" ";else if(l=!0,h.indexOf("!")===-1){k=[];break}else(e=M[h]&&M[h].moduleDeps)&&k.push.apply(k,e);if(!c&&!i.waitCount)return r;if(b&&a)return b=P("timeout","Load timeout for modules: "+a),b.requireType="timeout",b.requireModules=a,b.contextName=i.contextName,d.onError(b); 18 | if(l&&k.length)for(a=0;h=x[k[a]];a++)if(h=F(h,{})){z(h,{});break}if(!b&&(l||i.scriptCount)){if((I||da)&&!X)X=setTimeout(function(){X=0;E()},50);return r}if(i.waitCount){for(a=0;h=J[a];a++)z(h,{});i.paused.length&&A();Y<5&&(Y+=1,E())}Y=0;d.checkReadyState();return r}var i,A,q={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},catchError:{}},S=[],B={require:!0,exports:!0,module:!0},G={},n={},s={},x={},J=[],R={},O=0,M={},N={},H={},T={},Z=0;W=function(b){if(!i.jQuery&&(b=b||(typeof jQuery!=="undefined"?jQuery: 19 | null))&&!(q.jQuery&&b.fn.jquery!==q.jQuery)&&("holdReady"in b||"readyWait"in b))if(i.jQuery=b,w(["jquery",[],function(){return jQuery}]),i.scriptCount)V(b,!0),i.jQueryIncremented=!0};A=function(){var b,a,c,l,k,h;i.takeGlobalQueue();Z+=1;if(i.scriptCount<=0)i.scriptCount=0;for(;S.length;)if(b=S.shift(),b[0]===null)return d.onError(P("mismatch","Mismatched anonymous define() module: "+b[b.length-1]));else w(b);if(!q.priorityWait||j())for(;i.paused.length;){k=i.paused;i.pausedCount+=k.length;i.paused= 20 | [];for(l=0;b=k[l];l++)a=b.map,c=a.url,h=a.fullName,a.prefix?o(a.prefix,b):!R[c]&&!s[h]&&((q.requireLoad||d.load)(i,h,c),c.indexOf("empty:")!==0&&(R[c]=!0));i.startTime=(new Date).getTime();i.pausedCount-=k.length}Z===1&&E();Z-=1;return r};i={contextName:a,config:q,defQueue:S,waiting:x,waitCount:0,specified:B,loaded:s,urlMap:G,urlFetched:R,scriptCount:0,defined:n,paused:[],pausedCount:0,plugins:N,needFullExec:H,fake:{},fullExec:T,managerCallbacks:M,makeModuleMap:l,normalize:c,configure:function(b){var a, 21 | c,d;b.baseUrl&&b.baseUrl.charAt(b.baseUrl.length-1)!=="/"&&(b.baseUrl+="/");a=q.paths;d=q.pkgs;$(q,b,!0);if(b.paths){for(c in b.paths)c in L||(a[c]=b.paths[c]);q.paths=a}if((a=b.packagePaths)||b.packages){if(a)for(c in a)c in L||aa(d,a[c],c);b.packages&&aa(d,b.packages);q.pkgs=d}if(b.priority)c=i.requireWait,i.requireWait=!1,A(),i.require(b.priority),A(),i.requireWait=c,q.priorityWait=b.priority;if(b.deps||b.callback)i.require(b.deps||[],b.callback)},requireDefined:function(b,a){return l(b,a).fullName in 22 | n},requireSpecified:function(b,a){return l(b,a).fullName in B},require:function(b,c,g){if(typeof b==="string"){if(K(c))return d.onError(P("requireargs","Invalid require call"));if(d.get)return d.get(i,b,c);c=l(b,c);b=c.fullName;return!(b in n)?d.onError(P("notloaded","Module name '"+c.fullName+"' has not been loaded yet for context: "+a)):n[b]}(b&&b.length||c)&&C(null,b,c,g);if(!i.requireWait)for(;!i.scriptCount&&i.paused.length;)A();return i.require},takeGlobalQueue:function(){U.length&&(ja.apply(i.defQueue, 23 | [i.defQueue.length-1,0].concat(U)),U=[])},completeLoad:function(b){var a;for(i.takeGlobalQueue();S.length;)if(a=S.shift(),a[0]===null){a[0]=b;break}else if(a[0]===b)break;else w(a),a=null;a?w(a):w([b,[],b==="jquery"&&typeof jQuery!=="undefined"?function(){return jQuery}:null]);d.isAsync&&(i.scriptCount-=1);A();d.isAsync||(i.scriptCount-=1)},toUrl:function(b,a){var c=b.lastIndexOf("."),d=null;c!==-1&&(d=b.substring(c,b.length),b=b.substring(0,c));return i.nameToUrl(b,d,a)},nameToUrl:function(b,a,g){var l, 24 | k,h,e,j=i.config,b=c(b,g&&g.fullName);if(d.jsExtRegExp.test(b))a=b+(a?a:"");else{l=j.paths;k=j.pkgs;g=b.split("/");for(e=g.length;e>0;e--)if(h=g.slice(0,e).join("/"),l[h]){g.splice(0,e,l[h]);break}else if(h=k[h]){b=b===h.name?h.location+"/"+h.main:h.location;g.splice(0,e,b);break}a=g.join("/")+(a||".js");a=(a.charAt(0)==="/"||a.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+a}return j.urlArgs?a+((a.indexOf("?")===-1?"?":"&")+j.urlArgs):a}};i.jQueryCheck=W;i.resume=A;return i}function ka(){var a,c,d;if(C&&C.readyState=== 25 | "interactive")return C;a=document.getElementsByTagName("script");for(c=a.length-1;c>-1&&(d=a[c]);c--)if(d.readyState==="interactive")return C=d;return null}var la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/require\(\s*["']([^'"\s]+)["']\s*\)/g,fa=/^\.\//,ba=/\.js$/,O=Object.prototype.toString,u=Array.prototype,ha=u.slice,ja=u.splice,I=!!(typeof window!=="undefined"&&navigator&&document),da=!I&&typeof importScripts!=="undefined",na=I&&navigator.platform==="PLAYSTATION 3"?/^complete$/:/^(complete|loaded)$/, 26 | ea=typeof opera!=="undefined"&&opera.toString()==="[object Opera]",L={},D={},U=[],C=null,Y=0,Q=!1,ia={require:!0,module:!0,exports:!0},d,u={},J,y,v,E,o,w,F,B,z,W,X;if(typeof define==="undefined"){if(typeof requirejs!=="undefined")if(K(requirejs))return;else u=requirejs,requirejs=r;typeof require!=="undefined"&&!K(require)&&(u=require,require=r);d=requirejs=function(a,c,d){var j="_",k;!G(a)&&typeof a!=="string"&&(k=a,G(c)?(a=c,c=d):a=[]);if(k&&k.context)j=k.context;d=D[j]||(D[j]=ga(j));k&&d.configure(k); 27 | return d.require(a,c)};d.config=function(a){return d(a)};require||(require=d);d.toUrl=function(a){return D._.toUrl(a)};d.version="1.0.8";d.jsExtRegExp=/^\/|:|\?|\.js$/;y=d.s={contexts:D,skipAsync:{}};if(d.isAsync=d.isBrowser=I)if(v=y.head=document.getElementsByTagName("head")[0],E=document.getElementsByTagName("base")[0])v=y.head=E.parentNode;d.onError=function(a){throw a;};d.load=function(a,c,l){d.resourcesReady(!1);a.scriptCount+=1;d.attach(l,a,c);if(a.jQuery&&!a.jQueryIncremented)V(a.jQuery,!0), 28 | a.jQueryIncremented=!0};define=function(a,c,d){var j,k;typeof a!=="string"&&(d=c,c=a,a=null);G(c)||(d=c,c=[]);!c.length&&K(d)&&d.length&&(d.toString().replace(la,"").replace(ma,function(a,d){c.push(d)}),c=(d.length===1?["require"]:["require","exports","module"]).concat(c));if(Q&&(j=J||ka()))a||(a=j.getAttribute("data-requiremodule")),k=D[j.getAttribute("data-requirecontext")];(k?k.defQueue:U).push([a,c,d]);return r};define.amd={multiversion:!0,plugins:!0,jQuery:!0};d.exec=function(a){return eval(a)}; 29 | d.execCb=function(a,c,d,j){return c.apply(j,d)};d.addScriptToDom=function(a){J=a;E?v.insertBefore(a,E):v.appendChild(a);J=null};d.onScriptLoad=function(a){var c=a.currentTarget||a.srcElement,l;if(a.type==="load"||c&&na.test(c.readyState))C=null,a=c.getAttribute("data-requirecontext"),l=c.getAttribute("data-requiremodule"),D[a].completeLoad(l),c.detachEvent&&!ea?c.detachEvent("onreadystatechange",d.onScriptLoad):c.removeEventListener("load",d.onScriptLoad,!1)};d.attach=function(a,c,l,j,k,o){var p; 30 | if(I)return j=j||d.onScriptLoad,p=c&&c.config&&c.config.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),p.type=k||c&&c.config.scriptType||"text/javascript",p.charset="utf-8",p.async=!y.skipAsync[a],c&&p.setAttribute("data-requirecontext",c.contextName),p.setAttribute("data-requiremodule",l),p.attachEvent&&!(p.attachEvent.toString&&p.attachEvent.toString().indexOf("[native code]")<0)&&!ea?(Q=!0,o?p.onreadystatechange=function(){if(p.readyState=== 31 | "loaded")p.onreadystatechange=null,p.attachEvent("onreadystatechange",j),o(p)}:p.attachEvent("onreadystatechange",j)):p.addEventListener("load",j,!1),p.src=a,o||d.addScriptToDom(p),p;else da&&(importScripts(a),c.completeLoad(l));return null};if(I){o=document.getElementsByTagName("script");for(B=o.length-1;B>-1&&(w=o[B]);B--){if(!v)v=w.parentNode;if(F=w.getAttribute("data-main")){if(!u.baseUrl)o=F.split("/"),w=o.pop(),o=o.length?o.join("/")+"/":"./",u.baseUrl=o,F=w.replace(ba,"");u.deps=u.deps?u.deps.concat(F): 32 | [F];break}}}d.checkReadyState=function(){var a=y.contexts,c;for(c in a)if(!(c in L)&&a[c].waitCount)return;d.resourcesReady(!0)};d.resourcesReady=function(a){var c,l;d.resourcesDone=a;if(d.resourcesDone)for(l in a=y.contexts,a)if(!(l in L)&&(c=a[l],c.jQueryIncremented))V(c.jQuery,!1),c.jQueryIncremented=!1};d.pageLoaded=function(){if(document.readyState!=="complete")document.readyState="complete"};if(I&&document.addEventListener&&!document.readyState)document.readyState="loading",window.addEventListener("load", 33 | d.pageLoaded,!1);d(u);if(d.isAsync&&typeof setTimeout!=="undefined")z=y.contexts[u.context||"_"],z.requireWait=!0,setTimeout(function(){z.requireWait=!1;z.scriptCount||z.resume();d.checkReadyState()},0)}})(); 34 | -------------------------------------------------------------------------------- /js/slide-controller.js: -------------------------------------------------------------------------------- 1 | (function(window) { 2 | 3 | var ORIGIN_ = location.protocol + '//' + location.host; 4 | 5 | function SlideController() { 6 | this.popup = null; 7 | this.isPopup = window.opener; 8 | 9 | if (this.setupDone()) { 10 | window.addEventListener('message', this.onMessage_.bind(this), false); 11 | 12 | // Close popups if we reload the main window. 13 | window.addEventListener('beforeunload', function(e) { 14 | if (this.popup) { 15 | this.popup.close(); 16 | } 17 | }.bind(this), false); 18 | } 19 | } 20 | 21 | SlideController.PRESENTER_MODE_PARAM = 'presentme'; 22 | 23 | SlideController.prototype.setupDone = function() { 24 | var params = location.search.substring(1).split('&').map(function(el) { 25 | return el.split('='); 26 | }); 27 | 28 | var presentMe = null; 29 | for (var i = 0, param; param = params[i]; ++i) { 30 | if (param[0].toLowerCase() == SlideController.PRESENTER_MODE_PARAM) { 31 | presentMe = param[1] == 'true'; 32 | break; 33 | } 34 | } 35 | 36 | if (presentMe !== null) { 37 | localStorage.ENABLE_PRESENTOR_MODE = presentMe; 38 | // TODO: use window.history.pushState to update URL instead of the redirect. 39 | if (window.history.replaceState) { 40 | window.history.replaceState({}, '', location.pathname); 41 | } else { 42 | location.replace(location.pathname); 43 | return false; 44 | } 45 | } 46 | 47 | var enablePresenterMode = localStorage.getItem('ENABLE_PRESENTOR_MODE'); 48 | if (enablePresenterMode && JSON.parse(enablePresenterMode)) { 49 | // Only open popup from main deck. Don't want recursive popup opening! 50 | if (!this.isPopup) { 51 | var opts = 'menubar=no,location=yes,resizable=yes,scrollbars=no,status=no'; 52 | this.popup = window.open(location.href, 'mywindow', opts); 53 | 54 | // Loading in the popup? Trigger the hotkey for turning presenter mode on. 55 | this.popup.addEventListener('load', function(e) { 56 | var evt = this.popup.document.createEvent('Event'); 57 | evt.initEvent('keydown', true, true); 58 | evt.keyCode = 'P'.charCodeAt(0); 59 | this.popup.document.dispatchEvent(evt); 60 | // this.popup.document.body.classList.add('with-notes'); 61 | // document.body.classList.add('popup'); 62 | }.bind(this), false); 63 | } 64 | } 65 | 66 | return true; 67 | } 68 | 69 | SlideController.prototype.onMessage_ = function(e) { 70 | var data = e.data; 71 | 72 | // Restrict messages to being from this origin. Allow local developmet 73 | // from file:// though. 74 | // TODO: It would be dope if FF implemented location.origin! 75 | if (e.origin != ORIGIN_ && ORIGIN_.indexOf('file://') != 0) { 76 | alert('Someone tried to postMessage from an unknown origin'); 77 | return; 78 | } 79 | 80 | // if (e.source.location.hostname != 'localhost') { 81 | // alert('Someone tried to postMessage from an unknown origin'); 82 | // return; 83 | // } 84 | 85 | if ('keyCode' in data) { 86 | var evt = document.createEvent('Event'); 87 | evt.initEvent('keydown', true, true); 88 | evt.keyCode = data.keyCode; 89 | document.dispatchEvent(evt); 90 | } 91 | }; 92 | 93 | SlideController.prototype.sendMsg = function(msg) { 94 | // // Send message to popup window. 95 | // if (this.popup) { 96 | // this.popup.postMessage(msg, ORIGIN_); 97 | // } 98 | 99 | // Send message to main window. 100 | if (this.isPopup) { 101 | // TODO: It would be dope if FF implemented location.origin. 102 | window.opener.postMessage(msg, '*'); 103 | } 104 | }; 105 | 106 | window.SlideController = SlideController; 107 | 108 | })(window); 109 | 110 | -------------------------------------------------------------------------------- /js/slides.js: -------------------------------------------------------------------------------- 1 | require(['order!../slide_config', 'order!modernizr.custom.45394', 2 | 'order!prettify/prettify', 'order!hammer', 'order!slide-controller', 3 | 'order!slide-deck'], function(someModule) { 4 | 5 | }); 6 | -------------------------------------------------------------------------------- /promises.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | Promises 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

34 |

35 |

36 |

Promises

37 |

38 |
39 | 40 | 41 | 42 |
43 |

Promises

44 |
45 |
46 |

47 |

Promise

48 |

49 |
    50 |
  • Why Do We Need Them?
    • 51 |
  • What Problem Do They Solve?
    • 52 |
53 |
54 | 55 | 56 | 57 |
58 |

Promises

59 |
60 |
61 |

62 |

Why Do We Need Promises?

63 |

64 |
    65 |
  • 66 | Async code can look scary 67 | 68 |
    • 69 |
  • 70 | Callback Pyramid of Death 71 | 72 |
    • 73 |
  • 74 | Code Organization 75 | 76 |
    • 77 |
  • Example
    • 78 |
79 |

80 |

    81 |
  • Promises organize code
    • 82 |
83 |

84 |
85 | 108 | 109 | 110 | 111 |
112 |

Promises

113 |
114 |
115 |

116 |

Promise - Top Down

117 |

118 |
    119 |
  • Promise Constructor
    • 120 |
  • Promise Instance
    • 121 |
  • Static Promise Methods
    • 122 |
123 |
    124 |
  • 125 | Let's Talk About Each 126 |
    • 127 |
128 |
129 | 130 | 131 | 132 | 133 |
134 | 135 | Promise Constructor 136 | 137 | 138 | 139 | 140 | 141 | 142 |
143 | 144 | 145 | 146 |
147 |

Promise Constructor

148 |
149 |
150 | 
151 |   var promise = new Promise(function(resolve, reject) {
152 |     // do a thing, possibly async, then…
153 | 
154 |     if (/* everything turned out fine */) {
155 |       resolve("Stuff worked!");
156 |     }
157 |     else {
158 |       reject(Error("It broke"));
159 |     }
160 |   });
161 | 
162 |   return promise; //Give This To Someone
163 |
164 |
165 | 174 | 175 | 176 | 177 |
178 |

Promise Constructor

179 |
180 |
181 | 
182 |   var promise = new Promise(function(resolve, reject) {
183 |     // do a thing, possibly async, then…
184 | 
185 |     //WHAT COULD WE DO HERE?
186 |   });
187 |
188 |
    189 |
  • AJAX
    • 190 |
  • Load Image
    • 191 |
  • Read/Write localStorage
    • 192 |
  • Write lots to DOM
    • 193 |
  • Show a spinner for loading
    • 194 |
  • Others????
    • 195 |
196 |
197 | 204 | 205 | 206 | 207 |
208 |

Promise Constructor

209 |
210 |
211 |

That's It! Constructors

212 | 
213 |   var promise = new Promise(function(resolve, reject) {
214 |     // do a thing, possibly async, then…
215 | 
216 |   });
217 |
218 |

Questions??

219 |
220 | 227 | 228 | 229 | 230 | 231 |
232 | 233 | Promise Instance 234 | 235 | 236 | 237 | 238 | 239 | 240 |
241 | 242 | 243 | 244 |
245 |

Promise Instance

246 |
247 |
248 |

We have a 'promise' object. Now what?

249 |
    250 |
  • 251 | A 'promise' can be in 1 of 4 states 252 |
      253 |
    • fulfilled: successfully resolved - 1
      • 254 |
    • rejected: rejected - 2
      • 255 |
    • pending: hasn't resolved or rejected yet - undefined
      • 256 |
    • settled: fulfilled or rejected - 1 or 2
      • 257 |
    • settled is really fulfilled or rejected. More for terminology.
      • 258 |
    259 |
    • 260 |
261 | 262 | 263 | 264 | 265 | 266 |
267 | 274 | 275 | 276 | 277 |
278 |

Promise Instance

279 |
280 |
281 | 
282 |   var promise = new Promise(function(resolve, reject){
283 |     //Do Something
284 |     if(somthingWorked()){
285 |       resolve("Stuff worked!");
286 |     } else {
287 |       reject("It broke");
288 |     }
289 |   });
290 | 
291 |   promise.then(function(result) {
292 |     console.log(result); // "Stuff worked!"
293 |   }, function(err) {
294 |     console.log(err); // Error: "It broke"
295 |   });
296 |
297 | 298 |
299 | 306 | 307 | 308 | 309 |
310 |

Promise Instance - Make The Promise

311 |
312 |
313 | 
314 |   //Made My Own GET method
315 | 
316 |   function get(url){
317 |     return new Promise(function(resolve, reject){
318 |       $.get(url, function(data){
319 |         resolve(data);
320 |       })
321 |       .fail(function(){
322 |         reject();
323 |       });
324 |     });
325 |   }
326 | 
327 |
328 | 329 |
330 | 337 | 338 | 339 | 340 |
341 |

Promise Instance - USE The Promise

342 |
343 |
344 | 
345 | 
346 |   get('users.all').then(function(users){
347 |     myController.users = users;
348 |   }, function(){
349 |     delete myController.users;
350 |   });
351 | 
352 | 
353 |
354 |
355 | 362 | 363 | 364 | 365 |
366 |

Promise Instance - USE The Promise

367 |
368 |
369 | 
370 |   //.catch instead of second handler in .then
371 |   get('users.all')
372 |     .then(function(users){
373 |       myController.users = users;
374 |     })
375 |     .catch(function(){
376 |       delete myController.users;
377 |     });
378 | 
379 | 
380 |
381 |
382 | 389 | 390 | 391 | 392 |
393 |

Promise Instance - USE The Promises

394 |
395 |
396 | 
397 | 
398 |   var usersPromise = get('users.all');
399 |   var postsPromise = get('posts.everyone');
400 | 
401 |   //Wait until BOTH are settled
402 |   Promise.all([usersPromise, postsPromise])
403 |   .then(function(results){
404 |     myController.users = results[0];
405 |     myController.posts = results[1];
406 |   }, function(){
407 |     delete myController.users;
408 |     delete myController.posts;
409 |   });
410 | 
411 |
412 |
413 | 420 | 421 | 422 | 423 |
424 |

Promise Instance - USE The Promise

425 |
426 |
427 |
    428 |
  • What if the response is a string?
    • 429 |
  • 430 | 
    431 | 
432 |   get('users.all').then(function(usersString){
433 |     return JSON.parse(usersString);
434 |   }).then(function(users){
435 |     myController.users = users;
436 |   });
437 | 
438 |
    439 | 440 |
    • 441 |
442 | 443 |
444 | 451 | 452 | 453 | 454 |
455 |

Promise Instance - USE The Promise

456 |
457 |
458 | 459 | 
460 |   //Even More Compact
461 |   get('users.all').then(JSON.parse).then(function(users){
462 |     myController.users = users;
463 |   });
464 | 
465 |
466 |
467 | 474 | 475 | 476 | 477 | 478 |
479 | 480 | Static Promise Methods 481 | 482 | 483 | 484 | 485 | 486 | 487 |
488 | 489 | 490 | 491 |
492 |

Static Promise Methods

493 |
494 |
495 |
    496 |
  • Promise.all(iterable); //Wait Until All Settle
    • 497 |
  • Promise.race(iterable);//Wait Until 1 Settles
    • 498 |
  • Promise.reject(reason);//Create a promise that is already rejected
    • 499 |
  • Promise.resolve(value);//Create a promise that is already resolved
    • 500 |
501 | 502 | 503 | 504 | 505 |
506 | 513 | 514 | 515 | 516 | 517 | 518 | 519 |
520 |

That's Promises

521 |

Questions???

522 |
523 | #ES6 #frontendmasters @js_dev 524 |
525 |
526 | 527 | 528 | 529 |
530 |

TRY THIS

531 |
532 |
533 |
    534 |
  • Promises in Traceur Repl
    • 535 |
  • Promises in Firefox
    • 536 |
  • Promises in Chrome
    • 537 |
  • Wrap XHR in your own method that uses promises
    • 538 |
  • Make 'img' method that will create and image and resolve when it loads
    • 539 |
540 |
541 | 542 | 543 | 544 | 545 | 546 | 547 | 558 | 559 | 560 | 561 | -------------------------------------------------------------------------------- /ptc.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | PTC 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

34 |

35 |

36 |

Proper Tail Calls

37 |

38 |
39 | 40 | 41 | 42 | 43 |
44 | 45 | Proper tail recursion is a property of the asymptotic space complexity of a 46 | language's runtime behavior. That is, in improperly tail recursive languages, 47 | ... 48 | 49 |
50 | Dave Herman
51 | Principal Researcher w/ Mozilla
52 | @littlecalculist 53 |
54 |
55 | 56 | 57 | 58 | 59 |
60 | 61 | ... 62 | control can consume unbounded amounts of space for programs that, when run 63 | in properly tail recursive languages, only require a constant amount of space. 64 | 65 |
66 | Dave Herman
67 | Principal Researcher w/ Mozilla
68 | @littlecalculist 69 |
70 |
71 | 72 | 73 | 74 |
75 |

Proper Tail Call

76 |
77 | 78 |
79 | 80 |
81 | 82 | 83 | 84 |
85 |

Proper Tail Call

86 |
87 | 88 |
89 | 90 |
91 | 92 | 93 | 94 | 95 |
96 |

Proper Tail Calls: Example

97 |
98 | 99 |
100 | 
101 |   <script type='text/javascript'>
102 |     //resursive method
103 |     function foo(num) {
104 |       try{
105 |         return foo( (num||0) +1);
106 |       }catch(e){return num;}
107 |     }
108 |     console.log(foo());
109 |   </script>
110 |
111 |
    112 |
  • Let's Run In Chrome, Firefox, & Nodejs
    • 113 |
114 |
115 | 116 | 117 | 118 |
119 |

Proper Tail Call

120 |
121 | 122 |
123 | 124 |
125 | 126 | 127 | 128 |
129 |

Proper Tail Call

130 |
131 | 132 |
133 | 134 |
135 | 136 | 137 | 138 |
139 |

Proper Tail Call

140 |
141 | 142 |
143 | 144 |
145 | 146 | 147 | 148 |
149 |

Proper Tail Call

150 |
151 | 152 |
153 | 154 |
155 |
    156 |
  • Callstacks are not released after each call
    • 157 |
158 | 159 | 160 | 161 | 162 |
163 |

Proper Tail Call

164 |
165 | 166 |
167 |
    168 |
  • ES6 intoduces Proper Tail Calls into JavaScript
    • 169 |
  • If used correctly, PTC will add recursion
    • 170 |
  • Previous stacks are GC'd
    • 171 |
172 |
173 | 174 | 175 | 176 |
177 |

PTC Vocab: Tail Position

178 |
179 | 180 |
181 |
    182 |
  • The last instruction to fire before the return statement
    • 183 |
184 | 
185 | <script type='text/javascript'>
186 |   function greet(num) {
187 |     return "Hello";
188 |   }
189 | </script>
190 |
191 |
    192 |
  • Instruction "Hello" is in Tail Position
    • 193 |
194 |
195 | 196 | 197 | 198 |
199 |

PTC Vocab: Tail Call

200 |
201 | 202 |
203 |
    204 |
  • An instruction in Tail Position that is a method call
    • 205 |
  • 206 | 
    207 | <script type='text/javascript'>
208 |   function greet(){
209 |     return getSalutation(); //Tail Position && Tail Call
210 |   }
211 | 
212 |   function getSalutation(){
213 |     return 'Hello'; //Tail Position, but not Tail Call
214 |   }
215 | </script>
216 |
    217 |
    • 218 |
  • Now we know Tail Position & Tail Call
    • 219 |
220 | 221 |
222 | 223 | 224 | 225 |
226 |

PTC Vocab: Tail Call

227 |
228 | 229 |
230 |
    231 |
  • An instruction in Tail Position that is a method call
    • 232 |
  • 233 | 
    234 | <script type='text/javascript'>
235 |   function resultsHandler(err, results, callback){
236 |     if(err){
237 |       return callback(true);
238 |     }
239 |     return callback(false, results);
240 |   }
241 |   //TWO TAIL POSITIONS, TWO TAIL CALLS
242 | </script>
243 |
    244 |
    • 245 | 246 |
247 | 248 |
249 | 250 | 251 | 252 |
253 |

PTC Vocab: Close Call

254 |
255 | 256 |
257 |
    258 |
  • Close call looks like a tail call, but isn't
    • 259 |
  • 260 | 
    261 | <script type='text/javascript'>
262 |   function foo(){
263 |     return 1 + bar();
264 |   }
265 |   //It has to return the result of bar(), then add 1
266 | </script>
267 |
    268 |
    • 269 |
  • Because it does something after the call, it isn't a tail call
    • 270 |
271 | 272 |
273 | 274 | 275 | 276 |
277 |

PTC Vocab: Proper Tail Call PRE-ES6

278 |
279 | 280 |
281 | 
282 | <script type='text/javascript'>
283 |   function fibonacci(x, y, limit, index) {
284 |     if(arguments.length == 1){
285 |       if(x)
286 |         return fibonacci(0, 1, x, 1);
287 |       return 0;
288 |     }else{
289 |       if(index < limit)
290 |         return fibonacci(y, (x+y), limit, ++index);
291 |       return y;
292 |     }
293 |   }
294 |   console.log(fibonacci(3));       // 2
295 |   console.log(fibonacci(10));      // 55
296 |   console.log(fibonacci(12495));   //RangeError
297 | </script>
298 |
299 | 300 | 301 |
302 | 312 | 313 | 314 | 315 |
316 |

PTC Vocab: Proper Tail Call w/ ES6

317 |
318 | 319 |
320 | 
321 | <script type='text/javascript'>
322 |   function fibonacci(x, y, limit, index) {
323 |     if(arguments.length == 1){
324 |       if(x)
325 |         return fibonacci(0, 1, x, 1);
326 |       return 0;
327 |     }else{
328 |       if(index < limit)
329 |         return fibonacci(y, (x+y), limit, ++index);
330 |       return y;
331 |     }
332 |   }
333 |   console.log(fibonacci(3));       // 2
334 |   console.log(fibonacci(10));      // 55
335 |   console.log(fibonacci(12495));   // BIG BLOODY NUMBER
336 | </script>
337 |
338 | 339 | 340 |
341 | 351 | 352 | 353 | 354 | 355 |
356 |

Final Thoughts

357 |
358 | 359 |
360 |
    361 |
  • Proper Tail Calls only work in Strict Mode
    • 362 |
  • Optimize code so that Tail Position is a Tail Call
    • 363 |
364 |
365 | 366 | 367 | 368 | 369 |
370 |

Proper Tail Calls

371 |

Questions???

372 |
373 | #ES6 #frontendmasters @js_dev 374 |
375 |
376 | 377 | 378 | 379 | 380 | 381 | 382 | 393 | 394 | 395 | 396 | -------------------------------------------------------------------------------- /rest.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | REST 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

34 |

35 |

36 |

Rest Parameters

37 |

38 |
39 | 40 | 41 | 42 |
43 |

Rest Parameters

44 |
45 |
46 |
    47 |
  • Splat
    • 48 |
  • VARARGS
    • 49 |
  • params
    • 50 |
  • Does anyone not know yet?
    • 51 |
52 |
53 | 54 | 55 | 56 |
57 |

Rest Parameters

58 |
59 |
60 |

Exist in function signature

61 | 
 62 |   function myFunction(first, last, ...other){
 63 |     //code
 64 |   }
 65 |
66 |
67 | 68 | 69 | 70 |
71 |

Rest Parameters

72 |
73 |
74 |

Exist in function signature

75 | 
 76 |   function foo(...bar){
 77 |     console.log(bar.join(' ')); //Logs 'I can haz teh arguments'
 78 |   }
 79 |   foo('I', 'can', 'haz', 'teh', 'arguments');
 80 |
81 |
    82 |
  • Loads all passed values into an array called "bar"
    • 83 |
84 |
85 | 86 | 87 | 88 |
89 |

Rest Parameters

90 |
91 |
92 |

I know what you are thinking

93 |
    94 |
  • 95 | 96 |

    Finally a way to capture all arguments in one object

    97 |

    or

    98 |

    If only we had this before

    99 |
    • 100 |

  • NO ONE IS THINKING THIS!!!

    • 101 |
102 |
103 | 104 | 105 | 106 |
107 |

Rest Parameters

108 |
109 |
110 |

We've had the 'arguments' object

111 | 
112 |   function foo(){ //leave the signature empty
113 |     var output = "";
114 |     for(var i = 0; i < arguments.length; i++){
115 |       output += arguments[i];
116 |     }
117 |     console.log(output); //Logs 'I can haz teh arguments'
118 |   }
119 |   foo('I', 'can', 'haz', 'teh', 'arguments');
120 |
121 |
    122 |
  • Array-ish: Has length, get by index
    • 123 |
  • NOT AN ARRAY
    • 124 |
  • no prototype methods: forEach, join, pop, push, etc
    • 125 |
  • Pseudo-array
    • 126 |
127 |
128 | 129 | 130 | 131 |
132 |

Rest Parameters

133 |
134 |
135 |

Use 'arguments' like Array

136 | 
137 |   function foo(){ //leave the signature empty
138 |     var output = Array.prototype.join.call(arguments, " ");
139 |     console.log(output); //Logs 'I can haz teh arguments'
140 |   }
141 |   foo('I', 'can', 'haz', 'teh', 'arguments');
142 |
143 |
    144 |
  • apply/call the Array.prototype functions
    • 145 |
146 |
147 | 148 | 149 | 150 |
151 |

Rest Parameters

152 |
153 |
154 |

Difference between Rest and 'arguments'

155 |
    156 |
  • Rest Arg only includes non-specified arguments
    • 157 |
  • 'arguments' includes all arguments, regardless
    • 158 |
  • 159 | 
    160 |   function argumenty(name){
161 |     console.log(name, arguments);
162 |   }
163 |   function resty(name, ...other){
164 |     console.log(name, other);
165 |   }
166 |   argumenty("Aaron", "Frost", "Salt Lake City", "Utah");
167 |   resty("Aaron", "Frost", "Salt Lake City", "Utah");
168 |
    169 |
    • 170 |
  • Let's Run This in Firefox
    • 171 |
172 |
173 | 174 | 175 | 176 |
177 |

Rest Parameters

178 |
179 |
180 |

Rules of Rest Parameters

181 |
    182 |
  • One per function
    • 183 |
  • Must be the last parameter
    • 184 |
  • Can't use 'arguments'
    • 185 |
  • No Default Values
    • 186 |
  • Look at each one of these rules
    • 187 |
188 | 189 | 190 |
191 | 192 | 193 | 194 |
195 |

Rest Parameters

196 |
197 |
198 |

One Rest Param per function

199 | 200 | 
201 |   function lotsOArgs(...first, ...second){
202 |     console.log("FIRST: " + first.join(" "));
203 |     console.log("SECOND: " + second.join(" "));
204 |   }
205 |   lotsOArgs("where", "does", "first", "stop", "and", "second", "begin");
206 |   // SyntaxError: Multiple RestParams Defined
207 |
208 |
    209 |
  • Questions?
    • 210 |
211 |
212 | 213 | 214 | 215 |
216 |

Rest Parameters

217 |
218 |
219 |

Must Be Last Parameter

220 | 221 | 
222 |   function doSomething(...bar, biz){
223 |     // your code
224 |   }
225 |   doSomething(1, 2, 3, 4); //Where does it cutoff for 'biz'
226 |   doSomething(1);  //Does 1 go in 'bar' or 'biz'
227 |
228 |
    229 |
  • Questions?
    • 230 |
231 |
232 | 233 | 234 | 235 |
236 |

Rest Parameters

237 |
238 |
239 |

Can't Use Arguments

240 | 241 | 
242 |   function doSomething(...bar){
243 |     console.log(arguments.length); // SyntaxError
244 |   }
245 |   doSomething(1, 2, 3);
246 | 
247 |
248 |
    249 |
  • Questions?
    • 250 |
251 |
252 | 253 | 254 | 255 |
256 |

Rest Parameters

257 |
258 |
259 |

No Default Values

260 | 261 | 
262 |   function doSomething(...params=[1,2,3]){ //SyntaxError
263 |     console.log(params.join(“ “));
264 |   }
265 |   doSomething();
266 |
267 |
    268 |
  • Questions?
    • 269 |
270 |
271 | 272 | 273 | 274 | 275 | 276 | 277 |
278 |

Rest Parameters

279 |

Questions???

280 |
281 | #ES6 #frontendmasters @js_dev 282 |
283 |
284 | 285 | 286 | 287 |
288 |

TRY THIS

289 |
290 |
291 |
    292 |
  • Rest Params in Firefox
    • 293 |
  • Rest Params in Traceur Repl
    • 294 |
  • Rest Params w/ 'arguments' object
    • 295 |
  • Two Rest Params
    • 296 |
  • Rest Params as first argument
    • 297 |
  • Rest Params w/ Default Values
    • 298 |
  • Rest Params: get an error for using it w/ arguments
    • 299 |
  • Rest Params: get an error for using two of them
    • 300 |
  • Rest Params: get an error for not being last param
    • 301 |
302 |
303 | 304 | 305 | 306 | 307 | 308 | 309 | 320 | 321 | 322 | 323 | -------------------------------------------------------------------------------- /samples/MonsterClass.js: -------------------------------------------------------------------------------- 1 | // Options: --annotations --array-comprehension --async-functions --block-binding --exponentiation --generator-comprehension --symbols --types 2 | class MyClass{ 3 | constructor(){ 4 | this.name = "Aaron"; 5 | } 6 | 7 | } 8 | export default MyClass 9 | -------------------------------------------------------------------------------- /samples/let.js: -------------------------------------------------------------------------------- 1 | // Options: --annotations --array-comprehension --async-functions --block-binding --exponentiation --generator-comprehension --symbols --types 2 | "use strict"; 3 | 4 | 5 | function *myGen(x){ 6 | var x = yield x *2; 7 | return x; 8 | } 9 | 10 | var gen = myGen(100); 11 | console.log(gen.next().value); 12 | console.log(gen.next().value); 13 | -------------------------------------------------------------------------------- /samples/temp/let.tcr.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var $__0 = $traceurRuntime.initGeneratorFunction(myGen); 3 | function myGen(x) { 4 | var x; 5 | return $traceurRuntime.createGeneratorInstance(function($ctx) { 6 | while (true) 7 | switch ($ctx.state) { 8 | case 0: 9 | $ctx.state = 2; 10 | return x * 2; 11 | case 2: 12 | x = $ctx.sent; 13 | $ctx.state = 4; 14 | break; 15 | case 4: 16 | $ctx.returnValue = x; 17 | $ctx.state = -2; 18 | break; 19 | default: 20 | return $ctx.end(); 21 | } 22 | }, $__0, this); 23 | } 24 | var gen = myGen(100); 25 | console.log(gen.next().value); 26 | console.log(gen.next().value); 27 | -------------------------------------------------------------------------------- /scripts/md/README.md: -------------------------------------------------------------------------------- 1 | ### Want to use markdown to write your slides? 2 | 3 | `python render.py` can do that for you. 4 | 5 | Dependencies: jinja2, markdown. 6 | -------------------------------------------------------------------------------- /scripts/md/base.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | Google IO 2012 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 36 | 37 | 38 | 39 |
40 |

41 |

42 |

43 |
44 | 45 | 46 | {% for slide in slides %} 47 | 48 | {% if 'segue' in slide.class %} 49 | 50 |
51 |

{{- slide.title -}}

52 |

{{- slide.subtitle -}}

53 |
54 | {% else %} 55 |
56 |

{{- slide.title -}}

57 |

{{- slide.subtitle -}}

58 |
59 |
60 | {{- slide.content -}} 61 |
62 | {% endif %} 63 | 64 | {% endfor %} 65 | 66 | 67 | 68 |
69 |

<Thank You!>

70 |

Important contact information goes here.

71 |
72 |

73 | 74 |

75 | 76 | 77 | 82 | 83 | 84 | 85 | 86 | 87 | 98 | 99 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /scripts/md/render.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | 3 | import codecs 4 | import re 5 | import jinja2 6 | import markdown 7 | 8 | def process_slides(): 9 | with codecs.open('../../presentation-output.html', 'w', encoding='utf8') as outfile: 10 | md = codecs.open('slides.md', encoding='utf8').read() 11 | md_slides = md.split('\n---\n') 12 | print 'Compiled %s slides.' % len(md_slides) 13 | 14 | slides = [] 15 | # Process each slide separately. 16 | for md_slide in md_slides: 17 | slide = {} 18 | sections = md_slide.split('\n\n') 19 | # Extract metadata at the beginning of the slide (look for key: value) 20 | # pairs. 21 | metadata_section = sections[0] 22 | metadata = parse_metadata(metadata_section) 23 | slide.update(metadata) 24 | remainder_index = metadata and 1 or 0 25 | # Get the content from the rest of the slide. 26 | content_section = '\n\n'.join(sections[remainder_index:]) 27 | html = markdown.markdown(content_section) 28 | slide['content'] = postprocess_html(html, metadata) 29 | 30 | slides.append(slide) 31 | 32 | template = jinja2.Template(open('base.html').read()) 33 | 34 | outfile.write(template.render(locals())) 35 | 36 | def parse_metadata(section): 37 | """Given the first part of a slide, returns metadata associated with it.""" 38 | metadata = {} 39 | metadata_lines = section.split('\n') 40 | for line in metadata_lines: 41 | colon_index = line.find(':') 42 | if colon_index != -1: 43 | key = line[:colon_index].strip() 44 | val = line[colon_index + 1:].strip() 45 | metadata[key] = val 46 | 47 | return metadata 48 | 49 | def postprocess_html(html, metadata): 50 | """Returns processed HTML to fit into the slide template format.""" 51 | if metadata.get('build_lists') and metadata['build_lists'] == 'true': 52 | html = html.replace('
    ', '
      ') 53 | html = html.replace('
        ', '
          ') 54 | return html 55 | 56 | if __name__ == '__main__': 57 | process_slides() 58 | -------------------------------------------------------------------------------- /scripts/md/slides.md: -------------------------------------------------------------------------------- 1 | title: Slide Title 2 | subtitle: Subtitle 3 | class: image 4 | 5 | ![Mobile vs desktop users](image.png) 6 | 7 | --- 8 | 9 | title: Segue Slide 10 | subtitle: Subtitle 11 | class: segue dark nobackground 12 | 13 | --- 14 | 15 | title: Agenda 16 | class: big 17 | build_lists: true 18 | 19 | Things we'll cover (list should build): 20 | 21 | - Bullet1 22 | - Bullet2 23 | - Bullet3 24 | 25 | --- 26 | 27 | title: Today 28 | class: nobackground fill 29 | 30 | ![Many kinds of devices.](image.png) 31 | 32 |
          source: place source info here
          33 | 34 | --- 35 | 36 | title: Big Title Slide 37 | class: title-slide 38 | 39 | --- 40 | 41 | title: Code Example 42 | 43 | Media Queries are sweet: 44 | 45 | 
          46 | @media screen and (max-width: 640px) {
47 |   #sidebar { display: none; }
48 | }
49 |
          50 | 51 | --- 52 | 53 | title: Once more, with JavaScript 54 | 55 | 
          56 | function isSmall() {
57 |   return window.matchMedia("(min-device-width: ???)").matches;
58 | }
59 | 
60 | function hasTouch() {
61 |   return Modernizr.touch;
62 | }
63 | 
64 | function detectFormFactor() {
65 |   var device = DESKTOP;
66 |   if (hasTouch()) {
67 |     device = isSmall() ? PHONE : TABLET;
68 |   }
69 |   return device;
70 | }
71 |
          72 | 73 | --- 74 | 75 | title: Centered content 76 | content_class: flexbox vcenter 77 | 78 | This content should be centered! 79 | -------------------------------------------------------------------------------- /serve.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # 3 | # Starts a basic web server on the port specified. 4 | # 5 | # ./serve.sh 3000 -> http://localhost:3000 6 | # 7 | # Copyright 2012 Eric Bidelman 8 | 9 | port=$1 10 | if [ $# -ne 1 ] 11 | then 12 | port=8000 13 | fi 14 | 15 | if [ $(uname -s) == "Darwin" ] 16 | then 17 | open=open 18 | else 19 | open=xdg-open 20 | fi 21 | 22 | $open http://localhost:$port/template.html && python -m SimpleHTTPServer $port; 23 | -------------------------------------------------------------------------------- /slide_config.js: -------------------------------------------------------------------------------- 1 | var SLIDE_CONFIG = { 2 | // Slide settings 3 | settings: { 4 | title: 'JS.Next: ES6', 5 | subtitle: 'The New JavaScript API', 6 | //eventTitle: 'Google I/O 2013', 7 | useBuilds: true, // Default: true. False will turn off slide animation builds. 8 | usePrettify: true, // Default: true 9 | enableSlideAreas: true, // Default: true. False turns off the click areas on either slide of the slides. 10 | enableTouch: true, // Default: true. If touch support should enabled. Note: the device must support touch. 11 | //analytics: 'UA-XXXXXXXX-1', // TODO: Using this breaks GA for some reason (probably requirejs). Update your tracking code in template.html instead. 12 | favIcon: 'images/es6.png', 13 | fonts: [ 14 | 'Open Sans:regular,semibold,italic,italicsemibold', 15 | 'Source Code Pro' 16 | ], 17 | theme: ['fe'], // Add your own custom themes or styles in /theme/css. Leave off the .css extension. 18 | }, 19 | 20 | // Author information 21 | presenters: [{ 22 | name: 'Aaron Frost', 23 | company: 'Sr. Frontend Dev, Domo', 24 | gplus: 'http://google.com/+AaronFrost', 25 | twitter: '@js_dev', 26 | www: 'http://www.40win.com', 27 | github: 'http://github.com/aaronfrost' 28 | }/*, { 29 | name: 'Second Name', 30 | company: 'Job Title, Google', 31 | gplus: 'http://plus.google.com/1234567890', 32 | twitter: '@yourhandle', 33 | www: 'http://www.you.com', 34 | github: 'http://github.com/you' 35 | }*/] 36 | }; 37 | 38 | -------------------------------------------------------------------------------- /spread.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | Spread Operator 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
          33 |

          34 |

          35 |

          36 |

          Spread Operator

          37 |

          38 |
          39 |           40 | 41 | 42 |
          43 |

          Spread Operator

          44 |
          45 |
          46 |

          Quick Lesson

          47 |
          48 |           49 | 50 | 51 |
          52 |

          Spread Operator

          53 |
          54 |
          55 |

          56 |

          '...' before an array

          57 |

          58 | 
           59 |   var nums = [1, 2, 3];
 60 | 
 61 |   log(nums);    //logs [1, 2, 3]
 62 |   log(...nums); //logs 1, 2, 3
 63 |
          64 |
          65 |           66 | 67 | 68 |
          69 |

          Spread Operator

          70 |
          71 |
          72 | 
           73 |   function returnTwo(a,b){
 74 |    return [b,a]; //Flips 'a' and 'b'
 75 |   }
 76 |   var a = [1, 2, 3];
 77 |   var b = returnTwo(a[0], a[1]); // [2, 1]
 78 |   var c = returnTwo(...a); // [2, 1]
 79 |
          80 |
          81 |           82 | 83 | 84 |
          85 |

          Spread Operator

          86 |
          87 |
          88 |

          What can I do with Spreading?

          89 |
          90 |           91 | 92 | 93 |
          94 |

          Spread Operator

          95 |
          96 |
          97 |

          98 |

          Combine Arrays

          99 |

          100 | 
          101 |   let nums = [1, 2, 3];
102 |   let abcs = ['a', 'b', 'c'];
103 | 
104 |   let alphanum = [ ...nums, ...abcs ]; //[1, 2, 3, 'a', 'b', 'c']
105 | 
106 |
          107 |
          108 |           109 | 110 | 111 |
          112 |

          Spread Operator

          113 |
          114 |
          115 |

          116 |

          Spread Return Vals

          117 |

          118 | 
          119 |   function getNums(){
120 |    return [1, 2, 3];
121 |   }
122 | 
123 |   var b = [0, ...getNums()];
124 |   log(b); // [0, 1, 2, 3]
125 | 
126 |
          127 |
          128 |           129 | 130 | 131 | 132 | 133 | 134 |
          135 |

          Spread Operator

          136 |

          Questions???

          137 |
          138 | #ES6 #frontendmasters @js_dev 139 |
          140 |
          141 |           142 | 143 | 144 |
          145 |

          TRY THIS

          146 |
          147 |
          148 |
            149 |
          • Spread in Traceur Repl
            • 150 |
          • Spread in Firefox
            • 151 |
          • Spread a Rest Param
            • 152 |
          • New Arrays on-the-fly
            • 153 |
          154 |
          155 |           156 | 157 | 158 | 159 |           160 | 161 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /temp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
          11 | 12 | 13 |
          14 | 15 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
          31 | 32 |
          33 |           34 | 35 | 36 | 37 | 38 |
          39 |

          40 |

          41 |

          42 |
          43 |           44 | 45 | 46 |
          47 |

          Slide with Bullets

          48 |
          49 |
          50 |
            51 |
          • Titles are formatted as Open Sans with bold applied and font size is set at 45
            • 52 |
          • Title capitalization is title case 53 |
              54 |
            • Subtitle capitalization is title case
              • 55 |
            56 |
            • 57 |
          • Subtitle capitalization is title case
            • 58 |
          • Titles and subtitles should never have a period at the end
            • 59 |
          60 |
          61 |           62 | 63 | 64 |
          65 |

          Slide with Bullets that Build

          66 |

          Subtitle Placeholder

          67 |
          68 |
          69 |

          A list where items build:

          70 |
            71 |
          • Pressing 'h' highlights code snippets
            • 72 |
          • Pressing 'p' toggles speaker notes (if they're on the current slide)
            • 73 |
          • Pressing 'f' toggles fullscreen viewing
            • 74 |
          • Pressing 'w' toggles widescreen
            • 75 |
          • Pressing 'o' toggles overview mode
            • 76 |
          • Pressing 'ESC' toggles off these goodies
            • 77 |
          78 |

          Another list, but items fade as they build:

          79 |
            80 |
          • Hover over me!
            • 81 |
          • Hover over me!
            • 82 |
          • Hover over me!
            • 83 |
          84 |
          85 |           86 | 87 | 88 |
          89 |

          Slide with (Smaller Font)

          90 |
          91 |
          92 |
            93 |
          • All links open in new tabs.
            • 94 |
          • To change that this, add target="_self" to the link.
            • 95 |
          96 |
          97 |           98 | 99 | 102 | 103 | 104 |
          105 |

          Code Slide (with Subtitle Placeholder)

          106 |

          Subtitle Placeholder

          107 |
          108 |
          109 |

          Press 'h' to highlight important sections of code (wrapped in <b>).

          110 | 
          111 | <script type='text/javascript'>
112 |   // Say hello world until the user starts questioning
113 |   // the meaningfulness of their existence.
114 |   function helloWorld(world) {
115 |     for (var i = 42; --i >= 0;) {
116 |       alert('Hello ' + String(world));
117 |     }
118 |   }
119 | </script>
120 |
          121 |
          122 |           123 | 124 | 125 |
          126 |

          Code Slide (Smaller Font)

          127 |
          128 |
          129 | 
          130 | // Say hello world until the user starts questioning
131 | // the meaningfulness of their existence.
132 | function helloWorld(world) {
133 |   for (var i = 42; --i >= 0;) {
134 |     alert('Hello ' + String(world));
135 |   }
136 | }
137 |
          138 | 
          139 | <style>
140 |   p { color: pink }
141 |   b { color: blue }
142 | </style>
143 |
          144 | 
          145 | <!DOCTYPE html>
146 | <html>
147 | <head>
148 |   <title>My Awesome Page</title>
149 | </head>
150 | <body>
151 |   <p>Hello world</p>
152 | <body>
153 | </html>
154 |
          155 |
          156 |           157 | 158 | 159 | 170 |
          171 |

          Slide with Speaker Notes

          172 |
          173 |
          174 |

          Press 'p' to toggle speaker notes.

          175 |
          176 |           177 | 178 | 179 | 187 |
          188 |

          Presenter Mode

          189 |
          190 |
          191 |

          Add ?presentme=true to the URL to enabled presenter mode. 192 | This setting is sticky, meaning refreshing the page will persist presenter 193 | mode.

          194 |

          Hit ?presentme=false to disable presenter mode.

          195 |
          196 |           197 | 198 | 199 |
          200 |

          Slide with Image

          201 |
          202 |
          203 | Description 204 |
          source: place source info here
          205 |
          206 |           207 | 208 | 209 |
          210 |

          Slide with Image (Centered horz/vert)

          211 |
          212 |
          213 | Description 214 |
          source: place source info here
          215 |
          216 |           217 | 218 | 219 |
          220 |

          Table Option A

          221 |

          Subtitle Placeholder

          222 |
          223 |
          224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 |
          Column 1Column 2Column 3Column 4
          Row 1placeholderplaceholderplaceholderplaceholder
          Row 2placeholderplaceholderplaceholderplaceholder
          Row 3placeholderplaceholderplaceholderplaceholder
          Row 4placeholderplaceholderplaceholderplaceholder
          Row 5placeholderplaceholderplaceholderplaceholder
          244 |
          245 |           246 | 247 | 248 |
          249 |

          Table Option A (Smaller Text)

          250 |

          Subtitle Placeholder

          251 |
          252 |
          253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 |
          Column 1Column 2Column 3Column 4
          Row 1placeholderplaceholderplaceholderplaceholder
          Row 2placeholderplaceholderplaceholderplaceholder
          Row 3placeholderplaceholderplaceholderplaceholder
          Row 4placeholderplaceholderplaceholderplaceholder
          Row 5placeholderplaceholderplaceholderplaceholder
          273 |
          274 |           275 | 276 | 277 |
          278 |

          Table Option B

          279 |

          Subtitle Placeholder

          280 |
          281 |
          282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 |
          Header 1placeholderplaceholderplaceholder
          Header 2placeholderplaceholderplaceholder
          Header 3placeholderplaceholderplaceholder
          Header 4placeholderplaceholderplaceholder
          Header 5placeholderplaceholderplaceholder
          299 |
          300 |           301 | 302 | 303 |
          304 |

          Slide Styles

          305 |
          306 |
          307 |
          308 |
            309 |
          • class="red"
            • 310 |
          • class="red2"
            • 311 |
          • class="red3"
            • 312 |
          • class="blue"
            • 313 |
          • class="blue2"
            • 314 |
          • class="blue3"
            • 315 |
          • class="green"
            • 316 |
          • class="green2"
            • 317 |
          318 |
            319 |
          • class="green3"
            • 320 |
          • class="yellow"
            • 321 |
          • class="yellow2"
            • 322 |
          • class="yellow3"
            • 323 |
          • class="gray"
            • 324 |
          • class="gray2"
            • 325 |
          • class="gray3"
            • 326 |
          • class="gray4"
            • 327 |
          328 |
          329 |
          330 | I am centered text with a and button. 331 |
          332 |
          333 |           334 | 335 | 336 | 337 |
          338 |

          Segue Slide

          339 |

          Subtitle Placeholder

          340 |
          341 |           342 | 343 | 344 |
          345 |

          Full Image (with Optional Header)

          346 |
          347 |
          www.flickr.com/photos/25797459@N06/5438799763/
          348 |           349 | 350 | 351 | 352 |
          353 | 354 | This is an example of quote text. 355 | 356 |
          357 | Name
          358 | Company 359 |
          360 |
          361 |           362 | 363 | 364 |
          365 |

          Slide with Iframe

          366 |
          367 |
          368 | 369 |
          370 |           371 | 372 | 373 |
          374 | 375 |
          376 |           377 | 378 | 379 | 380 |
          381 |

          <Thank You!>

          382 |

          Important contact information goes here.

          383 |
          384 |

          385 | 386 |

          387 |           388 | 389 | 390 |
          391 | 392 |
          393 |           394 | 395 | 396 | 397 |           398 | 399 | 410 | 411 | 415 | 416 | 417 | -------------------------------------------------------------------------------- /theme/css/fe.css: -------------------------------------------------------------------------------- 1 | .fs-12{font-size:12px !important}.fs-18{font-size:18px !important}.fs-24{font-size:24px !important}.fs-32{font-size:32px !important}.fs-40{font-size:40px !important}.fs-48{font-size:48px !important}.fs-56{font-size:56px !important}.line-through{text-decoration:line-through !important}.redcom span{color:darkred !important}.redcom.blue span{color:blue !important}.redcom.green span{color:green !important}.pic-comment .hover-pic{display:none;position:absolute}.pic-comment:hover .hover-pic{display:inherit}.list-o-shiz>ul{display:inline-block} 2 | -------------------------------------------------------------------------------- /theme/css/phone.css: -------------------------------------------------------------------------------- 1 | slides>slide{-webkit-transition:none !important;-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;transition:none !important} 2 | -------------------------------------------------------------------------------- /theme/scss/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "compass/reset"; 4 | @import "compass/css3/border-radius"; 5 | @import "compass/css3/box"; 6 | @import "compass/css3/box-shadow"; 7 | @import "compass/css3/box-sizing"; 8 | @import "compass/css3/images"; 9 | @import "compass/css3/text-shadow"; 10 | @import "compass/css3/background-size"; 11 | @import "compass/css3/transform"; 12 | @import "compass/css3/transition"; 13 | 14 | @mixin font-smoothing($val: antialiased) { 15 | -webkit-font-smoothing: $val; 16 | -moz-font-smoothing: $val; 17 | -ms-font-smoothing: $val; 18 | -o-font-smoothing: $val; 19 | } 20 | 21 | @mixin flexbox { 22 | display: -webkit-box !important; 23 | display: -moz-box !important; 24 | display: -ms-box !important; 25 | display: -o-box !important; 26 | display: box !important; 27 | } 28 | 29 | @mixin flex-center-center { 30 | @include box-orient(vertical); 31 | @include box-align(center); 32 | @include box-pack(center); 33 | } 34 | 35 | @mixin flex-left-center { 36 | @include box-orient(vertical); 37 | @include box-align(left); 38 | @include box-pack(center); 39 | } 40 | 41 | @mixin flex-right-center { 42 | @include box-orient(vertical); 43 | @include box-align(end); 44 | @include box-pack(center); 45 | } 46 | 47 | /** 48 | * Base SlideDeck Styles 49 | */ 50 | html { 51 | height: 100%; 52 | overflow: hidden; 53 | } 54 | 55 | body { 56 | margin: 0; 57 | padding: 0; 58 | 59 | opacity: 0; 60 | 61 | height: 100%; 62 | min-height: 740px; 63 | width: 100%; 64 | 65 | overflow: hidden; 66 | 67 | color: #fff; 68 | @include font-smoothing(antialiased); 69 | @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank. 70 | 71 | &.loaded { 72 | opacity: 1 !important; 73 | } 74 | } 75 | 76 | input, button { 77 | vertical-align: middle; 78 | } 79 | 80 | slides > slide[hidden] { 81 | display: none !important; 82 | } 83 | 84 | slides { 85 | width: 100%; 86 | height: 100%; 87 | position: absolute; 88 | left: 0; 89 | top: 0; 90 | @include transform(translate3d(0, 0, 0)); 91 | @include perspective(1000); 92 | @include transform-style(preserve-3d); 93 | @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank. 94 | } 95 | 96 | slides > slide { 97 | display: block; 98 | position: absolute; 99 | overflow: hidden; 100 | left: 50%; 101 | top: 50%; 102 | @include box-sizing(border-box); 103 | } 104 | 105 | /* Slide styles */ 106 | 107 | 108 | /*article.fill iframe { 109 | position: absolute; 110 | left: 0; 111 | top: 0; 112 | width: 100%; 113 | height: 100%; 114 | 115 | border: 0; 116 | margin: 0; 117 | 118 | @include border-radius(10px); 119 | 120 | z-index: -1; 121 | } 122 | 123 | slide.fill { 124 | background-repeat: no-repeat; 125 | @include background-size(cover); 126 | } 127 | 128 | slide.fill img { 129 | position: absolute; 130 | left: 0; 131 | top: 0; 132 | min-width: 100%; 133 | min-height: 100%; 134 | 135 | z-index: -1; 136 | } 137 | */ 138 | -------------------------------------------------------------------------------- /theme/scss/fe.scss: -------------------------------------------------------------------------------- 1 | .fs-12{ 2 | font-size: 12px !important; 3 | } 4 | .fs-18{ 5 | font-size: 18px !important; 6 | } 7 | .fs-24{ 8 | font-size: 24px !important; 9 | } 10 | .fs-32{ 11 | font-size: 32px !important; 12 | } 13 | .fs-40{ 14 | font-size: 40px !important; 15 | } 16 | .fs-48{ 17 | font-size: 48px !important; 18 | } 19 | .fs-56{ 20 | font-size: 56px !important; 21 | } 22 | .line-through{ 23 | text-decoration: line-through !important; 24 | } 25 | 26 | .redcom{ 27 | span{ 28 | color:darkred !important; 29 | } 30 | 31 | &.blue{ 32 | span{ 33 | color: blue !important; 34 | } 35 | } 36 | &.green span{ 37 | color: green !important; 38 | } 39 | } 40 | 41 | .pic-comment{ 42 | 43 | .hover-pic{ 44 | display: none; 45 | position: absolute; 46 | } 47 | &:hover{ 48 | .hover-pic{ 49 | display: inherit; 50 | } 51 | } 52 | } 53 | 54 | .list-o-shiz{ 55 | & > ul { 56 | display: inline-block; 57 | } 58 | } -------------------------------------------------------------------------------- /theme/scss/phone.scss: -------------------------------------------------------------------------------- 1 | @import "compass/css3/transition"; 2 | 3 | 4 | /*Smartphones (portrait and landscape) ----------- */ 5 | /*@media only screen 6 | and (min-width : 320px) 7 | and (max-width : 480px) { 8 | 9 | }*/ 10 | 11 | /* Smartphones (portrait) ----------- */ 12 | //@media only screen and (max-device-width: 480px) { 13 | /* Styles */ 14 | //$slide-width: 350px; 15 | //$slide-height: 500px; 16 | 17 | slides > slide { 18 | /* width: $slide-width !important; 19 | height: $slide-height !important; 20 | margin-left: -$slide-width / 2 !important; 21 | margin-top: -$slide-height / 2 !important; 22 | */ 23 | // Don't do full slide transitions on mobile. 24 | -webkit-transition: none !important; // Bug in compass? Not sure why the below is not working 25 | @include transition(none !important); 26 | } 27 | 28 | //} 29 | 30 | /* iPhone 4 ----------- */ 31 | @media 32 | only screen and (-webkit-min-device-pixel-ratio : 1.5), 33 | only screen and (min-device-pixel-ratio : 1.5) { 34 | /* Styles */ 35 | } --------------------------------------------------------------------------------