🔹 Collecting squares together!

Mining, assembling, formatting.

Jul 21 · 3 min read
Photo by Djim Loic on Unsplash

I love gamification. Really. Collecting achievement just for the sake of it, as any rpg-player.
It’s why I really love the green squares off the contribution graph on GitHub profiles.

But the green squares are personal by essence: it’s your commits, your activity on GitHub. There’s no data for teams or organisation.
At BeCode, we work as a team, we live as a team. Everything we do, we do as a team!

It’s why I wanted to create a contribution graph with informations of all the BeCodians.

Using green squares felt a big wrong, so I use the blue tones of BeCode’s identity, and created Kareble.

Fetching the data

I already known about the GraphQL API of GitHub (did I tell you that I really love GraphQL? I love GraphQL. So much. For real. It’s the future, deal with it).

But unfortunately, the information are deeply hidden in all the data that GitHub serves. And fetching all the data I needed is very slow, so I can’t do it in real time.
The idea is to create a script to fetch the data, and running it once a week.

After some tests, I ended with this graphql query:

It gives me all the contributions from the last year, by weeks, for 25 users of our organization. Then, I created a small script to fetch the data of all our users, 25 at a time.
The script also assemble and clean the data, then set the color of each day, regarding of the quantity of contributions.
It finally writes all the data in a JSON that will be used by our website.

At the time of the redaction (july 2019), the script fetches the data in 25 batches of 25 users, performing all its tasks in 1min 48s.

Displaying the data

For this little project, I wanted to change my habits.
I could have done it with React or VueJS, but I wanted to use this project as a good pretext to test and discover something I never used before.

My choice went on Svelte. The version 3 was quite new when I started working on kareble and some podcasters I listen made very enthusiastic episodes about it.

Svelte is a very great tool, similar to React or VueJS (working with components), but also quite different - the creator of Svelte describe it as a disappearing framework: when compiled, the code doesn’t need to include a runtime like React or Vue.
Svelte is also constructed around HTML: you defined components by their markup (svelte components are like small HTML fragments), and a small chunk of scripts to operate with them.

Svelte is really fast and easy to use, and for small projects, it’s a very good surprise.

The coding part was really straightforward, you can dig around the code on the repository.
If you’ve already played with a modern front-end framework like React, you’ll see that Svelte is really easy to understand.

Build & deploy

Compiling Svelte is really easy, thanks to rollup.

To host and deploy, since we can’t fetch the data in real time, we can host the website on any static platform, like netlify or github-pages. For Kareble, I use github-pages.

The only missing part is a bit of automation - for now, I need to run three commands each week to deploy the site.
There’s many tools for that, but not free. I really want to use GitHub Actions, an upcoming tool by GitHub, currently in beta, which will be able to do all I need for this project.

In the meantime, those three commands to run are my morning routine for each sunday 😋


BeCode: Learn to code, get a job !


Written by


Pierre-Antoine Delnatte, 33 ans, dev freelance hyperactif, professeur dans l'âme, maître du monde en dilettante, vieille à chats.



BeCode: Learn to code, get a job !

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade