Forem: a-parris21

Release 0.2 - PR #4

a-parris21 — Sun, 27 Nov 2022 03:59:57 +0000

Issue I worked on

For my last PR, I contributed to the se-unlocked repo which manages the transcripts for the Software Engineering Unlocked podcast.

I worked on issue #132, which involved making improvements to the transcript for Episode 53. Each of the transcripts is automatically generated, thus they contain many minor errors throughout which have to be adjusted manually by contributors.

I browsed the document for the Episode 53 transcript and made various changes, including grammar improvements and adjusting the script so it matched what was actually spoken in the podcast episode.

Preparation for the fix

To prepare for the fix, I first had to review the relevant podcast episode on their website, viewable here.

Additionally, I had to ensure that any changes I made were consistent with the formatting rules outlined in the project's instructions on editing transcripts.

Code Explanation

This fix did not involve any changes to the code.

The associated file can be found here:

Research

No programming-related research was required to complete the fix for this issue.

Although, I did have to familiarize myself with the formatting rules outlined in the project's documentation. Additionally,

Interactions with project maintainers

I had no noteworthy interactions with the project maintainers.

Difficulties

I did not find this issue to be very difficult to work on. I had to familiarize myself with the project's formatting rules for transcripts, I found this mildly tedious though not difficult.

Link to Pull Request

PR #179

Release 0.2 - PR #3

a-parris21 — Sun, 27 Nov 2022 03:32:53 +0000

Issue I worked on

I worked on the html.org.in project once again.

When I was working on my second pull request, I found it very difficult to read the project's README.md file. The instructions were not very clear to me and there were moderate grammar errors througout the document.

So, I opened an issue, #70, to make some imrpovements to the project's README.md.

Preparation for the fix

There was not much preparation required for this fix apart from my usual workflow actions - i.e. forking the repo and making a branch for the issue.

Code Explanation

There was no code involved in this fix. I provided documentation improvement to the repository for this PR.

As such, I've provided URLs to the repo's README.md file prior to my changes and also after my changes.

Before the fix

This is the original README.md file from before my changes.

After the fix

Here is the README.md file after my changes.

Research

As this was a documentation improvement, minimal research into programming topics was necessary.

I did some reading on embedding video files in webpages via HTML and compared my research material to the instructions provided in the project's documentation just to ensure I was understanding code correctly.

Interactions with project maintainers

I did not have any notable interactions with the project maintainers.

Difficulties

Improving the documentation was difficult at first since I found it very unclear initially. However, as I familiarized myself more with the project, it became clearer to me what the developers were trying to say in the README.md.

Link to Pull Request

PR #73

Release 0.2 - PR #2

a-parris21 — Sun, 27 Nov 2022 02:27:40 +0000

Issue I worked on

The html.org.in project is a website which has several simple tutorials aimed at teaching new web developers the basics of HTML.

The website supports "light" theme and "dark" theme for readibility. I worked on issue #69, where the drop-down menu for choosing the theme was overlapping with list of tutorials, making it difficult to read some of the titles.

Preparation for the fix

There was not much setup required to apply the fix. After forking the repo, I got to work on fixing the problem.

Code Explanation

As stated, the website supports "light" and "dark" themes for readibility purposes. CHanging between these two themes can be done via the "theme-box", which is a <div> element that functions as a drop-down menu.

On the website's home page, there is a list of all the tutorials currently hosted on the website, organised into a table.

Before my changes, the theme-box would "float" within the website's main area, overlapping with the tutorials on the far-left of the table. I found this unpleasant to look at and mildly inconvenient when browsing so I opted to fix the problem.

My code changes move the theme-box to be part of the header, instead of its original position where it "floats" in-front of the list of tutorials.

Code Demo

Below I've attached two screenshots of the website's home page. Take note of the position theme-box, which is moved from floating over the tutorial list, to the header.

Before the fix

After the fix

Research

What research did you do? Were there aspects of the issue that you found difficult?

I did some personal research into the Bootstrap classes used in this project and they turned out to be structures I am already familiar with, so resolving this issue turned out to require less preparation than I initially expected.

However, a problem I ran into while updating the code to apply my changes was that, if a section of HTML code was loaded into a file via the include-html attribute on an element, then the JS code defined in app.js would not apply to it.

As such, I had to make some small changes to my initial fix (where I updated the header.html file) and move those changes to the main index.html file.

Interactions with project maintainers

I had no notable interactions with the project maintainers.

Difficulties

My greatest difficulty was in understanding the code of the project as it was fairly messy. There are a lot of deprecated sections of code that have just been commented out, rather than deleted and documented. Thus, there's commented-out buggy code placed througout bug-free code.

Once I found the relevant sections that I needed to update, it was not very difficult to apply my fixes.

Link to Pull Request

PR #71

# Release 0.2 - PR #1

a-parris21 — Fri, 25 Nov 2022 22:46:59 +0000

Issue I worked on

