Professional Documents
Culture Documents
Front End Handbook 2017
Front End Handbook 2017
of Contents
Introduction 1.1
What Is a Front-End Developer? 1.2
Recap of Front-end Dev in 2016 1.3
In 2017 expect... 1.4
Part I: The Front-End Practice 1.5
Front-End Jobs Titles 1.5.1
Common Web Tech Employed 1.5.2
Front-End Dev Skills 1.5.3
Front-End Devs Develop For... 1.5.4
Front-End on a Team 1.5.5
Generalist/Full-Stack Myth 1.5.6
Front-End interview questions 1.5.7
Front-End Job Boards 1.5.8
Front-End Salaries 1.5.9
How FDs Are Made 1.5.10
Part II: Learning Front-End Dev 1.6
Self Directed Learning 1.6.1
Learn Internet/Web 1.6.1.1
Learn Web Browsers 1.6.1.2
Learn DNS 1.6.1.3
Learn HTTP/Networks 1.6.1.4
Learn Web Hosting 1.6.1.5
Learn General Front-End Dev 1.6.1.6
Learn UI/Interaction Design 1.6.1.7
Learn HTML & CSS 1.6.1.8
Learn SEO 1.6.1.9
Learn JavaScript 1.6.1.10
Learn Web Animation 1.6.1.11
Learn DOM, BOM & jQuery 1.6.1.12
Learn Web Fonts 1.6.1.13
2
Learn Accessibility 1.6.1.14
Learn Web/Browser APIs 1.6.1.15
Learn JSON 1.6.1.16
Learn JS Templates 1.6.1.17
Learn Static Site Generators 1.6.1.18
Learn Computer Science via JS 1.6.1.19
Learn Front-End App Architecture 1.6.1.20
Learn Data API (i.e. JSON/REST) Design 1.6.1.21
Learn React & Redux 1.6.1.22
Learn Progressive Web App 1.6.1.23
Learn JS API Design 1.6.1.24
Learn Web Dev Tools 1.6.1.25
Learn Command Line 1.6.1.26
Learn Node.js 1.6.1.27
Learn JS Modules 1.6.1.28
Learn JS Module loaders/bundlers 1.6.1.29
Learn Package Managers 1.6.1.30
Learn Version Control 1.6.1.31
Learn Build & Task Automation 1.6.1.32
Learn Site Performance Optimization 1.6.1.33
Learn Testing 1.6.1.34
Learn Headless Browsers 1.6.1.35
Learn Offline Dev 1.6.1.36
Learn Web/Browser/App Security 1.6.1.37
Learn Multi-Device Dev (e.g., RWD) 1.6.1.38
Directed Learning 1.6.2
Front-End Schools, Courses, & Bootcamps 1.6.2.1
Front-End Devs to Learn From 1.6.3
Newsletters, News, & Podcasts 1.6.4
Part III: Front-End Dev Tools 1.7
Doc/API Browsing Tools 1.7.1
SEO Tools 1.7.2
Prototyping & Wireframing Tools 1.7.3
Diagramming Tools 1.7.4
3
HTTP/Network Tools 1.7.5
Code Editing Tools 1.7.6
Browser Tools 1.7.7
HTML Tools 1.7.8
CSS Tools 1.7.9
DOM Tools 1.7.10
JavaScript Tools 1.7.11
Static Site Generators Tools 1.7.12
Accessibility Dev Tools 1.7.13
App Frameworks (Desktop, Mobile etc.) Tools 1.7.14
Progressive Web App Tools 1.7.15
Scaffolding Tools 1.7.16
General FE Development Tools 1.7.17
Templating/Data Binding Tools 1.7.18
UI Widget & Component Toolkits 1.7.19
Data Visualization (e.g., Charts) Tools 1.7.20
Graphics (e.g., SVG, canvas, webgl) Tools 1.7.21
Animation Tools 1.7.22
JSON Tools 1.7.23
Placeholder Images/Text Tools 1.7.24
Testing Tools 1.7.25
Front-end Data Storage Tools 1.7.26
Module/Package Loading Tools 1.7.27
Module/Package Repo. Tools 1.7.28
Hosting Tools 1.7.29
Project Management & Code Hosting 1.7.30
Collaboration & Communication Tools 1.7.31
CMS Hosted/API Tools 1.7.32
BAAS (for Front-End Devs) Tools 1.7.33
Offline Tools 1.7.34
Security Tools 1.7.35
Tasking (aka Build) Tools 1.7.36
Deployment Tools 1.7.37
4
Site/App Monitoring Tools 1.7.38
JS Error Monitoring Tools 1.7.39
Performance Tools 1.7.40
Tools for Finding Tools 1.7.41
5
Introduction
6
Introduction
This is a guide that anyone could 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 2017.
It is specifically written with the intention of being a professional resource for potential and
currently practicing front-end developers to equip themselves with learning materials and
development tools. Secondarily, it can be used by managers, CTOs, instructors, and head
hunters to gain insights into the practice of front-end development.
The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript)
and those solutions that are directly built on top of these open technologies. The materials
referenced and discussed in the book are either best in class or the current offering to a
problem.
The book should not be considered a comprehensive outline of all resources available to a
front-end developer. The value of the book is tied up in a terse, focused, and timely curation
of just enough categorical information so as not to overwhelm anyone on any one particular
subject matter.
https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details
7
Introduction
https://github.com/FrontendMasters/front-end-handbook-2017
8
What Is a Front-End Developer?
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 architects and develops websites and applications using web
technologies (i.e., HTML, CSS, DOM, and JavaScript), which run on the web platform or act
as compilation input for non-web platform environments (i.e., NativeScript).
Typically, a person enters into the field of front-end development by learning to develop
HTML, CSS, and JS code, which runs in a web browser, headless browser, WebView, or as
compilation input for a native runtime environment. These four run times scenarios are
9
What Is a Front-End Developer?
explained below.
Web Browsers
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
Internet Explorer (Note: not Edge, referring to IE 9 to IE 11)
Firefox
Safari
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 from the command line that can retrieve and traverse web
pages.
PhantomJS
slimerjs
trifleJS
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. As of
late, development environments are being dreamed up that use web technologies (e.g., CSS
10
What Is a Front-End Developer?
NativeScript
React Native
NOTES:
Make sure you are clear what what exactly is meant by the "web platform". Read, "The Web
platform: what it is" and read the, "Open Web Platform" Wikipedia page.
11
Recap of Front-end Dev in 2016
12
Recap of Front-end Dev in 2016
The days of battling inconsistent browser API's are almost behind us due to a massive
decline in usage and development for older versions of IE.
Most everyone realized they will have to have a multi-device strategy plan when
developing for the web
More developers, from other languages, continue to flood the JavaScript space bringing
with them things like type checking and an obsession with class syntax and OOP
concepts.
Front-end devs are introduced to Hot Module replacement techniques and time travel
debugging.
More waiting for a native JavaScript browser module loader.
Enforcing CSS and JavaScript style conventions becomes more important (considering
ES3 to ES6 code and CSS pre-processors syntactical variations)
A small but noticeable number of developers are starting to choose Elm over
JavaScript.
TypeScript gets some serious use and fanboys.
http://aurelia.io/ becomes the smart choice for enterprise developers (i.e. support!).
Webpack gets its act together and solidifies is position over the superior JSPM solution.
HTTPS, yeah, we're serious about that.
BASH on windows happens.
The notifications API gets used and abused for chrome users, but only after you give it
permission.
Firebug officially dead.
CSS 20 years young in 2016.
Immutability concepts run rapid.
13
In 2017 expect...
In 2017 expect...
Web Assembly, might just peak.
import might just be usable in <scripts></scripts>
Universal JavaScript solutions will continue to rise that pay homage/respect to the days
of server delivered front-ends (i.e. html to the client).
Reactive programming continues to thrive in the JavaScript scene. (see MobX and
RxJS).
React, more so the concept, will dominate. React itself will be completely re-written (see
React Fiber) or evolve (see Inferno).
Angular found SEMVER so Angular 4 (even 5) is on the roadmap for 2017.
A return to simple websites may happen, web 1.0 retro, but with the help of 2017 tools
(i.e. static site generation)
RESTful JSON APIs will get more competition (see GraphQL)
Could be a banner year for Vue.js.
More devs will abandon traditional CMS solutions for static site generators & API CMS
tools.
More people will move from Sass to PostCSS + cssnext.
Lots more HTTP2 and HTTPS.
Web components will continue to lurk and wait for significant traction by developers that
might never come to be.
The no framework, framework, faction will gain momentum (see Svelte).
JavaScript will settle, and hopefully, CSS will erupt and everyone will cry fatigue until it
settles.
Hatred for apps store will grow, while the open web has no memory of wrong doing.
Redux will continue to get stiff competition (see mobx).
YARN will win more users.
The idea of “front-end apps”, “Thick Client apps”, “Static apps”, “No Backend app”,
“SPA's”, “Front-end driven app” might get boiled down to the term/concept called "JAM
Stack".
14
Part I: The Front-End Practice
15
Front-End Jobs Titles
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.
The job title given to a developer who comes from a computer science, engineering,
background and is using these skills to work with front-end technologies. This role typically
requires a computer science degree and years of software development experience. When
the word "JavaScript Application" is included in the job title, this will denote that the
developer should be an advanced JavaScript developer possessing advanced
programming, software development, and application development skills (i.e has years of
experience building front-end applications).
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.
When the word "Designer" is included in the job title, this will denote that the designer will
posses front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and
Interaction Design) skills.
16
Front-End Jobs Titles
When the word "Interface" or "UI" is included in the job title, this will denote that the
developer should posses interaction design skills in addition to front-end developer skills or
front-end engineering skills.
When the word "Mobile" or "Tablet" is included in the job title, this will denote that the
developer has experience developing front-ends that run on mobile or tablet devices (either
natively or on the web platform, i.e., in a browser).
When the word "SEO" is included in the job title, this will denote that the developer has
extensive experience crafting front-end technologies towards an SEO strategy.
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.
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 measurement.
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.
17
Front-End Jobs Titles
Note that 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.
18
Common Web Tech Employed
The following core web technologies are employed by front-end developers (consider
learning them in this order):
These technologies are defined below with the relevant documentation and specifications.
For a comprehensive list of all web related specifications have a look at platform.html5.org.
19
Common Web Tech Employed
— Wikipedia
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
20
Common Web Tech Employed
— Wikipedia
— 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
21
Common Web Tech Employed
— Wikipedia
— Wikipedia
— Wikipedia
Introducing JSON
JSON API
22
Common Web Tech Employed
Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet
Applications (aka ARIA)
— Wikipedia
23
Front-End Dev Skills
Basic to advanced HTML, CSS, DOM, JavaScript, HTTP/URL, and browser skills are
assumed for any type of front-end developer.
Beyond HTML, CSS, DOM, JavaScript, HTTP/URL, and browser development know-how, a
front-end developer could be skilled in one or more of the following:
24
Front-End Dev Skills
25
Front-End Devs Develop For...
Android
Chromium
iOS
OS X
Ubuntu (or some flavor of Linux)
Windows Phone
Windows
These operating systems typically run on one or more of the following devices:
Desktop computer
Laptop / netbook computer
Mobile phone
Tablet
TV
Watch
Things (i.e., anything you can imagine, car, refrigerator, lights, thermostat, etc.)
26
Front-End Devs Develop For...
27
Front-End on a Team
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 application
for the web platform will typically, minimally, contain the following roles.
Visual Designer (i.e., fonts, colors, spacing, emotion, visuals concepts & themes)
UI/Interaction Designer/Information Architect (i.e., wireframes, specifying all user
interactions and UI functionality, structuring information)
Front-End Developer (i.e., writes code that runs in client/on device)
Back-End Developer (i.e., writes code that runs on server)
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
API Developers
Database Administrators
QA Engineers / Testers
NOTES:
28
Generalist/Full-Stack Myth
Generalist/Full-Stack Myth
The roles required to design and develop a web solution require a deep skill set and vast
experience in the area of visual design, UI/interaction design, front-end development, and
back-end development. Any person who can fill one or more of these 4 roles at a
professional level is an extremely rare commodity.
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 and more than
likely mythical.
However, given that JavaScript has infiltrated all layers of a technology stack (e.g. React,
node.js, express, couchDB, gulp.js etc...) 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
29
Generalist/Full-Stack Myth
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.
NOTES:
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 would lead one to believe that the majority of developers are
full-stack developers. But, in my almost 20 years of experience, this is anything but the case.
30
Generalist/Full-Stack Myth
31
Front-End interview questions
Front-End Interviews
Questions you may get asked:
Preparing:
32
Front-End Job Boards
angularjobs.com
authenticjobs.com
careers.stackoverflow.com
css-tricks.com/jobs
codepen.io/jobs/
frontenddeveloperjob.com
glassdoor.com
jobs.emberjs.com
jobs.github.com
weworkremotely.com
fronthat.com
NOTES:
Looking for a remote front-end Job, check out these Remote-friendly companies
33
Front-End Salaries
Front-End Salaries
The national average in the U.S for a mid-level front-end developer is around $75k. Of
course when you first start expect to enter the field at around 35k depending upon location
and portfolio.
NOTES:
A lead/senior front-end developer/engineer can potentially live wherever they want (i.e., work
remotely) and make over $150k a year (visit angel.co, sign-up, review front-end jobs over
$150k or examine the salary ranges on Stack Overflow Jobs).
34
Front-End Salaries
35
How FDs Are Made
How exactly does one become a front-end developer? Well, it's complicated. Still today you
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 or come from a non accredited program, course, or
bootcamp.
If you were to set out today to become a front-end developer I would loosely strive to follow
the process outlined below (Part two, "Learning Front-End Dev", dives into more details on
learning resources).
1. Learn, roughly, how the web works. Make sure you know the "what" and "where" of
Domains, DNS, URLs, HTTP, networks, browsers, servers/hosting, JSON, data APIs,
HTML, CSS, DOM, and JavaScript. Don't dive deep on anything, just understand the
parts and loosely how they fit together. Focus on the high level outlines for front-end
architectures. Start with simple web pages and briefly study front-end applications (aka
36
How FDs Are Made
SPAs)
2. Learn HTML
3. Learn CSS
4. Learn JavaScript
5. Learn DOM
6. Learn JSON and data APIs
7. Learn the fundamentals of user interface design (i.e. UI patterns, interaction design,
user experience design, and usability).
8. Learn CLI/command line
9. Learn the practice of software engineering (i.e., Application design/architecture,
templates, Git, testing, monitoring, automating, code quality, development
methodologies).
10. Get opinionated and customize your tool box with whatever makes sense to your brain
(e.g. Webpack, React, and Redux).
11. Learn Node.js
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
HAML, learn HTML. Don't learn CoffeeScript, learn JavaScript. Don't learn Handlebars, learn
JavaScript ES6 templates. Don't just use Bootstrap, learn UI patterns.
When getting your start, you should fear most things that conceal complexity. Abstractions 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.
The remaining parts of this book will point the reader to potential resources that could be
used to learn front-end development and the tools used when practicing front-end
development. 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.
37
How FDs Are Made
organized course. Otherwise, I am not aware of any other profession that is practically free
for the taking with an internet connection, a hundred dollars a month for screencasting
memberships, and a burning desire for knowledge.
If you want to get going today, consider consuming one or more of the following self-driven
resources below:
38
Part II: Learning Front-End Dev
Note that just because a learning resource is listed, or a category of learning is documented,
I am not suggesting that a front-end developer learn everything. That would be absurd.
Choose your own slice of expertise within the profession. I'm providing the possibilities of
what could be mastered in the field.
39
Self Directed Learning
The learning resources mentioned will include both free and paid material. Paid material will
be indicated with [$].
The author believes that anyone with the right determination and dedication can teach
themselves how to be a front-end developer. All that is required is a computer connected to
the web and some cash for books and online video training.
Below are a few video learning outlets (tech focused) I generally recommend pulling content
from:
codecademy.com
codeschool.com
egghead.io
eventedmind.com
Frontend Masters
Freecodecamp
Khan Academy
laracasts.com
lynda.com [careful, quality varies]
mijingo.com
pluralsight.com [careful, quality varies]
Treehouse
tutsplus.com
Udacity [careful, quality varies]
40
Learn Internet/Web
Learn Internet/Web
The Internet is a global system of interconnected computer networks that use the
Internet protocol suite (TCP/IP) to link several billion devices worldwide. It is a network
of networks that consists of millions of private, public, academic, business, and
government networks of local to global scope, linked by a broad array of electronic,
wireless, and optical networking technologies. The Internet carries an extensive range
of information resources and services, such as the inter-linked hypertext documents
and applications of the World Wide Web (WWW), electronic mail, telephony, and peer-
to-peer networks for file sharing.
— Wikipedia
41
Learn Web Browsers
— Wikipedia
42
Learn Web Browsers
evolutionoftheweb.com [read]
Timeline of web browsers [read]
Comparing Browsers
Browser Hacks
43
Learn Web Browsers
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., jQuery,
React, 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 suppose 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 1
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.
ADVICE:
1 I suggest using Chrome because the developer tools are consistently improving and at this
44
Learn DNS
— Wikipedia
45
Learn DNS
46
Learn HTTP/Networks
— Wikipedia
— Wikipedia
— Wikipedia
HTTP Specifications
HTTP/2
Hypertext Transfer Protocol -- HTTP/1.1
HTTP
High Performance Browser Networking: What Every Web Developer Should Know
About Networking and Web Performance [read]
HTTP: The Definitive Guide (Definitive Guides) [read][$]
HTTP/2 Frequently Asked Questions [read]
HTTP Fundamentals [watch][$]
HTTP/2 Fundamentals [watch][$]
HTTP: The Protocol Every Web Developer Must Know - Part 1 [read]
HTTP: The Protocol Every Web Developer Must Know - Part 2 [read]
HTTP Succinctly [read]
47
Learn HTTP/Networks
CORS Specifications
CORS
WebSockets
48
Learn Web Hosting
— Wikipedia
General Learning:
49
Learn General Front-End Dev
50
Learn General Front-End Dev
webtoolsweekly.com
51
Learn UI/Interaction Design
— Wikipedia
— Wikipedia
User Experience Design - User Experience Design (UXD or UED or XD) is the
process of enhancing user satisfaction by improving the usability, accessibility, and
pleasure provided in the interaction between the user and the product. User experience
design encompasses traditional human–computer interaction (HCI) design, and
extends it by addressing all aspects of a product or service as perceived by users.
— Wikipedia
— Wikipedia
Minimally I'd suggest reading the following canonical texts on the matter so one can support
and potential build usable user interfaces.
52
Learn UI/Interaction Design
Designing Web Interfaces: Principles and Patterns for Rich Interactions [read][$]
Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability [read][$]
53
Learn HTML & CSS
— 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:
54
Learn HTML & CSS
Mastering CSS:
References/Docs:
Glossary:
CSS Glossary - Programming Reference for CSS Covering Comments, Properties, and
Selectors
HTML Glossary Programming Reference for HTML elements
Standards/Specifications:
Architecting CSS:
55
Learn HTML & CSS
Authoring/Architecting Conventions:
HTML/CSS Newsletters:
CSS Weekly
Frontend Focus
56
Learn SEO
— Wikipedia
General Learning:
57
Learn JavaScript
Learn JavaScript
JavaScript is a high level, dynamic, untyped, and interpreted programming language. It
has been standardized in the ECMAScript language specification. Alongside HTML and
CSS, it is one of the three essential technologies of World Wide Web content
production; the majority of websites employ it and it is supported by all modern web
browsers without plug-ins. JavaScript is prototype-based with first-class functions,
making it a multi-paradigm language, supporting object-oriented, imperative, and
functional programming styles. It has an API for working with text, arrays, dates and
regular expressions, but does not include any I/O, such as networking, storage or
graphics facilities, relying for these upon the host environment in which it is embedded.
— Wikipedia
Getting Started:
General Learning:
Mastering:
58
Learn JavaScript
Functional JavaScript:
References/Docs:
Glossary/Encyclopedia/Jargon:
Standards/Specifications:
Style:
59
Learn JavaScript
Echo JS
ECMAScript Daily
ES.next News
FiveJS
JavaScript Air
JavaScript Jabber
JavaScript Kicks
JavaScript Live
JavaScript Weekly
JavaScript.com
60
Learn Web Animation
Standards/Specifications:
Web Animations
61
Learn DOM, BOM & jQuery
— Wikipedia
— Wikipedia
— 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:
62
Learn DOM, BOM & jQuery
References/Docs:
jQuery Docs
Events
DOM Browser Support
DOM Events Browser Support
HTML Interfaces Browser Support
MDN Document Object Model (DOM)
MDN Browser Object Model
MDN Document Object Model
MDN Event reference
MSDN Document Object Model (DOM)
Standards/Specifications:
63
Learn Web Fonts
The CSS2 specification was released in 1998 and attempted to improve the font
selection process by adding font matching, synthesis and download. These techniques
did not gain much use, and were removed in the CSS2.1 specification. However,
Internet Explorer added support for the font downloading feature in version 4.0,
released in 1997. Font downloading was later included in the CSS3 fonts module, and
has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has
subsequently increased interest in Web typography, as well as the usage of font
downloading.
— Wikipedia
General Learning:
64
Learn Accessibility
Learn Accessibility
Accessibility refers to the design of products, devices, services, or environments for
people with disabilities. The concept of accessible design ensures both “direct access”
(i.e., unassisted) and "indirect access" meaning compatibility with a person's assistive
technology (for example, computer screen readers).
Accessibility can be viewed as the "ability to access" and benefit from some system or
entity. The concept focuses on enabling access for people with disabilities, or special
needs, or enabling access through the use of assistive technology; however, research
and development in accessibility brings benefits to everyone.
Accessibility is not to be confused with usability, which is the extent to which a product
(such as a device, service, or environment) can be used by specified users to achieve
specified goals with effectiveness, efficiency and satisfaction in a specified context of
use.
— Wikipedia
General Learning:
Standards/Specifications:
65
Learn Accessibility
66
Learn Web/Browser APIs
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 specify 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.
Learn:
67
Learn Web/Browser APIs
Learn Audio:
Learn Canvas:
NOTES:
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:
68
Learn JSON
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.
— Wikipedia
General Learning:
References/Docs:
json.org [read]
Standards/Specifications:
Architecting:
JSON API
69
Learn JS Templates
Learn JS Templates
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).
NOTES:
Note that JavaScript 2015 (aka ES6) has 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.
ADVICE:
If I was not using React & JSX I'd first reach for JavaScript "Templates strings" and when
that was lacking move to nunjucks.
70
Learn Static Site Generators
General Learning:
71
Learn Computer Science via JS
72
Learn Front-End App Architecture
NOTES:
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.
ADVICE:
1 In 2017 learn Webpack, React, and Redux. Start with, "A Complete Intro to React" and
SURVEY RESULTS:
73
Learn Front-End App Architecture
The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016
State of JS Survey (9307 developers)
74
Learn Front-End App Architecture
75
Learn Front-End App Architecture
76
Learn Data API (i.e. JSON/REST) Design
77
Learn React & Redux
React.js Introduction For People Who Know Just Enough jQuery To Get By [read]
React.js Fundamentals [watch]
13 things you need to know about React [read]
Tutorial: Intro To React [read]
React Enlightenment [read]
ReactJS For Stupid People [read]
REACT FOR BEGINNERS [watch]
Complete Introduction to React (feat. Redux and React Router) [watch]
React In-depth: An exploration of UI development [read]
Complete Intro to React v2 (feat. Router v4 and Redux) [watch][$]
Welcome to A Complete Intro to React [read]
Build Your First Production Quality React App [watch][$]
Redux:
NOTES:
Once you have a good handle on React you might consider looking at Preact or Inferno, or
both. When you have Redux mastered, take a look MobX or consider creating your own
small custom Redux like implementation from scratch.
78
Learn Progressive Web App
In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined
the term "Progressive Web Apps" to describe apps taking advantage of new features
supported by modern browsers, including Service Workers and Web App Manifests,
that let users upgrade web apps to be first-class applications in their native OS.
Progressive - Work for every user, regardless of browser choice because they’re
built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
Connectivity independent - Service workers allow work offline, or on low quality
networks.
App-like - Feel like an app to the user with app-style interactions and navigation.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been
tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and
service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push
notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen
without the hassle of an app store.
Linkable - Easily shared via a URL and do not require complex installation.
— Wikipedia
79
Learn Progressive Web App
80
Learn JS API Design
81
Learn Web Dev Tools
Web development tools come as browser add-ons or built in features in web browsers.
The most popular web browsers today like, Google Chrome, Firefox, Opera, Internet
Explorer, and Safari have built in tools to help web developers, and many additional
add-ons can be found in their respective plugin download centers.
Web development tools allow developers to work with a variety of web technologies,
including HTML, CSS, the DOM, JavaScript, and other components that are handled by
the web browser. Due to the increasing demand from web browsers to do more popular
web browsers have included more features geared for developers.
— Wikipedia
While most browsers come equipped with web developer tools, the Chrome developer tools
are currently the most talked about and widely used tools available.
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.
News/Newsletters/Podcasts/Tips:
Dev Tips
82
Learn Web Dev Tools
83
Learn Command Line
— Wikipedia
General Learning:
Mastering:
84
Learn Node.js
Learn Node.js
Node.js is an open-source, cross-platform runtime environment for developing server-
side web applications. Node.js applications are written in JavaScript and can be run
within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, NonStop,
IBM AIX, IBM System z and IBM i. Its work is hosted and supported by the Node.js
Foundation, a collaborative project at Linux Foundation.
— Wikipedia
General Learning:
85
Learn JS Modules
Learn Modules
General Learning:
jsmodules.io
ES6 Modules in Depth [read]
Exploring JS - Modules [read]
References/Docs:
MDN - export
MDN - import
NOTES:
We are still waiting on a support in browsers for loading modules. Until then you can have a
look at, "ES Module Loader Polyfill" and "JavaScript Loader Standard".
86
Learn JS Module loaders/bundlers
Webpack
Webpack Deep Dive [read]
Webpack Fundamentals [watch][$]
Survivejs.com Webpack Book [read]
Rollup:
Rollup
SystemJS:
NOTES:
It is not uncommon for developers to use a tool like Gulp for bundling JS modules. However,
many of the Gulp plugins simply use Webpack, Rollup, or SystemJS under the hood.
87
Learn Package Managers
— Wikipedia
General Learning:
88
Learn Version Control
— Wikipedia
The current modern solution for version control is Git. Learn it!
General Learning:
codeschool.com [interact]
Getting Git Right [read]
Git Fundamentals [watch][$]
learn Enough Git [read]
Ry's Git Tutorial [read]
Mastering:
References/Docs:
https://git-scm.com/doc
89
Learn Build & Task Automation
— Wikipedia
General Learning:
References/Docs:
Gulp
ADVICE:
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:
90
Learn Site Performance Optimization
— Wikipedia
General Learning:
91
Learn Testing
Learn Testing
Unit Testing - In computer programming, unit testing is a software testing method by
which individual units of source code, sets of one or more computer program modules
together with associated control data, usage procedures, and operating procedures, are
tested to determine whether they are fit for use. Intuitively, one can view a unit as the
smallest testable part of an application.
— 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:
92
Learn Headless Browsers
— Wikipedia
93
Learn Offline Dev
General Learning:
94
Learn Web/Browser/App Security
95
Learn Multi-Device Dev (e.g., RWD)
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
96
Learn Multi-Device Dev (e.g., RWD)
called, "multi-device development strategy". Below, I list the most common multi-device
development strategies.
General Learning:
97
Directed Learning
Directed Learning
This section focuses on directed learning via schools, courses, programs and bootcamps.
98
Front-End Schools, Courses, & Bootcamps
Directed Learning
The table below contains instructor led, paid, front-end courses, programs, schools, and
bootcamps.
If you can't afford a directed education, a self directed education using screencasts, books,
and articles is a viable alternative to learn front-end development for the self-driven
individual.
Become a Frontend
BLOC 4,999 yes
Developer
Learn Front-end Web Montreal,
DecodeMTL 2,500
Development QC
Introduction to Front-End New
The Flatiron School 3,500
Web Development York, NY
Frontend Web multiple
General Assembly 3,500
Development locations
Front-end Web 7,000 - Toronto,
HackerYou
Development Immersive 7,910 Canada
multiple
Iron Yard Front End Engineering 12,000
locations
Turing School of
Front-End Engineering 20,000 yes
Software & Design
Front-End Web 200 multiple
Udacity yes
Developer Nanodegree monthly locations
99
Front-End Devs to Learn From
100
Newsletters, News, & Podcasts
HTML/CSS Newsletters:
CSS Weekly
HTML 5 Weekly
Echo JS
ECMAScript Daily
ES.next News
FiveJS
JavaScript Air
JavaScript Jabber
JavaScript Kicks
JavaScript Live
JavaScript Weekly
101
Newsletters, News, & Podcasts
JavaScript.com
102
Part III: Front-End Dev Tools
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.
103
Doc/API Browsing Tools
104
SEO Tools
SEO Tools
Keyword Tool
Google Webmasters Search Console
Varvy SEO tool
105
Prototyping & Wireframing Tools
Axure [$]
Balsamiq Mockups [$]
Justinmind [$]
UXPin [free to $]
Collaboration / Presenting:
InVision [free to $]
Conceptboard [free to $]
myBalsamiq [$]
106
Diagramming Tools
Diagramming Tools
draw.io [free to $]
Cacoo [free to $]
gliffy [free to $]
107
HTTP/Network Tools
HTTP/Network Tools
Charles [$]
Chrome DevTools Network Panel
Insomnia [free - $]
Paw [$]
Postman [free - $]
108
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):
Code Editors: 1
Atom
Brackets
Sublime Text [$]
WebStorm [$]
Visual Studio Code
Cloud9 [free to $]
Codeanywhere [free to $]
109
Code Editing Tools
Used to share limited amounts of immediately runnable code. Not a true code editor but a
tool that can be used to small amounts of immediately runnable code in a web browser.
CodePen [free to $]
jsbin.com [free to $]
jsfiddle.net
liveweave.com
Plunker
ADVICE:
1 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.
110
Browser Tools
Browser Tools
JS Browser Coding Utilities:
History.js
html2canvas
Platform.js
URI.js
Feature.js
Modernizr
111
Browser Tools
console-polyfill
HTML5 Cross Browser Polyfills
fetch
socket.io
SockJS
webcomponents.js
webshim
Browserling [free to $]
BrowserStack [$]
CrossBrowserTesting.com [$]
Nightcloud.io
Sauce Labs [$]
Headless Browsers:
PhantomJS
PhantomCSS
slimerjs
TrifleJS
Zombie.js
Browser Automation:
CasperJS
Nightmare
TestCafe
Browser Hacks:
browserhacks.com
112
HTML Tools
HTML Tools
HTML Templates/Boilerplates/Starter Kits:
dCodes
Email-Boilerplate
HTML5 Boilerplate
HTML5 Bones
Mobile boilerplate
Web Starter Kit Boilerplate & Tooling for Multi-Device Development
HTML Polyfill:
html5shiv
Transpiling:
HAML
Pug
Markdown
References:
Element attributes
Elements
HTML Arrows
HTML Entity Lookup
HTML Interfaces Browser Support
htmlreference.io
Linting/Hinting:
HTMLHint
html-inspector
Optimizer:
HTML Minifier
tablesgenerator.com
113
HTML Tools
Authoring Conventions:
Workflow:
Emmet
HTML Outliner:
HTML 5 Outliner
https://github.com/trending?l=html&since=monthly
114
CSS Tools
CSS Tools
Desktop & Mobile CSS Frameworks:
Base
Basscss
Bulma
Bootstrap 3 or Bootstrap 4
Concise
Foundation
Material Design Lite (MDL)
Metro UI
Picnic
Pure.css
Semantic UI
Skeleton
Spectre.css
tachyons
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
Transpiling:
pleeease.io
PostCSS & cssnext
rework & myth
Sass/SCSS
Stylus
References:
115
CSS Tools
css3test.com
css3clickchart.com
cssreference.io
CSS Indexes - A listing of every term defined by CSS specs
css4-selectors.com
css4 Rocks
CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE
CSS Tricks Almanac
cssvalues.com
MDN CSS Reference
Linting/Hinting:
CSS Lint
stylelint
Code Formatter/Beautifier:
CSScomb
CSSfmt
Optimizer:
clear-css
cssnano
CSSO
Architecting CSS:
116
CSS Tools
SMACSS [read][$]
Scalable Modular Architecture for CSS (SMACSS) [watch][$]
SUIT CSS
rscss
Authoring/Architecting Conventions:
https://github.com/trending?l=css&since=monthly
117
DOM Tools
DOM Tools
DOM Libraries/Frameworks:
Bliss
jQuery
You Don't Need jQuery
Zepto
cash
Umbrella JS
DOM Utilities:
Keypress
Tether
clipboard.js
References:
Events
DOM Browser Support
DOM Events Browser Support
HTML Interfaces Browser Support
MDN Document Object Model (DOM)
MDN Browser Object Model
MDN Document Object Model
MDN Event reference
MSDN Document Object Model (DOM)
DOM Polyfills/Shims:
dom-shims
Pointer Events Polyfill: a unified event system for the web platform
118
DOM Tools
Virtual DOM:
jsdom
virtual-dom
119
JavaScript Tools
JavaScript Tools
JS Utilities:
accounting.js
async
axios
chance
date-fns
format.js
immutable
is.js
lodash
You-Dont-Need-Lodash-Underscore
Math.js
Moment.js
Numeral.js
string.js
underscore.js
You-Dont-Need-Lodash-Underscore
voca
wait
xregexp.com
Babel
TypeScript
Flow
Code-analysis Engine:
Tern
jscc.info/
eslint
120
JavaScript Tools
Unit Testing:
AVA
Jasmine
Mocha
Tape
Chai
expect.js
should.js
sinon.js
Kakapo.js
Code Formater/Beautifier:
esformatter
js-beautify
jsfmt
prettier
Performance Testing:
benchmark.js
jsperf.co
Coveralls [$]
Esprima
istanbul
Optimizer:
UglifyJS 2
optimize-js
Obfuscate:
121
JavaScript Tools
es6fiddle.net
jsbin.com [free to $]
jsfiddle.net
debuggex
regex101
regexper
RegExr
https://github.com/trending?l=javascript&since=monthly
https://www.npmjs.com/browse/depended
122
Static Site Generators Tools
staticgen.com
staticsitegenerators.net
Metalsmith
ADVICE:
1 Before using a static site generator consider using Gulp to orchestrate a custom solution
or use a tool that makes use of Gulp for static site generation. e.g. Gulp Starter
123
Accessibility Dev Tools
Accessibility Tools
Guides
Accessibility Guidelines Checklist
Interactive WCAG 2.0
18F Accessibility Guide
Site Scanners
aXe Browser Extension
Chrome Accessibility Developer Tools
Tenon Accessibility Tool
WAVE Accessibility Tool
Low-Vision Simulators
SEE (Chrome)
Spectrum (Chrome)
NoCoffee (Chrome)
Screen Readers
VoiceOver (Mac)
JAWS (Win)
NVDA (Win)
Window-Eyes (Win)
ChromeVox (Chrome extension)
124
Accessibility Dev Tools
Readability Testers
Expresso App
Hemingway App
Grammarly
Readability Score
MS Office
Articles
Getting Started with ARIA
Reframing Accessibility for the Web
An Alphabet of Accessibility Issues
Practical ARIA Examples
MDN Accessibility Guide
Enable accessibility panel in Chrome dev tools
125
App Frameworks (Desktop, Mobile etc.) Tools
ionic
onsen.io
Electron
NW.js
126
App Frameworks (Desktop, Mobile etc.) Tools
These solutions take your application and build it across several platforms and devices
manifoldJS
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.
NativeScript
React Native
tabris.js [free to $]
trigger.io [$]
weex
References:
todomvc.com
Frontend Guidelines Questionnaire
Frontend Guidelines
Performance:
js-framework-benchmark
NOTES:
Keep an eye on inferno, Svelte, and NX in 2017 for building component based UI
applications.
ADVICE:
1 If you are new to front-end/JavaScript application development I'd start with Riot or 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 use an app framework tool.
127
App Frameworks (Desktop, Mobile etc.) Tools
Want something smaller than React, consider Preact. Preact is an attempt to recreate the
core value proposition of React (or similar libraries like Mithril) using as little code as
possible, with first-class support for ES2015. Currently the library is around 3kb (minified &
gzipped).
Can't decide between React or Angluar 2, read, "Angular 2 vs React: The Ultimate Dance
Off"
SURVEY RESULTS:
The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016
State of JS Survey (9307 developers)
128
App Frameworks (Desktop, Mobile etc.) Tools
129
App Frameworks (Desktop, Mobile etc.) Tools
130
Progressive Web App Tools
lighthouse
Progressive Web App Checklist
131
Scaffolding Tools
Scaffolding Tools
Client side Scaffolding is concerned with generating a starter template for the application as
a whole, rather than generating code to access a database.
Slush
Yeoman
132
General FE Development Tools
Browsersync
CodeKit
Prepros
133
Templating/Data Binding Tools
doT.js
Handlebars
htmlbars
Nunjuncks
Deku
jquerymy.js
ractive.js
react.js
riot
Rivets.js
vue.js
JSX
t7
134
UI Widget & Component Toolkits
Bootstrap 3 or Bootstrap 4
Kendo UI for jQuery [free to $]
Materialize
Office UI Fabric
Semantic UI
UiKit
Webix [$]
Ant Design
Material ui
Semantic-UI-React
Native Desktop/Laptop/Netbook Apps via Web Platform (i.e. used with NW.js and
Electron):
Photon
React UI Components for OS X El Capitan and Windows 10
Mobile/Tablet Specific On Web Platform (i.e. used with touch focused UI's):
Framework7
Kendo UI Mobile
Ratchet
ADVICE:
1 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. Also, keep in mind that most of these solutions still require jQuery.
2 If I was going to build a React app and needed a toolkit of widgets/components off the
shelf I'd with Semantic-UI-React and/or Ant Design, or I would accept that fact the some of
the components I want to take off the shelf and use have a hard dependency on jQuery.
135
UI Widget & Component Toolkits
136
Data Visualization (e.g., Charts) Tools
d3
sigmajs
amCharts [free to $]
AnyChart [Non-commercial free to $]
C3.js
Chartist-jsj
Chart.js
Epoch
FusionCharts [$]
Google Charts
Highcharts [Non-commercial free to $]
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 $]
137
Graphics (e.g., SVG, canvas, webgl) Tools
Fabric.js
Two.js
Canvas:
EaselJS
Paper.js
SVG:
d3
GraphicsJS
Raphaël
Snap.svg
svg.js
WebGL:
pixi.js
three.js
138
Animation Tools
Animation Tools
Animate
Anime
Dynamics.js
GreenSock-JS
Magic
TweenJS
Velocity.js
Polyfills/Shims:
web-animations-js
Animation References:
canianimate.com
139
JSON Tools
JSON Tools
Online Editors:
JSONmate
json.browse()
jsonformatter.org
JSON Formatter & Validator
Query Tools:
DefiantJS
JSON Mask
ObjectPath
JSON Generator
Mockaroo [free to $]
FillText.com
Jam API
JSONPlaceholder
jsonbin.org
mockable.io
mockapi.io
Mocky
RANDOM USER GENERATOR
json-server
140
JSON Tools
JSON Specifications/Schemas:
141
Placeholder Images/Text Tools
Images:
placehold.it
Satyr
Placeimg
Lorem Pixel
CSS-Tricks Image Resources
LibreStock
Unsplash
Place Beyoncé
Device Mockups:
placeit.net
mockuphone.com
Text:
Meet the Ipsums
catipsum.com
baconipsum.com (API)
User Data:
uinames.com
randomuser.me
142
Testing Tools
Testing Tools
Software Testing Frameworks:
Intern
Karma
Jest
Unit Testing:
AVA
Jasmine
Mocha
Tape
Chai
expect.js
should.js
sinon.js
Kakapo.js
Browserling [$]
BrowserStack [$]
CrossBrowserTesting.com [$]
Nightcloud.io
Sauce Labs [$]
Browser Automation:
CasperJS
Nightmare
TestCafe
UI Testing Tools:
gremlins.js
143
Testing Tools
Percy
BackstopJS
PhantomCSS
Ghost Inspector
diff.io
Monkey Test It
NOTES:
Testing frameworks typically offer more tools than just unit testing. If you are looking for
JavaScript unit testing solutions look at JavaScript Tools.
SURVEY RESULTS:
The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016
State of JS Survey (9307 developers)
144
Testing Tools
145
Testing Tools
146
Testing Tools
147
Front-end Data Storage Tools
148
Module/Package Loading Tools
SURVEY RESULTS:
The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016
State of JS Survey (9307 developers)
149
Module/Package Loading Tools
150
Module/Package Loading Tools
151
Module/Package Repo. Tools
152
Hosting Tools
Hosting Tools
General
AWS [$]
DigitalOcean [$]
Heroku [free to $]
Static
Firebase Hosting
netlify [free to $]
Bitballoon
Surge [free to $]
Forge [$]
153
Project Management & Code Hosting
154
Collaboration & Communication Tools
Gitter [free to $]
155
CMS Hosted/API Tools
Contentful [$]
Cosmic JS [free to $]
prismic.io [free to $]
elemeno [free to $]
webhook.com
Dato CMS
siteleaf
forestry.io
156
BAAS (for Front-End Devs) Tools
Back-end/API tools
Data/back-end as a service aka BAAS:
Back& [free to $]
Firebase [free to $]
Kinvey [free'ish to $]
Pusher [free to $]
restdb.io [free to $]
Data/back-end
Horizon
GraphQL
http://www.apollodata.com/
Relay
Falcor
RxDB
Auth0 [$]
AuthRocket
Stormpath
UserApp [free to $]
157
Offline Tools
Offline Tools
Hoodie
Offline.js
PouchDB
upup
158
Security Tools
Security Tools
Coding Tool:
DOMPurify
XSS
Security Scanners/Evaluators/Testers:
Netsparker
Websecurify
OWASP ZAP
References:
159
Tasking (aka Build) Tools
Gulp
Broccoli.js
Brunch
Mimosa
Lineman
ADVICE:
1 Before reaching for Gulp make sure npm scripts or yarn script won't fit the bill. Read, "Why
SURVEY RESULTS:
The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016
State of JS Survey (9307 developers)
160
Tasking (aka Build) Tools
161
Tasking (aka Build) Tools
162
Tasking (aka Build) Tools
163
Deployment Tools
Deployment Tools
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 $]
164
Site/App Monitoring Tools
Monitority [free]
Uptime Robot [free to $]
Pingdom [free to $]
New Relic
Uptrends [$]
165
JS Error Monitoring Tools
166
Performance Tools
Performance Tools
Reporting:
GTmetrix
sitespeed.io
Speed Curve [$]
Web Page Test
JS Tools:
imagemin
ImageOptim-CLI
Budgeting:
performancebudget.io
References/Docs:
Jank Free
Performance of ES6 features relative to the ES5
Checklist:
167
Tools for Finding Tools
168