Final Blog for Release 0.4

Mozilla/addons-frontend Project

In one of my earliest blogs, I wrote about potentially contributing to the mozilla/addons-frontend project. I am pleased to record that as part of this release I was able to do this by working on the following First Issue.

Core Technologies

React + Redux
Code written in ES2015+
Universal rendering via node
Unit tests with high coverage

Environment Setup for mozilla/addons-frontend on Mac OS

Install Homebrew if this package manager for macOS (or Linux) missing by running /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install yarn by running on Mac brew install yarn to manage dependencies and run scripts
Check yarn version by running yarn --version
Install all dependencies by running yarn
Start a local server localhost:3000 that connects to a hosted staging server by running yarn amo:stage

First Issue

I added tooltips to the Extension Workshop and DevHub header links:

First PR: This pull request was merged.

Oppia Project

My Second Issue was for the Oppia Project, owned by the The Oppia Foundation, a California based non-profit organization. Oppia is an online learning tool that enables anyone to create and share interactive activities called explorations to simulate a one-on-one conversation between a tutor and students.

Core Technologies

Python
AngularJS
Built on top of Google App Engine

Contributing Code Requirements for Oppia

I had to follow the installation instructions on the developer wiki. I also had to follow their Contributing code to Oppia guidelines. I followed their detailed instructions concerning how to fork, clone, create a pull request for this project in order to meet their requirements.

Installing Oppia on Mac OS

Install Python 2.7 by running brew install python@2

Install setuptools needed to install coverage to check test coverage for the Python code by running sudo easy_install setuptools

Install pyyaml to parse YAML files by running sudo easy_install pyyaml

Set up a virtual environment for the project dependencies by running
pip2 install virtualenv
python2 -m virtualenv env

Activate the virtualenv by running source env/bin/activate

Running on Development Server

On localhost:8181 bash scripts/start.sh

Preserve the contents of the local datastore between runs by using bash scripts/start.sh --save_datastore

Run test bash scripts/run_tests.sh

Second Issue

I modified the inline messages below the Title and Goal textboxes to state that a minimum entry of 15 characters was required. I also updated the validation for the Title field to match the 15 character minimum entry requirement.

Second PR

Mozilla/addons-server Project

I inquired about working on a bug for the Mozilla Add-ons Back End (Server) front end at the same time I inquired about the front-end mentioned above, as this would give me both exposure to and experience with working with both the Client and the Server sides of the Mozilla add-ons software technologies. I am pleased to be able to record that I have just received the go-ahead to work on this bug so I am updating my Release 4 blog to reflect this Third Issue.

While waiting for permission I did some initial setup work. I successfully installed the required Open source Docker software on my Mac, to handle virtual container sessions.

Core Technologies

Python
Django app and API

Install with Docker

When I tried to run the addons-server using make initialize_docker, I ran into issues similar to this reported issue. There have been significant updates since that time, so I will try to fork and clone the latest version of the project repository, set up environment, and see if this resolves the problem.

Conclusion

Overall, I am very pleased with the way my participation in Open-Source projects has gone. I was able to get more hands-on experience with Git, project setups on both Windows and Mac OS environments, and some coding experience with Python, AngularJS, React, and CSS.

Image: ‘firefox stickers!!!‘
http://www.flickr.com/photos/96941606@N00/2094632835
Found on flickrcc.net

Release 0.4, Update

Potential Issues

I have a couple of potential issues for the Release 0.4.

The first Issue:
Bugzilla Link
GitHub Link

When I set to Windows High Contrast Theme the “Save full page”, “Save visible” and “My shots” icon labels all become invisible. While for the expected results, Firefox screen overlay, control buttons, and control button labels should all be clearly visible.

The second Issue:
https://github.com/peblio/app/issues/521#

While entering password in Safari browser, password dots are not shown inside an input field.

Image: ‘Coffee cup and phone on a wooden table‘
http://www.flickr.com/photos/30478819@N08/47512440651
Found on flickrcc.net

Final Blog for Release 0.3

Second PR

Second Issue Fixes

For the Second Issue, I continued working on the same project. I added an enhancement to change the default sort from name to sort by the date of the most recent submitted licenses in descending order. To accomplish this, I made some changes in the views.py and the template license_requests.html files.