The Basic-memory-game repo hosts the code for a tile-matching memory game. There was a problem, described in Issue #104 where tiles that were flipped face-up would not be rendered at a constant size. Thus, if tiles used image files with different dimensions, then the tiles would be re-arranged haphazardly upon being flipped face-up.

Preparation for the fix

There was not much setup required in order to prepare the fix. It was a problem with the web app not loading the CSS correctly. I am already familiar with CSS, so it was just a matter of forking the repo and then inspecting the web app's CSS to locate the source of the problem.

However, the problem wound up being very different from my initial expectations. Originally, I expected that I would have to edit the stylesheets for the web app but it turned out the bug was generated by the index.html, and not within the stylesheets.

What did you need to learn in order to make the fix?

Originally, I expected that I would need to improve my knowledge of CSS syntax in relation to setting the dimensions for elements and their contents in order to resolve this issue. However, in the end I simply needed to familiarize myself with what filepath formats are considered 'valid' for most browsers that process HTML code.

Code Explanation

Originally, upon first inspecting the stylesheets for the Basic-memory-game web app, I could not seem to find a syntax error within the CSS that handled the dimensions of the images.

Therefore, I decided to try commenting-out all of the CSS and gradually re-enabling each section of CSS code until one of them broke the program.

Upon attempting this, I realized that none of the CSS was being rendered at all.

I inspected the index.html file and noticed that there was an invalid filepath provided to the <link> element which linked the stylesheet file.

The value of the <link> element's href attribute was set to "/styles.css" which, worked correctly and rendered all the CSS appropriately when testing the app via VSC's live-server extension.

However, when the web app was rendered by any browser outside of VSC's live-server extension, the CSS would break completely. I adjusted the value of the href attribute, adding a period (.) before the forward-slash (/) and the CSS began rendering correctly. Now all of the images displayed in tiles were rendered at the same size.

Thus, the problem was that, the filepath provided when attempting to link the stylesheet file, "/styles.css", was interpreted as a folder in the current working directory with the name "styles.css", instead of a .css file with the name "styles". As a result, since the stylesheet linked to the index.html file technically did not exist, no CSS was applied to the HTML. Adjusting the filepath's syntax fixed this problem.

Code Demo

Before the fix

Start of a new game:

After clicking a tile with a large character image:

After the fix

Start of a new game:

After clicking a tile with a large character image:

Research

I spent some time browsing the web, especially online developer community forums, search for articles or threads discussing filepath validity in relation to web-browsers and HTML. I have yet to find something that speaks specifically to this problem with ./filename vs /filename, although I have gained a better understanding of the difference through some testing of my own.

As such, I arrived at the conclusion described above (in the Code Explanation):

The string "/example" repesents a folder named "example" in the current working directory.
The strings "./example" and "example" are the valid ways to represent a file named "example" in the current working directory.

Interactions with project maintainers

I had no notable interactions with the project maintainers.

Difficulties

The most difficult part in resolving this issue was attempting to locate what I believed to be a syntax error in the CSS, which turned out to be non-existent.

Upon realizing that the error was in the stylesheet linking, fixing the issue took just a few minutes.

Link to Pull Request

Basic-memory-game PR #105

Refactoring my SSG

a-parris21 — Sat, 29 Oct 2022 06:23:15 +0000

In refactoring my code, I focussed on removing global variables, reducing code duplication, adjusting my IF and ELSE statements for clearer logic, and shortening the body of my functions.

Change List

Removed outputPath global constant
Removed htmlLangAttribute global variable
Renamed parseFile to parseDir
Adjusted the IF and ELSE blocks in parseDir to make logic easier to understand
Edited main.js such that --lang CLI option is only parsed if an --input option is provided
Extracted function generateHtmlBody from writeHtmlFile
Extracted function parseOneFile from parseDir

Improvements

Previously, my code used 2 global variables and 1 global constant. I removed the need for the constant (outputPath) and 1 of the variables (htmlLangAttribute).
The outputPath constant stored the default filepath './dist' for the output directory (where generated HTML files would be saved). This constant has been removed and the default filepath is defined internally with a function (setOutputFolder).
The htmlLangAttribute was used to save, as a string, the value for the 'lang' attribute when generating HTML files. This information is now passed in to the relevant functions as a parameter instead of existing as a global variable.

The parseFile function was renamed to parseDir to better reflect its intended purpose. parseDir reads the files inside a folder, and if any of them are folders, it will recursively parse those sub-folders. If the files are single-files, that file is read and an HTML file is generated from its text content.

A new function generateHtmlBody was extracted from writeHtmlFile which handles converting an array of strings into HTML paragraphs and an HTML title element.

A new function parseOneFile was extracted from parseDir. I moved the code which handles the reading and writing of a single file from parseDir into a function parseOneFile and then invoke parseOneFile as needed.

The Interactive Rebase

The interactive rebase was very easy to do. I squashed all of the commits into the oldest one and edited its commit message to reflect the later changes.

Bugs

When I started refactoring my code I realized that, after implementing the recursive folder parsing feature, the index.html file was no longer being generated correctly.
I was not able to resolve this issue as yet though I've ruled out some of the possible solutions I came up with previously.

