Hacktoberfest #3 - Timeloom, TypeScript
Published: 2023-10-25 04:22:51

#### Links Mentioned

Project I contributed to: https://github.com/inclinedadarsh/timeloom
Issue I worked on: https://github.com/inclinedadarsh/timeloom/issues/9
My Pull Request: https://github.com/inclinedadarsh/timeloom/pull/18

### Timeloom

Before finding and contributing to PrimedKeys, I found a neat TypeScript project I could add a feature to. [Timeloom](https://github.com/inclinedadarsh/timeloom) by [Adarsh Dubey](https://github.com/inclinedadarsh) is a web app that lets users document their technical journey in a timeline-style page.


### TypeScript

Timeloom is written in [TypeScript](https://en.wikipedia.org/wiki/TypeScript), a superset of JavaScript developed by Microsoft. I've never worked with TypeScript before this, but I have experience from class writing web apps using JavaScript (Node JS) and C# (ASP.NET). I have to admit I'm not very good at web development. However, I wanted to challenge myself and add a feature to a web app.

### Light and Dark Mode

Growing up, I remember most websites I browsed being black-text on a white background, or what's called a "dark-on-light colour scheme" (more commonly `light mode`). Nowadays, many websites and apps (like Discord) have what's commonly called dark mode, or a "light-on-dark colour scheme".

### Feature Addition - Light Mode Styles

The Issue I worked on was a Feature Request to add light mode styles. Timeloom was developed with dark mode styles, but the author requested light mode support to be enabled, with a light mode stylings provided. Working on this issue was a good exercise in contributing to a web app.

### My Approach

When looking at the project `README.md`, I noticed [Tailwind CSS](https://tailwindcss.com/), a CSS framework, is used in the project. Since Tailwind was already used in the project, I decided to follow the [Tailwind strategy for light/dark mode](https://tailwindcss.com/docs/dark-mode). 

### Tailing CSS Dark Mode

When working on this issue, I learned that web apps can apply light/dark mode styling based on two strategies:
- media - user's Operating System/browser preferences)
- class - whenever a `dark` class (or similar, depending on the framework) is applied to the HTML tree.

I noticed the `class` strategy was already implemented in Timeloom via the [tailwind.config.js file](https://tailwindcss.com/docs/configuration). Since I wasn't adding a toggle button to switch between light/dark modes, I added the `media` strategy to `tailwind.config.js` to allow light/dark mode selection via user system preference.

### Light Styling

For light styling, I tried to choose appropriate colours for a light theme in the global CSS file, `app/globals.css`. I used the dark mode stylings as a template and played around with the properties to see which properties affected parts of the web page.
After making my changes in `app/globals.css`, I noticed that some dark mode styles persisted in the light mode. To determine the elements I would have to modify, I used my browser's [Developer Tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) and the Element Inspector.

After determining the elements, I used [git grep](https://git-scm.com/docs/git-grep) to locate their file locations to various [React Components](https://react.dev/learn/typescript).
Since the `class` strategy for dark mode stylings was already enabled, I added the `dark` class to define dark mode stylings to these components and add light mode equivalents. After I was satisfied with the stylings, I submitted a draft Pull Request.

There is a cool grid image at the top of the page I wanted to create a light mode equivalent for. I initially thought I could create a light mode version using code, but I later found out the grid image was an image asset, `bg-grid.png`. After discussing with the author, we decided not to include a light-mode version of this image in my Pull Request.

### Refactoring

After an initial code review, the author noticed some of the stylings in `app/globals.css` were reused. The author suggested to use [Next Themes](https://www.npmjs.com/package/next-themes) to solve this. To explore this solution, I made a test branch on my local machine and found that the Next Themes solution would achieve the same affect as the `media` strategy I implemented in the Tailwind config file.

Due to this, I suggested to instead refactor `app/globals.css` by moving the light mode stylings I created into the `default` styles
### My Experience and removing other duplicate stylings. I ended up   cleaning up `app/globals.css` and adding the changes to my Pull Request to see if this is what the author wanted. I am currently still waiting to see how the review goes but I am confident we will  complete this feature one way or another. Update to come in the next few days.

### Conclusion

When I started learning Open Source development, I dreaded contributing to a web app. Despite the web development classes I've taken, I'm still not comfortable creating a web application from scratch (at least using Node JS). However, for Hacktoberfest I wanted to at least attempt a contribution to a web application. And by doing so I was able to implement a feature from scratch.