Skill progression pages need an output page, so I started a new layout and assigned it to my starter skills. I am not yet sure what all I want to show here, so I might keep it simple for the time being. I also want to only link to the skill page if there is a matching hit in the skill table.
Not having a coherent order to the skill list, I took another stab at getting sorting working on my JSON data. The Jekyll docs claim that I am able to reverse sort order in their sort method, but this did not seem to actually work. With a little searching, this was confirmed. I love the last comment on the thread:
“It’s always best to refer to the only source of truth - the source code”
– Jack L.
This is something that I’ll need to keep in mind. While other people’s code can sometimes be intimidating and I might not know what’s going on, taking the time to figure it out will reveal what is actually happening.
For fun, I wanted to try adding an image to a post. Immediately, the issue was that the image was closer to square than a nice hero-style horizontally dominant image. To address this, I felt a 2-column flexbox that collapses into a column on mobile might be nice, so I pulled up the trusty w3 docs for reference. I know that there is a whitespace gap under the first paragraph of text. Looking into things a little, it sounds like I could make a responsive float that would help wrap the text around but still collapse on mobile with media queries, but that’ll be something to try at a later date.
While looking into sorting the Skills table, my initial thought was to use the url query to grab sort parameters for column and direction and then use that to modify the table. I spent way too long fiddling with this, only to have the realization that Liquid isn’t going to rebuild the table onload…of course. Whoops! Fortunately, all was not lost - while I spent a good bit of time trying to pass parameters and track values, I was able to improve the search function! By adding a timeout of 0ms, pushing the query value to the search function now reliably fetches the results as expected.
Feeling a bit defeated from getting distracted all night instead of powering through my backlog as I had planned, I resolved to just sort by time with the most frequently logged skills at the top of the list. It looks like it should be fairly simple to make this table sortable by header
I wanted to have a few simple graphs and charts on here, and had bumped into Mermaid in the past few days. I took some time to try and implement it, but was ultimately concerned with how much lag time it introduced to display a fairly simple pie chart.
- Make a post with an image and responsive styling
- Figure out how to sort Skills alphabetically
Allow users to re-sort the Skills page with a url queryThis should be natively possible with JS/HTML
- Fix timing issue with Search page auto-search
Add a pie chart to stats for skills with Mermaid.Laggy, removing
- 6 hours and 55 minutes