Disclaimer
Like previous articles, this is just based on my experiences and some of my friend's stories. Maybe you have a different story, but at least this story can be a reference for you.
Introduction
The story began when I was graduated in June 2020 and struggled a lot on finding a job. I skipped the fundamental one and learn the frontend frameworks like React, Vue, and Angular. It is kinda hard to pass the user interview session which uses the live coding interview method, because they usually ask the basic question and solve it fast without using any framework or tool, just with plain Javascript at that time.
But it doesn’t bother me too much because I got my first job as a frontend engineer at my previous workplace (a software house company) in September 2020. At that time I use Ionic and Angular as the main tech stack. I rarely code custom CSS for about a year, because the built-in UI from Ionic is so fascinating and it’s more than enough to deliver the required app to the client.
The new problem appears when I didn’t want to extend my contract there because I want to search for another opportunity to grow. Then I experienced the same problem as what I’ve done in 2020. Mostly I failed on user interview sessions that implement the live coding test.
After struggling a lot, by the grace of God, finally, I can get my current job in December 2021 (onboard on January 2022). Luckily the entrance test is a take-home test so I can maximize my ability. The user interview session did well and I’ve decided to choose this place as my next career journey.
Then another problem appears. For the first three months, I’ve been given some tasks related to styling things. I have no problem when coding the code for integration purposes like fetching data or data manipulation. But styling-related task actually is my greatest weakness.
Like I’ve told you in my previous article titled “I Remake My Personal Site using Tailwind CSS”, I was too dependent on tools, library, or framework. In this case, I was too dependent on styling tools like Chakra UI. I can make the styling using Chakra UI, but when I have to deal with another tool that is not my preference, I struggled much.
That time, I even struggled to make a simple layout for several hours using custom CSS and Tailwind CSS, LOL. This is why I realized, the fundamentals should be not skipped before you jump into tools like Chakra UI, Bootstrap, or other tools.
After about 3 months of struggling with the basic things, here is my reason why you should start or even restart with the fundamentals before going further.
Why Fundamental Matters?
Imagine Struggling At A Job Which Not Use Your Preferred Framework
This is what has happened to me actually😆. So in short, I skipped the fundamental of Javascript and CSS and directly jump into React, Next.js, and Chakra UI.
When I got my first job as a frontend engineer, I got a project which use Ionic and Angular as the main tech stack. For the first three months, I struggled with Ionic and Angular syntax. But luckily I didn’t struggle much when doing some styling because Ionic has provided a nice base UI, so I usually just do some minor styling like changing color or just the font family.
About one year later, I quit that job and found a new opportunity. While finding a job again, I back to my old bad habit, directly learning React and Chakra UI without learning the fundamentals, and successfully created my own personal site. Shortly, I finally can get my current job as a frontend engineer at the new company.
Luckily I code using React and Next.js in my current workplace so I didn’t struggle much for the logic things. But for styling purposes, I have to use Tailwind CSS. As a UI Component user who switches to utility class tool, that’s very “horror” for me, because I have to understand CSS basics when I made some styling.
During the probation period, I struggled a lot with these styling-related things😫. I even need several hours just to make a simple layout for the website. Luckily, along with the time I also learn Tailwind CSS in my free time and can cope with it. You can read my article here which contains my experience when learning Tailwind CSS.
Okay, do you realize something here? You can directly jump into the framework or library without learning the fundamentals. That’s not a big problem until you got a job which not use your preferred framework. You will struggle a lot to adapt to it because there’s no core concept or solid understanding of it.
Soon or Later You Cannot Rely on Tools Anymore
When I’m still a frontend engineer at my previous company, I was too dependent on third-party tools almost for every single task like making a timer and even displaying the formatted date. I was ever given a task by my former manager to display the map on the mobile app. At that time the only thing that existed in my mind is I have to find a suitable third party that can be used for that case.
Several days later, finally I found the Angular Google Maps library and luckily can solve the problem for a while. But the new problem appears when the client asks for some customization. That’s the first thing that has made me sick for several days just to customize the layout of the displayed map. It’s easy to initialize and integrate, but again third-party tools are usually hard to customize.
The second case is when I got my current job. I discussed with the UI/UX team about the new website project that will be developed. The manager proposes the tools that can be used for the styling purpose. But in the end, we decided to use Tailwind CSS (a utility class styling framework), because we need a customizable tool and if the tool cannot be customized, we have to make our own tool to solve the problem.
My manager also said the same thing in my probation review statement.
Strengthen your fundamental understanding of CSS. One day you can’t rely on tools anymore.
How To Cope or Deal With It?
How to deal with it? What if I’m already like you, skipped the fundamentals, and rely on tools?
Don’t worry there’s still hope here, LOL. I even still struggle with this thing. But here are some tips from me. I even still doing these even I’m a full-time employee now and it’s very helpful for me.
Re-learn Again From Scratch
If you have free time outside your main job, please spare time just to learn the basics again. You can learn from any sites like Freecodecamp or Hackerrank to push yourself re-learn the basics through the coding challenges. If you’re a frontend engineer and want to sharpen your understanding of flexbox, you can try Flexbox Froggy Game. It’s a free web-based game that can help you to learn about flexbox through its gameplay.
In my case, it’s hard to find a suitable time for learning again from scratch because I’ve struggled in finding a job and need it quickly (when I was a job seeker). And now, still hard to find it because I’m a full-time frontend engineer in my current workplace. But it doesn’t mean I can’t learn the basics.
In my free time, I usually follow Kevin Powel on Twitter and watch some of his videos on Youtube to sharpen my concept and understanding of basic CSS. If finding suitable free time to learn is hard for you, at least push yourself to learn the basic concept by reading the official docs like MDN or watching some youtube videos that explain more about the basics.
Learn a Tools or Framework That Push You To Understand The Basics While Using It
For me, this tip is very useful. When I have not much time to re-learn the basic, I choose a tool or framework that force me to understand the basics while using it. Like I’ve said before in my previous article here, I found it when I’m using Tailwind CSS.
Even I’m not using the CSS syntaxes directly but I can learn and understand the basic CSS concepts through Tailwind syntaxes. To produce good and effective “styling” codes, I have to understand basic concepts like flex, grid, margin, padding, and other CSS concepts.
This also works when I code in React. Even React is a Javascript library, but it contains Javascript syntax which made the developer must face and sharpen the basics first before going through. I have even re-learn basic Javascript syntax so I can produce clean and effective code in React.
Luckily, my current workplace also uses React and Tailwind CSS as the main tech stack so I can use my work time to work on the task and learn new things through it😁.
Closing
Learn the basics first before jumping into the framework or tools. It will make your path smooth. You can easily solve any problems that you’ll face because you understand the concept, not only the tools that be used.
Soon or later you cannot rely on tools anymore. I’ve experienced it before when I was developing Map Feature for KAI Access and it was very exhausting for me just to find the suitable tools that actually have deprecated.
You’ll also struggle a lot to find a new job because nowadays most companies implement live code interviews or “agnostic” test cases for the programmer candidate. I even failed so many technical interviews before due to a lack of basic skills.
But don’t worry, keep learning. Don’t fear missing out (FOMO). I know so many frameworks and tools out there. You can read my article about Frontend Fatigue for more details, hope it helps you to determine the suitable tools for you.
But anyway again, learn the basics first! I know this method will make you seem like a slow learner. It’s better to be a slow learner with solid understanding than you force yourself to learn everything and be burnout and exhausted. Learning is a marathon, not a sprint.
Thank you for reading my article, hope it helps. Let me know if there’s something that you want to discuss in the comment section below.
Top comments (4)
You highlighted client side fundamentals (though Accessibility wasn't mentioned) which can be sufficient for Generation 2 front-end development.
With Generation 3 (nothing to do with Web3) it is possible that:
"… we are entering the era where frontend development will shift away from the client-side, and lean much more heavily on server-first architectures."
Next.js SSR is still considered a Gen 2 solution. With Gen 3 the server (or edge) is going to be doing more work so the client doesn't have to.
So understanding both sides (and the constraints they operate under) will become increasingly important (Rendering Patterns).
Oh yes, I'm focused on my experience of "styling" things in this article. Thanks for the references by the way.
I’m glad you came to this realization. There are too many beginners trying to use React and they don’t even understand what the JavaScript map function actually does.
Yeah, there's a lot of tutorial out there, but just a little of them who push the audiences to learn the basic first before going further.
The effect of skipping the fundamental is a long term effect. I have experienced it for about one year, but luckily I can take a manuver and back to the basic.