A Comedy of Errors

Act I

Optimism in the time of the 25th

It might have been raining — Of that I’m almost sure.

The good days of fall were gone and their void was filled by less than desirable weather. There were 7 days left of Hacktoberfest and I had most certainly ran out of ideas.

React-Native had been a great leap forward — as well as a git commit version nightmare — but it was not the sort of project I wanted to continue working on. While great for a resume, the project is too big and complex for someone at my level to work on for the rest of the semester. It is one thing to step out of your comfort zone, it is another to go to the middle of the ocean to learn how to swim.

My problem now rested in finding an agreeable swimming pool.

This late into the month, you would think I’d go with anything…just do whatever. But, truly, my heart was set on working on software I like to use. I didn’t like React. I used it because a class called for it. Memories of having learnt it are a blur and I am not sure I can tell you anything beyond how to start a project.

But 7 days were left, and I had resorted to google “neopets github”.

Desperation and disappointment were more than a familiar feeling at this point.

Act II

The tragedy of the ‘Almost’

Links: Repository | Issue

When I worked on TinyNote, I found that it is easy for dark mode to have conflicts if you are not designing every part of the interface yourself. Currently, TinyNote uses a rich text editor from QuillJs and that causes a visibility error in dark mode. The colour for the text area and the colour for the rich text editor are the same or nearly the same. In light mode, it’s no issue, however, in dark mode, it means an user can only see the options by hovering over them. At least three of my classmates have tried to fix the issue by changing the colour of the rich text editor to no avail. If I remember correctly, it is because of bootstraps, they cannot find the property that holds the colour.

I bring up TinyNote, not only because the issue is similar to the one I found. But because in the post I made about it, I brought up a wild goose chase my procrastination created for me. When I was writing the post, I had in mind bibisco, as it was the only software I downloaded during the time of the time-wasting quest. It is a text-editor meant for novel writing that allows you to organize and keep track of different facets of your novel; information such as the characters, the narrative threads, and settings.

So when I searched for bibisco and found it was open source, finding that it had an issue in dark mode…felt oddly fitting. I took a look at the project and felt that I had found the one. Bibisco was software I liked to use. It was software I wanted to improve. It had a lot of files but navigating through them felt more familiar that looking at the many files that React had.

So I got to work.

It took several days to find a decent fix. My first approach was changing the colour of the highlight. However, the shade of grey used for text would not work with any colour that would also work in light mode. Because I also had to keep that in mind. The highlight function changed the background colour to yellow, regardless of mode.

I tried my best using colour theory and this contrast website I found here, but no colour would work. I thought about making the highlight colour depend on the mode, but there is no more iconic colour for highlights than yellow. The thought of using a different colour didn’t feel right.

So my next approach was to change the way the highlight function worked. I would keep yellow as the highlight but then changed the text colour to black. No other combination could beat that!

I soon realized that could not work. I could not find where the text color property was stored. I had checked the css files. It was not there. I checked the rich text editor files. It wasn’t there. So that left one place. The bootsraps…

Like I said, the issue felt oddly fitting.

It took a lot of trial and error. But eventually I found where the color was stored. I did it by color-picking the text and finding the hex value and then searching in VSCode. There were about 30 instances of that colour, so I decided the least intrusive way to fix the highlight issue – rather than create a function that changes the colour of several properties in the bootstraps, it would be better to change the colour of the text in dark mode so that it created better contrast with the highlight.

It was not a drastic change, the text went from #888888 to #707070, however, it was enough to create better contrast.

#888888
#707070

And here is when I realized my tragic mistake. When I looked through the repository looking how to make my pull request, I found that the owner was currently not accepting any code contribution as they were in the process of switching to electron and did not want any conflicts while transferring. Not only that, but the files I had worked on were not part of the public repo, so I realized I could not really work on this for the time being.

Lessons were learned.

And did it feel great to learn them on Halloween!

