By Elson Correia
Being or becoming a FrontEnd Developer is not easy nowadays due to the number of things you need to learn, the noise of library options as well as the rapid changes in the field.
To help you in your journey I decided to share with you 10 essential things that helped me become a better frontend developer and truly focus on what matters.
DOM (Document Object Model)
A common misconception is that DOM is Javascript but that's not true. DOM is a data representation and understanding what it is and how it works will allow you to understand the web even more.
Take the time to know how and why it came to be, how it helped Javascript become the beast it is on the web today, all its different parts, and how they come together. The DOM tree is one of the most amazing trees to study and understand and one you will interact with the most as a Frontend Dev.
DOM Manipulation
Understanding DOM is one thing and manipulating it is something totally different. The DOM API can appear to be very big but it is all about its key components like the Node and the Document.
Understanding the DOM will teach about the difference between methods like getElementById and querySelector for example. It also will teach you about the API of each component and how each data behaves under the hood.
DOM manipulation starts with the Window down to each HTMLElement. Once you understand the parts of the puppet, handling the puppet should not feel alien so, take your time to understand how each part works and the API that will help you handle it.
HTML Semantics
Here is something a lot of developers coming to Frontend often ignore. Understanding HTML semantics plays a great role in improving your website's overall structure, SEO, and accessibility.
One thing HTML5 gave us was tags that are meant to be placed in certain places and used in certain ways. Knowing what and when to use each tag can help you a lot in a long run, make your site understandable at the HTML level and even improve your CSS styling.
Structural Semantics: The Importance Of HTML5 Sectioning Elements
When to use Article vs Section vs Div
When to use main vs header vs footer vs aside tags
CSS Selectors
Developers often struggle with CSS because they do not understand the cascading nature of CSS and the vast option of selectors and friends that exist to help you select anything on the page.
All CSS selectors and combinators with examples
Accessibility
Understanding web accessibility is understanding your possible users. Where they live, how they speak, their physical limitations, how they access your site, with what device, they have good internet, etc.
It is how your website can be accessed by anyone, anywhere, anyhow. As a front-end developer, it is crucial to know how to build things that can be accessed by anyone.
SEO
This is a technique used to drive traffic to your site. It starts from your domain, URL, and all the way down to how your content structure and how it is seen by other sites and platforms on the web.
Debugging
There are 2 ways to write error-free program. Only the third one works. — Alan Perlis
You spend a lot of time debugging as a frontend and debugging is not only about adding console.log and googling for solutions. It relies on your skill to read code, understanding what is supposed to do and how it will be executed.
Browsers come with a lot of tools you can use like setting breakpoints, the console, changing CSS and javascript in the browser, etc. You get better as you go but whenever you fix something either by googling or debugging always take your time to understand why it is a problem in the first place. That’s how you get better at it.
Javascript Core
One mistake a lot of developers make is to jump to Javascript libraries and frameworks before understanding the core and they become library junkies who often need more libraries to fix and improve their things.
You don’t have to use the bare javascript. Go ahead and use frameworks and libraries but understand how it works under the hood. It will save you when things go wrong, make you independent, and be a developer of great value to any company you join.
Performance Analysis
A lot of websites are a huge collection of junk shipped to the browser to do one thing. With time these sites grow slowly, big, and unusable. These will require a lot of maintenance and cant be scaled up.
Browsers come with performance analysis tools that let you detect unused code, low-performance code, memory consumers code(memory leak), and code that are just not worth including.
Chrome site runtime performance
User Experience
Being a front-end puts you on the front line of the battle. You are responsible for how the design and the experience are delivered to the user and that's a great responsibility.
It also puts you as the middle man to deliver the backend stuff as well. Any mistake you make may expose the backend to bad things so, the Frontend role is no joke.
Becoming a UX expert often needs you to understand the environment the product runs, who, and how it is used. It also requires a lot of research and experimentation to get it right but being strong in this area as a Fronted will make you a great asset to the company you work for.
Bottom Line
You don't become an expert all of a sudden. These skills require a lot of practice, time, and exposure to master. The web is constantly changing so you must change with it.
Don’t bother with trends since they come and go. This list has been a constant for the industry for ages now. These are topics people before I shared with me and still are the pillar of what a Frontend Developer is.
Don’t rush!
YouTube Channel: Before Semicolon Website: beforesemicolon.com