Front-End Developer Handbook 2019 PDF
Front-End Developer Handbook 2019 PDF
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]
Image source: https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg
freeCodeCamp [interact]
Front-End Web Development Quick Start With HTML5, CSS, and JavaScript [watch]
[$]
web.dev [read]
— Wikipedia
— Wikipedia
— Wikipedia
— Wikipedia
Minimally I'd suggest reading the following canonical texts on the matter so one can
support and potential build usable user interfaces.
Designing Web Interfaces: Principles and Patterns for Rich Interactions [read][$]
— Wikipedia
CSS - 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.
— Wikipedia
Liken to constructing a house, one might consider HTML the framing and CSS to be
the painting & decorating.
General Learning:
Front-End Web Development Quick Start With HTML5, CSS, and JavaScript [watch]
[$]
MarkSheet [read]
Mastering CSS:
CSS3 [read]
CSS In-Depth, v2 [watch][$]
What the Flexbox?! A Simple, Free 20 Video Course That Will Help You Master CSS
Flexbox [watch]
References/Docs:
cssreference.io
cssvalues.com
Glossary/Vocabulary:
CSS Vocabulary
Standards/Specifications:
Global Attributes
Selectors Level 3
Architecting CSS:
BEM
ITCSS
OOCSS [read]
SMACSS [read][$]
SUIT CSS
rscss
Authoring/Architecting Conventions:
css-architecture
cssguidelin.es [read]
MaintainableCSS [read]
Standards for Developing Flexible, Durable, and Sustainable HTML and CSS [read]
3.9 - Learn Search Engine Optimization
— Wikipedia
Image source: https://visual.ly/community/infographic/computers/how-does-seo-work
General Learning:
— Wikipedia
Getting Started:
javascript.info
General Learning:
Modern JavaScript Cheatsheet - Cheatsheet for the JavaScript knowledge you will
frequently encounter in modern projects. [read]
Mastering:
JS MythBusters [read]
doesitmutate.xyz [read]
Functional JavaScript:
Functional-Light-JS [read]
References/Docs:
Glossary/Encyclopedia/Jargon:
JavaScript Glossary
Standards/Specifications:
How to Read the ECMAScript Specification
Style:
JS Explorers/Visualizers:
JavaScript Visualizer
— Wikipedia
— Wikipedia
jQuery - jQuery is a cross-platform JavaScript library designed to
simplify the client-side scripting of HTML. jQuery is the most popular
JavaScript library in use today, with installation on 65% of the top 10
million highest-trafficked sites on the Web. jQuery is free, open-source
software licensed under the MIT License.
— Wikipedia
The ideal path, but certainly the most difficult, would be to first learn JavaScript,
then the DOM, then jQuery. However, do what makes sense to your brain. Most
front-end developers learn about JavaScript and then DOM by way of first learning
jQuery. Whatever path you take, just make sure JavaScript, the DOM, and jQuery
don't become a black box.
General Learning:
Mastering:
References/Docs:
jQuery Docs
Events
Standards/Specifications:
W3C DOM4
Web Animation using JavaScript: Develop & Design (Develop and Design) [$][read]
Standards/Specifications:
Web Animations
“ Web typography refers to the use of fonts on the World Wide Web.
When HTML was first created, font faces and styles were controlled
exclusively by the settings of each Web browser. There was no
mechanism for individual Web pages to control font display until
Netscape introduced the <font> tag in 1995, which was then
standardized in the HTML 3.2 specification. However, the font specified
by the tag had to be installed on the user's computer or a fallback font,
such as a browser's default sans-serif or monospace font, would be
used. The first Cascading Style Sheets specification was published in
1996 and provided the same capabilities.
— Wikipedia
Fonts:
Beautiful Web Type a Showcase of the Best Typefaces from the Google Web Fonts
Directory [read]
Icons:
[read] [watch]
Images:
— Wikipedia
General Learning:
Universal Design for Web Applications: Web Applications That Reach Everyone
[read][$]
A11ycasts [watch]
Standards/Specifications:
The BOM (Browser Object Model) and the DOM (Document Object Model) are not
the only browser APIs that are made available on the web platform inside of
browsers. Everything that is not specifically the DOM or BOM, but an interface for
programming the browser could be considered a web or browser API (tragically in
the past some of these APIs have been called HTML5 APIs which confuses their own
specifics/standardize with the actual HTML5 specification specifying the HTML5
markup language). Note that web or browser APIs do include device APIs (e.g.,
Navigator.getBattery()) that are available through the browser on tablet and
phones devices.
You should be aware of and learn, where appropriate, web/browser APIs. A good tool
to use to familiarize oneself with all of these APIs would be to investigate the
HTML5test.com results for the 5 most current browsers.
MDN WebAPI - Lists Device Access APIs and Other APIs Useful for Applications
Keep in mind that not every API is specified by the W3C or WHATWG.
In addition to MDN, you might find the following resources helpful for learning about
all the web/browser API's:
HTML5 Overview
platform.html5.org
— Wikipedia
General Learning:
json.com [read]
References/Docs:
json.org [read]
Standards/Specifications:
RFC 7159 The JavaScript Object Notation (JSON) Data Interchange Format
STD 90 - RFC 8259 - The JavaScript Object Notation (JSON) Data Interchange
Format, DECEMBER 2017
Architecting:
JSON API
A JavaScript template is typically used, but not always with a MV* solution to
separate parts of the view (i.e., the UI) from the logic and model (i.e., the data or
JSON).
[read][$]
Note that JavaScript 2015 (aka ES6) added a native templating mechanism called
"Templates strings". Additionally, templating as of late has been replaced by things
like JSX, a template element, or HTML strings.
If I was not using React & JSX I'd first reach for JavaScript "Templates strings" and
when that was lacking move to nunjucks.
General Learning:
JAMstack [read]
Working with Static Sites - Bringing the Power of Simplicity to Modern Sites [read]
[$]
Terrific [read]
Not a lot of general content is being created on this topic as of late. Most of the
content offered for learning how to build front-end/SPA/JavaScript applications
presupposes you've decided up a tool like Angular, Ember, React, or Aurelia.
Learning React:
React [read]
!
Mastering React:
React + Mobx codebase containing real world examples (CRUD, auth, advanced
patterns, etc) that adheres to the RealWorld spec and API. [code]
Once you have a good handle on React move on to learning a more robust state
management solution like MobX. If you are an experienced developer with Functional
Programming knowledge look at Redux. If you need help understanding the role of
state management beyond React's setState watch, "Advanced State Management
in React (feat. Redux and MobX)".
“
modern browsers with the benefits of mobile experience.
— Wikipedia
Why Native Apps Really are Doomed: Native Apps are Doomed pt 2 [read]
“ Web development tools allow web developers to test and debug their
code. They are different from website builders and IDEs in that they do
not assist in the direct creation of a webpage, rather they are tools used
for testing the user facing interface of a website or web application.
— Wikipedia
While most browsers come equipped with web developer tools, the Chrome
developer tools are currently the most talked about and widely used.
I'd suggest learning and using the Chrome web developer tools, simply because the
best resources for learning web developer tools revolves around Chrome DevTools.
Per-Panel Documentation
— Wikipedia
General Learning:
Mastering:
— Wikipedia
General Learning:
References/Docs:
MDN - export
MDN - import
Webpack:
Webpack [read]
Rollup:
Rollup [read]
Microbundle
Parcel
Parcel [read]
3.31 - Learn Package Manager
— Wikipedia
General Learning:
The Mystical & Magical SemVer Ranges Used By npm & Bower [read]
npm docs
yarn docs
“
also known as revision control or source control, is the management of
changes to documents, computer programs, large web sites, and other
collections of information. Changes are usually identified by a number
or letter code, termed the "revision number," "revision level," or simply
"revision." For example, an initial set of files is "revision 1." When the
first change is made, the resulting set is "revision 2," and so on. Each
revision is associated with a timestamp and the person making the
change. Revisions can be compared, restored, and with some types of
files, merged.
— Wikipedia
The most common solution used for version control today is Git. Learn it!
General Learning:
Mastering:
References/Docs:
https://git-scm.com/doc
git-cheatsheet
— Wikipedia
General Learning:
References/Docs:
Gulp
Gulp is great. However, you might only need npm run. Before turning to additional
complexity in your application stack ask yourself if npm run can do the job. If you
need more, use Gulp.
Read:
— Wikipedia
General Learning:
Even Faster Web Sites: Performance Best Practices for Web Developers [read][$]
High Performance Web Sites: Essential Knowledge for Front-End Engineers [read]
[$]
perf-tooling.today [read]
perf.rocks [read]
— Wikipedia
Functional Testing - Functional testing is a quality assurance (QA)
process and a type of black box testing that bases its test cases on the
specifications of the software component under test. Functions are
tested by feeding them input and examining the output, and internal
program structure is rarely considered (not like in white-box testing).
Functional testing usually describes what the system does.
— Wikipedia
— Wikipedia
General Learning:
The Way of the Web Tester: A Beginner's Guide to Automating Tests [read][$]
Learn Javascript Unit Testing With Mocha, Chai and Sinon [watch][$]
— Wikipedia
Offline development (aka offline first) is an area of knowledge and discussion around
development practices for devices that are not always connected to the Internet or a
power source.
General Learning:
offlinefirst.org [read]
Offline Quickstart[read]
Hacksplaining [read]
Security for Web Developers: Using JavaScript, HTML, and CSS [read][$]
A website or web application can run on a wide range of computers, laptops, tablets
and phones, as well as a handful of new devices (watches, thermostats, fridges,
etc.). How you determine what devices you'll support and how you will develop to
support those devices is called, "multi-device development strategy". Below, I list the
most common multi-device development strategies.
Build a website, web app, native app, or hybrid-native app for each individual device
or a grouping of devices.
Attempt to retrofit something you have already built using bits and parts from
strategies 1, 2 or 3.
General Learning:
This chapter highlights a few options for instructor directed learning via
front-end development schools, courses, programs, and bootcamps.
The table below contains a small selection of instructor-led courses (i.e. programs,
schools, and bootcamps). Use the table to get a general idea of what is available, the
cost, duration, and locations of courses. (Be aware the information can change
quickly)
re
price
m
company program estim on site duration
ot
ate
e
multiple
Front-end Web 3 hrs/day 2 days/wk
General Assembly 3,500 location
Development for 8 weeks
s
300
Front-end Web ye 15 hrs/wk for 3
Thinkful per
Development s months
month
Turing School of
Front-End Denver,
Software & 20,000 7 months full time
Engineering CO
Design
Notes:
l. For a complete list of schools, courses, programs, and bootcamps to evaluate have a
look at switchup.org or coursereport.com.
If you can't afford a directed education (can be very expensive), a self directed
education using screencasts, books, and articles is a viable alternative to learn front-
end development for the self-driven individual.
This chapter identifies the tools of the trade. Make sure you understanding
the category that a set of tools falls within, before studying the tools
themselves. Note that just because a tool is listed, or a category of tools is
documented, this does not equate to an assertion on my part that a front-
end developer should learn it and use it. Choose your own toolbox. I'm just
providing the common toolbox options.
DevDocs
Velocity [Windows][$]
devhints.io
Keyword Tool
Creating:
Axure [$]
Justinmind [$]
Moqups [$]
proto.io [$]
UXPin [free to $]
Collaboration / Presenting:
InVision [free to $]
Conceptboard [free to $]
myBalsamiq [$]
Marvel [free to $]
draw.io [free to $]
Cacoo [free to $]
gliffy [free to $]
sketchboard.io [$]
Charles [$]
Insomnia [free - $]
Mitmproxy [free]
Paw [$]
Postman [free - $]
5.6 - Code Editing Tools
— Wikipedia
Front-end code can minimally be edited with a simple text editing application like
Notepad or TextEdit. But, most front-end practitioners use a code editor specifically
design for editing a programming language.
Code editors come in all sorts of types and size, so to speak. Selecting one is a
rather subjective engagement. Choose one, learn it inside and out, then get on to
learning HTML, CSS, DOM, and JavaScript.
However, I do strongly believe, minimally, a code editor should have the following
qualities (by default or by way of plugins):
s. Be small, simple, and not coupled to the code (i.e., not required to edit the code)
Code Editors:
Atom
WebStorm [$]
PaizaCloud [free to $]
Codeanywhere [free to $]
StackBliz
codeSandbox
Used to share limited amounts of immediately runnable code. Not a true code editor
but a tool that can be used to share small amounts of immediately runnable code in a
web browser.
CodePen [free to $]
jsbin.com [free to $]
jsfiddle.net
glitch
I recommending using Visual Studio Code because of the quality of the tool and the
continuous improvements made to the editor that likely won't stop or slow due to the
fact that Microsoft is behind the tool. It is widely used:
History.js
html2canvas
Platform.js
URI.js
caniuse.com
HTML5 Please
HTML5 Test
iwanttouse.com
web-platform-tests dashboard
whatwebcando.today
Per-Panel Documentation
Settings
Vorlon.js
Feature.js
Modernizr
console-polyfill
HTML5 Cross Browser Polyfills
fetch
socket.io
SockJS
webcomponents.js
webshim
Browserling [free to $]
BrowserStack [$]
CrossBrowserTesting.com [$]
Nightcloud.io
Headless Browsers:
slimerjs
Zombie.js
Headless Chromium
Browser Automation:
CasperJS
Nightmare
TestCafe
Browser Hacks:
browserhacks.com
Browsersync
Browser List:
Share target browsers between different front-end tools, like Autoprefixer, Stylelint
and babel-preset-env.
Browserslist
http://browserl.ist/
dCodes
Email-Boilerplate
HTML5 Boilerplate
HTML5 Bones
Mobile boilerplate
HTML Polyfill:
html5shiv
Transpiling:
Pug
Markdown
References:
Element attributes
Elements
HTML Arrows
htmlreference.io
Linting/Hinting:
HTMLHint
html-inspector
Optimizer:
HTML Minifier
tablesgenerator.com
Authoring Conventions:
Emmet
HTML Outliner:
HTML 5 Outliner
https://github.com/trending?l=html&since=monthly
CSS Utilities:
Basscss
Skeleton
Shed
Tailwind CSS
Tachyons
Base
Bulma
Bootstrap 4
Concise
Foundation
Material Design Lite (MDL)
Metro UI
Mini.css
Mobi.css
Picnic
Pure.css
Semantic UI
Shoelace
Spectre.css
Ratchet
CSS Reset:
“ A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set
of CSS rules that resets the styling of all HTML elements to a consistent
baseline.
— cssreset.com
Normalize
sanitize.css
Transpiling:
pleeease.io
References:
CSS Cursors
css3test.com
css3clickchart.com
cssreference.io
css4-selectors.com
css4 Rocks
cssvalues.com
Linting/Hinting:
CSS Lint
stylelint
Code Formatter/Beautifier:
CSScomb
CSSfmt
Optimizer:
clean-css
cssnano
CSSO
purgecss
CSS Matic
Enjoy CSS
flexplorer
patternify.com
patternizer.com
Architecting CSS:
BEM
ITCSS
OOCSS [read]
SMACSS [read][$]
SUIT CSS
rscss
Authoring/Architecting Conventions:
css-architecture [read]
cssguidelin.es [read]
MaintainableCSS [read]
Standards for Developing Flexible, Durable, and Sustainable HTML and CSS [read]
Frontify [$]
styleguide-generators
Catalog
CSS in JS:
styled components
Emotion
Radium
Aphrodite
https://github.com/trending?l=css&since=monthly
5.10 - DOM Tools
DOM Libraries/Frameworks:
Bliss
jQuery
Zepto
cash
Umbrella JS
nanoJS
DOM Utilities:
Keypress
Tether
clipboard.js
DOM Monster
References:
Events
DOM Polyfills/Shims:
dom-shims
Pointer Events Polyfill: a unified event system for the web platform
Virtual DOM:
jsdom
virtual-dom
JS Utilities:
accounting.js
async
axios
chance
date-fns
dinero
Finance.js
format.js
Howler.js
immutable
is.js
lodash
You-Dont-Need-Lodash-Underscore
Luxon
Math.js
Moment.js
Numeral.js
Ramda
RxJS
TheoremJS
voca
wait
xregexp.com
transform-www
Flow
Babel
sucrase
scw
Code-analysis Engine:
Tern
eslint
Unit Testing:
AVA
Jasmine
Mocha
Tape
Chai
expect.js
should.js
Kakapo.js
Code Formater/Beautifier:
esformatter
js-beautify
jsfmt
prettier
Performance Testing:
benchmark.js
jsperf.com
Coveralls [$]
Esprima
istanbul
Optimizer:
Closure Compiler
Terser
optimize-js
Prepack
Obfuscate:
JScrambler [$]
Sharable/Runnable Code Editors:
CodeSandbox [free to $]
debuggex
regex101
regexper
RegExr
https://github.com/trending?l=javascript&since=monthly
https://www.npmjs.com/browse/depended
headless CMS
5.13 - Static Site Generators Tools
staticgen.com
staticsitegenerators.net
Guides
Site Scanners
Colorable
Colorable Matrix
Color Safe
Color Ratio
Low-Vision Simulators
SEE (Chrome)
Spectrum (Chrome)
NoCoffee (Chrome)
Screen Readers
VoiceOver (Mac)
JAWS (Win)
NVDA (Win)
Readability Testers
Expresso App
Hemingway App
Grammarly
Readability Score
MS Office
Articles
Polymer
Riot
ionic
onsen.io
cocoon.io [free to $]
kony [$]
Monaca [$]
Electron
NW.js
proton
Neutralino.js
DeskGap
These solutions use a JS engine at runtime to interpret JS and bridge that to native
APIs. No browser engine or WebView is used. The UI is constructed from native UI
components.
Flutter
NativeScript
React Native
tabris.js [free to $]
trigger.io [$]
weex
References & demo apps:
todomvc.com
Front-end Guidelines
Performance:
js-framework-benchmark
If you are new to front-end/JavaScript application development I'd start with Vue.js.
Then I'd work my way to React. Then I'd look at Angular 2+, Ember, or Aurelia.
If you are building a simple website that has minimal interactions with data (i.e.
mostly a static content web site), you should avoid a front-end framework. A lot of
work can be done with a task runner like Gulp and jQuery, while avoiding the
unnecessary complexity of learning and using an app framework tool.
JSUI
5.17 - State Tools
Redux
Mobx
mobx-state-tree
Cerebral
freactal
unistore
unstated
Vuex
lighthouse
CodeKit
Prepros
KoalaApp [free]
5.20 - Templating/Data Binding Tools
Just Templating:
doT.js
art-template
Nunjuncks
ractive.js
react.js
preact
inferno
nerv
rax
riot
Rivets.js
vue.js
JSX
On Web Platform:
Kendo UI for jQuery [free to $]
Materialize
Office UI Fabric
Semantic UI
UiKit
Webix [$]
Ant Design
Material ui
Semantic-UI-React
ExtReact [$]
Fabric
Native Desktop/Laptop/Netbook Apps via Web Platform (i.e. used with NW.js and
Electron):
Photon
If you need a basic set of UI Widgets/Components start with Semantic UI. If you are
building something that needs a grid, spreadsheet, or pivot grid you'll have to look at
Kendo UI or Webix. Keep in mind that most of these solutions still require jQuery.
JS Libraries:
d3
sigmajs
amCharts [free to $]
C3.js
Chartist-jsj
Chart.js
Epoch
FusionCharts [$]
Google Charts
ZingChart [free to $]
Services (i.e. hosted data visualization services for embedding and sharing):
ChartBlocks [free to $]
Datawrapper
infogr.am [free to $]
plotly [free to $]
General:
Fabric.js
Two.js
Canvas:
EaselJS
Paper.js
SVG:
d3
GraphicsJS
Raphaël
Snap.svg
svg.js
WebGL:
pixi.js
three.js
Animate Plus
Animate
Anime.js
Animista.net
Dynamics.js
GreenSock-JS
Kute.js
Magic
Micron.js
Motion
TweenJS
Popmotion
Velocity.js
Polyfills/Shims:
web-animations-js
Animation References:
canianimate.com
Online Editors:
JSONmate
Query Tools:
DefiantJS
JSON Mask
ObjectPath
JSON Generator
Mockaroo [free to $]
FillText.com
FakeJSON [free to $]
Jam API
JSONPlaceholder
jsonbin.io
jsonbin.org
mockable.io
mockapi.io
Mocky
json-server
JSON Specifications/Schemas:
{json:api}
Images:
placehold.it
Satyr
Placeimg
Lorem Pixel
LibreStock
Unsplash
Device Mockups:
placeit.net
mockuphone.com
Text:
baconipsum.com (API)
User Data:
uinames.com
randomuser.me
Intern
Jest
majestic
Enzyme
Cheerio
Unit Testing:
AVA
Jasmine
Mocha
Tape
Chai
expect.js
should.js
sinon.js
Kakapo.js
Browserling [$]
BrowserStack [$]
CrossBrowserTesting.com [$]
Nightcloud.io
Integration/Functional Testing:
Cypress
Nightwatch
WebDriver.io
Browser Automation:
CasperJS
Nightmare
TestCafe
UI Testing Tools:
gremlins.js
Percy
BackstopJS
PhantomCSS
Ghost Inspector
diff.io
Monkey Test It
HTTP Stubbing
Polly.JS
AlaSQL
Dexie.js
LocalForage
LokiJS
Lovefield
lowdb
Pouchdb
NeDB
RxDB
ImmortalDB
5.29 - Module Loading/Bundling Tools
Parcel
Rollup
Microbundle
webpack
Poi
jetpack
Fusebox
Browserify
NPM
yarn
PNPM
General
AWS [$]
DigitalOcean [$]
WebFaction [$]
Static
netlify [free to $]
Bitballoon
Surge [free to $]
Forge [$]
Assembla [free to $]
Bitbucket [free to $]
Codebase [$]
Github [free to $]
GitLab [free to $]
Unfuddle [$]
Mattermost [free to $]
Gitter [free to $]
Contentful [$]
prismic.io [free to $]
Headless
Cockpit
Directus 7 App
Hosted CMS:
LightCMS [$]
webhook.com
Dato CMS
siteleaf
forestry.io
Backendless
Firebase [free to $]
Pusher [free to $]
restdb.io [free to $]
MongoDB Stitch
Data/back-end
GraphQL
Apollo
Relay
Falcor
RxDB
Auth0 [$]
AuthRocket
Okta
Search
Algolia
Hoodie
Offline.js
PouchDB
upup
Workbox
Coding Tool:
DOMPurify
XSS
Security Scanners/Evaluators/Testers:
Netsparker
Websecurify
OWASP ZAP
References:
HTML5 Security Cheatsheet
Tasking/Build Tools:
Gulp
Brunch
Before reaching for Gulp make sure npm scripts or yarn script won't fit the bill. Read,
"Why I Left Gulp and Grunt for npm Scripts".
Bamboo [$]
Buddy [free to $]
CircleCI [free to $]
Codeship [free to $]
Deploybot [free to $]
Deployhq [free to $]
FTPLOY [free to $]
Now [free to $]
Travis CI [free to $]
Semaphore [free to $]
Springloops [free to $]
Uptime Monitoring:
Pingdom [free to $]
New Relic
Uptrends [$]
bugsnag [$]
errorception [$]
Honeybadger [$]
Raygun [$]
Rollbar [free to $]
Sentry [free to $]
TrackJS [$]
5.42 - Performance Tools
Reporting:
bundlephobia.com
GTmetrix
sitespeed.io
Sonarwhal
webhint.io
Datadog [$]
Lighthouse
JS Tools:
imagemin
ImageOptim-CLI
Budgeting:
performancebudget.io
References/Docs:
Jank Free
Checklist:
built with
frontendtools.com
javascripting.com
js.coach
JSter
npms
stackshare.io
Unheap
bestof.js.org
libraries.io
docz
ESDoc
JSDoc
documentjs
Chapter 6. Front-end Communities,
Newsletters, News Sites, & Podcasts
Dev Tips
Front-End Front
Front-end Focus
ShopTalk Show
UX Design Newsletter
CSS-Tricks
syntax.
HTML/CSS Newsletters:
Accessibility Weekly
CSS Weekly
csslayout.news
JavaScript Newsletters, News, & Podcasts:
Echo JS
ECMAScript Daily
ES.next News
JavaScript Jabber
JavaScript Kicks
JavaScript Weekly
React Status
JS Party
JAMStack Radio
My JavaScript Story
Front-End Communities
http://fedsonslack.com/
front-end on spectrum.
Notes:
l. Need more Newsletters, News Sites, & Podcasts look at Awesome Newsletter.