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
Top comments (0)