Dear front-end developers, I owe you all an apology!

Let me start by introducing myself a bit. I studied mathematics at university, and during that time I did some scientific programming, mostly solving differential equations, linear algebra, statistics, and optimization problems. This was done using Python and Matlab.

After graduation, I delved more into “serious programming” and started learning C++ and Java, I liked working with C++ and did a few projects with it. However, my heart was still attached to the scientific side of programming, so I did some data science and machine learning with Python.

My first encounter with front-end development

During this period of my life, I was in constant learning, it was only a matter of time before I encountered front-end development. I remember hearing a lot about Angular, React, and Javascript, but I did not have the time to learn any of them.

One day, I had a job interview for a back-end role, and the interviewer asked me if I knew any front-end technologies. I said no, the interviewer said that they have an online test that was initially created for a full-stack role and that they couldn’t find the time to remove the front-end parts. She asked me if I could do the test and ignore the front-end parts. I said yes, and I did the test.

This was my first ever encounter with HTML, CSS, and Javascript. The Javascript part wasn’t surprising, after all, I had some experience with Python and C++. But the HTML and CSS parts were out of this world, I had no idea what this was, it didn’t even look like programming to me.

After a week, I got a call from the company, they said that I did well in the back-end part, but the front-end part was no good and it wouldn’t be possible to hire me for the back-end role.

Yeah, it turns out they were looking for a full-stack developer, not just a back-end, I guess the HR said one thing and the hiring manager wanted something else.

I didn’t get upset much, however, my ego was hurt and I kept thinking what if I knew a bit of front-end development? That couldn’t hurt me, right?

I thought to myself, give it a go, just a few days of front-end and see where that takes you.

Initial thoughts

I started with just HTML and CSS, but I didn’t like it! I thought it was boring, I thought it was not real programming.

Who cares about how a website looks anyway? If I need to use the website, I’m going to suck it up and use it, I don’t care about the colors, the fonts, the animations, etc. And Javascript? Well, you can find a list on the page and insert a new element in it, what’s the big deal?

That was it, I was done with the front-end, and went back to what I was doing before.

Second encounter

After more than a year, I just had finished a role in AI and was looking for a new job. A group of friends told me that they are working on a project and they need a React developer. My lack of skills (non-existent at the time) was not a problem for them, after all, the group’s dedication will make or break the project.

So, here I am working with React! I was afraid at the beginning, I thought that I would be doing CSS all the time, however, because we were using Material UI, I didn’t have to write a lot of CSS, and the JSX part was copied and pasted.

I spent most of the time handling states, passing props, using hooks, and creating typescript interfaces. I was enjoying what I was doing, it wasn’t boring, and most importantly it wasn’t easy!

After not that long, the project was finished, and I had a new perception of what front-end developers do, however, I still thought that at least when it comes to HTML and CSS, it’s not that valuable of a thing. Just use a front-end library and you’re good to go!

Working with the experts

Fast forward a few months, and I am working as a full-stack developer with React in the front-end. The difference this time was the team, I was working with front-end developers who were experts in their field.

Unlike my first experience with React, out-of-the-box components were not enough, they either needed a lot of customization or we needed to build components from scratch.

Building context menus and tooltips was very hard! Tooltips just don’t work like you want them all the time. You always find cases where your tooltip doesn’t show up, or it shows up in the wrong place, or it’s not styled correctly.

And context menus? Handling their position, their visibility, their content, and their animations was a nightmare! I found myself struggling between building from scratch or customizing pre-existing components. The code was just getting harder and longer and the components were not behaving as they should.

I would ask for help from the seniors from time to time, sometimes they would fix the issue I’m stuck at within minutes! They would always blow my mind with their knowledge of CSS. Most important, however, is how they think about the component they’re creating. They don’t just create a component so that it works, they always have in mind how it will evolve in the future.

Will it be easy to add new features to it? Customize it? Maintain it? What about the performance? How will it behave in different screen sizes? How do we handle the edge cases?

Side note here, unlike when you are doing a leet code problem, edge cases in front-end development are not just about the input, it’s much more complicated.

It took me a while to figure it out, but yes, it matters how the buttons on the screen are placed, the colors matter, the tooltips, the menus, the tables, the modals, the forms, the responsiveness, it all matters.

If you can’t do HTML and CSS, you can’t do any of the above and that’s a big problem.

Debugging

Senior front-end engineers almost always have the devtools opened when working.

In the front-end, debugging is a completely different game, it’s not just about inserting a breakpoint and checking the values of the variables. The browser has an extensive set of tools that you need to know how to use. If you do that, you can debug the CSS, the HTML, Javascript, the network, the performance, and much more.

With the devtools, you can find out why your page is so laggy, is there any components rendering when they should not? Are there any network requests that are taking too long?

This is another aspect of front-end development that makes it special. When you keep your eyes on the devtools, CSS just becomes much easier. Instead of making changes and refreshing the page, you can just do it live and see the changes immediately.

When building something feels more comfortable, the task becomes more enjoyable. This made all the difference for me, I started to enjoy CSS more because of the devtools.

Why did I have such a bad perception of front-end development?

I think that front-end development is not advertised correctly by front-end developers themselves.

Everyone seems to be talking about Python, AI, Machine Learning, and Big Data. You just don’t hear a lot about the front-end. When web development is discussed, it’s mostly about the back-end, and the front-end is just a side note.

When it does get discussed, it’s mostly about the frameworks and the libraries, the difficulties and the challenges are not talked about much.

Also, when you learn programming, you start by learning the basics, that is the logic, the data structures, and the algorithms. At this point, you aim to become good at leet code style problems, and you might end up making the mistake of thinking that this is what matters.

With the advancement of AI, leet code style problems are getting less important

When you start learning the front-end, you start with HTML, it is much different than what you’re used to and it might discourage you from learning more. You end up having this distorted view of what front-end development is.

The apology

Dear front-end developers, I am sorry that I underestimated your work. I am sorry that I thought that what you do is not real programming. I know better now, and I hope that you will accept me among you.