Front-end web development can seem to be easy at first, but producing a clean, semantic, and cross-browser code is definitely not an easy job. In this article, I have compiled the top coding practices that have been useful to me in the past six years. As a front end developer, I have formed some habits, which have successfully translated into productivity and made me more organized.

1. Automate Your Workflow

Trying to develop for the web today is a difficult task. Our tooling landscape is getting more complex – Boilerplate, Frameworks, Testing, Docs, Workflow, Dependency management, Performance, Optimization, Build, Continuous Integration, Deployment, Version control. What if however, you could automate a lot of this?

“If you aren’t using automation, you are working too hard.” – Addy Osmani

It’s all about focusing our efforts on the areas in which we excel. No one wants to waste their time, so automation is all about letting the machines handle the stuff we don’t do so well, which in turn gives us more time to focus on our strengths.

In today’s world, front-end developers have more work to do than ever before. It’s not limited to create a functional, responsive, fast, good-looking website. We have differing screen resolutions, browser support, network speeds and other considerations all buzzing around, and we can make development easier by automating away some of the stuff.

There are different tools of automating your front-end workflow: Grunt, gulp and broccoli are few of them.

2. Naming Conventions

Use of proper naming conventions is considered a good practice. Sometimes, programmers tend to use a1, b1, c1 etc. as class names or variables, causing a lot of confusion. In order to prevent this confusion, it is usually considered good practice to use descriptive names in the code. Naming convention should be logically used throughout a project, no matter if it is a class, variable, image, HTML file or anything else.
Some Popular CSS methodologies that help a lot including naming conventions include:

• OOCSS (Object-Oriented CSS) is environmentally-friendly advice helping you write sustainable classes through recycling styles.
• SMACSS is an all-encompassing CSS game plan that will coach you through all the proper techniques.
• And BEM? Well, BEM is the gold standard of CSS class naming of which all CSS class naming schemes are measured against.

You can check the full article by Jon Cuthbert here about CSS Class naming.

3. Refactor Your Code

When you “refactor”, you make changes to the code without changing any of its functionality. You can think of it like a “clean up” for the sake of improving readability and quality. In other words, Code Refactoring is the process of improving your code without writing new functionality.

This doesn’t include bug fixes or the addition of new functionality. You might refactor code that you have written the day before, while it’s still fresh in your head, so that it is more readable and reusable when you may potentially look at it two months from now. As the motto says: “refactor early, refactor often.” Refactoring results in clean code. The main advantage is that it becomes obvious for other programmers to work on, and does not contain duplication.

4. Organize Your Files

As front end developers, we have to work with many different files like HTML, CSS, JavaScript, Images, project documents, client assets etc. Make a directory layout with a separate directory for each topic. For example: I Put all project related assets provided by the client in one folder called “Client Assets”. Inside each directory we can divide files into sub-directories for different sub-topics.

5. Use Version Control for All Projects

Make sure you keep all your projects in a VCS (Version Control System). You can use it for taking backups, share your code, let other people work on your code, storing revisions of your code. I use Bitbucket for all of my projects, you can use any version control system which suits you and your team most, some of them are Github, Bitbucket, Beanstalkapp etc.

There are many benefits of using a version control system for your projects –

Collaboration
With a VCS , everybody on the team is able to work absolutely freely – on any file at any time. The VCS will later allow you to merge all the changes into a common version. There’s no question where the latest version of a file or the whole project is. It’s in a common, central place: your version control system.

Restoring Previous Versions
Being able to restore older versions of a file! If the changes you’ve made lately prove to be garbage, you can simply undo them in a few commands. Knowing this should make you a lot more relaxed when working on important bits of a project.

Understanding What Happened
Every time you update a new version of your project, your VCS requires a short description of what was changed. Additionally, you can see what exactly was changed in the file’s content. This helps you understand how your project evolved between versions.

6. Learn Command Line

Most developers fear the black screen i.e. terminal. It isn’t scary, they are always looking for the GUI tools that they can use instead of poking with the command-line. I have met many developers who are unaware of most basic commands of their terminals. What I have learned over the years is, you spend more time in the GUI tool than on terminal. Even learning the basics of the command-line can take you very far. There are tasks that can be performed more quickly with command-line tools than any GUI tool. Also, you can automate stuff by easily putting commands in a terminal. Every developer should try to at least learn the basic commands.

“You know how to use Photoshop’s 3000 buttons and shortcuts. That’s scary!” – Addy Osmani

7. Attend Conferences or Watch Conference Videos

There are so many great ways to learn and sharpen your skills these days: you can read blogs, watch videos and attend webinars, there are many advantages in attending conferences, you can meet experts and influencers face to face, there are great networking opportunities for attendees to mix and mingle, you may find yourself sitting next to your next customer or mentor. If you cannot attend any of conferences, don’t worry, most of them post their videos either on Youtube or Vimeo. Watching good programmers can not only help you in understanding a topic, but it can also motivate you to learn and become like them. The idea is that sometimes you have to take a break from “work” to sharpen your skills. A dull axe won’t cut a tree nearly as effectively as a sharp one.