Front-end Developer Handbook 2019

Front-end Developer Handbook 2019

Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses

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.

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.

The intention is to release an update to the content yearly. This is currently the fourth year an edition has been released.

What is in this Handbook:

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.

Contribute content, suggestions, and fixes on github:

https://github.com/FrontendMasters/front-end-handbook-2019

Chapter 0. Recap of 2018 and Looking Forward

0.1 — Recap of Front-end Development in 2018

This chapter provides a baseline explanation for front-end development and the front-end developer discipline.

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 Image source: https://www.upwork.com/hiring/development/front-end-developer/

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 person enters into the field of front-end development by learning to build a website or web application which relies on HTML, CSS, and JavaScript and commonly runs in a web browser but can also run in a headless browser, WebView, or as compilation input for a native runtime environment. These four run times scenarios are explained below.

Web Browsers (most common)

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

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.

The most common headless browsers are:

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

The most common solutions for webview development are:

  • Cordova (typically for native phone/tablet apps)
  • NW.js (typically used for desktop apps)
  • Electron (typically used for desktop apps)

Native from Web Tech

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.

Some examples of these environments are:

Notes:

  1. Make sure you are clear what exactly is meant by the "web platform". Read the, ["Open Web Platform"](https://en.wikipedia.org/wiki/Open_Web_Platform ""Open Web Platform"") Wikipedia page. Explore the many technologies that make up the web platform.

    Chapter 2. The Practice of Front-end Development: Overview

This chapter will break down and broadly describes the practice of front-end engineering starting with, "How Front-End Developers Are Made".

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

  1. 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.
  2. Learn HTML
  3. Learn CSS
  4. Learn JavaScript
  5. Learn DOM
  6. Learn the fundamentals of user interface design (i.e. UI patterns, interaction design, user experience design, and usability).
  7. Learn CLI/command line
  8. Learn the practice of software engineering (i.e., Application design/architecture, templates, Git, testing, monitoring, automating, code quality, development methodologies).
  9. Get opinionated and customize your tool box with whatever makes sense to your brain (e.g. Webpack, React, and Mobx).
  10. 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 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.

Lately a lot of non-accredited, expensive, front-end code schools/bootcamps have emerged. These avenues of becoming a front-end developer are typically teacher directed courses, that follow a more traditional style of learning, from an official instructor (i.e., syllabus, test, quizzes, projects, team projects, grades, etc.).

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:

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.

2.2 - Front-End Job Titles

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.

Front-End Engineer (aka JavaScript Developer or Full-stack JavaScript Developer): 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 computer science knowledge 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 software 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.

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.

UI (User Interface) Developer/Engineer: 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.

Mobile/Tablet Front-End Developer: 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).

Front-End SEO Expert: 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.

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:

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

2.3 - Baseline 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. Hyper Text Markup Language (aka HTML)
  2. Cascading Style Sheets (aka CSS)
  3. Uniform Resource Locators (aka URLs)
  4. Hypertext Transfer Protocol (aka HTTP)
  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)

For a comprehensive list of all web related specifications have a look at platform.html5.org or MDN Web APIs.

The nine technologies just mentioned are defined below along with a link to the relevant documentation and specification for each technology.

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 Most relevant specifications / documentation:

  • All W3C HTML Spec
  • The elements of HTML from the Living Standard
  • Global attributes
  • HTML 5.2 from W3C
  • HTML 5.3 from W3C
  • HTML attribute reference
  • HTML element reference
  • The HTML Syntax from the Living Standard

    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 Most relevant specifications / documentation:

  • All W3C CSS Specifications
  • Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
  • CSS reference
  • Selectors Level 3

    Hypertext Transfer Protocol (aka 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.> — Wikipedia Most relevant specifications:

  • Hypertext Transfer Protocol -- HTTP/1.1
  • HTTP/2

    Uniform Resource Locators (aka URL)

    A uniform resource locator (URL) (also called a web address) is a reference to a resource that specifies the location of the resource on a computer network and a mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI), although many people use the two terms interchangeably. A URL implies the means to access an indicated resource, which is not true of every URI. URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications.> — Wikipedia Most relevant specifications:

  • Uniform Resource Locators (URL)
  • URL Living Standard

    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 Most relevant specifications / documentation:

  • DOM Living Standard
  • W3C DOM4
  • UI Events

    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 Most relevant specifications / documentation:

  • ECMAScript® 2018 Language Specification
  • All ECMAScript Language Specifications

    Web APIs (aka HTML5 and friends)

    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 Most relevant documentation:

  • Web API Interfaces

    JavaScript Object Notation (aka JSON)

    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 Most relevant specifications:

  • Introducing JSON
  • JSON API
  • The JSON Data Interchange Format

    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* Web Accessibility Initiative (WAI)

  • Web Content Accessibility Guidelines (WCAG) Current Status

    2.4 - Potential Front-end Developer Skills

