forked from FrontendMasters/front-end-handbook-2019
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathopen-in-web-browser.html
3543 lines (3278 loc) · 254 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" />
<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>
<title>Front-end Developer Handbook 2019 - Written By Cody Lindley sponsored by Frontend Masters</title>
<meta name="description" content="This is a guide that everyone can use to learn about the practice of front-end development.">
<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 id="menuButton">|||</div>
<div id="bookPadding">
<p>
<img
src="./assets/images/FM_2019Cover_final.jpg"
alt="Front End Developers Handbook 2019 Cover"
/>
</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>
<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 id="chapter0" class="chapter">
<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 happens.</li>
<li>Fonts created by CSS became a <a href="https://yusugomori.com/projects/css-sans/">thing</a>.</li>
<li>What I use to called front-end driven apps gets labeled, <a href="https://thepowerofserverless.info/">"serverless"</a>. Unfortunately, this term is <a href="owler.com/articles/serverless.html">overloaded</a>. However, the term <a href="https://jamstack.org/">JAMstack</a> did 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 dominate 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>).
</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...</h2>
<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">largly 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 id="chapter1" class="chapter">
<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
src="./assets/images/what-is-front-end-dev.png"
alt=""
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>
</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>
</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 id="chapter2" class="chapter">
<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 src="assets/images/frontend.png" alt="" 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 src="assets/images/web-tech-employed.jpg" alt="" 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://tools.ietf.org/html/rfc2616" 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 src="assets/images/front-end-skills.png" alt="" 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 src="assets/images/growth-iot.jpg" alt="" 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 src="assets/images/full-stack.jpg" alt="Full Stack Developer"></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 src="assets/images/fullstack1.png" alt="" 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 src="assets/images/fullstack2.png" alt="" 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://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 id="chapter3" class="chapter">
<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>