Front-End Developer Handbook 2019 - Compressed - Removed-1
Front-End Developer Handbook 2019 - Compressed - Removed-1
Handbook 2019
Written by Cody Lindley
Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-
end engineering courses
Overview:
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.
The intention is to release an update to the content yearly. This is currently the
fourth year an edition has been released.
Chapter 0 provides a lite recap of the year in front-end development and what may
be to come. Chapter 1 & 2 aim to give a brief overview of the discipline and practice
of front-end development. Chapters 3 & 4 organize and recommend learning paths
and resources. Chapter 5 organizes and list the tools used by front-end developers
and Chapter 6 highlights front-end information outlets.
React had several notable releases this past year that included, lifecycle methods,
context API, suspense, and React hooks.
What I used to call front-end driven apps, gets labeled "serverless". Unfortunately,
this term is overloaded. However, the term JAMstack does seem to be resonating
with developers.
Google offered some neat tools this year to help make webpages load faster, i.e.
squoosh and quicklink.
Vue gets more Github stars than React this year. But React remains dominant in
terms of use.
This year, like most recent years, was stock full of app/framework solutions trying to
contend with the mainstream JavaScript app tools (i.e. React, Angular, and Vue
etc...) Let me list them for you. Radi.js, DisplayJS, Stimulus, Omi, Quasar.
JavaScript frameworks start offering their own languages that compile to JavaScript
(e.g. Mint).
CodeSandbox evolves to become the dominant solution for online code sharing.
CSS Grid and CSS Flexbox are fully supported in modern browsers and get taken for
some serious rides. But many are left wondering when to use which one and how.
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 more issues than solutions. 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.
Reason, Purescript, Elm).
ES modules are now usable in modern browsers and dynamic imports are close
behind. We are even seeing a shift in tooling around this fact.
Many realize that end to end testing is the starting point of doing tests correctly in
large part due to Cypress (i.e. Cypress first, then Jest).
While Webpack was heavily used again this year, many developers found Parcel to
be easier to get up and running.
One of the most important questions asked this year was, what is the cost of
JavaScript.
Babel 7 was released this year. That's a big deal because the last major release was
almost three years ago.
The reality of too much JavaScript change too fast is realized and people start
talking about what you need to know before you can even learn something like
React. The fight is real.
Most developers found GraphQL, via Apollo, and see it as the next evolution for
data API's.
Gulp and friends definitely took a back seat to NPM/Yarn run. But this did not stop
Microsoft from getting in the game with Just.
This year, one can not only lint/hint HTML, CSS, and JavaScript they can lint/hint the
web itself.
The 2018 Front-End Tooling survey is worth reading if only to realize just how much
jQuery is still used.
Still a good idea to keep an eye on and learn about the up coming additions (and
potential additions) to CSS via https://cssdb.org
The WebP image format from Google could reach support from all modern
browsers this year.
The, "State of JavaScript" survey authors will add a "State of CSS" survey in 2019.
Someone you know will try and convince you to use TypeScript.
Babel will get some competition from swc-project.
More, largely used projects will start to shed jQuery in favor of native DOM
solutions.
Web Components! 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.
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.
https://en.wikipedia.org/wiki/Front-end_web_development
A Front-end Developer...
A front-end developer architects and develops websites and web applications using
web technologies (i.e., HTML, CSS, and JavaScript), which typically runs on the
Open Web Platform or acts as compilation input for non-web platform environments
(i.e., React Native).
A web browser is software used to retrieve, present, and traverse information on the
WWW. 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.).
The most common web browsers are (shown in order of most used first):
Chrome
Safari
Firefox
Edge
Headless Browsers
Headless browsers are a web browser without 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.
Headless Chromium
Zombie
slimerjs
puppeteer
Webviews
Webviews are used by a native OS, in a native application, to run web pages. Think
of a webview like an iframe or a single tab from a web browser that is embedded in a
native application running on a device (e.g., iOS, android, windows).
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.
React Native
NativeScript
Notes:
l. Make sure you are clear what exactly is meant by the "web platform". Read the,
"Open Web Platform" Wikipedia page. Explore the many technologies that make up
the web platform.
This chapter will break down and broadly describes the practice of front-end
engineering starting with, "How Front-End Developers Are Made".
How exactly does one become a front-end developer? Well, it's complicated. Just
consider this road map:
Image source: https://github.com/kamranahmedse/developer-roadmap
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.
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).
l. Learn, roughly, how the web platform works. Make sure you know the "what" and
"where" of HTML, CSS, DOM, JavaScript, Domains, DNS, URLs, HTTP, browsers,
and servers/hosting. 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.
n. Learn HTML
o. Learn CSS
p. Learn JavaScript
q. Learn DOM
r. Learn the fundamentals of user interface design (i.e. UI patterns, interaction design,
user experience design, and usability).
u. Get opinionated and customize your tool box with whatever makes sense to your
brain (e.g. Webpack, React, and Mobx).
A short word of advice on learning. Learn the actual underlying technologies, before
learning abstractions. 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.
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 couple of dollars a
month for screencasting memberships, and a burning desire for knowledge.
For example, if you want to get going today, consuming one or more of the following
self-directed resources below can work:
freeCodeCamp [interactive][watch]
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.
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.
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. 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. JSX and
CSS in JS). 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.
Below is a list and description of various front-end job titles (Keep in mind titles are
hard). 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.
Front-End Developer: 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.
CSS/HTML Developer: The front-end job title that describes a developer who is
skilled at HTML and CSS, excluding JavaScript and application, know how.
Front-End Web Designer: 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.
Front-End Accessibility Expert: 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.
Front-End Dev. Ops: 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.
Front-End Testing/QA: 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.
Notes:
l. 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.
u. Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet
Applications (aka ARIA)
The nine technologies just mentioned are defined below along with a link to the
relevant documentation and specification for each technology.
— Wikipedia
Global attributes
— Wikipedia
CSS reference
Selectors Level 3
— Wikipedia
Most relevant specifications:
HTTP/2
— Wikipedia
— Wikipedia
W3C DOM4
UI Events
— Wikipedia
“ 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.
— Mozilla
“
communication (A JA J), largely replacing XML (used by A JAX). 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.
— Wikipedia
Introducing JSON
JSON API
Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet
Applications (aka ARIA)
Beyond the skills just mentioned, a front-end developer might also be specifically
skilled in one or more of the following:
Cross-Browser Testing
Cross-Platform Testing
Unit Testing
Cross-Device Testing
Accessibility / WAI-ARIA
User Experience
Usability
E-commerce Systems
Portal Systems
Wireframing
Load Testing
Performance Testing
Functional Programming
Regular Expressions
Microdata / Microformats
Object-Oriented Programming
Application Architecture
Modules
Dependency Managers
Package Managers
JavaScript Animation
CSS Animation
Charts / Graphs
UI Widgets
Integration Testing
Templating Strategies
Templating Engines
Web/Browser Security
A front-end developer crafts HTML, CSS, and JS that typically runs on the web
platform (e.g. a web browser) delivered from one of the following operating systems
(aka OSs):
Android
Chromium
iOS
OS X (i.e. MacOS)
Windows
These operating systems typically run on one or more of the following devices:
Desktop computer
Mobile phone
Tablet
TV
Watch
Things (i.e., anything you can imagine, car, refrigerator, lights, thermostat, etc.)
Image source: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/
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: NativeScript, React Native)
2.6 - Front-End on a Team
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.
A bare-bones development team for building professional web sites or software for
the web platform will typically, minimally, contain the following roles.
Visual Designer (i.e., fonts, colors, spacing, emotion, visuals concepts & themes)
Front-End Developer (i.e., writes code that runs in client/on the device)
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.
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.)
A larger web team might include the following roles not shown above:
SEO Strategists
DevOps Engineers
Performance Engineers
API Developers
Database Administrators
QA Engineers / Testers
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.
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.
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.
Preparing:
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.
authenticjobs.com
careers.stackoverflow.com
css-tricks.com/jobs
frontenddeveloperjob.com
glassdoor.com
jobs.github.com
linkedin.com
remote.co
weworkremotely.com
www.smashingmagazine.com/jobs/
Notes:
The national average in the U.S for a mid-level front-end developer is somewhere
between $65k and 100k.
Of course when you first start expect to enter the field at around 40k depending
upon location and experience.
Notes:
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.
— Wikipedia
Image source: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/
What Is the Internet? Or, "You Say Tomato, I Say TCP/IP" [read]
— Wikipedia
The most commonly used browsers (on desktop and mobile) are:
evolutionoftheweb.com [read]
Timeline of web browsers [read]
How Browsers Work: Behind the scenes of modern web browsers [read]
What Every Frontend Developer Should Know About Webpage Rendering [read]
Comparing Browsers
Browser Hacks
browserhacks.com [read]
In the past, front-end developers spent a lot of time making code work in several
different browsers. This was once a bigger issue than it is today. Today, abstractions
(e.g., React, Webpack, Post-CSS, Babel etc...) combined with modern browsers
make browser development fairly easy. The new challenge is not which browser the
user will use, but on which device they will run the browser.
Evergreen Browsers
The latest versions of most modern browsers are considered evergreen browsers.
That is, in theory, they are supposed to automatically update themselves silently
without prompting the user. This move towards self-updating browsers has been in
reaction to the slow process of eliminating older browsers that do not auto-update.
Picking a Browser
As of today, most front-end developers use Chrome and "Chrome Dev Tools" to
develop front-end code. However, the most used modern browsers all offer a flavor
of developer tools. Picking one to use for development is a subjective choice. The
more important issue is knowing which browsers, on which devices, you have to
support and then testing appropriately.
— Wikipedia
— Wikipedia
HTTP Specifications
HTTP/2
HTTP Docs
HTTP Videos/Articles/Tutorials
High Performance Browser Networking: What Every Web Developer Should Know
About Networking and Web Performance [read]
MDN: An overview of HTTP [read]
HTTP: The Protocol Every Web Developer Must Know - Part 1 [read]
HTTP: The Protocol Every Web Developer Must Know - Part 2 [read]
— Wikipedia
CORS Specifications
CORS
CORS in Action [read][$]
— Wikipedia
WebSockets
— Wikipedia
General Learning:
Web Hosting 101: Get Your Website Live on the Web in No Time [video]