Engineering Blog by GOUP with love ❤

How To Be a Front-End Engineer That Stands Out

12 min read

Abstract

Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data 1. If you take a look at the first-ever website2, you can come into conclusion that being a front-end developer used to be very easy in early stages of web development; you just had to write HTML, nothing more. After introducing CSS3 and JavaScript4 the web started to be much more complicated.

After more than 20 years, HTML, CSS and JavaScript has evolved drastically and front-end development is now, so much more than just writing HTML and serving it statically. In today’s world, a front-end developer needs to know how to develop accessible and performant web applications that requires a lot more knowledge than the technologies mentioned above. To be a front-end developer you need to add build tools, testing, JavaScript frameworks, performance optimization skills, web security, responsive design, web accessibility and other important stuff to your toolbox.

In this article we will talk about what you need to learn to be a front-end engineer that stands out from others. And of course, we’ll share resources as well 😉

📝 Notice: Note that the headings are not sorted in any particular order. You can learn the mentioned concepts in any order you wish

Know the basics

It doesn’t matter whether you are front-end or a back-end engineer, you must have at least some basic CS knowledge. If you have a degree in Computer Science or similar major, then you already are one step ahead of others. If you don’t have a degree in CS or you are coming from completely different major, then I would recommend starting with CS50: Introduction to Computer Science course by Harvard University on edX (it’s free). After finishing that course, if you want a little deeper knowledge then you should enroll to Computer Science: Algorithms, Theory, and Machines course by Princeton University which is completely free on Coursera.

Algorithms and Data Structures

Being part of the foundational knowledge, algorithms and data structures are very crucial to any kind of software engineer. If you already have knowledge about basic CS concepts then you must have heard of them before. As we are trying to be a front-end engineer, I recommend taking either Master the Coding Interview: Data Structures + Algorithms course by Andrei Neagoie or JavaScript Algorithms and Data Structures Masterclass by Colt Steele on Udemy. Both of these courses has simple way of explaining the concepts and they use JavaScript to implement them. We love JavaScript, right? 🤓 If you are a bookworm, then reading JavaScript Data Structures and Algorithms book by Sammie Bae should be pretty much enough for you.

Master your CSS

As a front-end developer who hated CSS for a long time, I would recommend stop hating and start learning. If you are starting from scratch, start watching CSS - The Complete Guide 2021 (incl. Flexbox, Grid & Sass) course by Maximilian Schwarzmüller and Manuel Lorenz. This course will strengthen your basic CSS skills and you will no more hate CSS. If you already have some intermediate CSS knowledge then definitely watch Advanced CSS and Sass: Flexbox, Grid, Animations and More! course by Jonas Schmedtmann as well. This course will teach you internal workings of CSS, how to work with SASS, build tools and much more to level up your CSS confidence.

Master your VCS - Git

Git is the most popular Version Control System that almost every software engineer uses in daily basis. However, most people haven’t used any Git commands except add, commit, pull, push and clone. But do you know how to rebase? Have you ever resolved a merge conflict? Do you use stash or do you know how yo squash commits locally? Have you ever got stuck in detached head state?

To start with basic Git skills visit Git How To and start reading (and of course doing) from first section. To get deeper knowledge on Git, its plumbing commands and internals, definitely watch Git In-depth course by Nina Zakharenko on Frontend Masters.

Learn how browsers work

Learning how the tools that you’re using works internally, will always boost your self-confidence. When we write web applications, we don’t always think about what browsers do and sometimes we torment them with the things we do. To get familiar with internal workings of browsers, read How Browsers Work: Behind the scenes of modern web browsers article by Tali Garsiel and Paul Irish. If you are even more curious and want to write your own browser, then Let’s build a browser engine! series by Matt Brubeck will be a good start for you.

Master JavaScript and get to know internals of JavaScript Engines

We hate things because we don’t know why they do what they do. Trying to understand will always help (in life as well 😊). Most developers hate JavaScript because of its illogical looking results at first glance. For example, why 0 == "0" is true, 0 == [] is true but "0" == [] is false?5 To understand this kind of stuff you need to know brief history of JavaScript4 and its specifications.

The useful resources to build up your JavaScript confidence:

If you are already pretty much confident with JavaScript then start diving into internals of the engine. Since V8 is the most popular and performant JavaScript engine, there’re plenty of articles and videos about how this engine works. To get started, read blog posts by SessionStack and freeCodeCamp:

To get more knowledge on engine internals, you can follow Benedikt Meurer, Franziska Hinkelmann and watch their talks on YouTube:

To stay up to date with the engines, you should follow their official blogs and read them regularly.

Know how to optimize for performance

After you have a good grasp of internal workings of browsers and JavaScript engines, then you will start thinking of performance. In today’s world, we have complex web applications that has variety of users with different kind of devices and different network conditions. For example, one user may have a 5G internet connection, the other might be in bad 2G connection, one user may have a MacBook with large retina screen and nice graphics card, the other might have and old Nokia smartphone. As a front-end engineer you need to optimize your web app’s performance to be easily accessible and usable by any user.

For web performance related stuff you should follow Addy Osmani on Twitter and read his blog posts on Medium and on Google Developers.

One course that I highly recommend you to watch is JavaScript Performance course by Steve Kinney on Frontend Masters.

Learn Web Accessibility

