First, solve problem Then, write code

June 28, 2016

At starting of my developing journey when I used to code the HTML and CSS and create some static pages that look awesome (if you don’t compare them with other online websites). I used to experiment on the divisions and the architecture first without applying any style on it so that I just simply add the classes and id’s to it, it is like creating a frame that is just without any style just a normal frame.

So that I can create as many designs from it by just changing or adding the color in the class that I assigned to it. So that I can change the pages by only changing the CSS file. In the Tech Fest of my college “Kaivalya” I worked on my very first project for web. The task is just to make a front end for the website for the college Computer Science Club after making the front end you have to make a backend for it.

When I first see that task I was thinking about how I start building the website. So i just searched many of the websites and choose a website that is very simple in design. At that time I did not know any software principles and the designing aspects. I see the websites and if I like a feature so I added it to my website.

Without proper planning and design I created that website because it is a small project and if there any problem occur I can recreate it from scratch also, but what if I am going to work on bigger project and use this type of approach that I used to create my website then what’s gonna happen. Then the website is not manageable one of the example that when I am working on the WordPress theme creation for the first time I faced the problem in the sidebar that every time I change a bit CSS of main content the sidebar get exploded.

It is because I did not settled the width of the divisions of main and sidebar content but then I first created a diagram for that and defined that how much part of the screen it is going to be covered by the different containers. The theme has many other flaws but it is just the starting of my WordPress Journey.

Design is the creation of the plan, the solution to the problem, that it be like how one will see the problem in his aspect, everyone have a different solution. We just have to think in every direction. I am reading a book named Code Complete and in it an example is given with a topic “Design Is a Wicked Problem” it is about design of a Bridge named “Tacoma Narrows bridge“.

At that time when the Bridge was built the main focus of engineers is to give it a strength that it is strong enough to support the load. But due to the Aeroelastic Flutter of the wind and the bridge is not ready to handle the air of speed 68km/h so it get collapsed. A nearby photographer recorded a footage of it when this happened. This footage is still shown to engineering, architecture, and physics students as a cautionary tale.

But what is the moral of the story. In my opinion the moral is about the seeing the problem in every direction and generate your own test cases as if they were aware of the Aerodynamics thing they will make a design that the bridge can withstand in the high-speed of air also. And it be like Trial and error method that they created a bridge and it get collapsed only in 4 months of creation so that they find out about the aerodynamics of the bridge and created a new design for the next bridges so that it will never happen in future.

We have to learn from our previous errors and have to try new things. Cause design is not an algorithmic process it is heuristic in nature. One of the problem like this occurred with us that we three Nitin, Dhiraj and Me are working on a plugin for Hiring System for ColoredCow. The problem is that when we are said to create the plugin that displays the Vacancies available we think about in a way that it will be like a widget for the site that will show the vacancies in a carousel way.

So we created a widget but then after delivery we find out that what they want is other than this Widget thing they just wants a shortcode method that wherever they want to put that carousel they just have to add the shortcode. This is not a big deal but it will be like an example of not seeing the problem in different way or may be not seeing in the clients way of using the Software. Now we added that feature too.

For our college group for Web Development we created a task that is just to check the designing skills of the students. It is more like an experiment that how they react on the task and derive their answers.

The task is to create a website for a firm with a basic functionalities eg. Home page, About Page etc.. Everyone come up with different designs and some of them added the exact pages that we mentioned some used their creativity and added other features and pages to the website. It relates me to the topic of Managing complexity in the “Code Complete” that the webpages we mentioned are the basic requirement and are essential for a website. But the other accidental features are also demanded by any firm that he does not mention like in above example client may be think that we add the event and notice bar our self or anything.

It is depends on person to person how they design and the time factor or may be other factors also. First Solving the problem then starting the design phase will help more in coding phase then directly starting the code without the plan or Design. As the John Johnson said

First, solve the problem. Then, write the code.

Thanks for reading if you have any comments or feedback you can reach out to me on twitter.

Up Next