Hacktoberfest 2019: Heating up!

(ICYMI: I've made my first-ever Hacktoberfest contribution!)_

Hacktoberfest 2019 is now well underway, and I am happy to report that I have made my second contribution to my new favorite open source community, Layer5 (on GitHub)!

Before I continue on, I want to extend a huge thank-you to Layer5's lead developer, Lee Calcote, as well as the Layer5 community managers for welcoming me into the Layer5 Slack channel, allowing me to introduce myself in their weekly community meeting, and even giving my blog an awesome shout out on Twitter!

This week, I helped resolve the very first issue that I outlined in my Planning for #Hacktoberfest 2019 post:

Issue layerio#65: enhancements for the Layer5 Landscape page

At the time I found this issue, the second requested enhancement (concerning table row coloration) was already handled by another contributor, leaving me with two tasks:

1. Implementing the specified sorting functionalities (for the three tables on the Landscape page)
2. Restyling the font color of site hyperlinks (an enhancement requested later on in the issue)

The strange case of Jekyll

Fortunately, thanks to my previous work with Layer5's website, I was already all set up with an offline development environment. However, going into my first task, I knew very little about Jekyll except how to install it.

Jekyll and Liquid... it's got to be like React or Angular, right? I mean, all I need to do is slap in sort and reverse filters and toggle them onclick, right...?

...Wait, what's a "static site generator"?

After discovering what Jekyll and Liquid actually were, I determined that I would have to resort to DOM manipulation to fully accomplish my first task. However, I did succeed in accomplishing the default sorting behaviour by enhancing the Liquid tags being used by several tables.

To do so, I followed coding style on the issue's previous contributor by encapsulating my work within a new JavaScript file in the project's assets folder: a simple bubble sort function.

I chose to implement the simplest of sorting algorithms in JavaScript (which I count as study for my Data Structures and Algorithms midterm):

Copy
1// Excerpted from https://github.com/layer5io/layer5/blob/master/assets/js/table-sort.js
2let bubbleSort = () => {
3  for (i = 0; i < rows.length-1; i++) {
4    for (j = 0; j < rows.length-i-1; j++) {
5      if (shouldSwap(text(j), text(j+1))) {
6        rows[j].parentNode.insertBefore(rows[j+1], rows[j]);
7        didSort = true;
8      }
9    }
10  }
11};

Painting over Pumpkin Bread

Encycolorpedia.com lists the hex color code #fdac40 as "Valspar Paint Pumpkin Bread". Although Layer5.io's then-difficult-to-read hyperlinks were colored #ffa_b_40, I'd still like to think that the second task of my second Hacktoberfest contribution was festively-themed!

In my last blog post, I mentioned that Materialize CSS was worth further research. Well, after some poking around, I discovered that all of Layer5.io's pumpkin-colored hyperlink styling (both deliberate, and incidental) originated from its materialize.css asset.

Although this asset has been frequently modified, I was still hesitant to globally alter the site's styling (in case a return to Pumpkin Bread was desired in the future), so I instead opted to add a new inline style tag to override a styling rule (on top of removing the 'orange-text' class from individual anchor elements).

All of the changes I've made can be viewed through my (merged) pull request:

Pull request layer5io#209: resolved the remainder of issue layerio#65

I am very fortunate to be so well-supported by the open source communities I have worked with so far, both on-campus and abroad. With their support behind me, I feel equipped to start learning what I need to know to resolve the next two more-difficult issues that lie ahead of me!