#009 - Flow Chart a Project Using Pen and Paper
Despite my UI/UX sketches and Trello-hosted lists and spider diagrams, I now use flow charts to help me visualise the structure of my programming projects.
In recent weeks, I have been working on my side project, which is the 'deluxe' quiz programmed in JavaScript. It's a 'deluxe' quiz, because I have thrown in some nifty features to make the quiz less predictable. After all, who wants a boring quiz that displays the same questions and answers in the same order every time the application runs?
Due to the complex features that I have challenged myself to code, as I develop my growing skillset as a software developer to be, I was stuck on a key function where I couldn't get an expected result to ring true.
In short, I wanted to randomise the order of the possible choices per question asked, but since the formatted data is different to another random feature, I had trouble passing the choices array to this function.
Confused? Well, me too...
I considered taking time out to play a video game, but I overruled myself to overcome this problem once and for all.
Before I reached the conclusive solution in code, I sketched out a flow chart using pen and paper. I carefully annotated the flow chart to devise what I wanted to achieve and what I expected the program to do. I then listed the functions that would process and/or pass data (i.e. randomise the order of questions, etc).
Whilst following my own flow chart, I realised the solution was simple to solve.
The underlying issue was that I wasn't referencing my imported array when it was being processed by another function. Instead, I was referencing the items from the original array as opposed to a randomised array of items.
Ultimately, I wrote a function that would randomise the array elements of any imported array that I would pass through, which is what I wanted to achieve - thus avoiding the pitfall of repeating code blocks and deploying the DRY principal (Don't Repeat Yourself). After fixing my bug within that function, I now receive a randomised array of possible choices per question asked, which is exactly what I wanted.
When I digested the euphoric moment once the logic made sense in my brain, I carefully proceeded to code the solution on the spot. I then wrote a test statement using the console.log() and passed the expected results to the DOM (Document Object Model) - and voila! Success!
The funny thing is... if I wanted a bog-standard quiz, I would have finished this side-project ages ago. However, as I want to challenge myself with extra features and randomise select components, I have sought to program those very features in my own quiz app. In addition, the challenging features is also stretching my brain cells to think how I can approach this problem in a pragmatic way that is easy to maintain and further improve.
As a creative person at heart, I still rely on traditional mediums to assist me in a technology-driven culture. I understand that as a software developer to be, there is a trigger-happy syndrome to want to start coding everything in one go. I believe the healthy approach to software development is to formulate a structured design before writing a single line of code, especially when a technical project will likely grow arms and legs.
At the time of writing, I am looking to buy a diagramming application so I can design technical diagrams that will help me visualise the flow of programming projects. Ideally, I also want to use the same tool to create network diagrams and sketch out electronic circuit boards - both of which are further side projects that I am working behind the scenes during my spare time.
Nonetheless, I'll still be using the traditional pen and paper format. At least, I can rapidly edit material without further relying on my computer to do a task that I can quickly do offline. Meanwhile, I am eyeing Microsoft Visio, Lucidchart, Draw.io and Edraw Max as potential options.
~Richard