Accessibility (often abbreviated to A11y—as in “a” then 11 characters then “y”) in Web development means enabling as many people as possible to use Web sites, even when those people’s abilities are limited in some way6. This is the topic that most front-end developers overlook. The idea is very simple as W3C states:

“The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.”

Accessibility should be in mind while developing your web application. The questions you may ask to yourself are:

  • Can a user without a mouse use my web app? - the answer is keyboard accessibility
  • Are users who use devices with different screen sizes (mobile, tablet, desktop) able to use my web app easily? - the answer is responsive design
  • Are people with different visual deficiencies (blindness, color blindness, blurry vision etc.) able to use my web app?
  • Can deaf people watch video on my website and understand it? - think of providing text alternative for time-based media

To make your web app accessible, there are lots of things that you should consider while working on your project. To get familiar with these concepts, I highly recommend to read web accessibility tutorials on Mozilla Developers Network.

Know your framework

If you’re front-end developer, you’re definitely working with one of popular JavaScript frameworks such as React ❤️, Vue 🔥 or Angular 💩. Did you ever think how React works? Did you ever try to take a look at Vue’s source code? I know that this can be intimidating but I can offer you some resources to get you started.

For Vue, take a look at these courses on Vue Mastery:

For React:

For Angular:

  • 😃

Learn build tools

Let’s say you’re writing a React app. You will probably use create-react-app CLI to create project and get to the code very fast. Now, suppose you do not have such CLI, can you create exact setup using Webpack and Babel (or maybe with other tools like Rollup)? If not, then go to Webpack documentation and start reading it. Then visit Babel’s website and start learning it as well. Of course there are a lot more than just Webpack and Babel, but knowing at least one built tool and being able to create a complete webpack setup for React would make you stand out among other developers. And you should definitely publish at least one NPM package to learn how to work with CI/CD, get your hands dirty with testing and have other good experience alogn the way. If this sounded interesting then go and watch Creating an Open Source JavaScript Library on Github by Kent C. Dodds.

Learn testing

Testing is also a crucial skill for a front-end engineer. No matter, which JavaScript framework you are using, you should get to know its testing utilities and start writing some unit, integration and end-to-end tests. For unit and integration testing in React, I recommend watching The React Testing Masterclass by Kati Frantz. For Vue and Angular, there are plenty of resources and documentation as well. For end-to-end testing, you can use Cypress which has starter tutorials on its website.

Learn containers and orchestration

You probably have heard of Docker, Kubernetes and other fancy stuff. But have you ever had any experience with them? You may know what they are but to make sure, you should at least learn Docker, be able to dockerize your application or even run it on a local single node Kubernetes cluster. If this sounds interesting I highly recommend you to watch Docker and Kubernetes: The Complete Guide course by Stephen Grider. This course will teach you Docker, Docker compose, Kubernetes and you will even have chance to gain some experience with Google Cloud and AWS.

Get a little full-stack and know the Web

Are you a front-end engineer who does not know what SQL is? Stop right there and start working on a back-end environment to have a little experience. It might be NodeJs, Go, Java, Python or PHP but you have to learn how to write APIs, how to authorize API users, how to create database and how to query database using SQL. Learn REST standards, be able to write REST APIs, get your hands on some GraphQL and so on.

If you look at some job descriptions from big tech companies, you will see a sentence like “Experience in one or more of object oriented programming languages such as Python, Java, C++”. So learning a back-end language won’t hurt you. Personally, my advice would be to learn a strictly typed programming language like Java or Go. If you are brave, you can even try C 🤓

Know the web, learn its components and be aware how all these stuff work together. I recommend to follow Hussein Nasser’s YouTube channel. You can get lots of useful information from him. Some sweet playlists from Hussein Nasser are:

You may encounter same videos in different playlists but that’s okay.

Conclusion

I agree that there are a lot of things to learn but you don’t need to rush. We didn’t even talk about cyber security, operating system concepts, design patterns, programming language paradigms like OOP and FP, Linux, command line etc. So, there are plenty of time ahead of us and learning journey will never end. Even after you have 15 years of experience, you will still learn something new every day. Learn, be humble and accept that no one knows everything and we’ll always have something to learn. Good luck on your journey! If you think anything is wrong with this article, do not hesitate to create an issue or contact us. And of course, grow and GO UP! ❤️

References

  1. Wikipedia contributors. (2021, July 11). Front-end web development. Wikipedia. https://en.wikipedia.org/wiki/Front-end_web_development
  2. Nix, E. (2018, August 31). The World’s First Web Site. HISTORY. https://www.history.com/news/the-worlds-first-web-site
  3. Hoffmann, J. (2017, October 23). A Look Back at the History of CSS. CSS-Tricks. https://css-tricks.com/look-back-history-css/
  4. A Brief History of JavaScript. (2017, January 16). Auth0 - Blog. https://auth0.com/blog/a-brief-history-of-javascript/
  5. Bzadough, Y. (2019, October 13). The Best JavaScript Meme I’ve Ever Seen, Explained in detail. FreeCodeCamp.Org. https://www.freecodecamp.org/news/explaining-the-best-javascript-meme-i-have-ever-seen/
  6. Accessibility | MDN. (2021, June 10). Mozilla Developers Network. https://developer.mozilla.org/en-US/docs/Web/Accessibility