Project Links:
What is this?
This is a tool, purely for fun, to put text and different graphics into a mocked-up Github Contributions Graph (see this if you don’t know what that means). This was a random idea that I had, and wanted to see if it was possible to build from scratch, with minimal component libraries. It ended up working better than I had expected; just take a look below!
Tech Stack and Learning:
Most of what I used to build this was pretty vanilla React stuff:
- JavaScript
- ReactJS
- Materialize CSS (for styling)
- Canvas API
The most challenging part, and also the most interesting, was turning the text input into a point-based visual representation. Mostly, this meant learning how to use the Canvas API (JavaScript & HTML) and processing the raw data it returns.
I also tried to use React Hooks more on this project than I previously have (I’m used to TypeScript Class or JS ES6 Class based components), which required some additional research and self-educating.
What is a Github Contribution Graph?
For those unfamiliar with the site Github, it is hard to describe the full depth of what they offer, but at its core, Github is a service that developers can use to store their code, as well as track changes and collaborate with other developers.
As a Github user, you get your own profile page (for example, github.com/joshuatz), which you can customize with some links and text. One of the fun features of Github’s profile page is an automated widget, commonly referred to as the Github Contribution Graph. It shows how frequently you have been pushing code through Github, with different intensities of green to signify more activity on a given day. Here is an example:
This type of data representation is also often referred to as a heatmap.
