Today I’m going to focus my efforts on something other than code, but which is essential to every developer out there – The workflow. Nobody really talks about the holistic end-to-end workflow. We don’t actively try to make our workflows better and improve ourselves, at least not socially online. We sit sheltered in our dark rooms and software houses keeping things to ourselves.
I’m going to be sharing my experiences and knowledge from the last few years on what I consider up and coming, and seasoned developers should be doing to enhance their productivity, lead a team, get a promotion - or whatever you’re striving for.
Here are my top workflow tips to become a more efficient developer.
1) Boilerplates and Frameworks
Having a boilerplate is a fundamental part of the development process. It’s a kickstart tailored for your most frequent project types. A boilerplate is not just a few folders, files and some repetitive defaults you’re used to working with. Treat it as a side project and development tool that will be valuable and essential for yourself or your team. There are many boilerplates to help get you started, such as HTML5 Boilerplate, but nothing is as valuable as starting your own, releasing it and evolving it. Refining your most used pattern of workflow is key to a project startup.
Frameworks are also a large part of the Boilerplate ‘category’, providing us with even faster developer tools. Modern frameworks include Foundation, Twitter Bootstrap, and you’ll find thousands more. I tend not to use these as they’re extremely bloated and not written with management and maintainability in mind. They’re majorly geared towards people who can’t write code. By all means integrate the best bits into your projects but don’t become reliant on them. Be smart if you’re going to use them.
Automating project workflow is the biggest step to becoming efficient. Sure, it’s great to create a sparkling new project folder, add your CSS folder, the JS folder, the IMG folder, and so on, but wouldn’t it be great to automate this? There are some great automation tools that altogether save countless hours every week.
One tool I’ve been using for automating project boilerplates is Yeoman, which integrates Yo - for project scaffolding, Grunt - for automating builds, testing and tasks, Bower - built from Twitter as a dependency manager to download and install scripts. It’s well worth checking out. It has got a lot of libraries that you can generate new projects from, including HTML5 Boilerplate, Twitter Bootstrap, AngularJS projects and more.
3) Version control and Repositories
Version control is a must-have for every single developer out there, regardless of your level. It took me too long to integrate it into my personal and freelance development workflow after being introduced to it a few years ago. Using version control during working hours is a blessing, it’s great to know your code is safe and that you’re collaborating in real-time with your team of developers, but at home you must discipline yourself to do the same. All projects, regardless of the size, are really important to you and, I encourage you to manage them with Git or another version control tool.
Personally, I use GitHub for public projects, and BitBucket for private, BitBucket gives you Private repositories for free, and coupled with SourceTree it’s a fantastic all-round experience. There’s no excuse not to start using it at home as well. It helps you become a more structured developer – commit your changes, pull the repo, push your changes. Because it’s stored on BitBucket/GitHub you can access it anywhere too. And should you ever damage your local development environment through computer failure, breakage or accidental deletion, you’ve got cloud backup. Be smart.
4) Agile development
During projects, we adopt an agile development process involving sprints for completing chunks of work. It’s incremental short bursts of work to get to the end of that particular piece. It’s far better than listing out a whole heap of requirements and working towards a deadline. The Agile process is to become more structured, to help you think and plan your projects more rather than go ahead and make mistakes. Tasks are split into stories, stories have sub-tasks and you view a ‘burn down’ chart to see if you’re on-track for the projected finish. Project estimation plays a large part of a successful sprint, and the planning phase is a perfect opportunity to go through the brief and requirements, and raise any flags about things which could take more time, go wrong and work towards a more targeted deadline.
5) Compiling code
6) Code commenting
I’m a huge advocate for code comments. Commenting makes you and your team more efficient, especially when you come back to make changes later. In each script and style file, I have a table of contents (especially for Sass/SCSS) and a copyright notice on the global import files. This can contain the author, URI’s, company name - it’s totally up to you. Comments offer a non-markup-impactful way of staying organised inside your files.
Keeping your file count to a minimum, the tables of contents should identify the core areas of your code instantly so you can jump to the relevant section and begin coding again. At the top of my table of contents, I also have any authors that contributed to the file, version number the file is on and which file it compiles into. For instance, buttons.scss compiles to styles.min.css and you can then configure CodeKit accordingly without asking anyone, self-efficiency. Commenting your HTML is another way to stay efficient, dividing your code blocks into digestible chunks when scrolling through the source. I like to keep things all uniform and lowercase, so it blends seamlessly into your element names.
7) Post-production workflow
Code is also part of the workflow, not just the tools you use. Build in such a way that future changes are seamless. Object-Orientated design and programming are a key essential part to being efficient and maintaining your code. Keep production files outside of the build source, your files should be organised in such a way that they’re almost self-descriptive. Combined with your code comments, your file structure should be organised properly. Utilising your own boilerplate and evolving it will make sure your fast-paced projects get the necessary scaffolding from the beginning. Mixed with tools such as the aforementioned Yeoman, you’re on a road to increased efficiency.
8) Documentation toolkits
Tried and tested code should make its way onto your digital notepad. Make sure you reuse as much code as you can, namely the advanced stuff. Your documentation can grow over time, but start off by recording every useful piece of code in its infancy. By infancy, I mean before you go and populate it - the bare bones of the functionality. Do this to begin with or as soon as you’ve learned something new because you’ll only go and extend it in another direction and end up forgetting what the initial structure was like. Record and document as you go along and you’ll set yourself up for not only a faster development process, but documentation to refer to and copy from and utilise again in your next project – a no brainer.
Your documentation toolkit doesn’t have to be in-depth and huge. Just some short notes in the way you and/or your team can understand to make future development effective.
Looking back on your past work and thinking, “wow, my style and productivity has changed since then” is exactly where you want to be going. This could be a year, or a month. Sometimes I get to the end of an article and change one little thing about my process to further refine my development. Hopefully you’ve learned something, taken something in or heard something that you can take away and integrate into your development workflow. The key to a properly structured workflow comes from talking it out, trying and testing. No workflow is perfect, but look back on what went well and what could be better. Work with your team to refine the project next time.