Developers are always working on how to make the most of the code they write and the time they have. The old saying of working smarter and not harder rings true in most professions, but in web development smarter can also mean quicker, cleaner, and better.

In any agency it can sometimes be hard individually or as a group to free up enough time to reflect on how best to streamline the development process. So here’s some tips based on approaches we now practise and, more importantly, how to easily implement them.

1) Rapid Prototyping (trying is always better than guessing)

I’m sure most developers have experienced the scenario; the client and/or PM wants this great feature that you think will be ok to build but you can’t be 100% sure. The problem is, prototyping takes time, and in an agency environment that time can be limited. Therefore what is needed is a way to streamline the process of getting prototypes started. Enter Grunt.

Grunt is an automation tool that will complete many of the repetitive processes developers deal with regularly such as code minification, compilation and testing to name but a few.

We therefore set up a bare-bones project folder to start our prototype, and with one command Grunt would:

  • Start a local server and open it up in the browser
  • Watch for changes to any files in the project
  • Compile and compress the files
  • Reload the page whenever it detected any changes

This has made a huge difference time wise, and has cut out laborious tasks in both builds and prototypes. (View set up instructions here)

What you can do: Create a small automation script with Grunt to drastically reduce setup and development time for prototypes.

2) Remember what you did…and let others know as well!

Continuing with prototyping; a common issue that occurs is that once a prototype has been built, often it can end up not being used in a build. This can be down to anything from a change of heart from the client, through to the concept not being quite right for that project. By that point though, the effort has already been invested and it might feel frivolous. To make the most of these prototypes we created an internal ‘gallery’ style site where we upload every prototype experiment. These pieces can be categorised based on anything from its area of use, to the language it was coded in.

This now means that anytime UX and graphic designers work on a project, they have a constant point of reference for things that they might want to incorporate into a design to give it a bit more flair or distinction. Not everything that you add to a site like that will end up being used, but there’s always a chance that a piece that would otherwise be hidden within a folder on your computer could become useful in a future project.

What you can do: Create a simple site to store your prototypes. If you don’t think you have the time to create one, sites like Codepen offer the ability to store pieces privately.

3) Don’t keep remaking your own wheel

Reused code is a fact of life in most agencies. A template for an email, styles and layout for a blog article; all are used multiple times with some subtle changes. Some is the key word here, as there’s a little bit of tinkering to be done for it to satisfy it’s new use. If you’re interested in streamlining that process, meet Yeoman.

Essentially, Yeoman can help you recreate templates (or even entire projects) you’ve made before with one command, but also allows for parameters to customise them. This means everything from subtle text changes to whole features can be altered, and take the same amount of effort to build.

For us, Yeoman increased our productivity by adding a lot of flexibility to our standard house styles. We use these for all our projects, and it contains a range of styles and scripts which form a clean foundation that all our developers know. However, as more work is done and more features are added, very few projects are going to need them all. In this case, Yeoman provided a neat solution by allowing us to cherry-pick features from this larger collection.

At the top level, the flow for setting up a new project now goes as follows:

  • Run one command to start the Yeoman setup
  • Type the title of the project (which is then used within the code when it’s generated)
  • Decide if we want responsive styles added to this project, and simply type yes or no
  • Pick from a list of features available that we’ve created previously (popups, tabs, icon fonts)
  • That’s it. Yeoman has created our custom project code based on our choices.

If you’ve never used Yeoman, they have loads of great ‘getting started’ tutorials, but to make it even easier you can access the house styles example explained above, along with setup instructions. This will showcase the different ways you can customise the code you’ve already created, but also how quick and time-saving it can be; it takes one command once it’s set up.

What you can do: set your commonly reused code up with Yeoman to create and customise it through the command line.

4) Don’t rely on your own world for inspiration

It’s nice to solve problems by yourself. That feeling of triumph at thwarting a bug or thinking of a cool new feature without resorting to disturbing others is great. Unfortunately for a large majority of people this is not a constant and if it were, agencies would be very quiet places.

A lot of time is spent searching for inspiration on a project so here’s some advice: talk about it. Talk it over with others, even in other departments. Anyone who’s mildly interested really. You’d be amazed what insight they can offer. They could think of new features for your projects, or even brand new uses for them.

Everyone around you is constantly interacting with content in contrasting ways, so open brainstorms to all who can relate to the subject matter or have an idea they want to contribute. The department you work in does not dictate creativity.

On subjects more closely linked to the creative discipline, it’s advisable for the creative team to meet weekly to share things they’ve seen or read about, and dissect any issues they are having on a project. These discussions don’t require a particular topic or talking point, as being around others lets creative ideas spark.

Subject matter will always help these situations, and this links well to the point about sharing prototypes with the creatives around you. A starting point will always help begin a conversation, but I promise that just having them will save you and those around you more time than they cost in the long run.

What you can do: Talk to others. Share ideas. Repeat.

So there you have it. Whilst I can’t claim a perfect level of efficiency, they have helped myself and Tangent Snowball make greater use of our time and will no doubt do the same for you.

Ashley Firth

Ashley Firth

Contributor


Ashley Firth is a Front End Developer at Tangent Snowball