-
Notifications
You must be signed in to change notification settings - Fork 99
Expand file tree
/
Copy pathopen-in-web-browser.html
More file actions
10651 lines (9718 loc) · 432 KB
/
open-in-web-browser.html
File metadata and controls
10651 lines (9718 loc) · 432 KB
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" data-theme="dark">
<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>The Front End Developer/Engineer Handbook 2024</title>
<meta name="description"
content="The handbook provides an in-depth overview of the skills, tools, and technologies necessary to excel as a front-end developer / engineer." />
<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 src="assets/theme-toggler.js"></script>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://frontendmasters.com/books/front-end-handbook/2024/" />
<meta property="og:site_name" content="Frontend Masters" />
<meta property="og:title" content="The Front End Developer/Engineer Handbook 2024" />
<meta property="og:image"
content="https://frontendmasters.com/guides/front-end-handbook/2024/images/FEM2024_ogimage.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description"
content="The handbook provides an in-depth overview of the skills, tools, and technologies necessary to excel as a front-end developer / engineer." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@FrontendMasters" />
<meta name="twitter:creator" content="@codylindley" />
<meta name="twitter:title" content="The Front End Developer/Engineer Handbook 2024" />
<meta name="twitter:description"
content="The handbook provides an in-depth overview of the skills, tools, and technologies necessary to excel as a front-end developer / engineer." />
<meta name="twitter:image"
content="https://frontendmasters.com/guides/front-end-handbook/2024/images/FEM2024_ogimage.jpg" />
<meta name="twitter:image:alt" content="The Frontend Developer/Engineer Handbook 2024 Cover" />
<meta name="twitter:url" content="https://frontendmasters.com/books/front-end-handbook/2024/" />
</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/">If you'd like to try our courses, here's 5 of them for free</a>
</div>
</div>
<div class="sticky-bar">
<div id="menuButton">|||</div>
<div id="toggler">
<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto"
aria-live="polite">
<svg class="light-theme" aria-hidden="true" height="24" viewBox="0 -960 960 960" width="24">
<path
d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
</svg>
<svg class="dark-theme" aria-hidden="true" height="24" viewBox="0 -960 960 960" width="24">
<path
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
</svg>
</button>
</div>
</div>
<div id="bookPadding">
<h1>The Front End Developer/Engineer Handbook 2024</h1>
<h3 style="margin-top: 0px">
Written by
<a href="http://codylindley.com/">Cody Lindley</a> for <a
href="https://frontendmasters.com/?utm_source=guides&utm_medium=website&utm_campaign=feh2024">Frontend
Masters</a>
</h3>
<div>
<p class="image">
<img loading="lazy" alt="The Frontend Developer/Engineer Handbook 2024 Cover"
src="images/FEM2024_1000w.jpeg" />
</p>
</div>
<p>This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! <a
href="https://github.com/FrontendMasters/front-end-handbook-2024">https://github.com/FrontendMasters/front-end-handbook-2024</a>
</p>
<div class="chapter" id="chapter1">
<h2>1. Overview of Field of Work</h2>
<section class="sub">
<p>
This section provides an overview of the field of front-end
development/engineering.
</p>
</section>
<h3>1.1 — What is a (Frontend||UI||UX) Developer/Engineer?</h3>
<p>
A front-end developer/engineer uses
<a href="https://developer.mozilla.org/en-US/docs/web">
Web Platform Technologies </a>—namely HTML, CSS, and JavaScript— to develop a
front-end (i.e., a user interface with which the user interacts) for
websites, web applications, and native applications.
</p>
<p>
Most practitioners are introduced to the occupation after creating
their first HTML web page. The most straightforward and simplest
work output from a front-end developer/engineer is an HTML document
that runs in a web browser, producing a web page.
</p>
<p>Professional front-end developers broadly speaking produce:</p>
<ul>
<li>
The front-end of <strong>Websites</strong> e.g.,
<a href="https://www.wikipedia.org/">wikipedia.org</a> - A website
is a collection of interlinked web pages and associated multimedia
content accessible over the Internet. Typically identified by a
unique domain name, a website is hosted on web servers and can be
accessed by users through a web browser. Websites serve various
functions ranging from simple static web pages to complex dynamic
web pages.
</li>
<li>
The front-end of <strong>Web Applications</strong> e.g.,
<a href="https://www.gmail.com/">gmail.com</a> - Unlike native
applications installed on a device, web applications are delivered
to users through a web browser. They often interact with databases
to store, retrieve, and manipulate data. Because web applications
run in a browser, they are generally cross-platform and can be
accessed on various devices, including desktops, laptops, tablets,
and smartphones. Common development Libraries and frameworks in
this space include <a href="https://react.dev/">React.js</a>/<a href="https://nextjs.org/">Next.js</a>, <a
href="https://svelte.dev/">Svelte</a>/<a href="https://kit.svelte.dev/">SveltKit</a>, <a
href="https://vuejs.org/">Vue.js</a>/<a href="https://nuxt.com/">Nuxt</a>, <a
href="https://www.solidjs.com/">SolidJS</a>/<a href="https://start.solidjs.com/">SolidStart</a>, <a
href="https://angular.io/">Angular</a>,
<a href="https://astro.build/">Astro</a>,
<a href="https://qwik.builder.io/">Qwik</a>, and
<a href="https://lit.dev/">Lit</a>.
</li>
<li>
The front-end of
<strong>Native Applications from Web Technologies </strong>
e.g., <a href="https://discord.com/download">Discord</a> - A
native application from web technologies is a type of software
application that runs natively on one or more operating systems
(like Windows, macOS, Linux, iOS, and Android) from a single
codebase of web technologies (including web application libraries
and frameworks). Common development frameworks and patterns in
this space include
<a href="https://www.electronjs.org/">Electron</a> for desktop
apps <a href="https://reactnative.dev/">React Native</a> and
<a href="https://capacitorjs.com/">Capacitor</a> for mobile apps
and even newer solutions like <a href="https://beta.tauri.app/start/">Tauri V2</a> that
supports both mobile and desktop operating systems. Note that
native applications built from web technologies either run web
technologies at runtime (e.g., Electron, Tauri) or translate to
some degree web technologies into native code and UI's at runtime
(e.g., React Native,
<a href="https://nativescript.org/">NativeScript</a>).
Additionally,
<a href="https://web.dev/articles/what-are-pwas">
Progressive Web Apps (PWAs)</a>
can also produce applications that are installable on one or more
operating systems with native-like experiences from a single code
base of web technologies.
</li>
</ul>
<h3>
1.2 — Common Job Titles (based on "Areas of Focus" in section
2)
</h3>
<p>
Below is a table containing most of the front-end job titles in the
wild organized by area of focus.
</p>
<table border="1">
<tr>
<th>Area of Focus</th>
<th>Common Job Titles</th>
</tr>
<tr>
<td>Website Development</td>
<td>
<ul>
<li>Web/Website Developer</li>
<li>Front-end Developer/Engineer</li>
<li>HTML & CSS Developer</li>
</ul>
</td>
</tr>
<tr>
<td>Web Application Development / Software Engineering</td>
<td>
<ul>
<li>Front-end Application Architect</li>
<li>Front-end Application Engineer</li>
<li>Front-end Software Developer</li>
<li>JavaScript Developer</li>
<li>Web Developer</li>
</ul>
</td>
</tr>
<tr>
<td>Web UX / UI Engineering</td>
<td>
<ul>
<li>
UX Developer/Engineer (aka UXE or User Experience Engineer)
</li>
<li>UI Developer/Engineer</li>
<li>UI Design System Developer/Engineer</li>
</ul>
</td>
</tr>
<tr>
<td>Web Test Engineering</td>
<td>
<ul>
<li>Front-end QA Developer/Engineer</li>
<li>UI Testing Developer/Engineer</li>
</ul>
</td>
</tr>
<tr>
<td>Web Performance Engineering</td>
<td>
<ul>
<li>Front-end Performance Developer/Engineering</li>
<li>Web Performance Analyst</li>
</ul>
</td>
</tr>
<tr>
<td>Web Accessibility Engineering</td>
<td>
<ul>
<li>Accessibility Developer/Engineer</li>
<li>Web Accessibility Specialist</li>
</ul>
</td>
</tr>
<tr>
<td>Web Game Development</td>
<td>
<ul>
<li>Front-end Game Developer/Engineer</li>
<li>HTML Game Developer/Engineer</li>
</ul>
</td>
</tr>
</table>
<h3>1.3 — Career Levels & Compensation (US Market)</h3>
<p>
Roughly speaking (Frontend||UI||UX) developers/engineers advance in
their career through the following
<a href="https://career-ladders.dev/engineering/">ladder/levels</a>
and compensations.
</p>
<table border="1">
<thead>
<tr>
<th style="width: 200px">Level</th>
<th>Description</th>
<th>Compensation (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Junior Engineer</td>
<td>
Entry-level position. Focus on learning and skill development.
Guided by senior members.
</td>
<td>$40,000 - $80,000</td>
</tr>
<tr>
<td>Engineer</td>
<td>
Mid-level, 2-5 years of experience. Handles core development
tasks and might take on more complex projects.
</td>
<td>$80,000 - $100,000</td>
</tr>
<tr>
<td>Senior Engineer</td>
<td>
More than five years of experience. Handles intricate tasks
and leads projects.
</td>
<td>$100,000 - $130,000</td>
</tr>
<tr>
<td>Lead Engineer</td>
<td>
Leads teams or projects. Involved in technical decisions and
architecture planning.
</td>
<td>$130,000 - $160,000</td>
</tr>
<tr>
<td>Staff Engineer</td>
<td>
Long-term, high-ranking technical experts. Works on high-level
architecture and design.
</td>
<td>$150,000 - $180,000</td>
</tr>
<tr>
<td>Principal Engineer</td>
<td>
Highly specialized, often with a decade or more of experience.
Influences company-wide technical projects.
</td>
<td>$180,000 - $220,000</td>
</tr>
<tr>
<td>Fellow / Distinguished Engineer</td>
<td>
Sets or influences the technical direction at a company-wide
level. Works on visionary projects.
</td>
<td>$220,000 - $300,000</td>
</tr>
</tbody>
</table>
<p>
Note that companies typically use internal leveling semantics (e.g.,
level 66 from Microsoft).
</p>
<p class="image">
<a href="https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer">
<img loading="lazy" alt="Internet Network" src="images/1-4.png"
title="https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer" />
</a>
</p>
<p class="imageCite">
<cite>Image source:
<a href="https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer"
target="_blank">https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer</a></cite>
</p>
<h3>1.4 — Occupational Challenges</h3>
<ul>
<li>
<strong>The Front-end Divide:</strong>
The
<a href="https://css-tricks.com/the-great-divide/">"The Great Divide"</a>
in front-end web development describes a growing split between two
main factions: JavaScript-centric full-stack web programmers, who
focus on software frameworks and programming for web applications,
and HTML/CSS-centric developers, who specialize in UI patterns,
user experiences, interactions, accessibility, SEO, and the visual
and structural aspects of web pages and apps. This divide exists
between computer science-minded programmers, who prioritize
programming/software skills required to build the front-end of web
applications, and those who come to front-end development from the
UI/UX side, typically as self-taught programmers. To be a
front-end developer, you need to be a mix of both, with the degree
of mixing being subjective. However, in 2024, it's clear that the
job market heavily favors JavaScript-centric programmers, skilled
in areas like JavaScript/TypeScript, Terminal/CLI, Node.js, APIs,
GIT, Testing, CI/CD, Software Principles, Programming Principles,
etc. (Follow up post:
<a href="https://pow.rs/blog/3-pillars-of-front-end-knowledge/">"The great(er) divide in front-end"</a>
and
<a href="https://bradfrost.com/blog/post/frontend-design-react-and-a-bridge-over-the-great-divide/">"Frontend
design, React, and a bridge over the great divide"</a>). However, the job market is only a reflection of
the choices
made in web development, not an evaluation of the quality of those
choices.
</li>
<li>
<strong>Technology Churn:</strong>
Technology churn, the rapid evolution, and turnover of
technologies, frameworks, and tools, present a significant
challenge in the field of front-end development. This phenomenon
can make the role both exciting and at the same time daunting and
exhausting.
</li>
<li>
<strong>Web Compatibility:</strong> Ensuring that web technologies
work consistently across various web platform runtimes (e.g., web
browsers, webviews, Electron, etc.) while not as complicated and
challenging as it once was, can still require significant effort
and skill.
</li>
<li>
<strong>Cross-platform Development:</strong> Building a single
codebase to run on multiple devices presents several challenges,
especially in the context of front-end development. This approach,
often referred to as cross-platform development, aims to create
software that works seamlessly on various devices, such as
smartphones, tablets, and desktops, with different operating
systems like iOS, Android, and Windows.
</li>
<li>
<strong>Responsive Design & Adaptive Design Development:</strong>
Adaptive and responsive design are critical approaches in
front-end development for creating websites and applications that
provide an optimal viewing experience across a wide range of
devices, from desktop monitors to mobile phones. However,
implementing these solutions can often be complicated and
time-consuming, leading to complicated code to maintain and test.
</li>
<li>
<strong>Front-end Development is Too Complex:</strong>
A general consensus is rising that the current frontend
development practices and tools are too complex and need to be
simplified. This strain is real and we are all feeling it, but not
everyone is pointing at the same causes.
</li>
<li>
<strong>Front-end Development Has Somewhat Lost its Way:</strong>
Somewhere along the line, being a front-end developer transformed
into being a CS-minded programmer capable of wrangling overly
complex thick client UI frameworks to build software solutions in
web browsers on potentially many different devices. In many ways,
front-end development has lost its way. Once upon a time,
front-end development primarily focused on the user and the user
interface, with programming playing a secondary role. Why does
being a front-end developer today mean one has to be more CS than
UX? Because we have lost our way, we have accepted too much in the
realm of complexity and forfeited our attention to less important
matters. We are now somewhat stuck in a time of being all things
and nothing. We have to find our way back to the user, back to the
user interface.
</li>
<li>
<strong>Challenges in Securing Employment:</strong>
In recent times,
<a
href="https://www.linkedin.com/pulse/ongoing-defence-frontend-full-time-job-christian-heilmann-%3FtrackingId=VHhV08dKVjv7a9ga59Govw%253D%253D/?trackingId=VHhV08dKVjv7a9ga59Govw%3D%3D">securing
a job has become a complex process</a>, often marred by interviews that prioritize subjective and
irrelevant criteria. These interviews frequently fail to assess
skills pertinent to the actual job responsibilities, leading to a
flawed hiring process. Technical roles, in particular, are
frequently misunderstood, with assessments focusing on superficial
generalizations rather than true technical acumen. Success in
landing a job in this field often hinges more on chance or
networking than on a comprehensive evaluation of an individual's
personality, teamwork abilities, practical experience,
communication prowess, and capacity for learning and critical
thinking. Some of the most effective hiring practices involve
companies acknowledging the inherent unpredictability of the
hiring process and adopting a more holistic approach (i.e.,
selecting someone and engaging them in a small short contract of
real work).
</li>
</ul>
</div>
<div class="chapter" id="chapter2">
<h2>2. Areas of Focus</h2>
<section class="sub">
<p>
This section identifies and defines the major areas of focus
within the field of front-end development / engineering.
</p>
</section>
<h3>2.1 — Website Development</h3>
<p>
Website Development in front-end development refers to building and
maintaining websites. It involves creating both simple static web
pages and complex web-based applications, ensuring they are visually
appealing, functional, and user-friendly.
</p>
<p><strong>Key Responsibilities:</strong></p>
<ul>
<li>
Building and structuring websites using HTML, CSS, and JavaScript.
</li>
<li>
Ensuring responsive design for various devices and screen sizes.
</li>
<li>
Front-end programming for interactive and dynamic user interfaces.
</li>
<li>
Implementing SEO optimization to improve search engine ranking.
</li>
<li>
Enhancing website performance through various optimization
techniques.
</li>
<li>Maintaining cross-browser compatibility.</li>
<li>Adhering to web standards and accessibility guidelines.</li>
</ul>
<p><strong>Tools and Technologies:</strong></p>
<ul>
<li>
Proficiency with web development tools and languages like HTML,
CSS, JavaScript.
</li>
<li>Familiarity with graphic design tools for website visuals.</li>
<li>
Using testing and debugging tools for website functionality and
issue resolution.
</li>
</ul>
<p><strong>Collaboration and Communication:</strong></p>
<ul>
<li>
Collaborating with designers, content creators, and other
developers.
</li>
<li>
Communicating with stakeholders to understand and implement web
solutions.
</li>
</ul>
<p><strong>Continuous Learning and Adaptation:</strong></p>
<ul>
<li>
Staying updated with the latest trends and standards in web
development.
</li>
<li>
Enhancing skills and adapting to new web development tools and
methodologies.
</li>
</ul>
<h3>
2.2 — Web Application Development / Software Engineering
</h3>
<p>
Web Application Development/Software Engineering in front-end
development focuses on creating complex and dynamic web
applications. This area encompasses the visual, interactive,
architectural, performance, and integration aspects with back-end
services of web applications.
</p>
<p><strong>Key Responsibilities:</strong></p>
<ul>
<li>
Building robust and scalable web applications using front-end
technologies and modern frameworks.
</li>
<li>
Designing the structure of web applications for modularity,
scalability, and maintainability.
</li>
<li>
Integrating front-end applications with back-end services and
APIs.
</li>
<li>Optimizing web applications for speed and efficiency.</li>
<li>
Creating responsive designs for various devices and screen sizes.
</li>
<li>Ensuring cross-browser compatibility of web applications.</li>
<li>Implementing security best practices in web applications.</li>
</ul>
<p><strong>Tools and Technologies:</strong></p>
<ul>
<li>
Expertise in front-end languages and frameworks such as HTML, CSS,
JavaScript, React, Angular, Vue.js.
</li>
<li>Proficiency in using version control systems like Git.</li>
<li>
Familiarity with testing frameworks and tools for various types of
testing.
</li>
</ul>
<p><strong>Collaboration and Communication:</strong></p>
<ul>
<li>
Collaborating with UX/UI designers, back-end developers, and
product managers.
</li>
<li>
Effectively communicating technical concepts to team members and
stakeholders.
</li>
</ul>
<p><strong>Continuous Learning and Adaptation:</strong></p>
<ul>
<li>
Keeping up with the latest trends in web development technologies
and methodologies.
</li>
<li>
Continuously learning new programming languages, frameworks, and
tools.
</li>
</ul>
<h3>2.3 — Web UX / UI Engineering</h3>
<p>
Web UX/UI Engineering is a multifaceted area of focus in front-end
development, dedicated to designing and implementing user-friendly
and visually appealing interfaces for web applications and websites.
This field integrates principles of UX design, UI development,
Design Systems, and interaction design to create cohesive and
effective web experiences.
</p>
<p><strong>Key Responsibilities:</strong></p>
<ul>
<li>
User Experience (UX) Design: Understanding user needs and
behaviors to create intuitive web interfaces, including user
research and journey mapping.
</li>
<li>
User Interface (UI) Development: Coding and building the interface
using HTML, CSS, and JavaScript, ensuring responsive and
accessible designs.
</li>
<li>
Design Systems: Developing and maintaining design systems to
ensure consistency across the web application.
</li>
<li>
Interaction Design: Creating engaging interfaces with thoughtful
interactions and dynamic feedback.
</li>
<li>
Collaboration with Designers: Working alongside graphic and
interaction designers to translate visual concepts into functional
interfaces.
</li>
<li>
Prototyping and Wireframing: Utilizing tools for prototyping and
wireframing to demonstrate functionality and layout.
</li>
<li>
Usability Testing and Accessibility Compliance: Conducting
usability tests and ensuring compliance with accessibility
standards.
</li>
<li>
Performance Optimization: Balancing aesthetic elements with
website performance, optimizing for speed and responsiveness.
</li>
</ul>
<p><strong>Tools and Technologies:</strong></p>
<ul>
<li>
Design and Prototyping Tools: Proficient in tools like Adobe XD,
Sketch, or Figma for UI/UX design and prototyping.
</li>
<li>
Front-end Development Languages and Frameworks: Skilled in HTML,
CSS, JavaScript, and frameworks like React, Angular, or Vue.js.
</li>
<li>
Usability and Accessibility Tools: Using tools for conducting
usability tests and ensuring accessibility.
</li>
</ul>
<p><strong>Collaboration and Communication:</strong></p>
<ul>
<li>
Engaging with cross-functional teams including developers, product
managers, and stakeholders.
</li>
<li>
Communicating design ideas, prototypes, and interaction designs to
align with project goals.
</li>
</ul>
<p><strong>Continuous Learning and Adaptation:</strong></p>
<ul>
<li>
Staying updated with the latest trends in UX/UI design,
interaction design, and front-end development.
</li>
<li>
Adapting to new design tools, technologies, and methodologies.
</li>
</ul>
<h3>2.4 — Web Test Engineering</h3>
<p>
Test Engineering, within the context of front-end development,
involves rigorous testing of web applications and websites to ensure
functionality, performance, coding, and usability standards. This
area of focus is crucial for maintaining the quality and reliability
of web products.
</p>
<p><strong>Key Responsibilities:</strong></p>
<ul>
<li>
Developing and Implementing Test Plans: Creating comprehensive
test strategies for various aspects of web applications.
</li>
<li>
Automated Testing: Using automated frameworks and tools for
efficient testing.
</li>
<li>
Manual Testing: Complementing automated tests with manual testing
approaches.
</li>
<li>
Bug Tracking and Reporting: Identifying and documenting bugs, and
communicating findings for resolution.
</li>
<li>
Cross-Browser and Cross-Platform Testing: Ensuring consistent
functionality across different browsers and platforms.
</li>
<li>
Performance Testing: Evaluating web applications for speed and
efficiency under various conditions.
</li>
<li>
Security Testing: Assessing applications for vulnerabilities and
security risks.
</li>
</ul>
<p><strong>Tools and Technologies:</strong></p>
<ul>
<li>
Testing Frameworks and Tools: Familiarity with tools like
Selenium, Jest, PlayWright, and Cypress.
</li>
<li>
Bug Tracking Tools: Using tools like JIRA, Bugzilla, or Trello for
bug tracking.
</li>
</ul>
<p><strong>Collaboration and Communication:</strong></p>
<ul>
<li>
Working with developers, designers, and product managers to ensure
comprehensive testing.
</li>
<li>
Communicating test results, bug reports, and quality metrics
effectively.
</li>
</ul>
<p><strong>Continuous Learning and Adaptation:</strong></p>
<ul>
<li>
Staying updated with the latest testing methodologies and tools.
</li>
<li>
Adapting to new technologies and frameworks in the evolving field
of web development.
</li>
</ul>
<h3>2.5 — Web Performance Engineering</h3>
<p>
Web Performance Engineering is a specialized area within front-end
development focused on optimizing the performance of websites and
web applications. This field impacts user experience, search engine
rankings, and overall site effectiveness. The primary goal is to
ensure web pages load quickly and run smoothly.
</p>
<p><strong>Key Responsibilities:</strong></p>
<ul>
<li>
Performance Analysis and Benchmarking: Assessing current
performance, identifying bottlenecks, and setting benchmarks.
</li>
<li>
Optimizing Load Times: Employing techniques for quicker page
loads.
</li>
<li>
Responsive and Efficient Design: Optimizing resource usage in web
designs.
</li>
<li>
Network Performance Optimization: Improving data transmission over
the network.
</li>
<li>
Browser Performance Tuning: Ensuring smooth operation across
different browsers.
</li>
<li>
JavaScript Performance Optimization: Writing efficient JavaScript
to enhance site performance.
</li>
<li>
Testing and Monitoring: Regularly testing and monitoring for
performance issues.
</li>
</ul>
<p><strong>Tools and Technologies:</strong></p>
<ul>
<li>
Performance Testing Tools: Using tools like Google Lighthouse and
WebPageTest.
</li>
<li>
Monitoring Tools: Utilizing tools for ongoing performance
tracking.
</li>
</ul>
<p><strong>Collaboration and Communication:</strong></p>
<ul>
<li>
Working with web developers, designers, and backend teams for
integrated performance considerations.
</li>
<li>
Communicating the importance of performance to stakeholders.
</li>
</ul>
<p><strong>Continuous Learning and Industry Trends:</strong></p>
<ul>
<li>
Staying updated with web performance optimization techniques and
technologies.
</li>
<li>
Keeping pace with evolving web standards and best practices.
</li>
</ul>
<h3>2.6 — Web Accessibility Engineering</h3>
<p>
A Web Accessibility Engineer is tasked with ensuring that web
products are universally accessible, particularly for users with
disabilities. Their role encompasses a thorough understanding and
implementation of web accessibility standards, the design of
accessible user interfaces, and rigorous testing to identify and
address accessibility issues.
</p>
<p><strong>Key Responsibilities:</strong></p>
<ul>
<li>
Mastery of the Web Content Accessibility Guidelines (WCAG) is
essential.
</li>
<li>
Involves designing and adapting websites or applications to be
fully usable by people with various impairments.
</li>
<li>
Conducting regular assessments of web products to pinpoint and
rectify accessibility obstacles.
</li>
</ul>
<p><strong>Tools and Technologies:</strong></p>
<ul>
<li>
Utilization of screen readers, accessibility testing tools, and
browser-based accessibility tools.
</li>
<li>
Application of HTML, CSS, ARIA tags, and JavaScript in developing
accessible web designs.
</li>
</ul>
<p><strong>Collaboration and Advocacy:</strong></p>
<ul>
<li>
Engaging in teamwork with designers, developers, and stakeholders.
</li>
<li>
Championing the cause of accessibility and universal web access.
</li>
</ul>
<p><strong>Continuous Learning and Updates:</strong></p>
<ul>
<li>
Staying current with the latest developments in accessibility
standards and technology.
</li>
<li>
Enhancing skills and knowledge to tackle new accessibility
challenges.
</li>
</ul>
<p><strong>Legal and Ethical Considerations:</strong></p>
<ul>
<li>
Understanding legal frameworks like the Americans with
Disabilities Act (ADA).
</li>
<li>
Upholding an ethical commitment to digital equality and
inclusivity.
</li>
</ul>
<h3>2.7 — Web Game Development</h3>
<p>
Web Game Development involves creating interactive and engaging
games that run directly in web browsers. This area of focus is
distinct from traditional game development primarily due to the
technologies used and the platform (web browsers) on which the games
are deployed.
</p>
<ul>
<li>
<strong>Technologies and Tools -</strong> Web game developers
often use HTML, CSS, and JavaScript as the core technologies. HTML
allows for more interactive and media-rich content, essential for
game development. JavaScript is used for game logic and dynamics,
and WebGL is employed for 2D and 3D graphics rendering.
</li>
<li>
<strong>Frameworks and Libraries -</strong> Several
JavaScript-based game engines and frameworks facilitate web game
development. Examples include Phaser for general purposes,
Three.js for 3D games, and Pixi.js for 2D games.
</li>
<li>
<strong>Game Design -</strong> Web game development involves game
design elements like storyline creation, character design, level
design, and gameplay mechanics. The developer needs to create an
engaging user experience within the constraints of a web browser.
</li>
<li>
<strong>Performance Considerations -</strong> Developers must
optimize games for performance, ensuring quick loading, smooth
operation, and responsiveness. Techniques include using
spritesheet animations and minimizing heavy assets.
</li>
<li>
<strong>Cross-Platform and Responsive Design -</strong> Games must
work well across different browsers and devices, requiring a
responsive design approach and thorough testing on various
platforms.
</li>
<li>
<strong>Monetization and Distribution -</strong> Web games can be
monetized through in-game purchases, advertisements, or direct
sales. They are accessible directly through a web browser without
downloads or installations.
</li>
<li>
<strong>Community and Support -</strong> The web game development
community is vibrant, with numerous forums, tutorials, and
resources available for developers at all levels.
</li>
</ul>
<p>
Web game development, as an area of focus in front-end development,
combines creativity in game design with technical skills in web
technologies, offering a unique and exciting field for developers
interested in both gaming and web development.
</p>
</div>
<div class="chapter" id="chapter3">
<h2>3. Learning / Education / Training</h2>
<section class="sub">
<p>