How I made this Gist Finder and what I learned doing it
For the past few months I’ve been writing about my coding projects as a way to blend my old love (writing) with my new one (programming) and show off some of my skills.
In the past I’ve written about recreating a pixel-perfect and fully functional copy of a web page template and a wild (subjective, of course) internet adventure with a Single Page Application. This time I wanted to tell you about this Gist Finder that I made using the GitHub API. Here we go!
The aim is to build an application that can search through public gists by username and returns the first 10 gists for the user. For each gist, the user can see a snippet of the full gist and has the option to see the full gist, which takes them to a new page. On this page, they’ll be able to read the full gist and navigate back to the search results as well as the previous and next gists.
The HTML on this is fairly simple because I create elements on the spot and then loop through them with JS to create the same elements with different information every time.
I used Sass and BEM for this project, getting a hang for both of them more and more. For the styles, I again grabbed a pre-made color palette and font combinations, opting to continue a trend of more muted design choices while trying to incorporate pops of color here and there. Notice that even though the style is simple, it’s responsive.
This is where more of the magic comes in. This project was challenging mostly because of the order of the logic. I’m often encouraged to practice algorithms and these kinds of projects re-affirm why algorithms are important!
This project uses two instances of fetch and the second depends on the first. This means that there’s variables passing between functions to make everything work and that I practiced closures A LOT to make sure not to mix them up. Let’s take a look at x’s journey through my code:
The first fetch grabs the user’s gist info and returns a JSON that gets passed into getBlurbInfo. This function then calls a second fetch that grabs the details of each gist. I did this because I need all the info before I start to print it or else I run into a race condition where my browser won’t have the information in time to do it’s thang. This second fetch is where x starts to travel.
I’m just trying to get some high-level info on the page but x needs to start moving now for the forward and backward functions once the gist is in complete view. X then goes through my printInfo function, untouched, to openModule where x becomes my counter variable that lets the browser keep track of what gist is current, previous and next. Afterwards, getting the entries to carousel is like making a photo gallery! I find it’s best to use a ternary operator to keep track of previous and next.
The other neat things about this application is that I used ESdoc to comment my code. It’s been a nice mix to be learning difficult techniques and then to be able to pick something up quickly that still improves my code.
Another project down and more skills picked up! As always, I look forward to feedback and I appreciate any ideas on how to improve. Thanks for reading :)