How to Program Like a Pro: Part One

qqbot

New member
May 31, 2009
134
2
0
This seems like a common question all over the internet, and advice like what I got in university seems to be extremely rare. So I am going to do a series describing the method I learned from a guy who used to be a partner at a big fancy firm and worked on some extremely important things like airplane and air traffic control systems, military equipment and banking/financial systems.

When most people start out trying to learn how to program, they begin by trying to learn a language, this is counter productive and seems to put a set of blinders on a lot of folks as far as how other languages work, how programs can work and how to produce something you could actually call professional work.

We are going to start out with a few other things that should be done before you even write one line of code, all programming languages translate into something called machine language, this is a set of instructions that microprocessors are set up to follow mindlessly regardless of what you actually want them to do, there is an easier to understand version of this language called assembly (x86 is the most common example, 64 bit x86 is basically the same, it just has bigger memory addresses so it can work with more RAM). When you write a program and compile it, your code is translated into assembly, and then translated again into machine language. If you ever played the telephone game in preschool then you can probably see why it is important to keep this in mind when designing a program.

Just as all programming languages translate into a very low level language, they also all translate into a very high level language called pseudocode. Pseudocode is at such a high level, you can't even bother giving it to a computer because it will not know WTF it is supposed to do with it. But there is also an advantage to writing your program out like this first, and that is that pseudocode is the easiest programming language for people to understand. You want to write your program out in a way that is specific, but also easily understandable, so that before you begin actually programming it you have an exact idea of what it is you are working on and what it has to do in order to fulfill its purpose.

Another useful description you will want, before you actually start writing code, is a UML diagram. Pseudocode defines the function of a program, UML defines the structure. You need to define this structure before you create a program for the same reason you need to hire an architect before you build a house. You know you need a house, you know what you need that house to do for you, but you also need to know how that house has to be put together before you call the contractors and start working on it. Another reason you need UML is that for really big software projects that require teams of people to complete, you need to create a critical path diagram of some sort, and you need to have the structure of your program laid out first in order to do so, but that is beyond the scope of this tutorial.

So, how do we write out the pseudocode and UML? Well, if your program is simple enough, you can just jump right in, but if it is complicated and you are not sure what to write, you need to take another preliminary step, and that is to basically describe your program in plain English and draw up some kind of corresponding diagram. The description is self explanatory, it could be a paragraph or 100 pages, the diagram can be anything from a simple flow chart to an FSA, PDA or Turing Machine. The last three tend to twist most peoples minds into pretzels, so for the purposes of this tutorial we will start with a simple short description and flow chart.

For our tutorial example, I will show you how to program a simple calendar and daytimer application.

Description:

The program will allow users to input events into a calendar, it will also have a corresponding agenda page for each day of the calendar, a checklist of completed tasks and a to-do task list.

The user will be able to input events into the calendar and tasks into the to-do list, as well as place items on the to-do list into the agenda pages. The to-do list will indicate if something has been placed in the agenda or not, as well as show task deadline dates. Tasks that have been put into the to-do list and marked as completed will then be placed on the completed checklist.

Flow chart:

(this is a multi step process and I am at the library and do not have a mouse at the moment, I will draw it all up and add it sometime later today, feel free to begin asking questions and stuff though)
 


It will not let me edit anymore, so here is the rest:

For the flow chart, what we do is basically go through the description, statement by statement, and create a bubble for each thing that the program has to do.

Description:

The program will allow users to input events into a calendar, it will also have a corresponding agenda page for each day of the calendar, a checklist of completed tasks and a to-do task list.

The user will be able to input events into the calendar and tasks into the to-do list, as well as place items on the to-do list into the agenda pages. The to-do list will indicate if something has been placed in the agenda or not, as well as show task deadline dates. Tasks that have been put into the to-do list and marked as completed will then be placed on the completed checklist.
Broken down into statements:

The program will allow users to input events into a calendar
it will also have a corresponding agenda page for each day of the calendar
a checklist of completed tasks
and a to-do task list
This first bit is easy enough, from it we know that we need:

1) A calendar
2) An agenda page for each calendar page
3) A checklist
4) A to-do list

So we make four new bubbles, like the step one picture.

