-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (156 loc) · 7.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="./style.css">
<title>Async/Await</title>
</head>
<body>
<div class="navigation">
<a href="#1" class="item active">
<span>1</span>
<div class="tooltip">Title</div>
</a>
<a href="#2" class="item ">
<span>2</span>
<div class="tooltip">Profile</div>
</a>
<a href="#3" class="item">
<span>3</span>
<div class="tooltip">Async/Await</div>
</a>
<a href="#4" class="item">
<span>4</span>
<div class="tooltip">Introduction</div>
</a>
<a href="#5" class="item">
<span>5</span>
<div class="tooltip">Why Async/Await</div>
</a>
<a href="#6" class="item">
<span>6</span>
<div class="tooltip">Demo Project</div>
</a>
<a href="#12" class="item">
<span>12</span>
<div class="tooltip">Shout Out</div>
</a>
<a href="#13" class="item">
<span>13</span>
<div class="tooltip">Thank You</div>
</a>
</div>
<div id="1" class="wrapper primary-slide">
<img class="social-media-image" src="./intropage.svg" />
<div class="paragraph">
<h2>Async/Await</h2>
<div class="designation">A talk centered around callbacks,promises, in-depth look at the Async/Await feature in Javascript ending with quiz. </div>
</div>
</div>
<div id="2" class="wrapper secondary-slide">
<img class="social-media-image" src="https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/harshith/img.png" />
<div class="paragraph">
<div class="title-header">Harshith Venkatesh</div>
<div class="title-designation">SDE at Lumen Technologies </div>
<div class="social-media">
<a class="social-media--link" target="_blank" href="https://www.linkedin.com/in//harshith-v-7016ece">
<img src="./linkedin.svg" alt="Linkedin" class="social-media--icon">
</a>
<a class="social-media--link" target="_blank" href="https://github.com//Harshi7016">
<img src="./github.svg" alt="Github" class="social-media--icon">
</a>
<a class="social-media--link" target="_blank" href="https://www.instagram.com/harshith_bing/">
<img src="./instagram.svg" alt="Instagram" class="social-media--icon">
</a>
</div>
</div>
</div>
<div id="3" class="wrapper tertiary-slide">
Async / Await
</div>
<div id="4" class="wrapper demo-slide">
<div class="paragraph">
<p>
The word “async” before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.
</p>
<p>
await literally suspends the function execution until the promise settles, and then resumes it with the promise result.
</p>
<p>async /await is another alternative for consuming promises, and it was implemented in ES8, or ES2017.</p>
<p>
Async functions return a Promise 🙋
<li>If the function throws an error, the Promise will be rejected. ❌ </li>
<li>If the function returns a value, the Promise will be resolved. ✔️ </li>
</p>
<div class="link-demo">
Demo:
</div>
<div class="link-demo">
<a href="https://repl.it/@HarshithV/asyncawaitintroduction#index.js" target="_blank">Async/Await Demo1</a>
</div>
<div class="link-demo">
<a href="https://repl.it/@HarshithV/asyncawaitdiscussion2#index.js" target="_blank">Async/Await Demo2</a>
</div>
</div>
</div>
<div id="5" class="wrapper tertiary-slide">
<div class="paragraph">
<h2>Why should we go for Async/Await</h2>
<br />
<li>To get away from anti-pattern in code that would happen due to poor structuring of asynchronous callback based javascript code famously known as callback hell</li>
<li>To eliminate series of error handling and relying on try/catch method just like other synchronous code</li>
<li>Debugging is much simpler. Setting a breakpoint inside a .then block will not move to the next .then because it only steps through synchronous code. But, you can step through await calls as if they were synchronous calls.</li>
<div class="link-demo">
Demo:
</div>
<div class="link-demo">
<a target="_blank" href="https://repl.it/@HarshithV/AsyncAwaitPromiseCallbackhell#index.js">Promises and Async/Await Comparision</a>
</div>
</div>
</div>
<div id="6" class="wrapper secondary-slide">
<div style="font-size: 2rem;">Demo Project</div>
<img class="project-image" src="./projectdemo.PNG" alt="project demo"/>
<div class="link-demo">
Demo:
</div>
<div class="link-demo">
<a target="_blank" href="https://codesandbox.io/s/misty-pond-vd2c2?file=/src/index.js">Practical Use Case</a>
</div>
</div>
<div id="12" class="wrapper thank-slide">
<img class="social-media-image" src="https://presentation-js-maps.vercel.app/static/media/devkode.6a939699.svg" />
<div class="paragraph">
<div class="title-main-header">Thank You</div>
<div class="title-header">Devkode</div>
<div class="title-designation">LEARN | DEVELOP | DEPLOY</div>
<div class="social-media">
<a class="social-media--link" target="_blank" href="https://www.instagram.com/devkode/">
<img src="./instagram.svg" alt="Instagram" class="social-media--icon">
</a>
<a class="social-media--link" target="_blank" href="https://web.telegram.org/#/im?p=@teamdevkode">
<img src="./telegram.svg" alt="Telegram" class="social-media--icon">
</a>
</div>
</div>
</div>
<div id="13" class="wrapper secondary-slide">
Thank you
<img class="social-media-svg" src="./socialmedianotification.svg" alt="socialmedianotification" >
<div class="social-media">
<a class="social-media--link" target="_blank" href="https://www.linkedin.com/in//harshith-v-7016ece">
<img src="./linkedin.svg" alt="Linkedin" class="social-media--icon">
</a>
<a class="social-media--link" target="_blank" href="https://github.com//Harshi7016">
<img src="./github.svg" alt="Github" class="social-media--icon">
</a>
<a class="social-media--link" target="_blank" href="https://www.instagram.com/harshith_bing/">
<img src="./instagram.svg" alt="Instagram" class="social-media--icon">
</a>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>