Release 0.4 - Docker and The Search for An Issue

Progress So Far (Nov 28)

Telescope - I have 2 issues I am currently working on.
External PR - Still looking for an issue, but I have a potential one lined up.

Release 0.3 - Pull Request is still open, working on getting it closed.

Telescope

Getting Telescope Set Up

Until I discovered Windows Subsystem for Linux, I used a virtual machine for web development. I hated it. I hate virtual machines, at least my virtual machine. I have an excellent gaming PC at home that is one of the fastest I have ever used, for coding or otherwise. And instead of using it, I have to use a stupid slow virtual machine. WSL was amazing. I got the combined speed of my PC and the accessibility of linux commands and libraries. That is until telescope. 

Telescope requires docker, which cannot be run in WSL or on my Windows 10 Home Edition. It must be run in Ubuntu proper, MacOS, or Windows Professional. So I had to break out my stupid dumb annoying virtual machine and figure out installation. 

I was able to get the front end part running on my PC, as well as all the tests, so I am currently looking for more front-end related issues to work on. I am also working on a documentation fix and I have asked to look into a simple file name change as well. Of course, every reference to those files must also be changed, and tested.

External PR

Potential PR (if I get a response)

My potential external PR is to make the Get Involved page on the openclimatefix website. It involves possibly working with the Github API, page creation and routing in Gatsby. This seems like it would be a good PR, the only issue is that I am unsure of the activity of the project. I really like working on openclimatefix, because it's mission is something I agree with and the Github community has been very helpful to me. What started out as an emergency pull request at the end of Release 0.2 has become a project I genuinely care about. But if I hear nothing back from them I have to find something else.

Release 0.3

I have contacted Flo, the main contributor I have interacted with on the repository, to see if my solution can be merged. If not, I will work until it is. It seems like Flo is a bit distracted, and not really working on the website, so for now I will just have to wait for a response. 

Release 0.4 - More Github, More Problems

And so it continues....

After the spectacular disaster that was Release 0.3, I have returned this week for my fourth and final release. At this point, I am happy with everything I have done so far in this course, and these last few weeks will test everything I have learned so far. To start, I am going to go over some updates from last week's posts, and explain my plans for Release 0.4.

Release 0.3 Updates

I received some change requests from Flo as follows:

• Make different grid sizes for different screen sizes
• Try to use tailwind classes to attempt this
• Change some syntax and naming
• Adjust font size and justification

The conversation is listed here. So I successfully made these changes to the code aside from using tailwind. I couldn't get tailwind to work with the .module.css file type, as tailwind works better with regular css. I used some of the syntax to adjust font size and justification, but I couldn't the other way. I ended up using the @media method to detect screen size and adjust the grid to the required size. Some of the changes made also help with a compression issue, where some images were being squeezed to fit in the grid at certain screen sizes.

@media method

300px is for phone screens, 768px is for tablets, 992px is for smaller computer screens, and 1200px is for larger screens. Each of these has a different number of columns to fit the screen. 

Telescope - Release 0.4

I have picked an issue to work on for Release 0.4, to continue my work from 0.3 on documentation. My plan is to work on this issue to start, and then continue to monitor and update documentation as the Release continues. Part of my problem is that I have no way as far as I know to install docker in my current environment. I use WSL (Windows Subsystem for Linux), which cannot use docker, and I need Windows Professional to use docker desktop. I am stuck working on documentation and organization until I can get docker up and running. I am going to continue researching ways to get docker going over the weekend.

External PR - Release 0.4

I really enjoyed working on open climate fix this week, it made last week's madness feel a lot more legitimate. In terms of an external PR for Release 0.4, I really want to work on a page for a website. I would love to continue working on open climate fix, however there doesn't seem to be an escalated issue on that site at the moment, except for a contributing page which I am unsure of the complexity of. I am currently searching for an issue similar to what I have worked on these past 3 months. My criteria for a new issue are the following:

• UI related (components, new pages, new features)
• In an environment I am somewhat familiar with (Gatsby, React, Angular, Javascript, etc)
• An escalation from my previous issue (a gatsby component with simple file reading)

Some issues that I have found that somewhat satisfy my criteria:

• https://github.com/hochschule-darmstadt/openartbrowser/issues/69
• https://github.com/leapfrogtechnology/sports/issues/54

I am going to continue looking over the weekend.

Release 0.3 - Third time's the charm?

OpenClimateFix - A New Issue

