New to the Tech field? Advice for New Front-End Developers

Theming and Front-End Development are two of the fastest-growing positions in tech. We’ve seen high demand, the potential for excellent job growth, and promising industry salary trends. Before your journey can begin, there is at least one key thing you should consider

“Think deeply about things. Don’t just go along because that’s the way things are or that’s what your friends say. Consider the effects, consider the alternatives, but most importantly, just think.” –Aaron Swartz, Software Developer, and Internet Activist

We stand on the shoulders of the giants who came before us; look around and you’ll find someone or something to learn from. Front-end development is full of renaissance personalities, so it’s up to you to decide how far you can or want to take it. Stay curious. Don’t use code you don’t understand, but when you do understand it, help others who are where you once stood — at the beginning.

So, with that in mind, here are a few things I’ve learned from mentors, independent study, and plain old problem solving, that I wish I had known when I first started.

Just Git Started

Make sure you have, at the absolute least, a minimal understanding of Git. As a professional, you will be working with other developers and this collaborative tool is critical to the development workflow, not to mention what might happen if your computer blows up without warning. Git is your backup, your grace, and savior, but can also be a nemesis if not used with focus and attention. You don’t have to learn everything overnight. I would recommend working closely with a ninja-level Git expert until you get the hang of it. As in all things, you grow incrementally in your understanding of and talents with Git.

• NOVICE: Find a graphic user interface (GUI) Git module, like Sourcetree or GitHub Desktop. These are great applications to help you visualize the code.
• INTERMEDIATE: Once you get a little more comfortable, all the GUIs have a terminal option. Use both in parallel to control and manage your code across multiple processes. With constant updates on the GUIs, those programs are going to give you trouble.
• ADVANCED: If you are at ninja-level in Git, you are likely handling DevOps and overseeing multiple projects, with many developers, and lots of pressure. This path can have many dragons, and processes like Gitflow standardization can give you a significant level up. I am working on learning the ways of the Git Guru, and nothing beats a having a solid cheat sheet like this one within close reach.

HTML with Your Best Shot

We all know what <p> and <h1> tags are, but what about <abbr> or <dfn> tags? How do we make sure that these elements are structured with best practices and accessibility in mind? These things should be in the forefront of your mind from the beginning. We’re responsible for ensuring that most people can access the data we are presenting in the UI. Templating and familiarity with HTML5 will benefit you greatly as you transition from theming to JavaScript development. Develop these good habits early on. Building around accessibility will help to ensure that your work is accessible to the widest audience possible. This will set you up for good practices when you move into more complicated JS development.

You trying to SASS me?

Writing traditional CSS in a single styles.css file is not how modern-day code is written. We need things to be more effective and efficient, and we need to be able to create variables that can be used across thousands of lines of code and updated only in one place. You’re going to want data types, operations, and functions. Establish rules and directives, as well as arguments and partials. There is no better way to do this now than with Syntactically Awesome Style Sheets or SASS. SASS allows us to create CSS rules that are nested, which means the inner rule only applies within the outer rule’s selector. With a common goal of applying the DRY Principle (Don’t Repeat Yourself), SASS turns this…

.main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

…into this

.main p {
  color: #000ff00;
  width: 97%; }
.main p .redbox {
  background-color: #ff0000;
  color: #000000; }

…reduces complexity and repetition. It’s how we manage code without going crazy!

IMO, NPM

You hear everyone talking about it, but what does NPM mean? Now Printing Money? Nougat Predominant Middleware? (Find more quirky answers at their site). NPM is your Node Package Manager, and it gives you access to an extensive JavaScript software registry. Put basically, this is a powerful, reusable code used to install and manage project dependencies. There are over 475,000 components built-in JQuery, Bootstrap, React, Vue.JS, and Angular, to list a few. You can assemble these NPM packages like building blocks to create amazing things. With so many packages, be sure you are not overusing, and try to research the most used and highest recommended for a more stable package.

Take a Big Gulp

GulpJS (My Gulp Starter) is your first ninja-level code and a step towards progressive web apps! The Gulp API has lots of great features for building your minified JavaScript and CSS files.

Front-End Soul Food

Get on Twitter, Reddit, StackExchange, and others; follow your interests. I can’t recommend this enough. Read anything and everything you can get your hands on. Review other peoples’ code. Follow industry trends. You will get to be part of the conversation faster and, trust me, there are a lot of conversations happening.

To get you started, here’s a curated Twitter list for your consideration.