Web Development Best Practices and Workflow

The Old West was once known for being a wild place to live in. Its reputation was enhanced by its notorious outlaws, cowboys who did whatever they liked. The laws were nothing more than mere words to be acknowledge. These cowboys did their own thing.

Similarly, when I first started working in web development, web standards were in their infancy. There were organisations out there which set rules and standards to abide by but in those early days, the language we worked with was very forgiving to our errors and browsers rendered websites even if the code was horrendous.

I was once one of those web cowboys, hacking my way through the web, creating sites which today I would not be very proud of, but it was through that experience that I learned lessons. It was also through meeting and working with other developers that I understood the importance of “Best Practices” and “workflows”. In this article I will cover some best practices to follow when creating web development projects.

Best Practices

Whether you are a front-end developer, back-end or a full stack, the best practices are the same. I have divided them into five sections:

  • Tools/Development Environment
  • Version Control
  • Workflows/Automation
  • Guidelines and Standards
  • Deployment Model

Tools and Development Enviroment

Every developer works with a set of tools that will make his/her life easier. You can always start your coding project with Notepad on Windows or a text editor on Mac OS. Luckily various text editors have been developed over the years. The most popular are Sublime Text, Atom and Brackets.

Beside text editors are IDEs, Integrated Development Environment. I would describe these as enhanced text editors which allow for development environments and debugging. I personally use Visual Studio Code, but a quick Google will result in many others you can try. The best thing to do is download a few, try them out and use the one you find most comfortable using.

Version Control

I remember when I first started developing that I didn’t need version control, even on small projects. As my projects grew and my workload increased I started to make mistakes with my code. It was then that I started to realise the importance of version control.

A good developer will know how to use Git and will use tools such as Github, Bitbucket and Gitlab. At the very least knowing how to use Git will save you a lot of trouble when developing a project or collaborating with other developers.

Workflows/Automation

In this section the focus is automating as much of your development as possible. Some IDEs can be setup to automate a server or live-reload a webpage. However, it is best to learn about Task Runners such as Grunt, Gulp, Webpack, etc.

Without a Task Runner you have to build every aspect of your project manually and it can slow down your workflow. With a task runner automating most of the process, you can develop faster.

The current popular tool is Webpack, it does automation but it’s primarily a bundler. It is what all the cool kids are currently using and learning. The second best one to use is Gulp along with Browserify.

Guidelines and Standards

Where would a web developer be without a baseline to work from or a standard to work for? There are various websites that every web developer should reference: MDN and W3C would probably be the minimum.

A great reference to use for best practices on writing DRY CSS is Airbnb’s CSS Guide. If you develop using preprocessors such as SASS then their official websites are great references along with the official sites for Webpack and React. Whatever project or language you are working with you should always have the official websites for reference in order to make sure you are up to date with the Guidelines and Standards.

Lastly, if you have any questions a great tool to use is StackOverflow. There you will find a community of developers researching questions, asking them and answering them.

The Deployment Model

The Deployment Model can be divided into four main sections: development, testing, staging and production. Here is a good blog article which summarises the model.

Conclusion

As web development keeps evolving and best practices keep updating it’s up to each developer to keep up to date by researching, working with other developers or following others on social media. If you are a developer and thing I have left things out, feel free to discuss them in the comments section.

Posted by Jose Guerra

I am a front end developer with a focus on building mobile first accessible websites. I currently work with HTML5, CSS, SASS, Javascript and Webpack. Other experience includes developing WordPress themes and plugins.