FCC Speedrun: Wikipedia Viewer
I’ve finished my Wikipedia Viewer App, and it took me exactly 5 days from when I started to when I decided it was “ready” to be put into a Medium article. This project finally felt like a true Speedrun project since I pushed myself to build it rather quickly and actually understood most of what I was doing (though like always, I still had to cozy up real close with Stack Overflow for 5 days). While this whole process (speedrun) was intended to force me to build all of these projects in a short period of time, I found myself getting way too caught up in the details and aesthetics which for me isn’t too bad of a thing since I’ve learned a lot along the way. I have decided however, that when I do finish all of the front-end projects I will go back and re-do all of them Speedrun style and focus on building them properly and quickly rather than investing too much time and effort into the styling. I also want to host them on surge.sh since I have no familiarity with it, and I think it will be a good opportunity to expose myself to another front-end development publishing platform. By putting this is writing now, on a public front, I’m going to hold myself accountable. But enough about me, onto what you’re actually here to read….
Project 3: Wikipedia Viewer
The fourth front-end project on my Speedrun is to create an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/
Requirements:
- User can search Wikipedia entries in a search box and see the resulting Wikipedia entries
- User can click a button to see a random Wikipedia entry
This project put me in a great position to improve my JavaScript and jQuery skills. I think I wrote my code a bit more efficiently than my previous projects and am learning more about optimizing efficiency. Like always, my app passed the HTML and CSS validators just fine, but after putting it through Google’s PageSpeed Insights, it got an 89/100 on desktop and a 71/100 on mobile. I don’t know if that’s good or bad, but I’m quite happy with it.
Like all my previous projects, I began with the simple HTML skeleton and used colored borders to help me visualize where I needed everything to go. After I got the basic content in, I started my JavaScript but knew I wanted to make it more efficient that my last projects, so instead of nesting multiple functions and loops within each other, I instead created separate functions and each would call another function in order to get the desired action. This was something I implemented in a previous python project I made and I found it not only to be more efficient, but also more useful when making changes.
I also wanted to find out if my JS code is actually working the correct way it should, so I basically lived in my browser console, constantly testing things out. One of my for loops for some reason was running over and over again, and I was literally about to throw my laptop out the window because I couldn’t figure it out. Eventually though, I did, and that made me realize I should take more advantage of the #help-with-code chingu channel I’m part of. I also finally downloaded Node.js and was testing my page through the http-server option. Since I’m still learning a lot, I had no idea how JavaScript testing should work; I basically just changed my code until it gave me my desired output. I did some research and found some things about Mocha and Jasmine and plan to look more into those for future projects.
Diving into JS, I wanted to make a function that takes the user input and stores the wikipedia data into an array. This past was easy, but I also wanted the user to have the option of either submitting their input with a button or by simply pressing “enter”. To do this, I had to create a function for pressing the “enter” key and have that call the function that stores the input when the submit button is pressed. Sounds simple, but this actually took me a while to properly code. In addition to the submit button, I wanted to have a refresh button that allowed the user to reset their search entirely. This was even more of a challenge because I had jQuery animations and appended divs based on the input, which forced me to re-order my functions so that the reset would implement properly with my code.
After all my debugging I managed to get everything working the way I wanted (or so I thought) until I put my code up on codepen.io. For some odd reason, it works fine when viewing on a desktop, but on mobile, the animations aren’t working properly. Not sure why to be honest, so if any of you know, please spare me the agony of wonder. On github pages the app worked perfectly fine though, so my assumption is that codepen.io has some feature that I’m missing which is causing the issue.
Things I learned along the way:
- Using encodeURI to translate the input from the user into proper code for the URL to work
- Testing code using http-server through Node.js
- Media queries to make code optimal for responsive web design across all devices
- Using event.which == 13 to represent the “enter” key being pressed
- Reseting animations through jQuery (as well as clearing all global variables)
At the end of it all, I had a blast coding this project! Despite spending a good chunk of my time just debugging, I’m learning to love the process and the “aha” moments when I finally get my code to work. The reward is extremely satisfying and I’m excited to move forward onto the next project.
