onebox 1.5.33 → 1.5.34

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/lib/onebox/engine.rb +1 -0
  3. data/lib/onebox/engine/google_calendar_onebox.rb +10 -1
  4. data/lib/onebox/engine/google_docs_onebox.rb +67 -10
  5. data/lib/onebox/engine/google_maps_onebox.rb +1 -1
  6. data/lib/onebox/engine/slides_onebox.rb +32 -0
  7. data/lib/onebox/version.rb +1 -1
  8. data/spec/fixtures/slides.response +2852 -0
  9. data/spec/lib/onebox/engine/slides_onebox_spec.rb +25 -0
  10. metadata +7 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: f2fc1af73126033c75ddb252a9a3ccb849812734
4
- data.tar.gz: 9baf00da44e4f046b326a126e39da5afa9a46277
3
+ metadata.gz: 03cdeca9b695ab3b610afc700ff5a2fab208476c
4
+ data.tar.gz: 67ef9b06511c729eec82e06195e8f9744f77302b
5
5
  SHA512:
6
- metadata.gz: 23b0f516207ac63e888df9ddbc8848758edba4ea371c36c0685d2f7a76eb723508c7caf7df596bf506a98a7f28d7a3b8106c01fc5fa414ffb06a0433fd2a7e5d
7
- data.tar.gz: 86baadd2e7c9c238236c4d3c29d6ad1d8fe544df3b810b7fcbf1cec154ae51f879c4e9a760d6bb99c5ce3cb89dff58e025ba44bbddad79c1a2c3727b6c9169bf
6
+ metadata.gz: 31f009aaeef5ec144e4ee715198d7f002270a00e9b701339eeedb08f6e13615cf694cec2624111b2cad1b719d3fbad4abbc7eae6cbd127c74df89b63dd256a58
7
+ data.tar.gz: 3eabae30ce8140563bd620fe7c00f44df44a06b9499344072860f0e56277a23bc335170ddf6e3863843be92dbf62b2e1c45fcf1d65eb5f4c06194e253b43805e
data/lib/onebox/engine.rb CHANGED
@@ -163,3 +163,4 @@ require_relative "engine/soundcloud_onebox"
163
163
  require_relative "engine/imgur_onebox"
164
164
  require_relative "engine/steam_store_widget_onebox"
165
165
  require_relative "engine/pastebin_onebox"
166
+ require_relative "engine/slides_onebox"
data/lib/onebox/engine/google_calendar_onebox.rb CHANGED
@@ -8,9 +8,18 @@ module Onebox
8
8
 
9
9
  def to_html
10
10
  url = @url.split('&').first
11
- "<iframe src='#{url}&rm=minimal' style='border: 0' width='800' height='600' frameborder='0' scrolling='no' ></iframe>"
11
+ "<iframe src='#{url}&rm=minimal' style='border: 0' width='800' height='600' frameborder='0' scrolling='no'>#{placeholder_html}</iframe>"
12
12
  end
13
13
 
14
+ def placeholder_html
15
+ <<HTML
16
+ <div placeholder><div class='gdocs-onebox gdocs-onebox-splash' style='display:table-cell;vertical-align:middle;width:800px;height:600px'>
17
+ <div style='text-align:center;'>
18
+ <div class='gdocs-onebox-logo g-calendar-logo'></div>
19
+ <p>Google Calendar</p>
20
+ </div></div></div>
21
+ HTML
22
+ end
14
23
  end
15
24
  end
16
25
  end
data/lib/onebox/engine/google_docs_onebox.rb CHANGED
@@ -3,8 +3,37 @@ module Onebox
3
3
  class GoogleDocsOnebox
4
4
  include Engine
5
5
 
6
- def self.supported_endpoints
7
- %w(spreadsheets document forms presentation)
6
+ class << self
7
+ def supported_endpoints
8
+ %w(spreadsheets document forms presentation)
9
+ end
10
+
11
+ def embed_widths
12
+ @embed_widths ||= {
13
+ spreadsheets: 800,
14
+ document: 800,
15
+ presentation: 960,
16
+ forms: 760,
17
+ }
18
+ end
19
+
20
+ def embed_heights
21
+ @embed_heights ||= {
22
+ spreadsheets: 600,
23
+ document: 600,
24
+ presentation: 749,
25
+ forms: 500,
26
+ }
27
+ end
28
+
29
+ def short_types
30
+ @shorttypes ||= {
31
+ spreadsheets: :sheets,
32
+ document: :docs,
33
+ presentation: :slides,
34
+ forms: :forms,
35
+ }
36
+ end
8
37
  end
9
38
 