To sort in descending order, I needed to add order_by(*fields) method described in Django documentation QuerySet API reference.

The code above orders by submissionDatetime and returns the sorted not archived data from the view to the template html file. The negative sign in front of submissionDatetime indicates descending order.

The default DataTable.css style used in the template license_requests.html file sorts by the first column. To override this, I made one change in JavaScript function().

The final result:

I also removed some redundant CSS code from multiple files, consolidating it into one file.

Then I added an enhancement to generalize CSS code using the Bootstrap Button Style btn-info class across multiple project files to manage CSS in one place instead of CSS #id Selector for one file only.

While testing submitting a new license functionality to see the whole application flow, I got Unexpected Error message. So, I raised a new Issue.

Second Issue

Second PR

Conclusion

For this release, all my bug fixes and enhancements turned out to be for the SPDX-ONLINE-TOOLS project. This was not planned but occurred spontaneously due to my fixes for additional bugs I discovered as part of the basic application flow software quality assurance process, plus additional work I was asked to do by the project team. It also provided me with more experience working with Python and Django in a collaborative open source project context, and in working with team members resident in different time zones. Both my pull requests were merged.

Image: ‘My New Friend. 108/365‘
http://www.flickr.com/photos/29664148@N03/8672946430
Found on flickrcc.net

Release 0.3, First PR

SPDX-ONLINE-TOOLS

For my first Release 0.3 pull request, I worked on the spdx-online-tools project that provides an open-source online Software Package Data Exchange (SPDX) facility for to uploading and parsing SPDX documents for validation, search, and comparison with the SPDX license list.

Features

Upload/parse SPDX documents
Validate SPDX documents
Compare multiple SPDX Rdf files
Convert from one SPDX format to another
Compare license text to the SPDX listed licenses

Windows Environment Setup

Install Python 2.7+
Download the virtual environment by running pip install virtualenv on Mac OS/Linux or pip install virtualenvwrapper-win for Windows OS (need to run only once)
Create a new virtual environment for a project by running mkvirtualenv venv (need to create for each project)
Activate the new virtual environment by running source venv/bin/activate on Mac OS/Linux, venv/Scripts/activate on Windows OS
Install the required Python libraries for this project from the requirements.txt, by running pip install -r requirements.txt
Check existing environment list by running lsvirtualenv -b or lsvirtualenv -l
Open a virtual environment by running workon venv

GitHub Sensitive Data

The settings.py file uses some sensitive data (the Client ID for the Github Oauth Apps and the randomly-generated Django secret key for each new project) from the secret.py file to work with the GitHub API.
So, I had to set my GitHub OAuth App for the application homepage URL to http://localhost:8000/ and the Authorization callback URL to http://localhost:8000/oauth/complete/github.

Django Database Setup

To migrate Django for applying migrations to make models (adding a field, deleting a model, etc.) into the project database schema, I ran python manage.py migrate
To create new migrations based on the changes I have made to models, I ran python manage.py makemigrations appName
To use the license-xml-editor with licenses/exceptions from spdx license list and download the license name, I ran python src/populate.py
To populate the licenseRequests database table with data, I ran python manage.py loaddata ./app/testFiles/licenseRequests.json

Application Run

To test the application, I ran python manage.py test
To start the application, I ran python manage.py runserver
Open localhost:8000/ in the browser
To use API, I opened localhost:8000/api/something

First Issue Fixes

I added some CSS enhancement to convert mouse pointer on hover and highlighting table rows on mouse hover
I moved redundant CSS from multiple files into one file
While testing some button click functionality, I found and raised a new bug (I am a Software QA Engineer after all) and fixed the code.
After fixing these bugs, the team asked me to remove some redundant CSS in other files, so I have some small bugs to fix for this project for my next pull request

First Issue
First PR

Dealing with Multiple Commits

While working on fixing my issue, I had to push 6 commits. The project team asked me to squash my multiple commits into 1. So, I decided to use git rebase

To see the list of my all commits and find the commit that is 1 before my first commit, I ran git log

