-
Notifications
You must be signed in to change notification settings - Fork 1
/
DOM vs. Canvas _ kirupa.com (2022_10_11 11_44_00).html
460 lines (460 loc) · 150 KB
/
DOM vs. Canvas _ kirupa.com (2022_10_11 11_44_00).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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!DOCTYPE html> <html class=kirupa_blue lang=en style><!--
Page saved with SingleFile
url: https://www.kirupa.com/html5/dom_vs_canvas.htm
saved date: Tue Oct 11 2022 11:44:00 GMT+0800 (新加坡标准时间)
--><meta charset=utf-8><style>:root{--sf-img-10:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0JERERGNCIgZD0iTTE4IDFDOC4wNTkgMSAwIDcuMjY4IDAgMTVjMCA0LjM2OCAyLjU3NCA4LjI2OCA2LjYwNCAxMC44MzVDNi4wOCAyOC4xNDQgNC44NTkgMzEuNTY5IDIgMzVjNS43NTgtLjk2IDkuNDM5LTMuNzYxIDExLjcxNi02LjQxNiAxLjM3Ni4yNjIgMi44MDUuNDE2IDQuMjg0LjQxNiA5Ljk0MSAwIDE4LTYuMjY4IDE4LTE0UzI3Ljk0MSAxIDE4IDF6Ii8+PGNpcmNsZSBmaWxsPSIjMkE2Nzk3IiBjeD0iMTgiIGN5PSIxNSIgcj0iMiIvPjxjaXJjbGUgZmlsbD0iIzJBNjc5NyIgY3g9IjI2IiBjeT0iMTUiIHI9IjIiLz48Y2lyY2xlIGZpbGw9IiMyQTY3OTciIGN4PSIxMCIgY3k9IjE1IiByPSIyIi8+PC9zdmc+");--sf-img-11:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0NDRDZERCIgZD0iTTMxIDMyYzAgMi4yMDktMS43OTEgNC00IDRINWMtMi4yMDkgMC00LTEuNzkxLTQtNFY0YzAtMi4yMDkgMS43OTEtNCA0LTRoMjJjMi4yMDkgMCA0IDEuNzkxIDQgNHYyOHoiLz48cGF0aCBmaWxsPSIjOTlBQUI1IiBkPSJNMjcgMjRjMCAuNTUzLS40NDcgMS0xIDFINmMtLjU1MiAwLTEtLjQ0Ny0xLTEgMC0uNTUzLjQ0OC0xIDEtMWgyMGMuNTUzIDAgMSAuNDQ3IDEgMXptLTE2IDRjMCAuNTUzLS40NDggMS0xIDFINmMtLjU1MiAwLTEtLjQ0Ny0xLTEgMC0uNTUzLjQ0OC0xIDEtMWg0Yy41NTIgMCAxIC40NDcgMSAxek0yNyA4YzAgLjU1Mi0uNDQ3IDEtMSAxSDZjLS41NTIgMC0xLS40NDgtMS0xcy40NDgtMSAxLTFoMjBjLjU1MyAwIDEgLjQ0OCAxIDF6bTAgNGMwIC41NTMtLjQ0NyAxLTEgMUg2Yy0uNTUyIDAtMS0uNDQ3LTEtMSAwLS41NTMuNDQ4LTEgMS0xaDIwYy41NTMgMCAxIC40NDcgMSAxem0wIDRjMCAuNTUzLS40NDcgMS0xIDFINmMtLjU1MiAwLTEtLjQ0Ny0xLTEgMC0uNTUzLjQ0OC0xIDEtMWgyMGMuNTUzIDAgMSAuNDQ3IDEgMXptMCA0YzAgLjU1My0uNDQ3IDEtMSAxSDZjLS41NTIgMC0xLS40NDctMS0xIDAtLjU1My40NDgtMSAxLTFoMjBjLjU1MyAwIDEgLjQ0NyAxIDF6Ii8+PHBhdGggZmlsbD0iIzY2NzU3RiIgZD0iTTMxIDYuMjcyYy0uODI3LS41MzUtMS44MzctLjU3OS0yLjUyMS0uMDIzbC0uNzkyLjY0Ni0xLjQ4NCAxLjIxMS0uMS4wOC0yLjM3NiAxLjkzOC0xMS44NzggOS42ODZjLS40MzcuMzU3LS43OTMgMS4yMTktMS4xNzMgMi4wNzQtLjM3OC44NS0uOTY5IDIuODUyLTEuNDQzIDQuMzkxLS4xNDguMjUtMS4wNjUgMS44NDYtLjU1MSAyLjQ1My41Mi42MTUgMi4zMjYuMDEgMi41NjgtLjA3NiAxLjYyNi0uMTc0IDMuNzMxLS4zNzMgNC42NDgtLjU4LjkyNC0uMjExIDEuODU0LS4zOTUgMi4yOTEtLjc1Mi4wMDgtLjAwNi4wMS0uMDE4LjAxNy0uMDIzbDExLjg1OC05LjY2Ni43OTItLjY0Ni4xNDQtLjExOFY2LjI3MnoiLz48cGF0aCBmaWxsPSIjRDk5RTgyIiBkPSJNMTguMTQ1IDIyLjUyNnMtMS4yNzQtMS44ODEtMi4xMTctMi41NTNjLS42NzItLjg0My0yLjU0OS0yLjExNi0yLjU0OS0yLjExNi0uNDQ4LS40NDYtMS4xOTEtLjQ4LTEuNjI5LS4wNDMtLjQzNy40MzgtLjc5MyAxLjM2Ni0xLjE3MyAyLjI5MS0uNDcyIDEuMTQ2LTEuMjc2IDQuMTU0LTEuNzY4IDUuNzUyLS4wODMuMjcyLjUxNy0uNDUuNTAzLS4yMS0uMDEuMTg3LjAyNy4zOTQuMDc0LjU4MWwtLjE0Ni4xNTkuMjA4LjA2N2MuMDI1LjA4Mi4wNS4xNTQuMDY4LjIxbC4xNTktLjE0NmMuMTg3LjA0Ny4zOTQuMDg0LjU4LjA3NC4yNC0uMDE0LS40ODMuNTg3LS4yMS41MDMgMS41OTgtLjQ5MyA0LjYwNy0xLjI5NiA1Ljc1Mi0xLjc2OC45MjQtLjM4MSAxLjg1NC0uNzM2IDIuMjkxLTEuMTc0LjQzOS0uNDM1LjQwNi0xLjE3OC0uMDQzLTEuNjI3eiIvPjxwYXRoIGZpbGw9IiNFQTU5NkUiIGQ9Ik0yNS4zMTIgNC4zNTFjLS44NzYuODc1LS44NzYgMi4yOTMgMCAzLjE2OGwzLjE2NyAzLjE2OGMuODc2Ljg3NCAyLjI5NC44NzQgMy4xNjggMGwzLjE2OS0zLjE2OGMuODc0LS44NzUuODc0LTIuMjkzIDAtMy4xNjhsLTMuMTY5LTMuMTY4Yy0uODc0LS44NzUtMi4yOTItLjg3NS0zLjE2OCAwbC0zLjE2NyAzLjE2OHoiLz48cGF0aCBmaWxsPSIjRkZDQzREIiBkPSJNMTEuODQ5IDE3LjgxNWwzLjE3IDMuMTcgMy4xNjUgMy4xNjYgMTEuODgxLTExLjg3OS02LjMzNy02LjMzNi0xMS44NzkgMTEuODc5eiIvPjxwYXRoIGZpbGw9IiMyOTJGMzMiIGQ9Ik0xMS4yOTggMjYuNzQycy0yLjA2IDEuMTMzLTIuNjE2LjU3NmMtLjU1Ny0uNTU4LjU4MS0yLjYxMS41ODEtMi42MTFzMS45NTEuMDM2IDIuMDM1IDIuMDM1eiIvPjxwYXRoIGZpbGw9IiNDQ0Q2REQiIGQ9Ik0yMy43MjggNS45MzVsMy45Ni0zLjk2IDYuMzM2IDYuMzM3LTMuOTYgMy45NnoiLz48cGF0aCBmaWxsPSIjOTlBQUI1IiBkPSJNMjYuMTAzIDMuNTU4bC43OTItLjc5MiA2LjMzNiA2LjMzNS0uNzkyLjc5MnpNMjQuNTIgNS4xNDJsLjc5MS0uNzkxIDYuMzM2IDYuMzM1LS43OTIuNzkyeiIvPjwvc3ZnPg==")}</style>
<link rel=alternate type=application/rss+xml title="KIRUPA Updates" href=https://www.kirupa.com/modular/kirupa.xml>
<meta property=og:site_name content=kirupa.com>
<meta property=fb:admins content=700218>
<meta property=og:type content=article>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta name=theme-color content=#0099fe>
<style>:root{--primary:#0798FF;--textOnPrimary:#FFFFFF;--primaryDarker:#0267AF;--primaryLighter:#AADCFF;--primaryLightest:#EAF7FF;--backgroundStart:#f5fcff;--light:#F3F3F3;--lighter:#FAFAFA;--highlighter:#FFE561;--highlighterTwo:#FFE561;--highlighterThree:#DCFFB2;--inputBackground:#FFF;--inputBorder:#AADCFF;--headerBackground:#EAF7FF;--headerCircles:"rgba(7, 152, 255, ";--darkText:#222222;--headerText:#222222;--bodyText:#373d42;--darkTextSecondary:#999999;--navigationLinkColor:#333333;--serifFonts:"Helvetica Neue",Helvetica,Arial,sans-serif;--monoFonts:"SF Mono",Menlo,monospace,"SF Pro Icons";--pageBackground:#FFFFFF;--linkForeground:#0071bf;--linkBackground:hsla(209,100%,52%,0.07);--linkHoverForeground:hsla(50,100%,25%,1);--linkHoverBackground:hsla(50,100%,50%,0.51);--linkFilter:"none";--linkFilterHover:"none";--orangeBigLeaf:#008000;--orangeSmallLeaf:#01C201;--orangeBodyTop:#FFD500;--orangeBodyMiddle:#FFA601;--orangeBodyBottom:#FF8000;--orangeBorder:#333333;--orangeBackground:#FFFFFF;--logoTextColor:#0798FF;--logoTextShadow:#333333;--structureBorder:#EEE;--darkStructureBorder:#666;--mediaBorder:#333;--tableBorder:1px solid #CCC;--codeFilter:none}</style>
<meta content="retained, immediate, mode, DOM, canvas, drawing" name=keywords>
<meta content="For visually complex tasks, know when to use the DOM and when to use canvas by learning about the two drawing modes used under the hood." name=description>
<meta content="DOM vs. Canvas | kirupa.com" name=title>
<title>DOM vs. Canvas | kirupa.com</title>
<meta name=author content="Kirupa Chinnathambi">
<style>body{font-family:var(--serifFonts);padding:0;margin:0;text-align:left;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;background-color:var(--pageBackground)}.joinForums{border-top:2px solid var(--structureBorder);text-align:center;border-bottom:2px solid var(--structureBorder);padding-top:10px;padding-bottom:10px}.joinForums h4{margin-top:5px}.joinForums p{font-size:16px}.joinForums a{padding:30px;display:inline-block;border-radius:5px;background-color:var(--lighter)}.joinForums a:hover{background-color:var(--light)}.videoframe{padding-bottom:240px;background-image:url(data:image/webp;base64,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);background-repeat:no-repeat;background-size:168px;background-position:calc(50% + 65px) calc(100% - 20px)}.embed-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;border:var(--mediaBorder) solid 5px;background-color:var(--mediaBorder)}div#mainContent ol li{margin-bottom:12px;font-size:17px;color:var(--bodyText)}#tutorialInformation{overflow:hidden;margin-bottom:30px}.authorText{margin-top:10px}.authorText h1{font-size:48px;font-weight:700}.horizontal_line{margin-top:20px;margin-bottom:30px;border-bottom:2px var(--structureBorder) solid}.inlineCode{color:var(--bodyText);font-family:var(--monoFonts);font-size:85%;background-color:rgba(244,244,244,.2);border-radius:3px;padding:2px 5px;margin:0 1px;border:1px solid rgb(216 216 216/50%)}h1,h2,h3,h4{font-family:var(--serifFonts);color:var(--headerText);font-weight:700;line-height:1.75em}h1{color:var(--headerText);margin-bottom:-5px;margin-top:-5px;line-height:60px}h2{font-size:30px}#mainContent h2{border-top:1px solid var(--structureBorder);margin-top:35px;padding-top:25px;line-height:1.3;margin-bottom:0}#mainContent ul li{line-height:1.75;margin-bottom:15px;color:var(--bodyText)}h3{font-size:26px;margin-bottom:-14px}h4{font-size:22px;margin-bottom:-14px}.tutorialInfo{font-size:18px;color:#9eaab5;margin-bottom:0;margin-top:15px;margin-left:0}.tutorialInfo a{color:var(--darkText);font-weight:700;text-decoration:none}.tutorialInfo a:hover{text-decoration:underline}.yellowEmphasis{color:#8c6f00;background-color:#ff9;padding:2px;border-radius:5px;padding-left:4px;padding-right:4px}p{font-family:var(--serifFonts);font-size:17px;line-height:1.75em;color:var(--bodyText)}.centerImageNoBorder{text-align:center}.centerImageNoBorder img{border-radius:10px;padding:10px}a:link{text-decoration:none}.greenEmphasis{background-color:#ecffb3;color:#360;padding:2px;border-radius:5px;padding-left:4px;padding-right:4px}a.blueEmphasis{text-decoration:none;transition:background-color .2s cubic-bezier(0,1.1,0,1.09);padding:2px;background-color:var(--linkBackground);border-radius:5px;padding-left:4px;padding-right:4px;color:var(--linkForeground);filter:var(--linkFilter)}a.blueEmphasis:hover{background-color:var(--linkHoverBackground);color:var(--linkHoverForeground);filter:var(--linkFilterHover)}.redEmphasis{background-color:#ffcaca;color:#900;padding:2px;border-radius:5px;padding-left:4px;padding-right:4px}div #mainContent ol{list-style-type:lower-roman;font-size:18px;color:#373d42;line-height:1.75em}#bookBannerContent{margin-top:0;padding-bottom:1px;margin-bottom:20px;padding-right:10px;margin-left:-5px}#bookBannerContent img{margin-left:32px;margin-top:-10px;margin-bottom:30px}#bookBannerContent li{margin-bottom:15px;margin-left:0;list-style:none;padding-left:75px;padding-top:5px;margin-right:10px;background-repeat:no-repeat;background-position:3px 5px;line-height:20px;padding-bottom:15px;background-size:60px}#bookBannerContent li:hover{background-size:63px;background-position:0 3px}#bookBannerContent ul{padding:0;margin-left:5px;margin-top:5px}#bookBannerContent ul ul.buyNowRight li{padding:0;margin:0}#bookBannerContent ul ul.buyNowRight{padding:0;margin:0}#bookBannerContent .bookLink:hover{text-decoration:none}#bookBannerContent .bookLink{color:var(--darkText);font-size:14px;background-repeat:no-repeat;padding-top:0;padding-bottom:5px;background-position:0 3px;margin-top:0;line-height:1.5em;display:inline-block}#bookBannerContent .bookLink:hover{text-decoration:underline}#bookBannerContent li.animationRight{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIyNSI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1jb2xvcj0iIzk5OSIgZmxvb2Qtb3BhY2l0eT0iMSIgcmVzdWx0PSJyZXN1bHQxIi8+PGZlQ29tcG9zaXRlIGluMj0iU291cmNlR3JhcGhpYyIgaW49InJlc3VsdDEiIG9wZXJhdG9yPSJpbiIgcmVzdWx0PSJyZXN1bHQyIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJyZXN1bHQyIiBzdGREZXZpYXRpb249IjMuMzMzMzMzMzMzMzMzMzMzNSwzLjMzMzMzMzMzMzMzMzMzMzUiIHJlc3VsdD0icmVzdWx0MyIvPjxmZU9mZnNldCBpbj0icmVzdWx0MyIgcmVzdWx0PSJyZXN1bHQ0Ii8+PGZlQ29tcG9zaXRlIGluMj0icmVzdWx0NCIgaW49IlNvdXJjZUdyYXBoaWMiIHJlc3VsdD0icmVzdWx0NSIvPjwvZmlsdGVyPjxnIGlkPSJiIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNzUtNzUuN0gtNzVWOTYuNzVINzVWLTc1Ljd6Ii8+PHBhdGggZmlsbD0iIzAwQTlBMyIgZD0iTTc1LTc1Ljd2LTIxLjA1SC03NXYyMS4wNUg3NXoiLz48L2c+PGcgaWQ9ImMiPjxwYXRoIGZpbGw9IiM2NDg2QjAiIGQ9Ik0xNTAuNzUgMTc0LjQ1bC4zIDEuNnEuMzUuOC41NSAwbC4xLS4zLS42NS0zLjMtLjMgMnoiLz48cGF0aCBmaWxsPSIjNTQ2RTkwIiBkPSJNMTUyLjcgMTgyLjI1di01LjU1bC0xLS45NS0uMS4zcS0uMi44LS41NSAwbDEuNjUgNi4yeiIvPjxwYXRoIGZpbGw9IiMxNTI0M0QiIGQ9Ik0xNTUuMyAxODMuNmgtLjk1bDEuNiAyLjI1LS42NS0yLjI1eiIvPjxwYXRoIGZpbGw9IiM1NDc5QTIiIGQ9Ik0xNTUgMTgwaC0uMzVsLjY1IDMuNi42NSAyLjI1TDE1NSAxODB6Ii8+PHBhdGggZmlsbD0iIzNGNjU5OSIgZD0iTTE1NC44NSAxNzkuODVxLS4xIDAtLjIuMTVoLjM1cS0uMS0uMTUtLjE1LS4xNXoiLz48cGF0aCBmaWxsPSIjMjIzODRFIiBkPSJNMTU1LjMgMTY5LjJ2LS4zNWwtMS4yLTQuNCAxLjIgNC43NXoiLz48cGF0aCBmaWxsPSIjMUYzNTQyIiBkPSJNMTU1LjMgMTY4Ljg1di4zNWwuNjUgMS42NS0uNjUtMnoiLz48cGF0aCBmaWxsPSIjMTgzMzU0IiBkPSJNMTQ2LjE1IDE2Mi42NWwxLjY1IDUuOSA0LjkgMTMuNy0xLjY1LTYuMi0uMy0xLjYtNi4yLTE4LjY1IDEuNiA2Ljg1eiIvPjxwYXRoIGZpbGw9IiMxRTMwNDkiIGQ9Ik0xNDUuMDUgMTY2Ljg1cS0uMTUtLjE1LS4zNS0uMTUtLjIgMC0uMzUuMTUtLjE1LjE1LS4xNS40LjQ1IDEuMjUuOS4zbC4xLS4zcTAtLjI1LS4xNS0uNHoiLz48cGF0aCBmaWxsPSIjMzg1QTZGIiBkPSJNMTQ2LjE1IDE2Mi42NXYxbDEuNjUgNC45LTEuNjUtNS45eiIvPjxwYXRoIGZpbGw9IiMyMTNDNTMiIGQ9Ik0xNTEuNyAxNTguNHYtMS4zbC0uOTUtMy42Ljk1IDQuOXoiLz48cGF0aCBmaWxsPSIjNDA1NTY5IiBkPSJNMTUxLjcgMTU3LjF2MS4zbC42NSAxLS42NS0yLjN6Ii8+PHBhdGggZmlsbD0iIzU2NzE5NyIgZD0iTTE0OS4xIDE2MC4wNWgtLjM1bDEuNzUgNC4xNS0xLjQtNC4xNXoiLz48cGF0aCBmaWxsPSIjNEY2ODhCIiBkPSJNMTQ4LjQ1IDE1Ny40NWwtLjY1LjMuOTUgMi4zaC4zNWwtLjY1LTIuNnoiLz48cGF0aCBmaWxsPSIjNTE3MTkyIiBkPSJNMTQ3LjggMTU2LjFoLS4zNWwuMzUgMS42NS42NS0uMy0uNjUtMS4zNXoiLz48cGF0aCBmaWxsPSIjNDk2OThFIiBkPSJNMTQ2LjUgMTUyLjJoLS4zNWwxLjMgMy45aC4zNWwtMS4zLTMuOXoiLz48cGF0aCBmaWxsPSIjNEI3MUExIiBkPSJNMTQyLjI1IDE0Ny4zbC0xIC4zIDQuMjUgMTYuMDVoLjY1di0xbC0xLjYtNi44NSA2LjIgMTguNjUuMy0yLTUuNjUtMTcuNjUtMS4yNS0uNi0xLjktNi45eiIvPjxwYXRoIGZpbGw9IiMxOTM4NDgiIGQ9Ik0xNDguNzUgMTQ2LjNsLS4zIDIgMSAuOTUtLjctMi45NXoiLz48cGF0aCBmaWxsPSIjNUU5MUI4IiBkPSJNMTQ4Ljc1IDE0Ni4zbC0xLjMgMS42NSAyIDQuOS0xLTQuNTUuMy0yeiIvPjxwYXRoIGZpbGw9IiM0NDcwOTMiIGQ9Ik0xNDcuNDUgMTQ3Ljk1aC0uM2w5LjggMjkuMS0xLTYuMi0uNjUtMS42NS0xLjItNC43NS0xLjc1LTUuMDUtLjY1LTEtLjk1LTQuOS0xLjMtNC4yNS0xLS45NSAxIDQuNTUtMi00Ljl6Ii8+PHBhdGggZmlsbD0iIzUxNzA5MyIgZD0iTTE0NC44NSAxNDcuM2gtLjNsMS42IDQuOWguMzVsLTEuNjUtNC45eiIvPjxwYXRoIGZpbGw9IiMxNzM3NUMiIGQ9Ik0xNDQuNTUgMTQ3LjNoLTIuM2wxLjkgNi45IDEuMjUuNiA1LjY1IDE3LjY1LjY1IDMuMyAxIC45NSAxLjY1IDYuOWguOTVsLS42NS0zLjZxLjEtLjE1LjItLjE1LjA1IDAgLjE1LjE1bC45NSA1Ljg1IDEtOC44LTkuOC0yOS4xLTEuMDUtLjgtMS4yNS4xNSAxLjY1IDQuOSAxLjMgMy45LjY1IDEuMzUuNjUgMi42IDEuNCA0LjE1LTEuNzUtNC4xNS0uOTUtMi4zLS4zNS0xLjY1LTEuMy0zLjktMS42LTQuOXoiLz48cGF0aCBmaWxsPSIjMjU0OTZDIiBkPSJNMTM4Ljk1IDE0Ny4zdi42bDUuMjUgMTkuMzVxMC0uMjUuMTUtLjQuMTUtLjE1LjM1LS4xNS4yIDAgLjM1LjE1LjE1LjE1LjE1LjRsLjMtMy42LTQuMjUtMTYuMDUtMi4zLS4zeiIvPjxwYXRoIGZpbGw9IiMxOTk0OTEiIGQ9Ik0xMzguOTUgMTQ3LjNxLS42IDAtLjIuNGwuMi4ydi0uNnoiLz48L2c+PHBhdGggZmlsbD0iIzAwQTlBMyIgZD0iTTI4IDEwM3Y1MWgxMjF2LTUxSDI4eiIgaWQ9ImQiLz48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii40IiBkPSJNMzIgMTMxdjE1aDk1di0xNUgzMm0wLTIxdjE1aDExMHYtMTVIMzJ6IiBpZD0iZSIvPjxnIGlkPSJmIj48cGF0aCBmaWxsPSIjMzg0MzUzIiBkPSJNMTE2LjI1IDEwMi4yNWwtLjM1LS4zNS0zLjEgMy42cS0xLjI1IDAtMi41LjA1LS42NS0uMjUtMS4yNS0uNWwuODUtLjQuOS0yLjMtLjMtLjY1LTMuNTUgMS43di40NWwtNC42IDVxLjQ1LjY1Ljk1IDEuMy4xNS4xNS40LjIuNC4yNS45LjQ1LjE1LjA1LjM1LjE1LjM1LS4xNS42NS0uMzUuMiAwIC4zNS0uMi4zNS0uMjUuNjUtLjY1bC44LTEgMS4xNS4xLS4yIDNoLjU1bDcuNjUtNS41cTEuNTUtMi4yLS4zLTQuMXoiLz48cGF0aCBmaWxsPSIjMEUxOTJCIiBkPSJNMTEzLjMgMTAybC0uMS0uMy0zLjMgMi45NS0uODUuNHEuNi4yNSAxLjI1LjUgMS4yNS0uMDUgMi41LS4wNSAxLTEuNy41LTMuNXoiLz48cGF0aCBmaWxsPSIjMEUyMTNCIiBkPSJNMTM1LjEgMTAyLjk1cS0xLjI1LS45NS0yLjUtMS44NS0zLjE1LTIuMS01LjktNWw2LjE1IDYuOCAyLjI1LjA1bS0yMi4zLTE5LjJsLS41Ljc1LS43LjFxLjggNC40IDQuMTUgNy41bC0uODUuNDVxLjQ1LjMuOTUuNiAyLjggMi4xIDEuMzUgNS4ybDMuMzUuMnEuMi41NS40IDEuMTUgMS40IDQuMTUtMi4zIDYuNjUuNS4xNSAxIC4zNSAyLjYuODUgNC41NS0xLjEuMzUtLjMuNjUtLjY1bC4xNS0yLjEuODUuNCAxLjM1LS4zNXExLjEgMS4yIDIuMyAyLjQuNzUuNjUgMS41NS43NS40LS4wNS44NS0uMWwtMi40NS0zLjA1aDIuODVsLTktOC42NXEtLjEtLjA1LS4xNS0uMDUtMi44LTEuNTUtMy42LTQuNi0uNTUtMS4wNS0xLjA1LTIuMS0xLjUtMy4xLTQtNS44NWwtLjg1LjQgNC4wNSAxMC4wNS00LjktOC4zNXoiLz48cGF0aCBmaWxsPSIjMEJBREE3IiBkPSJNMTQ2LjIgMTA4LjVxLjA1LjE1LjEuMzVsMi4xIDQuNi40LTQuMTVxLS4wNS0uMjUtLjEtLjQ1LTEuMzUtMy40LTQuOS0zLjh2LjQ1cTEuNjUgMS4yIDIuNCAzeiIvPjxwYXRoIGZpbGw9IiMxOTM1NEYiIGQ9Ik0xNDUuOSAxMTAuNWwuNS44NS03LjItMi45cTcuNCA1LjA1IDkuNiAxMy42LjEtLjI1LjI1LS40NSAyLjY1LTQuMjUtLjY1LTguMTVsLTIuMS00LjYtLjQgMS42NXoiLz48cGF0aCBmaWxsPSIjMjUyRjQxIiBkPSJNNzguNiA2NS4wNXEtLjk1IDEtLjk1IDIuNCAxLjQgMCAyLjM1LTEgMS0uOTUgMS0yLjM1LTEuNCAwLTIuNC45NXoiLz48cGF0aCBmaWxsPSIjMUUyMjJGIiBkPSJNNjguOTUgNjguMnEuMDUuMzUuMi43IDEuMyAzLjMtMS4xIDYuMDUgMS44IDIuNTUgNC44NSAzLjI1LjIuMDUuNDUuMTVsMS4xLS45NS4yNS0xLjMgMS43LS4zcS4xNS0uMjUuMy0uNDUgMi0yLjQ1LS4zLTQuNmwtNy40NS0yLjU1eiIvPjxwYXRoIGZpbGw9IiMyOTI5MkMiIGQ9Ik0xMzQuMTUgODUuODVxMSAyLjU1IDIuMDUgNS4xNSAzLjE1IDcuNiA3LjYgMTQuNXYtLjQ1cTMuNTUuNCA0LjkgMy44LjA1LjIuMS40NWw3Ljk1IDUuODVxLTEuMS0zLjY1LTMuMDUtNi44NS03Ljc1LTEyLjktMTkuNTUtMjIuNDVtMTkuNSAyMy4zNWwtLjIuNy00LjI1LTQuODVxMi4xNSAxLjEgMy41IDIuOTUuNDUuNi45NSAxLjJtLTUuNjUtNS45NXEtLjM1LS4xLS42NS0uMTUtMy44NS0xLjE1LTUuNjUtNC43bDYuMyA0Ljg1eiIvPjxwYXRoIGZpbGw9IiM0RjRCNEIiIGQ9Ik0xNDcuMzUgMTAzLjFxLjMuMDUuNjUuMTVsLTYuMy00Ljg1cTEuOCAzLjU1IDUuNjUgNC43eiIvPjxwYXRoIGZpbGw9IiM1MjRFNEYiIGQ9Ik0xNTMuNDUgMTA5LjlsLjItLjdxLS41LS42LS45NS0xLjItMS4zNS0xLjg1LTMuNS0yLjk1bDQuMjUgNC44NXoiLz48cGF0aCBmaWxsPSIjMEUyMTNFIiBkPSJNMTIzLjMgOTMuOHYuNDVsOSA4LjY1IDMuNCAzLjA1LTIuODUtMy4wNS02LjE1LTYuOC0zLjQtMi4zeiIvPjxwYXRoIGZpbGw9IiM5MUFCQzAiIGQ9Ik0xMjQuMSA2OC4yNWwxLjg1LjQtMS40NS0yLjA1LTMuNy0xLjMgMy4zIDIuOTV6Ii8+PHBhdGggZmlsbD0iIzBEMjI0MCIgZD0iTTExOC41IDg3LjVxLjUgMS4wNSAxLjA1IDIuMS0uMi0uODUtLjQtMS42NS0uOS00LjEtNC42NS02LjMgMi41IDIuNzUgNCA1Ljg1eiIvPjxwYXRoIGZpbGw9IiMwRTIzM0YiIGQ9Ik0xMTMuNjUgODIuMDVsLTEuMDUgMS4zLjIuNCA0LjkgOC4zNS00LjA1LTEwLjA1eiIvPjxwYXRoIGZpbGw9IiM1OTY0NzMiIGQ9Ik04MS42IDYwLjVsLS4xNS0uMTVMNjcuMiA2NS4zaC0uNDVsMS4zIDkuNjVxMi40LTIuNzUgMS4xLTYuMDUtLjE1LS4zNS0uMi0uN2w3LjQ1IDIuNTV2LTIuNWwuOS4wNS4zNS0uODVxMC0xLjQuOTUtMi40IDEtLjk1IDIuNC0uOTUgMi41NS0xLjQ1LjYtMy42eiIvPjxwYXRoIGZpbGw9IiM4Q0E2QjkiIGQ9Ik04MS40NSA2MC4zNWwuMTUuMTVxMS45NSAyLjE1LS42IDMuNiAwIDEuNC0xIDIuMzUtLjk1IDEtMi4zNSAxbC0uMzUuODUtLjktLjA1djIuNXEyLjMgMi4xNS4zIDQuNi0uMTUuMi0uMy40NWw1LjA1IDEuMjV2LS40NXE0LjQtMi45IDkuMi00LjVsNS4yLTEwLjU1IDYuMS0yLjFxLTMuMDUtLjg1LTYuMS0xLjY1UTgwIDU0LjEgNjcuMiA2NC4xdjEuMmwxNC4yNS00Ljk1eiIvPjxwYXRoIGZpbGw9IiM4OEE4QzMiIGQ9Ik0xMTkuNTUgNjguMjVsLTIuMS40IDIuNDUgMS44LjQ1LTEuMzUtLjgtLjg1eiIvPjxwYXRoIGZpbGw9IiM1NTZCODIiIGQ9Ik0xMTguNjUgNjUuMmwuOS4xLjUtLjM1Ljc1LjM1IDMuNyAxLjMtNC45NS0yLjUtLjkuNHYuN3oiLz48cGF0aCBmaWxsPSIjOEZCMENCIiBkPSJNMTE5LjEgNjYuMnEuMzUuNC43NS44NSAxLjI1IDEuMzUgMy4wNSAyLjA1aC44di0uODVsLTQuNi0yLjA1eiIvPjxwYXRoIGZpbGw9IiM0QTc4QTEiIGQ9Ik0xMTkuODUgNjcuMDVxLS40LS40NS0uNzUtLjg1bDQuNiAyLjA1aC40bC0zLjMtMi45NS0uNzUtLjM1LS41LjM1LS45LjQ1LjkgMi41LjguODVoMi41NXEtMS44LS43LTMuMDUtMi4wNXoiLz48cGF0aCBmaWxsPSIjODJBNUMyIiBkPSJNMTE3Ljc1IDY0LjU1cS0uNS0uNDUtMS4yLS40NWwtMi40NS44cS4zNS4yLjc1LjQgMS43IDEgMy40LjQ1IDAtLjctLjUtMS4yeiIvPjxwYXRoIGZpbGw9IiMxRDM5NUEiIGQ9Ik0xMTYuNTUgNjQuMXEuNyAwIDEuMi40NS41LjUuNSAxLjJsLS4yNSAxLjktMS43Ljk1IDEuMTUuMDUgMi4xLS40LS45LTIuNS45LS40NS0uOS0uMXYtLjdsLjktLjQtMi41NS0uNDVoLS40NXYuNDV6Ii8+PHBhdGggZmlsbD0iIzkyQUZDNSIgZD0iTTExOS41NSA2NC4xbC45NS0uNzUtMS44NS0uOTUtMi43NS43NSAxLjEuNSAyLjU1LjQ1eiIvPjxwYXRoIGZpbGw9IiMyQzVGODciIGQ9Ik0xMTEuMTUgNjAuODVxLTQuOC4zLTkuMi0xLjRsLTYuMSAyLjEtNS4yIDEwLjU1cS00LjggMS42LTkuMiA0LjV2LjQ1bDI1LjUgMjYuOHYtLjQ1bDMuNTUtMS43LjMuNjUtLjkgMi4zIDMuMy0yLjk1LjEuM3EuNSAxLjgtLjUgMy41bDMuMS0zLjYuMzUuMzVxMS44NSAxLjkuMyA0LjFoMi4xcTMuNy0yLjUgMi4zLTYuNjUtLjItLjYtLjQtMS4xNWwtMy4zNS0uMnExLjQ1LTMuMS0xLjM1LTUuMi0uNS0uMy0uOTUtLjZsLjg1LS40NXEtMy4zNS0zLjEtNC4xNS03LjVsLjctLjEuNS0uNzUtLjItLjQgMS4wNS0xLjMuODUtLjRxMy43NSAyLjIgNC42NSA2LjMuMi44LjQgMS42NS44IDMuMDUgMy42IDQuNi4wNSAwIC4xNS4wNXYtLjQ1bDMuNCAyLjNxMi43NSAyLjkgNS45IDUgMS4yNS45IDIuNSAxLjg1IDQuOSAyLjQ1IDguOSA1Ljk1bDEuOSAxLjYuNC0xLjY1cS0uMDUtLjItLjEtLjM1LS43NS0xLjgtMi40LTMtNC40NS02LjktNy42LTE0LjUtMS4wNS0yLjYtMi4wNS01LjE1LS4xLS42NS0uMTUtMS4yNS0xLjItMTAuMzUtMTAuMy0xNS41SDEyMC4zNWwtLjQ1IDEuMzUtMi40NS0xLjgtMS4xNS0uMDUgMS43LS45NS4yNS0xLjlxLTEuNy41NS0zLjQtLjQ1LS40LS4yLS43NS0uNGwyLjQ1LS44di0uNDVoLjQ1bC0xLjEtLjUgMi43NS0uNzUtMy4zLS40LTMuNzUtMS4yNXEtLjI1LjA1LS40NS4xbTAgMy4yNXYxLjJxLTIuNTUgMi45LTYgMS4ybC0uNy0uMyAyLjk1LTMuOGguNGwxLjI1LS43IDMuNzUgMS41LTEuNjUuOW0yMi41IDM0LjhxLS43LS41LTEuMzUtLjk1LTIuNi0xLjY1LTQuNC00LjE1bDUuNzUgNS4xeiIvPjxwYXRoIGZpbGw9IiMwOTE4MzQiIGQ9Ik0xMzIuMyA5Ny45NXEuNjUuNDUgMS4zNS45NWwtNS43NS01LjFxMS44IDIuNSA0LjQgNC4xNXoiLz48cGF0aCBmaWxsPSIjODlBOUMzIiBkPSJNMTA3LjggNjIuNGw1IC44LTMuNzUtMS41LTEuMjUuN3oiLz48cGF0aCBmaWxsPSIjMTEyODQ3IiBkPSJNMTA4Ljk1IDY0LjVsLTEuNTUtMi4xLTIuOTUgMy44LjcuM3EzLjQ1IDEuNyA2LTEuMi0yLjU1IDEuMjUtNS0uMS0uMjUtLjE1LS40NS0uM2wzLjI1LS40eiIvPjxwYXRoIGZpbGw9IiMzRjc1QTQiIGQ9Ik0xMTEuMTUgNjUuM3YtMS4ybDEuNjUtLjktNS0uOGgtLjRsMS41NSAyLjEtMy4yNS40cS4yLjE1LjQ1LjMgMi40NSAxLjM1IDUgLjF6Ii8+PHBhdGggZmlsbD0iIzk4QjBDMyIgZD0iTTExNS43NSA2MC45bC00LjE1LS4xNSAzLjc1IDEuMjUuNC0xLjF6Ii8+PC9nPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNiIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4OSAxMTAuNzUpIiBmaWx0ZXI9InVybCgjYSkiLz48dXNlIHhsaW5rOmhyZWY9IiNjIi8+PHVzZSB4bGluazpocmVmPSIjZCIvPjx1c2UgeGxpbms6aHJlZj0iI2UiLz48dXNlIHhsaW5rOmhyZWY9IiNmIi8+PC9zdmc+);background-size:70px;background-position:-4px 0}#bookBannerContent li.arraysBookRight{background-image:url(data:image/webp;base64,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);background-size:60px;background-position:4px 0}#bookBannerContent li.js101Right{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIyNSI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1jb2xvcj0iIzk5OSIgZmxvb2Qtb3BhY2l0eT0iMSIgcmVzdWx0PSJyZXN1bHQxIi8+PGZlQ29tcG9zaXRlIGluMj0iU291cmNlR3JhcGhpYyIgaW49InJlc3VsdDEiIG9wZXJhdG9yPSJpbiIgcmVzdWx0PSJyZXN1bHQyIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJyZXN1bHQyIiBzdGREZXZpYXRpb249IjMuMzMzMzMzMzMzMzMzMzMzNSwzLjMzMzMzMzMzMzMzMzMzMzUiIHJlc3VsdD0icmVzdWx0MyIvPjxmZU9mZnNldCBpbj0icmVzdWx0MyIgcmVzdWx0PSJyZXN1bHQ0Ii8+PGZlQ29tcG9zaXRlIGluMj0icmVzdWx0NCIgaW49IlNvdXJjZUdyYXBoaWMiIHJlc3VsdD0icmVzdWx0NSIvPjwvZmlsdGVyPjxnIGlkPSJiIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNLTc1IDc2LjI1SDc1di0xNzNILTc1djE3M3oiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNLTc1IDc2LjI1djIwLjVINzV2LTIwLjVILTc1eiIvPjwvZz48ZyBpZD0iZCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUyLjQ1IDYxLjQ1cTAtMS4wNS0uNDUtMS43NS0uNDUtLjc1LTEuMi0xLjItLjc1LS40NS0xLjctLjYtLjktLjItMS44NS0uMi0xLjA1IDAtMi4xLjItMSAuMTUtMS44NS42NS0uOC41LTEuMyAxLjM1LS41NS44LS42NSAyLjFoMi45cS4wNS0xLjA1Ljg1LTEuNTUuNzUtLjUgMS45NS0uNWwuOS4wNS45LjI1cS40LjIuNjUuNS4yNS4zNS4yNS45IDAgLjY1LS4zLjk1LS4zNS4zNS0uODUuNWwtNC41LjdxLS45LjItMS42LjYtLjc1LjQtMS4xNSAxLjItLjQ1LjctLjQ1IDEuOSAwIC45NS4zNSAxLjcuNC43IDEgMS4xNS42LjUgMS40LjcuOC4yNSAxLjY1LjI1IDEuMTUgMCAyLjQtLjM1IDEuMjUtLjQgMi4xLTEuMi4yLjg1Ljc1IDEuMnQxLjQ1LjM1aC40NWwuOTUtLjIuNC0uMTVWNjlsLS40LjA1aC0uM3EtLjQgMC0uNTUtLjItLjEtLjI1LS4xLS44di02LjZNNDcuOTUgNjVxMS0uMSAxLjYtLjV2Mi4xcTAgLjctLjMgMS4xNS0uMy40NS0uOC43NXQtMS4wNS40bC0xLjA1LjE1LS44LS4xLS44NS0uMjVxLS40LS4yLS42NS0uNS0uMy0uMzUtLjMtLjggMC0uNTUuMi0uOTUuMi0uMzUuNS0uNmwuNzUtLjQuODUtLjIgMS45LS4yNW0xOC44LTdINjMuOGwtMy4xNSA5Ljk1aC0uMDVMNTcuMyA1OGgtMy4xbDQuNyAxMi45NWgzLjI1TDY2Ljc1IDU4bTguMDUgMmwuOS4yNXEuNC4yLjY1LjUuMjUuMzUuMjUuOSAwIC42NS0uMy45NS0uMzUuMzUtLjg1LjVsLTQuNS43cS0uOS4yLTEuNi42LS43NS40LTEuMTUgMS4yLS40NS43LS40NSAxLjkgMCAuOTUuMzUgMS43LjQuNyAxIDEuMTUuNi41IDEuNC43LjguMjUgMS42NS4yNSAxLjE1IDAgMi40LS4zNSAxLjI1LS40IDIuMS0xLjIuMi44NS43NSAxLjJ0MS40NS4zNWguNDVsLjk1LS4yLjQtLjE1VjY5bC0uNC4wNWgtLjNxLS40IDAtLjU1LS4yLS4xLS4yNS0uMS0uOHYtNi42cTAtMS4wNS0uNDUtMS43NS0uNDUtLjc1LTEuMi0xLjItLjc1LS40NS0xLjctLjYtLjktLjItMS44NS0uMi0xLjA1IDAtMi4xLjItMSAuMTUtMS44NS42NS0uOC41LTEuMyAxLjM1LS41NS44LS42NSAyLjFoMi45cS4wNS0xLjA1Ljg1LTEuNTUuNzUtLjUgMS45NS0uNWwuOS4wNW0tNC4yIDcuNHEwLS41NS4yLS45NS4yLS4zNS41LS42bC43NS0uNC44NS0uMiAxLjktLjI1cTEtLjEgMS42LS41djIuMXEwIC43LS4zIDEuMTUtLjMuNDUtLjguNzV0LTEuMDUuNGwtMS4wNS4xNS0uOC0uMS0uODUtLjI1cS0uNC0uMi0uNjUtLjUtLjMtLjM1LS4zLS44TTM4LjIgNTMuMWgtMy4xTDM1IDY2Ljg1cS0uMS42NS0uNCAxLjEtLjI1LjQtLjc1LjY1dC0xLjI1LjI1cS0xLjQgMC0xLjk1LS44NS0uNS0uODUtLjUtMi4zNXYtLjk1aC0zLjF2Ljk1cTAgMS4yLjI1IDIuMjUuMzUgMS4wNS45NSAxLjg1LjY1Ljc1IDEuNjUgMS4yIDEgLjQ1IDIuNDUuNDUgMS45NSAwIDMuMS0uNTUgMS4xNS0uNSAxLjc1LTEuNC42LS45Ljg1LTIgLjE1LTEuMS4xNS0yLjI1VjUzLjFtMTAwLjQ1IDYuNnEtLjgtLjk1LTEuOS0xLjUtMS4xNS0uNS0yLjY1LS41LTEuMjUgMC0yLjM1LjQ1LTEuMS41LTEuNyAxLjY1SDEzMFY1OGgtMi43djE3LjdoMi44NXYtNi40aC4xcS4zLjUuOC45LjQ1LjM1IDEuMDUuNjVsMS4yLjM1IDEuMjUuMXExLjQ1IDAgMi41LS41NXQxLjctMS41cS43LS45NSAxLjA1LTIuMTUuMzUtMS4yNS4zNS0yLjU1IDAtMS40LS40LTIuNjUtLjQtMS4zLTEuMS0yLjJtLTQuOTUuMjVxLjkgMCAxLjU1LjM1LjcuNCAxLjEgMS4wNS40NS42NS43IDEuNDUuMi44NS4yIDEuN3QtLjE1IDEuNjVxLS4yLjgtLjY1IDEuNDUtLjQuNjUtMS4xIDEuMDUtLjcuNC0xLjY1LjQtLjkgMC0xLjU1LS4zNXQtMS4xNS0uOTVxLS40NS0uNi0uNy0xLjQ1LS4yNS0uOC0uMjUtMS44IDAtMi4wNS45NS0zLjM1LjktMS4yIDIuNy0xLjJtMTIuNS01LjhoLTIuODVWNThoLTIuMTV2Mi4xNWgyLjE1djcuNjVsLjE1IDEuNHEuMTUuNjUuNTUgMS4wNXQxLjA1LjZxLjcuMiAxLjguMmwxLjktLjF2LTIuMmwtMS4yLjEtLjgtLjE1cS0uMjUtLjEtLjQtLjM1bC0uMTUtLjUtLjA1LTcuN2gyLjZWNThoLTIuNnYtMy44NW0tNTQuOCAxLjhxMS4wNS43IDEuMiAyLjQ1aDMuMTVxMC0xLjQ1LS41NS0yLjUtLjYtMS4wNS0xLjUtMS43NS0uOTUtLjc1LTIuMi0xLjEtMS4yNS0uMzUtMi42NS0uMzUtMS4yIDAtMi4zNS4zLTEuMTUuMy0yLjEuOTUtLjk1LjY1LTEuNSAxLjY1LS41NS45NS0uNTUgMi4zNSAwIC42NS4yIDEuMzUuMi43LjYgMS4yNS40NS42IDEuMjUgMS4xLjc1LjUgMS45LjhsNS4zNSAxLjVxLjU1LjIgMSAuNjUuNDUuNS40NSAxLjU1IDAgLjUtLjIuOTUtLjIuNS0uNjUuODUtLjQ1LjQtMS4xNS42NS0uNzUuMjUtMS44LjI1LS45NSAwLTEuNzUtLjI1LS44LS4yLTEuNDUtLjY1LS42LS41LS45NS0xLjJUODQuOCA2NWgtMy4xcTAgMS42NS42IDIuODUuNiAxLjIgMS42IDIgMSAuNzUgMi4zNSAxLjE1IDEuMzUuNCAyLjkuNCAxLjMgMCAyLjYtLjM1IDEuMjUtLjMgMi4yNS0xIDEtLjY1IDEuNi0xLjcuNjUtMS4wNS42NS0yLjYgMC0uNjUtLjI1LTEuNC0uMi0uNy0uNjUtMS4zLS40NS0uNi0xLjA1LTEuMDUtLjctLjUtMS41NS0uOGwtNS4xNS0xLjM1cS0uOTUtLjMtMS41NS0uOC0uNTUtLjU1LS41NS0xLjUgMC0uNjUuMy0xLjE1LjMtLjQ1LjgtLjcuNDUtLjI1IDEtLjM1bDEuMTUtLjFxMS42IDAgMi42NS43TTEyMS4zIDU4djEyLjk1aDIuODVWNThoLTIuODVNMTAyIDYwLjhxLjU1LS41IDEuMTUtLjcuNjUtLjE1IDEuMi0uMTUgMS4xNSAwIDEuOTUuNnQxIDEuOGgyLjhxLS4wNS0xLjItLjU1LTIuMDUtLjUtLjktMS4zLTEuNDUtLjgtLjYtMS44LS45LTEuMDUtLjI1LTIuMTUtLjI1LTEuNiAwLTIuOC41LTEuMi41NS0xLjk1IDEuNS0uODUuOS0xLjI1IDIuMi0uMzUgMS4yNS0uMzUgMi43NSAwIDEuNC40IDIuNjUuNCAxLjIgMS4yIDIuMS44LjkgMS45NSAxLjQgMS4yLjUgMi43LjUgMi41IDAgNC0xLjM1IDEuNS0xLjMgMS45LTMuODVoLTIuOHEtLjI1IDEuNC0xLjA1IDIuMi0uOC43NS0yLjA1Ljc1LS45IDAtMS41NS0uNC0uNy0uMzUtMS4xLTEtLjQtLjY1LS42LTEuNC0uMi0uODUtLjItMS42IDAtMS41LjQtMi40LjMtLjkuODUtMS40NW0xOS4zLTcuN3YyLjdoMi44NXYtMi43aC0yLjg1bS02LjIgNy40NVY1OGgtMi42NXYxMi45NWgyLjg1VjY0LjhxMC0xLjEuMy0xLjkuMjUtLjguNy0xLjQuNS0uNTUgMS4xNS0uODUuNjUtLjI1IDEuMzUtLjI1aC42bC42LjF2LTIuNzVsLS4zNS0uMDVoLS43cS0uNjUgMC0xLjI1LjI1LS42NS4yLTEuMTUuNjUtLjUuNC0uOS45LS4zNS41LS41IDEuMDVoLS4wNXoiLz48cGF0aCBmaWxsPSIjRjNCMTFBIiBkPSJNMzIuOTUgMTA4LjNRMjUgMTE0LjU1IDI1IDEyMy40djQ4LjY1aDEwMS45cTExLjIgMCAxOS4xNS02LjI1IDcuOTUtNi4yNSA3Ljk1LTE1LjF2LTQ4LjY1SDUyLjFxLTExLjIgMC0xOS4xNSA2LjI1eiIvPjwvZz48ZyBpZD0iZSIgZmlsbC1vcGFjaXR5PSIuNDk4Ij48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNDMgMTUwLjU1djEyaDUwdi0xMkg0M20wLTM1LjA1djEyaDczdi0xMkg0M3oiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNNDMgMTMzLjQ1djEyaDkwdi0xMkg0M3oiLz48L2c+PHBhdGggaWQ9ImMiIHN0cm9rZT0iI0M3RUFFRiIgc3Ryb2tlLW9wYWNpdHk9Ii4wOTgiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIiBkPSJNMzMgMTY4djExLjhxMCA2LjItNi4yIDYuMkgyNG02MS45LTE4djExLjhxMCA2LjItNi4yIDYuMkg1NC4yNVE0OCAxODYgNDggMTc5LjhWMTY4bTkwIDB2MTEuOHEwIDYuMi02LjIgNi4yaC0yNS40NXEtNi4yIDAtNi4yLTYuMlYxNjgiLz48L2RlZnM+PHVzZSB4bGluazpocmVmPSIjYiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODkgMTEwLjc1KSIgZmlsdGVyPSJ1cmwoI2EpIi8+PHVzZSB4bGluazpocmVmPSIjYyIvPjx1c2UgeGxpbms6aHJlZj0iI2QiLz48dXNlIHhsaW5rOmhyZWY9IiNlIi8+PC9zdmc+);background-size:70px;background-position:-4px 0}#bookBannerContent li.learningReactRight{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIyNSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjgyLjgiIHkxPSIyMzguMDM4IiB4Mj0iODIuOCIgeTI9Ijk2LjA2MyI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBFMTkyRCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4NkU4RiIvPjwvbGluZWFyR3JhZGllbnQ+PGZpbHRlciBpZD0iYiIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1jb2xvcj0iIzk5OSIgZmxvb2Qtb3BhY2l0eT0iMSIgcmVzdWx0PSJyZXN1bHQxIi8+PGZlQ29tcG9zaXRlIGluMj0iU291cmNlR3JhcGhpYyIgaW49InJlc3VsdDEiIG9wZXJhdG9yPSJpbiIgcmVzdWx0PSJyZXN1bHQyIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJyZXN1bHQyIiBzdGREZXZpYXRpb249IjMuMzMzMzMzMzMzMzMzMzMzNSwzLjMzMzMzMzMzMzMzMzMzMzUiIHJlc3VsdD0icmVzdWx0MyIvPjxmZU9mZnNldCBpbj0icmVzdWx0MyIgcmVzdWx0PSJyZXN1bHQ0Ii8+PGZlQ29tcG9zaXRlIGluMj0icmVzdWx0NCIgaW49IlNvdXJjZUdyYXBoaWMiIHJlc3VsdD0icmVzdWx0NSIvPjwvZmlsdGVyPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik03NS05Ni43NUgtNzV2MTkzLjVINzV2LTE5My41eiIgaWQ9ImMiLz48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNMjQgMTk3aDEzMFYyNEgyNHYxNzN6IiBpZD0iZCIvPjxnIGlkPSJqIj48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii40OTgiIGQ9Ik04NS44IDEwNy41cTAtLjYtLjQ1LTEuMDUtLjQ1LS40NS0xLjA1LS40NS0uNjUgMC0xLjEuNDUtLjQuNDUtLjQgMS4wNSAwIC42NS40IDEuMS40NS40IDEuMS40LjYgMCAxLjA1LS40LjQ1LS40NS40NS0xLjFtLTE3LjYgMy45NXEtLjQuNDUtLjQgMS4wNSAwIC42NS40IDEuMS40NS40IDEuMS40LjYgMCAxLjA1LS40LjQ1LS40NS40NS0xLjEgMC0uNi0uNDUtMS4wNS0uNDUtLjQ1LTEuMDUtLjQ1LS42NSAwLTEuMS40NW0tMi44NS03Ljg1cS40NS0uNDUuNDUtMS4xIDAtLjYtLjQ1LTEuMDUtLjQ1LS40NS0xLjA1LS40NS0uNjUgMC0xLjEuNDUtLjQuNDUtLjQgMS4wNSAwIC42NS40IDEuMS40NS40IDEuMS40LjYgMCAxLjA1LS40bTEyLjQ1LTEuMXEwIC42NS40IDEuMS40NS40IDEuMS40LjYgMCAxLjA1LS40LjQ1LS40NS40NS0xLjEgMC0uNi0uNDUtMS4wNS0uNDUtLjQ1LTEuMDUtLjQ1LS42NSAwLTEuMS40NS0uNC40NS0uNCAxLjA1TTU1LjM1IDY2LjQ1UTU0LjkgNjYgNTQuMyA2NnEtLjY1IDAtMS4xLjQ1LS40LjQ1LS40IDEuMDUgMCAuNjUuNCAxLjEuNDUuNCAxLjEuNC42IDAgMS4wNS0uNC40NS0uNDUuNDUtMS4xIDAtLjYtLjQ1LTEuMDVNNzQuMyA3MXEtLjY1IDAtMS4xLjQ1LS40LjQ1LS40IDEuMDUgMCAuNjUuNCAxLjEuNDUuNCAxLjEuNC42IDAgMS4wNS0uNC40NS0uNDUuNDUtMS4xIDAtLjYtLjQ1LTEuMDVRNzQuOSA3MSA3NC4zIDcxbTU4LjUgNi41cTAgLjYuNCAxLjA1LjQ1LjQ1IDEuMS40NS42IDAgMS4wNS0uNDUuNDUtLjQ1LjQ1LTEuMDUgMC0uNjUtLjQ1LTEuMS0uNDUtLjQtMS4wNS0uNC0uNjUgMC0xLjEuNC0uNC40NS0uNCAxLjFtLjQtMTEuMXEtLjQuNDUtLjQgMS4xIDAgLjYuNCAxLjA1LjQ1LjQ1IDEuMS40NS42IDAgMS4wNS0uNDUuNDUtLjQ1LjQ1LTEuMDUgMC0uNjUtLjQ1LTEuMS0uNDUtLjQtMS4wNS0uNC0uNjUgMC0xLjEuNG0tOC45LTcuNHEuNiAwIDEuMDUtLjQ1LjQ1LS40NS40NS0xLjA1IDAtLjY1LS40NS0xLjEtLjQ1LS40LTEuMDUtLjQtLjY1IDAtMS4xLjQtLjQuNDUtLjQgMS4xIDAgLjYuNCAxLjA1LjQ1LjQ1IDEuMS40NW0tNi4xIDI5LjU1cS40NS40NSAxLjEuNDUuNiAwIDEuMDUtLjQ1LjQ1LS40NS40NS0xLjA1IDAtLjY1LS40NS0xLjEtLjQ1LS40LTEuMDUtLjQtLjY1IDAtMS4xLjQtLjQuNDUtLjQgMS4xIDAgLjYuNCAxLjA1bS0xNy44NSA1cS40NS0uNDUuNDUtMS4wNSAwLS42NS0uNDUtMS4xLS40NS0uNC0xLjA1LS40LS42NSAwLTEuMS40LS40LjQ1LS40IDEuMSAwIC42LjQgMS4wNS40NS40NSAxLjEuNDUuNiAwIDEuMDUtLjQ1TTkwLjggOTIuNXEwLS42LS40NS0xLjA1UTg5LjkgOTEgODkuMyA5MXEtLjY1IDAtMS4xLjQ1LS40LjQ1LS40IDEuMDUgMCAuNjUuNCAxLjEuNDUuNCAxLjEuNC42IDAgMS4wNS0uNC40NS0uNDUuNDUtMS4xbTAtMTBxMC0uNi0uNDUtMS4wNVE4OS45IDgxIDg5LjMgODFxLS42NSAwLTEuMS40NS0uNC40NS0uNCAxLjA1IDAgLjY1LjQgMS4xLjQ1LjQgMS4xLjQuNiAwIDEuMDUtLjQuNDUtLjQ1LjQ1LTEuMW0xNy40LTIzLjk1cS40NS40NSAxLjEuNDUuNiAwIDEuMDUtLjQ1LjQ1LS40NS40NS0xLjA1IDAtLjY1LS40NS0xLjEtLjQ1LS40LTEuMDUtLjQtLjY1IDAtMS4xLjQtLjQuNDUtLjQgMS4xIDAgLjYuNCAxLjA1bTYuMS05LjU1cS42IDAgMS4wNS0uNDUuNDUtLjQ1LjQ1LTEuMDUgMC0uNjUtLjQ1LTEuMS0uNDUtLjQtMS4wNS0uNC0uNjUgMC0xLjEuNC0uNC40NS0uNCAxLjEgMCAuNi40IDEuMDUuNDUuNDUgMS4xLjQ1eiIvPjxwYXRoIGZpbGw9IiM1RUNDREUiIGZpbGwtb3BhY2l0eT0iLjQ5OCIgZD0iTTExMC42NSAxMTEuMTVxLTIuMi0yLjItNS4zNS0yLjItMy4xNSAwLTUuMyAyLjItMi4yIDIuMTUtMi4yIDUuM3QyLjIgNS4zNXEyLjE1IDIuMTUgNS4zIDIuMTV0NS4zNS0yLjE1cTIuMTUtMi4yIDIuMTUtNS4zNSAwLTMuMTUtMi4xNS01LjNNNzAgMzMuMnEtMi4yIDIuMi0yLjIgNS4zNSAwIDMuMTUgMi4yIDUuMyAyLjE1IDIuMiA1LjMgMi4ydDUuMzUtMi4ycTIuMTUtMi4xNSAyLjE1LTUuM3QtMi4xNS01LjM1cS0yLjItMi4xNS01LjM1LTIuMTUtMy4xNSAwLTUuMyAyLjE1eiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0zNS45IDEwNy4yNXExLjMgMCAyLjItLjkuOS0uOS45LTIuMiAwLTEuMy0uOS0yLjItLjktLjktMi4yLS45LTEuMyAwLTIuMi45LS45LjktLjkgMi4yIDAgMS4zLjkgMi4yLjkuOSAyLjIuOW0zMi4yLTU4LjZxLS45LS45LTIuMi0uOS0xLjMgMC0yLjIuOS0uOS45LS45IDIuMiAwIDEuMy45IDIuMi45LjkgMi4yLjkgMS4zIDAgMi4yLS45LjktLjkuOS0yLjIgMC0xLjMtLjktMi4yeiIvPjxwYXRoIGZpbGw9IiM5OUQ3Q0IiIGZpbGwtb3BhY2l0eT0iLjQ5OCIgZD0iTTc2LjM1IDkwLjRxLTEuNDUtMS40NS0zLjU1LTEuNDUtMi4xIDAtMy41NSAxLjQ1LTEuNDUgMS40NS0xLjQ1IDMuNTUgMCAyLjEgMS40NSAzLjU1IDEuNDUgMS40NSAzLjU1IDEuNDUgMi4xIDAgMy41NS0xLjQ1IDEuNDUtMS40NSAxLjQ1LTMuNTUgMC0yLjEtMS40NS0zLjU1TTM3LjggNjEuMDVxMCAyLjEgMS40NSAzLjU1IDEuNDUgMS40NSAzLjU1IDEuNDUgMi4xIDAgMy41NS0xLjQ1IDEuNDUtMS40NSAxLjQ1LTMuNTUgMC0yLjEtMS40NS0zLjU1LTEuNDUtMS40NS0zLjU1LTEuNDUtMi4xIDAtMy41NSAxLjQ1LTEuNDUgMS40NS0xLjQ1IDMuNTV6Ii8+PHBhdGggZmlsbD0iI0IwREVENyIgZmlsbC1vcGFjaXR5PSIuNDk4IiBkPSJNMTM4LjcgODMuNjVxLS45LjktLjkgMi4yIDAgMS4zLjkgMi4yLjkuOSAyLjIuOSAxLjMgMCAyLjItLjkuOS0uOS45LTIuMiAwLTEuMy0uOS0yLjItLjktLjktMi4yLS45LTEuMyAwLTIuMi45bS0yNy44LTE3LjZxLTEuMyAwLTIuMi45LS45LjktLjkgMi4yIDAgMS4zLjkgMi4yLjkuOSAyLjIuOSAxLjMgMCAyLjItLjkuOS0uOS45LTIuMiAwLTEuMy0uOS0yLjItLjktLjktMi4yLS45eiIvPjwvZz48ZyBpZD0iayI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTIxIDEyNS45djM0aDEzOHYtMzRIMjFtMzguMSAzLjloMS41NWwzIDQuOHYtNC44aDEuNDV2Ny4xNWgtMS41NWwtMi45NS00LjhoLS4wNXY0LjhINTkuMXYtNy4xNW0tNC41LjE1cS40LjE1LjY1LjQ1LjMuMjUuNDUuNi4xNS4zNS4xNS44IDAgLjYtLjMgMS4wNS0uMjUuNS0uODUuN3YuMDVxLjMuMDUuNS4yNS4xNS4xNS4zLjQuMS4yLjE1LjQ1bC4xLjU1di40bC4xLjk1cS4xLjIuMi4zNWgtMS42cS0uMS0uMzUtLjE1LS44bC0uMS0uOXEtLjA1LS41NS0uMy0uODUtLjMtLjI1LS44NS0uMjVoLTEuNnYyLjhINDkuOXYtNy4xNWgzLjg1cS40NSAwIC44NS4xNW0tOS41IDUuNGgtMi42NWwtLjYgMS42SDQwLjNsMi43LTcuMTVoMS42bDIuNjUgNy4xNWgtMS42bC0uNTUtMS42bTI5LjgtMy4yaC0uMDV2NC44SDczLjR2LTcuMTVoMS41NWwzIDQuOHYtNC44aDEuNDV2Ny4xNWgtMS41NWwtMi45NS00LjhtLTYuNC0yLjM1aDEuNTV2Ny4xNUg2OC41di03LjE1bS0zNC4zNSA0LjF2MS43NUgzOHYxLjNoLTUuNHYtNy4xNWg1LjM1djEuMzVoLTMuOHYxLjVoMy40NXYxLjI1aC0zLjQ1bS03LjktNC4xdjUuODVoMy41djEuM0gyNC43di03LjE1aDEuNTVtNTMuMTUgMjQuOXYtMTQuM2g3LjdxLjk1IDAgMS43LjM1LjguMyAxLjM1Ljg1LjU1LjUuOCAxLjI1LjMuNy4zIDEuNSAwIDEuMjUtLjUgMi4yLS41NS45LTEuNzUgMS40di4wNXEuNi4xNS45NS40NS40LjM1LjY1LjguMi40NS4zNSAxbC40IDMuN3EuMS40NS4zNS43NWgtMy4xNXEtLjI1LS43LS4zNS0xLjZsLS4xNS0xLjhxLS4xNS0xLjE1LS43LTEuNjUtLjUtLjU1LTEuNy0uNTVIODIuNXY1LjZoLTMuMW00Ni45LTEwLjA1cS40NS0xLjM1IDEuMzUtMi40LjktMSAyLjI1LTEuNiAxLjMtLjU1IDIuOTUtLjU1IDEuMTUgMCAyLjIuMyAxLjA1LjM1IDEuOSAxIC44LjY1IDEuMzUgMS42LjU1IDEgLjcgMi4yaC0zLjA1cS0uMS0uNS0uMzUtLjk1LS4zLS40NS0uNy0uOC0uNDUtLjM1LS45NS0uNTUtLjU1LS4yLTEuMS0uMi0xLjEgMC0xLjguNDUtLjc1LjQtMS4yIDEuMS0uNS42NS0uNyAxLjU1LS4yLjktLjIgMS44dC4yIDEuNzVxLjIuODUuNyAxLjU1LjQ1LjcgMS4yIDEuMS43LjQgMS44LjQgMS40IDAgMi4yNS0uOS44LS44NS45NS0yLjNoMy4wNXEtLjEgMS4zNS0uNiAyLjQtLjUgMS4xLTEuMzUgMS44NS0uOC43NS0xLjkgMS4xNS0xLjEuNC0yLjQuNC0xLjY1IDAtMi45NS0uNTUtMS4zNS0uNTUtMi4yNS0xLjU1LS45LTEtMS4zNS0yLjM1LS41LTEuMzUtLjUtMi45NXQuNS0yLjk1bTE1LjgtNC4yNWgxMS43djIuNjVoLTQuMjV2MTEuNjVoLTMuMTV2LTExLjY1aC00LjN2LTIuNjVNODYgMTMwLjk1cS0uNTUgMC0uOS4yLS40LjItLjYuNTUtLjI1LjM1LS4zNS44LS4xLjQ1LS4xLjl0LjEuOXEuMS40LjM1Ljc1LjIuMzUuNi41NS4zNS4yLjkuMi43NSAwIDEuMi0uNC40LS40LjUtMS4xNWgtMS42di0xLjE1aDN2My44NWgtMWwtLjE1LS44cS0uNC41NS0uOTUuNzUtLjUuMi0xIC4yLS44NSAwLTEuNS0uMy0uNjUtLjI1LTEuMS0uNzUtLjQ1LS41LS43LTEuMi0uMi0uNjUtLjItMS40NSAwLS44LjItMS40NS4yNS0uNy43LTEuMi40NS0uNTUgMS4xLS44LjY1LS4zIDEuNS0uMy41NSAwIDEuMDUuMTV0Ljk1LjVxLjQuMy42NS44LjMuNDUuMzUgMS4wNWgtMS41cS0uMTUtLjYtLjU1LS45LS40LS4zLS45NS0uM20xMi45IDEyLjF2My4wNWg2Ljk1djIuNDVIOTguOXYzLjVoNy43djIuNjVIOTUuOHYtMTQuM2gxMC42NXYyLjY1SDk4LjltMTUuNzUtMi42NWgzLjJsNS4zNSAxNC4zaC0zLjI1bC0xLjEtMy4yaC01LjM1bC0xLjEgMy4yaC0zLjE1bDUuNC0xNC4zbTEuNiAzLjU1aC0uMDVsLTEuODUgNS4yNWgzLjdsLTEuOC01LjI1bS0zMy43NS0xLjF2NC4wNWgzLjQ1cTEuMSAwIDEuNjUtLjUuNS0uNS41LTEuNTV0LS41LTEuNXEtLjU1LS41LTEuNjUtLjVIODIuNW0tMzguNy0xMS4zaC0uMDVsLS45IDIuNjVoMS44NWwtLjktMi42NU01NCAxMzIuOHEuMjUtLjI1LjI1LS44IDAtLjUtLjI1LS43NS0uMy0uMi0uOC0uMmgtMS43NXYyaDEuNzVxLjUgMCAuOC0uMjV6Ii8+PHBhdGggZmlsbD0iIzU5MzA3QyIgZD0iTTExNy44NSAxNDAuNGgtMy4ybC01LjQgMTQuM2gzLjE1bDEuMS0zLjJoNS4zNWwxLjEgMy4yaDMuMjVsLTUuMzUtMTQuM20tMS42NSAzLjU1aC4wNWwxLjggNS4yNWgtMy43bDEuODUtNS4yNW0tMTcuMyAyLjE1di0zLjA1aDcuNTV2LTIuNjVIOTUuOHYxNC4zaDEwLjh2LTIuNjVoLTcuN3YtMy41aDYuOTV2LTIuNDVIOTguOW01NC45LTUuN2gtMTEuN3YyLjY1aDQuM3YxMS42NWgzLjE1di0xMS42NWg0LjI1di0yLjY1bS0yNi4xNSAxLjg1cS0uOSAxLjA1LTEuMzUgMi40LS41IDEuMzUtLjUgMi45NXQuNSAyLjk1cS40NSAxLjM1IDEuMzUgMi4zNS45IDEgMi4yNSAxLjU1IDEuMy41NSAyLjk1LjU1IDEuMyAwIDIuNC0uNCAxLjEtLjQgMS45LTEuMTUuODUtLjc1IDEuMzUtMS44NS41LTEuMDUuNi0yLjRoLTMuMDVxLS4xNSAxLjQ1LS45NSAyLjMtLjg1LjktMi4yNS45LTEuMSAwLTEuOC0uNC0uNzUtLjQtMS4yLTEuMS0uNS0uNy0uNy0xLjU1LS4yLS44NS0uMi0xLjc1dC4yLTEuOHEuMi0uOS43LTEuNTUuNDUtLjcgMS4yLTEuMS43LS40NSAxLjgtLjQ1LjU1IDAgMS4xLjIuNS4yLjk1LjU1LjQuMzUuNy44LjI1LjQ1LjM1Ljk1SDEzOXEtLjE1LTEuMi0uNy0yLjItLjU1LS45NS0xLjM1LTEuNi0uODUtLjY1LTEuOS0xLTEuMDUtLjMtMi4yLS4zLTEuNjUgMC0yLjk1LjU1LTEuMzUuNi0yLjI1IDEuNk03OS40IDE0MC40djE0LjNoMy4xdi01LjZoMy4xNXExLjIgMCAxLjcuNTUuNTUuNS43IDEuNjVsLjE1IDEuOHEuMS45LjM1IDEuNmgzLjE1cS0uMjUtLjMtLjM1LS43NWwtLjQtMy43cS0uMTUtLjU1LS4zNS0xLS4yNS0uNDUtLjY1LS44LS4zNS0uMy0uOTUtLjQ1di0uMDVxMS4yLS41IDEuNzUtMS40LjUtLjk1LjUtMi4yIDAtLjgtLjMtMS41LS4yNS0uNzUtLjgtMS4yNS0uNTUtLjU1LTEuMzUtLjg1LS43NS0uMzUtMS43LS4zNWgtNy43bTMuMSA2LjV2LTQuMDVoMy40NXExLjEgMCAxLjY1LjUuNS40NS41IDEuNXQtLjUgMS41NXEtLjU1LjUtMS42NS41SDgyLjV6Ii8+PHBhdGggZD0iTTg1LjEgMTMxLjE1cS4zNS0uMi45LS4ydC45NS4zcS40LjMuNTUuOUg4OXEtLjA1LS42LS4zNS0xLjA1LS4yNS0uNS0uNjUtLjgtLjQ1LS4zNS0uOTUtLjUtLjUtLjE1LTEuMDUtLjE1LS44NSAwLTEuNS4zLS42NS4yNS0xLjEuOC0uNDUuNS0uNyAxLjItLjIuNjUtLjIgMS40NSAwIC44LjIgMS40NS4yNS43LjcgMS4yLjQ1LjUgMS4xLjc1LjY1LjMgMS41LjMuNSAwIDEtLjIuNTUtLjIuOTUtLjc1bC4xNS44aDF2LTMuODVoLTN2MS4xNWgxLjZxLS4xLjc1LS41IDEuMTUtLjQ1LjQtMS4yLjQtLjU1IDAtLjktLjItLjQtLjItLjYtLjU1LS4yNS0uMzUtLjM1LS43NS0uMS0uNDUtLjEtLjl0LjEtLjlxLjEtLjQ1LjM1LS44LjItLjM1LjYtLjU1bS01OC44NSA0LjV2LTUuODVIMjQuN3Y3LjE1aDUuMDV2LTEuM2gtMy41bTcuOSAwdi0xLjc1aDMuNDV2LTEuMjVoLTMuNDV2LTEuNWgzLjh2LTEuMzVIMzIuNnY3LjE1SDM4di0xLjNoLTMuODVtMzUuOS01Ljg1SDY4LjV2Ny4xNWgxLjU1di03LjE1bTQuOCAyLjM1aC4wNWwyLjk1IDQuOGgxLjU1di03LjE1aC0xLjQ1djQuOGwtMy00LjhINzMuNHY3LjE1aDEuNDV2LTQuOG0tMzIuNCAzLjJoMi42NWwuNTUgMS42aDEuNmwtMi42NS03LjE1SDQzbC0yLjcgNy4xNWgxLjU1bC42LTEuNm0xLjMtMy44aC4wNWwuOSAyLjY1aC0xLjg1bC45LTIuNjVtMTEuNS0xLjE1cS0uMjUtLjMtLjY1LS40NS0uNC0uMTUtLjg1LS4xNUg0OS45djcuMTVoMS41NXYtMi44aDEuNnEuNTUgMCAuODUuMjUuMjUuMy4zLjg1bC4xLjlxLjA1LjQ1LjE1LjhoMS42cS0uMS0uMTUtLjItLjM1bC0uMS0uOTV2LS40bC0uMS0uNTVxLS4wNS0uMjUtLjE1LS40NS0uMTUtLjI1LS4zLS40LS4yLS4yLS41LS4yNXYtLjA1cS42LS4yLjg1LS43LjMtLjQ1LjMtMS4wNSAwLS40NS0uMTUtLjgtLjE1LS4zNS0uNDUtLjZtLTEgMS42cTAgLjU1LS4yNS44LS4zLjI1LS44LjI1aC0xLjc1di0yaDEuNzVxLjUgMCAuOC4yLjI1LjI1LjI1Ljc1bTYuNC0yLjJINTkuMXY3LjE1aDEuNDV2LTQuOGguMDVsMi45NSA0LjhoMS41NXYtNy4xNWgtMS40NXY0LjhsLTMtNC44eiIvPjwvZz48cGF0aCBpZD0iZSIgc3Ryb2tlPSIjQzdFQUVGIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgZD0iTTU0LjI1IDQzLjlINzkuN3E2LjIgMCA2LjIgNi4yNVY3NS42cTAgNi4yLTYuMiA2LjJINTQuMjVRNDggODEuOCA0OCA3NS42VjUwLjE1cTAtNi4yNSA2LjI1LTYuMjV6Ii8+PHBhdGggaWQ9ImYiIHN0cm9rZT0iI0M3RUFFRiIgc3Ryb2tlLW9wYWNpdHk9Ii44IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgZD0iTTI0IDQzLjloMi44cTYuMiAwIDYuMiA2LjI1Vjc1LjZxMCA2LjItNi4yIDYuMkgyNCIvPjxwYXRoIGlkPSJnIiBzdHJva2U9IiNDN0VBRUYiIHN0cm9rZS1vcGFjaXR5PSIuNCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGQ9Ik0xMDYuMzUgNDMuOWgyNS40NXE2LjIgMCA2LjIgNi4yNVY3NS42cTAgNi4yLTYuMiA2LjJoLTI1LjQ1cS02LjIgMC02LjItNi4yVjUwLjE1cTAtNi4yNSA2LjItNi4yNXoiLz48cGF0aCBpZD0iaCIgc3Ryb2tlPSIjQzdFQUVGIiBzdHJva2Utb3BhY2l0eT0iLjI0NyIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGQ9Ik0xMDYuMzUgOTYuMDVoMjUuNDVxNi4yIDAgNi4yIDYuMnYyNS40NXEwIDYuMi02LjIgNi4yaC0yNS40NXEtNi4yIDAtNi4yLTYuMnYtMjUuNDVxMC02LjIgNi4yLTYuMnptLTgyLjM1IDBoMi44cTYuMiAwIDYuMiA2LjJ2MjUuNDVxMCA2LjItNi4yIDYuMkgyNG0zMC4yNS0zNy44NUg3OS43cTYuMiAwIDYuMiA2LjJ2MjUuNDVxMCA2LjItNi4yIDYuMkg1NC4yNXEtNi4yNSAwLTYuMjUtNi4ydi0yNS40NXEwLTYuMiA2LjI1LTYuMnoiLz48cGF0aCBpZD0iaSIgc3Ryb2tlPSIjQzdFQUVGIiBzdHJva2Utb3BhY2l0eT0iLjA5OCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGQ9Ik01NC4yNSAxNDguMTVINzkuN3E2LjIgMCA2LjIgNi4ydjI1LjQ1cTAgNi4yLTYuMiA2LjJINTQuMjVRNDggMTg2IDQ4IDE3OS44di0yNS40NXEwLTYuMiA2LjI1LTYuMnptLTMwLjI1IDBoMi44cTYuMiAwIDYuMiA2LjJ2MjUuNDVxMCA2LjItNi4yIDYuMkgyNG04Mi4zNS0zNy44NWgyNS40NXE2LjIgMCA2LjIgNi4ydjI1LjQ1cTAgNi4yLTYuMiA2LjJoLTI1LjQ1cS02LjIgMC02LjItNi4ydi0yNS40NXEwLTYuMiA2LjItNi4yeiIvPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNjIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4OSAxMTAuNzUpIiBmaWx0ZXI9InVybCgjYikiLz48dXNlIHhsaW5rOmhyZWY9IiNkIi8+PGc+PHVzZSB4bGluazpocmVmPSIjZSIvPjx1c2UgeGxpbms6aHJlZj0iI2YiLz48dXNlIHhsaW5rOmhyZWY9IiNnIi8+PHVzZSB4bGluazpocmVmPSIjaCIvPjx1c2UgeGxpbms6aHJlZj0iI2kiLz48L2c+PHVzZSB4bGluazpocmVmPSIjaiIvPjx1c2UgeGxpbms6aHJlZj0iI2siLz48L3N2Zz4=);background-size:70px;background-position:-4px 0}#bookBannerContent .lessemphasis{color:var(--darkText)}#sigNewsletter{margin:60px;display:grid;justify-content:center}#sigNewsletter .newsletterContainer{width:550px;text-align:center}#sigNewsletter h4{margin:0;font-size:18px;font-weight:700}#sigNewsletter p{margin:0;font-size:18px;font-weight:400}#sigNewsletter .greenButton{margin-top:15px;margin-bottom:15px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTcgMTJjMCAuNTUyLS40NDggMS0xIDFIMWMtLjU1MiAwLTEtLjQ0OC0xLTFzLjQ0OC0xIDEtMWg1Yy41NTIgMCAxIC40NDggMSAxbS0yIDVjMCAuNTUyLS40NDggMS0xIDFIMWMtLjU1MiAwLTEtLjQ0OC0xLTFzLjQ0OC0xIDEtMWgzYy41NTIgMCAxIC40NDggMSAxbS0yIDVjMCAuNTUzLS40NDggMS0xIDFIMWMtLjU1MiAwLTEtLjQ0Ny0xLTFzLjQ0OC0xIDEtMWgxYy41NTIgMCAxIC40NDcgMSAxIi8+PHBhdGggZmlsbD0iI0NDRDZERCIgZD0iTTMyLjMwMSAyNWMtLjYyNiAyLjIwOS0yLjkyNSA0LTUuMTM0IDRoLTIwYy0yLjIwOSAwLTMuNDkyLTEuNzkxLTIuODY2LTRsMy4zOTgtMTJjLjYyNi0yLjIwOSAyLjkyNC00IDUuMTMzLTRoMjBjMi4yMDkgMCAzLjQ5MyAxLjc5MSAyLjg2NyA0bC0zLjM5OCAxMnoiLz48cGF0aCBmaWxsPSIjOTlBQUI1IiBkPSJNMTcuMzM2IDE3LjYzNkw0LjM4NCAyNi45NDljLS4wMzQuMDI4LS4wNTQuMDYzLS4wODUuMDkxLjE3OS41Ny41MTggMS4wNDMuOTkyIDEuMzg0LjAzNS0uMDIzLjA3My0uMDMzLjEwNy0uMDZMMTguMzUgMTkuMDVjLjUwMS0uMzkxLjY4MS0xLjAyMy40MDEtMS40MTQtLjI4MS0uMzkxLS45MTMtLjM5MS0xLjQxNSAwbTEzLjgxIDkuNDA0Yy0uMDE1LS4wMjgtLjAxNi0uMDYzLS4wMzQtLjA5bC03LjY3NC05LjMxNGMtLjI4MS0uMzkxLS45MTMtLjM5MS0xLjQxNiAwLS41MDEuMzkxLS42OCAxLjAyMy0uNCAxLjQxNGw3LjY3NiA5LjMxNGMuMDE4LjAyNi4wNTEuMDM3LjA3Mi4wNi42NjYtLjM0IDEuMjc0LS44MTQgMS43NzYtMS4zODQiLz48cGF0aCBmaWxsPSIjOTlBQUI1IiBkPSJNMzUuNjk5IDEzYy42MjYtMi4yMDktLjY1OC00LTIuODY3LTRoLTIwYy0yLjIwOSAwLTQuNTA3IDEuNzkxLTUuMTMzIDRsLS4wMjEuMDc0IDguODA2IDguNDUyYzEuNjMxIDEuNTg0IDMuNzg4IDEuNDc1IDUuNzI1LjM3MWwxMy4yMjctNy45NjQuMjYzLS45MzN6Ii8+PHBhdGggZmlsbD0iI0UxRThFRCIgZD0iTTMyLjgzMiA5aC0yMGMtMS41NzggMC0zLjE4OS45MjEtNC4yMTcgMi4yNDhsOS4yMTcgOC43OTRjLjc0OS43MTkgMi40MzQuNzI5IDMuNjU2IDBsMTQuMjk0LTguNzY4QzM1LjUxNiA5LjkzMyAzNC40MiA5IDMyLjgzMiA5eiIvPjwvc3ZnPg==);background-size:32px;background-position:16px center;padding-left:60px}.articleList li{list-style-type:none;padding-bottom:0;margin-right:50px;border-radius:5px}#mainContent ul li:last-of-type{border-bottom:none}.articleList{padding:0;position:relative;z-index:100}.articleList li>a{padding-left:75px;display:inline-block;background-repeat:no-repeat}.greenButton,.kirupaButton{background-color:var(--primary);font-size:16px;color:var(--textOnPrimary);border:0;font-weight:700;border-radius:5px;padding:13px;background-repeat:no-repeat;text-align:right;background-position:-7px center;background-size:60px;line-height:1em;display:inline-block}.greenButton:hover,.kirupaButton:hover{background-color:var(--primaryDarker);cursor:pointer}#mainHeader .kirupaButton{background-image:url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CjxkZWZzPgo8ZyBpZD0iTGF5ZXIwXzBfRklMTCI+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iCk0gMTMgMTIuMgpMIDEyLjggMTIuMjUgNS44IDEyLjI1IDUuOCA2IDIgNgpRIDEuMTUgNiAwLjU1IDYuNiAwIDcuMiAwIDgKTCAwIDE0ClEgMCAxNC44NSAwLjU1IDE1LjQ1IDEuMTUgMTYgMiAxNgpMIDMgMTYgMyAxOSA2IDE2IDExIDE2ClEgMTEuODUgMTYgMTIuNCAxNS40NSAxMyAxNC44NSAxMyAxNApMIDEzIDEyLjIKTSAxOS40IDEuNgpRIDE4Ljg1IDEgMTggMQpMIDkgMQpRIDguMiAxIDcuNiAxLjYgNyAyLjIgNyAzCkwgNyAxMSAxNCAxMSAxNyAxNCAxNyAxMSAxOCAxMQpRIDE4Ljg1IDExIDE5LjQgMTAuNDUgMjAgOS44NSAyMCA5CkwgMjAgMwpRIDIwIDIuMiAxOS40IDEuNiBaIi8+CjwvZz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEuNzUsIDAsIDAsIDEuNzUsIDMzLDMzKSAiPgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjBfMF9GSUxMIi8+CjwvZz4KPC9zdmc+Cg==);margin-right:10px;justify-self:end;width:90px;background-size:48px}.kirupaButtonSmall{font-size:12px;padding:5px}#mainHeader{width:1234px;margin:0 auto;margin-bottom:18px;display:grid;grid-gap:10px;grid-template-columns:56px 200px min-content min-content min-content min-content auto 30px 30px min-content;color:#444;align-items:center;padding:15px;position:relative;border-bottom:2px solid var(--structureBorder);white-space:nowrap;text-transform:uppercase}#mainHeader .headerLink{font-weight:700;justify-self:center;margin-left:0;margin-right:0;color:var(--darkText);padding:12px;border-radius:5px}#mainHeader .headerLink:hover{background-color:var(--primaryLightest)}#mainHeader .articles span{border-bottom:var(--headerUnderline,5px) solid var(--primary)}#personalizeLink{margin-top:5px}#mainBody{width:min-content;margin:0 auto;margin-bottom:18px;display:grid;grid-template-columns:270px 750px 245px}#mainContent{border-radius:0;padding-top:0;border-left:2px solid var(--structureBorder);border-right:2px solid var(--structureBorder)}#mainContent>*{margin-left:75px;margin-right:75px}#mainContent>.centerImageNoBorder{margin-left:0;margin-right:0;margin-top:25px;margin-bottom:25px}#rightContents{margin-left:18px}#mainFooter{margin:0 auto;width:1250px;background-color:var(--headerBackground);border-radius:5px;padding:20px;display:grid;grid-template-columns:400px 1fr;align-items:center;margin-bottom:18px}#mainFooter p{margin:0;color:var(--bodyText);font-size:16px;line-height:26px}#mainFooter a{color:var(--bodyText);font-weight:700}#mainFooter img{width:20px;padding:15px}#mainFooter div{text-align:right}nav.navigationBoxes{border-radius:5px;padding:5px}nav.navigationBoxes ul{margin:0;list-style:none;padding:0;font-size:16px}.articleNavigation{margin-top:50px}.articleNavigation ul{display:flex;justify-content:space-between;padding:0;list-style:none}.articleNavigation ul a{display:flex;align-items:center;border-radius:5px;align-content:center}.articleNavigation ul a svg{display:inherit;transform:scale(.5);padding:5px}.articleNavigation ul .navText{padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}#previousArticle{margin-left:0}#nextArticle{margin-right:0}#nextArticle .navText{padding-left:10px}.leftNav{position:sticky;align-self:baseline;top:0;height:calc(100vh - 108px);overflow-y:auto;overflow-x:hidden;scroll-padding:30%;transform:translateX(3.5px)}.leftNav::-webkit-scrollbar{width:5px}.leftNav::-webkit-scrollbar-track{background:0 0}.leftNav::-webkit-scrollbar-thumb{background-color:var(--primary)}.leftNav h3{font-size:18px;margin-left:24px}.leftNav li{margin-bottom:0}.leftNav li a{font-size:16px;padding:10px;padding-bottom:5px;padding-top:5px;margin-top:5px;margin-bottom:5px;margin-left:9px;color:var(--darkText);background-position:10px 9px;width:225px;background-size:0;line-height:24px;border-left:5px solid transparent}.leftNav li a:hover{background-color:var(--light)}.leftNav .articleList{margin-top:20px}nav.navigationBoxes ul ul{border-top:var(--structureBorder) 2px solid;font-size:16px;font-weight:400;padding-top:5px;margin-bottom:5px}nav.navigationBoxes ul a{text-decoration:none;padding:10px;background-repeat:no-repeat;display:flex;border-radius:5px;margin-bottom:0;align-items:center}nav.navigationBoxes ul a:hover{background-color:var(--light)}nav.navigationBoxes ul li li a:hover{text-decoration:underline;background-color:unset;color:var(--darkText)}nav.navigationBoxes ul ul a{background-size:16px;background-position:15px center;padding-left:45px}#rightContents nav.navigationBoxes ul ul a{background-position-y:12px;font-size:14px;font-weight:400;color:var(--darkText);line-height:1.5em}#rightContents nav.navigationBoxes .oneBoxOnly ul{border-bottom:none;padding-bottom:0}#rightContents .newForum{margin-top:30px}#rightContents nav{position:relative}#rightContents nav .fresh_caption{z-index:20;position:relative;margin-left:52px;top:4px;margin-bottom:20px}#rightContents nav .fresh_background{position:absolute;top:-20px;left:0;margin-bottom:0;z-index:10;width:240px}#rightContents nav.newForum .fresh_caption{margin-left:41px;top:4px;margin-bottom:10px}#rightContents nav.newForum .fresh_background{top:7px;left:32px;width:176px;height:18px}@media all and (max-width:1300px){#rightContents{display:none}#mainBody{grid-template-columns:270px 760px;width:100%}#mainContent{border-right:none}#mainHeader{width:unset}#mainContent>*{margin-left:75px;margin-right:75px}#sigNewsletter .newsletterContainer{width:100%}}@media all and (max-width:1150px){body{margin:0}.articleNavigation ul{flex-direction:column}#previousArticle{margin-left:0}#nextArticle{margin-right:0}#mainContent img{max-width:calc(100% - 40px);height:auto}#mainContent>*{margin-left:10px;margin-right:10px}#mainBody{grid-template-columns:none;width:calc(100% - 35px)}#mainFooter p{margin-bottom:18px}.tutorialInfo a{font-size:16px}.authorText h1{font-size:32px;line-height:1.5}h2{font-size:28px;line-height:1.5}h3{font-size:24px;line-height:1.5}h4{font-size:20px;line-height:1.5}body{padding:0}#rightContents{display:none}#mainContent iframe{width:95%!important}#mainContent{width:100%;border:0;padding:0;max-width:700px;margin:0 auto}#mainBody{display:flex}.tutorialInfo{margin-top:5px}div#mainContent p{padding-right:0}#mainFooter{width:calc(100% - 70px);margin-left:15px;margin-right:15px;display:flex;flex-direction:column}#sigNewsletter{padding-right:0;background-image:none}.centerImageNoBorder img{margin-left:0}}@media all and (max-width:1075px){#mainHeader .wideOnly{display:none}#mainHeader{grid-template-columns:56px 1fr 35px 35px auto;width:unset}.leftNav{display:none}}div.askForums a{background-color:var(--highlighter);padding:15px;display:block;color:var(--darkText)}div.askForums a:hover{background-color:var(--highlighterTwo);text-decoration:underline}div.askForums a span{font-weight:700}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}.DocSearch-Button{align-items:center;border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}@media (max-width:750px){.DocSearch-Button-Keys{display:none}}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}</style>
<meta property=og:title content="DOM vs. Canvas">
<meta property=og:url content=https://www.kirupa.com/html5/dom_vs_canvas.htm>
<meta property=og:image content=https://www.kirupa.com/html5/images/retained_mode_72.png>
<meta property=og:description content="For visually complex tasks, know when to use the DOM and when to use canvas by learning about the two drawing modes used under the hood.">
<meta name=twitter:card content=summary_large_image>
<meta name=twitter:site content=@kirupa>
<meta name=twitter:creator content=@kirupa>
<meta name=twitter:title content="DOM vs. Canvas">
<meta name=twitter:description content="For visually complex tasks, know when to use the DOM and when to use canvas by learning about the two drawing modes used under the hood.">
<meta name=twitter:image:src content=https://www.kirupa.com/html5/images/retained_mode_72.png>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAABg1BMVEUAAAD//////////////////////////////////////////////////////////////////O//+e//9+//+d/v++//98//89/v9+/y8vL/79//9L//7s//8a/f99//58//75//6L/f79//7I//46/l5eX/37/P88//6n//52//3Z//16/P58//5F//2I+/77//4k/Y2Nj/z5//3z//0oD/3C+v66+/37//x4//zHD/2h//1w//x2DMzMz/v3+f6J//1QD/wVCv16//t2//vECP5I+/v7//r1//tjCfz5+A4ID/sSD/p0//qxCysrL/nz+Px49w3HD/pgH/owD/oQD/ly//ngD/nAD/mBD/mgBg2GClpaX/lwB/v3//jx//lQD/kwD/kAD/jgBQ1VD/iwD/hw//iQD/hwD/hABvt2+ZmZn/ggD/gABA0UBfr18wzTCMjIwgySBPp09/f38QxRA/nz8BwgFycnIvly9mZmYfjx9ZWVkPhw9MTEwAgAA/Pz8zMzMztyivAAAAEHRSTlMADx8vP09fb3+Pn6+/z9/v+t8hjgAADaFJREFUeNrtXftXE7sW7pMOfdAIR6GoB0GKCKLy8CBIFbQWPByKjq97rPjgSC/WuVgptFYo5U+/qy3tJJM9mWRmWk7X6veTSzrJ/mY/spNMdhyODjrooIMOOhCE0+fvQQihgKc95XcFUR1+ZxvK7w4jFcE2JBBEOPxtJ38XQu3NIIjam4ELofZm4KMJoEA7xaKeutTfH6kMQu3DwF2X+fd8/lE7WpG/LvKLPMHA1y4EGoPYjzzJwH3+xiEF6whIkuRxQT/yYBaUz+cPbjQI9Oi6gctDoPn5TUOkoOTRSiXV//g0r2Ug0YJL/mAICFrhYEDq8tjr906oo2p86fa6oFHsnxqB/I+LjZ9iv3N6u/UaxF5QwOdpuvzVjvxeJ+UCB2cE8v9o8zou4dWHJFucp9ugm/BZ5u+s/8fFfAN/NH7lqcwUgkgUPX7LinBxdBOWXJgP31EJHDSMKOgVl/6MQ7c1Dj5OdXd1aXy4infIDoS6LHh1QLi7PzEC+d9tYYDCfpflDHlg73B/a2vr8fz8LQEC9qigSsFtkQAaODyp43Dr8QAfAbtUUE2qXNYIILR3guHX3vMRsJ8XBIE/9QWKxGKJDI5YLMqmIFmNogSDComvt4w08AOUJJYtHp2CKBUzqZi+IXnN58hV7J9o8fP5AJNA/oZWiFTh1BDFbCKiE+6EXcGPPz7wi2JwcrxHmtJTksBT4o+JXPmUE0epaZCCz2kllZg/gbA3j/3kDkngnSnpzzhkIKcICSrBFWYbUS0uqVq4SBL4X8NnC6cmkItBI7+gDnArGjnRwX6DwneCwPeG7Z+aQylJu0NQ0Iy6GJFIxdYAFEfz9QePTs2inI1YNSOMwS1dAic/b2EzMorAqQXQFEQDqqQ+eqzP4GSLtqEfdhCoGJLFNbMghw1VnLliRn+ATpwj32mhMvJqhrdYMpMr6o4N05YYeAwiacOMBjQqaITRqCq8ToQ/w3QyVwIpaO1IzJXV4eAXk8HxLXIoUAeyZG0UKCQjxolbNAkF3aOExpWdpvz4K5PAya8BhN6BqUQkmcnwSF8nDFhT1gKDMEccqlvRxYYRHVhJoKNZauguki8gaCop+mnAYB+hGwf2zGgiSe3wUU6Y9WQ1L31uQODkueoGdyzPY5Jaj06ZZdBYPR8wInA8gtAjxnRAECkNhRzx124Tc5s9IwZ7ldHggFzitWJIGl8gGfjEbWjeiMBJJbO7caBmclYxTbrCEeHKXcJxCB3yqABdfGHoAZcxXGIqIaPPIOwWjkN8KmCLfv3u7LIGi7M3r/2mqwTCjIpEZucUnh8besE+U/hxSnYVD+6OwyQiR7p+wDugqenEyLFpFVwYf7BshMVrcDjSZeAXnhYYGtEznZc/u8yHKUgNSV0GXYJDAUJbBgS2QPmvLXNj8TK0oIQ7Aj5FCPMt23mxR76KE/jt3rIIpi4YuHJCPCsKIl5Hfmbp9Z/58yU2g/K08LojsVD3+FjIiaeWxXGN7QclfDhwi06OERo5ZI9kluU3ZFCwZkQIPfvFqwBz8hsySAknRc4esrXH+8c8HnDVpPzLD4BwmsUYTAsPyMR3cdXs+rlWDT/nqT4XzRJYngLCGbbCURIfzjxhqsGRZ4c/G7s3z0ZsCEAYairo7dfJKvBpMucejjssnA7ftUDgeq2JlSv4bLkMGlHAYTeDeqcPLBC4W2tidANnkMBSa+y/efeUXZzb1hNLZ/+wIP/y7FkbMsEgC0Yi/lUKiUf+UXnORgJxeb0XdINyRNgLKq5srIQrG/KwjQQWZHkNz+tUFWRMLVIYfQWCetdluR46Zi0QGD9rY06W5SXYiKImVOA0dOS4LMv1f9+0QOAqRkCewIyoDE0NusXXSnVQ7a+RSJuXf5FoEHfkJKQC3vkxPrepLjxpl++HK93JV6ymQlgytFJtEXeDI2g06xKe4GfoWIBQ70a1u9GGCsyOBPcaTa5VW2wENsKPsc4Dwi4MzlFrr0tesJrNqblcr3wGzIiKUCByCVpQ4zWUKQOS5XWL6RA2J5uoE4hDKigJZtVeaEDBCKzXexvGGIhb0SI2p1yrN6naJe4F6vw4JGZBWChA9NvCXxe6dE80C7pA65RUaxKKpC4hCypA07t1tbdh3DPGRZSweBV/VFUAMRiUATfuEolBEWiZZgLrbKOXWFiZ4p3Z3BsnFlUWsCZxFWSB7jnikA9Ia49ABcjyivjKovbtV9JCAqoKpiEDEPmWMQcktcNkbwvaxdHrBpnRg6lrdFpIABvNSoALGs8KABvERvMlsjf5NjDFnNJz6Nmbl6G0VoMrwIJvgn+Nyw1oULWgXm1vlA5qMeny+CzB4sHs1PXL0JLuxAajxWkgnQjyu0AKeHyC6k5e6bWwvTRHt4e7cYl+hWH+rZocMLVeATrcGDUrfn9chjAKiBDhXmUM0fSxPALsUF7pNyN+7xzcGmZDahxUP37x8vpwBAhiozpdyvF+28THbSgKJHQSrw/HgIcXdDuV58RcYWJdvym5n7aCAq8Xe7VTAUJ9a4xe15f4KcyxGsLHsgKdkYZ4l1SytAP1ymzEJ3ikH14yaAab3meAoYw3CBVp8sOyIZYm2N4wurBh3Eic6cUuzi2CEr3vPCfzYG3h9jAYNCfm4jIfgKEswZlMBKnZJDaMLcncWI8vzWFYiMdlAVyhpchwxlFmBBMSwgqG6XwsyxlHgSiqKm+jVQTmaE8smicQMxiHW02gm+8T0sR5Eliis6EjvpHMw4zALSMQZ4lhnkB/uxMY7hDoEOgQ6BBoHYEkMJ9uGYEFelZS4iPgaoNUwm8+F2qrZG4aIHAO6XSRntVzEoCmEiutJyC8rhJkPTrXKgLM18g7pQSsb7RF8q8zPdHDuUFWpDPx/pYPA9CsxMm5LgRNCNZbHYTE14W8wEgWa7UXD7MWp0Li+xsp1vZAc324TEfRAPcOE7BN299iFzCxOo3tDwDqQ2utIHCbacZe7h2aDLDHd7sVBPqBHRr+vXofEIOTLbWhOGKtz4b5dymhLZpWpEMTzF1K46166IudSOvi0Mv/9AFbFDGBsxABYJ8VO9HS5JT67e5DxNxmND4KIQFBDLOhmffNfP2flZ0+wIJyIt9KuKFPjrCPN3fSb5ol/9+7ivIQ+hA/IfTVXA8QSLHP1maUb5+bIv6rL4qiKIPAt6Ni3wthI0EUPIrwQVG+2W9HLz99q8j/0IYvtrxQHMLceLLSUfqt/dajKLgHYB/bxMS+mcOO5ibBE6ab1b7Sr+wT/01aqWHGjq8W8bpJZeAtoMGdWm/bNlF48+VMfGUTQdpPiX43Sn+5q/GC+/UOv9gQkN5sKw0MQh4g/uUuFoci8PHMzUaXX/626+0rinIfQR4g/u00foQjBx4N7NtRe/3vx5emxX+fxsRXVuHjxSa+XneCR4qwsaAWiRrYNhWSXm1/I1p53QeeH8iaqdLgh7ygHIXcoIbdT4Le8Or9LtmCsjMEnuAwd4jGBb4L4rD+qqZ/Zfcztx5efUxrn1Z2xuw8Q4MXwszoFA75S6GR/vjG+NVv7wJPKpP4Yb4SqACR2lseMB4Qh5T7Xisg0tsf38Ju/fb9l/Q3+CF8BCOOUybNVbshTubqHKzTZVAzqHT6E4bttMIEIb/Fk3y0Cgp6lU9WFZswo3cwfdqsAohAhPnxabIZDGb0amRkkJkQRFcUxnRaJquXPbFD/iGiyQJsQOJ16rvhRsvkkazJHavi7wzpnYcmTnSLl4TFz6djcU1TPgcNfbAm/2afjWfq9f14WrcAEOqz5AhPbK1qwChykNJngGZMm9GHMc66EuYKbBNnQvFqAyXN0cRBc0rYecioaEBkXpLDHIhDoXgFoLK2HuHka8vWr6nYmDBRYohdlDfCZIBmBJ35ryHEkj9ppkyVQaUMvNoAwECIwuYYYsqfRRYjEFgwhqyElaM/Lh7j84Wd1UGDKltE2wGHFfj0eykAtSEHZzaNpN+c6aOfS+jL32Px0gu/fkm4I7Aaed/kEz1b+rA6OWZcYIvIgKw4ALVpRlUjI7sijOn+6iZO4/Xm5sOxIb0ibWSjZL7otSq/pkKAhkExiiwjVWbILzmsw81ioK8ETmhev0Z+e+5KIovMa6t8a4qEisGgsYDDHngZEbvizDGz4me0FVPJ0SXksAtdrKBdcQUzWohmtM1ohhY7bwvTMIhStcpLKUF3jtGlj1PNk58qOxTJ8RWz17OdFF19WjNZtf2uM23hpARw30A5l+QyHajWfC7aXPlpBjp3DhQzMUb5ab3K31Qoa8Zdc9TVU7HSqe5tIckYGVAisRij9jpVAL/b0Qw4A5QpC95bwVk6Pux1NAl+yp6zlsU/ovwm3MR78rxhmymU6BEk5HI0Ee4QEFVKZsUvAAOg5GgunFD9rWTR1N0VwNjXPPNnmVFFDTlBNRTBISPgcrQALj+cHGR5L0MpF1LwWNGyezq9OvcHRpPGiihm9FKOll5W261byS2ayOhch1Uu5hi3YfW0+JJRF/tCvIjmPrJUjHm5CAr7Wn/TrjuIbIN0PhcFewI2ie9ynBfc/rBV6Xt853tNs1PqsSJ+0Os4f3j8Zl/+OdqORg1dAWFTsuFuVns5iN2O63M7/oVweiXj0BoOSB7Hvxnuyg3RoEGFgpLP0zY3wzs9npZc0t1BBx100IEZ/B9Rlu8mK4EksgAAAABJRU5ErkJggg=="><style>.sf-hidden{display:none!important}</style><link rel=canonical href=https://www.kirupa.com/html5/dom_vs_canvas.htm><meta http-equiv=content-security-policy content="default-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'unsafe-inline'; media-src 'self' data:; script-src 'unsafe-inline' data:;"></head>
<body data-help=//www.kirupa.com/forum/forumdisplay.php?19-Web-(HTML5-CSS-JavaScript)?DOM_vs_Canvas cz-shortcut-listen=true>
<div id=mainHeader>
<a href=https://www.kirupa.com/>
<svg role=img width=55 height=54 aria-labelledby="logoTitle logoDesc" xmlns=http://www.w3.org/2000/svg>
<title id=logoTitle>The KIRUPA orange logo!</title>
<desc id=logoDesc>A stylized orange made to look like a glass of orange juice!</desc>
<g fill=none fill-rule=evenodd>
<path d=M-1-2h62v62H-1z></path>
<g transform="translate(3 3)">
<ellipse fill=var(--orangeBackground) cx=27.625 cy=26.323 rx=24.375 ry=24.677></ellipse>
<path d="M13.167.145a13.9 13.9 0 00-.498 1.452c-1.033 3.668-.138 6.634 2.687 8.898.095.087.204.16.327.218 1.82-3.107 1.455-6.145-1.095-9.116A16.937 16.937 0 0013.167.145zM.142 3.861c1.251.765 2.124 1.883 2.616 3.354a265.59 265.59 0 00.854 2.482c.644 1.858 1.829 3.213 3.554 4.064.067.039.138.073.214.102 1.8.832 3.644 1.002 5.53.508.39-.116.702-.32.94-.61.122-.155.227-.334.312-.537.227-.58.251-1.17.071-1.77a2.943 2.943 0 00-.1-.262 9.305 9.305 0 00-.725-1.408 8.739 8.739 0 00-2.8-2.845 22.164 22.164 0 00-5.034-2.352h-.029A14.388 14.388 0 003.27 4.05a14.7 14.7 0 00-3.128-.189z" stroke=var(--orangeBackground) stroke-width=4.8 stroke-linecap=round stroke-linejoin=round></path>
<path d="M15.782 10.667C17.928 7.014 17.077 3.457 13.226 0c-1.752 4.386-1.01 7.868 2.224 10.447.096.088.207.161.332.22z" fill=var(--orangeSmallLeaf) fill-rule=nonzero></path>
<path d="M14.208 11.15a9.372 9.372 0 00-.736-1.42 8.846 8.846 0 00-2.845-2.873 22.57 22.57 0 00-5.111-2.373c-.77-.245-1.55-.425-2.34-.543A15.017 15.017 0 000 3.751c1.27.772 2.156 1.9 2.657 3.385a266.975 266.975 0 00.866 2.505c.655 1.876 1.858 3.243 3.61 4.103.067.039.14.073.216.102 1.83.84 3.702 1.011 5.617.513.395-.117.713-.322.953-.615.125-.157.231-.337.318-.542.27-.674.26-1.358-.029-2.052z" fill=var(--orangeBigLeaf) fill-rule=nonzero></path>
<path d="M13.183 32.88c.77 1.738 1.872 3.335 3.306 4.79 3.11 3.136 6.854 4.704 11.234 4.704 1.684 0 3.278-.23 4.78-.688.115-.04.235-.079.36-.118.491-.175.977-.37 1.459-.586a16.547 16.547 0 002.136-1.216 16.684 16.684 0 002.498-2.095c1.377-1.397 2.45-2.926 3.22-4.586.135-.284.255-.572.361-.865-.404.303-.813.591-1.227.865-3.07 2.051-6.151 3.414-9.241 4.088-.202.039-.4.078-.592.117-.087.02-.173.034-.26.044-1.838.332-3.682.42-5.53.264l-.563-.059a1.235 1.235 0 00-.173-.015c-3.909-.478-7.831-2.027-11.768-4.644z" fill=var(--orangeBodyBottom) fill-rule=nonzero></path>
<path d="M43.606 26.257c0-4.445-1.55-8.245-4.65-11.4a25.56 25.56 0 00-.52-.512c.357.693.535 1.43.535 2.212 0 1.69-.838 3.165-2.513 4.425-.269.195-.553.386-.851.571-2.234 1.378-4.929 2.066-8.086 2.066-3.158 0-5.858-.688-8.1-2.066a11.51 11.51 0 01-.838-.571c-1.675-1.26-2.512-2.735-2.512-4.425 0-.498.072-.977.216-1.436h-.043a16.271 16.271 0 00-2.08 2.681l-.057.088c-1.223 2.003-1.95 4.215-2.18 6.638a17.039 17.039 0 00-.087 1.729c0 2.393.448 4.6 1.343 6.623 3.937 2.617 7.86 4.166 11.768 4.644.048 0 .105.005.173.015.183.02.37.04.563.059 1.848.156 3.692.068 5.53-.264.087-.01.173-.025.26-.044.193-.04.39-.078.592-.117 3.09-.674 6.17-2.037 9.241-4.088.414-.274.823-.562 1.227-.865.135-.342.255-.684.361-1.025.472-1.544.708-3.19.708-4.938z" fill=var(--orangeBodyMiddle) fill-rule=nonzero></path>
<path d="M34.018 12.044c-1.78-1.006-3.927-1.51-6.44-1.51-2.512 0-4.654.504-6.425 1.51-1.78.996-2.671 2.203-2.671 3.62 0 1.416.89 2.627 2.671 3.633 1.771.996 3.913 1.494 6.426 1.494 2.512 0 4.658-.498 6.44-1.494 1.77-1.006 2.656-2.217 2.656-3.634 0-1.416-.886-2.623-2.657-3.619z" fill=var(--orangeBodyTop) fill-rule=nonzero></path>
<path d="M8.832 18.503a20.725 20.725 0 00-1.52 7.82c0 11.357 9.095 20.564 20.313 20.564 11.218 0 20.313-9.207 20.313-20.564 0-11.358-9.095-20.565-20.313-20.565-2.23 0-4.376.364-6.384 1.036" stroke=var(--orangeBorder) stroke-width=3.2 stroke-linecap=round stroke-linejoin=round></path>
</g>
</g>
</svg>
</a>
<a class=wideOnly style=margin-top:3px href=https://www.kirupa.com/>
<svg width=157 height=31 xmlns=http://www.w3.org/2000/svg>
<g fill=none fill-rule=evenodd>
<path d=M-7-10h171v51H-7z></path>
<path d="M19 13V1h-6v12h6zM7 31V19h6v-6H7V1H1v30h6zm12 0V19h-6v12h6zm18 0V1h-6v30h6zm24-12v12h6V19h-6zm-.24-6H55V7h5.76v6zm.24 6v-6h6V1H49v30h6V19h6zm36 12V1h-6v24h-6V1h-6v30h18zm18 0V19h12V1h-18v30h6zm6-18h-6V7h6v6zm24 18V19h6v12h6V1h-18v30h6zm6-18h-6V7h6v6z" fill=var(--logoTextShadow) fill-rule=nonzero></path>
<path d="M18 12V0h-6v12h6zM6 30V18h6v-6H6V0H0v30h6zm12 0V18h-6v12h6zm18 0V0h-6v30h6zm24-12v12h6V18h-6zm-.24-6H54V6h5.76v6zm.24 6v-6h6V0H48v30h6V18h6zm36 12V0h-6v24h-6V0h-6v30h18zm18 0V18h12V0h-18v30h6zm6-18h-6V6h6v6zm24 18V18h6v12h6V0h-18v30h6zm6-18h-6V6h6v6z" fill=var(--logoTextColor) fill-rule=nonzero></path>
</g>
</svg>
</a>
<a class="wideOnly headerLink articles" href=https://www.kirupa.com/learn/index.htm><span>Tutorials</span></a>
<a class="wideOnly headerLink" href=https://www.kirupa.com/codingexercises/index.htm><span>Coding Exercises</span></a>
<a class="wideOnly headerLink" href=https://www.kirupa.com/learn/videos.htm><span>Videos</span></a>
<a class="wideOnly headerLink" href=https://www.kirupa.com/book/index.htm><span>Books</span></a>
<p></p>
<a aria-label="Choose dark/light mode and color" id=personalizeLink href=#><svg width=20 height=20 xmlns=http://www.w3.org/2000/svg><path d="M19 9.199h-.98c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799H19c.552 0 1-.357 1-.799 0-.441-.449-.801-1-.801ZM10 4.5A5.483 5.483 0 0 0 4.5 10c0 3.051 2.449 5.5 5.5 5.5 3.05 0 5.5-2.449 5.5-5.5S13.049 4.5 10 4.5Zm0 9.5c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4v8Zm-7-4c0-.441-.449-.801-1-.801H1c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799h1c.551 0 1-.358 1-.799Zm7-7c.441 0 .799-.447.799-1V1c0-.553-.358-1-.799-1-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1Zm0 14c-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1 .441 0 .799-.447.799-1v-1c0-.553-.358-1-.799-1Zm7.365-13.234c.391-.391.454-.961.142-1.273-.312-.312-.883-.248-1.272.143l-.7.699c-.391.391-.454.961-.142 1.273.312.312.883.248 1.273-.143l.699-.699ZM3.334 15.533l-.7.701c-.391.391-.454.959-.142 1.271.312.312.883.25 1.272-.141l.7-.699c.391-.391.454-.961.142-1.274-.312-.313-.883-.247-1.272.142Zm.431-12.898c-.39-.391-.961-.455-1.273-.143-.312.312-.248.883.141 1.274l.7.699c.391.391.96.455 1.272.143.312-.312.249-.883-.141-1.273l-.699-.7Zm11.769 14.031.7.699c.391.391.96.453 1.272.143.312-.312.249-.883-.142-1.273l-.699-.699c-.391-.391-.961-.455-1.274-.143-.313.312-.248.882.143 1.273Z" fill=var(--darkText) fill-rule=nonzero></path></svg></a>
<div aria-label="Search the site" class=searchRegion><button type=button class="DocSearch DocSearch-Button" aria-label=Search><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20"><path d="m15.4 13.4-3.7-3.8c.5-1 .9-2 .9-3.2C12.6 3 9.6 0 6.2 0A6.2 6.2 0 0 0 0 6.2c0 3.4 3 6.4 6.4 6.4a5 5 0 0 0 3-.9l3.9 3.8c.4.4 1 .4 1.3 0l1-1c.4-.3.2-.8-.2-1.1ZM2 6.2c0-2.4 2-4.3 4.3-4.3 2.4 0 4.5 2.1 4.5 4.5 0 2.3-2 4.3-4.3 4.3A4.6 4.6 0 0 1 2 6.2Z" stroke=none fill=var(--darkText) fill-rule=evenodd stroke-linecap=round stroke-linejoin=round></path></svg><span class="DocSearch-Button-Placeholder sf-hidden">Search</span></span><span class=DocSearch-Button-Keys><kbd class="DocSearch-Button-Key sf-hidden"><svg width=15 height=15 class=DocSearch-Control-Key-Icon><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width=1.2 stroke=currentColor fill=none stroke-linecap=square></path></svg></kbd><kbd class="DocSearch-Button-Key sf-hidden">K</kbd></span></button></div>
<a class=kirupaButton id=askquestion href=http://forum.kirupa.com/>FORUMS</a>
</div>
<dialog class="kirupaDialog sf-hidden" id=themeWrapper>
</dialog>
<div id=mainBody>
<nav class=leftNav>
<div>
<h3>Canvas Topics</h3>
<ul class=articleList>
<li><a href=https://www.kirupa.com/html5/dom_vs_canvas.htm style=border-color:var(--primary)>DOM vs. Canvas</a></li>
<li><a href=https://www.kirupa.com/canvas/getting_started_canvas.htm>Getting Started with the Canvas</a></li>
<li><a href=https://www.kirupa.com/canvas/drawing_basics_canvas.htm>Drawing Basics / Lines</a></li>
<li><a href=https://www.kirupa.com/canvas/drawing_curves.htm>Drawing Curves</a></li>
<li><a href=https://www.kirupa.com/canvas/drawing_multiple_things.htm>Drawing Multiple Things</a></li>
<li><a href=https://www.kirupa.com/html5/drawing_rectangles_squares_canvas.htm>Drawing Rectangles (and Squares)</a>
</li>
<li><a href=https://www.kirupa.com/html5/drawing_triangles_on_the_canvas.htm>Drawing Triangles</a></li>
<li><a href=https://www.kirupa.com/html5/drawing_circles_canvas.htm>Drawing Circles</a></li>
<li><a href=https://www.kirupa.com/canvas/modifying_how_corners_look.htm>Modifying How Your Corners Look</a></li>
<li><a href=https://www.kirupa.com/canvas/working_with_colors.htm>Working with Colors</a></li>
<li><a href=https://www.kirupa.com/canvas/drawing_text.htm>Drawing Text</a></li>
<li><a href=https://www.kirupa.com/canvas/drawing_images.htm>Drawing Images</a></li>
<li><a href=https://www.kirupa.com/canvas/canvas_transformations.htm>Canvas Transformations</a></li>
<li><a href=https://www.kirupa.com/math/equilateral_triangles.htm>A Deeper Look at Equilateral Triangles</a></li>
<li><a href=https://www.kirupa.com/canvas/from_pixels_to_objects.htm>From Pixels to Objects</a></li>
<li><a href=https://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm>Animating with
requestAnimationFrame</a></li>
<li><a href=https://www.kirupa.com/canvas/creating_animations_canvas.htm>Creating Animations on the Canvas</a></li>
<li><a href=https://www.kirupa.com/html5/animating_many_things_on_a_canvas.htm>Animating Many Things on the
Canvas</a></li>
<li><a href=https://www.kirupa.com/canvas/creating_motion_trails.htm>Creating Motion Trails</a></li>
<li><a href=https://www.kirupa.com/canvas/sprite_animations_canvas.htm>Creating Sprite Animations</a></li>
<li><a href=https://www.kirupa.com/canvas/working_with_the_mouse.htm>Working With the Mouse</a></li>
<li><a href=https://www.kirupa.com/canvas/follow_mouse_cursor.htm>Follow the Mouse Cursor</a></li>
<li><a href=https://www.kirupa.com/canvas/mouse_follow_ease.htm>Mouse Follow with Ease</a></li>
<li><a href=https://www.kirupa.com/html5/keyboard_events_in_javascript.htm>Working With the Keyboard</a></li>
<li><a href=https://www.kirupa.com/canvas/moving_shapes_canvas_keyboard.htm>Moving Shapes Using the Keyboard</a>
</li>
<li><a href=https://www.kirupa.com/html5/resizing_html_canvas_element.htm>Resizing the HTML Canvas Element</a></li>
<li><a href=http://kirupa.com/canvas/canvas_high_dpi_retina.htm>Ensuring our Canvas Visuals Look Good on
Retina/High-DPI Screens </a>
</li>
</ul>
</div>
</nav>
<div id=mainContent>
<div id=tutorialInformation>
<div class="authorImage sf-hidden">
</div>
<div class=authorText>
<h1>DOM vs. Canvas</h1>
<p class=tutorialInfo>by <a href=https://www.kirupa.com/me/index.htm>kirupa</a> | filed under <a href=https://www.kirupa.com/canvas/index.htm>Canvas</a></p>
</div>
</div>
<div id=tutorialBox class=sf-hidden>
</div>
<div class=videoframe><div class=embed-container><iframe frameborder=0 allowfullscreen sandbox="allow-popups allow-top-navigation allow-top-navigation-by-user-activation" srcdoc="<html><meta http-equiv=content-security-policy content="default-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'unsafe-inline'; media-src 'self' data:; script-src 'unsafe-inline' data:;">"></iframe></div></div>
<p>Did you know that you have a choice in how you can get things to
display in your browser? Well...you do! The most common approach for
getting content to display on your screen is by working with DOM
elements. This is where you (and 99% of the entire world) create HTML,
CSS, and JavaScript and have elements appear magically. The other
approach uses the <span class=inlineCode>canvas</span> element. With a
<span class=inlineCode>canvas</span>, you manually specify exactly
what you want drawn and displayed on your screen. Both of these
approaches have their uses. For the kinds of visually complex
applications you will be creating, knowing when to use which is a good
thing for you to be aware of.</p>
<p>To help you with this, let's take a step back. In fact, let's take
many steps back and look at how our two approaches map to how your
browser translates what you want into something that gets displayed.
Core to this translation are two modes called <strong>Retained Mode</strong>
and <strong>Immediate Mode</strong>. While it may not seem like it right
now, understanding the details of both of these modes will help you know
when to rely on the DOM APIs and when to use <span class=inlineCode>
canvas</span> to display visuals on the screen.</p>
<p>Onwards!</p>
<h3>Retained Mode (DOM)</h3>
<p>In a retained mode system, the way you get things to display on the
screen is by sending your hopes, dreams, and desires to your browser's
Graphics API. This API, much like Santa Claus, gives you whatever you
ask for.</p>
<p>The following diagram roughly describes the division of labor between
you, the Graphics API, and your browser:</p>
<p class=centerImageNoBorder>
<img alt="diagram of the retained mode API" height=429 src=data:image/webp;base64,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 width=651></p>
<p>The yellow box represents the HTML, CSS, and JavaScript that makes up
your application. While you may not have thought about your markup and
code in quite this way, almost everything you specify is nothing more
than a drawing instruction that tells your browser what to display on
the screen.</p>
<p>This translation between your raw markup and code to something visual
is handled by your browser's Graphics API. This API takes what you
specify and creates an in-memory model (often referred to as a <strong>
<em>scene</em></strong>, <strong>
<em>object list</em></strong> or <strong><em>display list</em></strong>) of what the final output should
look like. Once it creates this model, the final step is to translate
the model into the arcane draw commands that your browser understands.</p>
<p>All of this happens very seamlessly behind the scenes. You simply
define your application. The details of getting what you defined into
something you can see is automatically handled for you.</p>
<h3>Immediate Mode (Canvas)</h3>
<p>Contrasting the gentle comforts of a retained mode system is the
immediate mode one where...well, let's just look at the diagram first:</p>
<p class=centerImageNoBorder>
<img alt="immediate mode diagram" height=414 src="data:image/webp;base64,UklGRlwcAABXRUJQVlA4TE8cAAAvikJnEJcGN5IkR07Nkd5nIOo7AJX6bwk0BCQmzYItG1AfXNW2HSfnJWnogAUc4P8fAbhgoSHT7YUc2bZqpc8/9+n/OGMiICPSZ+oOT45DSJIEKREGoREO6REf4REOoRHa4NW2bcO4TXbyBxD2h9LWqmvTtenadG0aV94bb43ffGv8vfTeuf0DDitoYKAWBgYadlinsJFsWTZnFSQQCBL89P498JVcyZWykiv5alwpK7mSK/lqspIruZIrZTXgwlUwixgYWLgGBmYRAxv3XjCwcD3b5+mrc5aOyRb6OdMxOQeLiEU8FjHwWMRAwIGEayDgQCxiIOAsIuvWvS+gY5LO2RFezpmOSTpnjy5lLsr4V+aizEUZ/8pc1LnANdDAiBioYeFaRMxcNdfheltp11G5XnP9Lt/3H20dbR3V3u7etcdgnw5qTqq9NYKVRrV3C3NOc06qvd056687AocCBcDAQA2/wMACmzHQgV1gc+P+W5r+fIwPuT35nJ8+5oeor+acVHtLaVR7qr2H36O2Vl2b2on41xfEBmTce8IVEHAgICDgwIUrICDgAQE5HLe5K3+On4caXukoaNtGSrrxJ33/IYiICeBY5aIAyaIcwmxei3l3N1DJUDvqHgkwlJNKovJtVb65rHomNW3b07ZSFzQbYfgdLKSJs4dhXlWZYVGx5KTHkpp5S9+xPzuyI/mL6L8sSJLdtumDEoAHQyoG4N17YIC/vNm23baBtm3VODjApixT/llXztfVg6t3OYdGiSBl84rmlVDABrCRDiL67wiSrSaavwn84DsYWDDriZq2bWua6RtfQt3d3V2WAFS2gHzAQjg4jnF3d/fZQmVJeSV5Lbz865MG8rQZSET/IUGS5DTKkWOw5xGzmLinbEm2ndb5aGWJDAqkG+GHzTkI7bOWn29AdeSw7Yj+O4IkKYq6Rd0B8XsButaPlqxtWWupvNOTaCQSZt89AWcpn+ycdHZf81P4FhRvEdF/iLKt1K027X2azskMUkTpB+wgMT7G9VYORJ7UfBxy4uUo464ufoaCG/iEc1nxapA87MttkTUZGg16XutFjceHBLgANIZWUZ894HTFvTTFFZOTCDQO0lbHEAGRhKTLUmqog4wAAjnB1IsaWhXMDIh0gRGW0xVWBLaYV3AEdniGGKtWwdEi0CIzQqsU6WIHOnUQmHpRI7Eh04IuLcOzZTSKAouGjeiORG30AJatVnEoLPBscAHNLDg4V/uGXtx8QZNrZAMii2Ves5WsAo5m7zLzIrVCWhURcKBQY/luZXBa9B44ZCYOGFNhy2gZb2Iq0CZbfsF1dmZaoFEnRLXYOHioDOxX8kLewG1Bk2Eym36ZoSWKoS6yoaz+37srh06QgKcGhvKJY9UDufFBB7f4ZkbACWDJjsAAGLnDczKLvHLokGlObn2jACKxkcmSa4QhNkbQmN5SYmAzSPCMgLTiCDjJmd2SRw5mKtRGygx0Mjhaz7bhMrTiAMRVAD6QoRpjBlCYgYlkNAWxebZDh7FuxbFG0423SDHhI+YtcKNVqK6EWOsPnvZGVHE4CM05x34cLnkWOo5E+//Y/O4Xvz8O+eVvf/O7w5C/jPGzwxARYRS6EXmEIS/yAEOdSAdD9yInMFSK3LxCLHmExDlvRc5wmG4E45xHMJwTjDkegqE7kQBD50iccgnEKTdQnPI6sTbzWuSCUWgLxua69SvEpTYiZx+h/Pw7+dkNGdD7OYyx/dpCr4lkGyNucgG9vLeLY8j2itcV+HbV5Sazt2uDvm4LPqsyM+g7UaAbFTJ2kbZaZWazWBXctUYLR5lzX1ciEoDXXLzM6nftH0XkAnb160dBZKvVbRZnsoiOoVepeXnNPr0R9iLyCLux+j9SpV/TUnJ2Db8u13InSlweA/ChELSoCgQ+gps6tsHgAfRS5REMH60o3DES48N/7w/L/6TJlqHWgy5tWob7aU4D9VDrFgd6qyH1EKOIDipjW+QfxgK3PhpnduVUfqik7Qj/EI68xFfDpmRer3qzXlRbFoZ/R4mV/wj4xjdjnfK4Un63/Hru+imGd/mnN9w9nvy7jOatms7fZuS22enfzgV+SASj+D/lFIxGWi/jvhnBlfW+F187/K5uco7HDkp/bC9nZN/X1nm7xf8mf7wmFL8mV/WS+8hWq2cvbd82ElU2+/bv5K9YMP5MgrrIuVTL69fehcuIWvzn7XWV/PO7qIf/ku/qIMfArufZu3KpL4YLW/2YwG+vOSGcqn8UB+skqfYuXWs7TtRZW7V+HzshIVXvsIutOu/WHPS5LPVzTMhI1TdKK9p6946NNtiImbqEVH1TcHwEVp2vHsGttkj2FvpdkvjOD9jPfdF5DHNl6yBJ7JthM6zUeBw32mCpv34hknuON30lrEc5oQ6cKsRG99mn1ISbmL2nvPXcs/4SSLOc+6vHcqsN9vnpjHpNvYweiOef9ZugWc8ddLLvU/PpJd0B2Ix9yQs2I1NDrcdzVH8hb+HoZpMdj/LGSy/6SsSvy/Dlpx/5Snz8mTm1nQm14VXWrWHFPnzfZ+KDL0ypdx/sBDxRsXb59H3fiaYhGzLNxmiVR3WhNlbz61b3rmaNFumgpcd1E9NoISI17zJ2wOIypvGbPULfDBne/sonIqaYM9DuzSM7Nuo8a5h3nvGJSIwRTNkh7P4YHjKz6UWP7kqt1QSH88egbQcvrpVRHhtKHfTc47tUE4/ONzp4O2yvTmMxktDfTvf/YHeHEyPWKjRq7CjEygJ/crcRKkPcdFqqXAfVPYfrmMbWzUb6gMmMA8CtpfptbNOzWCnSWkHjzMzSaggAA1bqj9n6gkaN+sUGmmYmnAyJJkDXg40qrSXXQmygZWZuOWBiaQyg20Kd7SXZwrvSUC8/w415AGjYp9SopWeyshC2AEaki5txjSkAGLJOwQ2tI/VuMckWgIu4W7kHwFHLdNJBb1SKavW6+VAiU233DGcYAOixTLHRPLLnchljjJ27dPIzK6siMQcA/XbpcuWyOtPl9eAonQO3wM2IxiQADNdeVvzM+NN4EBFhyR0pPFqk1PrN+JPdY5Dpd0cykmKRFB4tUjShLRBPu6DWPbqozPRCIDGowuOgPTpMaiDJ0lySTDEa94wBAHIzvMJjjWX8lJ7PJk3ozegwMUggP5ZJ4bHTEmXGYzgIJQb1rUlmRBPreCg8+qg/B/v4PtMvJ5HPqdzxVAvF0nXSaJQjZjlk9/jMZsR4MezaLJgmhUff9McoYHvd3uVhll9Af5g8sd14I5pOMVV4mXGOTLSK4ChhqyyvKYZRbcj3FsPIGgKFR780GgLKvMOuCjCbx/czJzp4QsW6eMnrUyda7hBz9DJl5A4YTJFMF/PMrSBUeOz2zQ7D98P087f8uZ3RcGVmSXEVGCVHJt9ooxNVajHOJQ9ozMbNvCWaJsYTLzwaYg/iOhFYf+TWcW8f4GW6w+unH1hdIfu7GRHR3JSSeeKcTTvYn4tSFEXyVcYMBRHt2SyYIoVHMzzrzbrrAqzc/Ah01YF7bbgZrQyz9OHFcytAe+TK2oBJxWR4HejjS0sR2D3pgaJ0XcNQzGGti+S1UftiJV4x0X/hkP0ZTVacJ5ffMsMXpRCrzBpCTEGJIxrWm2GXiMbmklV47Oo0gxxb8GDV3PZhocIxriCTyvtRQMONNcCT9JUZC8lNW83khMLZiteVOZKoTMOlCfZmb+ImREegkj6xfR/JdOV5CnG9fIqpNLbYAdPM+mqOlZLItGPfToiobyaphUcjTEYP2DjulQ3KLGhMIsE8qN2RPuSAlRkPsqFRWbdeEWu1dCRmzNyADMSIkV5E+NM4z4KZ3k6kjsDtjRcyYzNuP1l5WUs50auhBcSEHZCRd8juaJRFGSRpZ9T2LBbMksKj1oO4vk27dWcmIAjPnwEIvHuFvuiDLHKBlwe4iSBtCQLlCLOtWGYHlQHYCBRGgPWdeqYhw8oqSZF+FcSMqxDxQrbiqQZhNFZi/+AJsVvrEUJI55kkFgsmAGDEBDezJN6lx+JFlDdJPGw/KAeb5XFwCSDwlKPjRvKyWrok0ovZkkU8R9XvlNYNGSa9/OXI93wKkenM0FqIWI6iqlLJIAzTS/NB2VKOsWsQZYVHEyZkNmUmLIKNdi68g+e2bASyCLnUB6uQM4pfPDs05Yx61fXBxdLkuCy4mJEsnu/s8pgytJu8kWGpQcv8h5czjgq11nChSLI3MyQObBYsOEvda4KnsQFyFj7NKpkOuos7N8BThG5gZMUuRGlG8cUzY2O3aJYhS/KB+KJl/iHRXwrPp+kNVpIzJEqIec5PBJQDcs/Rkywo0tBy04NSv9N/Qgwzfig1Yq7N/W1ZhUcDzPZ9XDiqfUUZPO8Hl4vEjlg5upf1erfjhk4GbMwovEJsgVUWAnDZL9dB0OxDZpWjwG+Fk/30wjXK1TViTH3nZ9jRmAhfVkvZwDzYSy/NxWCew5+zmCrXmiGbO8s6Iu5JmNUEKTzqbzScRBKpN/I27JVPzQPvolD7amubd57UdbJ68oFGZtSDXnlYTvSJ9MBC7ZstBWA+SQS/kl7WrZd6WennKE//2o2ZzZhRzICXmaUoqkpXuf5Vdw+VUiNmNtfaiUNW4VH7guN5LT09SZGBLsK7q0gyz7aRq80C/jCRnMUFlTY0j0kPBxHIqh5/vJF6tYJCNfTKagyFFGmHruPQP39Zb+k95YEak9nqMc9NNcWrdbMycb5wzXkvVVI2Wn7C/iyN/Tmz0YKtgz1phcc+7d3ORyXGPx3Wct4x9x8PVQCjzDmnKLTx2TPetACIG+g5d0c5NLpkhb9llHEZzysOe7kpIYvpRMRrt7f1hhkpf/l2XDEba/34cNf9V/PmhmDhUXOi+vMpszwAyfatR3YHs08d04z6P+USE8PyFrtL2RvfF4VGLo2k00OF8VzqQ2NCm11tM2fEzAbbP0V0ndoe4o5YO7VOje2b4medWZ3z1pn8VnpPuIwv2dnN2u9YUlXTcJ657zT7fugCseRR3qTa95CIKAyYzfaITuy7QMRdscJjj84PL8O6f5L1zP27WG2b9JPv444OtbE5KiKmI0qZrnK/7EFskj61+xWz6YItZ2p4tO7yC7q9IVh4HNHYZBPSTxKXeArj6fa/0lPTU+r8xis2TttKL5npVejqDqhSm3IwAAsEa4eIeLK3LrOZ2qjt7N41TMdO5nk22eWVFdm5pStRARFLXAqa7DpREOyRJO6uSxzZbvxkiS3f+MDq169CukDEKu8BC1HJTR4xLe/KEWKMkVwpWDtAEoebG5K2aNqNbxl1z19+ZPWuVkgF7hppm55h/jzjtg57Lvcsgz85UxBsHyMVJ487m9RsdpsCdR6r8ZPvG7Ef2/53JaSX27kqby2hBV4WrNgAuZszxU2EXrC9Hh8R8dF79Vt392V8dqA9uj/sdeu+iI2dC125K+ZL9ROKFpuJ1dXMWua3qusr683F5d2L//ZdLHl+58cf3GrUqudziDFGdqog2NzjJKgtSx4PCtD7RHejeUy8ARf39eIzRXEs93REPLor8KtvnSqxN3Mlx+xIr7dqTTVdyUW+HNOt4DLfxXd/9IMbi/i/K6stkCSPuXUVsV47+0dE+3BvzWtLSf2b7Op9EOfIbMhkAQK12O1+IDi9tYn4mxgAeHcxPvMdeLm2KTF15y6RHqDbb/rYKMphHTebqJZ0HUUHkNKeWuFkFscyEiY7bnSivNzciVaD3n9gLJq3eTsEUUgYqojVPZk10NO3glYSfZhJBlV+E4HxhA46NTHGyC6k4LB6+qsNu1kXpbcDvViSHh7apyE72cQbfdA295y4RVc0rxiXonw0HX4VEjAbFYAt5Q7j47ho2/xV9DqqlIfF/yZirHfmkFz57p4XC9S+hvobRdOWSknj5OhHxspYy4+wSJmeDci6xjNzBfbmvdXMUUiwYrYQGU96DzIDkhcxvZvP8/b816MwMjhzumfFMnUIZv0JN8+i1+XhAHp77T9zzix9DUCozpPlGDXgh6ZjPUkAMlNmOOlNHpmw+ATc/gPO6q/d4ZVMrTrlWTFJnZnaKKLTMAkliQlr+QFdTkzMIll1XrYlPDxGliIlyJxWqO6iKCC5/jte+Y91y8tVjDG2bqJ292szjtUj2hPyMdZ+4XUi2+V55rXMaOF0QjKlcFM5mSldWVXkCCB276HXW/V2sd9PElTPmqFyoZhdyt5Cb3WFV8ef66c5USu8PkS+vE36PLOgFDyPvcis57nxPdHNu5homzQDyMV6F6jTZcf/9x6gKqJtoMmnKvqDZM6VvNDJ2vD0sush42LVIvmMJwnKUMehVKpi4onKGtDJrPhhTmp6vMKnOOvndn+RCBIc++7lsqVSVB/n0k2UHqrHEKse/tLuZnScYwPQRWyOQJdZa5aqegQQXBIifrKZIZyaJGr7MHLC68IFwN0LMT1BWGn3DS75tm7ZTZQewMwQ4yv/7cfZqrdbZ54dn7TFdEdSnD8MXzc4kcQby4O8sO58iIJvdNfVO0dReVhH3X2ffSqmi0D9acpC4R3OLJa48LE/3WvsZxejMFvpwM4kbV/XGgPO0P1pHqe7oOYTgSeNpoAHVstpRxId3NGIld/ys6tocQjwGt84rahrMvt85YXkFc2rw3n3Q36quJ5CTd5V1J0YwR5gvtRzrd64lybpBCQP2Iq9v3YsC27Ur07n4XoRrPKiYh4HI5spn7yzjM8syh6IOomWVZoToruOrTbdTW46mPNcym+RVmv9fXxteB77S95RRmIAyQnmioss05zSvIJWrT23VUcJw9HBHu450aW1SLNOczD2WqsEr7bKOxZx/4R+KS3SLFS+N0Icsbi1CEBgcm5Z/BD0FmqOlaHCSvndOrYF0tvtiLVIsyynl13PNKdleNtfbxOcwOyS9+uVsC3PeteoHfKu2kYb50xhGA7zr1DQY4s063rQu1Vqor8bOpdaVaY9EN+XcdHDte3YgJfHCXdP7Qy89udWe7NA783j1C7Am2dH750dqO0+ENVL3O+I+deoE4v2fPntAhPo527odLniJxtwVr5dGp95gqcP8hB4hyBRJLgA6NEEL0p7VaElCpGVzzueR8QS+p8bBG8TtHf85SY410Fmjn//+Z+w+C4ePIAlJiAuw/cF7gwd8eSQVDIXIX8lQDvTLtLiXsvvng7mBJyoYldwf9mdujo8bTj+ZUSot2vetChcsArXmIVIY1HySK6xxMLl/rHumYGu8DI5RG0JbgBxoZO6ZkZLYBcusBs8rEnKnlmsiVy5M0aMOXC3M3GyKsOsLfod60AH+p4Y4hP/UW4Gnu3LRTL0IwaX5JC8REwas/LmIuTZ+KgsXgQehdj7BZpcAeJCJ94+McWXH/kNX27xJkrmiaSFJqIyCqyMiwirrLkIeSQuLPCUQDR5IHZ/Aac163W+hOHnPhNf3LaLTcB8TkCxqBawFTkheVOETRF1tQS5rakj9V5xtV0z2+Lc74m1vrR1hr3E/UOhmqrVUf+AjPn+oUD7bTI+QGO+f6hZ6tm5yjrjAzbmc6mqCD1hi6x3VAAU9l0mQ3XnMlg2UfWZGTvm7EOtWz6umquVkPUmmcDHfIzU8sJFV5se1qLbAkNvXk2qaheQXultQzFb/HaT/kzF0Ir+OSah2l5LPscjj95X/OR5bY9kOFi+JuM6OH6Rl9EvqNNK3IRE37yaOsHvrPFRz6i3zAERDVxf6DD+IXXq286dSty+jDq0KLXOK5df3vtERBPnF7r2eYm266qdUrR0N+Kti0v0D/+/kExJfXoG7v9mysfw+j/u91wcr+XXmu+QKFnhsciJ2ordH3mpkh4VnwAjohWf/cveM1HXLvRhvOwggE8IpfrkqDKKPAfFP8Mblb5a0n9K6BO1izF1TTRNnpPWQtmnv0xQS18x4GqfFJKpOq1WVuD5yUb+GbfD58PmRJMlZSKnlCcv1mOwRSAql5QJ3FfKBKISespFWX1VqpbIA48naquMVamJ2gR3IlGduSoToiHUKPtGWdMjZwpENezwqA5L6pWqkODNkxI/b4GVRAGaSqLwhtiEaAM7n2bXaI/Iw9CYqH77K5m0hfYKmVv1JU6VFexURG2S2RCtINrPfgkgDdrqMfezJC1RsaRzA9RsiCiotJcYy7jDDVGtC0S0QZ6kJRJt27RON0qRh4u0iLKTLnqfwmWda+BWJFWlZdDXUHJDROXCHlGJvza7DZE6gir8SVpSo0ZgT4aCiGilIzhGogpwbccVHoNtdjfq0b5B2Hy8ptW2AYr02GUwjA0QP5j5w3+vDNycXjMfPainmLTbsWodAOFCSuYz0aK2ax3wQESYj4OqZLvWAROsjaOuxqELecQhEXkT6V4Ih5j5tTESAkTuG4bhpXwB2FDkD/9z3x8N5r6hyJwTRwSh3LdBJ44IQblve08c0ZUIHiCBIwIQKHBE+Ml9Y4EjAkqlAQM4IqCgAEeEExzgiMCT+4YDR4Sd3Dc1OCI8LAgPHBF0AIIjQk7uGxEcEXBy37zgiK5E8AASHBFuYIIjgk3uGxQcET6yPFTgiPCBCxwR5AgUHjGT+4YFR4SZ3Dc1OCI8LAgYHBFiIIMjAkzuGxkcEWBy37zgiK5E8AAbHBGoKCs8oiX3DQ6OCBdZHk5wRLBACo4IFUjBEWEl940PjggquW9qcER4WBADOCKgYABHBJTcNwU4IpzkvinAEeEk4cgAjggouW8CcERIyX0TgCPCRE9DVnBEoOj0SgqOCBX9r0nBEWGl/zU6OCKw9L8mAEeElNw3ODgitGAARwSU3DcvOCIvjyDzhTITXvpfI4MjghPnQ/UArf+14P4LgDrarcthHQHF4WC3gCPjHMBYyX2jgyPCW+47v//wI3hYECY4ItjABkcEl9w3NDgivOS+ecERXYngASA4IuQABkeEmNw3HjgikCABR4QSdpw4Ipiw4sQRoef5eJt14ojg83y8rT5xRHhYkFEnjgg/jDxxRLjJfZt44oiAk/s258QRffj/mrDeNr0mrBcBR12NQ14ecZXl+aA79w0GJ1uGYRyLbGGoE+mQqC6Vb0mUoMKudYADUSbeihZ3dq0DFhwp/A4Xtao+smwdwDCQxBdHov3ff95N8/L2QZ7aBj9+2YLLReUPotXms8HwNbq+8u6DTMSG+S8xo75u5lRvzvzTad7gke+UvS4L1GiwqUvcsPfqIQFdqCuSKBbA5UlkGZILKelmOLUs7GnIWHwbQ6tAHaSwrpSiRhU1YkKhm2gxOKQBwhAlXHEyNgqmnbNBIYdQ6DgBkS4wAo16iEorpagxmwOrMfgisWEQ0AEYKqEzw+l1OKwm32pCoasIBOgStEozAxCJlVLY/BCkbJQph4pdq2IQVYVjyY51FY5rrCkiEp4NiCyW3WBDqQ+gGS0ZlpNZDbRYh1bmAE3DkkFk2qKusIxY/DrtDaWwKTYH5S3jZjXQilv/1dmwpgBGuXQhL+SyfHjWtdItaqCoCAkVMzKLgaM5QLeNXGBpN2QW80OLWcIdylc2JKFdlAJHlj5dGaSwJ7oyZAYJNHp0ahuCEc2AFVFldDYYLlpNjQIE0aKY10ob0BRzii6hRkddUUSRubpwRTwQeTVvem/RYRdEgNrIRaDVHE31tdJN9w1oRqcbTT52oyodAJI1ZQ2WDWn+VjuQrRuCNpRiK6JU/H8LAwA=" width=651></p>
<p>In an immediate mode system, you do all of the heavy lifting.
You not only specify what needs to be drawn, you also create and
maintain the model as well. As if all of this wasn't enough, you also
specify the draw commands to get your browser to actually update! Your
browser's Graphics API, the API that did so much for you in the retained
mode world, doesn't do much here. It simply takes your draw commands and
sends them off to the browser for execution.</p>
<p>In HTML, immediate mode comes into play when you are using the
<span class=inlineCode>canvas</span> element. Anything you wish to
draw inside it requires you to issue primitive draw commands and handle
all aspects of managing the scene and redrawing when changes happen.</p>
<h2>When to Use Which?</h2>
<p>Whenever a section heading promises a clear answer, you know that the
answer is never clear. This time is no exception. Choosing between the immediate mode-ness
of the <span class=inlineCode>canvas</span> and the retained mode-ness
of your DOM is not an
exclusive decision. It can actually be quite scandalous! You can choose just one, the other, or
even both.</p>
<p>In this section, let's build on the overview you saw in the previous
section
and look at the advantages and disadvantages of each of the approaches.</p>
<h3>The DOM</h3>
<p>Since we are talking about the DOM here, you will spend a majority of
the time, possibly even all of your time, in this retained mode world.
Despite the comforts it provides, it isn't perfect.</p>
<p>Let's look at its perfections and imperfections in more detail:</p>
<ol>
<li><strong class=greenEmphasis>Easy to use.</strong> The DOM
abstracts away a lot of the details that would otherwise get you
bogged down. Examples of details that can bog down even the best of
us include layout, event handling, clean up, selection/highlighting, accessibility, being
DPI friendly, and so on.</li>
<li><strong class=greenEmphasis>Redrawing is handled for you.</strong>
You only specify what you want to display on the screen. The details
of how to do that and how often to refresh are all left to the
Graphics API to handle.</li>
<li><strong class=greenEmphasis>CSS! CSS! CSS!</strong> You can
easily modify the visuals of your DOM elements using CSS.</li>
<li><strong class=greenEmphasis>Animations are easy to define and
modify.</strong> Because of the CSS support, you can easily define animations or transitions, specify an easing function, make a few
other tweaks, and you are good to go. This applies to
JavaScript-based animations as well. If you are using JavaScript to
animate an element's properties, you just have to get your
<span class=inlineCode>requestAnimationFrame</span> loop setup to
update the property values. Everything else is taken care off...such
as when to redraw or how to maintain a smooth frame rate.</li>
<li><span class=redEmphasis><strong>Memory intensive.</strong></span>
You know all of the details that get taken care of for
you when using a DOM element? Well, that care doesn't come cheap.
Your DOM elements are very complex little things, and all of this
complexity takes up space in your browser's memory. The more
elements you are dealing with, the more resource hungry it all gets.</li>
<li><span class=redEmphasis><strong>Less control over how things get drawn.</strong></span> For certain
graphics-related tasks, the default rendering may be a bit limiting.
Browsers optimize for their particular needs, and those
optimizations may go counter to what you want to do.</li>
</ol>
<h3>The Canvas</h3>
<p>If this were a popularity contest, I would feel pretty bad for
immediate mode and the <span class=inlineCode>canvas</span> element
that uses it. Fortunately, it isn't! Immediate mode systems certainly
carry their own weight - even in the more limited cases they are used
in.</p>
<p>Let's look at some of their cool (and less cool) features in more detail:</p>
<ol>
<li><strong class=greenEmphasis>Fast. Really fast.</strong>
Because an immediate mode system doesn't maintain its own model,
your code is all that stands between you and the browser redrawing.
The many layers of abstraction that slow operations down simply
do not exist in the immediate mode world.</li>
<li><strong class=greenEmphasis>You have a lot of flexibility.</strong>
Since your code controls all aspects of when and how something is
drawn to the screen, you can tweak and customize the output any way
you would like.</li>
<li><strong class=greenEmphasis>Great for dealing with many
elements.</strong> Compared to a retained mode system where every
little addition to your scene takes up extra memory, immediate mode
systems don't have that problem. Generally, an immediate mode system
will always use less memory than a retained mode system - something
that becomes more noticeable as you add more and more elements into
the mix.</li>
<li><strong class=yellowEmphasis>It can be slow when drawing to
large areas.</strong> How quickly a redraw completes is proportional
to the number of pixels you are re-drawing. If your addressing a
really large area, things could get slower if you are not careful
and do not optimize appropriately.</li>
<li><strong class=redEmphasis>It is complex.</strong> Because you
are handling more of what it takes to get something to display on
the screen, there are a lot more details for you to keep track of.
Getting up to speed with the various draw commands and how they are
used is no picnic either.</li>
</ol>
<h2>Summary</h2>
<p>Understanding the retained mode and immediate mode differences
makes it much easier to sympathize with the DOM on certain things and
with the <span class=inlineCode>canvas</span> on others. By now,
hopefully you have a good idea of when to use one over the other. In
case it helps, here is my short list on when I use
<span class=inlineCode>canvas</span> and when I use the DOM.</p>
<h3>When I Use a Canvas</h3>
<ul>
<li>Complex visualizations</li>
<li>Animations involving content that nobody needs to interact with
(<a class=blueEmphasis href=https://www.kirupa.com/snippets/amorphous_circles_snippet.htm>example</a>)</li>
<li>Pixel manipulation (<a class=blueEmphasis href=https://www.kirupa.com/html5/detect_whether_font_is_installed.htm>example</a>)</li>
</ul>
<h3>When I Use the DOM</h3>
<p>This is pretty simple. I use the DOM for everything else that I don't
use a <span class=inlineCode>canvas</span> for. The
<span class=inlineCode>canvas</span> has very limited uses for the
kinds of things that I do.</p>
<h2>Further Reading</h2>
<p>To see more examples and materials that indirectly utilize everything
you've learned here, check out the following articles written by me and
others:</p>
<ul>
<li>
<a class=blueEmphasis href=https://www.kirupa.com/html5/introduction_to_animation_html.htm>
Introduction to Animation in HTML</a></li>
<li>
<a class=blueEmphasis href=https://www.kirupa.com/html5/drawing_circles_canvas.htm>
Drawing Circles on a Canvas</a></li>
<li>
<a class=blueEmphasis href=https://www.kirupa.com/html5/resizing_html_canvas_element.htm>
Resizing the HTML Canvas Element</a></li>
<li>
<a class=blueEmphasis href=https://www.kirupa.com/html5/animating_many_things_on_a_canvas.htm>
Animating Many Things on a Canvas</a></li>
<li>
<a class=blueEmphasis href="http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx">
How To Choose Between SVG and Canvas <strong>[microsoft.com</strong>]</a></li>
</ul>
<p>
<div class=askForums>
<a href=https://forum.kirupa.com/><span>Got a question?</span> Post on the forums for a quick response!</a>
</div>
<div class=articleNavigation>
<ul>
<li><a class=blueEmphasis id=previousArticle href=# style=display:none></a></li>
<li><a class=blueEmphasis id=nextArticle href=https://www.kirupa.com/canvas/getting_started_canvas.htm><span class=navText>Getting Started with the Canvas</span><svg width=14 height=22 xmlns=http://www.w3.org/2000/svg><path d="M3.707.293a1 1 0 0 0-1.414 0l-2 2a1 1 0 0 0 0 1.414L7.586 11 .293 18.293a1 1 0 0 0 0 1.414l2 2a1 1 0 0 0 1.414 0l10-10a1 1 0 0 0 0-1.414l-10-10Z" fill=var(--linkForeground) fill-rule=nonzero></path></svg></a></li>
</ul>
</div>
<div class=joinForums>
<a href=https://forum.kirupa.com/>
<img width=36 height=36 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0ZGQ0M0RCIgZD0iTTM2IDE4YzAgOS45NDEtOC4wNTkgMTgtMTggMTgtOS45NCAwLTE4LTguMDU5LTE4LTE4QzAgOC4wNiA4LjA2IDAgMTggMGM5Ljk0MSAwIDE4IDguMDYgMTggMTgiLz48ZWxsaXBzZSBmaWxsPSIjNjY0NTAwIiBjeD0iMTEuNSIgY3k9IjEyLjUiIHJ4PSIyLjUiIHJ5PSI1LjUiLz48ZWxsaXBzZSBmaWxsPSIjNjY0NTAwIiBjeD0iMjQuNSIgY3k9IjEyLjUiIHJ4PSIyLjUiIHJ5PSI1LjUiLz48cGF0aCBmaWxsPSIjNjY0NTAwIiBkPSJNMTggMjJjLTMuNjIzIDAtNi4wMjctLjQyMi05LTEtLjY3OS0uMTMxLTIgMC0yIDIgMCA0IDQuNTk1IDkgMTEgOSA2LjQwNCAwIDExLTUgMTEtOSAwLTItMS4zMjEtMi4xMzItMi0yLTIuOTczLjU3OC01LjM3NyAxLTkgMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOSAyM3MzIDEgOSAxIDktMSA5LTEtMiA0LTkgNC05LTQtOS00eiIvPjwvc3ZnPg==">
<h4>Got a question? Post on our forums!</h4>
<p><span class=yellowEmphasis>Learn</span>, <span class=greenEmphasis>share</span>, and <span class=redEmphasis>have fun</span> with some of the most knowledgeable and friendliest developers ever!</p>
</a>
</div>
<p></p>
</div>
<div id=rightContents>
<div id=bookBannerContent>
<ul>
<li class=arraysBookRight>
<a rel=noreferrer class=bookLink href=https://www.amazon.com/exec/obidos/ASIN/B08FB2D8PY/kirupacom><strong>Arrays</strong>
<span class=lessemphasis>From Noob to Ninja</span></a>
<ul class=buyNowRight>
<li>
<a rel=noreferrer class="kirupaButton kirupaButtonSmall" href=https://www.amazon.com/exec/obidos/ASIN/B08FB2D8PY/kirupacom>BUY</a></li>
</ul>
</li>
<li class=js101Right>
<a rel=noreferrer class=bookLink href=http://www.informit.com/store/javascript-absolute-beginners-guide-9780136502890><strong>JavaScript</strong>
<span class=lessemphasis>Absolute Beginner's Guide</span></a>
<ul class=buyNowRight>
<li>
<a rel=noreferrer class="kirupaButton kirupaButtonSmall" href=https://www.amazon.com/exec/obidos/ASIN/013650289X/kirupacom>BUY</a></li>
</ul>
</li>
<li class=learningReactRight>
<a rel=noreferrer class=bookLink href=https://www.amazon.com/exec/obidos/ASIN/013484355X/kirupacom><strong>Learning
React:</strong><br>
<span class=lessemphasis>A Hands-on Guide</span></a>
<ul class=buyNowRight>
<li>
<a rel=noreferrer class="kirupaButton kirupaButtonSmall" href=https://www.amazon.com/exec/obidos/ASIN/013484355X/kirupacom>BUY</a></li>
</ul>
</li>
<li class=animationRight>
<a rel=noreferrer class=bookLink href=http://shop.oreilly.com/product/0636920050858.do target=_blank><strong>Creating</strong><span class=lessemphasis> Web Animations</span></a>
<ul class=buyNowRight>
<li>
<a rel=noreferrer class="kirupaButton kirupaButtonSmall" href=https://www.amazon.com/exec/obidos/ASIN/1491957514/kirupacom target=_blank>BUY</a></li>
</ul>
</li>
</ul>
<img loading=lazy alt="new books - yay!!!" height=66 src="data:image/webp;base64,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" width=165>
</div>
<nav class="navigationBoxes whats_new">
<ul class=oneBoxOnly>
<li><img loading=lazy class=fresh_caption src=data:image/webp;base64,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 width=125 height=19 alt>
<svg class=fresh_background width=205 height=64 xmlns=http://www.w3.org/2000/svg>
<g fill=var(--primary) fill-rule=evenodd fill-opacity=.15 opacity=.67>
<circle cx=4 cy=47 r=4></circle>
<circle cx=24 cy=37 r=10></circle>
<circle cx=63.5 cy=27.5 r=17.5></circle>
<circle cx=49 cy=34 r=24></circle>
<circle cx=96.5 cy=19.5 r=15.5></circle>
<circle cx=81.5 cy=34.5 r=20.5></circle>
<circle cx=106 cy=39 r=25></circle>
<circle cx=113 cy=22 r=22></circle>
<circle cx=143 cy=36 r=22></circle>
<circle cx=165.5 cy=26.5 r=15.5></circle>
<circle cx=188 cy=39 r=8></circle>
<circle cx=202.5 cy=23.5 r=2.5></circle>
</g>
</svg>
<ul>
<li>
<a href=https://www.kirupa.com/codingexercises/guess_the_number.htm style="background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAuNEMuNCAwIDEuMiAwIDEuNi40Yy40LjQuNCAxLjIgMCAxLjYiLz48cGF0aCBpZD0iYyIgZD0iTTUuMjM0IDEuMTMzYTIuOSAyLjkgMCAxIDEtNC4xMDEgNC4xIDIuOSAyLjkgMCAwIDEgNC4xLTQuMSIvPjxwYXRoIGlkPSJkIiBkPSJNNS4yMzQgMS4xMzNhMi45IDIuOSAwIDEgMS00LjEwMSA0LjEgMi45IDIuOSAwIDAgMSA0LjEtNC4xIi8+PHBhdGggaWQ9ImEiIGQ9Ik0xLjk4NS40M0ExLjEgMS4xIDAgMSAxIC40MyAxLjk4NSAxLjEgMS4xIDAgMCAxIDEuOTg1LjQzIi8+PC9kZWZzPjxnIGZpbGw9IiM4RUE1QTQiPjxwYXRoIGQ9Ik02MyA2MC42YzAgMS4zLTEuMSAyLjQtMi40IDIuNEgzLjRDMi4xIDYzIDEgNjEuOSAxIDYwLjZWMy40QzEgMi4xIDIuMSAxIDMuNCAxaDU3LjJDNjEuOSAxIDYzIDIuMSA2MyAzLjR2NTcuMnoiLz48cGF0aCBmaWxsPSIjRkRGRkZGIiBkPSJNMyAxMXY0Ny43QzMgNjAgMy45IDYxIDUuMSA2MWg1My44YzEuMiAwIDIuMS0xIDIuMS0yLjNWMTFIM3oiLz48cGF0aCBmaWxsPSIjRThFRkVGIiBkPSJNNTguOSA2MWMxLjIgMCAyLjEtMS4xIDIuMS0yLjNWMTFIMyIvPjxwYXRoIGZpbGw9IiNEQ0U1RTUiIGQ9Ik0zIDExaDU4djNIM3oiLz48ZyBmaWxsPSIjRkRGRkZGIj48cGF0aCBkPSJNNTAuNCA2YzAgMS4yLTEgMi0yLjIgMkg1Yy0xLjIgMC0xLS44LTEtMnMtLjItMiAxLTJoNDMuMmMxLjIgMCAyLjIuOCAyLjIgMnoiLz48cGF0aCBmaWxsPSIjRTZFRkVGIiBkPSJNNCA2LjFDNCA0LjkgMy44IDQgNSA0aDQzLjJjMS4yIDAgMi4yLjkgMi4yIDIuMSIvPjwvZz48ZyBmaWxsPSIjQjFCQ0JDIj48dXNlIG9wYWNpdHk9Ii40IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1My4wOTMgNC45OTMpIiB4bGluazpocmVmPSIjYSIvPjx1c2UgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDkzIDQuNDkzKSIgeGxpbms6aHJlZj0iI2EiLz48dXNlIGZpbGw9IiNFOEVGRUUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUzLjUgNC41KSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIG9wYWNpdHk9Ii40IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1Ny41OTMgNC45OTMpIiB4bGluazpocmVmPSIjYSIvPjx1c2UgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTcuNTkzIDQuNDkzKSIgeGxpbms6aHJlZj0iI2EiLz48dXNlIGZpbGw9IiNFOEVGRUUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4IDQuNSkiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjxwYXRoIGQ9Ik0xMy42IDVsLS4xLS4xaC0uM2MtLjEgMC0uMSAwLS4xLjFsLS4yLjgtLjMtLjhoLS41Yy0uMSAwLS4xIDAtLjEuMWwtLjMuOS0uMi0uOGMwLS4yIDAtLjItLjEtLjJoLS4zLS4xLS40Yy0uMSAwLS4xIDAtLjEuMWwtLjIuOC0uMy0uOGMwLS4xLS4xLS4xLS4yLS4xaC0uMmMtLjEgMC0uMSAwLS4yLjFsLS4yLjgtLjMtLjhjMC0uMSAwLS4xLS4xLS4xaC0uMy0uMUg4cy0uMSAwLS4xLjFsLS4yLjgtLjMtLjhjMC0uMS0uMS0uMS0uMi0uMUg3Yy0uMSAwLS4xIDAtLjEuMWwtLjMuOC0uMi0uOEM2LjMgNSA2LjMgNSA2LjIgNWgtLjNzLS4xIDAtLjEuMXYuMWwuNSAxLjdjMCAuMS4xLjEuMS4xaC4zYy4xIDAgLjEgMCAuMS0uMWwuMy0uOXYtLjEuMWwuMy44YzAgLjEuMS4xLjEuMWguM2MuMSAwIC4xIDAgLjEtLjFsLjUtMS41LjQgMS41YzAgLjEuMS4xLjEuMWguM2MuMSAwIC4xIDAgLjEtLjFsLjQtLjh2LS4xLjFsLjMuOGMwIC4xLjEuMS4xLjFoLjNjLjEgMCAuMSAwIC4xLS4xbC41LTEuNS40IDEuNWMwIC4xLjEuMS4xLjFoLjNjLjEgMCAuMSAwIC4xLS4xbC40LS44di0uMS4xbC4zLjhjMCAuMS4xLjEuMS4xaC4zYy4xIDAgLjEgMCAuMS0uMWwuNS0xLjdjLjEgMCAuMS0uMSAwLS4xeiIvPjwvZz48ZyBmaWxsPSIjRENFNUU1Ij48dXNlIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjcxNyAyOC40MTcpIiB4bGluazpocmVmPSIjYyIvPjx1c2UgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuOTE3IDI4LjQxNykiIHhsaW5rOmhyZWY9IiNkIi8+PHBhdGggZD0iTTMyIDQ0LjZjLTQuOCAwLTguNi0zLjktOC42LTguNiAwLS44LjctMS41IDEuNS0xLjVzMS41LjcgMS41IDEuNWMwIDMuMSAyLjUgNS42IDUuNiA1LjYgMy4xIDAgNS42LTIuNSA1LjYtNS42IDAtLjguNy0xLjUgMS41LTEuNXMxLjUuNyAxLjUgMS41YzAgNC44LTMuOCA4LjYtOC42IDguNnoiLz48L2c+PGcgZmlsbD0iIzczODE4MiI+PHVzZSB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMS43MTcgMjcuMzE3KSIgeGxpbms6aHJlZj0iI2MiLz48dXNlIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ1LjkxNyAyNy4zMTcpIiB4bGluazpocmVmPSIjZCIvPjxwYXRoIGQ9Ik0zMiA0My41Yy00LjggMC04LjYtMy45LTguNi04LjYgMC0uOC43LTEuNSAxLjUtMS41czEuNS43IDEuNSAxLjVjMCAzLjEgMi41IDUuNiA1LjYgNS42IDMuMSAwIDUuNi0yLjUgNS42LTUuNiAwLS44LjctMS41IDEuNS0xLjVzMS41LjcgMS41IDEuNWMwIDQuNy0zLjggOC42LTguNiA4LjZ6Ii8+PC9nPjwvc3ZnPg==)">
Guess the Number Game
</a>
</li>
<li>
<a href=https://www.kirupa.com/hodgepodge/fun_look_calculating_pi.htm style=background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0Y0OTAwQyIgZD0iTTcuNzI4IDMuMTMycy40MTgtMS4wMDMgMS42NjEtLjgzOGMxLjI0My4xNjUgOS42NjcgMS41OTMgMTMuNjc2IDMuNDU0IDQuMDEgMS44NiA4LjUyOSA0LjA1OSAxMS4zNTggNy4zODQuNzUuODgzLjQ0NSAxLjUyOS40NDUgMS41MjlsLTEuMDM2IDcuNDM4cy0uMyAxLjQ4OS0xLjczNyAxLjg4NkwyLjUwNyAzMi4xMzlTMSAzMi40ODMgMSAzMC45MzJ2LTcuNzY2cy4xNTItLjkzMy41MjEtMi4wMjVjLjM2OC0xLjA5NSA2LjIwNy0xOC4wMDkgNi4yMDctMTguMDA5eiIvPjxwYXRoIGZpbGw9IiNBMDA0MUUiIGQ9Ik0zMC42MDkgMjAuNTQ3Yy00LjQ0OC00LjI1OC0xNS4wMDktOS4yMTktMjIuODM0LTkuOTY1LS4yMjEtLjAxOC0uNDM1LjExNC0uNTA3LjMyOSAwIDAtNi4yNzggMTguNjEtNi4yNzggMTguOTE4IDAgLjE1LjA3LjI5My4xODcuMzg2LjA4Ni4wNjYuMTkzLjEwMi4zLjEwMi4wMzkgMCAuMDc5LS4wMDUuMTE5LS4wMTRsMjkuNDE5LTguMTE1Yy4xODYtLjA0OC4yNzktLjE1NC4zMTItLjM0NC4wNjEtLjMzMi0uMDc2LS42ODQtLjcxOC0xLjI5N3oiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNMzEuMzIzIDIxLjg3OUwxIDMwLjAyOXYtNy4xMTJTNi4zMzEgMTAuOTQyIDcuMzk3IDMuNjYyQzI0LjE0MyA2LjA4IDMyLjE0OSAxNC43NzggMzIuMTQ5IDE0Ljc3OGwtLjgyNiA3LjEwMXoiLz48cGF0aCBmaWxsPSIjQkUxOTMxIiBkPSJNOC4xODggMjUuNTMyYzAgMS40MjEtMS4xNTEgMi41NzItMi41NzMgMi41NzJzLTIuNTczLTEuMTUxLTIuNTczLTIuNTcyYzAtMS40MjIgMS4xNTEtMi41NzMgMi41NzMtMi41NzMgMS40MjEgMCAyLjU3MyAxLjE1MSAyLjU3MyAyLjU3M3ptNS00YzAgMS40MjEtMS4xNTEgMi41NzItMi41NzMgMi41NzJzLTIuNTczLTEuMTUxLTIuNTczLTIuNTcyYzAtMS40MjIgMS4xNTEtMi41NzMgMi41NzMtMi41NzMgMS40MjEgMCAyLjU3MyAxLjE1MSAyLjU3MyAyLjU3M3ptNiAxYzAgMS40MjEtMS4xNTEgMi41NzItMi41NzMgMi41NzJzLTIuNTczLTEuMTUxLTIuNTczLTIuNTcyYzAtMS40MjIgMS4xNTEtMi41NzMgMi41NzMtMi41NzMgMS40MjEgMCAyLjU3MyAxLjE1MSAyLjU3MyAyLjU3M3ptNS00YzAgMS40MjEtMS4xNTEgMi41NzItMi41NzMgMi41NzJzLTIuNTczLTEuMTUxLTIuNTczLTIuNTcyYzAtMS40MjIgMS4xNTEtMi41NzMgMi41NzMtMi41NzMgMS40MjEgMCAyLjU3MyAxLjE1MSAyLjU3MyAyLjU3M3ptNiAxYzAgMS40MjEtMS4xNTEgMi41NzItMi41NzMgMi41NzJzLTIuNTczLTEuMTUxLTIuNTczLTIuNTcyYzAtMS40MjIgMS4xNTEtMi41NzMgMi41NzMtMi41NzMgMS40MjEgMCAyLjU3MyAxLjE1MSAyLjU3MyAyLjU3M3oiLz48cGF0aCBmaWxsPSIjRjQ5MDBDIiBkPSJNMzIuMDk2IDEzLjQ5OEMyNy42NDcgOS4yNCAxNS42MDEgNC4zMjggNy43NzUgMy41ODJjLS4yMjEtLjAxOS0uNDM1LjExNC0uNTA3LjMyOSAwIDAtNC45ODIgMTMuODI3LTYuMTkzIDE3LjYyMUMuOSAyMi4wOC45OSAyMi43OS45OSAyMi44MjljMCAuMTUuMDcuMjkzLjE4Ny4zODYuMDg2LjA2Ni4xOTMuMTAyLjMuMTAyLjAzOSAwIC4wNzktLjAwNS4xMTktLjAxNGwzMC43OTctNy43NDdjLjE4Ni0uMDQ3LjMyNi0uMTk5LjM1OS0uMzg5LjA2LS4zMzEtLjAxNS0xLjA1NS0uNjU2LTEuNjY5eiIvPjxwYXRoIGZpbGw9IiNGNDkwMEMiIGQ9Ik0zMi4wOTYgMTMuNDk4QzI3LjY0NyA5LjI0IDE1LjYwMSA0LjMyOCA3Ljc3NSAzLjU4MmMtLjIyMS0uMDE5LS40MzUuMTE0LS41MDcuMzI5IDAgMC02LjI3OCAxNy42MS02LjI3OCAxNy45MTggMCAuMTUuMDcuMjkzLjE4Ny4zODYuMDg2LjA2Ni4xOTMuMTAyLjMuMTAyLjAzOSAwIC4wNzktLjAwNS4xMTktLjAxNGwzMC4xOTQtNy43MzljLjE4NS0uMDQ3LjMyNi0uMTk5LjM1OS0uMzg5LjA2LS4zMzEuNTg4LS4wNjMtLjA1My0uNjc3eiIvPjxwYXRoIGZpbGw9IiNGRkNDNEQiIGQ9Ik05LjY1IDIwLjIzOWwtMS44MzMtMi40NTYgNC40NTgtLjUyNyAxLjQzNiAxLjk0MiA1LjU4NC0xLjQzMS0uOTIyLTEuMjMyIDQuMjE4LS40OTkuNTcxLjc3MiA1LjU3MS0xLjQ1Ni0uMDI5LS4wMzkuMzI1LS4wMzggMy42MTMtLjk0NGMtLjA5OS0uMjcxLS4yNjItLjU2MS0uNTQ2LS44MzItLjYxMi0uNTg2LTEuMzgtMS4xODQtMi4yNDktMS43ODNsLTMuNTY5LjM1NS0xLjk0MS0yLjU5NSAxLjQxNi0uMTY3Yy0zLjQzNS0xLjc2MS03LjUzMS0zLjM2MS0xMS40MTUtNC40MzVsMS40MzcgMS45NDQtNC4zNDguNDMyLTEuNjctMi4yMzQgMy41MjctLjQxN2MtMS45NTEtLjQ5Ni0zLjgzLS44NTctNS41MDktMS4wMTctLjIyMS0uMDE5LS40MzUuMTE0LS41MDcuMzI5IDAgMC0xLjM3NiAzLjU4Ni0yLjc2OCA3Ljc0MWwzLjQ1My0uMjQgMS43MDkgMi4zMTEtNC41MzkuNDUxLTEuMDIyLTEuMzM5Yy0uNzIxIDIuMTU0LTEuNTY4IDQuMzYyLTIuMTUgNi4xMjRsMi4xMjQgMi43MDkgNS41NzUtMS40Mjl6bTguNjItMTAuMDQ3bDEuODQyIDIuNDkxLTQuMzAxLjQyOC0xLjgwNi0yLjQxNSA0LjI2NS0uNTA0eiIvPjxwYXRoIGZpbGw9IiNGNDkwMEMiIGQ9Ik0xMC44NjIgMTcuNDg3Yy44MDctLjIxOCAyLjQyLTEuMjM3IDQuMDEzLTEuNDU2IDEuNTk0LS4yMTkgMy41MzEuNjE3IDQuMTA4LjU0OWwyLjMxMy0uMjczYy41MTYtLjA2MSAyLjgyOS0xLjMzOCA0LjE3My0xLjUyNiAxLjM0NC0uMTg4IDMuMTQ1Ljc2MiAzLjc5MS41ODQgMCAwIC43MTguMjAzIDAgLjI5NC0uNzE4LjA5MS0yLjYwMS0uNjQ1LTMuNjQ2LS40NzItMS41MDIuMjUtMi41NzMgMS4xMTItNC4zMTggMS4zOTMtMS4wNTIuMTY5LTEuNzkyLjMwNy0yLjQyMS4zNTctMS4xNjQuMDk0LTIuNi0uNzc5LTQuMDY5LS41MjktMS40NjkuMjUtMi4yNzUgMS4yNDMtMy45NDUgMS40MDQtLjk4OS4wOTYtLjYxNi0uMTU4LjAwMS0uMzI1em0tNC4zMiAyLjk2MWMxLjE5NC0uMjc4IDIuNTctLjc0MiAzLjEwOC0uMjFMNi45NTkgMjEuMjdsLTIuODg0LjM5N2MtLjAwMS4wMDEuMDkyLS42NjYgMi40NjctMS4yMTl6bTkuODU0LTIuNTUyYzEuNDg5LS4zNTYgMi40NjQtLjQyNSAyLjg5OC0uMTI5bC0yLjcyIDEuMDI1LTIuODY0LjQwNmMuMDAxIDAgLjI0OC0uNzE5IDIuNjg2LTEuMzAyeiIvPjxwYXRoIGZpbGw9IiNGNDkwMEMiIGQ9Ik0yNS43MDggMTUuNTgzYzEuMDgyLS4yOTcgMi40NzktLjQzOCAyLjgzMy0uMzU0IDAgMCAyLjg1Ny0uNzQxIDMuOTkxLS44NzEgMCAwLTIuNjA0Ljg5MS0zLjQxMiAxLjEtLjgwOC4yMDgtNS45MDEgMS42MTYtNS45NTkgMS4zNS0uMDU3LS4yNjYuODgxLS43NjYgMi41NDctMS4yMjV6Ii8+PHBhdGggZmlsbD0iI0ZGQ0M0RCIgZD0iTTEuOTUgMTguOTU5cy0uMDc1LTEuMTk3Ljc1OC0zLjM1OSAxLjItMy4wMTcgMS4zOTItMi43NjVjLjE5Mi4yNTItLjU1OSAyLjk5OS0uODUxIDMuNjY1cy0uNzU3IDIuMDQtLjk3OSAyLjMxMmMtLjIyMS4yNzMtLjMyLjE0Ny0uMzIuMTQ3em0yLjU1LTcuMzA4cy4wNjItMS41MjYuNDM3LTIuNTg5UzUuOTg1IDcuMzggNi4wNzUgNy4xMzFjLjA5LS4yNDkuMDctMS41MDcuMzItMi4wOXMuNzU4LTEuNzExIDEuMzc5LTEuNDYtMS4zOTUgNC4zMTUtMS42MzYgNS4xMjdjLS4yNDIuODEzLTEuNjM4IDIuOTQzLTEuNjM4IDIuOTQzeiIvPjxwYXRoIGZpbGw9IiNGNDkwMEMiIGQ9Ik02Ljg2MiAxMS40ODdjLjgwNy0uMjE4IDIuNDE5LTEuMjM3IDQuMDEzLTEuNDU2IDEuNTk0LS4yMTkgMy41MzEuNjE3IDQuMTA4LjU0OWwyLjMxMy0uMjczYy41MTYtLjA2MSAyLjgyOS0xLjMzOCA0LjE3My0xLjUyNiAxLjM0NC0uMTg4IDMuMTQ1Ljc2MiAzLjc5MS41ODQgMCAwIC43MTguMjAzIDAgLjI5NC0uNzE4LjA5MS0yLjYwMS0uNjQ1LTMuNjQ2LS40NzItMS41MDIuMjUtMi41NzMgMS4xMTMtNC4zMTggMS4zOTMtMS4wNTIuMTY5LTEuNzkyLjMwNy0yLjQyMS4zNTctMS4xNjQuMDk0LTIuNi0uNzc5LTQuMDY5LS41MjktMS40NjkuMjUtMi4yNzUgMS4yNDMtMy45NDUgMS40MDQtLjk4OS4wOTYtLjYxNi0uMTU4LjAwMS0uMzI1em0xLjk4NiA2LjE3M2MtLjc1OS4wOS0xLjgwOS0uNzc1LTMuNzAzLS40MzctMS44OTUuMzM5LTMuMTk1IDEuNzM2LTMuMTk1IDEuNzM2bC4xMjIuNTczcy0uNDgtLjMzNy4xODctLjU0NGMuNjY3LS4yMDcgMS4zNjYtMS4yMzIgMi45OTEtMS40MDcgMS42MjUtLjE3NSAyLjE1Ni4zODggMy4yNS40MTkgMS4wOTQuMDMxLjM0OC0uMzQuMzQ4LS4zNHpNMjggMTUuMjM1bDEuNTc5LjA5MkwzMCAxNWwtLjI4MS44OS0xLjMxMy40MDV6TTcuMTI1IDQuNzE5YzEuNDY5LS40MDYgMi40MjYuMzIyIDMuNDg5LjE5NiAxLjA2My0uMTI2IDEuMDc4LjE2Ny4yNjEuMzM1cy0yLjg2LS41NDUtMy43MDYtLjI2OWMtLjg0Ni4yNzYtLjk4NSAxLjE1LS45ODUgMS4xNWwuMTQtLjg3NGMtLjAwMSAwLS4xNjMtLjI3Mi44MDEtLjUzOHptMS45NzEgOS4wNTljMi4wNi0uMzMgMi4yMDQtLjg0NyAzLjc0OC0xLjE1NCAxLjQwNi0uMjggMi4yODEuMzgzIDMuMDcxLjM4MyAxLjI4NCAwIC44OTItLjc4NC40Ni0uNi0uOTA2LjM4Ni0yLjczNC0uNzEyLTQuNTMxIDAtLjkxNy4zNjMtMS4zMzkuODY1LTIuNzQ4IDEuMDQyLTEuNDA4LjE3Ni0uNzM4LjQ0OCAwIC4zMjl6bTEwLjM3Mi0xLjAzMWMuODYtLjA4NSAyLjE4OC0uODgyIDMuNS0xLjA5NSAxLjMxMi0uMjE0IDIuNDg3LjUgMy4zMDkuNDE5LjgyMi0uMDgyLjk5LS41MjQuMzQ4LS40NTlzLTIuMjgxLS42NDItMy44NzUtLjMzYy0xLjU5NC4zMTItMi4yMTkuOTY5LTMuMjgyIDEuMTI1LTEuMDYyLjE1NS0uNjQ0LjQwNCAwIC4zNHpNMy4yNjIgMTQuMTkyYy43MTUtLjE4OCAxLjQ1OS4yMzYgMi4yMzktLjA1Ni43OC0uMjkyLjgzMi0uNjM2LjExNC0uNDQ4cy0xLjU1MS0uMTM1LTIuMTkyLjEybC0uMTYxLjM4NHptNS4yNjktNy4yMjNjMS4zNTUtLjA2MSAyLjEwNC4zNTggMy4wNjcuMjYyLjk2Mi0uMDk2LjU1OS0uMzQxLS4xNDQtLjMwMi0uNzA0LjA0LTEuNzIyLS40MjktMy4xODItLjE0OHMtMS4zODcuNTcyLTIuNTE3LjgxN2wtLjI1NS4zNnMuNTEtLjEwNSAxLjA4My0uMzZjLjU3My0uMjU0IDEuMi0uNTk2IDEuOTQ4LS42Mjl6bTcuMDMxLS4xMzJjLjg4Ny0uMDUzIDEuNjMzLS43MDYgMi41ODItLjc3MWwtLjU1MS0uMTlzLTEuMTI2LjU4OC0yLjAzMi42NTNjLS45MDUuMDY1LS45MzcuMzY0LjAwMS4zMDh6Ii8+PC9zdmc+)>
A Fun Look at How to Calculate the Value of Pi
</a>
</li>
<li>
<a href=https://www.kirupa.com/web/graphql_beyond_rest.htm style=background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iIzU1Mzc4OCIgZD0iTTEwIDEyYzMgNSAwIDEwLjY5Mi0zIDkuNjkycy00IDItMSAzIDkuNDY1LS40NjUgMTMtNGMxLTEgMi0xIDItMUwxMCAxMnoiLz48cGF0aCBmaWxsPSIjNTUzNzg4IiBkPSJNMjYgMTJjLTMgNSAwIDEwLjY5MiAzIDkuNjkyczQgMiAxIDMtOS40NjUtLjQ2NS0xMy00Yy0xLTEtMi0xLTItMUwyNiAxMnoiLz48cGF0aCBmaWxsPSIjNzQ0RUFBIiBkPSJNMzAuMTg4IDE2Yy0zIDUgMCAxMC42OTIgMyA5LjY5MnM0IDIgMSAzLTkuNDY1LS40NjUtMTMtNGMtMS0xLTItMS0yLTFsMTEtNy42OTJ6TTUuODEyIDE2YzMgNSAwIDEwLjY5Mi0zIDkuNjkycy00IDItMSAzIDkuNDY1LS40NjUgMTMtNGMxLTEgMi0xIDItMUw1LjgxMiAxNnoiLz48cGF0aCBmaWxsPSIjOTI2NkNDIiBkPSJNMzMuMTg4IDMxLjM3NWMtMi43MjkuOTEtNi40MjUtNS42MjYtNC44MTItMTAuNTc4QzMwLjAyMiAxNy41NTQgMzEgMTMuOTQgMzEgMTFjMC03LjE4LTUuODItMTEtMTMtMTFTNSAzLjgyIDUgMTFjMCAyLjk0Ljk3OCA2LjU1NCAyLjYyNCA5Ljc5NyAxLjYxMyA0Ljk1Mi0yLjA4MyAxMS40ODgtNC44MTIgMTAuNTc4LTMtMS00IDMtMSA0czguMzEtLjYyNyAxMi00YzIuMTg5LTIgNC4xODktMiA0LjE4OS0yczIgMCA0LjE4OCAyYzMuNjkgMy4zNzMgOSA1IDEyIDRzMS45OTktNS0xLjAwMS00eiIvPjxjaXJjbGUgZmlsbD0iIzI5MkYzMyIgY3g9IjE0IiBjeT0iMjEiIHI9IjIiLz48Y2lyY2xlIGZpbGw9IiMyOTJGMzMiIGN4PSIyMiIgY3k9IjIxIiByPSIyIi8+PC9zdmc+)>
GraphQL: Going Beyond REST APIs
</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="navigationBoxes newForum">
<ul class=oneBoxOnly>
<li>
<img loading=lazy class=fresh_caption src="data:image/webp;base64,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" width=158 height=18 alt>
<svg class=fresh_background width=176 height=18 xmlns=http://www.w3.org/2000/svg>
<path fill=var(--highlighter) d="M1.293 0H176l-2.397 18H0z" fill-rule=evenodd></path>
</svg>
<ul id=forumListing>
<li>
<a href=https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214 style=background-image:var(--sf-img-10)>Building an Awesome Todo List App</a>
</li>
<li>
<a href=https://forum.kirupa.com/t/creating-a-strobe-light-generator/352252 style=background-image:var(--sf-img-10)>Creating a Strobe Light Generator</a>
</li>
<li>
<a href=https://forum.kirupa.com/t/playing-a-randomly-generated-sound/653883 style=background-image:var(--sf-img-11)>Playing a Randomly Generated Sound</a>
</li>
<li>
<a href=https://forum.kirupa.com/t/from-coding-exercises-to-coding-missions/653577 style=background-image:var(--sf-img-11)>From Coding Exercises to Coding Missions!</a>
</li>
<li>
<a href=https://forum.kirupa.com/t/the-devowelizer-coding-exercise/360797 style=background-image:var(--sf-img-10)>The Devowelizer Coding Exercise</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<template id=topicRow class=sf-hidden>
<li>
<a href="#">Test</a>
</li>
</template>
<div class=horizontal_line></div>
<div id=sigNewsletter>
<div class=newsletterContainer>
<h4>The KIRUPA Newsletter</h4>
<p>Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over <strong>100,000</strong> subscribers!</p>
<p>
<a href=https://kirupa.substack.com/ class=greenButton>SUBSCRIBE NOW</a>
</p>
</div>
</div>
<div class=horizontal_line></div>
<div id=mainFooter>
<p>Serving you freshly baked content since 1998!<br>
<a rel=noopener href=https://mediatemple.net/ target=_blank>Killer hosting by (mt) mediatemple</a>
</p>
<div>
<a rel=noopener href="https://twitter.com/intent/user?screen_name=kirupa" target=_blank><img loading=lazy width=20 height=20 src="data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIwIDIwIj4KPGRlZnM+CjxnIGlkPSJMYXllcjBfMF9GSUxMIj4KPHBhdGggZmlsbD0iIzMzMzMzMyIgc3Ryb2tlPSJub25lIiBkPSIKTSAxNy4zIDYuMjUKUSAxOC40IDUuNTUgMTkuMTUgNC4zIDE4LjIgNC43NSAxNyA0LjkgMTguMjUgNC4yIDE4LjY1IDIuOCAxNy42NSAzLjQ1IDE2LjI1IDMuNzUgMTUuMiAyLjU1IDEzLjUgMi41NSAxMS45NSAyLjU1IDEwLjg1IDMuNjUgOS43NSA0Ljc1IDkuNzUgNi4zIDkuNzUgNi45IDkuODUgNy4yIDUuMDUgNi45IDIuMDUgMy4yNSAxLjU1IDQuMTUgMS41NSA1LjE1IDEuNTUgNy4xNSAzLjIgOC4zIDIuMiA4LjIgMS41IDcuOApMIDEuNSA3Ljg1ClEgMS41IDkuMjUgMi4zNSAxMC4yNSAzLjI1IDExLjMgNC41NSAxMS41NSA0LjEgMTEuNyAzLjU1IDExLjcKTCAyLjg1IDExLjYKUSAzLjIgMTIuNzUgNC4xNSAxMy40NSA1LjEgMTQuMiA2LjM1IDE0LjI1IDQuMjUgMTUuODUgMS42NSAxNS44NSAxLjA1IDE1Ljg1IDAuNzUgMTUuOCAzLjQgMTcuNSA2LjU1IDE3LjUgMTEuNDUgMTcuNSAxNC41NSAxNCAxNy4zIDEwLjg1IDE3LjMgNi43NQpMIDE3LjMgNi4yNSBaIi8+CjwvZz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDAuODY5NTY3ODcxMDkzNzUsIDAsIDAsIDAuODY5NTY3ODcxMDkzNzUsIDEuMzUsMS44KSAiPgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjBfMF9GSUxMIi8+CjwvZz4KPC9zdmc+Cg==" alt=Twitter></a>
<a rel=noopener href=https://www.youtube.com/user/kirupa target=_blank><img loading=lazy width=20 height=20 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IllvdXR1YmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMCwyLjNDMC4xNzIsMi4zLDAsMy4xNzQsMCwxMHMwLjE3Miw3LjcsMTAsNy43czEwLTAuODc0LDEwLTcuN1MxOS44MjgsMi4zLDEwLDIuM3ogTTEzLjIwNSwxMC4zMzRsLTQuNDksMi4wOTYNCglDOC4zMjIsMTIuNjEyLDgsMTIuNDA4LDgsMTEuOTc0VjguMDI2QzgsNy41OTMsOC4zMjIsNy4zODgsOC43MTUsNy41N2w0LjQ5LDIuMDk2QzEzLjU5OCw5Ljg1LDEzLjU5OCwxMC4xNSwxMy4yMDUsMTAuMzM0eiIvPg0KPC9zdmc+DQo=" alt=Youtube></a>
<a rel=noopener href=https://www.facebook.com/kirupa target=_blank><img loading=lazy width=20 height=20 src="data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIwIDIwIj4KPGRlZnM+CjxnIGlkPSJMYXllcjBfMF9GSUxMIj4KPHBhdGggZmlsbD0iIzMzMzMzMyIgc3Ryb2tlPSJub25lIiBkPSIKTSAxOC40IDEuNgpRIDE3Ljg1IDEgMTcgMQpMIDMgMQpRIDIuMTUgMSAxLjU1IDEuNiAxIDIuMTUgMSAzCkwgMSAxNwpRIDEgMTcuODUgMS41NSAxOC40NSAyLjE1IDE5IDMgMTkKTCAxMCAxOSAxMCAxMiA4IDEyIDggOS41NSAxMCA5LjU1IDEwIDcuNQpRIDEwIDUuOCAxMC45IDQuODUgMTEuOSAzLjggMTMuNzUgMy44CkwgMTUuNTUgMy44IDE1LjU1IDYuNCAxNC4zNSA2LjQKUSAxMyA2LjQgMTMgNy44NQpMIDEzIDkuNTUgMTUuNTUgOS41NSAxNSAxMiAxMyAxMiAxMyAxOSAxNyAxOQpRIDE3Ljg1IDE5IDE4LjQgMTguNDUgMTkgMTcuODUgMTkgMTcKTCAxOSAzClEgMTkgMi4yIDE4LjQgMS42IFoiLz4KPC9nPgo8L2RlZnM+Cgo8ZyB0cmFuc2Zvcm09Im1hdHJpeCggMC44ODg4ODU0OTgwNDY4NzUsIDAsIDAsIDAuODg4ODg1NDk4MDQ2ODc1LCAxLjEsMS4xKSAiPgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjBfMF9GSUxMIi8+CjwvZz4KPC9zdmc+Cg==" alt=Facebook></a>
<a rel=noopener href=https://www.pinterest.com/kirupa/ target=_blank><img loading=lazy width=20 height=20 src=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlBpbnRlcmVzdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTguNjE3LDEzLjIyN0M4LjA5MSwxNS45ODEsNy40NSwxOC42MjEsNS41NDksMjBDNC45NjMsMTUuODM4LDYuNDEsMTIuNzEzLDcuMDgzLDkuMzk1DQoJYy0xLjE0Ny0xLjkzLDAuMTM4LTUuODEyLDIuNTU1LTQuODU1YzIuOTc1LDEuMTc2LTIuNTc2LDcuMTcyLDEuMTUsNy45MjJjMy44OTEsMC43ODEsNS40NzktNi43NSwzLjA2Ni05LjE5OQ0KCUMxMC4zNjktMC4yNzUsMy43MDgsMy4xOCw0LjUyOCw4LjI0NWMwLjE5OSwxLjIzOCwxLjQ3OCwxLjYxMywwLjUxMSwzLjMyMmMtMi4yMzEtMC40OTQtMi44OTctMi4yNTQtMi44MTEtNC42DQoJYzAuMTM4LTMuODQsMy40NDktNi41MjcsNi43NzEtNi45YzQuMjAxLTAuNDcxLDguMTQ0LDEuNTQzLDguNjg5LDUuNDk0YzAuNjEzLDQuNDYxLTEuODk2LDkuMjkzLTYuMzg5LDguOTQ1DQoJQzEwLjA4MSwxNC40MTEsOS41NzEsMTMuODA3LDguNjE3LDEzLjIyN3oiLz4NCjwvc3ZnPg0K alt=Pinterest></a>
<a rel=noopener href=https://www.instagram.com/kirupac/ target=_blank><img loading=lazy width=20 height=20 src="data:image/svg+xml;base64,PHN2ZyBpZD0iSW5zdGFncmFtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+PHRpdGxlPmluc3RhZ3JhbTwvdGl0bGU+PHBhdGggZD0iTTE4Ljk0NTg2LDYuMjg5MzFhNi42MDU2MSw2LjYwNTYxLDAsMCwwLS40MTgzMy0yLjE4NDYzLDQuNDExODksNC40MTE4OSwwLDAsMC0xLjAzODA5LTEuNTk0MTIsNC40MTE4OSw0LjQxMTg5LDAsMCwwLTEuNTk0MTItMS4wMzgwOSw2LjYwNTYxLDYuNjA1NjEsMCwwLDAtMi4xODQ2My0uNDE4MzNDMTIuNzUwNzMsMS4wMTAzOCwxMi40NDQyNywxLDEwLDFzLTIuNzUwNzMuMDEwMzgtMy43MTA2OSwwLjA1NDE0YTYuNjA1NjEsNi42MDU2MSwwLDAsMC0yLjE4NDYzLjQxODMzQTQuNDExODksNC40MTE4OSwwLDAsMCwyLjUxMDU2LDIuNTEwNTYsNC40MTE4OSw0LjQxMTg5LDAsMCwwLDEuNDcyNDcsNC4xMDQ2OGE2LjYwNTYxLDYuNjA1NjEsMCwwLDAtLjQxODMzLDIuMTg0NjNDMS4wMTAzOCw3LjI0OTI3LDEsNy41NTU3MywxLDEwczAuMDEwMzgsMi43NTA3My4wNTQxNCwzLjcxMDY5YTYuNjA1NjEsNi42MDU2MSwwLDAsMCwuNDE4MzMsMi4xODQ2Myw0LjQxMTg5LDQuNDExODksMCwwLDAsMS4wMzgwOSwxLjU5NDEyLDQuNDExMDksNC40MTEwOSwwLDAsMCwxLjU5NDEyLDEuMDM4MDksNi42MDU2MSw2LjYwNTYxLDAsMCwwLDIuMTg0NjMuNDE4MzNDNy4yNDkyNywxOC45ODk2OSw3LjU1NTczLDE5LDEwLDE5czIuNzUwNzMtLjAxMDMxLDMuNzEwNjktMC4wNTQxNGE2LjYwNTYxLDYuNjA1NjEsMCwwLDAsMi4xODQ2My0uNDE4MzMsNC42MDIwOCw0LjYwMjA4LDAsMCwwLDIuNjMyMi0yLjYzMjIsNi42MDU2MSw2LjYwNTYxLDAsMCwwLC40MTgzMy0yLjE4NDYzQzE4Ljk4OTYyLDEyLjc1MDczLDE5LDEyLjQ0NDI3LDE5LDEwUzE4Ljk4OTYyLDcuMjQ5MjcsMTguOTQ1ODYsNi4yODkzMVptLTEuNjE5OTMsNy4zNDc0N2E0Ljk3ODI0LDQuOTc4MjQsMCwwLDEtLjMwOTk0LDEuNjcxMTRBMi45ODAxNywyLjk4MDE3LDAsMCwxLDE1LjMwNzkyLDE3LjAxNmE0Ljk3ODYsNC45Nzg2LDAsMCwxLTEuNjcxMTQuMzA5OTRDMTIuNjg3ODcsMTcuMzY5MiwxMi40MDMyNiwxNy4zNzgzNiwxMCwxNy4zNzgzNnMtMi42ODc4Ny0uMDA5MTYtMy42MzY3OC0wLjA1MjQzQTQuOTc4Niw0Ljk3ODYsMCwwLDEsNC42OTIwOCwxNy4wMTZhMi43ODc2OSwyLjc4NzY5LDAsMCwxLTEuMDM0ODUtLjY3MzIyQTIuNzg3NjksMi43ODc2OSwwLDAsMSwyLjk4NCwxNS4zMDc5MmE0Ljk3ODI0LDQuOTc4MjQsMCwwLDEtLjMwOTk0LTEuNjcxMTRDMi42MzA4LDEyLjY4Nzc0LDIuNjIxNjQsMTIuNDAzMTQsMi42MjE2NCwxMHMwLjAwOTE2LTIuNjg3NzQuMDUyNDMtMy42MzY3OEE0Ljk3ODYsNC45Nzg2LDAsMCwxLDIuOTg0LDQuNjkyMDhhMi43ODc2OSwyLjc4NzY5LDAsMCwxLC42NzMyMi0xLjAzNDg1QTIuNzg3NjksMi43ODc2OSwwLDAsMSw0LjY5MjA4LDIuOTg0YTQuOTc4Niw0Ljk3ODYsMCwwLDEsMS42NzExNC0uMzA5OTRDNy4zMTIyNiwyLjYzMDgsNy41OTY4NiwyLjYyMTY0LDEwLDIuNjIxNjRzMi42ODc3NCwwLjAwOTE2LDMuNjM2NzguMDUyNDNhNC45Nzg2LDQuOTc4NiwwLDAsMSwxLjY3MTE0LjMwOTk0LDIuNzg3NjksMi43ODc2OSwwLDAsMSwxLjAzNDg1LjY3MzIyQTIuNzg3NjksMi43ODc2OSwwLDAsMSwxNy4wMTYsNC42OTIwOGE0Ljk3ODYsNC45Nzg2LDAsMCwxLC4zMDk5NCwxLjY3MTE0YzAuMDQzMjcsMC45NDkuMDUyNDMsMS4yMzM3LDAuMDUyNDMsMy42MzY3OFMxNy4zNjkyLDEyLjY4Nzc0LDE3LjMyNTkzLDEzLjYzNjc4Wk0xMCw1LjM3ODM2QTQuNjIxNjQsNC42MjE2NCwwLDEsMCwxNC42MjE2NCwxMCw0LjYyMTY5LDQuNjIxNjksMCwwLDAsMTAsNS4zNzgzNlpNMTAsMTNhMywzLDAsMSwxLDMtM0EzLDMsMCwwLDEsMTAsMTNabTUuODg0MjItNy44MDQyYTEuMDgsMS4wOCwwLDEsMS0xLjA4LTEuMDhBMS4wOCwxLjA4LDAsMCwxLDE1Ljg4NDIyLDUuMTk1OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xIC0xKSIvPjwvc3ZnPg==" alt=Instagram></a>
<a rel=noopener href=https://github.com/kirupa/kirupa target=_blank><img loading=lazy width=20 height=20 src=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkdpdGh1YiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTEzLjE4LDExLjMwOWMtMC43MTgsMC0xLjMsMC44MDctMS4zLDEuNzk5YzAsMC45OTQsMC41ODIsMS44MDEsMS4zLDEuODAxczEuMy0wLjgwNywxLjMtMS44MDENCglDMTQuNDc5LDEyLjExNiwxMy44OTgsMTEuMzA5LDEzLjE4LDExLjMwOXogTTE3LjcwNiw2LjYyNmMwLjE0OS0wLjM2NSwwLjE1NS0yLjQzOS0wLjYzNS00LjQyNmMwLDAtMS44MTEsMC4xOTktNC41NTEsMi4wOA0KCWMtMC41NzUtMC4xNi0xLjU0OC0wLjIzOC0yLjUxOS0wLjIzOGMtMC45NzMsMC0xLjk0NSwwLjA3OC0yLjUyLDAuMjM4QzQuNzQsMi4zOTksMi45MjksMi4yLDIuOTI5LDIuMg0KCUMyLjE0LDQuMTg3LDIuMTQ4LDYuMjYxLDIuMjk1LDYuNjI2QzEuMzY3LDcuNjM0LDAuOCw4Ljg0NSwwLjgsMTAuNDk3YzAsNy4xODYsNS45NjMsNy4zMDEsNy40NjcsNy4zMDENCgljMC4zNDIsMCwxLjAxOCwwLjAwMiwxLjczNCwwLjAwMmMwLjcxNSwwLDEuMzkyLTAuMDAyLDEuNzMyLTAuMDAyYzEuNTA2LDAsNy40NjctMC4xMTUsNy40NjctNy4zMDENCglDMTkuMiw4Ljg0NSwxOC42MzQsNy42MzQsMTcuNzA2LDYuNjI2eiBNMTAuMDI4LDE2LjkxNUg5Ljk3MmMtMy43NzEsMC02LjcwOS0wLjQ0OS02LjcwOS00LjExNWMwLTAuODc5LDAuMzEtMS42OTMsMS4wNDctMi4zNjkNCgljMS4yMjctMS4xMjcsMy4zMDUtMC41MzEsNS42NjItMC41MzFjMC4wMSwwLDAuMDIsMCwwLjAyOSwwYzAuMDEsMCwwLjAxOCwwLDAuMDI3LDBjMi4zNTcsMCw0LjQzNi0wLjU5Niw1LjY2NCwwLjUzMQ0KCWMwLjczNSwwLjY3NiwxLjA0NSwxLjQ5LDEuMDQ1LDIuMzY5QzE2LjczNywxNi40NjYsMTMuOCwxNi45MTUsMTAuMDI4LDE2LjkxNXogTTYuODIxLDExLjMwOWMtMC43MTgsMC0xLjMsMC44MDctMS4zLDEuNzk5DQoJYzAsMC45OTQsMC41ODIsMS44MDEsMS4zLDEuODAxYzAuNzE5LDAsMS4zMDEtMC44MDcsMS4zMDEtMS44MDFDOC4xMjIsMTIuMTE2LDcuNTQsMTEuMzA5LDYuODIxLDExLjMwOXoiLz4NCjwvc3ZnPg0K alt=Github></a>
</div>
</div>
<div id=scriptContainer></div>
<style class=sf-hidden>.DocSearch-Button{background:none;width:20px;margin:0;padding:0}.DocSearch-Button-Container{margin-top:5px}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:none;box-shadow:none;color:var(--docsearch-text-color);outline:none}</style>