Act III

Hell is other issues

I was burnt out and the clock was ticking.

I tried looking at big projects, but I soon realized I did not have the time for them. My experience with React taught me that even if you only need to add a comment in one file, it could very well take anywhere from hours to several days to fix.

I only had hours, and the issues looked more complex than simply adding a comment.

I attempted the “good first issue” tag, but like much of Hacktoberfest, the tag was filled with exercises and website#6. If React had been an ocean, the issues here were puddles.

It was true I had limited time, but it was still time I wanted to use to grow as a programmer.

In the end, I decided to look for something I could translate into English. Depending on what I found, I could get a pull request done in the time I needed, and then continue with more later on.

It was somewhat challenging looking for repos that wanted a translation. Mostly because the term could be related to programming or because the issue was related to translation in the program itself. I also found that by using “translation” I got a lot of documentation needing to be translated from English into another language. While I was fine translating into English, I didn’t feel confident in my language skills to translate from English into something else. Not to mention, I do not know anything about Czech, and that seemed to pop up a lot.

I don’t think one can learn Czech in 5 hours.

Act IV

Comedy:(Noun, countable, Medieval Europe) A narrative with an agreeable ending

Links: Repository | Issue |Pull Request

`csvsc` is a library for building csv file processors.

That was the first line I translated for this project.

The project is pretty cool. It is written in Rust, something I’ve never used before, and it is meant to facilitate modifying the information in several cvs files. This was different from my first time translating since I translated all the documentation, not just a ReadME file, and this time I was actually able to write in the language I was translating from.

This time was also different because the owner of the project actually read my blog. That was not something I had expected to encounter; I knew some of my other classmates had had other people read their blogs, but I don’t think it had been people in the project they were working on. It was an interesting experience.

He was interested in my experience with open source and wanted to talk about it. He also brought to my attention that python Spanish documentation needed some work.

In the end, I didn’t really find a long term project to work on. I admit, I was disappointed that I managed to translate most of CSVSC in a couple of hours. But the experience did help me realize that translating documentation was not simply a quick issue I can work on when I’m short on time. Because the nature of documentation, by translating a project, I am learning a lot about it — at some level, I need to understand what is going on. I am also forced to explore to various parts of the project, I have to look through different files and folders, and double check to make sure I got everything.

So maybe that is my swimming pool, working on translating a bigger project. Even though the code is beyond my skill level, translation would bring me closer to understanding and getting comfortable with what goes on. It would also do wonders on my Spanish, as it is, I have a hard time talking about coding in Spanish. It is technical language I never learned, but I could use this as an opportunity to improve my communication and be able reach a bigger audience.

English might be popular when it comes to open source and programming as a whole, but its far from being the only language.

Contributing to React Native

On my previous blog post, I expressed some disappointment at the trajectory my Hacktoberfest journey had taken. Even though I enjoyed contributing to the open source community, I wasn’t really meeting the goals I had set out for myself. I had found myself looking through hundreds of repos, looking for something – anything – I felt capable of doing, instead of working towards improving myself.

That had meant, that up to this point, I had neither worked on anything related to Python nor on software I use. While I was willing to excuse not working on python projects — with every compiler, environment, dependencies, and who knows what else I need to download to be able to code, I can feel my cheap laptop struggle more and more with each task — I could not do the same with my second goal.

Reddit, YouTube, Atom, Notepad++, Discord, VSCode, Whatsapp….there is no shortage of apps and software that I use on a daily basis that have open issues ready to be fixed. The net gets bigger if I changed it to weekly, or monthly — WordPress, GitHub, OBS; I could even focus on apps I no longer use, but I spent a significant amount of time in the past, like Tumblr and Archive of Our Own.

You would think that with so many options and possible issues to work on, I would be able to find something.

