Part 2: Why does my web developer take ages to do simple stuff?

Following on from my previous blog post which tackled the reasons web developers take so long to make changes to problems relating to servers, here is Part 2 on coding.

Back to part 1.

Why does coding take so long?

There are many reasons why coding takes such a long time but I’m only going to touch on a couple of common ones. First of all, let’s take a look at the most common questions you’ll ask your web developer or IT guy which relate to coding:

• Can you move the menu from the top to the left (or just move the menu to a different location)?
• Can you make the images appear in a random order on the slider?
• My Instagram feed doesn’t work
• Can you make the gallery images click through to different pages?
• Can you make each title header different colours (colour-code the pages)?
• Can you change the meta tags?
• I added a new page to the menu and now the menu is broken on desktop, mobile and tablet…can you quickly fix this, it’s just a menu?

Unfortunately, we are normally asked to make these types of changes at the 11th hour. For example, we’re literally about to deliver or launch any piece of software and someone asks ?” Can we just add one more thing?” followed by “it’s just code so can’t you just change it?” Yes, it is code and yes you can change it. But not “just” change it. This is pretty much like asking a car manufacturer just before they are about to ship their new car “Oh, can you just add wings? They just bolt on the doors”. The answer would be the same: yes they can but that’s a lot of work. They would need to strengthen the body, add ailerons and add any other supporting material needed to make a flying car, test the car and then deliver it. The same occurs in code. Let’s take a look at a more specific example. Let’s say you want to allow a user to record the name of their pet in their profile (there is currently a profile section but it doesn’t currently collect the information relating to a pet name). We would need to do the following in most cases:

• Backup the database
• Add a new column to the database for pet name
• If something went wrong, we would need to delete the database then restore the database and try again
• Add a new field in the code which allows entry of the pet name on the user interface
• Add functionality to allow the users to create, view, update and delete their pet name
• Change the code which stores the pet name
• Add any validation for the pets name
• Change any user interface code which displays the pets name
• Change the styling for the user interface as it now has extra value
• Ensure the styling for the pets name looks good on mobile, tablet and desktop devices
• Ensure the styling for the pets name looks good on Chrome, Firefox and all other browsers including Internet Explorer

…and depending on the complexity of the system it could be even more. Most of these tasks are an hour or so long, or more especially with larger websites, as we have to move and copy hundreds of gigabytes of data around the internet just to back up a site before we begin adding new functionality. The next issue I want to share is why it takes so long to make the user interface of a website look great and work consistently on all browsers and devices. By work well I mean get all those little fancy animations and basic plugins behaving correctly. Firstly if you want a website with lots of functionality then the chances are some of them are going to interfere with one another. So the code and styling which makes your Contact Form work well might completely disable your Email Signup form. Most of the decent user interface functionality use about 5 libraries and 20 files, so it’s not always easy to locate the issue in all cases. For example, the Mail Chimp signup plugin for WordPress has 43 files and 4 libraries which it uses just to send your email address to Mail Chimp to get stored in a list, pretty crazy right? So say we get the plugins working, the code no longer interferes with one another and we just want to make it look great. We need to use what is called Cascading Style Sheets or CSS for short. This allows us to align things left, make fonts bigger, make areas have rounded corners and so on. Sounds easy, but certain styling only works on certain versions of certain browsers. W3 Schools CSS reference shows what styling works in what browser and by looking you can see it’s a mess. We can test on 10 browsers, then get a call from a user saying the web page doesn’t look right and then have to figure out what browser it doesn’t look right on and what styling attribute is causing the issue. For example the other day I found out after 10 years that if you set an image height to ‘auto’ which means depending on what the width of the image is, the browser will scale it so it isn’t skewed. This setting renders the image invisible on Internet Explorer 8 (but works just fine on all other Internet browsers!). It took me 3 hours to figure this out, because why on earth would Microsoft make the image disappear for any reason other than actually setting it invisible…