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.
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.
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!