Image source: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

A basic to advanced understanding of HTML, CSS, DOM, JavaScript, HTTP/URL, and web browsers is assumed for any type of professional front-end developer role.

Beyond the skills just mentioned, a front-end developer might also be specifically skilled in one or more of the following:

  • Content Management Systems (aka CMS)
  • Node.js
  • Cross-Browser Testing
  • Cross-Platform Testing
  • Unit Testing
  • Cross-Device Testing
  • 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 (e.g., jQuery)
  • Mobile Web Performance
  • Load Testing
  • Performance Testing
  • Progressive Enhancement / Graceful Degradation
  • Version Control (e.g., GIT)
  • MVC / MVVM / MV*
  • Functional Programming
  • Data Formats (e.g., JSON, XML)
  • Data APIs (e.g Restful API)
  • Web Font Embedding
  • Scalable Vector Graphics (aka SVG)
  • Regular Expressions
  • Microdata / Microformats
  • Task Runners, Build Tools, Process Automation Tools
  • Responsive Web Design
  • Object-Oriented Programming
  • Application Architecture
  • Modules
  • Dependency Managers
  • Package Managers
  • JavaScript Animation
  • CSS Animation
  • Charts / Graphs
  • UI Widgets
  • Code Quality Testing
  • Code Coverage Testing
  • Code Complexity Analysis
  • Integration Testing
  • Command Line / CLI
  • Templating Strategies
  • Templating Engines
  • Single Page Applications
  • Web/Browser Security
  • Browser Developer Tools

    2.5 - Front-End Developers Develop For...

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

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

Image source: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/

Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time web platform scenarios:

  • A web browser (examples: Chrome, IE, Safari, Firefox).
  • A headless browser (examples: Headless Chromium).
  • A WebView/browser tab (think iframe) embedded within a native application as a runtime with a bridge to native APIs. WebView applications typically contain a UI constructed from web technologies. (i.e., HTML, CSS, and JS). (examples: Apache Cordova, NW.js, Electron)
  • 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)
  • 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 the device)
  • Back-End Developer (i.e., writes code that runs on the 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
  • Performance Engineers
  • API Developers
  • Database Administrators
  • QA Engineers / Testers

    2.7 - Generalist/Full-Stack Myth

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.

Image source: https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz

Image source: https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

The roles to design and develop a website or web application require a deep set of skills 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.

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.

2.8 - Front-End Interviews

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.

Notes:

  1. Want to work remotely as a front-end developer checkout these remote-friendly companies.

2.10 - Front-End Salaries

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:

  1. A lead/senior front-end developer/engineer can potentially live wherever they want (i.e., work remotely) and make over 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).50k a year (visit angel.co, sign-up, review front-end jobs over 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).50k or examine the salary ranges on Stack Overflow Jobs).

    Chapter 3. Learning Front-end Dev: Self Directed Resources/Recommendations

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.

The learning resources identified (articles, books, videos, screencasts etc..) will include both free and paid material. Paid material will be indicated with [$].

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

Image source: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/

Image source: http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/

3.2. - Learn 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#### The most commonly used browsers (on desktop and mobile) are:

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

Image source: http://gs.statcounter.com/browser-market-share

Evolution of Browsers & Web Technologies (i.e., APIs)

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.

3.3 - Learn Domain Name System (aka DNS)

The Domain Name System (DNS) is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates domain names, which can be easily memorized by humans, to the numerical IP addresses needed for the purpose of computer services and devices worldwide. The Domain Name System is an essential component of the functionality of most Internet services because it is the Internet's primary directory service.> — Wikipedia

Image source: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

Image source: https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg

3.6 - Learn General Front-End Development

General Learning:

Image source: https://visual.ly/community/infographic/computers/how-does-seo-work

General Learning:

Image source: http://www.evolutionoftheweb.com/

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., <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery" target="_blank">Navigator.getBattery()</a>) 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 has a great deal of information about web/browser APIs.

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:

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

Note that JavaScript 2015 (aka ES6) added a native templating mechanism called ["Templates strings"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings ""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"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings ""Templates strings"") and when that was lacking move to nunjucks.

3.18 - Learn Static Site Generators

Static site generators, typically written using server side code (i.e., ruby, php, python, nodeJS, etc.), produce static HTML files from static text/data + templates that are intended to be sent from a server to the client statically without a dynamic nature.

General Learning:

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.

My advice, in 2019 learn React and Mobx and Apollo/graphql.

3.21 - Learn Data (i.e. JSON) API Design

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

3.23 - Learn Application State Management

  • State management in JavaScript [read]
  • Advanced State Management in React (feat. Redux and MobX) [watch][$]
  • React js tutorial - How Redux Works [watch]
  • MobX + React is AWESOME [watch]

    3.24 - Learn Progressive Web App

    Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience.> 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.> According to Google Developers, these characteristics are:* 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* A Beginner’s Guide To Progressive Web Apps [read]

  • Progressive Web Apps [read]
  • Getting Started with Progressive Web Apps [watch][$]
  • Building a Progressive Web App [watch][$]
  • Intro to Progressive Web Apps by Google [watch]
  • Native Apps are Doomed [read]
  • Why Native Apps Really are Doomed: Native Apps are Doomed pt 2 [read]
  • Your First Progressive Web App [read]
  • Progressive Web Applications and Offline [watch][$]

    3.25 - Learn JS API Design

  • Designing Better JavaScript APIs [read]
  • Writing JavaScript APIs [read]

    3.26 - Learn Browser Web Developer Tools

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

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.

Learn Chrome Web Developer Tools:

General Learning:

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:

PhantomJS is no longer maintained, Headless Chrome steps in.

3.37 - Learn Offline Development

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:

Image source: http://bradfrost.com/blog/post/this-is-the-web/

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.

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)

company program price estimate on site remote duration Betamore Front-end Web Development 3,000 Baltimore, MD 10 weeks BLOC Become a Front-end Developer 4,999 yes 16 weeks @ 25hr/wk or 32 weeks @ 10hr/wk General Assembly Front-end Web Development 3,500 multiple locations 3 hrs/day 2 days/wk for 8 weeks Thinkful Front-end Web Development 300 per month yes 15 hrs/wk for 3 months Turing School of Software & Design Front-End Engineering 20,000 Denver, CO 7 months full time Notes:

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

Chapter 5. Front-end Dev Tools

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.

5.1 - Doc/API Browsing Tools

Tools to browse common developer documents and developer API references.

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:

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.

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:

Image source: https://2018.stateofjs.com/other-tools/text_editors

5.7 - Browser Tools

JS Utilities to fix Browsers:

Used for functional testing and monkey testing.

Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env. Browserslisthttp://browserl.ist/### 5.8 - HTML Tools

HTML Templates/Boilerplates/Starter Kits:

https://github.com/trending?l=html&since=monthly

5.9 - CSS Tools

CSS Utilities:

https://github.com/trending?l=css&since=monthly

5.10 - DOM Tools

DOM Libraries/Frameworks:

https://github.com/trending?l=javascript&since=monthly

Most Depended upon Packages on NPM:

https://www.npmjs.com/browse/depended

5.12 - Headless CMS Tools

Site Generator Listings:

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

  • ionic
  • onsen.io

    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.

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.

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.

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

5.16 - JavaScript App Manager

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.

5.22 - Data Visualization (e.g., Charts) Tools

JS Libraries:

For more tools look here.

5.37 - Security Tools

Coding Tool:

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"](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.nw3huib54 ""Why I Left Gulp and Grunt for npm Scripts"").

5.39 - Deployment Tools

Notes:

  1. Need more Newsletters, News Sites, & Podcasts look at Awesome Newsletter.
  2. Find local front-end development communities by searching https://www.meetup.com/

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Develop this one fundamental skill if you want to become a successful developer

Throughout my career, a multitude of people have asked me&nbsp;<em>what does it take to become a successful developer?</em>