Despite wanting to be a part of a project I use, I had become very intimidated by the prospect. I kept making excuses about why I couldn’t work on any of the repos I wanted to be a part of — It was too easy, there was too much documentation, my computer couldn’t handle everything I needed to download, it was too difficult, it required too much time..

It wasn’t until a friend of mine asked if he could choose an issue for me that I finally started working.

react-native-windows

Links: Repository | Issue | Pull-Request

A picture of the issue

My journey here was less about working on difficult code, but rather to gain experience working on big projects. I had assumed that working on the pull request would be the same as my previous two, I was wrong.

When I worked on whatismyviewport, when something failed, I knew it had something to do with my code. Maybe I was missing an s, or my logic was flawed, whatever it was, it was introduced by me. This time one the other hand….

my total contribution to React Native

I added a comment and the first couple of times I ran my code, there were compiler errors. All of them had nothing to do with my comment, and everything to do with my environment. Despite reading the system requirements, I had missed that my WindowsSDK needed to be updated. After downloading the wrong version and then the right version, my code passed the tests in Visual Studio.

It was then time to create my pull request — I triple checked if there was a template or guide that I needed to follow, and then submitted my request.

In order for the request to be valid, it needs to pass 24 checks. What do the checks do? They make sure the code is up to standard, however I can’t tell you more than that. Immediately, after submitting, the test started. And half an hour later, one failed.

I took a look at the error….and I could only say “huhh??”

…didn’t I fix that already?

Unsure about what to do, I checked the help link but nothing was clarified for me. I didn’t feel like I should be touching any of the code there…So I checked the properties in the project and changed the min windows target platform to 10.0.1836.0.

I committed, and after 20 minutes, a different test failed. Great. I undid my change, and submitted again hoping to understand what was wrong. Confusingly, most of the test passed….until an hour later one was stopped for taking too long.

It took me two seconds to change the code. I touched one line of one file . It has now been two days since I started and I don’t know how much longer I will need to get my code to pass the tests

So this is where I am. Confused, lost, downloading VS2019 hoping my environment just needs updating…

To be continued.

Colocando Meu Espanhol à Prova: Translating Documentation

We’re halfway through the month and I feel this month-long challenge is getting to me – I have realized I need to change up my strategy if I want to work on more challenging and personally fulfilling projects. While I have enjoyed working on whatsmyviewport and live-stream-tools, they were not the sort of projects I originally had in mind when I planned my Hacktoberfest.

I have a terrible habit of working non-stop on a project until it is done, I do it in art, I do it in coding. However, when you have to do work for 6 courses, that mindset means I am always doing work last minute for something. Putting 12 straight hours into one area means I am not putting any work in another.

I need to change how I plan my time so I can give myself time to figure out more complex problems.

But enough about my lack of time management skills, lets discuss this week’s pull request.

live-stream-tools

Links: Repository | Issue | Pull-Request

This week’s issue allowed me to mix my love of natural languages with my love of contributing in open source projects.

“Like you all know, Twitch doesn’t just have Brazilians, we need to transform our main documentation to English and the branches into the desired languages, this will increase the visibility in our project
It would be something like this:
README.md = in English
README-pt-br.md = in Portuguese”

Live-stream-tools is a Brazilian repo geared towards live-stream tools for Twitch. Currently, they want to translate their documents to increase the visibility of their project to a more international audience.

When I was looking for issues, this one caught my eye. While I don’t speak Portuguese, I am fluent in Spanish; these languages have a high mutual intelligibility in their written form, so when I saw it, I knew exactly what they wanted. I took a look at the documentation they had, and I realized it was doable for me to translate the file, there wasn’t much highly specialized language nor false friends that would prevent me from doing a good job.

This is not the first time I have tried to work on a Portuguese repo, during my previous attempt I was afraid of how to approach the task. Should I use google translate to communicate? Even though I can read Portuguese, I cannot write it. Should I write in Spanish? It could be easier for the owner if they didn’t know English. I tried googling if there was an etiquette rule for it, but I found nothing. Eventually, I decided English was probably my best bet.