To rebase, I ran git rebase a9b11aa... -i
Then I changed all but the first commit inside the opened editor from pick to squash
To push the squashed commit, I ran git push origin branch-name -f

Image: ‘Documents Key‘
http://www.flickr.com/photos/157270154@N05/37638855235
Found on flickrcc.net

Discovering Open-Source Projects for Release 3.0

I have spent the last 3 days searching for projects with bugs I could potentially assist with. While doing this, I encountered a number of issues:

For larger projects, I noticed contributors created enhancement requests without consulting each other resulting in the issue raised being associated with out of date version of the planned design.
When issues are raised, they were often untriaged for long periods of time, sometimes for years, so when I tried to contribute, I learned the issues were no longer valid.
A very high percentage of “Open” issues were in fact closed upon closer investigation giving the false impression there were far more unresolved issues than was actually the case.

Potential Projects

Nevertheless, I was able to find two candidates projects for my 3.0 Release:

https://github.com/topcoder-platform/community-app

https://github.com/mozilla/network-pulse

Potential issues I would like to work on include:

Issue #1

Issue #2

These candidate projects interested me because they appeared to provide good opportunities to improve my existing JavaScript and Python coding skills, or to become more familiar with the React JavaScript library used for building user interfaces.

I also very much want to contribute to the Mozilla project as I have been an independent Open-Source QA manual tester for Mozilla Firefox projects for around 3 years.

Image: ‘I wish it were 1999‘
http://www.flickr.com/photos/53326337@N00/3353884600
Found on flickrcc.net

Final Blog Post for Release 0.2

Summary

The main purpose of this Release 2.0 was to gain more experience in contributing to different open-source projects. In this release, I had more opportunities to setup project environments, work within different OS, practice skills using GitHub, and the Git commands necessary for contributing to the workflow.

I found 4 issues relating to 3 different open-source projects dealing with:

React.js. Localization: translated strings from English into Ukrainian. Worked within a Windows and JavaScript environment.
Bugzilla-Board. Removed console logs from code. Worked within a Windows and JavaScript environment.
Code for Boston website. Fixed a small UI bug. Worked within a MacOS, Ruby, Jekyll, and CSS environment.

I submitted 4 pull requests for my changes to those 3 open-source projects. For each of my Pull requests, my changes were approved and merged with the project master code, and the issues were closed.

Links to my PR

Image: ‘Office table with notebook, computer and reading glasses‘
http://www.flickr.com/photos/30478819@N08/33839861111
Found on flickrcc.net

Release 0.2, Fourth PR

Working with Ruby

For this bug, I worked with my MacBook Pro machine to broaden my experience working with different desktop operating systems. I updated my Mac laptop to the latest macOS 10.14.3 Mojave OS.

This time, I needed to increase spacing between paragraph text and project item for one of the Boston website pages. The language involved was Ruby which I had not worked with previously, so this was a useful opportunity to expand my skills and knowledge.

Environment Setup

To build this website locally, I had to complete several steps:

To install a full Ruby development environment on my system. I determined that Ruby was already pre-installed on my Mac, so I checked the version by running the command:

$ ruby --version

To install Jekyll through Ruby’s Gem package management system. I used sudo to install Ruby gems in my home directory in order to get around file permissions problems:

$ sudo gem install jekyll

Jekyll is a simple, popular, extendable, static site generator. It can be used to execute Ruby code at build time. As a result, plain text written in any selected markup language is processed through layouts and transformed into static website and blogs. Jekyll’s adoption by GitHub has promoted its widespread use.

To build this website, I ran the command:

$ jekyll build

To view the site using my web browser, I used http://127.0.0.1:4000. The changes I made to the source code triggered Jekyll to rebuild and re-appeared in my browser.

My Fourth Issue: https://github.com/codeforboston/codeforboston.org/issues/81

My Fourth PR: https://github.com/codeforboston/codeforboston.org/pull/85

Image: ‘engine of a clock‘
http://www.flickr.com/photos/91818084@N02/46766769971
Found on flickrcc.net

Release 0.2, Third PR

More translation work

For my third pull request, I translated from English into Ukrainian the List and Keys document for the React project. The effort involved was similar to the previous document I translated.

