In the quest for becoming developers we are often told , “ you just need to know HTML, CSS and JavaScript” . But even though they form the base of what we call front end development. There is much more to know in terms of the concepts and technologies that we use and must get good at but are quite often ignored.

Here I have compiled a list of 10 things that every front end developer should know.

This list is inspired by The front end handbook by cody lindley which is an open source book that outlines the tools and resources used to become better front end developers.

Cody is really an expert in the field, He has worked on many books on JavaScript, JQuery and the DOM many of which are published by O’Reilly.

1. Understanding the Browser

It is important for every front end developer to understand how exactly the browser works.

What exactly is a browser engine and how does it affect the DOM, why does it exist and what exactly is its role in rendering a webpage like for example here is the engines that different web browsers use today.

Here is a complete and comprehensive guide written by Paul Irish on how the browser works

2. Understanding DNS

It is important to understand the role, the domain name system plays in accessing a webpage.

The info-graphic above gives us a gist of what exactly goes on behind the scenes but to have a detailed understanding of the basics of DNS would go a long way in aiding us as developers.

How DNS Works is a great website to get a basic understanding of how dns works behind the sceneds

3. How Web Hosting Works

Many of us as front end developers do not involve ourselves with the complexities of web hosting. We often think of staying in the confines of Codepen or JS Bin and never really venture out to buy our own servers and play around with it.

by Flarnie Marchan

Many would argue that it is the job of the DevOps guy to deal with the server.

But after understanding exactly how to control a server by buying one, installing Ubuntu on it and running the whole operating system from the command line, I can say that it goes a long way in making us better front end developers by giving us a clear understanding of the possibilities of the system powering our application.

4. UI and Interaction Design

The importance of UX / UI and Interaction Design is one of the foremost things that we must master as front end engineers. It is really important to understand the exact role of User Experience (UX) and User Interface (UI) in the development of a product.

ux.walkme.com

UX: “User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

IxD: “Interaction Design” is defined as the practice of designing interactive digital products, environments, systems, and services.

having strong foundations of Interaction Design are seen as extremely positive signs when hiring a front end developer.

5. Understanding SEO

This one is really important, As developers there are going to be times when we will have to freelance and our client might want to have the website search engine optimized. They will then be really grateful to have that service from the developer himself.

This also helps us monetize our own products. As it is famously said

If no one saw it.. It didn’t happen — Johnny Depp ( Black Mass)

6. Doing Web Animations

As “developers” it is really important for us to be able to bring the Ideas and creativity of designers to life through code. For that we really need to master the wide array of animations that are possible today through CSS3 and JavaScript.

Being able to animate in code not only strengthens our grip on the said technology, It get us acquainted with our creative side and hence bring a wide variety of ideas to life.

7. Understanding Accessibility

This is probably the most underrated concepts in front-end development but regardless one of the most important ones.

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

It is giving people with disabilities the “ability to access” said information.

Rob Dodson gave an amazing talk on accessibility in Google IO 2016 which was great because it happened to be on May 19 which was also the Global Accessibility Awareness Day.

8. API / Interface Design

As front-end developers we often ignore the science that goes behind building a useful and well designed API. “That is the job of the backend guy” we say, “I should just know how to use it”. Which is a completely incorrect.

To understand how an API is designed and to be able to build one from scratch teaches us a lot of things about an API ( mostly REST APIs) that we wouldn’t normally know so I highly recommend everyone fiddle around with building an API from scratch.

As Phil Sturgeon famously said “Everyone And Their Dog Wants An API, So You Should Probably Learn How To Build Them.” In his book Build APIs you won’t hate. which is another great resource to learn this.

9. Testing

Testing is one thing that I recommend to anyone who is starting out as a developer. If you get into the habit of testing early on it is one of the best programming practices that you can adopt and will put you miles ahead of your peers.

Now there are way to many ways of testing in programming overall but in javascript and web development there are basically 3 types

Unit Testing — Software testing method by which individual units of source code, 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. .— Wikipedia 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. . — Wikipedia

Most of us ignore testing because we like to use are newly learned superpowers as soon as possible and see it in action.., who wants to sit around and write code to check if the other code works right? Wrong! I adopted testing at an early stage and its probably the best decision I have ever made.

As a side note I would like to add that understanding how to use some headless browsers ( browsers without a user interface) like PhantomJS for testing can be extremely beneficial to you and would surely give you brownie points with your employer.

10. Task Automation

Many developers who newly jump to front end development. Don’t really feel the need for task automation. They prefer writing everything by hand carefully selecting and crafting everything they make.

But as we progress in our careers as web developers we find ourselves copying and pasting large chunks of code like for example when we are trying to implement browser support for different browser adding things like -webkit -moz in front of every CSS rule can be a tedious task.

In times like these task automation tools can really help us. They do things like

Prefixing CSS rules Compiling SASS files to CSS Minifying CSS/JS files Concatenating files

Two famous task automation tools that are widely used today are GruntJS and GulpJS.

This list is by no means a complete comprehensive list of everything that a front end developer should know but are among the top things that are very essential to learn as a developer and quite frequently ignored.

again here is the book that inspired me to write this article The front end handbook. Its open source and really a god send for front end developers.