February 24th, 2012 by Kyle Kellogg
Front-end web development projects can be difficult at times, but they don’t have to be. Every project is unique and each brings new and interesting challenges. These challenges are frequently presented by the very technologies we choose or must use on the aforementioned projects. Although using them is a great way to become more skilled, sometimes they can stand in the way of the project at hand. Mitigating these challenges through a process which can be repeated serves to not only improve the project and it’s schedule, but also your work.
Many, if not all, of the examples that follow are technologies or methodologies that members of Infrared5 have used before, but they’re in no way a comprehensive list of what is available or a recommendation as to what to use. Figuring out what works for you, your team, and the project is an important piece of this repeatable process.
The most important thing you can do is to plan ahead. That may seem obvious, but it can be easy to overlook doing it properly. Planning doesn’t have to be absolute and it doesn’t have to be too granular, but the more you plan for the more you can prepare for. Have you had things go wrong in the past? Make sure you account for similar situations in any new plans you create! You’ll never be able to perfectly account for everything, but you can account for most things.
Start with something and build up from there. You can utilize HTML5 Boilerplate, Bootstrap, or whatever other starting point you feel comfortable with. You can use Initializr help set up an entire project, if that’s what makes you feel comfortable. Personally, I like to start with just the 1140 CSS Grid and jQuery.
Have your content and designs ready before you need them. Also make sure your designs are done based on whatever grid you’ll be using for your layout so that you don’t have to retrofit the design to the layout. Getting a running start on a project is all well and good, but breaking the up the development with blockades can make everything take longer than it has to.
I want to expand upon the modules I mentioned in the previous paragraph. These modules allow you to break functionality into smaller pieces, focus on them, and then combine as a whole to get the job done. Think of it as a loose implementation of feature-driven development. This allows your code to be more organized, more readable, kept in context, and focused on in a feature-by-feature way which, for me, helps development get done quicker.
Another piece of the development process I cannot stress enough is to use version control software and use it often. I prefer git, because Keith Peters turned us all on to this process which has helped reduce conflicts while working with a team. Use whatever you like though, because at the end of the day it’s all so that you don’t lose any work you’ve done.
Separate your development cycles so that your brain isn’t trying to do too many things at once. Do your development, then any and all enhancements, and then whatever bugs there are. This process may need to go through several iterations, becoming something like the spiral model.