Advice for New Front End Developers

Theming and Front-End Development are some 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

    An illustration of Silicon Valley with the word front end incorporated as a building.

    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 knew when I first started.

    1. 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 these collaborative tools are 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. In fact, 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 own 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 GUI’s 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.

    2. HTML with Your Best Shot

      We all know what a <p> tag is and <h1>, 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 front 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 a 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.

    3. 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 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 rules selector. With a common goal of applying the DRY Principle (Don’t Repeat Yourself), SASS turns this…
      A block of SASS CSS code. …into this…
      A block of SASS CSS code. …and reduces complexity and repetition. It’s how we manage code without going crazy!

    4. 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 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.

    5. Take a Big Gulp

      GulpJS (My Gulp Starter) – 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.

    6. 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 people’s 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.