Auditing and fixing markdown for IPC144 notes
Published: 2021-11-19 18:57:37

## 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](https://docusaurus.io/). 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 `functions`arrays-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](https://developers.google.com/web/tools/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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgr3p9zkipsul9gm9785.png)

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhsileeup6e8ho53j4rg.png)

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)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m56xtappfxjaupc7qqtz.png)

## 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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw7fmoz1j4br0ecrj6dn.png)

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.