Front-End Handbook

This is a handbook 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.

The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript, Web Accessibilty, JSON, ES6, React JS, Tool Component Library) and those solutions that are directly built on top of these open technologies.

The intention is to release an update to the content understandable. The handbook is divided into three parts.

Intro

What Is a Front-End Developer?

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

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

HTML, CSS, & JavaScript:

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

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):

In future expect...

  • Web Assembly, might just peak.
  • import might just be usable in <script></script>
  • 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 forupcoming years.
  • A return to simple websites may happen, web 1.0 retro, but with the help of 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.

According to a State Of Frontend survey, 77.2% of developers already used TypeScript and valued it over JavaScript. No matter whether they are working on old frameworks (i.e., Angular or React) or emerging ones (i.e., Dojo or Stencil), TypeScript improves their coding process and helps develop complex web applications seamlessly. 

Part I. The Front-End Practice

Web Technologies Employed by Front-End Developers

The following core web technologies are employed by front-end developers (consider learning them in this order):

  1. Uniform Resource Locators (aka URLs)
  2. Hypertext Transfer Protocol (aka HTTP)
  3. Hyper Text Markup Language (aka HTML)
  4. Cascading Style Sheets (aka CSS)
  5. JavaScript Programming Language (aka ECMAScript 262)
  6. JavaScript Object Notation (aka JSON)
  7. Document Object Model (aka DOM)
  8. Web APIs (aka HTML5 and friends or Browser APIs)
  9. Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)

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.

Hyper Text Markup Language (aka HTML)

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

— [Wikipedia](https://en.wikipedia.org/wiki/HTML)*

Most relevant specifications / documentation:

Cascading Style Sheets (aka 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](https://en.wikipedia.org/wiki/Cascading_Style_Sheets)*

Document Object Model (aka DOM)

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).

— [Wikipedia](https://en.wikipedia.org/wiki/Document_Object_Model)*

JavaScript Programming Language (aka ECMAScript 262)

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](https://en.wikipedia.org/wiki/JavaScript)*

JavaScript Object Notation (aka JSON)

c It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

— [Wikipedia](https://en.wikipedia.org/wiki/JSON)*

Most relevant specifications:

Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)

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).

— [Wikipedia](https://en.wikipedia.org/wiki/Accessibility)*

Front-End Dev Skills

Image source: [http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html](http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html)*

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:

  • Content Management Systems (aka CMS) Node.js
  • Cross-Browser Testing Cross-Platform Testing Unit Testing
  • Cross-DeviceTesting Accessibility / WAI-ARIA
  • Search Engine Optimization (aka SEO) Interaction or User Interface Design User Experience
  • Usability
  • E-commerce Systems Portal Systems Wireframing
  • CSS Layout / Grids
  • DOM Manipulation
  • Mobile Web Performance Load Testing Performance Testing
  • Progressive Enhancement / Graceful Degradation Version Control (e.g., GIT)
  • MVC / MVVM / MV*
  • Data Formats (e.g., JSON, XML) Data APIs (e.g Restful API)
  • Web Font Embedding
  • Scalable Vector Graphics (aka SVG) Regular Expressions
  • Content Strategy Microdata / Microformats
  • Task Runners, Build Tools, Process Automation Tools Responsive Web Design
  • Object-Oriented Programming Application Architecture Modules JavaScript
  • Charts / Graphs
  • UI Widgets
  • Browser Developer Tools

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)
  • ront-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

Front-End Salaries

Part II: Learning

Web Browsers

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.

— [Wikipedia](https://en.wikipedia.org/wiki/Web_browser)*

The most commonly used browsers (on any device) are:

  1. Chrome (engine: Blink + V8)
  2. Firefox (engine: Gecko + SpiderMonkey)
  3. Internet Explorer (engine: Trident + Chakra)
  4. Safari (engine: Webkit + SquirrelFish)

How Browsers Work

Image source: [http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)*

Optimizing for Browsers:

Learn HTTP/Networks (Including CORS & WebSockets)

HTTP - The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

CORS - Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g., fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

WebSockets - WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.

HTTP Specifications

HTTP Status Codes

CORS Specifications

CORS

WebSockets

Learn HTML & CSS

HTML - HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

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.

Mastering CSS:

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.

Getting Started:

Functional JavaScript:

Learn DOM, BOM, & jQuery

DOM - The Document Object Model (DOM) is a cross-platform and language- independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).

BOM - The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. Unlike the Document Object Model, there is no standard for implementation and no strict definition, so browser vendors are free to implement the BOM in any way they wish.

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.

Learn Web Fonts & Icons

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.

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.

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.

Accessibility is strongly related to universal design which is the process of creating products that are usable by people with the widest possible range of abilities, operating within the widest possible range of situations. This is about making things accessible to all people (whether they have a disability or not).

Learn JSON (JavaScript Object Notation)

JSON, (canonically pronounced sometimes JavaScript Object Notation), is an open standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX).

Although originally derived from the JavaScript scripting language, JSON is a language- independent data format. Code for parsing and generating JSON data is readily available in many programming languages.

The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

Learn Data (i.e. JSON) API Design

Learn React & Redux

React:

Redux:

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.

Node.js provides an event-driven architecture and a non-blocking I/O API designed to optimize an application's throughput and scalability for real-time web applications. It uses Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript. Node.js contains a built-in library to allow applications to act as a web server without software such as Apache HTTP Server, Nginx or IIS.