Here we are again. I have bounced from issue to issue, hitting roadblocks as I go. I know that the issue I have picked here is not as complex as tania-core, but I believe it is a little more complex than WritingSwarm and is in a system I am familiar with. I am devoting all of my available time to completing this issue, and I intend to have a pull request up by tomorrow night. In order to do that, I will have to work hard in order to get this done, and I am committed to doing that.

The Issue

The issue I have chosen is to create a contributors showcase component, for a new Get Involved page on the openclimatefix website. I have worked on openclimatefix before, as my last pull request for Release 0.2. In order to populate the contributors showcase, I must read a json file containing each contributor and display their name, profile url and github avatar.

Setting up the Environment

I already had the environment set up as I have worked on this project before. It uses yarn to install dependencies, Gatsby as a framework for development, and a host of dependencies to run tests and ensure consistent formatting. I updated my fork of the repo and created a new branch to work in. 

In terms of research, although I have used Gatsby before, I have never created a new component. I had to figure out the conventions used in the openclimatefix site and copy those conventions. I also had to figure out how to read a static json file in Gatsby. Turns out you need an extra plugin, called gatsby-transformer-json in order to read in json files using graphql. graphql comes with Gatsby and is used to manage static and dynamic data in a website. I also had to learn what a StaticQuery is in Gatsby, in order to display the results of the graphql query. 

The Solution and Pull Request

The Component Code

Component Display Code

This function returns the Contributors header with each contributor displayed below it. The StaticQuery has 2 properties; query and render. query uses graphql to query the json file named contributors.json and get the contributors attribute's contents, in order to create a javascript object containing each contributor's name, profile (url), and avatar (image url). The render property will run a function to render the data generated using the function getContributors().

getContributors()

getContributors() receives the object generated by the graphql query

getContributors() receives the data from the json file and for each contributor makes a <div> element to contain the contributors profile image, and their name, which is also a link to their profile. In order for the render to work, a key must be chosen, so I used the name property for this key. For each contributor in the contributors array, a div with their information will be appended to the cont array, and return to the component code. This will populate that code with each grid item, ready to be displayed.

CSS

Basic CSS to set up the grid

Css works a little differently in Gatsby than it does in regular HTML5 development. It is called like an object, with each class represented and called to as an attribute of that object. Whenever you see "styles.something" in the className properties above, they link to a class in the CSS document.

Final Result

Interactions with Flo (FWirtz)

Flo is the maintainer of the repository, and is very helpful and communicative. She and I have not talked much during this process, but she did assign me to the issue. We have talked before on my previous 2 issues in openclimatefix,  and I expect to hear from her about this pull request, although I don't think she has reviewed it yet.

Release 0.3 - Overall Experience

I felt very rushed in this release. We only had 2 weeks really, considering Release 0.2 was due Oct. 31st and I needed to work on it until then. I had other commitments, and as hectic as October was, November has been worse so far. There are only about 4 weeks left in the semester, and in that time I have to complete Release 0.4. Although Release 0.3 was difficult for me, and I'm not sure how well it went, I know that I'm much wiser and more aware of my abilities. For one thing, I am going to avoid databases for Release 0.3. Secondly, I am going to find a good issue early on, and get started on it right away. 

Release 0.3 - Failure, Again...

The old song and dance...

So we've come to another deadline, and again I am running late. I had an issue to work on, with tania-core and it's SQL to CSV conversion. Turns out this was a much larger undertaking than I expected. I might still work on it for Release 0.4, but I'm unsure if I have the knowledge in SQL and Vue to even attempt tania-box. I worked on it this weekend but with little success, and with time running out and pressures from other courses, I had to find another issue quick. To my surprise, I rediscovered an issue I had commented on but had never been assigned to and jumped on it. I am working on WritingSwarm now, which has already been an interesting project and has opened my mind to a completely different world.

WritingSwarm and the Issue

WritingSwarm is a Dapp for writing short stories collaboratively using the Etheresphere Swarm backend. Sounds complicated, and it is, but first what is a Dapp. A Dapp is a distributed app, meaning that it is run on a distributed system. A distributed system is a a network of computers that pass information between them to achieve a common goal. Swarm is a peer-to-peer distributed storage platform and content distribution service. WritingSwarm uses swarm to develop and share short stories. 

The issue involves adding an auto-save feature to the WritingSwarm site, which is built in Angular. I have used Angular before but never Swarm, so it has been an interesting experience to say the least. Basically, the site already has a save feature, but the user is required to press a save button in order to save their work. My task is to add a toggle switch that toggles between "ON" and "OFF" states for the WritingSwarm environment, and in order to do that I need to use Angular Material, which I have not used before.

