One of the things that really helped me regain my motivation when I came back to web development was finally finishing the Wikipedia Viewer project for freeCodeCamp. It was a project that I really struggled with, so even if it had been removed from the curriculum [I know some projects are due to be removed] I would have wanted to complete it.

See my Wikipedia Viewer here

I completed this project in two parts: I wrote the bulk of the HTML and CSS before I took a break from web development, and the JavaScript [I used jQuery] when I came back to it. I tried to be a lot more logical about the way I worked on this project, and I think it paid off- it certainly made it a lot easier to pick the project back up.

I tried to keep both the style, and the code as clean as possible. Overall I’m pretty happy with how it looks, and the way that the page displays content. On finishing the project and comparing it with other freeCodeCamper’s Wikipedia Viewers, I think mine is not as colourful as a lot of them, and also doesn’t make use of the Wikipedia logo. I’m okay with that though. Seeing other people use the logo made me question if I should include it, but I tried to lean more towards a minimalist style, and I don’t think it really needs it.

The JavaScript was the part of this project where I really struggled. I found figuring out how to use the Wikipedia API difficult, and some of the parameters involved confusing. I think what happened here is that I wasn’t [and still not!] at the level required to really find the documentation helpful, so I ended up figuring most of it out by looking at blog posts and code that other people had written. Things like whether to use “action=query” or “action=opensearch” I ended up using opensearch for my viewer. I like the way it suggests different articles, and the reason it does that is essentially because opensearch treats the search terms entered as a prefix, and suggests pages based on that. So it’s like when you type something into Google, and it offers suggestions for all sorts of searches. Amusing, yes, but on reflecting more, I’m not totally happy with it, so I think I might make a Wikipedia Viewer 2.0 using “action=query” so that I can spend a bit more time with the API and understand it a bit better.

Breaking down my API request and what the different parts of the URL do:

• “en.wikipedia.org/w/api.php” Endpoint. This is the bit that always stays the same
• “action=opensearch” Lots of different actions available, “opensearch” searches for title matches with your search string as a prefix
• “limit=5” I chose to limit the results of articles displayed just to make the page a little more readable- I think the default limit is about 200!
• “prop=extracts” the information I want from the page, in this case just a few sentences so you have an idea of what the article is about
• “redirects=resolve” this handles redirects automatically- without it the extract from pages with a plural title all look a whole lot like “the plural of ‘x’” which, while relevant, isn’t very informative!
• “search=encodeURIComponent(searchTarget)” this is the search term that the user entered, with spaces and other characters turned into the correct format for a URL
• “callback=?” I’m not totally sure about this part. The documentation had this to say: “If specified, wraps the output into a given function call. For safety, all user-specific data will be restricted” Every post and example I looked at had this, and without it my request failed, so I understand that it’s required in my case, but not why… This is defo one of the things I’d like to understand better!

Working with API’s is still a bit daunting for me, so I’m definitely looking forward to getting a bit more comfortable with the Wikipedia one, and hopefully find a lot of great blog posts, videos, and other resources that’ll help break it down for me. Wish me luck!