On a nice sunday evening, hanging out with some friends and discussing about things to do the next day. After a few drinks, I decided to play around the FCC algorithm challenges; and then ‘Eureka!!!!’, why not play around the FrontEnd UIs rather than having console.log outputs. After, playing aroung the first few, I decided to play all the way up, versioning it and making it a full project. See the project here.
The Beginning
As a young adult that’s working and schooling, there is always the challenge of time allotment to encompass all that needs to be done every single day. This also implies that regardless of how busy one is, making time for essentialities is a priority. The FCC forum provides lots of motivations for individuals to keep keeping on, and for me, reading shared stories helped a lot. This project started after the completion of the first algorithm set of challenges. My schedules were pretty tight, and I didn’t want to just rush off into the next section in the curricula. So, while looking through each algorithms, and getting the outputs via the console.log method; questions on ‘what If’ and ‘how to’ started to pop in my mind. For example: ‘What if you need to show someone how this works?, How will I do it?
I decided to try out just with the string reversal algorithm, after doing a few test-runs, the outputs were really nice, and just like that, I decided to go all the way.
The Challenges
Writing programs for console outputs is different from doing same on a browser. The thing is there is lots of decision and thoughts on how to properly format outputs in the most efficient and user friendly way. This forms a core part of the UX/UI designers job; that is (thinking and building in terms of the user.)
In order to efficiently do this, there was the need to understand DOM manipulation with JS. That is, every HTML element, controlled and packaged in a way that gives the best UX. Understanding HTML and CSS is one part, but manipulating both of them with JS and jQuery is a crux of the frontend web developers job. The power of JS for DOM manipulation is awesome! and for 16 different algorithms, you can be sure that JS DOM manipulation is inevitable.
Another challenge was ‘UX logical design and presentation’. The first 5 set of algorithms was pretty smooth, but handling the 6th algorithm till the last one which deals with arrays was a task that requires more logic both in design and presentation. This is were the JSON.stringify and JSON.parse functions shines brightly.
The Lessons Learned
Of course, in completing this project, there is much learned. One of such is the power of JS as a highly functional and object oriented PL. The ease of creating functions and reusing them just anywhere in your code block is awesome!, added to that is its browser friendly nature. Chrome. Opera, Firefox, Edge, all come with debug tools which points you to the exact line of your JS code, that might be causing a problem. I do prefer using Chrome(but, you can use your own browser) because of its explanatory code highlights when there are errors both at the console interface and also the source interface.
Furthermore, sometimes DOM manipulation can be tricky and being able to logically organize every event or action was something learned during this project.
The Conclusion
This project has been versioned because there there still more algorithm projects to complete on the FCC platform and this project is the Version 1.0.0 of the complete set. I do hope to update this project soonest.
Finally, as a tip to new developers: No project is too small or beyond you. Pick a task and complete it. It’s in the completion that skills and knowledge is cemented. Don’t think its too late to start a project. the best time to plant an Iroko tree was 5 years ago, the next best time is NOW!
Thank you.
My gratitude goes to the Free code camp platform and to Traversy Media.