Changing history with Git

This was my first experience with using the rebase feature to change the history of commits on a repo. It turned out to be fairly easy, since I had kept each of my commits limited to a single change so squashing and renaming them was not difficult.

Lab 4 - config file support & remote repos

a-parris21 — Mon, 10 Oct 2022 01:55:12 +0000

Implementing config support in another repo

For Lab 4, I added support for reading and parsing a JSON config file to Stefan's SSG.

The code itself was difficult at first since I am not incredibly familiar with Python but it got easier as I continued once I was accustomed to the syntax structure (since Python itself is fairly easily).

I did run into quite a few problems since, as I stated, I am not very familiar with programming in Python. However, since Python is a fairly easy-to-use language, it did not take me long to become familiar with the necessary syntax and logic in order to implement and test this config file feature.

Using Git was very easy this time for cloning the repo, creating a topic branch and updating the branch regularly with changes. I have performed these tasks via the Git CLI before so it was easy to do it again for Lab 4.

Reviewing and Testing using remotes

For Lab 4, Maxim implemented the config support for my repo.

This was my first time using Git's features for reviewing and testing via remote repos/branches. This was also my first time getting acquainted with remote-tracking branches. I thought they sounded complicated at first but they were actually fairly easy to use.

Additionally, Maxim's code did not generate any errors when I tested it and it functioned as intended. So after reading and testing it a few times, I just had to accept the PR since there was nothing that required fixing.

Lab 3 - working in multiple branches

a-parris21 — Sun, 02 Oct 2022 17:14:52 +0000

Project Repo: ap21-ssg

New Features added

Merge Commits

Working in parallel branches for adding new features ensured that, when I made any changes to the code, if the new changes generated errors or broke the program; the previous bug-free stable version would remain intact and I wouldn't lose that work.

I was able to code the solution for 'issue-19' (allowing the user to specify an output directory) without losing any of the progress I made prior to adding this new feature.

I encountered some issues when I attempted to merge the solution for 'issue-20' (adding support for recursive file parsing). I resolved the conflicts generated when attempting to merge the two branches into 'main' here.
However, for one of the functions, I merged from the wrong branch, but since only minor changes to the code (about 4 lines total) were necessary, I went back and manually adjusted the code.
See Issue 21 - Resolved conflicts between issue-19 & issue-20 merges for details.

I think that, in reference to merging the function from the wrong branch, it would have been a better solution to revert the changes, and then re-merge using the correct branch. However, since the changes I needed to make were very minor, I opted to edit the code manually this time.

First GitHub pull req + Lab2

a-parris21 — Sat, 24 Sep 2022 02:05:01 +0000

This was my first time using GitHub to create a pull request for merging my edits into someone else's project's main branch.

It was fun learning something new.

And the implementation of the initial markdown support was not too difficult. Completing lab 2 was intriguing.

Progress on Release 0.1

a-parris21 — Sat, 17 Sep 2022 03:30:58 +0000

Hello!

This week I got started on Release 0.1, though I've run into a lot of bugs so far, it's been very engaging trying to build my own SSG tool.

I worked with my partner (anshul137) to improve the code in both SSG tools. We've known each other from previous classes and discussed this project via Slack.

Reviewing Anshul's SSG tool was relatively easy — his logic was straightforward and not difficult to understand. I did find a few issues in his code but not very many as of this post.

Anshul reviewed my SSG tool and found some issues that I wasn't aware of initially (such as the /dist folder not being created) as well as some minor errors I had overlooked.

The issues I filed:

minor errors in README.md file - There were some minor spelling, formatting and information errors in the README.md file.

Help message from CLI --help flag is minimalistic - Help message generated by the CLI --help flag looks like a placeholder help message. It does not yet provide any intuitive information about the tool.

Attempting to run npm link gives an error - The instructions stated to run the npm link command before using the tool but this generated an error.

Version number in package.json is an invalid number - The version number listed in the package.json file for the app was not in a valid format.

Error when attempting to use --input flag - Attempting to use the --input flag generated an error when the program attempted to delete the old /dist folder. A function invoked by the code is not recognized.

The issues my partner filed:

README.md file missing - I was working on the 'test' branch of my repos and did not switch back to the 'main' branch in order to push the updated README.md file there. It has now been pushed to the 'main' branch though it is not yet fully completed.

Output files are missing - My program currently does not generate output .html files as intended. Currently working to resolve this.

/dist folder is not created - The /dist folder is not created when the program executes. Currently looking into this.

2 optional implementations are missing - The optional implementation features for the code were missing. They have been added to the program and also to the README.md file.

--version CLI flag not function correctly - The name of the tool prints to the console when Anshul tests the app but the version number either does not appear or has the wrong value.

Anshul was able to fix most of his issues thus far.
I am currently working to resolve issues #2 and #3 in my code.

First post!

a-parris21 — Sat, 10 Sep 2022 00:26:17 +0000

include

//#include

int main()
{
std::cout << "Hello Reader!\n";
std::cout << "Please see my bio." << std::endl;

return 0;
}