— [Wikipedia](https://en.wikipedia.org/wiki/Node.js)*

Learn Module loaders/bundlers

Webpack:

Learn Site Performance Optimization

Web performance optimization, WPO, or website optimization is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user's web browser. With the average internet speed increasing globally, it is fitting for website administrators and webmasters to consider the time it takes for websites to render for the visitor.

— [Wikipedia](https://en.wikipedia.org/wiki/Web_performance_optimization)*

General Learning:

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.

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.

Integration Testing - Integration testing (sometimes called integration and testing, abbreviated I&T) is the phase in software testing in which individual software modules are combined and tested as a group. It occurs after unit testing and before validation testing. Integration testing takes as its input modules that have been unit tested, groups them in larger aggregates, applies tests defined in an integration test plan to those aggregates, and delivers as its output the integrated system ready for system testing.

Learn Web/Browser/App Security

Learn Multi-Device Development

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 responsive (RWD) web site/app for all devices.
  • Build an adaptive/progressively enhanced web site/app for all devices.
  • 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.

Part III: Front-end Developer Tools

Doc/API Browsing Tools

Tools to browser common developer documents and developer API references.

HTTP/Network Tools

Code Editing Tools

A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code.

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):

  1. Good documentation on how to use the editor
  2. Report (i.e., hinting/linting/errors) on the code quality of HTML, CSS, and JavaScript.
  3. Offer syntax highlighting for HTML, CSS, and JavaScript.
  4. Offer code completion for HTML, CSS, and JavaScript.
  5. Be customizable by way of a plug-in architecture
  6. Have available a large repository of third-party/community plug-ins that can be used to customize the editor to your liking
  7. Be small, simple, and not coupled to the code (i.e., not required to edit the code)

Code Editors:

Online Code Editors:

Shareable & Runnable Code Editors:

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.

Browser Tools

JS Browser Coding Utilities:

General Reference Tools to Determine If X Browser Supports X:

Browser Development/Debug Tools:

Browser Automation:

Used for functional testing and monkey testing.

HTML Tools

HTML Templates/Boilerplates/Starter Kits:

HTML Polyfill:

Transpiling:

Linting/Hinting:

Optimizer:

CSS Tools

Desktop & Mobile CSS Frameworks:

Mobile Only CSS Frameworks:

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](http://cssreset.com/what-is-a-css-reset/)*

Transpiling:

References:

Linting/Hinting:

Code Formatter/Beautifier:

Optimizer:

Online Creation/Generation/Experimentation Tools:

DOM Tools

DOM Libraries/Frameworks:

DOM Utilities:

DOM Event Tools:

DOM Performance Tools:

Virtual DOM:

JavaScript Tools

JS Utilities:

Transpiling / Type Checking (ES to ES):

Code-analysis Engine:

JavaScript Compatibility Checker:

Linting/Hinting & Style Linter:

Unit Testing:

Code Formater/Beautifier:

Performance Testing:

Sharable/Runnable Code Editors:

Static Site Generators Tools

Site Generator Listings:

Accessibility Tools

Guides

Screen Readers

Readability Testers

App Frameworks (Desktop, Mobile, Tablet, etc.) Tools

Native Hybrid Mobile WebView (i.e., Browser Engine Driven) Frameworks:

These solutions typically use Cordova, crosswalk, or a custom WebView as a bridge to native APIs.

Native Hybrid Mobile Development Webview (i.e., Browser Engine Driven) Environments/Platforms/Tools:

These solutions typically use Cordova, crosswalk, or a custom WebView as a bridge to native APIs.

Native Desktop WebView (i.e., Browser Engine Driven) App Frameworks:

General Front-End Development Tools

Development Tools:

Templating/Data Binding Tools

Just Templating:

Templating and Reactive Data Binding:

Data Visualization (e.g., Charts) Tools

JS Libraries:

Widgets & Components:

Graphics (e.g., SVG, canvas, webgl) Tools

General:

Canvas:

SVG:

WebGL:

JSON Tools

Online Editors:

Formatter & Validator:

Query Tools:

Generating Mock JSON Tools:

Online JSON Mocking API Tools:

List of public JSON API's:

Local JSON Mocking API Tools:

JSON Specifications/Schemas:

Testing Tools

Software Testing Frameworks:

Unit Testing:

Testing Assertions for Unit Testing:

Hosted Testing/Automation for Browsers:

Browser Automation:

Automated dead link and error detectors:

SURVEY RESULTS:

The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016 State of JS Survey (9307 developers)

Module Loading/Bundling Tools

SURVEY RESULTS:

The images below are from the 2016 Frontend Tooling Survey (4715 developers) and 2016 State of JS Survey (9307 developers)

Image source: [https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results)*

Module/Package Repository Tools

Hosting Tools

General

Project Management & Code Hosting Tools

Collaboration & Communication Tools

Content Management Hosted/API Tools

API CMS (i.e., Content Delivery CMS) Tools:

Hosted CMS Tools:

Static CMS Tools:

Security Tools

Coding Tool:

Security Scanners/Evaluators/Testers:

References:

Performance Tools

Reporting:

JS Tools:

Tools for Finding Tools

BT Tool Component Library

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Use Storybook to build small atomic components and complex pages in your web application. If it's a UI, you can build it with Storybook. Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

Edit this page