The Environment

The hardest part of this issue is getting Swarm up and running, because connecting to it is not simple. In order to develop this project, I have to set up a Swarm node, learn Angular Material, and adapt the existing code to provide the auto-save feature. 

In order to get swarm, I had to use go, which I was fortunate enough to have installed when I was trying to get tania-core up and running. I also had to get geth, which stands for go-ethereum, the official go implementation of Ethereum. Ethereum is basically an open source platform for Dapps. So in order to run WritingSwarm, I had to get an account in Ethereum for go, and download swarm to set up my node. Once I logged in, my node was set up and I was able to serve WritingSwarm on my localhost.

So it started running, however when I try to add a file, I keep getting an error message. I sent a message to Kortatu, the owner of the repository and I am waiting to hear back.

UPDATE: Nov 14

I have not heard back from Kortatu, and the more I hear about Swarm the more I dislike using it. I don't really trust it, and was only using it because I was running out of time. Well now I'm stuck and out of time, so my only option is to find something else. It is very late and I don't expect to do well on this, but I need something to hand in on Friday. I have found a new issue on an old project and will be detailing it in another blog post. I hope to have something working by Friday, and for Release 0.4 I will be more proactive on my external pull request, like I was on my internal one.

Release 0.3 - A new experience altogether

Release 0.3 - Telescope and Tania-Box

What is Release 0.3

As my open source course moves on from Hacktoberfest, we have switched to working internally and externally on open source projects. For release 0.3 I had to work on telescope, a new app for tracking the blog posts of all the students in my course, and I had to find another issue to work on and submit a pull request. I have had a lot of success in one of these, and little in the other. I will provide an update next week on how things have progressed.

Telescope

I have made a lot of progress in Telescope. I have already had my issue read, created my solution, and had my pull request merged after a review by two of my peers. Let's start with the issue.

The Issue

My issue was to create a CONTRIBUTING.md to create a centralized place for environment setup instructions, prerequisites, and testing information. It would also include a list of the technologies we are using, as well as provide a guide on making issues and pull requests. Finally, it would display the MVP features, features we need to create the most basic version of the website.

Research

I looked at many different CONTRIBUTING docs across many projects in order to get an idea of what I wanted to put in there. I also needed to research Redis, as at the time it had just been added as a requirement to the project and the instructions for set up were non-existent. I researched for a few hours and got all the information I needed. Redis is an open source noSQL database. It is used by our app to create a queue to load blog posts from the list of feeds in the feeds.txt file.

The Solution and Pull Request

I created the CONTRIBUTING.md document, which I will link to here. This document contains information on creating issues, and creating pull requests, based on course requirements during Hacktoberfest. It also provides links to the prerequisites for cloning and running the code. These prerequisites are Node.js and Redis. Instructions are also provided for installing Redis on Linux and on WSL (Windows Subsystem for Linux). I did not include the Windows or MacOS set up instructions, as I cannot test either. I do not use Windows for my app development environment, I use WSL. I do not own a Mac, nor do I have the means to get a virtual machine version. I left those to others who need issues to work on. 

I also included a checklist version of the MVP Features list, to provide a way of checking whether or not we have completed any or all of the goals laid out there. Finally, I included the setup instructions to get the code running. 

Setup Instructions

You need to run "npm install" to install dependencies, and "npm start" to start running the code. If you get error messages, you may have to run "redis-server" in a separate window in order to start the server, and then try again.

So now what?

Well, Release 0.3 is part internal and part external. Although the mandatory internal part is technically done, I still have to work on an external issue. And the one I've found looks quite difficult. 

Tania-Box

I actually asked and was assigned to this issue about 2 weeks ago. It is more complex than any issue I have faced so far, and I am even considering moving this issue to Release 0.4. It depends on how complex it is going to get. Right now, I have set up the environment on my home PC, and I am starting to understand how it works. Progress is not great, as I have too much in other courses going on this week. I am hopeful that I'll have time this weekend to work on it.

The Issue

The issue is to create a new menu for converting the SQL database to a CSV file. I am unfamiliar with the database, and how I would even go about doing this. I am going to attempt it this weekend, and if I cannot, I will find something else to do.

Background Research

I have done some research on it, as it uses Go primarily, a language I am fairly unfamiliar with. It also uses SQLite, which is a database engine, and working with databases was one of my goals from Hacktoberfest.