Clean Code Part 1

The goal of writing clean code is to make your code easy to read and understand. Simple is better and less is more?

Lets think about how a train operates, the track allows the train to move quickly and stay balanced. The track to train wheel is an elegant solution to cutting out the what if factor. A train is simple, it's elegant, and the solution to mass travel at high speeds has been solved by the train for years. 

When a train travels into a city environment, questions like, how does the wheel adjust to a flat surface, arise. However here lies the beauty, it doesn't have too. I pondered this question and thought about an adjusting wheel, well after all of 5 secs I could already imagine the slew of issues with that solution. Instead it's one wheel, one train, and it can run on an above ground track or a track that resides below the ground.

In software development and as software developers this is what we should strive for. Finding the simplest solution that achieves our end goal and also allows for future unknown conditions, like the environment change when a train enters a city. Staying away from overcomplicating our code and packing too much in one area is the best method for future expansion.

When we think about solving problems in this way it does require extra work, more thought out actions, but it allows more room for future adjustments.

Questions like, is this the best solution? How does the code I'm implementing affect future actions? What problems does this code cause, when changing it slightly? Here is an example that I experienced when I was learning responsive web design.

In responsive web design, the end goal is to make websites that scale nicely to smaller or larger screen sizes. The most common method for doing this is using Twitters bootstrap library to make the process easier. However, lets imagine I was writing without bootstrap.

I add an image to my page and then begin making the window narrower. As the window shrinks, the image stays the same size. To counter this, I use media queries to resize the image manually at each breakpoint. A breakpoint for this specific instance, is when the image size is no longer compatible with my page.

So problem solved right? I can just write 10 or so media queries and the image scales to how I want. However, even though it has the appearance of responsiveness, we are only setting ourselves up for future issues. Now lets say the original image was not right, we want something bigger. A lot bigger.

We resize the initial image and oh would you look at that. Everything is on fire. The previously set media queries are now off by the degree we changed and the only way to give the appearance of responsiveness is to manually reset the values for each media query.

Now this is only a single image, what if a week later I needed to change five different elements. Now that's a huge task, many lines of code, hours of tweaking, and all so a week after that we can repeat the process. Well, thank god for bootstrap, and other built in responsive functionality we can take advantage of.

Hopefully, the idea of spending hours and hours in an infinite loop of minor changes because we didn't properly think through future expansion, scares the hell out of you. So spend some extra time prior to touching the keyboard, think it through, and try to remember in software development the first solution you think of isn't necessarily the best choice.

Author: Znergy

I got to school full time for Computer Science, work part time on the weekends, and spend 40/hr M-F at Epicodus (code school). I'm a growing developer and I'm learning new skills everyday.