Here I have compiled a list of 10 things that every front end developer should know.
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.
- Chrome (engine: Blink + V8)
- Firefox (engine: Gecko + SpiderMonkey)
- Internet Explorer (engine: Trident + Chakra)
- Safari (engine: Webkit + SquirrelFish)
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.
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: “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
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).
Here’s an info-graphic for perspective
It is giving people with disabilities the “ability to access” said information.
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.
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.
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
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.