Top 5 Common Mistakes On Your Frontend Career Start

When I started my career as a markup developer 10 years ago there weren’t any courses, mentoring institutes, conferences or videos on YouTube. We had to deal with every bug by ourselves which included long nights of experimenting with the console to fix IE. There weren’t any debug tools and IE6 was the main browser. Can you imagine that? I remember when the firebug console appeared in the first Firefox version. We bought a bottle of wine and celebrated all night long. Nowadays people have all of the good stuff for a quick start in their career as a QA/FE/BE/PM. However, on the way to the dream city you’ll notice there are a lot of hidden treats under the hood.

Let’s find out what the most common cases look like that can knock you off the path to being a Frontend developer.

1. The Basics

Image for post

Based on my personal experience you will gain more profit if you invest your time into the basics. Everything is constantly changing, frameworks come out with new documentations every 2–3 years, leaving a lot of reading in between updates. Do browsers change quickly? Thank God — no. Issues, protocols, and architectures has been pretty much the same in the last 5 years.

Take a look at the Frontend roadmap https://github.com/kamranahmedse/developer-roadmap, it’s perfect :)

Here is a shortlist that will help you get a good start in your career:

I can continue this list with hundreds of links, but it is not the main task for today. Just try to ask yourself how everything works under the hood and you will open the magic world of the WEB ;)

2. In a Nutshell

Image for post

Let’s take a look at simple contact form:

Image for post

Which fonts are used in the design? What about indents? Where are the rollovers or focus states? These are the most common questions that we ask when we see forms similar to the one above. Lets dive deep into it and review a few uncommon questions:

  • Where should the data should be stored?
  • Is the data sensitive?
  • What will the response be from the server? We have to keep in mind that validation on the frontend could be easily removed by turning off JavaScript on the page. So, validation should always be on the server too.
  • What should be shown after the form is submitted?

As you can see there are a lot of questions that come to mind even for a simple contact form. Always be conscientious and better understand business needs.

3. Estimate Your Work

Image for post

Always estimate your work. You can try a simple approach that always works for me. Before you start any of the tasks create a simple google sheet with at least two columns: Realistic and Pessimistic. You should separate each of the pages or modules into small components and estimate them http://prntscr.com/od6lsu. Realistic is the time that you’re expected to finish if all goes well, while the Pessimistic column estimates how long it would take to finish everything plus risks.

This simple pattern helps you to see your real velocity and deviation coefficient from your estimate. Also, it can show you the bottleneck of your development process.

4. The Project Starts Not From the Code

Image for post

It’s true. Based on my personal experience, you’re very lucky if at least 60% of the project time is spent on the development. Meetings, project setup, architecture are not just “PM words”. It is a nightmare for every PM and developer to find out that a component doesn’t work at the end of the project and you have to re-write all of your code. These small steps will help you not fuck it up:

  • Know your customer. What is the main purpose of the website/application/form etc. What is the customer’s business? Remember that all IT products solve business needs, and I’ve yet yo meet someone who wanted to develop something without a purpose.
  • Questions are everything. Take a look at the design, read all the documents carefully and prepare questions.
  • Develop a roadmap for your project. You have to have a project plan that describes what has to be done and how long it will take.

What is expected from the client? You should have a clear idea of their expectations. Acceptance criteria are really important. You do not have to write long scroll documents. Just a couple of lines would be enough.

Do not forget about the Pareto Principle! :)

5. Start Small

Image for post

People always want to try something new and much bigger than what they’ve got. Frameworks and libraries can give you this fake feeling that building an application is no big deal. All you need to do is copy the code and paste it into your editor, right? Wrong. In some cases, this is the last resort approach but on a daily basis, it doesn’t work that way and you will have tons of code that no one can support.

There are some easy tricks that help you build a space rocket:

  • Always separate modules into small components. Each of the components should do some easy part of work. There are a lot of patterns even in CSS. For example, you can use BEM methodology or some JS Patterns.
  • The Component should be finished. Don’t take it all in a row. Select components and finish it completely. For example, navigation. It could be a really big component with a lot of drop-downs or additional items. Anyway, try to finish it in one day with responsive, scripts and PX-Perfect.
  • Test your code every day. Open your webpage, resize, check the console. There are dozens of checklists for every type of project. You can use your own. Even when using a modern framework a broken button can easily fail on your demo.
  • Performance. People want to see results as quickly as possible. Google decreases page rank for slow pages. Your page should be loaded in 2–3 secs. You can use tons of approaches for page speed optimization (lazy loading, responsive images approach, etc.). Performance starts from the optimization of each of the components :)

Make it simple. If jQuery is enough for your project then use it. Businesses don’t normally care what technology has been used in the solution, so if it works and it’s easy to support than use it.

Of course, there will be a lot of walls you’ll need to break on the way, however, what’s most important is that you like what you’re doing. You will be always surrounded by other people who can help you on your way.

I am lead Front-End Developer at JustCoded

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store