How to optimize your web development workflow

I’ve been a web developer for roughly 16 years now. I admit i haven’t been there from the beginning, but i caught a lot of the early developments back in the late nineties. Some of you may remember such atrocities such as Microsoft’s Frontpage, which back then was nothing more than a very simple WYSIWYG editor with FTP integration. Or at least those were the functions i mainly used back then.

The halcyon days of WYSIWYG and Table Layouts

Creating websites, back then, was just a hobby for me. And Frontpage was enough to create some collections of pictures, text and animated gifs and upload it to some random geocities host to show around to my friends.

The early years

Later came along Adobe’s Dreamweaver which quickly replaced Frontpage as my HTML Editor of Choice. I also got my hands dirty with Flash back then, even at some point building complete websites on it, frame by frame, so to speak. I was young and i needed the money.

This also was about the time that i started work as a professional web developer, though, back then my job title was actually “Web Designer”, though i rarely did any actual design. Well, i guess it was better than “Webmaster” or “Web Publisher”.

I am very glad this is a thing of the past – it was always a bit of a “realsatire” to me

At some point in my active web developer career, along came the need to program more complex pages. Clients suddenly had the need to be able to edit content by themselves, without any IT knowledge, so i had to figure out a way to let them do it. I learned about side languages such as Perl and PHP, even built my first “hand coded” CMS and e-Commerce Systems while learning the secrets of Backend Development when on the other side of the Web i discovered new standards. Cascading Style Sheets just established themselves.

It came as a surprise to me then, that “Table Layouts”, which so far were a welcome technique to quickly transform Photoshop Files into HTML Templates in a pixel perfect way, were totally a “No Go” from an idealistic Web Developer’s Point of View.

Growing up

The years went by and so did web standards, Open Source CMS Solutions, Template Engines, Minor and Major PHP Version Updates. HTML5 and CSS3 have become welcome standards, Flash has practically died out and I still actively use PHP as my main server side language – the time of “hand made” backends are gladly over though, now that i have sort of become fluent with Zend Framework.

The resulting apps are much more stable, solid and flexible thanks to the rapid evolution in technologies, looking only at the last few years.

Where do we go now?

The technological evolution in the web seems to happen exponentially fast. As standards become more common and the availability of openly licensed snippets or even full blown software is vast – thanks to platforms like GitHub and a very active and good-spirited community behind it, the quality of publically available code has increased as well.

As a result of this, the bottleneck of the web development productivity cycle is not technical saviness anymore¬†(“there’s a github repository for that”)¬†but much more the workflow.

Of course, the basics such as HTML, CSS and JavaScript should be mastered at this point. If that is not the case, there’s excellent training units for that to be found on Codecademy. These will teach you the basics of many programming languages. And it’s free. Go do it, even as an experienced programmer, some of the exercises are quite fun (didn’t you always wanted to create a Black Jack game in Javascript?) and there’s always something new to be learned.

I often seem to lose more time resolving errors that result from the absence of a solid deployment workflow – as most of the time i still use plain old FTP in order to deploy latest web updates. This may be ok for simple pages but has many times come back to bite me hard when something goes wrong after accidentaly uploading a file to the wrong server environment.

The urge to optimize Workflows

Only very recently i felt a strong urge to kick my web development workflow up a notch. I read some things online about magical frameworks and command line ninja techniques that were supposed to make my life as a web developer so much easier. I was aware of the learning curves that this step will bring but at some point i was just so sick of tripping over the same erratic workflow nonsense and the error they would bring.

Looking for a better Web Development Workflow

It was then that i started an intense research and started watching speeches and reading blogs about topics such as:

Some of the articles and videos i found completely blew my mind. The discovery of Sublime Text as my new favorite editor and Yeoman as the latest gadget to help me boilerplate web applications alone felt like the equivalent of the moon landing, in terms of personal web developer productivity breakthroughs.

As a conclusion and for the ones of you that are more into watching videos, here’s a nice speech from Paul Irish at the HTML5 Developer Conference about his tooling process and web development workflow. It’s from 2012, so there’s actually a lots of new tools out since, but it’s a good starting point.

What are the tools you use to increase productivity when it comes to prototype, develop and deploy websites and -applications?

Leave a Comment.