10
39
  matches_regexp /^(https?:)?\/\/(docs\.google\.com)\/(?<endpoint>(#{supported_endpoints.join('|')}))\/d\/((?<key>[\w-]*)).+$/
@@ -12,31 +41,59 @@ module Onebox
12
41
 
13
42
  def to_html
14
43
  if document?
15
- "<iframe class='gdocs-onebox document-onebox' src='https://docs.google.com/document/d/#{key}/pub?embedded=true' style='border: 0' width='800' height='600' frameborder='0' scrolling='yes' ></iframe>"
44
+ "<iframe class='gdocs-onebox document-onebox' src='https://docs.google.com/document/d/#{key}/pub?embedded=true' style='border: 0' width='#{width}' height='#{height}' frameborder='0' scrolling='yes'>#{placeholder_html}</iframe>"
16
45
  elsif spreadsheet?
17
- "<iframe class='gdocs-onebox spreadsheet-onebox' src='https://docs.google.com/spreadsheet/ccc?key=#{key}&usp=sharing&rm=minimal' style='border: 0' width='800' height='600' frameborder='0' scrolling='yes' ></iframe>"
46
+ "<iframe class='gdocs-onebox spreadsheet-onebox' src='https://docs.google.com/spreadsheet/ccc?key=#{key}&usp=sharing&rm=minimal' style='border: 0' width='#{width}' height='#{height}' frameborder='0' scrolling='yes'>#{placeholder_html}</iframe>"
18
47
  elsif presentation?
19
- "<iframe class='gdocs-onebox presentation-onebox' src='https://docs.google.com/presentation/d/#{key}/embed?start=false&loop=false&delayms=3000' frameborder='0' width='960' height='749' allowfullscreen='true' mozallowfullscreen='true' webkitallowfullscreen='true'></iframe>"
48
+ "<iframe class='gdocs-onebox presentation-onebox' src='https://docs.google.com/presentation/d/#{key}/embed?start=false&loop=false&delayms=3000' frameborder='0' width='#{width}' height='#{height}' allowfullscreen='true' mozallowfullscreen='true' webkitallowfullscreen='true'>#{placeholder_html}</iframe>"
20
49
  elsif forms?
21
- "<iframe class='gdocs-onebox forms-onebox' src='https://docs.google.com/forms/d/#{key}/viewform?embedded=true' width='760' height='500' frameborder='0' marginheight='0' marginwidth='0' scrolling='yes'>Loading...</iframe>"
50
+ "<iframe class='gdocs-onebox forms-onebox' src='https://docs.google.com/forms/d/#{key}/viewform?embedded=true' width='#{width}' height='#{height}' frameborder='0' marginheight='0' marginwidth='0' scrolling='yes'>#{placeholder_html}</iframe>"
22
51
  end
23
52
  end
24
53
 
54
+ def placeholder_html
55
+ <<HTML
56
+ <div placeholder><div class='gdocs-onebox gdocs-onebox-splash' style='display:table-cell;vertical-align:middle;width:#{width}px;height:#{height}px'>
57
+ <div style='text-align:center;'>
58
+ <div class='gdocs-onebox-logo g-#{shorttype}-logo'></div>
59
+ <p>Google #{shorttype.capitalize}</p>
60
+ <p><a href="https://docs.google.com/#{doc_type}/d/#{key}">#{key}</a></p>
61
+ </div></div></div>
62
+ HTML
63
+ end
64
+
25
65
  protected
66
+
67
+ def doc_type
68
+ @doc_type ||= match[:endpoint].to_sym
69
+ end
70
+
71
+ def shorttype
72
+ GoogleDocsOnebox.short_types[doc_type]
73
+ end
74
+
75
+ def width
76
+ GoogleDocsOnebox.embed_widths[doc_type]
77
+ end
78
+
79
+ def height
80
+ GoogleDocsOnebox.embed_heights[doc_type]
81
+ end
82
+
26
83
  def spreadsheet?
27
- match[:endpoint] == 'spreadsheets'
84
+ doc_type == :spreadsheets
28
85
  end
29
86
 
30
87
  def document?
31
- match[:endpoint] == 'document'
88
+ doc_type == :document
32
89
  end
33
90
 
34
91
  def presentation?
35
- match[:endpoint] == 'presentation'
92
+ doc_type == :presentation
36
93
  end
37
94
 
38
95
  def forms?
39
- match[:endpoint] == 'forms'
96
+ doc_type == :forms
40
97
  end
41
98
 
42
99
  def key
data/lib/onebox/engine/google_maps_onebox.rb CHANGED
@@ -48,7 +48,7 @@ module Onebox
48
48
  end
49
49
 
50
50
  def to_html
51
- Helpers.click_to_scroll_div + "<iframe src=\"#{link}\" width=\"690\" height=\"400\" frameborder=\"0\" style=\"border:0\"></iframe>"
51
+ "<div class='maps-onebox'>#{Helpers.click_to_scroll_div + "<iframe src=\"#{link}\" width=\"690\" height=\"400\" frameborder=\"0\" style=\"border:0\">#{placeholder_html}</iframe>"}</div>"
52
52
  end
53
53
 
54
54
  def placeholder_html
data/lib/onebox/engine/slides_onebox.rb ADDED
@@ -0,0 +1,32 @@
1
+ module Onebox
2
+ module Engine
3
+ class SlidesOnebox
4
+ include Engine
5
+ include StandardEmbed
6
+
7
+ matches_regexp(/^https?:\/\/slides\.com\/[\p{Alnum}_\-]+\/[\p{Alnum}_\-]+$/)
8
+
9
+
10
+ def to_html
11
+ if uri.path =~ /^\/[\p{Alnum}_\-]+\/[\p{Alnum}_\-]+$/
12
+ "<iframe src=\"//slides.com#{uri.path}/embed?style=light\" width=\"576\" height=\"420\" scrolling=\"no\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
13
+ end
14
+ end
15
+
16
+ def placeholder_html
17
+ # get_opengraph_data
18
+ "<img src='#{get_opengraph_data[:images].first}'>"
19
+ end
20
+
21
+ private
22
+
23
+ def get_opengraph_data
24
+ return @opengraph_data if @opengraph_data
25
+ response = Onebox::Helpers.fetch_response(url)
26
+ html_doc = Nokogiri::HTML(response.body)
27
+
28
+ @opengraph_data = parse_open_graph(html_doc, url)
29
+ end
30
+ end
31
+ end
32
+ end
data/lib/onebox/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Onebox
2
- VERSION = "1.5.33"
2
+ VERSION = "1.5.34"
3
3
  end
data/spec/fixtures/slides.response ADDED
@@ -0,0 +1,2852 @@
1
+ <!DOCTYPE html>
2
+ <html class="sl-root decks show " data-account="free">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+ <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"4fd2e9786b","applicationID":"1563900","transactionName":"cApZREQKWl9XFxZQVlAORB9FDVlE","queueTime":0,"applicationTime":37,"agent":""}</script>
7
+ <script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({QJf3ax:[function(t,e){function n(){}function r(t){function e(t){return t&&t instanceof n?t:t?a(t,i,o):o()}function c(n,r,o){t&&t(n,r,o);for(var i=e(o),a=f(n),c=a.length,u=0;c>u;u++)a[u].apply(i,r);return i}function u(t,e){p[t]=f(t).concat(e)}function f(t){return p[t]||[]}function s(){return r(c)}var p={};return{on:u,emit:c,create:s,listeners:f,context:e,_events:p}}function o(){return new n}var i="nr@context",a=t("gos");e.exports=r()},{gos:"7eSDFh"}],ee:[function(t,e){e.exports=t("QJf3ax")},{}],3:[function(t,e){function n(t){return function(){r(t,[(new Date).getTime()].concat(i(arguments)))}}var r=t("handle"),o=t(1),i=t(2);"undefined"==typeof window.newrelic&&(newrelic=window.NREUM);var a=["setPageViewName","addPageAction","setCustomAttribute","finished","addToTrace","inlineHit","noticeError"];o(a,function(t,e){window.NREUM[e]=n("api-"+e)}),e.exports=window.NREUM},{1:12,2:13,handle:"D5DuLP"}],gos:[function(t,e){e.exports=t("7eSDFh")},{}],"7eSDFh":[function(t,e){function n(t,e,n){if(r.call(t,e))return t[e];var o=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:o,writable:!0,enumerable:!1}),o}catch(i){}return t[e]=o,o}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],D5DuLP:[function(t,e){function n(t,e,n){return r.listeners(t).length?r.emit(t,e,n):void(r.q&&(r.q[t]||(r.q[t]=[]),r.q[t].push(e)))}var r=t("ee").create();e.exports=n,n.ee=r,r.q={}},{ee:"QJf3ax"}],handle:[function(t,e){e.exports=t("D5DuLP")},{}],XL7HBI:[function(t,e){function n(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:i(t,o,function(){return r++})}var r=1,o="nr@id",i=t("gos");e.exports=n},{gos:"7eSDFh"}],id:[function(t,e){e.exports=t("XL7HBI")},{}],G9z0Bl:[function(t,e){function n(){if(!v++){var t=l.info=NREUM.info,e=f.getElementsByTagName("script")[0];if(t&&t.licenseKey&&t.applicationID&&e){c(p,function(e,n){t[e]||(t[e]=n)});var n="https"===s.split(":")[0]||t.sslForHttp;l.proto=n?"https://":"http://",a("mark",["onload",i()]);var r=f.createElement("script");r.src=l.proto+t.agent,e.parentNode.insertBefore(r,e)}}}function r(){"complete"===f.readyState&&o()}function o(){a("mark",["domContent",i()])}function i(){return(new Date).getTime()}var a=t("handle"),c=t(1),u=window,f=u.document;t(2);var s=(""+location).split("?")[0],p={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-852.min.js"},d=window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&!/CriOS/.test(navigator.userAgent),l=e.exports={offset:i(),origin:s,features:{},xhrWrappable:d};f.addEventListener?(f.addEventListener("DOMContentLoaded",o,!1),u.addEventListener("load",n,!1)):(f.attachEvent("onreadystatechange",r),u.attachEvent("onload",n)),a("mark",["firstbyte",i()]);var v=0},{1:12,2:3,handle:"D5DuLP"}],loader:[function(t,e){e.exports=t("G9z0Bl")},{}],12:[function(t,e){function n(t,e){var n=[],o="",i=0;for(o in t)r.call(t,o)&&(n[i]=e(o,t[o]),i+=1);return n}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],13:[function(t,e){function n(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(0>o?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=n},{}]},{},["G9z0Bl"]);</script>
8
+
9
+ <title>ECMAScript 2015 by David Leonard</title>
10
+ <meta name="description" content="An overview of ES6 features. " />
11
+ <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12
+
13
+ <meta property="og:title" content="ECMAScript 2015 by David Leonard" />
14
+ <meta property="og:description" content="An overview of ES6 features. " />
15
+ <meta property="og:site_name" content="Slides" />
16
+ <meta property="og:image" content="https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg" />
17
+ <meta property="og:type" content="article" />
18
+ <meta property="og:url" content="http://slides.com/drksephy/ecmascript-2015" />
19
+ <meta property="fb:app_id" content="146002942236376" />
20
+
21
+ <meta name="apple-mobile-web-app-capable" content="yes" />
22
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
23
+ <meta name="msapplication-tap-highlight" content="no" />
24
+
25
+ <link rel="manifest" href="/manifest.json">
26
+
27
+ <link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic" rel="stylesheet" type="text/css" data-application-font="opensans">
28
+
29
+ <link href="//assets.slid.es/assets/slides/slides-1df814f963530a8557bab503c81c1049.css" media="all" rel="stylesheet" />
30
+ <link href="//assets.slid.es/assets/application-c398590fe521aefe107f633ca035bc1f.css" media="all" rel="stylesheet" />
31
+ <link href="//assets.slid.es/assets/deck-v2-df3848b455a4a84f0b5dd323b4939351.css" media="all" rel="stylesheet" />
32
+
33
+
34
+
35
+ <style id="user-css-output" type="text/css"></style>
36
+
37
+ <meta content="authenticity_token" name="csrf-param" />
38
+ <meta content="kHnorC3XjvYlj2MgIqJyTaEyS+ThXLyj9/ziPIOT+gY=" name="csrf-token" />
39
+ <script type="text/javascript">
40
+ if( !/dnt=1/.test( window.location.search ) ) {
41
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
42
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
43
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
45
+
46
+ ga('create', 'UA-39670045-1', 'auto');
47
+ ga('send', 'pageview');
48
+
49
+ }
50
+ </script>
51
+ <!--[if lt IE 9]>
52
+ <script src="//assets.slid.es/assets/html5shiv-b51d49ab0e89834a02ffce4a59905afb.js"></script>
53
+ <![endif]-->
54
+ <meta name="twitter:card" content="summary_large_image">
55
+ <meta name="twitter:site" content="@Slides">
56
+ <meta name="twitter:title" content="ECMAScript 2015">
57
+ <meta name="twitter:description" content="An overview of ES6 features. ">
58
+ <meta name="twitter:image" content="https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg">
59
+
60
+ </head>
61
+ <body>
62
+
63
+ <div id="container" class="container">
64
+ <header class="global-header show-on-scroll">
65
+ <div class="wrapper">
66
+ <h1 class="logo-animation">
67
+ <a class="symbol" href="/">
68
+ <div class="box-1"></div>
69
+ <div class="box-2"></div>
70
+ <div class="box-3"></div>
71
+ </a>
72
+ <a class="word" href="/"></a>
73
+ </h1>
74
+ <ul class="nav nav-long">
75
+ <li class="nav-item" data-page-id="home/explore">
76
+ <a class="nav-item-anchor" href="/explore"><span class="nav-item-label">Explore</span></a>
77
+ </li>
78
+ <li class="nav-item" data-page-id="static/features">
79
+ <a class="nav-item-anchor" href="/features"><span class="nav-item-label">Features</span></a>
80
+ </li>
81
+ <li class="nav-item" data-page-id="static/pricing">
82
+ <a class="nav-item-anchor" href="/pricing?h=1"><span class="nav-item-label">Pricing</span></a>
83
+ </li>
84
+ <li class="nav-item-divider"></li>
85
+ <li class="nav-item" data-page-id="sessions/new">
86
+ <a class="nav-item-anchor" href="/users/sign_in"><span class="nav-item-label">Log in</span></a>
87
+ </li>
88
+ <li class="nav-item nav-item-highlighted nav-item-secondary" data-page-id="static/pricing">
89
+ <a class="nav-item-anchor" href="/pricing"><span class="nav-item-label">Sign up</span></a>
90
+ </li>
91
+ </ul>
92
+ </div>
93
+ </header>
94
+
95
+
96
+ <div id="main" class="main" role="main">
97
+
98
+
99
+
100
+
101
+
102
+ <div class="marquee">
103
+
104
+ <div class="reveal-frame">
105
+ <div class="reveal-viewport theme-font-josefine theme-color-white-blue">
106
+ <div class="reveal">
107
+ <div class="slides">
108
+ <section class="has-light-background" data-background-color="#ffffff" data-id="b6f5e4a6616d9dbe85f40d8fc34b919e"><div class="sl-block" data-block-type="text" style="width: 680px; left: 280px; top: 339px; height: auto;" data-block-id="6bac341cc91bd579f7e9c40bc3a741a0">
109
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
110
+ <h1><span style="font-size:0.7em">ECMAScript 2015 : Deep Dive</span></h1>
111
+ </div>
112
+ </div>
113
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 0px; top: 428px; background: linear-gradient(180deg,#C0C0C0, #FFFE59);" data-block-id="d5f8d6b84d00758ae35cddd5ec6b2852">
114
+ <div class="sl-block-content" data-line-x1="-381" data-line-y1="233" data-line-x2="579" data-line-y2="233" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
115
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="-381 233 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-381" y1="233" x2="579" y2="233"></line><line stroke="#fbde34" stroke-width="4" x1="-381" y1="233" x2="579" y2="233"></line></svg>
116
+ </div>
117
+ </div>
118
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 304px; height: 152px; left: 328px; top: 0px;" data-block-id="c6ff967b28ea37960be86a16e583835f">
119
+ <div class="sl-block-content" style="z-index: 12;">
120
+ <img data-natural-width="640" data-natural-height="320" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2134382/nodejs.png">
121
+ </div>
122
+ </div></section><section data-id="3dc27fe74e29cfbc9684bc7f7540f6c3"><div class="sl-block" data-block-type="text" style="width: 320px; left: 116px; top: 28px; height: auto;" data-block-id="9cc3407d4388ca2eedfd15a6c30edba2">
123
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
124
+ <h1 style="text-align: left;">
125
+ <span style="font-size:0.7em">David Leonard</span>
126
+ </h1>
127
+ </div>
128
+ </div>
129
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6121878ca7c80c59806355b65629bc44">
130
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
131
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
132
+ </div>
133
+ </div>
134
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 389px; left: 116px; top: 125px;" data-block-id="390551b2a2ae046ccd9e695c3805d2b4">
135
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
136
+ <p style="text-align:left">
137
+ <a href="https://github.com/DrkSephy" target="_blank">https://github.com/DrkSephy</a>
138
+ </p>
139
+ </div>
140
+ </div>
141
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 116px; top: 162px;" data-block-id="49d9588ced1a803e6acf000fe609c372">
142
+ <div class="sl-block-content" data-line-x1="-257" data-line-y1="-65" data-line-x2="119" data-line-y2="-65" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;">
143
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="376" height="1" viewbox="-257 -65 376 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-257" y1="-65" x2="119" y2="-65"></line><line stroke="#fbde34" stroke-width="2" x1="-257" y1="-65" x2="119" y2="-65"></line></svg>
144
+ </div>
145
+ </div>
146
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 397px; left: 116px; top: 180px;" data-block-id="11df1e4eb1c577c28af02bd483de3bf3">
147
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
148
+ <p style="text-align: left;">
149
+ <a href="https://twitter.com/DrkSephy" target="_blank">https://twitter.com/DrkSephy</a>
150
+ </p>
151
+ </div>
152
+ </div>
153
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 116px; top: 218px;" data-block-id="84d353eb96e1d1ae9287923cf16b0807">
154
+ <div class="sl-block-content" data-line-x1="-257" data-line-y1="-65" data-line-x2="131" data-line-y2="-65" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;">
155
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="388" height="1" viewbox="-257 -65 388 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-257" y1="-65" x2="131" y2="-65"></line><line stroke="#fbde34" stroke-width="2" x1="-257" y1="-65" x2="131" y2="-65"></line></svg>
156
+ </div>
157
+ </div>
158
+ <div class="sl-block" data-block-type="text" style="width: 192px; left: 112px; top: 287px; height: auto;" data-block-id="7e8796317581c72c437c81763d85c923">
159
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 17;">
160
+ <h2 style="text-align: left;">
161
+ <span style="font-size:0.7em">What I do:</span>
162
+ </h2>
163
+ </div>
164
+ </div>
165
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 729px; left: 116px; top: 287px;" data-block-id="1ea78669ece760c504db7022cb9ae62d">
166
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18; text-align: left; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" dir="ui">
167
+ <h3 class="fragment" data-fragment-index="1" style="color: rgb(251, 222, 52); text-align: left;"> </h3>
168
+ <ul>
169
+ <li class="fragment" style="color: rgb(251, 222, 52);" data-fragment-index="0">
170
+ <h3>
171
+ <span style="font-size:0.7em;">
172
+ <span style="color:black">Grad Student at CCNY</span>
173
+ </span>
174
+ </h3>
175
+ </li>
176
+ <li class="fragment" style="color: rgb(251, 222, 52);" data-fragment-index="1">
177
+ <h3>
178
+ <span style="font-size:0.7em;">
179
+ <span style="color:black">Game Developer</span>
180
+ </span>
181
+ </h3>
182
+ </li>
183
+ <li class="fragment" data-fragment-index="2" style="color: rgb(251, 222, 52);">
184
+ <h3>
185
+ <span style="font-size:0.7em;">
186
+ <span style="color:black">Yahoo! Developer Network</span>
187
+ </span>
188
+ </h3>
189
+ </li>
190
+ </ul>
191
+ </div>
192
+ </div>
193
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 468px; height: 312px; left: 480px; top: 287px;" data-block-id="9e2dd8d98ed9dbfa0896fe39ee3f6ddf">
194
+ <div class="sl-block-content fragment" style="z-index: 19;" data-fragment-index="1">
195
+ <img data-natural-width="600" data-natural-height="400" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2033478/out.gif">
196
+ </div>
197
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="debbb071bfa250994f43eaa769105442"><div class="sl-block" data-block-type="text" style="width: 247px; left: 102px; top: 22px; height: auto;" data-block-id="d9ade49710598807d5f18fbdc8af7e5d">
198
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
199
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Why ES6?</span></h1>
200
+ </div>
201
+ </div>
202
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5f019ae767fb36ad389282299854d187">
203
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
204
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
205
+ </div>
206
+ </div>
207
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 372.689px; height: 541px; left: 121px; top: 128px;" data-block-id="9a8246451d25c3a186eda651c12c570e"><div class="sl-block-content" style="z-index: 12;"><img data-natural-width="620" data-natural-height="900" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137383/part1.png"></div></div>
208
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 374px; height: 542.903px; left: 533px; top: 128px;" data-block-id="5ecf464d0c352b0f980af453e46d4362"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="620" data-natural-height="900" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137388/part2.png"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="adbd6d37902ab622c11e8acae6d9b696"><div class="sl-block" data-block-type="text" style="width: 247px; left: 102px; top: 22px; height: auto;" data-block-id="881b6764d82652dbc8063420baf916ed">
209
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
210
+ <h1>
211
+ <span style="font-size:52.5px; line-height:62.0455px">Deep Dive</span>
212
+ </h1>
213
+ </div>
214
+ </div>
215
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2a4decaa8a9376feb002d291e355551f">
216
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
217
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
218
+ </div>
219
+ </div>
220
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 347px; left: 67px; top: 148px;" data-block-id="2d0688a70c089439514c44caeb102503">
221
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13; line-height: 0.91; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" data-has-line-height="" dir="ui">
222
+ <ul style="color:#fbde34;">
223
+ <li class="fragment" data-fragment-index="0">
224
+ <h3><span style="font-size:0.7em;"><span style="color:black">Tooling</span> </span></h3>
225
+ </li>
226
+ <li class="fragment" data-fragment-index="1">
227
+ <h3><span style="font-size:0.7em;"><span style="color:black">Variables and Scoping</span> </span></h3>
228
+ </li>
229
+ <li class="fragment" data-fragment-index="2">
230
+ <h3><span style="font-size:0.7em;"><span style="color:black">Strings</span></span></h3>
231
+ </li>
232
+ <li class="fragment" data-fragment-index="3">
233
+ <h3><span style="font-size:0.7em;"><span style="color:black">Destructuring</span> </span></h3>
234
+ </li>
235
+ <li class="fragment" data-fragment-index="4">
236
+ <h3><span style="font-size:0.7em;"><span style="color:black">Parameter Handling</span> </span></h3>
237
+ </li>
238
+ <li class="fragment" data-fragment-index="5">
239
+ <h3><span style="font-size:0.7em;"><span style="color: black; background-color: rgba(0, 0, 0, 0);">Arrow Functions</span></span></h3>
240
+ </li>
241
+ <li class="fragment" data-fragment-index="6">
242
+ <h3><span style="font-size:0.7em;"><span style="color:black">Classes</span> </span></h3>
243
+ </li>
244
+ <li class="fragment" data-fragment-index="7">
245
+ <h3><span style="font-size:0.7em;"><span style="color:black">Modules</span> </span></h3>
246
+ </li>
247
+ <li class="fragment" data-fragment-index="8">
248
+ <h3><span style="font-size:0.7em;"><span style="color:black">Generators</span> </span></h3>
249
+ </li>
250
+ <li class="fragment" data-fragment-index="9">
251
+ <h3><span style="font-size:0.7em;"><span style="color:black">Promises</span> </span></h3>
252
+ </li>
253
+ </ul>
254
+ </div>
255
+ </div>
256
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="27ebb56bc8c0fd1e06159e16c2bb6ac5">
257
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
258
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
259
+ </div>
260
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a8d1781c3df32ed71d229edf34b7a055"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 0px; top: 426px;" data-block-id="49b5d320b26271b2114a4b713aee1ca8"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
261
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 330px; left: 630px; top: 329px;" data-block-id="483b26bc1f85498f3f281babe0b2005b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
262
+ <h2><span style="font-size:0.7em">Running ES6</span></h2>
263
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c861a00000045ec203ed4a263fb62c34"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 80px; top: 0px;" data-block-id="b116ca2364853e5ab2b77e58b381dc31"><div class="sl-block-content" data-line-x1="20" data-line-y1="590" data-line-x2="20" data-line-y2="-110" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="20 -110 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="20" y1="590" x2="20" y2="-110"></line><line stroke="#fbde34" stroke-width="4" x1="20" y1="590" x2="20" y2="-110"></line></svg></div></div>
264
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 234px; height: 234px; left: 108px; top: 51px;" data-block-id="89f52cfff0eaaffa9fa8c52c1f6819df"><div class="sl-block-content" style="z-index: 12;"><img data-natural-width="200" data-natural-height="200" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137410/babel.png"></div></div>
265
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 202px; height: 192.677px; left: 108px; top: 339px;" data-block-id="810a7d6b1139cdf9fe504bb1a5047fa1"><div class="sl-block-content" style="z-index: 13;"><img data-natural-width="585" data-natural-height="558" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137412/traceur.svg"></div></div>
266
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 88.5px; height: 197.961px; left: 493px; top: 69px;" data-block-id="7ba8bfc836f4afb930738100df89b99a"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="228" data-natural-height="510" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137415/gulp-2x.png"></div></div>
267
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 202.632px; height: 234px; left: 493px; top: 319px;" data-block-id="b0f8ad26cb737296568bc701dcb31b51"><div class="sl-block-content" style="z-index: 15;"><img data-natural-width="562" data-natural-height="649" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137417/webpack.svg"></div></div>
268
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 205.556px; height: 230px; left: 742px; top: 53px;" data-block-id="94b25df1dc8f8753fc40237add5c43cf"><div class="sl-block-content" style="z-index: 16;"><img data-natural-width="185" data-natural-height="207" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137419/browserify.png"></div></div>
269
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 365px; top: 126px;" data-block-id="cc2a9514f2d709507568c76a7ffb5c92"><div class="sl-block-content" style="z-index: 17;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
270
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 625px; top: 126px;" data-block-id="a47e47ea022d3ae15a0a59b4f16440ca"><div class="sl-block-content" style="z-index: 18;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
271
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 365px; top: 394px;" data-block-id="b7858b60dc26968cfd5a8c4a8b881e15"><div class="sl-block-content" style="z-index: 19;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
272
+
273
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="804f37fccaab0d593f2939846572b05b">
274
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 21;" data-line-width="4px">
275
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
276
+ </div>
277
+ </div></section><section data-id="0184bfa587c486920d5205297dead000"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 948px; height: 509.442px; left: 6px; top: 120px;" data-block-id="148f0e067d34c244ce0744d2777366ca"><a class="sl-block-content" style="z-index: 11;" href="http://babeljs.io/repl/" target="_blank"><img data-natural-width="1431" data-natural-height="769" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149696/babel_repl.png"></a></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a944f162b0031b9ccf42b0ce44a1a8de"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="b3ff8b7c4df781b3f21c5fc1898995d5"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
278
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 560px; left: 400px; top: 331px;" data-block-id="1d346f422690b3799fd4365f9a93dec2"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
279
+ <h2><span style="font-size:59.85px">Variables and Scoping</span></h2>
280
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="17182eadcfa3b04edce4b0519156ee24"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="400b36a4cf81029d746b54d522225a19">
281
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
282
+ <h1>
283
+ <span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
284
+ </h1>
285
+ </div>
286
+ </div>
287
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ac4f215643cd203f1639a764bf669fc5">
288
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
289
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
290
+ </div>
291
+ </div>
292
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 402px; left: 112px; top: 165px;" data-block-id="9b9c18a16a75589d6eb225307cbe593e">
293
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13; color: rgb(17, 17, 17);" dir="ui">
294
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
295
+
296
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
297
+ <span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
298
+ <span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
299
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
300
+ <span style="color:rgb(38, 139, 210)">}</span>
301
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
302
+ <span style="color:rgb(38, 139, 210)">}</span>
303
+
304
+ getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c0c583666a90ca00b8473315026dcd26">
309
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
310
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
311
+ </div>
312
+ </div>
313
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 220px; top: 264px;" data-block-id="2f80c2f8a8b2620f93f3cf67b2e136cd"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line></svg></div></div>
314
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 433px;" data-block-id="fe7b578fbfcdbc7faaffe3682e21565e"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line></svg></div></div>
315
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 151px; left: 305px; top: 501px;" data-block-id="0b6037e3d5af7a06cb0abe378c1c4553"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
316
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// undefined</span></span></pre>
317
+ </div></div>
318
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 360px; height: 284.469px; left: 514px; top: 338px;" data-block-id="d02d32fd6eae938c79dd69e382efa738"><div class="sl-block-content fragment" style="z-index: 18;" data-fragment-index="2"><img data-natural-width="367" data-natural-height="290" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157338/cat2.png"></div></div>
319
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="e8bafd5180e6c0462c0f93eeff93b724"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
320
+ <pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
321
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="f3826d03597a3af34cf254f04bf70de8"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="8fe70f18ecb71d04b149f0aa0583eb1a">
322
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
323
+ <h1>
324
+ <span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
325
+ </h1>
326
+ </div>
327
+ </div>
328
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7e728e4bb14146866d739e04cad05393">
329
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
330
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
331
+ </div>
332
+ </div>
333
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="0bd2c0d29715a0350c108bfedd86ffa4">
334
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
335
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
336
+
337
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
338
+ <span style="color:rgb(38, 139, 210)">var</span> snack;
339
+
340
+ <span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
341
+ snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
342
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
343
+ <span style="color:rgb(38, 139, 210)">}</span>
344
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
345
+ <span style="color:rgb(38, 139, 210)">}</span>
346
+
347
+ getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
348
+ </div>
349
+ </div>
350
+
351
+
352
+
353
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2cb46b00e91d2a3eb19353a772322eec">
354
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
355
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
356
+ </div>
357
+ </div>
358
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 166px; top: 298px;" data-block-id="36548dcddff9a1d63fbfd87b6be47cfd"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="213" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="113" height="1" viewbox="100 0 113 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="213.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="213.5" y2="0.5"></line></svg></div></div>
359
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 166px; top: 497px;" data-block-id="8266fd8d3a4c1faf1930baa527b3d618"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="268" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="168" height="1" viewbox="100 0 168 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="266.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="266.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(266,0) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
360
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 308px; top: 522px;" data-block-id="04a49881d08135746d38cb3224d3287e"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="42" data-line-y2="131" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="42" height="69" viewbox="0 131 42 69"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="41.5" y2="133.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="41.5" y2="133.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(41,133) rotate(31.329)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
361
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 151px; left: 344px; top: 480px;" data-block-id="78c5e1cd83002e7d29a7dbcf1caaf9f6"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
362
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// undefined</span></span></pre>
363
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0eda9e19fb9874da4153b97581e3e711"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="edbae8922948c49ebcb9d82850f20c35">
364
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
365
+ <h1>
366
+ <span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
367
+ </h1>
368
+ </div>
369
+ </div>
370
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="132e588ca3995813ed9187854daf33e4">
371
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
372
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
373
+ </div>
374
+ </div>
375
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="613fca135a81c58fd1d062416a0f04f2">
376
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
377
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
378
+
379
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
380
+
381
+ <span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
382
+ let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
383
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
384
+ <span style="color:rgb(38, 139, 210)">}</span>
385
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
386
+ <span style="color:rgb(38, 139, 210)">}</span>
387
+
388
+ getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="4da95a72cdfe6461df5b7314e130e53a">
393
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
394
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
395
+ </div>
396
+ </div>
397
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 408px; top: 181px;" data-block-id="6020c7eb642397a71f472ab077efe9ce"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
398
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 560px; top: 164px;" data-block-id="e39cb5866657b3acc3dd4a604185b6ba"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
399
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// A</span></span></pre>
400
+ </div></div>
401
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 501px; top: 350px;" data-block-id="ab32ec10e8d508ab69a9b3513153a744"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
402
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 654px; top: 333px;" data-block-id="407c59e5274755c1bd5a48eb045ecc8c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
403
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
404
+ </div></div>
405
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 465px;" data-block-id="d156fb8fb318f2beb1e8380ff09641d1"><div class="sl-block-content fragment" data-line-x1="101" data-line-y1="0" data-line-x2="251" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="150" height="1" viewbox="101 0 150 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line></svg></div></div>
406
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 553px;" data-block-id="67f2b6e3a2c73e2333683fca3da3d522"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
407
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 159px; left: 462px; top: 536px;" data-block-id="bf12bcba3027ab7802b6ffcda951adf3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="3">
408
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 'Meow Mix'</span></span></pre>
409
+ </div></div>
410
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 270.75px; height: 300px; left: 646px; top: 315px;" data-block-id="6ae4eb14257d2eb877e17fe60e9ec45d"><div class="sl-block-content fragment" style="z-index: 22;" data-fragment-index="3"><img data-natural-width="361" data-natural-height="400" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157336/cat1.png"></div></div>
411
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="d2345ffd5861917c8bf94718fcc7d203"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 23;" data-fragment-index="3">
412
+ <pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
413
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="727bfed16d22fbb03cb57522d1aec95d">
414
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
415
+ <h1>
416
+ <span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
417
+ </h1>
418
+ </div>
419
+ </div>
420
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="76213ba32af8a5cb2ac8ffac4e04ca21">
421
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
422
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
423
+ </div>
424
+ </div>
425
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="339d6025f4e2783effb983e4c02f3d5b">
426
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
427
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
428
+
429
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
430
+
431
+ <span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
432
+ let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
433
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
434
+ <span style="color:rgb(38, 139, 210)">}</span>
435
+ <span style="color:rgb(133, 153, 0)">return</span> snack;
436
+ <span style="color:rgb(38, 139, 210)">}</span>
437
+
438
+ getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5780017c00461041aa8c363a290d1b17">
443
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
444
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
445
+ </div>
446
+ </div>
447
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 408px; top: 181px;" data-block-id="f96785ee10127c738db484670c4433a4"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
448
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 60px; left: 560px; top: 164px;" data-block-id="24657f676ef9f24f447d22aecea2780d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
449
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// A</span></span></pre>
450
+ </div></div>
451
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 501px; top: 350px;" data-block-id="1030a74d32c8717911e3f1d003928153"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
452
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 60px; left: 654px; top: 333px;" data-block-id="c3470c366f26a37aeba5b5e837b5346b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
453
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
454
+ </div></div>
455
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 160px; top: 465px;" data-block-id="23a3c5cd4c084440b6f720d822b7c967"><div class="sl-block-content fragment" data-line-x1="101" data-line-y1="0" data-line-x2="251" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="150" height="1" viewbox="101 0 150 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line></svg></div></div>
456
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 310px; top: 553px;" data-block-id="5f2cf759e94ac1b7961dd0ac6c3caa6d"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
457
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 159px; left: 462px; top: 536px;" data-block-id="40767c3cd6dda5844b3b78d60e56d812"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="3">
458
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 'Meow Mix'</span></span></pre>
459
+ </div></div>
460
+ <div class="sl-block" data-block-type="image" style="width: 382px; height: 191px; left: 590px; top: 462px;" data-block-id="d2f149e6d2c0e425d6d2c1280a547cb6"><div class="sl-block-content fragment" style="z-index: 22;" data-fragment-index="3"><img data-natural-width="390" data-natural-height="195" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157343/cat3.png"></div></div>
461
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 640px; top: 653px;" data-block-id="2f67a4c2af5fc52e4031297dbcbade49"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 23;" data-fragment-index="3">
462
+ <pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
463
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0794bc29e320c1b77a02fcb2231c0d6e"><div class="sl-block" data-block-type="text" style="width: 387px; left: 81px; top: 22px; height: auto;" data-block-id="1c9d7cb766ae1a490d5a3fc53eba1b6b">
464
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
465
+ <h1><span style="font-size:52.5px">IIFE   &gt; Blocks</span></h1>
466
+ </div>
467
+ </div>
468
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7a8b5290ebd708d1fa1b59f69898ab66">
469
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
470
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
471
+ </div>
472
+ </div>
473
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 109px; top: 238px;" data-block-id="a1ab2a1fbdb4239d22111695697f3438">
474
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-has-line-height="">
475
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span>
476
+ <span style="color:rgb(38, 139, 210)">var</span> food <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
477
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
478
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 228px; top: 78px;" data-block-id="6f623c2f91f42a722bae4e49423f0b60"><div class="sl-block-content" data-line-x1="148" data-line-y1="0" data-line-x2="200" data-line-y2="0" data-line-color="#000000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="52" height="1" viewbox="148 0 52 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="148" y1="0" x2="200" y2="0"></line><line stroke="#000000" stroke-width="2" x1="148" y1="0" x2="200" y2="0"></line></svg></div></div>
483
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="837c51aeec3617bce9159d8239a8e870">
484
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
485
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
486
+ </div>
487
+ </div>
488
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 344px; top: 395px;" data-block-id="0d5de7d70bf3b2db66c471f2f0a539db"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="172" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="1" viewbox="100 0 72 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
489
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 219px; left: 416px; top: 378px;" data-block-id="b3b6e7d4c3df6f6bb86f76b68a5db3fc"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
490
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Reference Error</span></span></pre>
491
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9ed96e6abf71cffb46f9101991915765"><div class="sl-block" data-block-type="text" style="width: 387px; left: 80px; top: 22px; height: auto;" data-block-id="6ecb5d47caa60c95822eaa370104ad01">
492
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
493
+ <h1><span style="font-size:52.5px">IIFE  &gt; Blocks</span></h1>
494
+ </div>
495
+ </div>
496
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5558e04fef6d49ba4cbc8b0675067eb2">
497
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
498
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
499
+ </div>
500
+ </div>
501
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 195px;" data-block-id="18b0e02eeaf8898200717be79963e638">
502
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-has-line-height="">
503
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">{</span>
504
+ let food <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
505
+ <span style="color:rgb(38, 139, 210)">}</span>
506
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 229px; top: 78px;" data-block-id="8f91b5832a509fe8d90d3a6f49341b31"><div class="sl-block-content" data-line-x1="155" data-line-y1="0" data-line-x2="200" data-line-y2="0" data-line-color="#000000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="45" height="1" viewbox="155 0 45 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="155" y1="0" x2="200" y2="0"></line><line stroke="#000000" stroke-width="2" x1="155" y1="0" x2="200" y2="0"></line></svg></div></div>
511
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="225178376b2d5515b0b20f5f9ca5383b">
512
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
513
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
514
+ </div>
515
+ </div>
516
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 343px; top: 350px;" data-block-id="4b7b15f108dca537b07e02c061e60ec5"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="172" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="1" viewbox="100 0 72 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
517
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 219px; left: 421px; top: 333px;" data-block-id="79cef032cd6b0ecad6eccfbdb078983d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
518
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Reference Error</span></span></pre>
519
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="f1331acbbafa20b7b187f8a0fae57989"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="51e27ec7bed98e7f619820d107bd3e9d">
520
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
521
+ <h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
522
+ </div>
523
+ </div>
524
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="040fec867c223da9cf27a41f9145b028">
525
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
526
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
527
+ </div>
528
+ </div>
529
+
530
+
531
+
532
+
533
+
534
+
535
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 104px; top: 191px;" data-block-id="6ae77d277ade352c47d37513095bd2ba"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
536
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
537
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
538
+ <span style="color:rgb(38, 139, 210)">}</span>
539
+
540
+ <span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
541
+ <span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
542
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
543
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
544
+ <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
545
+ </div></div>
546
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="cefb5c8502feed7d0197d7d36c7b318e">
547
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
548
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
549
+ </div>
550
+ </div>
551
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 282px; top: 428px;" data-block-id="d0a6a88793ff00ba195b8e6e63ddf0e7"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="-98 178 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="5.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="5.5" y2="178.5"></line></svg></div></div>
552
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 320px; top: 428px;" data-block-id="71591801265092bd29b01a8822940cce"><div class="sl-block-content fragment" data-line-x1="-26.25" data-line-y1="78" data-line-x2="46" data-line-y2="140" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="62" viewbox="-26 78 72 62"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-25.5" y1="78.5" x2="43.5" y2="137.5"></line><line stroke="#ff0000" stroke-width="3" x1="-25.5" y1="78.5" x2="43.5" y2="137.5"></line><polygon fill="#ff0000" transform="translate(43,137) rotate(130.634)" points="0,-4.5 4.5,4.5 -4.5,4.5"></polygon></svg></div></div>
553
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 524px; left: 392px; top: 467px;" data-block-id="8162a441fb30163bd43df4ceec5933d7"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
554
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Cannot read property 'name' of undefined</span></span></pre>
555
+ </div></div>
556
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 459px; top: 359px;" data-block-id="1d0b96f8d49f30194ba4932e5f00bd8d"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="103" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="201" height="1" viewbox="-98 178 201 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="101.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="101.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(101,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
557
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 59.75px; left: 660px; top: 342px;" data-block-id="888b3dc8a35bbb12b54b690d78373ff3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="0">
558
+ <pre><font color="#93a1a1"><span style="font-size:19.5993px; line-height:21.3811px">// A</span></font></pre>
559
+ </div></div>
560
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 334px; top: 396px;" data-block-id="e2f736af1c0fe76d0025a9b68e43ab93"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="180" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 20;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="278" height="1" viewbox="-98 178 278 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="178.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="178.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(178,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
561
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 625px; top: 379px;" data-block-id="cf07954eafced2a1779d00d67119f683"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="1">
562
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
563
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="24723272d9a750c7a038a91c162ee202">
564
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c37647f9fecc5c7af79aa5afd37912a1">
565
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
566
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
567
+ </div>
568
+ </div>
569
+
570
+
571
+
572
+
573
+
574
+
575
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="9d232bb8193cf0a64c6cc91faca8f503"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
576
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
577
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
578
+ <span style="color:rgb(38, 139, 210)">}</span>
579
+
580
+ <span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
581
+ <span style="color:rgb(38, 139, 210)">var</span> that <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">this</span>;
582
+ <span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
583
+ <span style="color:rgb(133, 153, 0)">return</span> that.name <span style="color:rgb(133, 153, 0)">+</span> character;
584
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
585
+ <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
586
+ </div></div>
587
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="bcd464a00c8d31a0d1720619e5e8bd02">
588
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
589
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
590
+ </div>
591
+ </div>
592
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 351px; top: 380px;" data-block-id="988eb7ad32d1aebc2277d588ffc5b0c6"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="191" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="289" height="1" viewbox="-98 178 289 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="189.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="189.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(189,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
593
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 164px; left: 647px; top: 363px;" data-block-id="64dee2bbcdb4a571ce2a90ba8da376ca"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
594
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Store this</span></span></pre>
595
+ </div></div>
596
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 282px; top: 461px;" data-block-id="e16be546ab8d18f166345207272dd8a1"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-48" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="50" height="1" viewbox="-98 178 50 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-47.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-47.5" y2="178.5"></line></svg></div></div>
597
+ <div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="dc914369e3f94a75340beec537f3cd75">
598
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 17;">
599
+ <h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
600
+ </div>
601
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a812b83ce381f2e3350730844a1c7f0c">
602
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="af46097bf2d54c67e3ee1cfbf83ac8c8">
603
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
604
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
605
+ </div>
606
+ </div>
607
+
608
+
609
+
610
+
611
+
612
+
613
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="ea686ff443cc8499b6c73dffd7f34a7f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
614
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
615
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
616
+ <span style="color:rgb(38, 139, 210)">}</span>
617
+
618
+ <span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
619
+ <span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
620
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
621
+ <span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span>;
622
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
623
+ </div></div>
624
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8d523e8998a8e59acd96539435661aee">
625
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
626
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
627
+ </div>
628
+ </div>
629
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 187px; top: 460px;" data-block-id="3b9b7a110f062ed5bfc80c7e799ca982"><div class="sl-block-content fragment" data-line-x1="-102.5" data-line-y1="178" data-line-x2="-49" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="53" height="1" viewbox="-102 178 53 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-101.5" y1="178.5" x2="-48.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-101.5" y1="178.5" x2="-48.5" y2="178.5"></line></svg></div></div>
630
+ <div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="d528c6df249833da2723abb2e20a2f9f">
631
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 15;">
632
+ <h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
633
+ </div>
634
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="857332de28c87e8828c39595a1b3bc44">
635
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e7f33024df9ce8913ac6769346d81822">
636
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
637
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
638
+ </div>
639
+ </div>
640
+
641
+
642
+
643
+
644
+
645
+
646
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="d47208be2cc82f6236ac4a249e47e3cb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui"><pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
647
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
648
+ <span style="color:rgb(38, 139, 210)">}</span>
649
+
650
+ <span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
651
+ <span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
652
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
653
+ <span style="color:rgb(38, 139, 210)">}</span>.bind<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
654
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre></div></div>
655
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="34d1799f2e5a7e3e0e5d2e0d881a84d9">
656
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
657
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
658
+ </div>
659
+ </div>
660
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 170px; top: 461px;" data-block-id="6f287c7e1c6e102cb43d3b12205a7257"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="21.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="120" height="1" viewbox="-98 178 120 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="22.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="22.5" y2="178.5"></line></svg></div></div>
661
+ <div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="1566c54963304c383225bbc18b712ef8">
662
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 15;">
663
+ <h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
664
+ </div>
665
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9bddc9ad3076515f61e62d655accf8bf"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="d9789299460946045ee4ba9a41c1ab3c">
666
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
667
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Arrow Functions</span></h1>
668
+ </div>
669
+ </div>
670
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b204b42ff02e2fb3e85144394c0b8d69">
671
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
672
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
673
+ </div>
674
+ </div>
675
+
676
+
677
+
678
+
679
+
680
+
681
+
682
+
683
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1fa7452b0bc63060e723dd22f14b9a14">
684
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
685
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
686
+ </div>
687
+ </div>
688
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 700px; left: 104px; top: 181px;" data-block-id="e69c1e8fdf43494b3ac53bde54d6ddfb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;">
689
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
690
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
691
+ <span style="color:rgb(38, 139, 210)">}</span>
692
+
693
+ <span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
694
+ <span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>character<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character <span style="color:rgb(147, 161, 161)">)</span>;
695
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
696
+ </div></div>
697
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 459px; top: 382px;" data-block-id="59bca867eec019a55c1ae4cc5a79d67e"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-63.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="35" height="1" viewbox="-98 178 35 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-62.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-62.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="16533f573d91c9e1d2bc6dba3f405237"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="48d61723a672437493c141547536d384">
698
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
699
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Arrow Functions</span></h1>
700
+ </div>
701
+ </div>
702
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="266d9ee2293a0cc25cd0bb37c05452cd">
703
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
704
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
705
+ </div>
706
+ </div>
707
+
708
+
709
+
710
+
711
+
712
+
713
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 398px;" data-block-id="9816e219e0f06fb675988563e62e586f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
714
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> arr <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">2</span>, <span style="color:rgb(38, 145, 134)">3</span>, <span style="color:rgb(38, 145, 134)">4</span>, <span style="color:rgb(38, 145, 134)">5</span><span style="color:rgb(38, 139, 210)">]</span>;
715
+ <strong>const</strong> squares <span style="color:rgb(133, 153, 0)">=</span> arr.map<span style="color:rgb(147, 161, 161)">(</span>x <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> x <span style="color:rgb(133, 153, 0)">*</span> x<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
716
+ </div></div>
717
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 650px; left: 104px; top: 193px;" data-block-id="cc15f4070e6a1e0fa0578246aa0a47a1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
718
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> squares <span style="color:rgb(133, 153, 0)">=</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>x)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">*</span> x <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
719
+ </div></div>
720
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7b5881ac464fdebe9656e8a500448a22">
721
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
722
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
723
+ </div>
724
+ </div>
725
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 235px;" data-block-id="0a11bf53dd6c28511d29b822ab02ad43"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-2.5" data-line-y2="196" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="18" viewbox="-98 178 96 18"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-5,196) rotate(100.62)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
726
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 336px; top: 236px;" data-block-id="56f15986fe69dac3a95bafced6e86309"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
727
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Function Expression</span></span></pre>
728
+ </div></div>
729
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 421px; top: 472px;" data-block-id="d8c0789683c1410fafd91278d83a67fb"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-2.5" data-line-y2="196" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="18" viewbox="-98 178 96 18"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-5,196) rotate(100.62)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
730
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 95px; left: 523px; top: 472px;" data-block-id="53a34ea3a53e2b08a4af116f9876c70f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="1">
731
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Terse </span></span></pre>
732
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ac7a457574e4c7eb885889607e4efbea"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="bdec14621a47be385cdf364918b69dc9"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
733
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 188px; left: 772px; top: 331px;" data-block-id="8f9f3a3367ce03ce46fb0debd0d24bcb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
734
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Strings</span></h2>
735
+ </div></div>
736
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="7e53596321f818264a67e9869bcda82e"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e28b835666a659231b2f167b5095d3d5"><div class="sl-block" data-block-type="text" style="width: 517.5px; left: 116px; top: 22px; height: auto;" data-block-id="2ea56db8e1ea62e2b34c740232304854">
737
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
738
+ <h1><span style="font-size:52.5px">String.prototype.includes</span></h1>
739
+ </div>
740
+ </div>
741
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b0e54a9c063ec79bc161746ca2436197">
742
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
743
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
744
+ </div>
745
+ </div>
746
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 684px; left: 116px; top: 160px;" data-block-id="1c6918c2627a4ef150e438a739a01eab">
747
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
748
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> string <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>food<span style="color:rgb(198, 0, 0)">'</span></span>;
749
+ <span style="color:rgb(38, 139, 210)">var</span> substring <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>;
750
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>string.<span style="color:rgb(38, 139, 210)">indexOf</span><span style="color:rgb(147, 161, 161)">(</span>substring<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
751
+ </div>
752
+ </div>
753
+
754
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 748px; left: 116px; top: 420px;" data-block-id="06395e4a889a913184a28a546ff8601a">
755
+ <div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="1">
756
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> string <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>food<span style="color:rgb(198, 0, 0)">'</span></span>;
757
+ <strong>const</strong> substring <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>;
758
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>string.includes<span style="color:rgb(147, 161, 161)">(</span>substring<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
759
+ </div>
760
+ </div>
761
+
762
+
763
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c5c427fb01ac4221b8a3aead1bb0cb92">
764
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
765
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
766
+ </div>
767
+ </div>
768
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 255px; top: 270px;" data-block-id="30ecb437474a3df8a54fafa581aa67e6"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="277" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="378" height="1" viewbox="-101 178 378 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="275.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="275.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(275,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
769
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 256px; top: 521px;" data-block-id="e84bdd1ab12f8b783f90219ccc7fff74"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="244" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="345" height="1" viewbox="-101 178 345 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="242.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="242.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(242,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
770
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 640px; top: 253px;" data-block-id="a55d5d0f3e7622e5fc222095c006cad7"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="0">
771
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// true</span></span></pre>
772
+ </div></div>
773
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 608px; top: 504px;" data-block-id="0f069caa5926efa9e588c694136c7cde"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
774
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// true</span></span></pre>
775
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="64461d5278507fdcb3673f801a60f631"><div class="sl-block" data-block-type="text" style="width: 477px; left: 119px; top: 30px; height: auto;" data-block-id="cfafbe41488f9ea2c86b9ffa7fb24f10">
776
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
777
+ <h1><span style="font-size:52.5px">String.prototype.repeat</span></h1>
778
+ </div>
779
+ </div>
780
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7e5dfce1d115993165d7b758fbd30b0b">
781
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
782
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
783
+ </div>
784
+ </div>
785
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 562px; left: 119px; top: 185px;" data-block-id="7df15975047c71b4e3f880a61eb62e68">
786
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
787
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> repeat(string, count)</span> <span style="color:rgb(38, 139, 210)">{</span>
788
+ <span style="color:rgb(38, 139, 210)">var</span> strings <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 139, 210)">]</span>;
789
+ <span style="color:rgb(133, 153, 0)">while</span><span style="color:rgb(147, 161, 161)">(</span>strings.length <span style="color:rgb(133, 153, 0)">&lt;</span> count<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
790
+ strings.<span style="color:rgb(38, 139, 210)">push</span><span style="color:rgb(147, 161, 161)">(</span>string<span style="color:rgb(147, 161, 161)">)</span>;
791
+ <span style="color:rgb(38, 139, 210)">}</span>
792
+ <span style="color:rgb(133, 153, 0)">return</span> strings.<span style="color:rgb(38, 139, 210)">join</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span><span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
793
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
794
+ </div>
795
+ </div>
796
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 375px; left: 119px; top: 537px;" data-block-id="54ac51ea63f26c6c11b4e6ed208e99c4">
797
+ <div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="0">
798
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>meow<span style="color:rgb(198, 0, 0)">'</span></span>.repeat<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">3</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
799
+ </div>
800
+ </div>
801
+
802
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="33b529380ceccbc0fc81b321d1d1ffdb">
803
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
804
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
805
+ </div>
806
+ </div>
807
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 326px; top: 559px;" data-block-id="79ce858ec3a0c39975248f5fb1f001a5"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-6" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="95" height="1" viewbox="-101 178 95 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-7.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-7.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-8,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
808
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 181px; left: 428px; top: 542px;" data-block-id="0e71c39a883978bd7583f390d0ab2a42"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
809
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// meowmeowmow</span></span></pre>
810
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9e200583ecebe51140dd62b77ea31f56"><div class="sl-block" data-block-type="text" style="width: 841px; left: 96px; top: 30px; height: auto;" data-block-id="bc137f7b36aef6d7bbf61737fe657482">
811
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
812
+ <h1><span style="font-size:52.5px">Template Literals: Escaping Characters</span></h1>
813
+ </div>
814
+ </div>
815
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="da18e9e028823caae02d08c57b1dbf23">
816
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
817
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
818
+ </div>
819
+ </div>
820
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 885px; left: 104px; top: 202px;" data-block-id="d578b9086fec91f14795e3b1ef508b15">
821
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
822
+ <pre><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>This string contains <span style="color:rgb(203, 75, 22)">\"</span>double quotes<span style="color:rgb(203, 75, 22)">\"</span> which are escaped.<span style="color:rgb(198, 0, 0)">"</span></span></span></pre>
823
+ </div>
824
+ </div>
825
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 826px; left: 104px; top: 350px;" data-block-id="7309c8ed1da2b8f32c2e05238512df68">
826
+ <div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" dir="ui" data-fragment-index="0">
827
+ <pre> </pre>
828
+
829
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let text <span style="color:rgb(133, 153, 0)">=</span> `This string contains <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>double quotes<span style="color:rgb(198, 0, 0)">"</span></span> which are escaped.`
830
+ </span></pre>
831
+
832
+ <p> </p>
833
+ </div>
834
+ </div>
835
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="da2328c868ef3f0d872472bd8f68e381">
836
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
837
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
838
+ </div>
839
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="000e33552f64679b9636db27efd0689f"><div class="sl-block" data-block-type="text" style="width: 681px; left: 101px; top: 30px; height: auto;" data-block-id="2f68a19ada9b71f3a230479e2d50390a">
840
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
841
+ <h1 style="text-align: left;"><span style="font-size:52.5px">Template Literals: Interpolation</span></h1>
842
+ </div>
843
+ </div>
844
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="bf09f1707284ba2d74df53ab6cd7af4e">
845
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
846
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
847
+ </div>
848
+ </div>
849
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 826px; left: 94px; top: 336px;" data-block-id="4953e8d802477333c684f3aa1cf619f9">
850
+ <div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui" data-fragment-index="0">
851
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">const name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Tiger<span style="color:rgb(198, 0, 0)">'</span></span>;
852
+ const age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">13</span>;
853
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>`My cat is named <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>name<span style="color:rgb(38, 139, 210)">}</span> and is <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>age<span style="color:rgb(38, 139, 210)">}</span> years old.`<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
854
+ </div>
855
+ </div>
856
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 876px; left: 101px; top: 179px;" data-block-id="9d69ed18c74b6ac692909970f8fa8a39"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
857
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Tiger<span style="color:rgb(198, 0, 0)">'</span></span>;
858
+ <span style="color:rgb(38, 139, 210)">var</span> age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">13</span>;
859
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>My cat is named <span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span> name <span style="color:rgb(133, 153, 0)">+</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span> and is <span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span> age <span style="color:rgb(133, 153, 0)">+</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span> years old.<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
860
+ </div></div>
861
+
862
+
863
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c90278af4ca45621fa6e3bbfb2fa617c">
864
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
865
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
866
+ </div>
867
+ </div>
868
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 435px; top: 437px;" data-block-id="b385a42e3c3f5bf33bcfbfc12fe53602"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-20" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="81" height="1" viewbox="-101 178 81 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line></svg></div></div>
869
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 607px; top: 437px;" data-block-id="538308fbd2ef62907002fd2ec1547c51"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-20" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="81" height="1" viewbox="-101 178 81 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line></svg></div></div>
870
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 182.5px; height: 211.594px; left: 425px; top: 455px;" data-block-id="1bd6c13c92a7324d4f8060124770c4f5"><div class="sl-block-content fragment" style="z-index: 17;" data-fragment-index="0"><img data-natural-width="207" data-natural-height="240" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157344/cat4.png"></div></div>
871
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="da252fd6a0293dbdef3313fbc3814dae"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="1">
872
+ <pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
873
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e6fe0e77cccc4e270ee85bf7c5668031"><div class="sl-block" data-block-type="text" style="width: 748px; left: 104px; top: 28px; height: auto;" data-block-id="7e676ee9d241ae1e1be753bc032a61de">
874
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
875
+ <h1><span style="font-size:52.5px">Template Literals: Multi-line Strings</span></h1>
876
+ </div>
877
+ </div>
878
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="64b95c3c58efac25841ab24f133633ad">
879
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
880
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
881
+ </div>
882
+ </div>
883
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 265px; left: 108px; top: 165px;" data-block-id="c1237f75f9c5c22fabaf77a9663e225d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
884
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(147, 161, 161)">(</span>
885
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>cat<span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span>
886
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>dog<span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span>
887
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>nickelodeon<span style="color:rgb(198, 0, 0)">'</span></span>
888
+ <span style="color:rgb(147, 161, 161)">)</span></span></pre>
889
+ </div></div>
890
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 273px; left: 108px; top: 414px;" data-block-id="15e3409cd8a56d75be421f3b4cf0414f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
891
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span>
892
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>cat<span style="color:rgb(198, 0, 0)">'</span></span>,
893
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>dog<span style="color:rgb(198, 0, 0)">'</span></span>,
894
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>nickelodeon<span style="color:rgb(198, 0, 0)">'</span></span>
895
+ <span style="color:rgb(38, 139, 210)">]</span>.<span style="color:rgb(38, 139, 210)">join</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span><span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span></span></pre>
896
+ </div></div>
897
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 194px; left: 543px; top: 272px;" data-block-id="a09f1cf63462cdfe13f138775674cb27"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="1">
898
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(147, 161, 161)">(</span>
899
+ `cat
900
+ dog
901
+ nickelodeon`
902
+ <span style="color:rgb(147, 161, 161)">)</span></span></pre>
903
+ </div></div>
904
+
905
+
906
+
907
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2af18d91c08d1c9e480cc1cc1bd6dc8">
908
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
909
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
910
+ </div>
911
+ </div>
912
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 248px;" data-block-id="b225ee65cd7d0cfe4ccbe39341111a52"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="84" data-line-y2="263" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="185" height="85" viewbox="-101 178 185 85"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="82.5" y2="262.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="82.5" y2="262.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(82,262) rotate(114.618)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
913
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 370px;" data-block-id="56a7e4b3c6ca867d99e05404552aa509"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="84" data-line-y2="73" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="185" height="105" viewbox="-101 73 185 105"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="82.5" y2="74.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="82.5" y2="74.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(82,74) rotate(60.489)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="cbebb8fc22b28953a0e01d16fef23647"><div class="sl-block" data-block-type="text" style="width: 667px; left: 106px; top: 28px; height: auto;" data-block-id="41cb1b1e99d2ab3a173c012db73db52f">
914
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
915
+ <h1><span style="font-size:52.5px">Template Literals: Expressions</span></h1>
916
+ </div>
917
+ </div>
918
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9db7a13de4d1e94afb9c4de4f0107c58">
919
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
920
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
921
+ </div>
922
+ </div>
923
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 906px; left: 116px; top: 285px;" data-block-id="c3a31752893c01f4d5f733a394c2be9e">
924
+ <div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-fragment-index="0" data-has-line-height="">
925
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let today <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Date<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>
926
+ let text <span style="color:rgb(133, 153, 0)">=</span> `The time and date is <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>today.<span style="color:rgb(38, 139, 210)">toLocaleString</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">}</span>`
927
+
928
+ </span></pre>
929
+ </div>
930
+ </div>
931
+
932
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="99a4280ee3a12e1d401f54952227b669">
933
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
934
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
935
+ </div>
936
+ </div>
937
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 503px; top: 372px;" data-block-id="d89a048d4fc609fe4bc35f9b0dc0cc58"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="190" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="291" height="1" viewbox="-101 178 291 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="190.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="190.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ea323ebaf10fb9a481abe7eabb43ea4f"><div class="sl-block" data-block-type="text" style="width: 748px; left: 104px; top: 28px; height: auto;" data-block-id="b459880787977ea7c2abeab26d0228cd">
938
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
939
+ <h1><span style="font-size:52.5px">Template Literals: Multi-line Strings</span></h1>
940
+ </div>
941
+ </div>
942
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d5767fb2d69792a45658b9e901ca10c7">
943
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
944
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
945
+ </div>
946
+ </div>
947
+
948
+
949
+
950
+
951
+
952
+
953
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 680px; left: 120px; top: 154px;" data-block-id="974dcd346a6a67f11cf36d9d84af5632"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
954
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let book <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span>
955
+ title: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Harry Potter and The Sorcercers Stone<span style="color:rgb(198, 0, 0)">'</span></span>,
956
+ summary: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Much magic. Such depth.<span style="color:rgb(198, 0, 0)">'</span></span>,
957
+ author: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>J.K. Rowling<span style="color:rgb(198, 0, 0)">'</span></span>
958
+ <span style="color:rgb(38, 139, 210)">}</span>
959
+
960
+ let html <span style="color:rgb(133, 153, 0)">=</span> `<span style="color:rgb(133, 153, 0)">&lt;</span>header<span style="color:rgb(133, 153, 0)">&gt;</span>
961
+ <span style="color:rgb(133, 153, 0)">&lt;</span>h1<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.title<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)">&lt;</span>/h1<span style="color:rgb(133, 153, 0)">&gt;</span>
962
+ <span style="color:rgb(133, 153, 0)">&lt;</span>/header<span style="color:rgb(133, 153, 0)">&gt;</span>
963
+ <span style="color:rgb(133, 153, 0)">&lt;</span>section<span style="color:rgb(133, 153, 0)">&gt;</span>
964
+ <span style="color:rgb(133, 153, 0)">&lt;</span>div<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.summary<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)">&lt;</span>/div<span style="color:rgb(133, 153, 0)">&gt;</span>
965
+ <span style="color:rgb(133, 153, 0)">&lt;</span>div<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.author<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)">&lt;</span>/div<span style="color:rgb(133, 153, 0)">&gt;</span>
966
+ <span style="color:rgb(133, 153, 0)">&lt;</span>/section<span style="color:rgb(133, 153, 0)">&gt;</span>`</span></pre>
967
+ </div></div>
968
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e00044518495808d68eb0ecf5b5180c9">
969
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
970
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
971
+ </div>
972
+ </div>
973
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 420px;" data-block-id="850c8ac5f7d94795a024fed779ceef20"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="30" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="131" height="1" viewbox="-101 178 131 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="30.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="30.5" y2="178.5"></line></svg></div></div>
974
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 525px;" data-block-id="3418d006612bf5fab468c85b5f06d50a"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="63" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="164" height="1" viewbox="-101 178 164 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="63.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="63.5" y2="178.5"></line></svg></div></div>
975
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 559px;" data-block-id="a7d66c0184991d6c45591e5a651c43dd"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="54" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="155" height="1" viewbox="-101 178 155 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="54.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="54.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ef0c7e6231a2e1dd5b26207b6fc4cd95"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="661d498551a327bc4031893807280ec4"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
976
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 320px; left: 640px; top: 331px;" data-block-id="a70ce76e2ada09562c79d8c4d5f7f2f9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
977
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Destructuring</span></h2>
978
+ </div></div>
979
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="093c27585a60ca59b50432813c15c62c"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="706b45bacee61ca79a7b600b16f9eb93"><div class="sl-block" data-block-type="text" style="width: 299px; left: 104px; top: 22px; height: auto;" data-block-id="03f6794ea3f093d7ea5308a0522522c1">
980
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
981
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Destructuring</span></h1>
982
+ </div>
983
+ </div>
984
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7c241b3d00cb0e6f71c5ce96af020046">
985
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
986
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
987
+ </div>
988
+ </div>
989
+
990
+
991
+
992
+
993
+
994
+
995
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 104px; top: 173px;" data-block-id="8ba99d6ed52f16621a2f9a76f5c86c7c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
996
+ <pre><br></pre>
997
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> luke <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span> occupation: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>, father: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>anakin<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
998
+ <span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">{</span>occupation, father<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> luke;
999
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>occupation<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 'jedi'</span>
1000
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>father<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 'anakin'</span></span></pre>
1001
+ </div></div>
1002
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 104px; top: 426px;" data-block-id="06bb0f7a210e88b37fd278d28c0225cc"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="3">
1003
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">[</span>a, b<span style="color:rgb(38, 139, 210)">]</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">10, 20</span><span style="color:rgb(38, 139, 210)">]</span>
1004
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>a<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 10</span></span>
1005
+ </pre>
1006
+
1007
+ <pre style="font-size: 0.9333em;"><span style="font-size:0.7em"><font color="#586e75">console</font><span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><font color="#586e75">b</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// 20</span></span></pre>
1008
+ </div></div>
1009
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0ac2425bc10ef94e19539ead86d845e2">
1010
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1011
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1012
+ </div>
1013
+ </div>
1014
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 152px; top: 286px;" data-block-id="bc8319fe0df6c09f32f1703f03a49073"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="7" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="227" height="1" viewbox="-220 36 227 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="7.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="7.5" y2="36.5"></line></svg></div></div>
1015
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 143px; top: 253px;" data-block-id="c8adfaa7de2c8ef70032ce6dbedbb777"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-155" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="65" height="1" viewbox="-220 36 65 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-154.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-154.5" y2="36.5"></line></svg></div></div>
1016
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 241px; top: 253px;" data-block-id="dfd7e70ec409e3ca5720d995d422677e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="231" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="451" height="1" viewbox="-220 36 451 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="231.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="231.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="dacfe67bcf08cb3c7e10dceac0854af1"><div class="sl-block" data-block-type="text" style="width: 293px; left: 118px; top: 22px; height: auto;" data-block-id="355dfac38f5fde13032b83346ad4f57b">
1017
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1018
+ <h1><span style="font-size:52.5px">Destructuring</span></h1>
1019
+ </div>
1020
+ </div>
1021
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0958d321a46e21c11c6bb642b40c4125">
1022
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1023
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1024
+ </div>
1025
+ </div>
1026
+
1027
+
1028
+
1029
+
1030
+
1031
+
1032
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="d7584a49c3761c6da5299f698fdac430"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1033
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getCoords <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span>
1034
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">{</span>
1035
+ x: <span style="color:rgb(38, 145, 134)">10</span>,
1036
+ y: <span style="color:rgb(38, 145, 134)">22</span>
1037
+ <span style="color:rgb(38, 139, 210)">}</span>
1038
+ <span style="color:rgb(38, 139, 210)">}</span>
1039
+
1040
+ <span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">{</span>x, y<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> getCoords<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>
1041
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>x<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 10</span>
1042
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>y<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 22</span></span></pre>
1043
+ </div></div>
1044
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2c7fa661602caaccaefebe808627c2f4">
1045
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1046
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1047
+ </div>
1048
+ </div>
1049
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 175px; top: 440px;" data-block-id="ebb1961fd49646d0836c6670f2c297d9"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-50" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="51" height="1" viewbox="-101 178 51 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-49.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-49.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ee34c8127354649ae48b62a5200b8e32"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="8d0d2cce61251c7e57ad76cb2a585b75"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
1050
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 212px; left: 748px; top: 331px;" data-block-id="ea385d033339879fd6ccc76b6a1659ae"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
1051
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Modules</span></h2>
1052
+ </div></div>
1053
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="ad257b14cbdab85dc11bce7363af85cc"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section data-id="9a4e442278e4eb94a293ec38e0c2d366"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 369.6px; height: 420px; left: 283px; top: 148px;" data-block-id="5aab15e27f808d358211ad6a9176728d"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="440" data-natural-height="500" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2153791/importexport.jpg"></div></div>
1054
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 433px; left: 526px; top: 662px;" data-block-id="796b92678b042353cbe67fc93f00f0c9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1055
+ <p style="text-align: left;"><span style="font-size:0.5em">Credit: https://www.flickr.com/photos/lucaohman/3473867313</span></p>
1056
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="296426d5738e81c9c25bb378fa767c15"><div class="sl-block" data-block-type="text" style="width: 509px; left: 118px; top: 22px; height: auto;" data-block-id="dad1fe87a909e6263add7c704ff85f2c">
1057
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1058
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in CommonJS</span></h1>
1059
+ </div>
1060
+ </div>
1061
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7c09eb4b267b000099933aa25566496e">
1062
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1063
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1064
+ </div>
1065
+ </div>
1066
+
1067
+
1068
+
1069
+
1070
+
1071
+
1072
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="6f6e105eef074c34568154fd18b3f54c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1073
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>
1074
+ module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span> foo: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
1075
+ module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
1076
+ module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> bar <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span></span></pre>
1077
+ </div></div>
1078
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 410px;" data-block-id="359c457c974681635d2af7cd97ce101d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="0">
1079
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 145, 134)">1</span>
1080
+ <strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 139, 210)">{</span> foo: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
1081
+ <strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
1082
+ <strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> bar <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span></span></pre>
1083
+ </div></div>
1084
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="eb52615dbb250acb77dcb4a0f9bc18db">
1085
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
1086
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1087
+ </div>
1088
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="89b51bd42517e1156145c180dcd0c6e7"><div class="sl-block" data-block-type="text" style="width: 336px; left: 118px; top: 22px; height: auto;" data-block-id="fb6217a200208e9240ca52367d6f41ff">
1089
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1090
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Named Exports</span></h1>
1091
+ </div>
1092
+ </div>
1093
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5793296616d3b3d91001880157fe52e3">
1094
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1095
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1096
+ </div>
1097
+ </div>
1098
+
1099
+
1100
+
1101
+
1102
+
1103
+
1104
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 209px;" data-block-id="9c0457a03a839941ce8d19795986fb4c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1105
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">module.exports.name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>David<span style="color:rgb(198, 0, 0)">'</span></span>;
1106
+ module.exports.age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">25</span>;</span></pre>
1107
+ </div></div>
1108
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 377px;" data-block-id="178019faa0b192c9285850e6be784fe1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="0">
1109
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(38, 139, 210)">var</span> name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>David<span style="color:rgb(198, 0, 0)">'</span></span>;
1110
+ <strong>export</strong> <span style="color:rgb(38, 139, 210)">var</span> age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">25</span>;​​</span></pre>
1111
+ </div></div>
1112
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6277561e09dfaf8629ba320ccd568012">
1113
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
1114
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1115
+ </div>
1116
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9ddf6b553e1eab7325840bc36aa74855"><div class="sl-block" data-block-type="text" style="width: 362px; left: 118px; top: 22px; height: auto;" data-block-id="faa7737219a78e0e7dac7c8dc2c61d88">
1117
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
1118
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in ES6</span></h1>
1119
+ </div>
1120
+ </div>
1121
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b283d8488db288207cb0964b2bc89d72">
1122
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1123
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1124
+ </div>
1125
+ </div>
1126
+
1127
+
1128
+
1129
+
1130
+
1131
+
1132
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="809f6a053fa5c5d645b21c667eee4456"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1133
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// math/addition.js</span>
1134
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
1135
+ <span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
1136
+ <span style="color:rgb(38, 139, 210)">}</span>
1137
+
1138
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
1139
+ <span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
1140
+ <span style="color:rgb(38, 139, 210)">}</span>
1141
+
1142
+
1143
+ </span></pre>
1144
+ </div></div>
1145
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="302a943ebc68d8416b900c04debda895">
1146
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1147
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1148
+ </div>
1149
+ </div>
1150
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 472px;" data-block-id="400d044949775afd466ef7db7a56b31c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
1151
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(38, 139, 210)">{</span> sumTwo, sumThree <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
1152
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="cb489e071961ec431c0cf155da28a345"><div class="sl-block" data-block-type="text" style="width: 362px; left: 118px; top: 22px; height: auto;" data-block-id="dca32cf523bf6ed006e4af106be70146">
1153
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1154
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in ES6</span></h1>
1155
+ </div>
1156
+ </div>
1157
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e9dc15b21ab3ed6c9ff9655146661e5b">
1158
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1159
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1160
+ </div>
1161
+ </div>
1162
+
1163
+
1164
+
1165
+
1166
+
1167
+
1168
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 226px;" data-block-id="a75a5c801c0fc5df522830a3c3b84e85"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1169
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
1170
+ <span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
1171
+ <span style="color:rgb(38, 139, 210)">}</span>
1172
+
1173
+ <strong>export</strong> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
1174
+ <span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
1175
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1176
+ </div></div>
1177
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="3e21da8ba94df579bcb0088390c11728">
1178
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1179
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1180
+ </div>
1181
+ </div>
1182
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 118px; top: 262px;" data-block-id="92821413e519345214e6d14f861cdc35"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-33" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-101 178 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line></svg></div></div>
1183
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 118px; top: 395px;" data-block-id="58b39e2f359e8b0c86e183584509d8c4"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-33" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-101 178 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4b2aa5768c9f10f17d5bd0e92474f97f"><div class="sl-block" data-block-type="text" style="width: 554px; left: 118px; top: 22px; height: auto;" data-block-id="6390c11bee58d5656cb6dd734a83c7e8">
1184
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
1185
+ <h1><span style="font-size:52.5px">Exporting default bindings</span></h1>
1186
+ </div>
1187
+ </div>
1188
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d14062e493e1f461acc35967187ccccd">
1189
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1190
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1191
+ </div>
1192
+ </div>
1193
+
1194
+
1195
+
1196
+
1197
+
1198
+
1199
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 146px;" data-block-id="5d095cd213697fcf82572127b01cbc52"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1200
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
1201
+ <span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
1202
+ <span style="color:rgb(38, 139, 210)">}</span>
1203
+
1204
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
1205
+ <span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
1206
+ <span style="color:rgb(38, 139, 210)">}</span>
1207
+
1208
+ </span></pre>
1209
+ </div></div>
1210
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2e70475477fdffb131aaafed03992cc">
1211
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1212
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1213
+ </div>
1214
+ </div>
1215
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 401px;" data-block-id="ac469ef89cd301cfcea8d7d338c3701b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
1216
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> api <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span>
1217
+ sumTwo : sumTwo,
1218
+ sumThree: sumThree
1219
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1220
+ </div></div>
1221
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 560px;" data-block-id="39c9f61c5a397111a25cdcfff203ed91"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="1">
1222
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> api</span></pre>
1223
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e36cab13367ff2984bef2bc721b95ee3"><div class="sl-block" data-block-type="text" style="width: 402px; left: 118px; top: 22px; height: auto;" data-block-id="60bc8781bd901399a06df01069036017">
1224
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1225
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Importing Modules</span></h1>
1226
+ </div>
1227
+ </div>
1228
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9ed4e304810dccf40245b196459debf7">
1229
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1230
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1231
+ </div>
1232
+ </div>
1233
+
1234
+
1235
+
1236
+
1237
+
1238
+
1239
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 146px;" data-block-id="f43b8b5a1881c52f4b77ce11c17d0353"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
1240
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> _ <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>underscore<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;​</span></pre>
1241
+ </div></div>
1242
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 225px;" data-block-id="3c2371572c894e626bdeaf93792409a2"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="0">
1243
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> _ from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>underscore<span style="color:rgb(198, 0, 0)">'</span></span>;</span></pre>
1244
+ </div></div>
1245
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 615px; left: 118px; top: 309px;" data-block-id="1085b8cbbc9af796f04c521be5a6ccd8"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" dir="ui" data-fragment-index="1">
1246
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(38, 139, 210)">{</span> sumTwo, sumThree <span style="color:rgb(38, 139, 210)">}</span> from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
1247
+ </div></div>
1248
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 602px; left: 118px; top: 397px;" data-block-id="fe8eae989e09ca25657104d25ca6f65e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" dir="ui" data-fragment-index="2">
1249
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(38, 139, 210)">{</span>
1250
+ sumTwo as addTwoNumbers,
1251
+ sumThree as sumThreeNumbers<span style="color:rgb(38, 139, 210)">}</span> from
1252
+ <span style="color:rgb(38, 139, 210)">}</span> from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
1253
+ </div></div>
1254
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 615px; left: 118px; top: 566px;" data-block-id="6b01d76ba11071396eefe211a9838bf1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" dir="ui" data-fragment-index="3">
1255
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(133, 153, 0)">*</span> as util from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
1256
+ </div></div>
1257
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="3549f516dfbf92373aa061a211d043eb">
1258
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="4px">
1259
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1260
+ </div>
1261
+ </div>
1262
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 253px; top: 600px;" data-block-id="6c3b1c90100d05d3795baa9c68e23dcd"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-46.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="55" height="1" viewbox="-101 178 55 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-45.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-45.5" y2="178.5"></line></svg></div></div>
1263
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 224px; top: 464px;" data-block-id="99d91fffe044d50f906769b01cbe6aac"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="90" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="191" height="1" viewbox="-101 178 191 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="90.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="90.5" y2="178.5"></line></svg></div></div>
1264
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 253px; top: 496px;" data-block-id="4bbb44d1947c4232d374487379c471d8"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="104" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 21;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="205" height="1" viewbox="-101 178 205 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="104.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="104.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="fa9f19d32b85083d9a7fdfea43a1b949"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="b814e6d37275dd87fcce8ba52f341a42"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
1265
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 274px; left: 686px; top: 331px;" data-block-id="88065e43b31927f9ba0147edcd40a06b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
1266
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Parameters</span></h2>
1267
+ </div></div>
1268
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="667b1a1ee1835aea3519b70b8b729d83"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="742ba986c23ffda6430aeb986f746104"><div class="sl-block" data-block-type="text" style="width: 406px; left: 118px; top: 22px; height: auto;" data-block-id="1316dfaf4f7a97a67e4dcf8cb1e9e06c">
1269
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
1270
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Default Parameters</span></h1>
1271
+ </div>
1272
+ </div>
1273
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="818200688cccb964acafb3ef50b799b8">
1274
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1275
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1276
+ </div>
1277
+ </div>
1278
+
1279
+
1280
+
1281
+
1282
+
1283
+
1284
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 146px;" data-block-id="6a95472f7d5074c6cb00adf7a6766412"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1285
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> addTwoNumbers(x, y)</span> <span style="color:rgb(38, 139, 210)">{</span>
1286
+ x <span style="color:rgb(133, 153, 0)">=</span> x <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">0</span>;
1287
+ y <span style="color:rgb(133, 153, 0)">=</span> y <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">0</span>;
1288
+ <span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">+</span> y;
1289
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1290
+ </div></div>
1291
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 361px;" data-block-id="85268f498ec66763474973c5011405af"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
1292
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> addTwoNumbers(x=0, y=0)</span> <span style="color:rgb(38, 139, 210)">{</span>
1293
+ <span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">+</span> y;
1294
+ <span style="color:rgb(38, 139, 210)">}</span>
1295
+ </span></pre>
1296
+ </div></div>
1297
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e6ae7cdfcde2e3c09d247d1a9866f73d">
1298
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
1299
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1300
+ </div>
1301
+ </div>
1302
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 217px;" data-block-id="335c0668da31af546aa29461534ea262"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-62" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="49" height="1" viewbox="-111 178 49 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line></svg></div></div>
1303
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 249px;" data-block-id="18756bdb74e18ff3bb90e8c567941f8b"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-62" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="49" height="1" viewbox="-111 178 49 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line></svg></div></div>
1304
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 383px; top: 396px;" data-block-id="d19e541699f63dca3bd9819bbf4542b4"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-8" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="-111 178 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-7.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-7.5" y2="178.5"></line></svg></div></div>
1305
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 510px;" data-block-id="c7aa575a5fead3c7e54b67a3760c0ed8"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
1306
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">2</span>, <span style="color:rgb(38, 145, 134)">4</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 6</span>
1307
+ addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">2</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 2</span>
1308
+ addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 0</span></span></pre>
1309
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="7c680d0c1b13d5acf0b4e2ba62962708"><div class="sl-block" data-block-type="text" style="width: 341px; left: 118px; top: 22px; height: auto;" data-block-id="9b925ce09275c60340179f4a0394319d">
1310
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1311
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Rest Parameters</span></h1>
1312
+ </div>
1313
+ </div>
1314
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e39ec199478ea603b6ed88b8b16b7c9d">
1315
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1316
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1317
+ </div>
1318
+ </div>
1319
+
1320
+
1321
+
1322
+
1323
+
1324
+
1325
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 146px;" data-block-id="8836aab5d3c0d768a99f32657633d75f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1326
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> logArguments()</span> <span style="color:rgb(38, 139, 210)">{</span>
1327
+ <span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">var</span> i<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">0</span>; i <span style="color:rgb(133, 153, 0)">&lt;</span> arguments.length; i<span style="color:rgb(133, 153, 0)">++</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1328
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arguments<span style="color:rgb(38, 139, 210)">[</span>i<span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
1329
+ <span style="color:rgb(38, 139, 210)">}</span>
1330
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1331
+ </div></div>
1332
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 366px;" data-block-id="75c1c2dd599f398c3a637d9cb2aedb0f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
1333
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> logArguments(...args)</span> <span style="color:rgb(38, 139, 210)">{</span>
1334
+ <span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let arg of args<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1335
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arg<span style="color:rgb(147, 161, 161)">)</span>;
1336
+ <span style="color:rgb(38, 139, 210)">}</span>
1337
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1338
+ </div></div>
1339
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="fd4f7b7e6470f50072d654c092dc33f6">
1340
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1341
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1342
+ </div>
1343
+ </div>
1344
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 381px; top: 210px;" data-block-id="5a26ce61926c8b1a638a62eccaccab82"><div class="sl-block-content" data-line-x1="1" data-line-y1="-40" data-line-x2="107" data-line-y2="-40" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="106" height="1" viewbox="1 -40 106 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="1.5" y1="-39.5" x2="107.5" y2="-39.5"></line><line stroke="#ff0000" stroke-width="3" x1="1.5" y1="-39.5" x2="107.5" y2="-39.5"></line></svg></div></div>
1345
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 375px; top: 397px;" data-block-id="7946374ab258f0409e176d1d128979db"><div class="sl-block-content fragment" data-line-x1="1" data-line-y1="-40" data-line-x2="36" data-line-y2="-40" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="35" height="1" viewbox="1 -40 35 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="1.5" y1="-39.5" x2="36.5" y2="-39.5"></line><line stroke="#ff0000" stroke-width="3" x1="1.5" y1="-39.5" x2="36.5" y2="-39.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="72f16e98df227166c16b8772156ff463"><div class="sl-block" data-block-type="text" style="width: 413px; left: 118px; top: 22px; height: auto;" data-block-id="7cb3e9b46e7d35b784b7eeafa5e66dab">
1346
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1347
+ <h1><span style="font-size:52.5px">Named Parameters</span></h1>
1348
+ </div>
1349
+ </div>
1350
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ad2ae3ffb6d1c40697f819e720b14aad">
1351
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1352
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1353
+ </div>
1354
+ </div>
1355
+
1356
+
1357
+
1358
+
1359
+
1360
+
1361
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 677px; left: 118px; top: 146px;" data-block-id="6293a2c6a1330582d260315e43dde7fc"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1362
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas(options)</span> <span style="color:rgb(38, 139, 210)">{</span>
1363
+ <span style="color:rgb(38, 139, 210)">var</span> height <span style="color:rgb(133, 153, 0)">=</span> options.height <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">600</span>;
1364
+ <span style="color:rgb(38, 139, 210)">var</span> width <span style="color:rgb(133, 153, 0)">=</span> options.width <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">400</span>;
1365
+ <span style="color:rgb(38, 139, 210)">var</span> lineStroke <span style="color:rgb(133, 153, 0)">=</span> options.lineStroke <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span>;
1366
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1367
+ </div></div>
1368
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 797px; left: 118px; top: 367px;" data-block-id="4374ab71b5301e177a030d9632477cc0"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="2">
1369
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas<span style="color:rgb(147, 161, 161)">(</span>
1370
+ <span style="color:rgb(38, 139, 210)">{</span> height<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">600</span>, width<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">400</span>, lineStroke<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1371
+ ...
1372
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1373
+ </div></div>
1374
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="574e09364c8512741eb13ada3894901c">
1375
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1376
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1377
+ </div>
1378
+ </div>
1379
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 320px; top: 216px;" data-block-id="84d41d305a52ed5b2dd47870624b8335"><div class="sl-block-content fragment" data-line-x1="-17" data-line-y1="153" data-line-x2="223" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="240" height="1" viewbox="-17 153 240 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-16.5" y1="153.5" x2="223.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-16.5" y1="153.5" x2="223.5" y2="153.5"></line></svg></div></div>
1380
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 422px; top: 179px;" data-block-id="bde718b9f0f2712b80cc14f5eff938d8"><div class="sl-block-content fragment" data-line-x1="-17" data-line-y1="153" data-line-x2="67" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="84" height="1" viewbox="-17 153 84 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-16.5" y1="153.5" x2="67.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-16.5" y1="153.5" x2="67.5" y2="153.5"></line></svg></div></div>
1381
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 170px; top: 434px;" data-block-id="fddfbc076089f06b7f5fda09ec0bad06"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="474" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="511" height="1" viewbox="-37 153 511 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="474.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="474.5" y2="153.5"></line></svg></div></div>
1382
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 688px; left: 112px; top: 532px;" data-block-id="5f6c962aad43e7813286276df5f29d79"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="4">
1383
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas<span style="color:rgb(147, 161, 161)">(</span>
1384
+ <span style="color:rgb(38, 139, 210)">{</span> height<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">600</span>, width<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">400</span>, lineStroke<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1385
+ ...
1386
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1387
+ </div></div>
1388
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 184px; top: 600px;" data-block-id="9b1c8b7244c1b96f1a2db2df54748c3b"><div class="sl-block-content fragment" data-line-x1="-38" data-line-y1="152.5" data-line-x2="509" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="547" height="1" viewbox="-38 153 547 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-37.5" y1="153.5" x2="509.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-37.5" y1="153.5" x2="509.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="40f0e4ff125717911f8e36ca1ae4c55a"><div class="sl-block" data-block-type="text" style="width: 381px; left: 118px; top: 22px; height: auto;" data-block-id="f170cbcd578fc4f51b82e0f933f1df43">
1389
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
1390
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Spread Operator</span></h1>
1391
+ </div>
1392
+ </div>
1393
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="255e9a075a5b6b266b5f25fad3b0bfa1">
1394
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1395
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1396
+ </div>
1397
+ </div>
1398
+
1399
+
1400
+
1401
+
1402
+
1403
+
1404
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 502px; left: 130px; top: 246px;" data-block-id="6b2e003ded4c8d8acda1c3b99faf4790"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
1405
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">Math</span>.<span style="color:rgb(38, 139, 210)">max</span><span style="color:rgb(147, 161, 161)">(</span>...<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">100</span>, <span style="color:rgb(38, 145, 134)">9001</span>, <span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">32</span><span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">) </span></span><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 9001</span></span></pre>
1406
+ </div></div>
1407
+
1408
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 130px; top: 353px;" data-block-id="1355cb4ae47c0f1614221b3189e01722"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="1">
1409
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> arr <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, ...<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">2</span>,<span style="color:rgb(38, 145, 134)">3</span><span style="color:rgb(38, 139, 210)">]</span>, <span style="color:rgb(38, 145, 134)">4</span><span style="color:rgb(38, 139, 210)">]</span>;
1410
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arr<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// [1, 2, 3, 4]</span></span></pre>
1411
+ </div></div>
1412
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6905ca6e7c70755fd3f90e6749dc0d2e">
1413
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
1414
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1415
+ </div>
1416
+ </div>
1417
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 280px;" data-block-id="069bac81e2acec21731402bf24c92ec8"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="140" data-line-x2="259" data-line-y2="140" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="259" height="1" viewbox="0 140 259 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="140.5" x2="259.5" y2="140.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="140.5" x2="259.5" y2="140.5"></line></svg></div></div>
1418
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 130px; top: 484px;" data-block-id="7984c946a4dae7df1599757122f14b9a"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
1419
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> arr1 <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span>, <span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">2</span><span style="color:rgb(38, 139, 210)">]</span>;
1420
+ <span style="color:rgb(38, 139, 210)">var</span> arr2 <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">3</span>, <span style="color:rgb(38, 145, 134)">4</span>, <span style="color:rgb(38, 145, 134)">5</span><span style="color:rgb(38, 139, 210)">]</span>;
1421
+ arr1.<span style="color:rgb(38, 139, 210)">push</span><span style="color:rgb(147, 161, 161)">(</span>...arr2<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
1422
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="decd61193ef8bda98c523f892a9d5404"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="353c948c960cc058683ad5fb8116dc01"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
1423
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 184px; left: 776px; top: 331px;" data-block-id="794994e6ac736a5561484c164028118a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
1424
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Classes</span></h2>
1425
+ </div></div>
1426
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="c7520ddce7464587575362ec5d944e99"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="35b296831c51243b2b0b71c4dc0e6d54"><div class="sl-block" data-block-type="text" style="width: 264px; left: 118px; top: 22px; height: auto;" data-block-id="3de36ee69733df5311007e90b7844e81">
1427
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1428
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Base Classes</span></h1>
1429
+ </div>
1430
+ </div>
1431
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8a569b57b61360eb84366593dbcbd7a9">
1432
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1433
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1434
+ </div>
1435
+ </div>
1436
+
1437
+
1438
+
1439
+
1440
+
1441
+
1442
+
1443
+
1444
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 210px;" data-block-id="2ff7d1fbeac69315b6c11fa262cc139b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1445
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name, age, gender)</span> <span style="color:rgb(38, 139, 210)">{</span>
1446
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
1447
+ <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
1448
+ <span style="color:rgb(38, 139, 210)">this</span>.gender <span style="color:rgb(133, 153, 0)">=</span> gender;
1449
+ <span style="color:rgb(38, 139, 210)">}</span>
1450
+
1451
+ <span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">incrementAge</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>) <span style="color:rgb(38, 139, 210)">{</span>
1452
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
1453
+ <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
1454
+ </div></div>
1455
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="07227bafd57417dfd55db2ed5e339c39">
1456
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1457
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1458
+ </div>
1459
+ </div>
1460
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 447px;" data-block-id="b00f4fc4287765634679ba50dde827af"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
1461
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 224px; top: 241px;" data-block-id="3af12e376a714212130b693d9b98c5a6"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="37" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="74" height="1" viewbox="-37 153 74 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4cb2019122dac5f34c711f1741df0d13"><div class="sl-block" data-block-type="text" style="width: 373px; left: 118px; top: 22px; height: auto;" data-block-id="451b5d97f7296aec223fd9af26dc4a9b">
1462
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1463
+ <h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Extended Classes</span></h1>
1464
+ </div>
1465
+ </div>
1466
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="915c0f7ca210dfe0e46a7776de0ab2d0">
1467
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1468
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1469
+ </div>
1470
+ </div>
1471
+
1472
+
1473
+
1474
+
1475
+
1476
+
1477
+
1478
+
1479
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 740px; left: 120px; top: 210px;" data-block-id="9efb1abae33010690571142fa1614977"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1480
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Personal(name, age, gender, occupation, hobby)</span> <span style="color:rgb(38, 139, 210)">{</span>
1481
+ Person.<span style="color:rgb(38, 139, 210)">call</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>, name, age, gender<span style="color:rgb(147, 161, 161)">)</span>;
1482
+ <span style="color:rgb(38, 139, 210)">this</span>.occupation <span style="color:rgb(133, 153, 0)">=</span> occupation;
1483
+ <span style="color:rgb(38, 139, 210)">this</span>.hobby <span style="color:rgb(133, 153, 0)">=</span> hobby;
1484
+ <span style="color:rgb(38, 139, 210)">}</span>
1485
+
1486
+ <span style="color:rgb(133, 153, 0)">Personal</span>.prototype <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">Object</span>.create<span style="color:rgb(147, 161, 161)">(</span>Person.prototype<span style="color:rgb(147, 161, 161)">)</span>;
1487
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(133, 153, 0)">Personal</span>.prototype.constructor <span style="color:rgb(133, 153, 0)">=</span> </span>Personal;
1488
+ <span style="color:rgb(133, 153, 0)">Personal</span>.prototype.<span style="color:rgb(165, 120, 0)">incrementAge</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>) <span style="color:rgb(38, 139, 210)">{</span>
1489
+ <span style="color:rgb(133, 153, 0)">return</span> Person.prototype.incrementAge.<span style="color:rgb(38, 139, 210)">call</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
1490
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1491
+ </div></div>
1492
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2163a5cd07dfab3c64e766ddad17cdb0">
1493
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1494
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1495
+ </div>
1496
+ </div>
1497
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 447px;" data-block-id="da260d7efba2d317b2149f7efaaba888"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
1498
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 224px; top: 241px;" data-block-id="8b3a13d56ea381730fc242fc1b7ae1f5"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="59" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="1" viewbox="-37 153 96 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="59.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="59.5" y2="153.5"></line></svg></div></div>
1499
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 168px; top: 279px;" data-block-id="f178cac1ac21c996ad4e3a412b4c2194"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="378" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="415" height="1" viewbox="-37 153 415 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="378.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="378.5" y2="153.5"></line></svg></div></div>
1500
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 479px;" data-block-id="d859d39919ba823eada92db9233ba6f4"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="325" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="362" height="1" viewbox="-37 153 362 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line></svg></div></div>
1501
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 120px; top: 515px;" data-block-id="f03f104d47091e2e6129e7dd2e2e3243"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="333" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="370" height="1" viewbox="-37 153 370 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="333.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="333.5" y2="153.5"></line></svg></div></div>
1502
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 168px; top: 544px;" data-block-id="91979d86c15bba41110156354a8f2c8f"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="571" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="608" height="1" viewbox="-37 153 608 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="571.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="571.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="df1758a4043fe8cf005e9411ca8d9ee2"><div class="sl-block" data-block-type="text" style="width: 442px; left: 118px; top: 22px; height: auto;" data-block-id="8f0b6a1947bb982c726dd6d87946c37a">
1503
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
1504
+ <h1 style="text-align: left;"><span style="font-size:52.5px">Base Classes in ES6</span></h1>
1505
+ </div>
1506
+ </div>
1507
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="44eb83bba94a5103bd1812bb494e161f">
1508
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1509
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1510
+ </div>
1511
+ </div>
1512
+
1513
+
1514
+
1515
+
1516
+
1517
+
1518
+
1519
+
1520
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 120px; top: 146px;" data-block-id="7b7e49b44db28661d984071ec2ec6295"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1521
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
1522
+ constructor<span style="color:rgb(147, 161, 161)">(</span>name, age, gender<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1523
+ <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
1524
+ <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
1525
+ <span style="color:rgb(38, 139, 210)">this</span>.gender <span style="color:rgb(133, 153, 0)">=</span> gender;
1526
+ <span style="color:rgb(38, 139, 210)">}</span>
1527
+
1528
+ incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1529
+ <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
1530
+ <span style="color:rgb(38, 139, 210)">}</span>
1531
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1532
+ </div></div>
1533
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a317f2589cf00232a4f2a02b6d995576">
1534
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1535
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1536
+ </div>
1537
+ </div>
1538
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 169px; top: 217px;" data-block-id="7e39f0fa1783eeefbc179d10a789bdfe"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
1539
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 188px; top: 180px;" data-block-id="6a4f4ce02fa37c709a74373f8f14fd73"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="37" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="74" height="1" viewbox="-37 153 74 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d6a5a07f28dbb64e95f784c6236882ff"><div class="sl-block" data-block-type="text" style="width: 522px; left: 118px; top: 22px; height: auto;" data-block-id="096038bc3a3019617aa5b95cbb6c676a">
1540
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
1541
+ <h1><span style="font-size:52.5px">Extended Classes in ES6</span></h1>
1542
+ </div>
1543
+ </div>
1544
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a83b5dab89e2623c77acb1fd5152e127">
1545
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1546
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1547
+ </div>
1548
+ </div>
1549
+
1550
+
1551
+
1552
+
1553
+
1554
+
1555
+
1556
+
1557
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 140px;" data-block-id="60a73c1817c4359e705102ae8ced82c1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1558
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Personal <strong>extends</strong> Person <span style="color:rgb(38, 139, 210)">{</span>
1559
+ constructor<span style="color:rgb(147, 161, 161)">(</span>name, age, gender, occupation, hobby<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1560
+ <span style="color:rgb(38, 139, 210)">super</span><span style="color:rgb(147, 161, 161)">(</span>name, age, gender<span style="color:rgb(147, 161, 161)">)</span>;
1561
+ <span style="color:rgb(38, 139, 210)">this</span>.occupation <span style="color:rgb(133, 153, 0)">=</span> occupation;
1562
+ <span style="color:rgb(38, 139, 210)">this</span>.hobby <span style="color:rgb(133, 153, 0)">=</span> hobby;
1563
+ <span style="color:rgb(38, 139, 210)">}</span>
1564
+
1565
+ incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1566
+ <span style="color:rgb(38, 139, 210)">super</span>.incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
1567
+ <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">20</span>;
1568
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>.age<span style="color:rgb(147, 161, 161)">)</span>;
1569
+ <span style="color:rgb(38, 139, 210)">}</span>
1570
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1571
+ </div></div>
1572
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8edf52ba0e7240a263623efacf4beed6">
1573
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1574
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1575
+ </div>
1576
+ </div>
1577
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 304px; top: 174px;" data-block-id="f0f1ec2776e269ee965716920cd7636a"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="41" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="78" height="1" viewbox="-37 153 78 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line></svg></div></div>
1578
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 173px; top: 210px;" data-block-id="82ccd065493b760a5860a54a385cbc02"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="530" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="567" height="1" viewbox="-37 153 567 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="530.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="530.5" y2="153.5"></line></svg></div></div>
1579
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 195px; top: 242px;" data-block-id="0a5d717a2c4c112d8da2669f9856fabc"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="240" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="277" height="1" viewbox="-37 153 277 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="240.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="240.5" y2="153.5"></line></svg></div></div>
1580
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 195px; top: 446px;" data-block-id="fbdf66ee4160442f0f11e6e3b3963863"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="224.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="262" height="1" viewbox="-37 153 262 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="222.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="222.5" y2="153.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(222,153) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
1581
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 354px; left: 463px; top: 429px;" data-block-id="20f4b6d97075ec99625c49e3fc02a484"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="3">
1582
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Calls parent incrementAge()</span></span></pre>
1583
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ccf141e3b60946886bdffaa80a0efca9" data-background-size="initial"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="8f97b3211f9153e063da14e881a5f809"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
1584
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 207px; left: 753px; top: 331px;" data-block-id="ce47aa9ac8ed6408ce8e42666a5c1648"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11; font-size: 150%;">
1585
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Symbols</span></h2>
1586
+ </div></div>
1587
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="d108fd0713501897044f8de499999b77"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="1ef9229ba2bee61b23904ebe59f48dff"><div class="sl-block" data-block-type="text" style="width: 458px; left: 118px; top: 22px; height: auto;" data-block-id="f0edfd20de81a1d5bade2768bc19d5ee">
1588
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
1589
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Unique Property Keys</span></h1>
1590
+ </div>
1591
+ </div>
1592
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8ab2ccf4c72dfeff697966ace538dc9d">
1593
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1594
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1595
+ </div>
1596
+ </div>
1597
+
1598
+
1599
+
1600
+
1601
+
1602
+
1603
+
1604
+
1605
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 218px;" data-block-id="6232e474f5b70c8d9171095ff1131af1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
1606
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> key <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
1607
+ <strong>const</strong> keyTwo <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
1608
+ <strong>const</strong> object <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>;
1609
+ </span></pre>
1610
+ </div></div>
1611
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a826ad44f0335db95dadbef334f9bb35">
1612
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1613
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1614
+ </div>
1615
+ </div>
1616
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 229px; left: 118px; top: 470px;" data-block-id="bf02de438cda09b3ea2d0f4e59e3a13e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="2">
1617
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">&gt;</span> key <span style="color:rgb(133, 153, 0)">===</span> keyTwo
1618
+ <span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(181, 137, 0)">false</span></span></pre>
1619
+ </div></div>
1620
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 353px;" data-block-id="1fc0f66d1d33d4d7b4f774fd97c6f998"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="1">
1621
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">object.key <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Such magic.<span style="color:rgb(198, 0, 0)">'</span></span>;
1622
+ object.keyTwo <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Much Uniqueness<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
1623
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0baa0fd34908a37b007f1ebc2903c6b8"><div class="sl-block" data-block-type="text" style="width: 449px; left: 118px; top: 22px; height: auto;" data-block-id="e0ea89a7d9840efabaf02f1dbe3a3ca9">
1624
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
1625
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Symbols as Concepts</span></h1>
1626
+ </div>
1627
+ </div>
1628
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d4e4e0b8323eb34952a06190e38c288d">
1629
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1630
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1631
+ </div>
1632
+ </div>
1633
+
1634
+
1635
+
1636
+
1637
+
1638
+
1639
+
1640
+
1641
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 210px;" data-block-id="7d6fa894eb115bd70adc4f658ec3c5c1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1642
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> anakin <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>;
1643
+ <strong>const</strong> yoda <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi master<span style="color:rgb(198, 0, 0)">'</span></span>;
1644
+ <strong>const</strong> luke <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>;
1645
+ </span></pre>
1646
+ </div></div>
1647
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="dfd1be4ac953f2b272acbdec8815ac6b">
1648
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
1649
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1650
+ </div>
1651
+ </div>
1652
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 389px;" data-block-id="6cca2c18e19fefa715d97bf6a0648d1f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
1653
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> anakin <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
1654
+ <strong>const</strong> yoda <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
1655
+ <strong>const</strong> luke <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
1656
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4235a2dfef93c89a75c955f31e90dab8"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="ad407f71865515aebe851634994d6a38"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
1657
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 160px; left: 800px; top: 331px;" data-block-id="b0f1cb1c1b6d07ea300ed20eeb8c1d9e"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
1658
+ <h2><span style="font-size:59.85px">Maps</span></h2>
1659
+ </div></div>
1660
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="99db6d6967c06168ad9b6f25ace6c7da"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0ceeaa82fe25b36bda01fab38bcd5867"><div class="sl-block" data-block-type="text" style="width: 449px; left: 118px; top: 22px; height: auto;" data-block-id="d9c8b50b60df619b7a597d11cb643316">
1661
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
1662
+ <h1><span style="font-size:52.5px; line-height:62.0455px">(Hash) Maps in ES5</span></h1>
1663
+ </div>
1664
+ </div>
1665
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="54770c44484b2a94f4a35b525d622216">
1666
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1667
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1668
+ </div>
1669
+ </div>
1670
+
1671
+
1672
+
1673
+
1674
+
1675
+
1676
+
1677
+
1678
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="dec73e2fc565b0bdaf6f4a8ee3bf2d91">
1679
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1680
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1681
+ </div>
1682
+ </div>
1683
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 288px;" data-block-id="51e41c4591a593fefd4daa02f6c8e521"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
1684
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">var <span style="color:rgb(38, 139, 210)">map</span> <span style="color:rgb(133, 153, 0)">=</span> new <span style="color:rgb(203, 75, 22)">Object</span><span style="color:rgb(181, 137, 0)">()</span>;
1685
+ <span style="color:rgb(38, 139, 210)">map</span>[key1] <span style="color:rgb(133, 153, 0)">=</span> 'value1';
1686
+ <span style="color:rgb(38, 139, 210)">map</span>[key2] <span style="color:rgb(133, 153, 0)">=</span> 'value2';</span></pre>
1687
+ </div></div></section><section data-id="9a136c1f758609296791fc71c0c0c236"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="b6e2d3e83ef7b2d50d186e44ea70056b"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
1688
+ <h1>Seems functional, right...?</h1>
1689
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c07b069e15c1340c644a97abc4792730"><div class="sl-block" data-block-type="text" style="width: 428px; left: 118px; top: 22px; height: auto;" data-block-id="e2d215f47f725773919a6ba5aaca054d">
1690
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
1691
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Get Own Properties</span></h1>
1692
+ </div>
1693
+ </div>
1694
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1d015e2e673a5804dd58fb979ca207cf">
1695
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1696
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1697
+ </div>
1698
+ </div>
1699
+
1700
+
1701
+
1702
+
1703
+
1704
+
1705
+
1706
+
1707
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5a9661fefefa49b1d3a8a8da654ef8c5">
1708
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1709
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1710
+ </div>
1711
+ </div>
1712
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 779px; left: 118px; top: 264px;" data-block-id="5b0292c290b4b638ff2cf8141295423d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1713
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>function</strong> <span style="color:rgb(38, 139, 210)">getOwnProperty</span>(object, propertyKey) {
1714
+ <span style="color:rgb(133, 153, 0)">return</span> (object.hasOwnProperty(propertyKey) ? object[propertyKey]<span style="color:rgb(133, 153, 0)">: </span>undefined);
1715
+ }</span></pre>
1716
+ </div></div>
1717
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 341px; top: 331px;" data-block-id="edef2e40b17704660edfe6d14075a6c6"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="129.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="167" height="1" viewbox="-37 153 167 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="130.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="130.5" y2="153.5"></line></svg></div></div>
1718
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 228px; top: 298px;" data-block-id="e85f9fd00fbff79770be188e4de85674"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-59" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="161" height="1" viewbox="-220 36 161 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-58.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-58.5" y2="36.5"></line></svg></div></div></section><section data-id="4863b24c43b088ed51df216d39e68f83"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="dbbbb2ab90959f30b1cc64b2cdcba408"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
1719
+ <h1>We should be safe...right?</h1>
1720
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="36479d5b37d781ffaaf0e47773ddc5f7">
1721
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9a886018597d79118f9dabc4ece21245">
1722
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1723
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1724
+ </div>
1725
+ </div>
1726
+
1727
+
1728
+
1729
+
1730
+
1731
+
1732
+
1733
+
1734
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="88891355ae4cac3df22275905c8b70fc">
1735
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1736
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1737
+ </div>
1738
+ </div>
1739
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 810px; left: 114px; top: 133px;" data-block-id="2480e0975015bd46fa34bf01b4a00039"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1740
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">&gt; </span>getOwnProperty({ hasOwnProperty<span style="color:rgb(133, 153, 0)">: </span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Hah, overwritten<span style="color:rgb(198, 0, 0)">'</span></span>}, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Pwned<span style="color:rgb(198, 0, 0)">'</span></span>);
1741
+ <span style="color:rgb(133, 153, 0)">&gt; </span>TypeError<span style="color:rgb(133, 153, 0)">: </span>Propery <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>hasOwnProperty<span style="color:rgb(198, 0, 0)">'</span></span> is <span style="color:rgb(133, 153, 0)">not</span> a <strong>function</strong></span></pre>
1742
+ </div></div>
1743
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 329px; top: 167px;" data-block-id="89128f2bdbeb5418fd3a88a9771bb56d"><div class="sl-block-content fragment" data-line-x1="-28" data-line-y1="152.5" data-line-x2="153" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="181" height="1" viewbox="-28 153 181 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-27.5" y1="153.5" x2="153.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-27.5" y1="153.5" x2="153.5" y2="153.5"></line></svg></div></div>
1744
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 602px; height: 328.278px; left: 218px; top: 280px;" data-block-id="806c16b45b4512dfe3863536cee9281b"><div class="sl-block-content fragment" style="z-index: 15;" data-fragment-index="2"><img data-natural-width="640" data-natural-height="349" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2153956/Nooo-Meme-Darth-Vader-04.jpg"></div></div>
1745
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 139px; top: 200px;" data-block-id="f6d8c4ca6fc3f1c34ee7ded008de40e7"><div class="sl-block-content fragment" data-line-x1="-250" data-line-y1="90" data-line-x2="367" data-line-y2="90" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="4px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="617" height="1" viewbox="-250 90 617 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-250" y1="90" x2="367" y2="90"></line><line stroke="#ff0000" stroke-width="4" x1="-250" y1="90" x2="367" y2="90"></line></svg></div></div>
1746
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 386px; left: 574px; top: 662px;" data-block-id="9a90585d15dd0687f0df78dffc2dbf2b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;">
1747
+ <p style="text-align: left;"><span style="font-size:0.5em">Credit: http://memesvault.com/nooo-meme-darth-vader/</span></p>
1748
+ </div></div></section><section data-id="4b0722247b70f8941b51f08ee8da187b"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="1a5f7a3e8206290ff2e8eb6b09253806"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
1749
+ <h1>Second time is the charm.</h1>
1750
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="5daa72a4ff3fd3cea4c2285bb3bc22fd">
1751
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="01e85bc94044d4ac2d8e1ff07b6a89c6">
1752
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
1753
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1754
+ </div>
1755
+ </div>
1756
+
1757
+
1758
+
1759
+
1760
+
1761
+
1762
+
1763
+
1764
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e25d3c4353997ea5d4b299c75c3ffe67">
1765
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1766
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1767
+ </div>
1768
+ </div>
1769
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 264px;" data-block-id="bc10db4c3388552cf9e5ee05c307f8be"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1770
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>function</strong> <span style="color:rgb(38, 139, 210)">getOwnProperty</span>(object, propertyKey) {
1771
+ <span style="color:rgb(133, 153, 0)">return</span> (Object.prototype.hasOwnProperty(object, propertyKey) ? object[propertyKey]<span style="color:rgb(133, 153, 0)">: </span>undefined);
1772
+ }</span></pre>
1773
+ </div></div>
1774
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 260px; top: 332px;" data-block-id="ddf695e11f7eca449215508ff0d5ad5b"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="325" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="362" height="1" viewbox="-37 153 362 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line></svg></div></div></section><section data-id="82cc868f866484de1c140b9cbbe52259"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 277px; height: 277px; left: 320px; top: 214px;" data-block-id="53a0563b8b355ed1c973ab3fb2cd90c8"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="363" data-natural-height="363" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149583/Pusheen24.png"></div></div>
1775
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 360px; top: 653px;" data-block-id="e5af66985e3fbcbd47e24ebf197d2bab"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
1776
+ <p><span style="font-size:0.7em">credit: http://deloiz.blogspot.com/2014/01/Pusheen.html</span></p>
1777
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a3610f815cdedd505ebb11ed0e201caf"><div class="sl-block" data-block-type="text" style="width: 282px; left: 118px; top: 22px; height: auto;" data-block-id="59fc21b2ad9904503d747814950fa530">
1778
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
1779
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Maps in ES6</span></h1>
1780
+ </div>
1781
+ </div>
1782
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8774af0928b47f61a55df8018d57107c">
1783
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1784
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1785
+ </div>
1786
+ </div>
1787
+
1788
+
1789
+
1790
+
1791
+
1792
+
1793
+
1794
+
1795
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e011e358ce027c479e53bbe6351065c5">
1796
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1797
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1798
+ </div>
1799
+ </div>
1800
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 280px;" data-block-id="e55b072a15ebd76a93fdb81b59691e4f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1801
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let map <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Map();
1802
+ &gt; map.<span style="color:rgb(38, 139, 210)">set</span>(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>david<span style="color:rgb(198, 0, 0)">'</span></span>);
1803
+ &gt; map.<span style="color:rgb(38, 139, 210)">get</span>(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>); <span style="color:rgb(147, 161, 161)">// david</span>
1804
+ &gt; map.has(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>); <span style="color:rgb(147, 161, 161)">// true</span></span></pre>
1805
+ </div></div>
1806
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 234px; top: 316px;" data-block-id="ad5e132ff0a15fd3de00564fd8aab75c"><div class="sl-block-content fragment" data-line-x1="-32" data-line-y1="152.5" data-line-x2="65" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="97" height="1" viewbox="-32 153 97 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-31.5" y1="153.5" x2="65.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-31.5" y1="153.5" x2="65.5" y2="153.5"></line></svg></div></div>
1807
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 347px;" data-block-id="8a8228242c3b31f92849dc3ee6ae5277"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div>
1808
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 347px;" data-block-id="1de070cc0c0e33ac9b6d05868c83cb31"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="31" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-37 153 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="31.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="31.5" y2="153.5"></line></svg></div></div>
1809
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 338px; top: 347px;" data-block-id="5f3d757bb3430f5f74bac468a47154f4"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="41" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="78" height="1" viewbox="-37 153 78 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line></svg></div></div>
1810
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 308px; top: 210px;" data-block-id="dcdf7365e74663e037933c7509bc1b03"><div class="sl-block-content fragment" data-line-x1="-33" data-line-y1="325.5" data-line-x2="75" data-line-y2="189" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="108" height="137" viewbox="-33 189 108 137"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-32.5" y1="326.5" x2="74.5" y2="191.5"></line><line stroke="#ff0000" stroke-width="3" x1="-32.5" y1="326.5" x2="74.5" y2="191.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(74,191) rotate(38.351)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
1811
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 85.5px; left: 422px; top: 193px;" data-block-id="f4560b3ff8cc181a9c34cdf1c2cef3e1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 20;" data-fragment-index="2">
1812
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// key</span></span></pre>
1813
+ </div></div>
1814
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 415px; top: 265px;" data-block-id="a9c3afa850313a7fa491769e5db2490f"><div class="sl-block-content fragment" data-line-x1="-33" data-line-y1="325.5" data-line-x2="111" data-line-y2="243" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 21;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="144" height="83" viewbox="-33 243 144 83"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-32.5" y1="326.5" x2="109.5" y2="244.5"></line><line stroke="#ff0000" stroke-width="3" x1="-32.5" y1="326.5" x2="109.5" y2="244.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(109,244) rotate(60.191)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
1815
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 98px; left: 568px; top: 248px;" data-block-id="0cf03992c61a75ef36b93bb49028eee3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 22;" data-fragment-index="3">
1816
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// value</span></span></pre>
1817
+ </div></div>
1818
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 382px;" data-block-id="545302408df1fbbf65c7329e639dcfd9"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 23;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div>
1819
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 415px;" data-block-id="864bdf6f93e03eba1f2239ba7cd6f652"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 24;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div></section><section data-id="7984b895283f856f147096406830fcff"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 302px; height: auto;" data-block-id="0207ecc62fa95f5d7e65699921499284"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
1820
+ <h1><span style="font-size:0.7em">Keys can be more than strings!</span></h1>
1821
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e6690e1f515240cc9eac0c46251f6826"><div class="sl-block" data-block-type="text" style="width: 522px; left: 118px; top: 22px; height: auto;" data-block-id="7bd58a5abfb4ab42a755347f433f5686">
1822
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
1823
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Arbitrary values as keys</span></h1>
1824
+ </div>
1825
+ </div>
1826
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="89f190c706295df75853e42759508fec">
1827
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1828
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1829
+ </div>
1830
+ </div>
1831
+
1832
+
1833
+
1834
+
1835
+
1836
+
1837
+
1838
+
1839
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="45520b715f1ae208e2532e4acc9b7cc4">
1840
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1841
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1842
+ </div>
1843
+ </div>
1844
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 210px;" data-block-id="d58b2c7d4754290b9f8c77cd41bf5c88"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
1845
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let map <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">[</span>
1846
+ <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>david<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
1847
+ <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(181, 137, 0)">true</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>false<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
1848
+ <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>one<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
1849
+ <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>object<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
1850
+ <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>function<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
1851
+ <span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
1852
+ </span></pre>
1853
+ </div></div>
1854
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 184px; top: 280px;" data-block-id="59876d45edf97f802bb8852e8e4757fe"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="34" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="56" height="1" viewbox="-22 153 56 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line></svg></div></div>
1855
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 313px;" data-block-id="91ade1bf136ff63d6c8e09e20140e9e8"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="34" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="56" height="1" viewbox="-22 153 56 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line></svg></div></div>
1856
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 343px;" data-block-id="3dd1d67270b8fe6df2a201f7b166a1ea"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="-2" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="20" height="1" viewbox="-22 153 20 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="-1.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="-1.5" y2="153.5"></line></svg></div></div>
1857
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 378px;" data-block-id="0a3b1608906a9e5e62497a1962ae625c"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="6" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="28" height="1" viewbox="-22 153 28 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="6.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="6.5" y2="153.5"></line></svg></div></div>
1858
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 412px;" data-block-id="abd21c5006fc42c1f48a5530ae46b10e"><div class="sl-block-content fragment" data-line-x1="-32" data-line-y1="153" data-line-x2="131" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="163" height="1" viewbox="-32 153 163 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-31.5" y1="153.5" x2="131.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-31.5" y1="153.5" x2="131.5" y2="153.5"></line></svg></div></div>
1859
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 484px;" data-block-id="819f7893bddfc2e37fd90bac47c6fbf9"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 20;" data-fragment-index="5">
1860
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let key of map.keys<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1861
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">typeof</span> key<span style="color:rgb(147, 161, 161)">)</span>;
1862
+ <span style="color:rgb(147, 161, 161)">// &gt; string, boolean, number, object, function</span>
1863
+ <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
1864
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c345c792fcbd8caf453a3007b6ae8b1b"><div class="sl-block" data-block-type="text" style="width: 226px; left: 112px; top: 22px; height: auto;" data-block-id="b76fd8468cfa4371c18d6ea7e68d8883">
1865
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
1866
+ <h1><span style="font-size:52.5px">.entries( )</span></h1>
1867
+ </div>
1868
+ </div>
1869
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1d016ce2c53f995628365635d60f1c56">
1870
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1871
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1872
+ </div>
1873
+ </div>
1874
+
1875
+
1876
+
1877
+
1878
+
1879
+
1880
+
1881
+
1882
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="f0526ffaf551b8c8a0dce7c2271442ee">
1883
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1884
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1885
+ </div>
1886
+ </div>
1887
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 210px;" data-block-id="d30905ab1568ee31f0c0dc48c17e6d3a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1888
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let entry of map.entries<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1889
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>entry<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span><span style="color:rgb(38, 139, 210)">]</span>, entry<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
1890
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1891
+ </div></div>
1892
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 112px; top: 428px;" data-block-id="6bd2ffe1d47f7e6d4316cf6ae183f508"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
1893
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let <span style="color:rgb(38, 139, 210)">[</span>key, value<span style="color:rgb(38, 139, 210)">]</span> of map.entries<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1894
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>key, value<span style="color:rgb(147, 161, 161)">)</span>;
1895
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1896
+ </div></div>
1897
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 328px; top: 243px;" data-block-id="64fd1ffa0f0c009fe401f9cf567e831b"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="128" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="152" height="1" viewbox="-24 153 152 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="128.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="128.5" y2="153.5"></line></svg></div></div>
1898
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 225px; top: 462px;" data-block-id="a0b5e2d4a25a366a94a56e597def2138"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="109" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="133" height="1" viewbox="-24 153 133 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="109.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="109.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="8bf898044658277400af9c963d4339bb"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="76be9618cbb89773474632a0f840421b"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
1899
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 289px; left: 671px; top: 331px;" data-block-id="228c42facb57850fa79bdb9ebecba4c8"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
1900
+ <h2><span style="font-size:59.85px; line-height:70.7318px">WeakMaps</span></h2>
1901
+ </div></div>
1902
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="9bfb151c29ef61af97ff7bfae798fbdb"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0ab69aed36b61605f78a77d812d6e7b8"><div class="sl-block" data-block-type="text" style="width: 226px; left: 112px; top: 22px; height: auto;" data-block-id="f215b7a88ac9b5c42feefbf8a427031b">
1903
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
1904
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Classes 101</span></h1>
1905
+ </div>
1906
+ </div>
1907
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="66b229e02ec2b51ab75860b6998b1d81">
1908
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1909
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1910
+ </div>
1911
+ </div>
1912
+
1913
+
1914
+
1915
+
1916
+
1917
+
1918
+
1919
+
1920
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="13cc59629bf24af23bae5ce61295a393">
1921
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
1922
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1923
+ </div>
1924
+ </div>
1925
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 112px; top: 199px;" data-block-id="fecac93156712d19535e94005ad998e0"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
1926
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
1927
+ constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1928
+ <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
1929
+ <span style="color:rgb(38, 139, 210)">}</span>
1930
+
1931
+ incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1932
+ <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
1933
+ <span style="color:rgb(38, 139, 210)">}</span>
1934
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1935
+ </div></div></section><section data-id="90176b1438c8aa694cd3b86f62bc786a"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="6d6db0b733eb8fa87a80af11656c4869"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
1936
+ <h1>Private data?</h1>
1937
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="aae28de5d74421def58d1a3f9b895863"><div class="sl-block" data-block-type="text" style="width: 448px; left: 106px; top: 22px; height: auto;" data-block-id="b230c4abbb7dd72d8f1e5e16ec0f3dd3">
1938
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
1939
+ <h1><span style="font-size:52.5px">Naming Conventions</span></h1>
1940
+ </div>
1941
+ </div>
1942
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1a531a31c9096ef4dda4aef1bfb32772">
1943
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1944
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1945
+ </div>
1946
+ </div>
1947
+
1948
+
1949
+
1950
+
1951
+
1952
+
1953
+
1954
+
1955
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="f39c4b516989748a69ddd3af8fa86370">
1956
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1957
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1958
+ </div>
1959
+ </div>
1960
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 112px; top: 199px;" data-block-id="48c54ca38fd241597c9216fcd69ff35f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
1961
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
1962
+ constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1963
+ <span style="color:rgb(38, 139, 210)">this</span>._age <span style="color:rgb(133, 153, 0)">=</span> age;
1964
+ <span style="color:rgb(38, 139, 210)">}</span>
1965
+
1966
+ _incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
1967
+ <span style="color:rgb(38, 139, 210)">this</span>._age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
1968
+ <span style="color:rgb(38, 139, 210)">}</span>
1969
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
1970
+ </div></div>
1971
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 263px; top: 301px;" data-block-id="12584f4890a7782e71cb06eb45f44435"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="19" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="43" height="1" viewbox="-24 153 43 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="19.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="19.5" y2="153.5"></line></svg></div></div>
1972
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 406px;" data-block-id="40248a5c503e1fd58f490f7109550d10"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="145.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="170" height="1" viewbox="-24 153 170 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="146.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="146.5" y2="153.5"></line></svg></div></div>
1973
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 227px; top: 439px;" data-block-id="276931233d0334a3f3ad85eb9c505575"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="36" height="1" viewbox="-24 153 36 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div></section><section data-id="36f11c2f80ed0e2646321fdf0c9c1b82"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 239px; height: auto;" data-block-id="e019c470688dd035e585954f92f22fae"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
1974
+ <h1>WeakMaps to the rescue!</h1>
1975
+ </div></div>
1976
+ <div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 336px; height: auto;" data-block-id="f287b76e58dcf575a44dbe83d1288192"><div class="sl-block-content fragment" data-placeholder-tag="h2" data-placeholder-text="Subtitle" data-fragment-index="0">
1977
+ <h2>(Maybe they're not so weak)</h2>
1978
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="dc6ce8638372afae4bbc0b695963ec20"><div class="sl-block" data-block-type="text" style="width: 550px; left: 90px; top: 33px; height: auto;" data-block-id="a620f5e90e4e8777bcd501058047393c">
1979
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
1980
+ <h2>WeakMaps for Privacy</h2>
1981
+ </div>
1982
+ </div>
1983
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0d61f388e0131c3a93d1773e58c48bf2">
1984
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
1985
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
1986
+ </div>
1987
+ </div>
1988
+
1989
+
1990
+
1991
+
1992
+
1993
+
1994
+
1995
+
1996
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="db3309193239efdadcedff4cda71dd96">
1997
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
1998
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
1999
+ </div>
2000
+ </div>
2001
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 501px; left: 106px; top: 115px;" data-block-id="99f4b17823149357fed6b08feca54d51"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
2002
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let _age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> WeakMap<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2003
+ <span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
2004
+ constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2005
+ _age.set<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>, age<span style="color:rgb(147, 161, 161)">)</span>;
2006
+ <span style="color:rgb(38, 139, 210)">}</span>
2007
+
2008
+ incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2009
+ let age <span style="color:rgb(133, 153, 0)">=</span> _age.get<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span>;
2010
+ <span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span>age <span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 145, 134)">90</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2011
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Midlife crisis<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2012
+ <span style="color:rgb(38, 139, 210)">}</span>
2013
+ <span style="color:rgb(38, 139, 210)">}</span>
2014
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2015
+ </div></div>
2016
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 520px; left: 106px; top: 573px;" data-block-id="5f93e9928fcabf35a095fcc866917f79"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="3">
2017
+ <pre style="font-size: 0.9333em;"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">&gt;</span><font color="#586e75"> </font><strong style="color:rgb(88, 110, 117)">const</strong><font color="#586e75"> person </font><span style="color:rgb(133, 153, 0)">=</span><font color="#586e75"> </font><span style="color:rgb(133, 153, 0)">new</span><font color="#586e75"> Person</font><span style="color:rgb(147, 161, 161)">(</span><font color="#269186">90</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">;
2018
+ </font><span style="color:rgb(133, 153, 0)">&gt;</span><font color="#586e75"> person.incrementAge</font><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// 'Midlife crisis'</span><font color="#586e75">
2019
+ </font><span style="color:rgb(133, 153, 0)">&gt;</span><font color="#586e75"> Reflect.ownKeys</font><span style="color:rgb(147, 161, 161)">(</span><font color="#586e75">person</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// []</span><font color="#586e75">
2020
+ </font></span></pre>
2021
+
2022
+ <p> </p>
2023
+ </div></div>
2024
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 106px; top: 150px;" data-block-id="d3d3023cbf7e6096a924c46bfdf87f05"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="258" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="282" height="1" viewbox="-24 153 282 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="258.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="258.5" y2="153.5"></line></svg></div></div>
2025
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 149px; top: 251px;" data-block-id="44a0851ec3d05fe8d759f4fe84d9b55b"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="206" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="230" height="1" viewbox="-24 153 230 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="206.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="206.5" y2="153.5"></line></svg></div></div>
2026
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 264px; top: 386px;" data-block-id="f181064569ce5968cde90fb41f2aac1f"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="143" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="167" height="1" viewbox="-24 153 167 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="143.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="143.5" y2="153.5"></line></svg></div></div>
2027
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 129px; top: 674px;" data-block-id="5f4c9e10bd111a7328d999034c5f61d1"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="327" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="351" height="1" viewbox="-24 153 351 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="327.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="327.5" y2="153.5"></line></svg></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 467.6px; left: 130px; top: 117px;" data-block-id="fff04cfbea9fe8e464e9875072444225"><div class="sl-block-content" style="z-index: 10;"><img data-natural-width="500" data-natural-height="334" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157571/pinky-promise_2.jpg"></div></div>
2028
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 516px; left: 434px; top: 656px;" data-block-id="c5dc7de484a64c8d66204e097ffc7403"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2029
+ <pre><span style="font-size:0.5em">credit: http://wildermuth.com/images/pinky-promise_2.jpg</span></pre>
2030
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="56d4df842023ceb5e85ed9fcf8e72443"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="d96d0eec4ade2b26203915f731c65017"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div>
2031
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 207px; left: 743px; top: 330px;" data-block-id="d0d4b6f2810cbea8a2d352970a27da88"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
2032
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Promises</span></h2>
2033
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d6a8ad09a5d37b5cb589944348b1ba34"><div class="sl-block" data-block-type="text" style="width: 280px; left: 120px; top: 22px; height: auto;" data-block-id="9b4a0f94ca7b709f3c89f98dd2ee58bf">
2034
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
2035
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Callback Hell</span></h1>
2036
+ </div>
2037
+ </div>
2038
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="50d8786f91fa53b84f5a6b6e1c371f0f">
2039
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
2040
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
2041
+ </div>
2042
+ </div>
2043
+
2044
+
2045
+
2046
+
2047
+
2048
+
2049
+
2050
+
2051
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 120px; top: 170px;" data-block-id="248ea089572a340fa673a33296ce5a98"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
2052
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">func1<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>value1)</span> <span style="color:rgb(38, 139, 210)">{</span>
2053
+ func2<span style="color:rgb(147, 161, 161)">(</span>value1, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value2<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2054
+ func3<span style="color:rgb(147, 161, 161)">(</span>value2, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value3<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2055
+ func4<span style="color:rgb(147, 161, 161)">(</span>value3, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value4<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2056
+ func5<span style="color:rgb(147, 161, 161)">(</span>value4, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value5<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2057
+ <span style="color:rgb(147, 161, 161)">// Do something with value 5</span>
2058
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2059
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2060
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2061
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2062
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2063
+ </div></div>
2064
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="153ea4566ecc11f6663c610d66b98385">
2065
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
2066
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2067
+ </div>
2068
+ </div>
2069
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 119px; top: 203px;" data-block-id="703b9ed482ee098b3f4f0611071c414f"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-111.5" data-line-y2="188" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="109" height="152" viewbox="-220 36 109 152"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-110.5" y2="188.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-110.5" y2="188.5"></line></svg></div></div>
2070
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 120px; top: 355px;" data-block-id="8f3c858fd67d59e4694a2e7c5cd79b7d"><div class="sl-block-content fragment" data-line-x1="-198" data-line-y1="217" data-line-x2="-90.5" data-line-y2="72" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="108" height="145" viewbox="-198 72 108 145"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-197.5" y1="217.5" x2="-89.5" y2="72.5"></line><line stroke="#ff0000" stroke-width="3" x1="-197.5" y1="217.5" x2="-89.5" y2="72.5"></line></svg></div></div>
2071
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 120px; top: 203px;" data-block-id="c01163cee3cee3bc64c408d75e092e98"><div class="sl-block-content fragment" data-line-x1="-234" data-line-y1="21" data-line-x2="-234" data-line-y2="318" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="297" viewbox="-234 21 1 297"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-233.5" y1="21.5" x2="-233.5" y2="318.5"></line><line stroke="#ff0000" stroke-width="3" x1="-233.5" y1="21.5" x2="-233.5" y2="318.5"></line></svg></div></div>
2072
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 35.5px; left: 138px; top: 268px;" data-block-id="61cdd5920981aa93055dbfb4545173f2"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18; color: rgb(255, 0, 0);" data-fragment-index="1">
2073
+ <p style="text-align:left">D</p>
2074
+
2075
+ <p style="text-align:left">O</p>
2076
+
2077
+ <p style="text-align:left">O</p>
2078
+
2079
+ <p style="text-align:left">M</p>
2080
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e797fb591fb91cdf81abb90be6c4843a"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="6ca487e5b597b117d0b98a32484af09c">
2081
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2082
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
2083
+ </div>
2084
+ </div>
2085
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="4f05be63850e4e5794463ce34fa09585">
2086
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2087
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
2088
+ </div>
2089
+ </div>
2090
+
2091
+
2092
+
2093
+
2094
+
2095
+
2096
+
2097
+
2098
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 236px;" data-block-id="c324b41f0d6152a6b53506407bb2a734"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2099
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">func1<span style="color:rgb(147, 161, 161)">(</span>value1<span style="color:rgb(147, 161, 161)">)</span>
2100
+ .then<span style="color:rgb(147, 161, 161)">(</span>func2<span style="color:rgb(147, 161, 161)">(</span>value1<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
2101
+ .then<span style="color:rgb(147, 161, 161)">(</span>func3<span style="color:rgb(147, 161, 161)">(</span>value2<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
2102
+ .then<span style="color:rgb(147, 161, 161)">(</span>func4<span style="color:rgb(147, 161, 161)">(</span>value3<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
2103
+ .then<span style="color:rgb(147, 161, 161)">(</span>func5<span style="color:rgb(147, 161, 161)">(</span>value4<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2104
+ <span style="color:rgb(147, 161, 161)">// Do something with value 5 </span>
2105
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2106
+ </div></div>
2107
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="72da20a07f0f9feb651ce2765c4edd2d">
2108
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
2109
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2110
+ </div>
2111
+ </div>
2112
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 148px; top: 302px;" data-block-id="0b57f8c57c0e825629e5b481e77299e5"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-162.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="58" height="1" viewbox="-220 36 58 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-161.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-161.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="634889aa325f22e8a7f375b54c72ac2b"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="00898c39425ad7cdd591ef728b6558e1">
2113
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2114
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
2115
+ </div>
2116
+ </div>
2117
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c89351e28dd4718775658b7ad9c14f74">
2118
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2119
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
2120
+ </div>
2121
+ </div>
2122
+
2123
+
2124
+
2125
+
2126
+
2127
+
2128
+
2129
+
2130
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 260px; height: 260px; left: 160px; top: 230px;" data-block-id="0ffe8570db43154c516e00ada7bd1550"><div class="sl-block-content fragment" style="z-index: 13;" data-fragment-index="0"><img data-natural-width="375" data-natural-height="375" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2148721/qtia.png"></div></div>
2131
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 244.541px; height: 280px; left: 598px; top: 220px;" data-block-id="b38b30e92d6819df7e4ef21ee28f1781"><div class="sl-block-content fragment" style="z-index: 14;" data-fragment-index="1"><img data-natural-width="200" data-natural-height="229" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2148724/q.png"></div></div>
2132
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7a27e6ac958d5f3e03dea6f44c0bf015">
2133
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
2134
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2135
+ </div>
2136
+ </div></section><section class="has-light-background" data-background-color="#ffffff" data-id="eb20bcd64bcf576d4ec843b217a55eb3"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="e67cba307e014651d4132bde69466443">
2137
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2138
+ <h1><span style="font-size:52.5px">Promises</span></h1>
2139
+ </div>
2140
+ </div>
2141
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7ba86759e44053a4636b3b4aec3d2ec7">
2142
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2143
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
2144
+ </div>
2145
+ </div>
2146
+
2147
+
2148
+
2149
+
2150
+
2151
+
2152
+
2153
+
2154
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 114px; top: 191px;" data-block-id="5cc7ec6eecdd372bb3a7fee6c41d69c5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2155
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span>resolve <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> resolve<span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
2156
+ .then<span style="color:rgb(147, 161, 161)">(</span>result <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
2157
+
2158
+
2159
+
2160
+
2161
+ <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span>
2162
+ reject<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">new</span> Error<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Failed to fufill Promise<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
2163
+ .<span style="color:rgb(133, 153, 0)">catch</span><span style="color:rgb(147, 161, 161)">(</span>reason <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>reason<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2164
+ </div></div>
2165
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2de23bb7d1c2b92fbd1c71525eac61f">
2166
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
2167
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2168
+ </div>
2169
+ </div>
2170
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 255px; top: 223px;" data-block-id="ebaaf7233cd8a6d2ed868d584462fc9e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
2171
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 268px; top: 427px;" data-block-id="710c668fc3b044c13a3b2dc0019a7759"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
2172
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 369px; top: 426px;" data-block-id="4da28b7950f23d8811f8f0d73878969e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
2173
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 494px;" data-block-id="3d1e34cee65ea1dfd836183f11479492"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="26576adb2262aac025446042fe3eeb0d"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="15ef2d9c274707635edb94eea3bc4cd1">
2174
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
2175
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
2176
+ </div>
2177
+ </div>
2178
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d97113173d910f4e9186cc225f7af4f7">
2179
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
2180
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
2181
+ </div>
2182
+ </div>
2183
+
2184
+
2185
+
2186
+
2187
+
2188
+
2189
+
2190
+
2191
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0300559c204343c52c107e37d6779f19">
2192
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
2193
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2194
+ </div>
2195
+ </div>
2196
+ <div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 842px; height: 324.744px; left: 99px; top: 188px;" data-block-id="c37b1fd5877a11a00d034b5dd595c449"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="866" data-natural-height="334" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149357/whitebackgroundpromises.png"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="b3539802200449c4092f73037564941f"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="2d06ac3dccb20295539a897f0ec828e6">
2197
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2198
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
2199
+ </div>
2200
+ </div>
2201
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c1e46935647eac5eb70cbbce7cdd085e">
2202
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2203
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
2204
+ </div>
2205
+ </div>
2206
+
2207
+
2208
+
2209
+
2210
+
2211
+
2212
+
2213
+
2214
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 814px; left: 118px; top: 216px;" data-block-id="40ac60a4326a831f6408868061fe52c5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2215
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(165, 120, 0)">fetchJSON <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span>(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
2216
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 139, 210)">{</span>
2217
+ <span style="color:rgb(133, 153, 0)">$</span>.getJSON<span style="color:rgb(147, 161, 161)">(</span>url<span style="color:rgb(147, 161, 161)">)</span>
2218
+ .done<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>json<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> resolve<span style="color:rgb(147, 161, 161)">(</span>json<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
2219
+ .fail<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>xhr, status, err<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> reject<span style="color:rgb(147, 161, 161)">(</span>status <span style="color:rgb(133, 153, 0)">+</span> err.message<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
2220
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2221
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2222
+ </div></div>
2223
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c26bd329cb4574b50da45d6b4d589633">
2224
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
2225
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2226
+ </div>
2227
+ </div>
2228
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 144px; top: 280px;" data-block-id="8d9f6ed814291bab07be209cb4513af9"><div class="sl-block-content fragment" data-line-x1="-236" data-line-y1="30" data-line-x2="180" data-line-y2="30" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="416" height="1" viewbox="-236 30 416 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-235.5" y1="30.5" x2="180.5" y2="30.5"></line><line stroke="#ff0000" stroke-width="3" x1="-235.5" y1="30.5" x2="180.5" y2="30.5"></line></svg></div></div>
2229
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 248px;" data-block-id="45b67429c99b18c069272aaec0a442f9"><div class="sl-block-content fragment" data-line-x1="-236" data-line-y1="30" data-line-x2="-124" data-line-y2="30" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="112" height="1" viewbox="-236 30 112 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-235.5" y1="30.5" x2="-123.5" y2="30.5"></line><line stroke="#ff0000" stroke-width="3" x1="-235.5" y1="30.5" x2="-123.5" y2="30.5"></line></svg></div></div>
2230
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 376px; top: 350px;" data-block-id="69ea48e2baf9691f23d48e011b82ea55"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="79" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="79" height="1" viewbox="0 100 79 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line></svg></div></div>
2231
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 186px; top: 350px;" data-block-id="5965ce5b9cb70bcb61f1bff058b9421a"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="66" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="66" height="1" viewbox="0 100 66 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="66.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="66.5" y2="100.5"></line></svg></div></div>
2232
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 193px; top: 380px;" data-block-id="e9c907316b9d36ec4815a00f1c618fff"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="59" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="59" height="1" viewbox="0 100 59 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="59.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="59.5" y2="100.5"></line></svg></div></div>
2233
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 514px; top: 380px;" data-block-id="3162ea4b30d5ab7a51d83ce728f24562"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="79" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="79" height="1" viewbox="0 100 79 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="5c330950352bb24cdbc5a70e7947115b"><div class="sl-block" data-block-type="text" style="width: 572px; left: 112px; top: 32px; height: auto;" data-block-id="62e3a9284aba644d9cb7677a93f13940">
2234
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2235
+ <h1 style="text-align: left;"><span style="font-size:52.5px">Parallelizing using Promises</span></h1>
2236
+ </div>
2237
+ </div>
2238
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a9f119f240335fce40144b206bb63db2">
2239
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2240
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2241
+ </div>
2242
+ </div>
2243
+
2244
+
2245
+
2246
+
2247
+
2248
+
2249
+
2250
+
2251
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 148px;" data-block-id="4e5c62b1b1cd91548dcd01e0e1b0b896"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2252
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> urls <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span>
2253
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://www.api.com/items/1234<span style="color:rgb(198, 0, 0)">'</span></span>,
2254
+ <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://www.api.com/items/4567<span style="color:rgb(198, 0, 0)">'</span></span>
2255
+ <span style="color:rgb(38, 139, 210)">]</span>;
2256
+
2257
+ <span style="color:rgb(38, 139, 210)">var</span> urlPromises <span style="color:rgb(133, 153, 0)">=</span> urls.map<span style="color:rgb(147, 161, 161)">(</span>fetchJSON<span style="color:rgb(147, 161, 161)">)</span>;
2258
+
2259
+ Promise.all<span style="color:rgb(147, 161, 161)">(</span>urlPromises<span style="color:rgb(147, 161, 161)">)</span>
2260
+ .then<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>results<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2261
+ results.forEach<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2262
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2263
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
2264
+ .<span style="color:rgb(133, 153, 0)">catch</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>err<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2265
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>Failed: <span style="color:rgb(198, 0, 0)">"</span></span>, err<span style="color:rgb(147, 161, 161)">)</span>;
2266
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2267
+ </div></div>
2268
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 350px;" data-block-id="7ed5fb163a38fe7b63817a53681dcdc2"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="131" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="131" height="1" viewbox="0 100 131 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="131.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="131.5" y2="100.5"></line></svg></div></div>
2269
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 419px;" data-block-id="e89c611a21ce067123f801d80171b60d"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="128" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="128" height="1" viewbox="0 100 128 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line></svg></div></div>
2270
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 176px; top: 489px;" data-block-id="131f1c468b5e41d9e25e8e9e08022759"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="172.5" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="173" height="1" viewbox="0 100 173 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="173.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="173.5" y2="100.5"></line></svg></div></div>
2271
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 141px; top: 587px;" data-block-id="60ee60ea8b3679b7d75b2d421aba8fcf"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="224" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="224" height="1" viewbox="0 100 224 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="224.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="224.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="36287dd6b364d678b42295a4ecbdc0ab"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="649e9848a3660de602c19eb72499aeb0"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div>
2272
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 274px; left: 686px; top: 331px;" data-block-id="9568690c5e84ffe348d476c3db123828"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
2273
+ <h2><span style="font-size:59.85px; line-height:70.7318px">Generators</span></h2>
2274
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e9fb2d56545bba5bf0f9dd8cb7a92da9"><div class="sl-block" data-block-type="text" style="width: 208px; left: 80px; top: 33px; height: auto;" data-block-id="53139c7c785c28ae90ad5d7ed6319bc2">
2275
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2276
+ <h1><span style="font-size:0.7em">Syntax</span></h1>
2277
+ </div>
2278
+ </div>
2279
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8985516f9adc983fabc4630ee2c95416">
2280
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2281
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2282
+ </div>
2283
+ </div>
2284
+
2285
+
2286
+
2287
+
2288
+
2289
+
2290
+
2291
+
2292
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 362px; left: 112px; top: 148px;" data-block-id="8f26b9fefeb89345621c41edd8dd9ec7"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2293
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2294
+ yield <span style="color:rgb(38, 145, 134)">1</span>;
2295
+ yield <span style="color:rgb(38, 145, 134)">2</span>;
2296
+ yield <span style="color:rgb(38, 145, 134)">3</span>;
2297
+ yield <span style="color:rgb(38, 145, 134)">4</span>;
2298
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2299
+ </div></div>
2300
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 112px; top: 389px;" data-block-id="d8dd566c9167210e190e569ea9fa13f0"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
2301
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> generator <span style="color:rgb(133, 153, 0)">=</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2302
+ <span style="color:rgb(38, 139, 210)">var</span> value <span style="color:rgb(133, 153, 0)">=</span> generator.next<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2303
+ <span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 1, done: false }</span>
2304
+ <span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 2, done: false }</span>
2305
+ <span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 3, done: false }</span>
2306
+ <span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 4, done: false }</span></span></pre>
2307
+ </div></div>
2308
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 183px;" data-block-id="3ec914e090e30d1ba1f42371084dd5a8"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="105" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="105" height="1" viewbox="0 100 105 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="105.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="105.5" y2="100.5"></line></svg></div></div>
2309
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 419px;" data-block-id="56a59dbba45f02584887bfb3013655a7"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="152" data-line-y2="101" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="152" height="1" viewbox="0 100 152 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="152.5" y2="101.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="152.5" y2="101.5"></line></svg></div></div>
2310
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 256px; top: 455px;" data-block-id="dbfa88e62a9eed4939b3283284699c62"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="180" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="180" height="1" viewbox="0 100 180 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="180.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="180.5" y2="100.5"></line></svg></div></div>
2311
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 411px; top: 490px;" data-block-id="d4a345984dd3ab0a2a98a1e4c224ae02"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="287" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="287" height="1" viewbox="0 100 287 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="287.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="287.5" y2="100.5"></line></svg></div></div></section><section data-id="122689eb24533399f2654d4dee80c6c8"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="9ae5a7fe5430f567b419abbf299e649c"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
2312
+ <h1>What about using return?</h1>
2313
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d35d282e41a78977955cdd00e79c1ccf"><div class="sl-block" data-block-type="text" style="width: 462px; left: 112px; top: 32px; height: auto;" data-block-id="7547234925b920b3c007ef3b60e3432a">
2314
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2315
+ <h1><span style="font-size:0.7em">Return in a Generator</span></h1>
2316
+ </div>
2317
+ </div>
2318
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b64fa0dba4d1e065c5fc4261f48a8979">
2319
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2320
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2321
+ </div>
2322
+ </div>
2323
+
2324
+
2325
+
2326
+
2327
+
2328
+
2329
+
2330
+
2331
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 190px;" data-block-id="6cfe79bfd3f9aa59d95724da24ba4e82"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2332
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2333
+ yield <span style="color:rgb(38, 145, 134)">1</span>;
2334
+ yield <span style="color:rgb(38, 145, 134)">2</span>;
2335
+ yield <span style="color:rgb(38, 145, 134)">3</span>;
2336
+ yield <span style="color:rgb(38, 145, 134)">4</span>;
2337
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 145, 134)">5</span>;
2338
+ <span style="color:rgb(38, 139, 210)">}</span>
2339
+
2340
+ <span style="color:rgb(133, 153, 0)">for</span><span style="color:rgb(147, 161, 161)">(</span>let val of sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2341
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>val<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 1, 2, 3, 4</span>
2342
+ <span style="color:rgb(38, 139, 210)">}</span> </span></pre>
2343
+ </div></div>
2344
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 391px;" data-block-id="0a203f94b0fc79a2f5c44615ad89feeb"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="103" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="0 100 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="103.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="103.5" y2="100.5"></line></svg></div></div>
2345
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 497px;" data-block-id="d5523cd2bd4d607ce9aaa30c4a344031"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="368" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="368" height="1" viewbox="0 100 368 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="368.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="368.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="25a49093a42665fa4b45d1660268a1aa"><div class="sl-block" data-block-type="text" style="width: 511px; left: 112px; top: 32px; height: auto;" data-block-id="9cd55333435125070113d3fa99cc793b">
2346
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2347
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Real Generator Function</span></h1>
2348
+ </div>
2349
+ </div>
2350
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0a34b24729e50d7514137ab29828b2b1">
2351
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2352
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2353
+ </div>
2354
+ </div>
2355
+
2356
+
2357
+
2358
+
2359
+
2360
+
2361
+
2362
+
2363
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 129px;" data-block-id="0dd05849b41f6ca08d6e831ea4a986c4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2364
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> factorial<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">{</span>
2365
+ let <span style="color:rgb(38, 139, 210)">[</span>current, total<span style="color:rgb(38, 139, 210)">]</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span>, <span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(38, 139, 210)">]</span>;
2366
+
2367
+ <span style="color:rgb(133, 153, 0)">while</span> <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">true</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">{</span>
2368
+ yield total;
2369
+ current<span style="color:rgb(133, 153, 0)">++</span>;
2370
+ total <span style="color:rgb(133, 153, 0)">=</span> total <span style="color:rgb(133, 153, 0)">*</span> current;
2371
+ <span style="color:rgb(38, 139, 210)">}</span>
2372
+ <span style="color:rgb(38, 139, 210)">}</span>
2373
+
2374
+ <span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let n of factorial<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2375
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>n<span style="color:rgb(147, 161, 161)">)</span>;
2376
+ <span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span>n <span style="color:rgb(133, 153, 0)">&gt;=</span> <span style="color:rgb(38, 145, 134)">100000</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2377
+ <span style="color:rgb(133, 153, 0)">break</span>;
2378
+ <span style="color:rgb(38, 139, 210)">}</span>
2379
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2380
+ </div></div>
2381
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 136px; top: 199px;" data-block-id="320e0a8afa1501f9d771eb43c4ad5e98"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="231.5" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="232" height="1" viewbox="0 100 232 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="232.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="232.5" y2="100.5"></line></svg></div></div>
2382
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 296px;" data-block-id="9b97cea65b5b4d777ea4538f2341bdbe"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="128" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="128" height="1" viewbox="0 100 128 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line></svg></div></div>
2383
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 500px;" data-block-id="b216fb9d27b079f4b69445bc186285c6"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="301" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="301" height="1" viewbox="0 100 301 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="301.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="301.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ae2c0fd2f20a0b5e99c6afe0bd5b8568"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="e52a2c4c4cf2b2cf48505b12addace4f">
2384
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
2385
+ <h1 style="text-align: left;"><span style="font-size:52.5px">Writing Sync-Async </span></h1>
2386
+ </div>
2387
+ </div>
2388
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e7e754929db03b94a8ce8eed14408d83">
2389
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2390
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2391
+ </div>
2392
+ </div>
2393
+
2394
+
2395
+
2396
+
2397
+
2398
+
2399
+
2400
+
2401
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 112px; top: 178px;" data-block-id="be7dd21d8f954226ff808ff063ff2cce"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2402
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> request(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
2403
+ getJSON<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>response<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2404
+ generator.next<span style="color:rgb(147, 161, 161)">(</span>response<span style="color:rgb(147, 161, 161)">)</span>;
2405
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2406
+ <span style="color:rgb(38, 139, 210)">}</span>
2407
+
2408
+ <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> getData<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2409
+ <span style="color:rgb(38, 139, 210)">var</span> entry1 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2410
+ <span style="color:rgb(38, 139, 210)">var</span> data1 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry1<span style="color:rgb(147, 161, 161)">)</span>;
2411
+ <span style="color:rgb(38, 139, 210)">var</span> entry2 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item2<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2412
+ <span style="color:rgb(38, 139, 210)">var</span> data2 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry2<span style="color:rgb(147, 161, 161)">)</span>;
2413
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2414
+ </div></div>
2415
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 206px; top: 280px;" data-block-id="2d6b2d3c26612f491386c3435b133995"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="163" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="163" height="1" viewbox="0 100 163 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="163.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="163.5" y2="100.5"></line></svg></div></div>
2416
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 410px;" data-block-id="3742fe8c39c351dcd42e3ce515cd09cf"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="221" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="221" height="1" viewbox="0 100 221 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="221.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="221.5" y2="100.5"></line></svg></div></div>
2417
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 445px;" data-block-id="acc6ddb945542ec6cd4346fdd55a98c2"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="599" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="599" height="1" viewbox="0 100 599 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="599.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="599.5" y2="100.5"></line></svg></div></div>
2418
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 159px; top: 480px;" data-block-id="92537275ad91be922218993327aa72a0"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="367" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="367" height="1" viewbox="0 100 367 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="367.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="367.5" y2="100.5"></line></svg></div></div></section><section data-id="cb86bc63209094e494e605835d72f074"><div class="sl-block" data-block-type="text" style="width: 872px; left: 80px; top: 313px; height: auto;" data-block-id="88277cd9afa654d9babef5d747364e0f"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
2419
+ <h2>Not without problems though...</h2>
2420
+ </div></div></section><section data-id="87f4dc2afa162ecea575fc31fa32d9ca"><div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 729px; left: 132px; top: 157px;" data-block-id="62da03fb1e53ed10e50c6bf56187fccd">
2421
+ <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10; text-align: left; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" dir="ui">
2422
+ <h3 class="fragment" data-fragment-index="2" style="color: rgb(251, 222, 52); text-align: left;"> </h3>
2423
+
2424
+ <ul>
2425
+ <li class="visible" style="color: rgb(251, 222, 52);">
2426
+ <h3><span style="font-size:1.0em;"><span style="color:black">How do we handle errors?</span> </span></h3>
2427
+ </li>
2428
+ <li class="fragment" data-fragment-index="0" style="color: rgb(251, 222, 52);">
2429
+ <h3><span style="font-size:1.0em;"><span style="color:black">getJSON not in control</span> </span></h3>
2430
+ </li>
2431
+ <li class="fragment" data-fragment-index="1" style="color: rgb(251, 222, 52);">
2432
+ <h3><span style="font-size:1.0em;"><span style="color:black">Parallelize?</span> </span></h3>
2433
+ </li>
2434
+ </ul>
2435
+ </div>
2436
+ </div>
2437
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="195630d346665afbe8f09433da78fb2c">
2438
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
2439
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2440
+ </div>
2441
+ </div></section><section data-id="f626262a4f441530f6c23838cb235da3"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 506.667px; height: 380px; left: 227px; top: 180px;" data-block-id="872e298b2d019180d03ccd2333e3f5d8"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="400" data-natural-height="300" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149789/allthethings.jpg"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c7f875d262172a5ce1d1d5be6cc2bdec"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="a8475473eaeb624c238d1d94c4c40410">
2442
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
2443
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Generators &amp; Promises</span></h1>
2444
+ </div>
2445
+ </div>
2446
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="cdbaa59a785d3ea2b8ccebaab7a5b307">
2447
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2448
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2449
+ </div>
2450
+ </div>
2451
+
2452
+
2453
+
2454
+
2455
+
2456
+
2457
+
2458
+
2459
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 280px;" data-block-id="6e241c846a4ea1785f8c3513ed8c9de4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2460
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> request(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
2461
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 139, 210)">{</span>
2462
+ getJSON<span style="color:rgb(147, 161, 161)">(</span>url, resolve<span style="color:rgb(147, 161, 161)">)</span>;
2463
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2464
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2465
+ </div></div>
2466
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 148px; top: 350px;" data-block-id="2e60a0dc0a3833b1028232df9c873e98"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="207" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="207" height="1" viewbox="0 100 207 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="207.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="207.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="567963526087dc70f2ca4a6d10636f9a"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="0c17be190d1081182b27bfdbf8212e10">
2467
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
2468
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Generators &amp; Promises</span></h1>
2469
+ </div>
2470
+ </div>
2471
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ae11ba0d594b2386b7d9a8288af86589">
2472
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2473
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2474
+ </div>
2475
+ </div>
2476
+
2477
+
2478
+
2479
+
2480
+
2481
+
2482
+
2483
+
2484
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 151px;" data-block-id="3c0ca41b68b716c6eed732a96246b4f4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2485
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> iterateGenerator(gen)</span> <span style="color:rgb(38, 139, 210)">{</span>
2486
+ <span style="color:rgb(38, 139, 210)">var</span> generator <span style="color:rgb(133, 153, 0)">=</span> gen<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2487
+ <span style="color:rgb(38, 139, 210)">var</span> ret;
2488
+ <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> iterate(val)</span> <span style="color:rgb(38, 139, 210)">{</span>
2489
+ ret <span style="color:rgb(133, 153, 0)">=</span> generator.next<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2490
+ <span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">!</span>ret.done<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2491
+ ret.value.then<span style="color:rgb(147, 161, 161)">(</span>iterate<span style="color:rgb(147, 161, 161)">)</span>;
2492
+ <span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">else</span> <span style="color:rgb(38, 139, 210)">{</span>
2493
+ <span style="color:rgb(38, 139, 210)">setTimeout</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2494
+ iterate<span style="color:rgb(147, 161, 161)">(</span>ret.value<span style="color:rgb(147, 161, 161)">)</span>;
2495
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2496
+ <span style="color:rgb(38, 139, 210)">}</span>
2497
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2498
+ <span style="color:rgb(38, 139, 210)">}</span></span></pre>
2499
+ </div></div>
2500
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 143px; top: 218px;" data-block-id="4a61451e17ba805bad81a9f8c5e49e53"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="247" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="247" height="1" viewbox="0 100 247 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="247.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="247.5" y2="100.5"></line></svg></div></div>
2501
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 194px; top: 318px;" data-block-id="280927949e79c5b75ffc78a3fc6544e0"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="259" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="259" height="1" viewbox="0 100 259 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="259.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="259.5" y2="100.5"></line></svg></div></div>
2502
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 242px; top: 387px;" data-block-id="74eab7f04eaece240a794369157675df"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="275" data-line-y2="99.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="275" height="1" viewbox="0 100 275 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="275.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="275.5" y2="100.5"></line></svg></div></div>
2503
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 290px; top: 490px;" data-block-id="c8d7ec9c33dd2970edddd2db64c578df"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="212" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="212" height="1" viewbox="0 100 212 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="212.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="212.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="20538dde8f8ae6de16a7b310e080144f"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="5a1ccf59e43725b918512bdb2d22f234">
2504
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11; text-align: left;" dir="ui">
2505
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Generators &amp; Promises</span></h1>
2506
+ </div>
2507
+ </div>
2508
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="60d701128c72a0e7faeb785e0a3ad638">
2509
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
2510
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2511
+ </div>
2512
+ </div>
2513
+
2514
+
2515
+
2516
+
2517
+
2518
+
2519
+
2520
+
2521
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 249px;" data-block-id="fe1928605b85df28609821c92634bc16"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
2522
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">iterateGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> getData<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2523
+ <span style="color:rgb(38, 139, 210)">var</span> entry1 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2524
+ <span style="color:rgb(38, 139, 210)">var</span> data1 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry1<span style="color:rgb(147, 161, 161)">)</span>;
2525
+ <span style="color:rgb(38, 139, 210)">var</span> entry2 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item2<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2526
+ <span style="color:rgb(38, 139, 210)">var</span> data2 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry2<span style="color:rgb(147, 161, 161)">)</span>;
2527
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2528
+ </div></div></section><section data-id="bafc3fec81a2c04804a8bb7a1ff44d20"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 239px; height: auto;" data-block-id="e578cb5ad2196dead92782233dcc6d3d"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
2529
+ <h1>Alternate Solution?</h1>
2530
+ </div></div>
2531
+ <div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 313px; height: auto;" data-block-id="b2071f218e22f7341b782fde9aa5b3c2"><div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Subtitle">
2532
+ <h2>Beyond ES6</h2>
2533
+ </div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="780231b90b41fb453a7b1db6726c3f12"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="3ef071da475468d87caa943fcfb675e7">
2534
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
2535
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Async / Await (ES7)</span></h1>
2536
+ </div>
2537
+ </div>
2538
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="03d2e04aa32186882ab0653c7abb923b">
2539
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2540
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2541
+ </div>
2542
+ </div>
2543
+
2544
+
2545
+
2546
+
2547
+
2548
+
2549
+
2550
+
2551
+ <div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 148px;" data-block-id="44c04ec07fd59f7860d3331b64e7e493"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2552
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> request <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>request<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2553
+
2554
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getJSON(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
2555
+
2556
+ request<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>error, response, body<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2557
+ <span style="color:rgb(133, 153, 0)">return</span> body;
2558
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2559
+ <span style="color:rgb(38, 139, 210)">}</span>
2560
+
2561
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> main()</span> <span style="color:rgb(38, 139, 210)">{</span>
2562
+ <span style="color:rgb(38, 139, 210)">var</span> data <span style="color:rgb(133, 153, 0)">=</span> getJSON<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2563
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// Undefined</span>
2564
+ <span style="color:rgb(38, 139, 210)">}</span>
2565
+
2566
+ main<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2567
+ </div></div>
2568
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 204px; top: 250px;" data-block-id="fb3c2c92313a58406a6742dc257364d7"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
2569
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 122px; top: 317px;" data-block-id="8fe9d1e3cb9ab755c6d74eddf6ebe7ba"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="332" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="505" height="1" viewbox="-173 0 505 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="332.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="332.5" y2="0.5"></line></svg></div></div>
2570
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 144px; top: 349px;" data-block-id="b21660af2376091da86139a356166ec8"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
2571
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 122px; top: 517px;" data-block-id="f8e87b5ed1de1f3d3014752738e02442"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="38" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="211" height="1" viewbox="-173 0 211 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="38.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="38.5" y2="0.5"></line></svg></div></div>
2572
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 349px; top: 550px;" data-block-id="0d90ac999c697ef633d2a3fde79ab960"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="3086aac54a037a7ac7128b789e9efd2e"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 22px; height: auto;" data-block-id="9506bf2e2e08a8bbd13d029a1e4953c5">
2573
+ <div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
2574
+ <h1><span style="font-size:52.5px; line-height:62.0455px">Async / Await (ES7)</span></h1>
2575
+ </div>
2576
+ </div>
2577
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="114e94949c639d60f6b6fc2d9beadb74">
2578
+ <div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
2579
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
2580
+ </div>
2581
+ </div>
2582
+
2583
+
2584
+
2585
+
2586
+
2587
+
2588
+
2589
+
2590
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 676px; left: 98px; top: 119px;" data-block-id="2ee06920567cc32a0744e01077d7099a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2591
+ <pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> request <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>request<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
2592
+
2593
+ <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getJSON(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
2594
+ <span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2595
+ request<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>error, response, body<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
2596
+ resolve<span style="color:rgb(147, 161, 161)">(</span>body<span style="color:rgb(147, 161, 161)">)</span>;
2597
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2598
+ <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
2599
+ <span style="color:rgb(38, 139, 210)">}</span>
2600
+
2601
+ async <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> main()</span> <span style="color:rgb(38, 139, 210)">{</span>
2602
+ <span style="color:rgb(38, 139, 210)">var</span> data <span style="color:rgb(133, 153, 0)">=</span> await getJSON<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2603
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// NOT undefined!</span>
2604
+ <span style="color:rgb(38, 139, 210)">}</span>
2605
+
2606
+ main<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
2607
+ console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>The data is: <span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
2608
+ </div></div>
2609
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 121px; top: 253px;" data-block-id="17d1eda764290f592b19e99c01edb0e4"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="33" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="206" height="1" viewbox="-173 0 206 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="33.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="33.5" y2="0.5"></line></svg></div></div>
2610
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 171px; top: 322px;" data-block-id="ffe4e23f354c4aeae840297bd34f42a4"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
2611
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 98px; top: 490px;" data-block-id="3b552b0e25082a1fe472eb33f0996f68"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-111" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="62" height="1" viewbox="-173 0 62 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-110.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-110.5" y2="0.5"></line></svg></div></div>
2612
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 262px; top: 559px;" data-block-id="2245fcc89bb768e540ac5e64f3d1ceda"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-115" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="58" height="1" viewbox="-173 0 58 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-114.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-114.5" y2="0.5"></line></svg></div></div>
2613
+ <div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 98px; top: 690px;" data-block-id="b57b1cd3ebfd5d50b4099e6b92e44418"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="164.5" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="338" height="1" viewbox="-173 0 338 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="165.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="165.5" y2="0.5"></line></svg></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 438.298px; left: 129px; top: 162px;" data-block-id="f9e85462aa600a10bdf3f9dbe26ab3e0"><div class="sl-block-content"><img data-natural-width="658" data-natural-height="412" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157420/meme3.jpg"></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 563.485px; left: 130px; top: 68px;" data-block-id="662e55ac2028644373730d66a86ce2c7"><div class="sl-block-content"><img data-natural-width="964" data-natural-height="776" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157539/cheatsheet.png"></div></div></section><section data-id="1beb2db9b5bb7d4388a4b6bc1863dcfd"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 140px; height: auto;" data-block-id="1e064ea6d54c38502045685ba11c0f98"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
2614
+ <h1>Thank you everyone!</h1>
2615
+ </div></div>
2616
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 450px; left: 254px; top: 268px;" data-block-id="2bb55f2f1712233f4f06a9eefc53c90a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
2617
+ <pre><span style="font-size:0.7em">Github: <a href="https://github.com/DrkSephy" target="_blank">https://github.com/DrkSephy</a></span></pre>
2618
+ </div></div>
2619
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 473px; left: 243px; top: 313px;" data-block-id="4d196c2d82748488c59e3906d4b9bcbe"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
2620
+ <pre><span style="font-size:0.7em">Blog: <a href="http://drksephy.github.io/blog/" target="_blank">http://drksephy.github.io/blog/</a></span></pre>
2621
+ </div></div>
2622
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 180px; top: 404px;" data-block-id="9d548cc2b462c8e46464116f11fec427"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
2623
+ <pre><span style="font-size:0.7em">LinkedIn: <a href="https://www.linkedin.com/in/drksephy" target="_blank">https://www.linkedin.com/in/drksephy</a></span></pre>
2624
+ </div></div>
2625
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 469px; left: 236px; top: 358px;" data-block-id="138744fb99d0d589eb81de4b92ecef9b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
2626
+ <pre><span style="font-size:0.7em">Twitter: <a href="https://twitter.com/DrkSephy" target="_blank">https://twitter.com/DrkSephy</a></span></pre>
2627
+ </div></div>
2628
+ <div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 740px; left: 140px; top: 446px;" data-block-id="60a311f7d27eb8038cc3d09416b04fa5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;">
2629
+ <pre><span style="font-size:0.7em">ES6 Cheatsheet: <a href="https://github.com/DrkSephy/es6-cheatsheet" target="_blank">https://github.com/DrkSephy/es6-cheatsheet</a></span></pre>
2630
+ </div></div></section>
2631
+ </div>
2632
+ </div>
2633
+ </div>
2634
+ </div>
2635
+
2636
+ <div class="deck-kudos">
2637
+ <button class="kudos-button kudos-trigger" data-kudos-id="584013" data-kudoed-by-user="true">
2638
+ <div class="kudos-heart">
2639
+ <span class="kudos-icon icon i-heart-fill"></span>
2640
+ </div>
2641
+ <div class="kudos-count" data-kudos-value="15" data-kudos-id="584013"></div>
2642
+ </button>
2643
+ </div>
2644
+
2645
+ <div class="pill summary-pill">
2646
+ <div class="pill-picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></div>
2647
+ <div class="pill-content">
2648
+ <h4 class="pill-title">ECMAScript 2015</h4>
2649
+ <p class="pill-description">By David Leonard</p>
2650
+ </div>
2651
+ </div>
2652
+
2653
+ <div class="pill instructions-pill">
2654
+ <div class="pill-picture"></div>
2655
+ <div class="pill-content">
2656
+ <h4 class="pill-title"></h4>
2657
+ <p class="pill-description"></p>
2658
+ </div>
2659
+ </div>
2660
+
2661
+ </div>
2662
+
2663
+ <div class="column">
2664
+ <header class="deck-info">
2665
+ <div class="deck-social">
2666
+ <a href="#" class="deck-social-button facebook-share-button" data-tooltip="Share on Facebook">
2667
+ <span class="icon i-facebook"></span>
2668
+ </a>
2669
+ <a href="#" class="deck-social-button twitter-share-button" data-tooltip="Share on Twitter">
2670
+ <span class="icon i-twitter"></span>
2671
+ </a>
2672
+ <a href="#" class="deck-social-button google-share-button" data-tooltip="Share on Google+">
2673
+ </a>
2674
+ </div>
2675
+
2676
+
2677
+
2678
+ <div class="deck-options">
2679
+ <a class="fullscreen-button" data-tooltip="Fullscreen" href="#"><span class="icon i-fullscreen"></span></a>
2680
+ <a class="comment-button" data-tooltip="Comments" data-scroll-to href="#comments" data-scroll-to data-scroll-to-offset="-90"><span class="icon i-comment-stroke"></span></a>
2681
+ <a class="share-button" data-tooltip="Share" href="#"><span class="icon i-share"></span></a>
2682
+ </div>
2683
+
2684
+ <div class="details">
2685
+ <div class="deck-info">
2686
+ <h3 class="title">ECMAScript 2015</h3>
2687
+ <p class="description">An overview of ES6 features. </p>
2688
+ <ul class="deck-meta">
2689
+ <li data-tooltip="Published date" data-tooltip-delay="500">
2690
+ <span class="icon i-clock"></span>
2691
+ <time class="value ago" datetime="2016-01-13 04:42:35 UTC"></time>
2692
+ </li>
2693
+ <li data-tooltip="Kudos" data-tooltip-delay="500">
2694
+ <span class="icon i-heart-fill"></span>
2695
+ <span class="value" data-kudos-value="15" data-kudos-id="584013"></span>
2696
+ </li>
2697
+ <li data-tooltip="Views" data-tooltip-delay="500">
2698
+ <span class="icon i-eye"></span>
2699
+ <span class="value">3,451</span>
2700
+ </li>
2701
+ </ul>
2702
+ </div>
2703
+
2704
+ <div class="user-info">
2705
+ <div class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></div>
2706
+ <div class="text">
2707
+ <h3 class="title">
2708
+ <a href="/drksephy" class="username">David Leonard</a>
2709
+ <a href="/pricing#pro" class="pro-badge">PRO</a>
2710
+ </h3>
2711
+ <p class="description"></p>
2712
+ <ul class="links">
2713
+ <li><a href="https://github.com/DrkSephy" target="_blank"><span class="icon i-link"></span>https://github.com/DrkSephy</a></li>
2714
+ <li><a href="http://twitter.com/DrkSephy" target="_blank"><span class="icon i-twitter"></span>DrkSephy</a></li>
2715
+ </ul>
2716
+ </div>
2717
+ <div class="clear"></div>
2718
+ </div>
2719
+
2720
+ <div class="clear"></div>
2721
+ </div>
2722
+ </header>
2723
+
2724
+ <section class="comments" id="comments">
2725
+ <div id="disqus_thread"><span class="placeholder">Loading comments...</span></div>
2726
+ </section>
2727
+
2728
+ <section class="deck-list">
2729
+ <h2>More from <a href="/drksephy">David Leonard</a></h2>
2730
+ <ul class="carousel">
2731
+ <li class="deck-thumbnail">
2732
+ <div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/bcca32/decks.jpg)">
2733
+ <a class="deck-link" href="/drksephy/deck-5"></a>
2734
+ </div>
2735
+ <footer class="deck-details">
2736
+ <a class="author" href="/drksephy">
2737
+ <span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
2738
+ <span class="name">David Leonard</span>
2739
+ </a>
2740
+ <div class="stats">
2741
+ <div>54<span class="icon i-eye"></span></div>
2742
+ </div>
2743
+ </footer>
2744
+ </li>
2745
+ <li class="deck-thumbnail">
2746
+ <div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/21666a/decks.jpg)">
2747
+ <a class="deck-link" href="/drksephy/tales-of-kratos"></a>
2748
+ </div>
2749
+ <footer class="deck-details">
2750
+ <a class="author" href="/drksephy">
2751
+ <span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
2752
+ <span class="name">David Leonard</span>
2753
+ </a>
2754
+ <div class="stats">
2755
+ <div>86<span class="icon i-eye"></span></div>
2756
+ </div>
2757
+ </footer>
2758
+ </li>
2759
+ <li class="deck-thumbnail">
2760
+ <div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/ec076a/decks.jpg)">
2761
+ <a class="deck-link" href="/drksephy/deck-3"></a>
2762
+ </div>
2763
+ <footer class="deck-details">
2764
+ <a class="author" href="/drksephy">
2765
+ <span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
2766
+ <span class="name">David Leonard</span>
2767
+ </a>
2768
+ <div class="stats">
2769
+ <div>179<span class="icon i-eye"></span></div>
2770
+ </div>
2771
+ </footer>
2772
+ </li>
2773
+ <li class="deck-thumbnail">
2774
+ <div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/c63c39/decks.jpg)">
2775
+ <a class="deck-link" href="/drksephy/deck-2"></a>
2776
+ </div>
2777
+ <footer class="deck-details">
2778
+ <a class="author" href="/drksephy">
2779
+ <span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
2780
+ <span class="name">David Leonard</span>
2781
+ </a>
2782
+ <div class="stats">
2783
+ <div>372<span class="icon i-eye"></span></div>
2784
+ </div>
2785
+ </footer>
2786
+ </li>
2787
+
2788
+ </ul>
2789
+ </section>
2790
+
2791
+ </div>
2792
+
2793
+ </div>
2794
+ <footer class="global-footer">
2795
+ <div class="link-group">
2796
+ <h5>Product</h5>
2797
+ <a href="http://slides.com/">Home</a>
2798
+ <a href="http://slides.com/explore">Explore</a>
2799
+ <a href="http://slides.com/features">Features</a>
2800
+ <a href="http://slides.com/pricing">Pricing</a>
2801
+ </div>
2802
+
2803
+ <div class="link-group">
2804
+ <h5>Help</h5>
2805
+ <a href="http://help.slides.com" target="_blank">Forum</a>
2806
+ <a href="http://help.slides.com/knowledgebase" target="_blank">Knowledge base</a>
2807
+ <a href="#" data-feedback-mode="smartvote">Give feedback</a>
2808
+ <a href="#" data-feedback-mode="contact">Report an issue</a>
2809
+ </div>
2810
+
2811
+ <div class="link-group">
2812
+ <h5>News</h5>
2813
+ <a href="http://blog.slides.com" target="_blank">Blog</a>
2814
+ <a href="http://twitter.com/slides" target="_blank">Twitter</a>
2815
+ <a href="http://facebook.com/slidesapp" target="_blank">Facebook</a>
2816
+ <a href="http://plus.google.com/+slidesapp/" rel="publisher" target="_blank">Google+</a>
2817
+ </div>
2818
+
2819
+ <div class="link-group">
2820
+ <h5>Company</h5>
2821
+ <a href="http://slides.com/about">About Slides</a>
2822
+ <a href="http://slides.com/changelog">Changelog</a>
2823
+ <a href="http://slides.com/terms">Terms of Service</a>
2824
+ <a href="http://slides.com/privacy">Privacy Policy</a>
2825
+ </div>
2826
+
2827
+ <div class="copyright"><span>&copy; 2016 Slides, Inc.</span></div>
2828
+ </footer>
2829
+
2830
+ </div> <!--! end of #container -->
2831
+ <script>
2832
+ UserVoice=window.UserVoice||[];(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/f7sH7NavrjjvuGxByaw.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})();
2833
+
2834
+ UserVoice.push(['set', {
2835
+ accent_color: '#448dd6',
2836
+ trigger_color: 'white',
2837
+ trigger_background_color: 'rgba(46, 49, 51, 0.6)',
2838
+ position: 'automatic'
2839
+ }]);
2840
+
2841
+ </script>
2842
+
2843
+ <script>
2844
+ var SLConfig = {"deck":{"id":584013,"slug":"ecmascript-2015","title":"ECMAScript 2015","description":"An overview of ES6 features. ","visibility":"all","published_at":"2016-01-13T04:42:35.240Z","sanitize_messages":null,"thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg","view_count":3451,"user":{"id":280009,"username":"drksephy","name":"David Leonard","description":"","thumbnail_url":"https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140\u0026d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png","pro":true,"enterprise":false,"enterprise_manager":false,"settings":{"id":104558,"present_controls":false,"present_upsizing":false,"present_notes":true},"registered":true},"background_transition":"slide","transition":"slide","theme_id":null,"theme_font":"josefine","theme_color":"white-blue","auto_slide_interval":0,"comments_enabled":true,"forking_enabled":true,"rolling_links":false,"center":false,"should_loop":false,"share_notes":false,"slide_number":false,"rtl":false,"version":2}};
2845
+ </script>
2846
+ <script defer="defer" src="//assets.slid.es/assets/application-0f31ff3403cab3aa82c045dee9bbb97c.js"></script>
2847
+ <script defer="defer" src="//assets.slid.es/assets/reveal.min-25b719b3b898da619ea3b535ce4f4dbd.js"></script>
2848
+
2849
+
2850
+
2851
+ </body>
2852
+ </html>