My life is the great Canadian tragedy.
You see, in my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world haven’t had to start working on front end testing with Gatsby only to be told three days before a due date that we’re switching to Next.JS, thus pausing all progress made… GASPby!
For the last week I’ve been slowly but surely researching tech like React/Gatsby, Jest & Enzyme, and the React Testing Library in preparation to make my modest contribution of some front end tests for Seneca College’s Telescope project. Telescope is made by students from my OSD600 class, as lead by our benevolent dictator for life, the one and only Humph. This small contribution is part of my month long assignment (see: Hacktoberfest) to make four pull requests to any open source project. This was to be the third. And yet, it was not meant to be. At least for now.
I, however, did thoroughly enjoy the time I spent researching, talking, and joking around with Calvin, Josue, and my partner in crime with this act; Tony. But it did leave me in a bind. Enter, plan B.
About 8 or 9 days ago I noticed a post on reddit’s /r/firefox titled: A dictionary extension better than Google’s and on both Firefox and Chrome. I’m always down to try new toys so I looked into it. Turns out it’s open source, written in Coffeescript, a language I’ve been interested in for a few years now. Neat! Why would I not want to play around with it? What else am I going to do? Grow cumin? It’s actually pretty slick and well made, if anyone is looking for a good dictionary extension or has an interest in learning a new language I highly recommend it.
So naturally I thought to add a Klingon translation. Shut up, it’s not weird.
My first instinct was to search for a translator that supported Klingonese. There’s actually a few, but none that I found had an API I could exploit. Then I found the Klingon Pocket Dictionary which had an open URL query string, great! Their database is actually open too. I thought of scraping only the translations to add a small sqlite database with a couple of functions but felt that was a bit excessive for something as silly as this, maybe one day I’ll get around to it and build a small API around it for fun.
There’s actually people who speak Klingon too, and have varying opinions on translators, and even services to translate things for you. Isn’t that awesome? After all, why the hell not?
Anyway. Revir Yang, the project creator, has documentation on how to add dictionaries to his project. I forked it, cloned it, and researched how to properly run and build a node app, then realized his main page actually says how to at the bottom. I figured the process was different somehow because it was generating a browser extension, something of which I have no idea how it works. Turns out browser extensions are actually just made in HTML, CSS, and JavaScript. Neat eh? I had no idea, and it’s only natural too I suppose. Plus CoffeeScript actually compiles to JavaScript which is even cooler. I quickly added the translation website to the API and then I just had to point Firefox to the build directory… which it didn’t like for some reason, so off to Edge I went, which did like it. Go figure.
From there it was just a process of figuring out how to actually add the new dictionary to the now built extension, as just adding the API was not enough:
addExtraDict (
{
dictName: 'Klingon',
windowUrl: 'http://klingonska.org/dict/?q=<word>',
css: '#searchform,#top_nav {display: none;}'
}
)
Once that was done everything worked as expected. You click on a word and it’ll define and dictate the word in English by default, but if you right click “look up word in dictionaries” it’ll give you the full list of translators available which will bring up their respective site upon click.
Finally, my last task was to add custom CSS to run upon each successive translation sent to the Klingon pocket dictionary website. Personally, I’d rather have left this step out but all the other additional dictionaries added had it, and I felt like this already small PR just wasn’t enough by itself, so I decided to research how I could hide everything except the necessary details for the translation page. I searched around using Firefox’s dev tools to find the element (<section>) I just wanted and worked around it. This was by far the longest process in the PR and made me realize how little I actually remember from my intro to web development class, though it was enough to let me google my way to victory via stack overflow.
I saved a local copy of the translation page and played around with it in VSCodium and Live Server until I was happy with the results which you can see a before and after picture of below. Also, turns out the site’s HTML and CSS is obfuscated/minified so uh… thank Kahless for Prettier.
And that was about it. I submitted my PR and await his response. He seems like a cool guy, he’s from Wuhan, China actually. I’m sure he has some stories to tell. I’ve always wanted to go to China so maybe one day.
I know this PR was considerably smaller than my previous one, but I weirdly feel like I learned more from this meager PR than I did from the previous one. I learned a little about CoffeeScript, node, browser extensions- not to mention what I looked into before hand about the front end testing.
I guess the tl;dr is I made some new friends, got in some research, had a fun nerd moment, and feel overall excited about whatever is next. We’ll see.
In other news i also installed the GitHub CLI. It’s awesome, and I did everything around this PR with it and Git bash. Very cool. I’m also extremely excited to start working with next.js and to see my first conference in a few days. Although I may be big n00b and will likely have nothing of significance to contribute, I am nonetheless passionate and elated to move forward.