We can start at a menu screen, or we can start at one of those pages and take the user to something else. I am just going to start at the current dates agenda page. So now we put some arrows in step 2.

Now lets move on to the rest of the program:

The user will be able to input events into the calendar
and tasks into the to-do list
We need to do these things before we can do anything else with the program, so lets put some more bubbles down in step 3

Now we have everything we need to add bubbles for the rest of the statements as in picture number four.

as well as place items on the to-do list into the agenda pages.
The to-do list will indicate if something has been placed in the agenda or not, as well as show task deadline dates.
Tasks that have been put into the to-do list and marked as completed will then be placed on the completed checklist.
So we create the last of the bubbles, but the second one will require a little re arranging of our previous bubbles. Because this flowchart does not have much detail to it, all the arrows are double ended, when you add more detail, such as certain actions being taken by the program, then you make little loops, like in the picture labelled loop.

So the program goes from the todo list, to the add task option, then places the task on the todo list and returns to the todo list. I usually just draw these with pencil and paper and cant figure out how to make the arrows a little clearer but that is what is going on.

The important thing though, is to make sure your diagram does not have any dead ends, and that you can get from one part of it to any other.

Once you have completed this, you have a basic, rough sketch of what your program is going to do, which we will use in part two of this tutorial to create a UML diagram and write out some pseudo. This may seem silly, but it is not, I cannot count how many shitty programs I have seen that were filled with enough retarded spaghetti to make my fucking eyes bleed. These two steps are critically important to preventing that from happening to your program as you write it.
 

Attachments

  • flowchart step one.jpg
    flowchart step one.jpg
    55.8 KB · Views: 39
  • flowchart step two.jpg
    flowchart step two.jpg
    57.4 KB · Views: 27
  • flowchart step three.jpg
    flowchart step three.jpg
    88.9 KB · Views: 24
  • flowchart step four.jpg
    flowchart step four.jpg
    51.7 KB · Views: 19
  • flowchart loop.jpg
    flowchart loop.jpg
    59.1 KB · Views: 26
I wrote that wrong, the second last quote is too detailed to bother with a bubble. So we forget about it at the moment.

This no editing thing is annoying.....
 
Hey qq, thanks for writing this up.

One thing that could help readability is including your images inline where you refer to them, I was getting confused flipping back and forth to attachments. Upload to imgur, etc if needed.

Question: do you regularly draft up full blown technical UML diagrams for your coding projects? Or do you just mock it up with pencil/paper in most cases to a point where you're able to move to pseudo-code?
 
Hey qq, thanks for writing this up.

One thing that could help readability is including your images inline where you refer to them, I was getting confused flipping back and forth to attachments. Upload to imgur, etc if needed.

Question: do you regularly draft up full blown technical UML diagrams for your coding projects? Or do you just mock it up with pencil/paper in most cases to a point where you're able to move to pseudo-code?

I stick to pencil and paper, all the way up to the point where I sit down and code, I have found it to be the easiest and fastest way. Just like with figuring out (other) math problems.

Messing around with diagramming software makes for a nice clean picture at the end, but when you are working with it, I find the clicking and typing and crap to be a bit of an unnatural hindrance when I am trying to think compared to just scratching it out on some sketch paper.

If I want something that looks nice and that I can email or whatever, I will piss around with Draw or Visio after I have it all written out on paper, but I don't like working with any diagramming software I have tried so far and avoid it whenever possible.

As far as how detailed my diagrams get, I really only do a class diagram unless I feel like I need some other type.

Sometimes the other types, (object, package, deployment, composite structure and component for people who want to look them up), can be really useful, especially if you want to go beyond just algo optimizations and try to improve efficiency by changing the structure of your program. I don't really see much use in them unless your program is so complicated you need something to help you think about it, or if it is something that is going to get absolutely hammered with volume and you need to make it as simple and close to perfect as you can by drawing it out and staring at it for a while.
 
Is there part 2, to this? If so please post the link here so we call can follow on to the next one.

If you get to coding your little app it would be awesome if you put it up live somewhere.

Otherwise nice work!
 
Is there part 2, to this? If so please post the link here so we call can follow on to the next one.

If you get to coding your little app it would be awesome if you put it up live somewhere.

Otherwise nice work!