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!

Here’s the live version and here’s the repo

A gif of the application in use

The Project

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

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.

Of special note that I added a favicon to the app this time. This is a very quick step that you can take to add a bit of sophistication to your applications.

The CSS

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.

If you’re also just getting the hang of design, I highly recommend this Medium article by Erik D. Kennedy. It’s helped me get my bearings a lot!

The JS

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:

Giphy of Gretchen Weiners (Mean Girls) saying “that is so fetch”

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.

A screenshot of lines 36–51 showing getBlurbInfo

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.

A screenshot of lines 115–120 showing how I use ternary operators to keep the carousel from breaking

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.

Conclusion

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 :)

Giphy of Snow White blowing a kiss and waving goodbye