My Third Issue: https://github.com/reactjs/uk.reactjs.org/issues/1

My Third PR: https://github.com/reactjs/uk.reactjs.org/pull/21

Finding more Bugs

While I was doing this, I searched for another bug to fix for my 4^th pull request, and a larger problem to work on for my 3.0 Release. While doing this, I noticed this took a significantly longer time than was really necessary. A major reason for this was that some issues on GitHub which were listed as being Open turned out to be Closed upon reading the conversational content.

For the next 3.0 and 4.0 Releases, I need to have bugs where I add new features to a project. While working on any project with a team for better repo management, it could be a good idea to synchronize my fork of a repository to keep it up-to-date with the upstream repository.

So, I can have at least two remotes for one local repository: remote origin and remote upstream:

origin my GitHub forked repository

upstream the GitHub repository I forked from

To define new remote origin and upstream repositories:

$ git remote add origin git@github.com:myUserName/repoName.git

$ git remote add upstream git@github.com:ProjectName/repoName.git

Image: ‘Letter Blocks‘
http://www.flickr.com/photos/20035421@N00/45822357275
Found on flickrcc.net

Release 0.2, Second PR

Bugzilla Board

Bugzilla was originally released by mozilla.org in 1998 and is used by a large number of organizations, including Mozilla, for bug and defect tracking. Mozilla’s Dave Miller Systems Administrator for Mozilla Corporation has been in charge of its development since July of 2001.

According to the Wikipedia, “Bugzilla Kanban is a php/js based front end client for Bugzilla using the XMLRPC API. It displays items on a Kanban board where they can be created, viewed, sorted and updated. It is self-contained, and can connect to any local or remote Bugzilla server”.

This is the Bugzilla Google Chrome add-on which displays items on a Kanban board. Users can use this Kanban style board to create, update, sort, and view items by bug status and assignee.

My Second Issue is in support of this Chrome add-on, Remove console logs from release builds #14 : https://github.com/bendl/bugzilla-board/issues/14

My Second PR: https://github.com/bendl/bugzilla-board/pull/17

Image: ‘Workspace‘
http://www.flickr.com/photos/17423713@N03/38075191686
Found on flickrcc.net

Release 0.2, First PR

Finding a Bug

Finding an initial open-source issue to which I could contribute for Release 0.2 proved to be more challenging than I had anticipated. Initially, I searched for a project with a particular language such as JavaScript, Python, or Java. I eventually decided, however, it would be better to focus on searching by bug category. But even this proved to be complicated as I found that on several occasions bugs labeled as “easy”, “good first issue”, “beginner” when I researched them further often turned out to be could be somewhat complicated requiring the installation and setup of complete test environments, making it unlikely they could be fixed within a short period of time.

Joining a Project

Eventually, I read a post on Slack concerning a project looking for contributors who could assist with the translation official React documentation from English to Ukrainian. As I am fluent in both languages, I decided to join this React documentation translation project along with a couple of current and former Seneca College students volunteers with similar language skills. For my initial contribution, I selected the hello-world.md file from the published work list.

My Contribution

After forking the project and studying the Project guidelines, I created my own GitHub branch for my individual contribution and then started working on the translation of the selected file. It was my first technical documentation translation effort, so even though I am a native Ukrainian language speaker, it took some time to complete this task as it was challenging at times to translate some computer technical terms from English into Ukrainian accurately.

After pushing my first changes, my team reviewed my translation, and provided me with feedback. After incorporating the suggested changes, I updated my pull request. My pull was approved, and later successfully merged into the Ukrainian version of the React documentation under development.

I chose to contribute to this project as one of the things I may have to do in the future is technical writing. Successful completion of this task has served as an excellent introduction to this important Information Technology related activity.

My First Issue, Hello World file translation: https://github.com/reactjs/uk.reactjs.org/issues/1

My First PR: https://github.com/reactjs/uk.reactjs.org/pull/4

Image: ‘Hand hÃ¤lt Lupe Ã¼ber BinÃ¤rcode aus Computerprogrammierung in grau und weiÃ‘
http://www.flickr.com/photos/160866001@N07/46892273271
Found on flickrcc.net