Background
IPC144 is an introductory course about Programming Fundamentals Using C. The course is being modernized and as a result, the old course website is also being updated: https://ict.senecacollege.ca/~ipc144/
The new course notes are hosted at: https://ipc144.sdds.ca/ and use docusaurus. The notes are written in 30 markdown files, and there's an ongoing effort to audit and fix each of those: https://github.com/Seneca-ICTOER/IPC144/issues/18
Auditing and fixing functions-arrays-and-structs.md
I chose the functionsarrays-and-structs.md` and filed an issue to work on it: https://github.com/Seneca-ICTOER/IPC144/issues/79
Typos and markdown issues
I first went through the whole file and found a few typos that I fixed. There were also some markdown conversion errors, for instance, a h3 was not converted properly:
333 Arrow Notation
Another issue in the file was that the codeblocks for text, which were being used to show output of programs, were not marked as text, which was a bad markdown practice.
After fixing these issues, I ran the website on both desktop and mobile screens alongside both normal and dark mode. I also ran it through lighthouse to identify any improvements that could be made.
I started off by adding alt text for images and added id, title, slug and description for FrontMatter.
Tables
The tables had a yellow background color which made it impossible to view the text in dark mode. I removed it to improve accessibility and to follow the global styles.
The file also had a couple of tables which were improperly converted from the old course notes. Some of them were missing entire columns as colSpans were not applied properly:
Also, there were <br> tags within each cell's contents which was causing unnecessary text wrapping.
I fixed these issues, and while I was comparing it to the old notes, I noticed that the last table was missing an entire row of data:
I added the missing row back in, and highlighted the heading code blocks in these tables with <code>.
DOM Validation Errors
There were also some console errors when the page was opened. One such issue was that it using colspan instead of colSpan, not following the React case conventions. I also fixed these issues and the console was now clear!
Lighthouse report after these fixes
After I had fixed these issues, I ran Lighthouse again and the results were much better than before!
- Increased accessbility by 9 points
- Increased SEO by 8 points
New (right) vs old (left)
Pull request and reviews:
After squashing and rebasing my changes, I created a pull request:
-
Audited and fixed
functions-arrays-and-structs.md: https://github.com/Seneca-ICTOER/IPC144/pull/96
After some reviews from other contributors and some small changes, I got their approvals and was now waiting for the project maintainers to look at the pull request.
Most of my changes were accepted, except for the removal of yellow background color from tables as they wanted it to be worked on separately as a part of a bigger ticket. So, a new ticket for that was created (https://github.com/Seneca-ICTOER/IPC144/issues/112) and changes were requested.
I quickly reverted it back, addressing the requested changes and re-requested a review:
It was exciting to see the approval! After 26 comments on the pull request and a great discussion, this was a relieving moment and I was happy to see my changes making an impact.
Top comments (0)