Week 32 - What I Need to Know About Being a Front End Developer

As someone who went through four years of traditional higher education in this field (with some backend sprinkled throughout), I can't say how tired I was of hearing "how important it was to keep code clean" and "how important the basics are" in every single class.

And now that I'm working in the field, nothing has changed.

Maybe they were on to something...

Let's say you go to one of your favorite websites one day, and as you're looking at it, you suddenly think to yourself: “how did they got that fancy button to bounce in” or maybe “how did they got that form to melt away after I submitted it”.

Well, all that work is done by a frontend engineer/developer/visualizer who has a whole arsenal of skills that allowed them to accomplish that eye-candy.

But if there is a frontend developer, doesn't that mean that is a backend developer too (and maybe even a middle developer)?

In short, the difference between the front and backend developers can be imagined like this: in cases where you are building out a city, the structural integrity and mapping (like sewers, electrical lines, water lines, etc.) are the work of backend engineers. But when it comes to making sure everything is actually connected, looking good, and allowing people to live a good life in that city, you have the frontend developer. To learn more about the difference between the two, check out day 2 of this article.

So, let's get down to business.

1. Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS)

Back in my college days, HTML and CSS were explained to me in this way:

• HTML is the skeleton of your website. It is the structure of each page and is needed to build out anything on the internet.

• CSS is putting flesh on the skeleton, making it pleasing to the eye and something we are used to.

Every single page you'll see on the internet is made using these two building blocks. Meaning, you HAVE to have a mastery of both these things. Luckily, they aren't the most complicated of languages (for lack of a better word) and can be learned on essentially any online learning platform in just a few weeks.

HTML and CSS are so foundational, that even if those were the only two things you knew, you could go out and build a beautiful and functional website from scratch.

2. JavaScript (JS) and jQuery

Now that we have made our skeleton and put some meat on it, we want to actually give it some new abilities. Sure, statues look nice and all, but wouldn't it be cool if it moved?

That's when we can use something like JS and jQuery to help us out.

When you add some JS to your site, you open up a whole new world for your users. It could range from interactive games, to auto-populating forms, to element animations. Most sites today use some form of JavaScript and it'd be hard to find one that doesn't at this point.

JS is a very popular programming language that now allows your fleshed out skeleton to breath and move.

And because JS is so popular, many developers have spent the time to compile libraries of it that allow other developers to build something out faster and easier. Take jQuery for example. Using the jQuery UI library, you can add progress bars, sliders, spinners, accordions, and various animations to any part of your site. Not only does it help your site stand out, but it also can work to improve user experience, which in term helps your SEO. But that's a whole other rabbit hole.

3. JS and Front End Frameworks

Like jQuery, there are other routes you can take that will help you speed up development time and create web applications. Enter frameworks.

Popular JS frameworks include AngularJS, Ember, React, NodeJS, and a ton more. They're built to help you get a jump start on whatever your project is one and are generally pretty easy to learn and use. Each framework is built for a different need, so make sure you know what you're trying to accomplish before just picking up a framework.

JS isn't special in having its own frameworks though. CSS is also important and widely used enough (i.e., literally everywhere) that it gets its own frameworks too. The most popular one is Bootstrap, which was developed by Twitter and is used to create mobile responsive websites using a container, row, and column format. Using a CSS framework like Bootstrap, Foundation, or Materialize is a great way to speed up your website development and get something beautiful up and running in a short amount of time.

4. CSS Preprocessors

CSS preprocessors are the solution to the inefficiencies of redundant and bloated CSS files. These preprocessors, like SASS or LESS, are written in their own language and then converted to regular CSS.

The catch is that writing in CSS in SASS or LESS is much easier, quicker, and more efficient. Preprocessors allow CSS to be written in a much more programming friendly way, specifically through the use of mixins, extends, if branches, and loops.

5. RESTful Services and Application Programming Interface (APIs)

In short, when someone is talking about RESTful APIs, just think about one application sharing data with a different one. There's a lot of technical jargon and knowhow when it comes to APIs but in theory, you could just RESTful APIs to have a live Twitter feed appearing on your website showing your most recent Tweets (updating in real time).

Your website and Twitter are "talking" with each other, and the applications for data transfer are endless. These APIs all come with general guidelines in usage and setup. But once you know the ins and outs, you can do a lot to beef up your site or application.

6. Responsive Design and Multi-Browser Development

A must have in today's world, responsive web design is ensuring that your website or application works on screens and devices of all shapes, sizes and operating systems. When it comes to responsive design, you need to make sure that all the content you are giving your users is accessible, regardless of if they are using a desktop computer, tablet, or smartphone.

A common way to do this is to use a framework like Bootstrap to make sure your content scales between screen sizes and doesn't interrupt the user experience. In the end, a user browsing your site or using your application on a smartphone should be able to do just as much as if they were using their home computer. Sure, the look and feel will probably (and should) change between devices, but functionality should remain consistent.

But with great freedom comes great responsibility. Take web browsers for example. While many of us probably use Google Chrome, there are still a fair amount who use Firefox, Safari, and even IE/Edge. Good frontend developers will build their site knowing that it could be accessed by someone using any of these.

This variety of browsers is important because each browser accepts and processes web development elements differently, and sometimes, not at all. When a frontend developer is working on a project, he or she needs to make sure it appears and works consistently across multiple browsers.

7. Content Management System (CMS) and eCommerce

While I absolutely despise WordPress, I have to mention that it is the most popular CMS out there. Companies use a CMS to host their website and all relevant content, and unfortunately, having WordPress skills is relatively important. But, should you use WordPress.com or Wordpress.org? You'll have to figure that one out yourself.

When it comes to eCommerce, some of the popular ones include Shopify, Magento, and WooCommerce (a WordPress plugin).

8. Testing and Debugging

I know that when I write code and build applications, I never make mistakes and everything I do is flawless and works perfectly.

But in some crazy world where I'm not perfect, I'd have to know how to test and debug my code to make sure everything is working - or figure out why it's not.

In terms of testing, common terms you'll hear about are:

• Unit testing - testing each block of code, which can also be done through testing frameworks.

• UI testing - taking action on the site and ensuring that what happens is what is supposed to happen.

Then, of course, there is debugging. This is basically just looking at all the pieces that broke in your code and figure out why it broke. Be prepared to spend most of your time in this area.

9. Version Control

Even when you do your testing and debugging though, the fixes you might make could also break something else. So many times, I've spent hours debugging a problem, only to realize that my fix for that problem broke something that was originally working.

In cases like this, especially when the problem you made is worse than the one you had, you'll want to go back to the previous version. Luckily, there are applications that make this possible. Take Git for example. Git allows a user or a team of users to keep track of all the changes that are being made to the code (they can also use Github as a repository for these changes). Knowing how to use Git and Github is a critical skill of any developer.

10. An Analytical Mind

Even if were an expert in various languages and knew all the syntax and functions in them, it would be worthless without a deep problem-solving mindset. The best developers, frontend or otherwise, all have a strong problem-solving mindset, allowing them to think ahead and see issues as something to overcome when they happen, not something to wallow in misery about.

Bugs and crashes will always happen, regardless of how technically skilled you are. But with strong problem-solving skills, you'll put yourself ahead of your peers.

Go to Table of Contents

Front and backend development are two sides to the same coin. That beautifully crafted, mobile responsive, user-intuitive, dynamic site you just made needs to be able to pull relevant data from somewhere. So when users are browsing your store, logging into their account, or connecting their social media profiles, the data they put in the front gets sent to the back.

These two sides are constantly communicating, and without any backend structure, you just have a static site.

Since we just learned about some core components of a frontend developer, let's skip ahead and make a distinction between web development and web design. Frontend developers aren't necessarily designing how the site should look. That job falls on the web designer, or UI designer, as they have an intimate knowledge of how people browse sites, what they like and don't like, and what industry best practices are. Web developers take that design and convert it into HTML, CSS, and JS.

Good frontend developers will match each element designed by the designer, pixel for pixel, while also bringing it to life with various functionality.

But since static sites can be built by a 5-year old at this point using platforms like Wix, SquareSpace, Weebly, etc., you want to do something a little more complex.

Introducing Backend development.

Through the power of backend coding, you can allow users to actually interact with your site - more so than just clicking buttons and scrolling. With the right code (or really just platform at this point), you can accept credit card numbers, form submission data, track purchases, report on revenue, and more.

The key part here is you now have a way for users to input some information to your site, get processed by something else, and then have different or augmented data returned back to them. Definitely not something possible with your normal static site.

This backend part of your site, also known as the server-side, is responsible for storing, updating, retrieving, and deleting user data. That data can then be sent to the front facing part of the website when users enter queries - like logging in, checking their purchase history, updating personal information, etc.

All this information is held inside a database and can be modified by users that are only interacting with the front end (to a degree).

This database is stored in a server, which is really just a computer somewhere else. Unfortunately, you can't just flip a switch and start passing data between your front end site and backend site.

You'll need to use backend languages that allow for all this. Some of the more common ones are Ruby on Rails, PHP, .Net, and Python. And before you ask: no, there isn't a best one since it will depend on what you're trying to do and what you're already familiar with.

For example, I've built web applications in all of these except Python, though I still have experience in Python and love it. But I absolutely despise Ruby on Rails and really enjoy .Net. So, I would dedicate time into Python and .Net because I enjoy both of them and they are both still widely used languages. I'm not going to force myself to keep learning RoR because I can do similar things with other languages.

Rant aside, these programming languages allow you as a developer to build a dynamic site that can populate data that is being pulled from a database somewhere. Just be ready for a steep learning curve.

So how do you know whether to go into front or backend work? Well, figure out what you like to do more - visual creation and user experience (front), or data manipulation and writing algorithms (back)?

Or, if you're indecisive, do both and become a legendary, never before seen, fullstack developer, i.e., someone proficient in both areas and more.

Go to Table of Contents

If you just google the average salary of a front end developer, you'll get a number around $90k per year. Not bad if you ask me.

But what do you think some of the most important traits are of qualified frontend developers? It might not be what you initially think.

For example, some necessary skills of all frontend developers include:

• Strong communication

• Working with others

• Empathy

• Visualizing concepts

• Attention to detail

Sure, they should also be fluent in HTML, CSS, and JavaScript, but any decent employee, regardless of position, should have those above skills. As much as I want to believe that man is an island, that just isn't the case.

Working with others is a necessary part of working in any company. And it has nothing to do with what you get a degree in.

In the Beginning

But of course, once you master these traits, you can move on to items that are relevant to your field, like HTML, CSS, and JavaScript for starters (the building blocks of every website).

The best way to do that? Read some blog posts, download some guides, take a few courses, then go BUILD something yourself. You can read about as much HTML as you want, but if you never write a single <p> tag or <a> tag, you'll never really understand it.

Moving Forward

Now that you've built a few web pages, coded some JS algorithms, and incorporated some frameworks, you can go back and do the same thing over again.

Read more technical content, look on StackOverflow, build more complex algorithm, push the limits of your imagination and see what you can build out and what you can't.

Most of your ideas at this point won't be original, so you should be able to find someone who ran into the same problem as you or is building something out similar to what you are. Sad, but also slightly encouraging.

Expanding the Definition of Frontend Development

But just because you can throw some HTML, CSS, and JS together, maybe with some jQuery sprinkled throughout, doesn't mean you're a frontend developer. Real frontend dev's know how to optimize all their code, test and debug any and all issues, and understand how each part of a site can impact performance. Building the site is just one part of a very large puzzle.

And as I mentioned earlier, your ideas and problems are not special. Someone has already thought of it or solved it, so don't be afraid to look around. There are plenty of tools that you can use to speed up development time and avoid issues that someone has already spent time fixing. Like any of these.

Swinging Back Around to Communication

As someone who works to build something that users to can see and interact with, you'll have to work closely with designers who actually envision each part of the site, and the backend developers who make sure that the data sent to the user is accurate and shown in the right place at the right time.

The key to all of this working?

Communication.

Cliche, I know, but you just can't avoid this. Putting yourself as the middleman not only improves your communication skills, but you also get your fingers in multiple departments, expanding your experience and gaining new skills. Just by working with these two areas, you'll start to learn more about design and relevant programming languages, which, in the end, make you more valuable and marketable.

If this sounds like something you want to do, don't be afraid to ask. People are naturally egotistical and would love to mentor someone in a field that knows. Not only will they feel better about themselves, but you'll learn on the job - which is so much more effective than learning in some sort of schooling situation.

Just don't give up when it gets hard and ask someone knowledgeable in that field when you run into issues since they probably ran into the exact same one(s) too.

There's No Shortcut

The path to being a true frontend developer can be long, even when you're living and breathing it. But whatever you do, don't take shortcuts, or believe people who tell you about "an easy way" to do things. You'd only be hurting yourself.

The cycle is simple:

• Read up on a topic and learn about it

• Build something based on what you read

• Read more and improve your first prototype

• Rinse and repeat

The key here is the application of knowledge.

It's like this whole blog series. I could easily just say that I'm reading about a new topic each week, and I easily could. But I've found that when I have to read about it and then write about it in my own words, it sticks with me more.

Go to Table of Contents

When it comes to being a top-notch frontend developer, you need to have a specific set of skills and qualities.

In the qualities camp, you need to be like any gold employee and portray traits that are specific to every field and yet no field. Take communication for example.

Every five-star employee, regardless of what field they're in, the experience they have, or the title they hold, has great communication skills. The same goes for attention to detail, empathy, and even just the ability to visualize abstract concepts.

But let's assume you have all these traits. What kind of skills do you need when it comes to frontend work?

Well, right off the bat, you need to live and breath HTML and CSS. Sprinkle some foundational JavaScript in there and accent it with some frameworks, and you're on the right path.

After you master the fundamentals, you'll soon move onto the fun stuff, like:

• CSS preprocessors

• APIs

• Version control

• And responsive design

• MVC frameworks (it's good to get a little backend in there too)

Let's say you're some sort of prodigy and this is like a second language to you. Sure, it all makes sense and you can crank out a beautifully responsive and interactive site in a few days.

But what's your work ethic like? Your mentality?

In the end, you need to have a certain mindset. For example, when everything is on fire and the sky is falling, do you shut down and put on your blinders until it's solved? Or do you see it as a challenge to overcome and conquer? The problem theoretically is solved in the end, but how you viewed it is very different.

When it comes to tech (and really every field), things will always break, people will always be stressed, and you'll always have to come up with creative solutions. Your mindset needs to be prepared and able to handle various situations. Otherwise, it's game over man.

Go to Table of Contents