Turns out I shouldn’t have stressed too much about it, everything turned out ok (kind of. After the issue was assigned to me, someone managed to fix the issue before I got the chance to work on it).

Moral of the story: It doesn’t hurt to try.

I admit, when I first learned that I could use my bilingualism to contribute to open source, I was excited. But it wasn’t until this issue that I was able to do it. Most of the large projects I am interested in are already translated into Spanish, and the small ones looking for translation also are.

Time to hit Duolingo again, I guess.

27 Days Left: 1 Issue Down

First week of October is almost over, and did it fly by fast.

Looking for an issue for HacktoberFEST was rougher than expected, while I appreciate the many repositories geared towards getting people to join, they were not the sort of repositories I was interested in.

And don’t get me started on the emoji ones…

Whatismyviewport

Links: Repository | Issue | Pull-Request

In the end, I was able to find an issue that I was both interested in working on AND was capable of fixing. This issue was brought to my attention to by a friend of mine.

The Issue:

The issue did not require a lot of code, most of it was css, and I probably spent most of my time trying to figure out what the difference between viewport and resolution was than actually coding.

<button onclick="explanation()" id="Toggle-Explanation">Is this my screen resolution?</button>
<div id="Explanation"></div>

That was the total amount in the main file, while the function code was not any more complex.

function explanation() {
  var x = document.getElementById("Explination");
  if (x.innerHTML == "") {
    x.innerHTML = "Screen resolution is not the same as viewport size. Viewport refers to the visible area of a webpage on a device, while Screen resolution is the amount of pixels a device has";
  } else {
    x.innerHTML = "";
  }
} 

Basically, if the div is empty, innerHTML will add the explanation when the button is pressed. Once it’s pressed again, it will clear it.

Hacktoberfest This Way Comes!

HacktoberFEST comes about in October and it calls for anyone to get involved in the open source community. In order to participate, you must register anytime between October 1st and the 31st – and if you want to be one of the 50,000 that receives a free t-shirt, you have to make four pull requests.

Sound pretty simple, right?

I’ll be using the event as an opportunity to grow as a developer and continue to involve myself in the open source community. While, I do think trying to contribute to projects outside of my classmates’ is a little intimidating, getting a free t-shirt is a great motivator – I recently culled my collection so I’m in need of some more event specific shirts.

My Goals

Just searching good first issue, I find a good 20k projects

While I could holistically make my way around GitHub trying to look for issues to fix, I think having a more organized approach would be beneficial to my development as a developer.

I have two main goals in mind when I’m trying to find for something to fix:

1- Learn Python

Python is a language I constantly hear about. I even had some friends outside of my program ask me if I knew it so I could help them with their homework. I’ve looked at it, but I can’t say I know anything significant about it. Two days ago I learned that Python used ‘and’ instead of ‘&&’, just to give you an idea of how out of the loop I am when it comes to this language.

So I think learning Python during this month would be a fun side project to have.

2 – Collaborate in Software I Use

It’s probably my ego, but I just think this would be cool. The idea of helping out in a project that I use regularly is pretty fascinating. Not only that, but I think its a good way to not get overwhelmed by the thousands of projects on GitHub. Finding something familiar would be a good idea.

The issues

Here are some issues that I am interested in working on.

  1. Powershell command line parameters contrast is too lowIssue | Repository :
    This feels like a good issue to start with, as it is a design issue, but it also an issue that revolves around something I use – VSCode
  2. Search Bookmarks- Issue | Repository:
    The idea of creating an interface to create and delete something does not seem outside of my scope. I think it is something I would be able to do, even if it is in python.
  3. Replace node’s query-string with URLSearchParams Issue | Repository:
    I feel this is an issue I can do, but mostly the thought of working on something related to Tumblr (an app that I wasted hours upon hours on while i was a teenager) is pretty interesting to me.