/
open-in-web-browser.html
5434 lines (5425 loc) · 303 KB
/
open-in-web-browser.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
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!</title>
<meta name="description" content="This is a guide that everyone can use to learn about the practice of front-end development.">
<meta property="og:type" content="website">
<meta property="og:title" content="Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!">
<meta name="twitter:title" content="Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!">
<meta property="og:description" content="A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.">
<meta name="twitter:description" content="A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.">
<meta property="og:determiner" content="the">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://frontendmasters.com/books/front-end-handbook/2019/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@frontendmasters">
<meta property="og:image" content="https://frontendmasters.com/books/front-end-handbook/2019/assets/images/FM_2019Cover_small.jpg">
<meta name="twitter:image" content="https://frontendmasters.com/books/front-end-handbook/2019/assets/images/FM_2019Cover_small.jpg">
<link rel="canonical" href="https://frontendmasters.com/books/front-end-handbook/2019/">
<link rel="stylesheet" href="assets/reset.css" />
<link rel="stylesheet" href="assets/styles.css" />
<link rel="stylesheet" href="assets/prism.css" />
<script src="assets/prism.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11649917-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-11649917-2');
</script>
</head>
<body>
<div id="menu">
<div id="toc"></div>
</div>
<div id="panel">
<div class="FmCta">
<a class="FmCtaLogo" href="https://frontendmasters.com/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.7 145.8" class="logo"><path d="M182.6 20c1.7-1.8 4.2-2.7 7.7-2.7 2.5 0 5 .4 7.4 1.1 3.2 1 6.2 2.3 9 4a335.5 335.5 0 0 0-14.8 49.7 357 357 0 0 0-4.6 24c-1 6.3-1.6 12.8-1.7 19.3 0 2.2.3 4.5 1 6.6a8 8 0 0 0 2.7 4.2 16.1 16.1 0 0 1-7.1 5.2 23.5 23.5 0 0 1-8.7 1.7c-4 .1-7.7-1.2-10.6-3.8-3-2.5-4.4-6.8-4.4-13 0-3 .4-6 .8-9.1a492 492 0 0 1 10.8-47.4l-1.3.1c-.4.2-.7.5-1 .9l-40.6 62a40.8 40.8 0 0 1-13 2.5c-2.4 0-4.8-.5-7-1.5a9.1 9.1 0 0 1-4.3-5.4 273.5 273.5 0 0 0 1.8-21.5 949 949 0 0 0 1.4-29.6v-5.9c0-.6-.2-1.1-.4-1.6a1.3 1.3 0 0 0-1.1-.4c-9 16.2-16.7 29.8-23.3 40.8a307.2 307.2 0 0 1-17.8 27A69 69 0 0 1 50 141.2c-4.1 3-8.1 4.5-12 4.4-4.2.1-8.2-1.6-11-4.7-3-3.1-5-7.4-6-12.8.7.2 1.4.3 2.2.3 4.7 0 9.3-2 13.7-6 5.1-4.5 9.7-9.7 13.7-15.3 4.7-6.4 9.5-13.7 14.4-21.8C69.9 77.3 75 69 80.7 60.6c2-3.4 4.6-6.6 7.5-9.4 2.2-2 5-3.1 8-3 2 0 4 .3 5.9.8 1.1.1 2.1-.7 2.1-1.9-.7-9-3.4-15.8-8-20.6-4.7-4.7-11.3-7-19.8-7-6.9-.1-13.6 1.6-19.6 4.8-6.1 3.3-11.5 7.7-15.9 13a64 64 0 0 0-14.5 40.5c0 5.1 1.6 8.5 4.7 10a20.6 20.6 0 0 1-6.9 6 17.5 17.5 0 0 1-8.4 2.2c-4.2.1-8.2-1.4-11.2-4.3S0 84.2 0 77.9c0-7 1.1-13.8 3.4-20.4A79.4 79.4 0 0 1 26.6 23a96.9 96.9 0 0 1 36-20.3C69.2 1 75.7 0 82.5 0c16.2 0 28.5 5 36.6 15.1 8.2 10 12.3 25.8 12.3 47.1a308.6 308.6 0 0 1-1 26.3c.5 0 1 0 1.4-.2.4-.2.7-.5.8-.8l15-21.9h-.1c5.1-7.2 23.7-34.6 28.8-41.9.2-.4 1.6-2.8 3.2-3.2h.4l1.2-.1h.2a5.8 5.8 0 0 0 1.4-.3z"></path></svg>
</a>
<div class="FmCtaText">
<a href="https://frontendmasters.com/trial/">Get free, lifetime access to 5 popular courses</a>
</div>
<button data-cta-close class="FmCtaClose">×</button>
</div>
<div id="menuButton">
|||
</div>
<div id="bookPadding">
<p><img alt="Front End Developers Handbook 2019 Cover" src="./assets/images/FM_2019Cover_final.jpg"></p>
<h1>Front-end Developer Handbook 2019</h1>
<h3 style="margin-top:0px"><a id="Written_by_Cody_Lindleyhttpcodylindleycom_3"></a>Written by <a href="http://codylindley.com/">Cody Lindley</a></h3>
<section>
<p><em>Sponsored by <a href="https://frontendmasters.com/">Frontend Masters</a>, advancing your skills with in-depth, modern front-end engineering courses</em></p>
</section>
<p>Download: <a href="https://github.com/FrontendMasters/front-end-handbook-2019/raw/master/exports/Front-end%20Developer%20Handbook%202019.pdf">PDF</a> | <a href="https://github.com/FrontendMasters/front-end-handbook-2019/raw/master/exports/Front-End%20Developer%20Handbook%202019.epub">epub</a></p>
<hr>
<h3>Overview:</h3>
<p>This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.</p>
<p>It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.</p>
<p>The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering to a problem.</p>
<p>The book should not be considered a comprehensive outline of all resources available to a front-end developer. The value of the book is tied up in a terse, focused, and timely curation of just enough categorical information so as not to overwhelm anyone on any one particular subject matter.</p>
<p>The intention is to release an update to the content yearly. This is currently the fourth year an edition has been released.</p>
<hr>
<p><strong>What is in this Handbook</strong>:</p>
<p>Chapter <a href="#0">0</a> provides a lite recap of the year in front-end development and what may be to come. Chapter <a href="#1">1</a> & <a href="#2">2</a> aim to give a brief overview of the discipline and practice of front-end development. Chapters <a href="#3">3</a> & <a href="#4">4</a> organize and recommend learning paths and resources. Chapter <a href="#5">5</a> organizes and list the tools used by front-end developers and Chapter <a href="#6">6</a> highlights front-end information outlets.</p>
<hr>
<p><strong>Contribute content, suggestions, and fixes on github</strong>:</p>
<p><a href="https://github.com/FrontendMasters/front-end-handbook-2019">https://github.com/FrontendMasters/front-end-handbook-2019</a></p>
<hr>
<div class="chapter" id="chapter0">
<h2>Chapter 0. Recap of 2018 and Looking Forward</h2>
<h3>0.1 — Recap of Front-end Development in 2018</h3>
<ul>
<li>React had several notable releases this past year that included, <a href="https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes">lifecycle methods</a>, <a href="https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-context-api">context API</a>, <a href="https://reactjs.org/docs/react-api.html#reactsuspense">suspense</a>, and <a href="https://reactjs.org/docs/hooks-intro.html">React hooks</a>.
</li>
<li>
<a href="https://news.microsoft.com/2018/06/04/microsoft-to-acquire-github-for-7-5-billion/">Microsoft buys Github</a>. Yeah, that happened.
</li>
<li>Fonts created by CSS became a <a href="https://yusugomori.com/projects/css-sans/">thing</a>.
</li>
<li>What I used to call front-end driven apps, gets labeled <a href="https://thepowerofserverless.info/">"serverless"</a>. Unfortunately, this term is <a href="https://www.jeremydaly.com/stop-calling-everything-serverless/">overloaded</a>. However, the term <a href="https://jamstack.org/">JAMstack</a> does seem to be <a href="https://jamstackconf.com/nyc/">resonating</a> with developers.
</li>
<li>Google offered some neat tools this year to help make webpages load faster, i.e. <a href="https://github.com/GoogleChromeLabs/squoosh/">squoosh</a> and <a href="https://github.com/GoogleChromeLabs/quicklink">quicklink</a>.
</li>
<li>
<a href="https://risingstars.js.org/2018/en/#section-framework">Vue gets</a> more <a href="https://hasvuepassedreactyet.surge.sh/">Github stars</a> than React this year. But React remains dominant in <a href="https://2018.stateofjs.com/front-end-frameworks/overview/">terms</a> of <a href="https://www.npmjs.com/browse/depended">use</a>.
</li>
<li>A solution similar to React, without a virtual DOM or JSX, is introduced <a href="https://github.com/redom/redom">RE:DOM</a>.
</li>
<li>Alternatives to NW.js and Electron show up, <a href="https://deskgap.com/">DeskGap</a> and <a href="https://neutralino.js.org/">Neutralino.js</a>.
</li>
<li>In 2017 the <a href="https://medium.com/@jerrylowm/the-death-of-front-end-developers-803a95e0f411" target="_blank">great</a> divide between a <a href="https://medium.com/@mandy.michael/is-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06">front-end HTML & CSS developer</a> v.s. <a href="https://medium.com/@mandy.michael/is-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06" target="_blank">front-end application developer is realized/verbalized</a>. In 2018 that <a href="https://css-tricks.com/the-great-divide/">divide has grown wider and deeper</a> and more <a href="https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/">people</a> start to <a href="https://hackernoon.com/the-backendification-of-frontend-development-62f218a773d4">feel</a> <a href="http://bradfrost.com/blog/post/big-ol-ball-o-javascript/">the</a> <a href="https://justmarkup.com/log/2018/11/just-markup/">divide</a>.
</li>
<li>This year, like most recent years, was stock full of app/framework solutions trying to contend with the mainstream JavaScript app tools (i.e. <a href="https://stateofjs.com/2017/front-end/results" target="_blank">React, Angular, and Vue etc...</a>) Let me list them for you. <a href="https://radi.js.org/">Radi.js</a>, <a href="https://display.js.org/">DisplayJS</a>, <a href="https://stimulusjs.org/">Stimulus</a>, <a href="https://github.com/Tencent/omi">Omi</a>, <a href="https://quasar-framework.org">Quasar</a>.
</li>
<li>JavaScript frameworks start offering their own languages that compile to JavaScript (e.g. <a href="https://www.mint-lang.com/">Mint</a>).
</li>
<li>
<a href="https://codesandbox.io/" target="_blank">CodeSandbox</a> evolves to become the dominant solution for online code sharing.
</li>
<li>
<a href="https://cssgridgarden.com/">CSS Grid</a> and <a href="https://flexboxfroggy.com/">CSS Flexbox</a> are fully supported in modern browsers and get taken for some serious rides. But many are left <a href="https://www.youtube.com/watch?v=hs3piaN4b5I">wondering</a> when to <a href="https://css-irl.info/to-grid-or-to-flex/">use which one and how</a>.
</li>
<li>
Many realize the long terms costs of bolted on type systems (e.g. TypeScript and Flow). Some concluded bolted on systems are not unlike bolted on module systems (i.e. AMD/Require.js) and come with <a href="https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b">more issues than solutions</a>. Minimally, many developers realize that if types are needed in large code bases, that bolted on systems are not ideal in comparison to languages that have them baked in (e.g. <a href="https://reasonml.github.io/">Reason</a>, <a href="http://www.purescript.org/">Purescript</a>, <a href="https://elm-lang.org/">Elm</a>).
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a> gain <a href="https://caniuse.com/#feat=css-variables">browser support</a> among modern web browsers
</li>
<li>The flavors of <a href="http://michelebertoli.github.io/css-in-js/">CSS in JS</a> exploded and <a href="http://bradfrost.com/blog/link/whats-wrong-with-css-in-js/">some</a> question the practice.
</li>
<li>
<a href="https://caniuse.com/#search=modules">ES modules</a> are now usable in modern browsers and <a href="https://developers.google.com/web/updates/2017/11/dynamic-import#dynamic">dynamic imports</a> are close behind. We are even seeing a shift in <a href="https://www.pikapkg.com/blog/introducing-pika-pack/">tooling</a> around this fact.
</li>
<li>Many realize that end to end testing is the starting point of doing tests correctly in large part due to <a href="https://www.cypress.io/how-it-works/" target="_blank">Cypress</a> (i.e. Cypress first, then <a href="https://jestjs.io/">Jest</a>).
</li>
<li>While <a href="https://webpack.js.org/" target="_blank">Webpack</a> was heavily used again this year, many developers found <a href="https://github.com/parcel-bundler/parcel" target="_blank">Parcel</a> to be easier to get up and running.
</li>
<li>One of the most important questions asked this year was, what is the <a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">cost of JavaScript</a>.
</li>
<li>
<a href="https://babeljs.io/blog/2018/08/27/7.0.0">Babel 7 was released this year</a>. That's a big deal because the last major release was almost three years ago.
</li>
<li>The reality of too much JavaScript change too fast is realized and people start <a href="https://www.robinwieruch.de/javascript-fundamentals-react-requirements/">talking</a> about what you need to know before you can even learn something like React. The fight is real.
</li>
<li>Most developers found GraphQL, via <a href="https://www.apollographql.com/">Apollo</a>, and <a href="https://blog.bitsrc.io/why-does-everyone-love-graphql-17de7f99f05a">see it</a> as the next evolution for data API's.
</li>
<li>Gulp and friends definitely took a back seat to <a href="https://css-tricks.com/why-npm-scripts/">NPM/Yarn run</a>. But this did not stop Microsoft from getting in the game with <a href="https://github.com/Microsoft/just">Just</a>.
</li>
<li>This year, one can not only lint/hint HTML, CSS, and JavaScript they can <a href="https://webhint.io">lint/hint the web</a> itself.
</li>
<li>The <a href="https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results">2018 Front-End Tooling survey</a> is worth reading if only to realize just how much jQuery is still used.
</li>
<li>It <a href="https://2018.stateofjs.com/javascript-flavors/typescript/">can't be denied</a> <a href="https://www.typescriptlang.org/">TypeScript</a> gained a lot of users this year.
</li>
<li>
<a href="https://code.visualstudio.com/">VScode</a>, <a href="https://triplebyte.com/blog/editor-report-the-rise-of-visual-studio-code">dominates</a> as the code editor of choice.
</li>
</ul>
<h3>0.2 — In 2019, Expect...</h3>
<ul>
<li>Hopefully, more of this to come. "<a href="https://cathydutton.co.uk/posts/why-i-stopped-using-sass/">Stepping away from Sass</a>".
</li>
<li>Still a good idea to keep an eye on and learn about the up coming additions (and potential additions) to CSS via <a href="https://cssdb.org/">https://cssdb.org</a>
</li>
<li>The <a href="https://developers.google.com/speed/webp/">WebP</a> image format from Google could reach <a href="https://caniuse.com/#feat=webp">support from all modern browsers this year</a>.
</li>
<li>
<a href="https://prepack.io/">Prepack</a> will continue to cook.
</li>
<li>
<a href="https://graphql.org/">GraphQL</a> will continue to gain massive adoption.
</li>
<li>The, "<a href="https://stateofjs.com/">State of JavaScript</a>" survey authors will add a "<a href="https://stateofcss.com/">State of CSS</a>" survey in 2019.
</li>
<li>Keep an eye on <a href="https://caniuse.com/#feat=web-animation">Web Animations API</a>.
</li>
<li>Someone you know will try and convince you to use <a href="https://www.typescriptlang.org/">TypeScript</a>.
</li>
<li>Babel will get some competition from <a href="https://github.com/swc-project/swc">swc-project</a>.
</li>
<li>The case for, <a href="https://jamstack.org/">JAMStack</a>'s will <a href="https://jamstackconf.com/nyc/">continue</a>.
</li>
<li>
<a href="https://quasar-framework.org">Chasing the one code base to many platforms will continue.</a>
</li>
<li>More developers will turn to languages like <a href="https://www.imaginarycloud.com/blog/reasonml-react-as-first-intended/">ReasonML</a> over JavaScript/TypeScript for large code bases.
</li>
<li>More, <a href="https://github.com/twbs/bootstrap/pull/23586">largely used projects</a> will start to shed jQuery in favor of native DOM solutions.
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</a>! At this point, I have no idea how Web Components will play out. Reality is they are not going away, and they have not gained a lot of momentum/usage once the hype ended.
</li>
</ul>
</div>
<hr>
<div class="chapter" id="chapter1">
<h2>Chapter 1. What Is a Front-end Developer?</h2>
<section class="sub">
<p>This chapter provides a baseline explanation for front-end development and the front-end developer discipline.</p>
</section>
<blockquote>
<p>Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.</p>
<p>The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.</p>
<p><cite><a href="https://en.wikipedia.org/wiki/Front-end_web_development" target="_blank">https://en.wikipedia.org/wiki/Front-end_web_development</a></cite></p>
</blockquote>
<p><img alt="" src="./assets/images/what-is-front-end-dev.png" title="https://www.upwork.com/hiring/development/front-end-developer/"> <cite>Image source: <a href="https://www.upwork.com/hiring/development/front-end-developer/" target="_blank">https://www.upwork.com/hiring/development/front-end-developer/</a></cite></p>
<h4 id="html-css--javascript">A Front-end Developer...</h4>
<p>A front-end developer architects and develops websites and web applications using web technologies (i.e., <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">JavaScript</a>), which typically runs on the <a href="https://en.wikipedia.org/wiki/Open_Web_Platform" target="_blank">Open Web Platform</a> or acts as compilation input for non-web platform environments (i.e., <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>).</p>
<p>A person enters into the field of front-end development by learning to build a website or web application which relies on HTML, CSS, and JavaScript and commonly runs in a <a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank">web browser</a> but can also run in a <a href="https://en.wikipedia.org/wiki/Headless_browser" target="_blank">headless browser</a>, <a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">WebView</a>, or as compilation input for a native runtime environment. These four run times scenarios are explained below.</p>
<p><strong>Web Browsers (most common)</strong></p>
<p>A web browser is software used to retrieve, present, and traverse information on the <a href="https://en.wikipedia.org/wiki/World_Wide_Web" target="_blank">WWW</a>. Typically, browsers run on a desktop or laptop computer, tablet, or phone, but as of late a browser can be found on just about anything (i.e, on a fridge, in cars, etc.).</p>
<p>The most common web browsers are (shown in order of <a href="https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tables" target="_blank">most used first</a>):</p>
<ul>
<li>
<a href="http://www.google.com/chrome/" target="_blank">Chrome</a>
</li>
<li>
<a href="http://www.apple.com/safari/" target="_blank">Safari</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Internet_Explorer" target="_blank">Internet Explorer</a> (Note: not <a href="http://dev.modern.ie/" target="_blank">Edge</a>, referring to IE 9 to IE 11)
</li>
<li>
<a href="https://www.mozilla.org/firefox/" target="_blank">Firefox</a>
</li>
<li>
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">Edge</a>
</li>
</ul>
<p><strong>Headless Browsers</strong></p>
<p>Headless browsers are a web browser <strong>without</strong> a graphical user interface that can be controlled from a command line interface programmatically for the purpose of web page automation (e.g., functional testing, scraping, unit testing, etc.). Think of headless browsers as a browser that you can run programmatically from the command line that can retrieve and traverse web page code.</p>
<p>The most common headless browsers are:</p>
<ul>
<li>
<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank">Headless Chromium</a>
</li>
<li>
<a href="https://github.com/assaf/zombie" target="_blank">Zombie</a>
</li>
<li>
<a href="http://slimerjs.org/" target="_blank">slimerjs</a>
</li>
<li>
<a href="https://github.com/GoogleChrome/puppeteer" target="_blank">puppeteer</a>
</li>
</ul>
<p><strong>Webviews</strong></p>
<p><a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">Webviews</a> are used by a native OS, in a native application, to run web pages. Think of a <a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">webview</a> like an iframe or a single tab from a web browser that is embedded in a native application running on a device (e.g., <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/" target="_blank">iOS</a>, <a href="http://developer.android.com/reference/android/webkit/WebView.html" target="_blank">android</a>, <a href="https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.webview.aspx" target="_blank">windows</a>).</p>
<p>The most common solutions for <a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">webview</a> development are:</p>
<ul>
<li>
<a href="https://cordova.apache.org/" target="_blank">Cordova</a> (typically for native phone/tablet apps)
</li>
<li>
<a href="https://github.com/nwjs/nw.js" target="_blank">NW.js</a> (typically used for desktop apps)
</li>
<li>
<a href="http://electron.atom.io/" target="_blank">Electron</a> (typically used for desktop apps)
</li>
</ul>
<p><strong>Native from Web Tech</strong></p>
<p>Eventually, what is learned from web browser development can be used by front-end developers to craft code for environments that are not fueled by a browser engine (i.e. web platform). As of late, development environments are being dreamed up that use web technologies (e.g., CSS and JavaScript), without web engines, to create native applications.</p>
<p>Some examples of these environments are:</p>
<ul>
<li>
<a href="https://flutter.io/" target="_blank">Flutter</a>
</li>
<li>
<a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>
</li>
<li>
<a href="https://www.nativescript.org/" target="_blank">NativeScript</a>
</li>
</ul>
<div class="notes">
<p><strong>Notes:</strong></p>
<ol>
<li>Make sure you are clear what exactly is meant by the "web platform". Read the, <a href="https://en.wikipedia.org/wiki/Open_Web_Platform" target="_blank">"Open Web Platform"</a> Wikipedia page. Explore <a href="https://platform.html5.org/" target="_blank">the many technologies</a> that make up the web platform.
</li>
</ol>
</div>
</div>
<div class="chapter" id="chapter2">
<h2>Chapter 2. The Practice of Front-end Development: Overview</h2>
<section class="sub">
<p>This chapter will break down and broadly describes the practice of front-end engineering starting with, "How Front-End Developers Are Made".</p>
</section>
<h3>2.1 - How Front-End Developers Are Made</h3>
<p>How exactly does one become a front-end developer? Well, it's complicated. Just consider this road map:</p>
<p><img alt="" data-src="assets/images/frontend.png" title="https://github.com/kamranahmedse/developer-roadmap"></p>
<p><cite>Image source: <a href="https://github.com/kamranahmedse/developer-roadmap" target="_blank">https://github.com/kamranahmedse/developer-roadmap</a></cite></p>
<p>Today, in general, one can't go to college and expect to graduate with a degree in front-end engineering. And, I rarely hear of or meet front-end developers who suffered through what is likely a deprecated computer science degree or graphic design degree to end up writing HTML, CSS, and JavaScript professionally. From my perspective, most of the people working on the front-end today generally seem to be self-taught from the ground up or cross over into the front-end space from design or computer science fields.</p>
<p>If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below (Chapter 3 and Chapter 4 will dive into more details on learning resources).</p>
<ol>
<li>Learn, roughly, how the <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">web</a> <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">platform</a> works. Make sure you know the "what" and "where" of <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">HTML, CSS, DOM, JavaScript, Domains, DNS, URLs, HTTP, browsers, and servers/hosting</a>. Don't dive deep on anything just yet, just aim to understand the parts at play and how they loosely fit together. Start by building simple web pages.
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">Learn HTML</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">Learn CSS</a>
</li>
<li>
<a href="https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL" target="_blank">Learn JavaScript</a>
</li>
<li>Learn DOM</li>
<li>Learn the fundamentals of user interface design (i.e. UI patterns, interaction design, user experience design, and usability).</li>
<li>Learn CLI/command line</li>
<li>Learn the practice of software engineering (i.e., Application design/architecture, templates, Git, testing, monitoring, automating, code quality, development methodologies).</li>
<li>Get opinionated and customize your tool box with whatever makes sense to your brain (e.g. Webpack, React, and Mobx).</li>
<li>Learn Node.js</li>
</ol>
<p>A short word of advice on learning. <a href="https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL" target="_blank">Learn the actual underlying technologies, before learning abstractions.</a> Don't learn jQuery, learn the DOM. Don't learn SASS, learn CSS. Don't learn JSX, learn HTML. Don't learn TypeScript, learn JavaScript. Don't learn Handlebars, learn JavaScript ES6 templates. Don't just use Bootstrap, learn UI patterns.</p>
<p>Lately a lot of non-accredited, expensive, front-end code schools/bootcamps have emerged. These avenues of becoming a front-end developer are typically teacher directed courses, that follow a more traditional style of learning, from an official instructor (i.e., syllabus, test, quizzes, projects, team projects, grades, etc.).</p>
<p>Keep in mind, if you are considering an expensive training program, this is the web! Everything you need to learn is on the web for the taking, costing little to nothing. However, if you need someone to tell you how to take and learn what is low cost to free, and hold you accountable for learning it, you should consider a traditional instructor lead class room setting. Otherwise, I am not aware of any other profession that is practically free for the taking with an internet connection, a <a href="https://frontendmasters.com/join/">couple of dollars a month for screencasting memberships</a>, and a burning desire for knowledge.</p>
<p>For example, if you want to get going today, consuming one or more of the following self-directed resources below can work:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> [read]
</li>
<li>
<a href="https://www.youtube.com/watch?v=Lsg84NtJbmI" target="_blank">So, You Want to be a Front-End Engineer</a> [watch]
</li>
<li>
<a href="https://frontendmasters.com/learn" target="_blank">Frontend Masters Learning Paths</a> [watch][$]
</li>
<li>
<a href="https://frontendmasters.com/courses/web-development-v2/" target="_blank">Introduction to Web Development</a> [watch][$]
</li>
<li>
<a href="https://teamtreehouse.com/techdegree/front-end-web-development-2" target="_blank">Treehouse Techdegree</a> [watch][$]
</li>
<li>
<a href="https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001" target="_blank">Front-End Web Developer Nanodegree</a> [watch][$]
</li>
<li>
<a href="https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer" target="_blank">Become a Front-End Web Developer</a> [watch][$]
</li>
<li>
<a href="https://learn.freecodecamp.org/" target="_blank">freeCodeCamp</a> [interactive][watch]
</li>
</ul>
<p>When getting your start, you should fear most things that conceal complexity. Abstractions (e.g. jQuery) in the wrong hands can give the appearance of advanced skills, while all the time hiding the fact that a developer has an inferior understanding of the basics or underlying concepts.</p>
<p>It is assumed that on this journey you are not only learning, but also doing as you learn and investigate tools. Some suggest only doing to learn. While others suggest only learning about doing. I suggest you find a mix of both that matches how your brain works and do that. But, for sure, it is a mix! So, don't just read about it, do it. Learn, do. Learn, do. Repeat indefinitely because things change fast. This is why learning the fundamentals, and not abstractions, are so important.</p>
<h3>2.2 - Front-End Job Titles</h3>
<p><a href="https://css-tricks.com/the-great-divide/">A great divide has been brewing in the front-end developer space for several years between two very different types of so-called front-end developers</a>. On the one side, you have JavaScript-focused programmers who write JavaScript for front-end runtimes that likely have computer science skills with a software development history. They more than likely view HTML and CSS as an abstraction (i.e. <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> and <a href="https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc">CSS in JS</a>). On the other side, you have, most likely, non-computer science educated developers who focus on HTML, CSS, and JavaScript as it specifically pertains to the UI. In 2019, when entering or trying to understand the front-end developer space you will absolutely feel this divide. The term front-end developer is on the verge of meaninglessness without clarifying words to address what type of front-end developer is being discussed.</p>
<p>Below is a list and description of various front-end job titles (Keep in mind titles are <a href="https://blog.prototypr.io/dissecting-front-end-job-titles-7f72a0ef0bc5">hard</a>). The common, or most used (i.e., generic), title for a front-end developer is, "front-end developer" or "front-end engineer". Note that any job that contains the word "front-end", "client-side", "web UI", "HTML", "CSS", or "JavaScript" typically infers that a person has some degree of HTML, CSS, DOM, and JavaScript professional know how.</p>
<p><strong>Front-End Developer</strong>: The generic job title that describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform.</p>
<p><strong>Front-End Engineer (aka JavaScript Developer or Full-stack JavaScript Developer)</strong>: The job title given to a developer who comes from a computer science, engineering, background and is using these skills to work with front-end technologies. This role typically requires computer science knowledge and years of software development experience. When the word "JavaScript Application" is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e has years of experience building front-end software applications).</p>
<p><strong>CSS/HTML Developer</strong>: The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and application, know how.</p>
<p><strong>Front-End Web Designer</strong>: When the word "Designer" is included in the job title, this will denote that the designer will possess front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.</p>
<p><strong>UI (User Interface) Developer/Engineer</strong>: When the word "Interface" or "UI" is included in the job title, this will denote that the developer should posses interaction design skills in addition to front-end developer skills or front-end engineering skills.</p>
<p><strong>Mobile/Tablet Front-End Developer</strong>: When the word "Mobile" or "Tablet" is included in the job title, this will denote that the developer has experience developing front-ends that run on mobile or tablet devices (either natively or on the web platform, i.e., in a browser).</p>
<p><strong>Front-End SEO Expert</strong>: When the word "SEO" is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.</p>
<p><strong>Front-End Accessibility Expert</strong>: When the word "Accessibility" is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards.</p>
<p><strong>Front-End Dev. Ops</strong>: When the word "DevOps" is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to collaboration, integration, deployment, automation, and quality.</p>
<p><strong>Front-End Testing/QA</strong>: When the word "Testing" or "QA" is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves unit testing, functional testing, user testing, and A/B testing.</p>
<div class="notes">
<p><strong>Notes:</strong></p>
<ol>
<li>If you come across the "Full Stack" or the generic "Web Developer" terms in job titles these words may be used by an employer to describe a role that is responsible for all aspects of web/app development, i.e., both front-end (potentially including design) and back-end.</li>
</ol>
</div>
<h3>2.3 - Baseline Web Technologies Employed by Front-End Developers</h3>
<p><img alt="" data-src="assets/images/web-tech-employed.jpg" title="HTML CSS and JS"></p>
<p>The following core web technologies are employed by front-end developers (consider learning them in this order):</p>
<ol>
<li>Hyper Text Markup Language (aka HTML)</li>
<li>Cascading Style Sheets (aka CSS)</li>
<li>Uniform Resource Locators (aka URLs)</li>
<li>Hypertext Transfer Protocol (aka HTTP)</li>
<li>JavaScript Programming Language (aka ECMAScript 262)</li>
<li>JavaScript Object Notation (aka JSON)</li>
<li>Document Object Model (aka DOM)</li>
<li>Web APIs (aka HTML5 and friends or Browser APIs)</li>
<li>Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)</li>
</ol>
<p>For a comprehensive list of all web related specifications have a look at <a href="https://platform.html5.org/" target="_blank">platform.html5.org</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API">MDN Web APIs</a>.</p>
<p>The nine technologies just mentioned are defined below along with a link to the relevant documentation and specification for each technology.</p>
<h4 id="hyper-text-markup-language-aka-html">Hyper Text Markup Language (aka HTML)</h4>
<blockquote>
<p>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications / documentation:</p>
<ul>
<li>
<a href="http://www.w3.org/standards/techs/html#w3c_all" target="_blank">All W3C HTML Spec</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage" target="_blank">The elements of HTML</a> from the Living Standard
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" target="_blank">Global attributes</a>
</li>
<li>
<a href="https://www.w3.org/TR/2017/REC-html52-20171214/" target="_blank">HTML 5.2 from W3C</a>
</li>
<li>
<a href="http://w3c.github.io/html/" target="_blank">HTML 5.3 from W3C</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes" target="_blank">HTML attribute reference</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">HTML element reference</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax" target="_blank">The HTML Syntax</a> from the Living Standard
</li>
</ul>
<h4 id="cascading-style-sheets-aka-css">Cascading Style Sheets (aka CSS)</h4>
<blockquote>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications / documentation:</p>
<ul>
<li>
<a href="http://www.w3.org/Style/CSS/current-work" target="_blank">All W3C CSS Specifications</a>
</li>
<li>
<a href="https://www.w3.org/TR/CSS22/" target="_blank">Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" target="_blank">CSS reference</a>
</li>
<li>
<a href="http://www.w3.org/TR/css3-selectors/" target="_blank">Selectors Level 3</a>
</li>
</ul>
<h4 id="hypertext-transfer-protocol-aka-http">Hypertext Transfer Protocol (aka HTTP)</h4>
<blockquote>
<p>The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications:</p>
<ul>
<li>
<a href="https://httpwg.org/specs/rfc7230.html" target="_blank">Hypertext Transfer Protocol -- HTTP/1.1</a>
</li>
<li>
<a href="http://httpwg.org/specs/rfc7540.html" target="_blank">HTTP/2</a>
</li>
</ul>
<h4 id="uniform-resource-locators-aka-url">Uniform Resource Locators (aka URL)</h4>
<blockquote>
<p>A uniform resource locator (URL) (also called a web address) is a reference to a resource that specifies the location of the resource on a computer network and a mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI), although many people use the two terms interchangeably. A URL implies the means to access an indicated resource, which is not true of every URI. URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Uniform_Resource_Locator" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications:</p>
<ul>
<li>
<a href="http://www.w3.org/Addressing/URL/url-spec.txt" target="_blank">Uniform Resource Locators (URL)</a>
</li>
<li>
<a href="https://url.spec.whatwg.org/" target="_blank">URL Living Standard</a>
</li>
</ul>
<h4 id="document-object-model-aka-dom">Document Object Model (aka DOM)</h4>
<blockquote>
<p>The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Document_Object_Model" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications / documentation:</p>
<ul>
<li>
<a href="https://dom.spec.whatwg.org/" target="_blank">DOM Living Standard</a>
</li>
<li>
<a href="https://www.w3.org/TR/domcore/" target="_blank">W3C DOM4</a>
</li>
<li>
<a href="https://www.w3.org/TR/uievents/" target="_blank">UI Events</a>
</li>
</ul>
<h4 id="javascript-programming-language-aka-ecmascript-262">JavaScript Programming Language (aka ECMAScript 262)</h4>
<blockquote>
<p>JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications / documentation:</p>
<ul>
<li>
<a href="http://ecma-international.org/ecma-262/9.0/index.html#Title" target="_blank">ECMAScript® 2018 Language Specification</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources" target="_blank">All ECMAScript Language Specifications</a>
</li>
</ul>
<h4 id="web-apis-aka-html5-and-friends">Web APIs (aka HTML5 and friends)</h4>
<blockquote>
<p>When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.</p>
<p><cite>— <a href="https://developer.mozilla.org/en-US/docs/Web/API" target="_blank">Mozilla</a></cite></p>
</blockquote>
<p>Most relevant documentation:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API" target="_blank">Web API Interfaces</a>
</li>
</ul>
<h4 id="javascript-object-notation-aka-json">JavaScript Object Notation (aka JSON)</h4>
<blockquote>
<p>It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/JSON" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>Most relevant specifications:</p>
<ul>
<li>
<a href="http://json.org/" target="_blank">Introducing JSON</a>
</li>
<li>
<a href="http://jsonapi.org/" target="_blank">JSON API</a>
</li>
<li>
<a href="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf" target="_blank">The JSON Data Interchange Format</a>
</li>
</ul>
<h4 id="web-content-accessibility-guidelines-aka-wcag--accessible-rich-internet-applications-aka-aria">Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)</h4>
<blockquote>
<p>Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e., unassisted) and "indirect access" meaning compatibility with a person's assistive technology (for example, computer screen readers).</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Accessibility" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<ul>
<li>
<a href="https://www.w3.org/WAI/standards-guidelines/" target="_blank">Web Accessibility Initiative (WAI)</a>
</li>
<li>
<a href="http://www.w3.org/standards/techs/wcag#w3c_all" target="_blank">Web Content Accessibility Guidelines (WCAG) Current Status</a>
</li>
</ul>
<h3>2.4 - Potential Front-end Developer Skills</h3>
<p><img alt="" data-src="assets/images/front-end-skills.png" title="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html"></p>
<p><cite>Image source: <a href="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html" target="_blank">http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html</a></cite></p>
<p>A basic to advanced understanding of HTML, CSS, DOM, JavaScript, HTTP/URL, and web browsers is assumed for any type of professional front-end developer role.</p>
<p>Beyond the skills just mentioned, a front-end developer might also be specifically skilled in one or more of the following:</p>
<ul>
<li>Content Management Systems (aka CMS)</li>
<li>Node.js</li>
<li>Cross-Browser Testing</li>
<li>Cross-Platform Testing</li>
<li>Unit Testing</li>
<li>Cross-Device Testing</li>
<li>Accessibility / WAI-ARIA</li>
<li>Search Engine Optimization (aka SEO)</li>
<li>Interaction or User Interface Design</li>
<li>User Experience</li>
<li>Usability</li>
<li>E-commerce Systems</li>
<li>Portal Systems</li>
<li>Wireframing</li>
<li>CSS Layout / Grids</li>
<li>DOM Manipulation (e.g., jQuery)</li>
<li>Mobile Web Performance</li>
<li>Load Testing</li>
<li>Performance Testing</li>
<li>Progressive Enhancement / Graceful Degradation</li>
<li>Version Control (e.g., GIT)</li>
<li>MVC / MVVM / MV*</li>
<li>Functional Programming</li>
<li>Data Formats (e.g., JSON, XML)</li>
<li>Data APIs (e.g Restful API)</li>
<li>Web Font Embedding</li>
<li>Scalable Vector Graphics (aka SVG)</li>
<li>Regular Expressions</li>
<li>Microdata / Microformats</li>
<li>Task Runners, Build Tools, Process Automation Tools</li>
<li>Responsive Web Design</li>
<li>Object-Oriented Programming</li>
<li>Application Architecture</li>
<li>Modules</li>
<li>Dependency Managers</li>
<li>Package Managers</li>
<li>JavaScript Animation</li>
<li>CSS Animation</li>
<li>Charts / Graphs</li>
<li>UI Widgets</li>
<li>Code Quality Testing</li>
<li>Code Coverage Testing</li>
<li>Code Complexity Analysis</li>
<li>Integration Testing</li>
<li>Command Line / CLI</li>
<li>Templating Strategies</li>
<li>Templating Engines</li>
<li>Single Page Applications</li>
<li>Web/Browser Security</li>
<li>Browser Developer Tools</li>
</ul>
<h3>2.5 - Front-End Developers Develop For...</h3>
<p>A front-end developer crafts HTML, CSS, and JS that typically runs on the <a href="http://tess.oconnor.cx/2009/05/what-the-web-platform-is" target="_blank">web platform</a> (e.g. a web browser) delivered from one of the following operating systems (aka OSs):</p>
<ul>
<li>
<a href="https://www.android.com/">Android</a>
</li>
<li>
<a href="https://www.chromium.org/chromium-os">Chromium</a>
</li>
<li>
<a href="https://developer.apple.com/ios/">iOS</a>
</li>
<li>
<a href="https://www.apple.com/macos">OS X (i.e. MacOS)</a>
</li>
<li>
<a href="https://www.ubuntu.com/">Ubuntu (or some flavor of Linux)</a>
</li>
<li>
<a href="https://www.microsoft.com/en-us/windows">Windows</a>
</li>
</ul>
<p>These operating systems typically run on one or more of the following devices:</p>
<ul>
<li>Desktop computer</li>
<li>Laptop / netbook computer</li>
<li>Mobile phone</li>
<li>Tablet</li>
<li>TV</li>
<li>Watch</li>
<li>
<a href="https://en.wikipedia.org/wiki/Internet_of_things" target="_blank">Things</a> (i.e., anything you can imagine, car, refrigerator, lights, thermostat, etc.)
</li>
</ul>
<p><img alt="" data-src="assets/images/growth-iot.jpg" title="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/"></p>
<p><cite>Image source: <a href="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/" target="_blank">https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/</a></cite></p>
<p>Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time web platform scenarios:</p>
<ul>
<li>A web browser (examples: <a href="http://outdatedbrowser.com/en" target="_blank">Chrome, IE, Safari, Firefox</a>).
</li>
<li>A <a href="https://en.wikipedia.org/wiki/Headless_browser" target="_blank">headless browser</a> (examples: <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank">Headless Chromium</a>).
</li>
<li>A <a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">WebView</a>/browser tab (think <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">iframe</a>) embedded within a native application as a runtime with a bridge to native APIs. WebView applications typically contain a UI constructed from web technologies. (i.e., HTML, CSS, and JS). (examples: <a href="https://cordova.apache.org/" target="_blank">Apache Cordova</a>, <a href="http://nwjs.io/" target="_blank">NW.js</a>, <a href="http://electron.atom.io/" target="_blank">Electron</a>)
</li>
<li>A native application built from web tech that is interpreted at runtime with a bridge to native APIs. The UI will make use of native UI parts (e.g., iOS native controls) not web technologies. (examples: <a href="https://www.nativescript.org/" target="_blank">NativeScript</a>, <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>)
</li>
</ul>
<h3>2.6 - Front-End on a Team</h3>
<p>A front-end developer is typically only one player on a team that designs and develops web sites, web applications, or native applications running from web technologies.</p>
<p>A bare-bones development team for building <strong>professional</strong> web sites or software for the web platform will typically, minimally, contain the following roles.</p>
<ul>
<li>Visual Designer (i.e., fonts, colors, spacing, emotion, visuals concepts & themes)</li>
<li>UI/Interaction Designer/Information Architect (i.e., wireframes, specifying all user interactions and UI functionality, structuring information)</li>
<li>Front-End Developer (i.e., writes code that runs in client/on the device)</li>
<li>Back-End Developer (i.e., writes code that runs on the server)</li>
</ul>
<p>The roles are ordered according to overlapping skills. A front-end developer will typically have a good handle on UI/Interaction design as well as back-end development. It is not uncommon for team members to fill more than one role by taking on the responsibilities of an over-lapping role.</p>
<p>It is assumed that the team mentioned above is being directed by a project lead or some kind of product owner (i.e., stakeholder, project manager, project lead, etc.)</p>
<p>A larger web team might include the following roles not shown above:</p>
<ul>
<li>SEO Strategists</li>
<li>DevOps Engineers</li>
<li>Performance Engineers</li>
<li>API Developers</li>
<li>Database Administrators</li>
<li>QA Engineers / Testers</li>
</ul>
<h3>2.7 - Generalist/Full-Stack Myth</h3>
<p><img alt="Full Stack Developer" data-src="assets/images/full-stack.jpg"></p>
<p>The term "Full-Stack" developer has come to take on several meanings. So many, that not one meaning is clear when the term is used. Just consider the results from the two surveys shown below. These results might lead one to believe that being a full-stack developer is commonplace. But, in my almost 20 years of experience, this is anything but the case in a professional context.</p>
<p><img alt="" data-src="assets/images/fullstack1.png" title="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz"></p>
<p><cite>Image source: <a href="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz" target="_blank">https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz</a></cite></p>
<p><img alt="" data-src="assets/images/fullstack2.png" title="https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types"></p>
<p><cite>Image source: <a href="https://insights.stackoverflow.com/survey/2018/#developer-profile" target="_blank">https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types</a></cite></p>
<p>The roles to design and develop a website or web application require a deep set of skills and vast experience in the area of visual design, UI/interaction design, <a href="https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap" target="_blank">front-end development</a>, and <a href="https://github.com/kamranahmedse/developer-roadmap#-back-end-roadmap" target="_blank">back-end development</a>. Any person who can fill one or more of these 4 roles at a professional level is an extremely rare commodity.</p>
<p>Pragmatically, you should seek to be, or seek to hire, an expert in one of these roles (i.e. Visual Design, Interaction Design/IA, Front-end Dev, Back-end Dev). Those who claim to operate at an expert level at one or more of these roles are exceptionally rare.</p>
<p>However, given that JavaScript has infiltrated all layers of a technology stack (i.e. Node.js) finding a full-stack JS developer who can code the front-end and back-end is becoming less mythical. Typically, these full-stack developers only deal with JavaScript. A developer who can code the front-end, back-end, API, and database isn't as absurd as it once was (excluding visual design, interaction design, and CSS). Still mythical in my opinion, but not as uncommon as it once was. Thus, I wouldn't recommend a developer set out to become a "full-stack" developer. In rare situations, it can work. But, as a general concept for building a career as a front-end developer, I'd focus on front-end technologies.</p>
<h3>2.8 - Front-End Interviews</h3>
<h4 id="preparing">Preparing:</h4>
<ul>
<li>
<a href="http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/" target="_blank">Preparing for a Front-End Web Development Interview in 2017</a>
</li>
<li>
<a href="https://medium.freecodecamp.com/cracking-the-front-end-interview-9a34cd46237" target="_blank">Cracking the front-end interview</a>
</li>
<li>
<a href="https://github.com/yangshun/front-end-interview-handbook" target="_blank">Front End Interview Handbook</a>
</li>
<li>
<a href="https://dev.to/emmawedekind/decoding-the-front-end-interview-process-14dl" target="_blank">Decoding the Front-end Interview Process</a>
</li>
</ul>
<h4>Quiz's:</h4>
<ul>
<li>
<a href="http://davidshariff.com/quiz/" target="_blank">Front End Web Development Quiz</a>
</li>
<li>
<a href="http://davidshariff.com/js-quiz/" target="_blank">JavaScript Web Quiz</a>
</li>
</ul>
<h4 id="questions-you-may-get-asked">Questions you may get asked:</h4>
<ul>
<li>
<a href="https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95" target="_blank">10 Interview Questions Every JavaScript Developer Should Know</a>
</li>
<li>
<a href="http://h5bp.github.io/Front-end-Developer-Interview-Questions/" target="_blank">Front-End Job Interview Questions</a>
</li>
<li>
<a href="http://davidshariff.com/quiz/" target="_blank">Front End Web Development Quiz</a>
</li>
<li>
<a href="http://thatjsdude.com/interview/index.html" target="_blank">Interview Questions for Front-End-Developer</a>
</li>
<li>
<a href="https://performancejs.com/post/hde6d32/The-Best-Frontend-JavaScript-Interview-Questions-(Written-by-a-Frontend-Engineer" target="_blank">The Best Frontend JavaScript Interview Questions (written by a Frontend Engineer)</a>)
</li>
</ul>
<h4 id="questions-you-ask">Questions you ask:</h4>
<ul>
<li>
<a href="https://github.com/ChiperSoft/InterviewThis" target="_blank">An open source list of developer questions to ask prospective employers</a>
</li>
</ul>
<h3>2.9 - Front-End Job Boards</h3>
<p>A plethora of technical job listing outlets exist. The narrowed list below are currently the most relevant resources for finding a specific front-end position/career.</p>
<ul>
<li>
<a href="https://authenticjobs.com/#category=4" target="_blank">authenticjobs.com</a>
</li>
<li>
<a href="http://careers.stackoverflow.com/jobs?searchTerm=front-end" target="_blank">careers.stackoverflow.com</a>
</li>
<li>
<a href="https://css-tricks.com/jobs/" target="_blank">css-tricks.com/jobs</a>
</li>
<li>
<a href="http://frontenddeveloperjob.com/" target="_blank">frontenddeveloperjob.com</a>
</li>
<li>
<a href="http://www.glassdoor.com/Job/front-end-developer-jobs-SRCH_KO0,19.htm?jobType=all" target="_blank">glassdoor.com</a>
</li>
<li>
<a href="https://jobs.github.com/" target="_blank">jobs.github.com</a>
</li>
<li>
<a href="https://www.linkedin.com/jobs/search/?keywords=frontend%20developer" target="_blank">linkedin.com</a>
</li>
<li>
<a href="https://remote.co/remote-jobs/developer/" target="_blank">remote.co</a>
</li>
<li>
<a href="https://frontendremotejobs.com" target="_blank">frontendremotejobs.com</a>
</li>
<li>
<a href="https://weworkremotely.com/" target="_blank">weworkremotely.com</a>
</li>
<li>
<a href="https://www.smashingmagazine.com/jobs/" target="_blank">www.smashingmagazine.com/jobs/</a>
</li>
</ul>
<div class="notes">
<p><strong>Notes:</strong></p>
<ol>
<li>Want to work remotely as a front-end developer checkout these <a href="https://github.com/jessicard/remote-jobs" target="_blank">remote-friendly companies</a>.
</li>
</ol>
</div>
<h3>2.10 - Front-End Salaries</h3>
<p>The national average in the U.S for a mid-level front-end developer is somewhere between <a href="https://www.payscale.com/research/US/Job=Front_End_Developer_%2f_Engineer/Salary">$65k</a> and <a href="https://www.indeed.com/salaries/Front-End-Developer-Salaries" target="_blank">100k</a>.</p>
<p>Of course when you first start expect to enter the field at around 40k depending upon location and experience.</p>
<div class="notes">
<p><strong>Notes:</strong></p>
<ol>
<li>A lead/senior front-end developer/engineer can potentially live wherever they want (i.e., work remotely) and make over $150k a year (visit <a href="https://angel.co/jobs" target="_blank">angel.co</a>, sign-up, review front-end jobs over $150k or examine the salary ranges on <a href="https://stackoverflow.com/jobs?q=front-end&sort=y" target="_blank">Stack Overflow Jobs</a>).
</li>
</ol>
</div>
</div>
<div class="chapter" id="chapter3">
<h2>Chapter 3. Learning Front-end Dev: Self Directed Resources/Recommendations</h2>
<section class="sub">
<p>This chapter highlights the many resources (video training, books, etc.) that an individual can use to direct their own learning process and career as a front-end developer.</p>
<p>The learning resources identified (articles, books, videos, screencasts etc..) will include both free and paid material. Paid material will be indicated with [$].</p>
</section>
<h3>3.1. - Learn Internet/Web</h3>
<blockquote>
<p>The Internet is a global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link several billion devices worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and peer-to-peer networks for file sharing.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Internet" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p>
<a href="assets/images/how-the-internet-works.jpg">
<img alt="How the internet works" data-src="assets/images/how-the-internet-works.jpg" title="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/">
</a>
</p>
<p><cite>Image source: <a href="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/" target="_blank">https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/</a></cite></p>
<ul>
<li>
<a href="https://www.youtube.com/watch?v=Dxcc6ycZ73M" target="_blank">What is the Internet?</a> [watch]
</li>
<li>
<a href="http://internetfundamentals.com" target="_blank">Internet Fundamentals</a> [watch]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works" target="_blank">How the Web works</a> [read]
</li>
<li>How does the Internet work? <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work" target="_blank">https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work</a> and <a href="http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm" target="_blank">http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a> [read]
</li>
<li>
<a href="https://www.khanacademy.org/partner-content/code-org/internet-works" target="_blank">How the Internet Works</a> [watch]
</li>
<li>
<a href="https://www.youtube.com/watch?v=7_LPdttKXPc" target="_blank">How the Internet Works in 5 Minutes</a> [watch]
</li>
<li>
<a href="https://www.eventedmind.com/classes/how-the-web-works-7f40254c" target="_blank">How the Web Works</a> [watch]
</li>
<li>
<a href="http://www.dontfeartheinternet.com/" target="_blank">Don’t Fear the Internet</a>
</li>
</ul>
<p><img alt="" data-src="assets/images/who-runs-the-internet-infographic.jpg" title="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/"></p>
<p><cite>Image source: <a href="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/" target="_blank">http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/</a></cite></p>
<h3>3.2. - Learn Web Browsers</h3>
<blockquote>
<p>A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<h4 id="the-most-commonly-used-browsers-on-any-device-are">The <a href="https://netmarketshare.com/?options=%7B%22filter%22%3A%7B%22%24and%22%3A%5B%7B%22deviceType%22%3A%7B%22%24in%22%3A%5B%22Desktop%2Flaptop%22%2C%22Mobile%22%5D%7D%7D%5D%7D%2C%22dateLabel%22%3A%22Trend%22%2C%22attributes%22%3A%22share%22%2C%22group%22%3A%22browser%22%2C%22sort%22%3A%7B%22share%22%3A-1%7D%2C%22id%22%3A%22browsersDesktop%22%2C%22dateInterval%22%3A%22Monthly%22%2C%22dateStart%22%3A%222018-01%22%2C%22dateEnd%22%3A%222018-12%22%2C%22segments%22%3A%22-1000%22%7D" target="_blank">most commonly used browsers</a> (on desktop and mobile) are:</h4>
<ol>
<li>
<a href="http://www.google.com/chrome/" target="_blank">Chrome</a> (engine: <a href="https://en.wikipedia.org/wiki/Blink_%28layout_engine%29" target="_blank">Blink</a> + <a href="https://en.wikipedia.org/wiki/V8_%28JavaScript_engine%29" target="_blank">V8</a>)
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> (engine: <a href="https://en.wikipedia.org/wiki/Gecko_%28software%29" target="_blank">Gecko</a> + <a href="https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29" target="_blank">SpiderMonkey</a>)
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank">Internet Explorer</a> (engine: <a href="https://en.wikipedia.org/wiki/Trident_%28layout_engine%29" target="_blank">Trident</a> + <a href="https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" target="_blank">Chakra</a>)
</li>
<li>
<a href="https://www.apple.com/safari/" target="_blank">Safari</a> (engine: <a href="https://en.wikipedia.org/wiki/WebKit" target="_blank">Webkit</a> + <a href="https://trac.webkit.org/wiki/SquirrelFish" target="_blank">SquirrelFish</a>)
</li>
</ol>
<p><img alt="" data-src="assets/images/statcounter.png" title="http://gs.statcounter.com/browser-market-share"></p>
<p><cite>Image source: <a href="http://gs.statcounter.com/browser-market-share" target="_blank">http://gs.statcounter.com/browser-market-share</a></cite></p>
<h4 id="evolution-of-browsers--web-technologies-ie-apis">Evolution of Browsers & Web Technologies (i.e., APIs)</h4>
<ul>
<li>
<a href="http://www.evolutionoftheweb.com/" target="_blank">evolutionoftheweb.com</a> [read]
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Timeline_of_web_browsers" target="_blank">Timeline of web browsers</a> [read]
</li>
</ul>
<h4 id="the-most-commonly-used-headless-browser-are">The Most Commonly Used <a href="http://www.asad.pw/HeadlessBrowsers/" target="_blank">Headless Browser</a> Are:</h4>
<ul>
<li>
<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank">Headless Chromium</a> (engine: <a href="https://www.chromium.org/blink" target="_blank">Blink</a> + V8)
</li>
<li>
<a href="http://slimerjs.org/" target="_blank">SlimerJS</a> (engine: <a href="https://en.wikipedia.org/wiki/Gecko_%28software%29" target="_blank">Gecko</a> + <a href="https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29" target="_blank">SpiderMonkey</a>)
</li>
</ul>
<h4 id="how-browsers-work">How Browsers Work</h4>
<ul>
<li>
<a href="http://dbaron.org/talks/2012-03-11-sxsw/master.xhtml" target="_blank">Fast CSS: How Browsers Lay Out Web Pages</a> [read]
</li>
<li>
<a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/" target="_blank">How Browsers Work: Behind the scenes of modern web browsers</a> [read]
</li>
<li>
<a href="https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/" target="_blank">Quantum Up Close: What is a browser engine?</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=SmE4OwHztCc" target="_blank">So How Does the Browser Actually Render a Website</a> [watch]
</li>
<li>
<a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a" target="_blank">What forces layout / reflow</a> [read]
</li>
<li>
<a href="http://frontendbabel.info/articles/webpage-rendering-101/" target="_blank">What Every Frontend Developer Should Know About Webpage Rendering</a> [read]
</li>
</ul>
<h4 id="optimizing-for-browsers">Optimizing for Browsers:</h4>
<ul>
<li>
<a href="https://www.udacity.com/course/browser-rendering-optimization--ud860" target="_blank">Browser Rendering Optimization</a> [watch]
</li>
<li>
<a href="https://www.udacity.com/course/website-performance-optimization--ud884" target="_blank">Website Performance Optimization</a> [watch]
</li>
</ul>
<h4 id="comparing-browsers">Comparing Browsers</h4>
<ul>
<li>
<a href="https://en.wikipedia.org/wiki/Comparison_of_web_browsers" target="_blank">Comparison of Web Browsers</a> [read]
</li>
</ul>
<h4>Browser Hacks</h4>
<ul>
<li>
<a href="http://browserhacks.com/" target="_blank">browserhacks.com</a> [read]
</li>
</ul>
<h4 id="developing-for-browsers">Developing for Browsers</h4>
<p>In the past, front-end developers spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today. Today, abstractions (e.g., React, Webpack, Post-CSS, Babel etc...) combined with modern browsers make browser development fairly easy. The new challenge is not which browser the user will use, but on which device they will run the browser.</p>
<h4 id="evergreen-browsers">Evergreen Browsers</h4>
<p>The latest versions of most modern browsers are considered evergreen browsers. That is, in theory, they are supposed to automatically update themselves silently without prompting the user. This move towards self-updating browsers has been in reaction to the slow process of eliminating older browsers that do not auto-update.</p>
<h4 id="picking-a-browser-1">Picking a Browser</h4>
<p>As of today, most front-end developers use Chrome and "Chrome Dev Tools" to develop front-end code. However, the most used modern browsers all offer a flavor of developer tools. Picking one to use for development is a subjective choice. The more important issue is knowing which browsers, on which devices, you have to support and then testing appropriately.</p>
<h3 id="learn-domain-name-system-aka-dns">3.3 - Learn Domain Name System (aka DNS)</h3>
<blockquote>
<p>The Domain Name System (DNS) is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates domain names, which can be easily memorized by humans, to the numerical IP addresses needed for the purpose of computer services and devices worldwide. The Domain Name System is an essential component of the functionality of most Internet services because it is the Internet's primary directory service.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Domain_Name_System" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<p><img alt="" data-src="assets/images/how_dns_works.jpg" title="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg"></p>
<p><cite>Image source: <a href="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg" target="_blank">http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg</a></cite></p>
<ul>
<li>
<a href="https://www.digitalocean.com/community/tutorials/an-introduction-to-dns-terminology-components-and-concepts" target="_blank">An Introduction to DNS Terminology, Components, and Concepts</a> [read]
</li>
<li>
<a href="https://www.youtube.com/watch?v=72snZctFFtA" target="_blank">DNS Explained</a> [watch]
</li>
<li>
<a href="https://howdns.works/ep1/" target="_blank">How DNS Works</a> [read]
</li>
<li>
<a href="https://www.youtube.com/watch?v=5o8CwafCxnU&index=3&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7" target="_blank">The Internet: IP Addresses and DNS</a> [watch]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name" target="_blank">What is a domain name?</a> [read]
</li>
</ul>
<h3 id="learn-httpnetworks-including-cors--websockets">3.4 - Learn HTTP/Networks (Including CORS & WebSockets)</h3>
<blockquote>
<p><strong>HTTP</strong> - The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<h4 id="http-specifications">HTTP Specifications</h4>
<ul>
<li>
<a href="https://http2.github.io/" target="_blank">HTTP/2</a>
</li>
<li>
<a href="https://httpwg.org/specs/rfc7230.html" target="_blank">Hypertext Transfer Protocol -- HTTP/1.1</a>
</li>
</ul>
<h4 id="http-docs">HTTP Docs</h4>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP" target="_blank">MDN HTTP</a> [read]
</li>
</ul>
<h4 id="http-videosarticlestutorials">HTTP Videos/Articles/Tutorials</h4>
<ul>
<li>
<a href="http://chimera.labs.oreilly.com/books/1230000000545/index.html" target="_blank">High Performance Browser Networking: What Every Web Developer Should Know About Networking and Web Performance</a> [read]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview" target="_blank">MDN: An overview of HTTP</a> [read]
</li>
<li>
<a href="https://www.amazon.com/HTTP-Definitive-Guide-Guides/dp/1565925092/ref=cm_cr_arp_d_product_top?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=11b990b79d33ddbef63712765715a9c1&camp=1789&creative=9325" target="_blank">HTTP: The Definitive Guide (Definitive Guides)</a> [read][$]
</li>
<li>
<a href="https://http2.github.io/faq/#what-are-the-key-differences-to-http1x" target="_blank">HTTP/2 Frequently Asked Questions</a> [read]
</li>
<li>
<a href="http://www.pluralsight.com/courses/xhttp-fund" target="_blank">HTTP Fundamentals</a> [watch][$]
</li>
<li>
<a href="https://app.pluralsight.com/library/courses/http2-fundamentals/table-of-contents" target="_blank">HTTP/2 Fundamentals</a> [watch][$]
</li>
<li>
<a href="http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177" target="_blank">HTTP: The Protocol Every Web Developer Must Know - Part 1</a> [read]
</li>
<li>
<a href="http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155" target="_blank">HTTP: The Protocol Every Web Developer Must Know - Part 2</a> [read]
</li>
<li>
<a href="http://code.tutsplus.com/series/http-succinctly--net-33683" target="_blank">HTTP Succinctly</a> [read]
</li>
</ul>
<h4 id="http-status-codes">HTTP Status Codes</h4>
<ul>
<li>
<a href="https://httpstatuses.com/" target="_blank">HTTP Status Codes</a>
</li>
<li>
<a href="http://webdesign.tutsplus.com/tutorials/http-status-codes-in-60-seconds--cms-24317" target="_blank">HTTP Status Codes in 60 Seconds</a> [watch]
</li>
</ul>
<blockquote>
<p><strong>CORS</strong> - Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g., fonts) on a web page to be requested from another domain outside the domain from which the resource originated.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<h4 id="cors-specifications">CORS Specifications</h4>
<ul>
<li>
<a href="https://www.w3.org/TR/cors/" target="_blank">Cross-Origin Resource Sharing</a>
</li>
</ul>
<h4 id="cors">CORS</h4>
<ul>
<li>
<a href="https://www.amazon.com/CORS-Action-Creating-consuming-cross-origin/dp/161729182X/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=47ebd885d688a4ed69f77a1bd8273f8a&camp=1789&creative=9325" target="_blank">CORS in Action</a> [read][$]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" target="_blank">HTTP Access Control (CORS)</a> [read]
</li>
</ul>
<blockquote>
<p><strong>WebSockets</strong> - WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/WebSocket" target="_blank">Wikipedia</a></cite></p>
</blockquote>
<h4>WebSockets</h4>
<ul>
<li>
<a href="https://code.tutsplus.com/courses/connect-the-web-with-websockets" target="_blank">Connect the Web With WebSockets</a> [watch]
</li>
<li>