So you decided you want to be the best frontend engineer.
You decided you want to increase your knowledge and skills, and feel like a real professional. You already code and solve challenging problems, use open source libraries, know all the major key frameworks used in the industry and even know the small (but very important) differences between all common browsers.
But you still feel like something is missing, you feel you can do better, that it can’t be that you’ve reached your limits.
In this post, I’ll suggest a few steps, and I’m not going to talk about learning new frameworks or teaching you how closures magically work, so you can improve your overall frontend capabilities, and be the best. Of course, there are many ways you can push yourself to learn more, but I’m going to talk about a few fundamental changes you need to make in order to really excel, and be this frontend guy everyone ask his opinion.
Step1: Learn Your Environment
How many times you find yourself writing a line of code or changing a single CSS attribute, switching your active tab to your browser, refreshing and keeping your fingers crossed, hoping, this time, it will work.
Guess what, frontend engineers do it all the time, dozens of times a day, and even more if you need something to be ready for the same day.
The Problems
One problem with this toxic approach is that it kills your valuable time, even if your application you’re working on is super fast, you’re still doing the following steps:
Thinking -> Coding -> Switching tabs -> Refreshing -> Waiting -> Disappointing
Even if you’re a quick thinker and a super fast coder, disappointing all over again every few minutes, can be very frustrating and devastating, it affects your productivity and self-confidence.
The second problem is that it actually prevents you from learning the basics, and without the basics you’re pretty much limited in what you can achieve. Every time you refresh and see what happens your mind does not go through all the learning process it should have, and probably next time, you will have the same issues over and over.
What Can You Do?
Learning your environment means knowing where your code is going to run, and as a frontend engineer, your code will probably run inside a browser. It can be one of the more popular browsers or a one less known, it can be inside a mobile device or a regular desktop computer, it can be with a strong reliable network connection or a poor one with bad connectivity. What’s all those possibilities share in common is the fact that it’s always a browser.
So, learning the fundamentals about how browsers render each element and how CSS attributes affect them is a crucial deal breaker. If you won’t take yourself some time to learn the root of your problems, you’re going to keep walking in the dark.
You can start by learning the differences between display: inline-block vs inline vs block. Try challenging yourself by programming as much as you can without checking your results in the browser every minute. If you find a mistake, don’t just quickly add and remove attributes, take a few minutes to grasp the changes each attribute applies to your layout. When you see a design spec, and your mind automatically breaks it down into elements with the correct CSS attributes, you know you’ve reached a new level.
Resources
- Learn all about the way browsers render web pages, starting from the request to the server, through constructing the DOM tree and applying the CSS rules, to calculating the elements actual offsets on the screen. Read about it here.
- Learn all about CSS properties and how they actually affect your DOM elements so you can be sure you’re not just guessing which property to use. Read about it here.
Step2: Read, Read, Read
Reading about new trends and studying other people’s work opens your mind to new ways of doing things. Solving problems on your own is great and definitely healthy to your brain. But, you will probably solve those problems using one of the approaches you’re already familiar with. What you need is to insert new tools into your toolbox, regularly, every week/month or whatever feels a good pace for you.
What Should You Read?
A great way to do it is by signing up for a weekly newsletter which gives you a quick perspective of what’s going on out there. You can explore problems, libraries, designs, issues, trends etc just by reading the headlines on those emails. When something catches your eyes, go ahead and read about it.
Another advantage of reading a weekly (or monthly) newsletter is the fact that it makes your reading and learning time to be an integral part of your schedule. Soon you’ll feel comfortable with the fact that every Sunday morning you learn new trends or read interesting solutions to common problems, and not doing so will even make you feel like something is missing.
You can start by signing up for some JavaScript newsletter and then add another one, maybe on a different topic, when you feel ready.
Personally, I like the JavaScript Weekly newsletter, this newsletter gives you a good overview of the entire frontend community.
Step3: Learn From The Best
Remember when you were a kid, and wanted to be just like this rockstar from the poster you had on your wall? You thought he is the coolest guy in the world, you thought probably his life is so perfect, he has everything he ever asks for. Every night, you dreamed of being a rockstar on your own, just like he is, and having all those things you thought he has.
It was a lot easier to find a rockstar when we were kids, anyone with a nice guitar and a big tattoo could fit in this role for us. Today, it’s our job to find this professional guy we want to learn from and think about him like he is our rockstar.
Finding The Best Around You
Now it’s the time you ask yourself who’s best around me? Or, what if I’m a freelancer, and I work from home. Or, suppose I did find someone best near me, how do I actually learn from him? Those are all perfectly good questions and I’ll answer all of them soon.
But first, let’s think what exactly do I want to learn from this ‘best‘ guy who is sitting next to me. The answer is the way he thinks. If he is able to solve the same problem as I do, or complete a task we’re both working on in half of the time it takes me, it means there’s something he’s doing which worth paying attention to.
Now, as for the question of how can I learn how someone thinks without being annoying and ask questions all the time. For a start, I can see how he approaches problems, does he start coding immediately? or maybe he takes a few minutes to analyze the problem. And then, while he’s working, I can pay attention to all the steps he’s doing until the problem is solved, I can get surprised and see it’s actually better doing Y before X, which is completely the opposite of the way I’m used to.
If you’re a freelancer and work from home, you can join GitHub and start contributing to open source projects. The amount of feedback you get from other people using your library, or following your work, is enormous. I know it takes a time to earn credibility on GitHub, but as a freelancer, you need to compensate for the fact that you’re working alone, and as we said, staying with your own knowledge doesn’t let you expand boundaries and reach new limits.
RockStars Team
The fact I’m referring this professional guy as a singular doesn’t mean it has to be a single person. It’s perfectly fine to surround yourself with a few smart colleagues and absorb the good habits from anyone of them. It can be the best product manager who manages your team’s time efficiently, the creative designer who inspires you with creativity or your class A teammate who has great analyzing capabilities.
Think of it as copying someone’s style, It’s only a matter of time until you become a rockstar yourself.
Conclusion
Imaging begin the best frontend engineer. Answering questions and sharing tips and knowledge with your teammates.
Imaging people value your professional opinion because it actually helps them to be more productive.
Imaging people start copying your style by learning the way you think when you work. For you it’s trivial, for them it’s something to get inspired from.
Sounds like a dream?
Well, It’s not. Now that your have a roadmap, all you need to do is follow it.
Before you notice, you’ll become a rockstar yourself.
Cheers
