A Diatribe on How Hard Coding is

This week was tough.

Still in the process of moving, unpacking, commuting to my work 1.5 hours away while in the midst of a transfer (which will immediately alleviate the bulk of my time management issues), and all the other little wonders that come with moving like realizing you own no dish towels after washing half of your entire cookware.

But really, enough whinging, let's talk about code.

This week I was meant to find an issue on GitHub for the first week of Hacktoberfest. I actually found one fairly quickly, in a smaller project, that pointed out exactly the line of code that needs changing. I'm no expert in React in the first place and had little to no knowledge of Docusaurus but that's what classes are all about! Plus, isn't software development simply the process of reading documents and retrofitting its information into your app? I'm pretty sure it is. I think.

So I've been working on this issue for about a day, learning what ins and outs I needed to know. I read up on Docusaurus, I read up on the IdealImage plugin and got to work implementing it. However, there was one small issue: the thing didn't work. There were a couple of reasons why it didn't work, the first I ran into was syntax. The damn line of code can't really be changed without removing some of the original author's code (mainly useBaseUrl).

import React from 'react';
import styles from "../_styles.module.css";
import useBaseUrl from "@docusaurus/useBaseUrl"; 

function Card(props){
    return(
        <div className={styles.card}>
            <div className="card shadow--tl">
            <div className="card__image">
                <img
                height="300px"
                src={useBaseUrl(`img/${props.charName}.webp`)}
                alt={props.charName}
                />
            </div>
            <div className="card__body">
                <h3>{props.name}</h3>
                <small>{props.status}</small>
            </div>
            </div>
        </div>
    )
}

export default Card;

If you pair

useBaseUrl(<image link>)

with the IdealImage syntax for referencing images, the whole thing breaks! So we gotta get rid of that.

The second big problem I ran into, and you can see it on the issue page, is that the new .png images are missing an attribute "height" (and probably other attributes) that the Docusaurus IdealImage class needs in order to actually generate the "ideal image" for the situation (which is what this class is supposed to do). I'll quote myself explaining this in the issue:

However, again I had a "TypeError: Cannot read property 'height' of undefined' when trying to compile. I'm presuming now that this is due to how Docusaurus's "Image" class interacts with React's "IdealImage" class but I'm not sure at this moment what the solution is.

At the end of the day, I had worked on this for a while, looking up similar issues (no avail) and trying common-sense fixes (nothing coming of it). Unfortunately, I have a class that needs attending to. I can't work on an issue forever and doom myself to an infinite spiral of no work getting done. So I gave up. For now.

For Now

So what, then? Well, I suppose the next best thing is a simple issue. An issue any Javascript project could have and many do. A .editorconfig issue. I admit this particular strategy is not fruitful. The issue has no replies, the pull request none as well. All in all, and given that other pull requests in the same project have been ignored for 12 or so days, it seems that perhaps the request won't be merged. It's unfortunate, but I want to conquer the previously discussed issue and I want to have the leeway to work on that issue and also have deliverables in for my class. So I'll drop a pull request and get back to working on the one that stumped me.

I'll update this blog with any insights and comments from the repository owner and how I dealt with them in the future.