In this post we'll be seeing how to change your contribution on github to a nice colour scheme. It's an easy tutorial, detailed enough, feel free to clear up any doubt! Let us begin.
Reconaissance
First this is what we mean by contribution graph. The green squares.
Now we need to see how github actually does it. Right click then choose inspect element.
Next we see a box has appeared. That shows us how the page is structured, as well as showing console messages. This is good for debugging.
Now if you want to change it's position, click on the dots, then select your preferred view.
Now we'll uncover the secret behind individual squares by using the selection tool.
Then we'll be looking at an individual square
Aha, so, we have an element with class day and the colour is in the fill attribute. Nice!
In Enters The Tampering Monkey
Tampermonkey is a tool that allows you to change/tamper with the codes found in your webpage. On opera it is available
as well as on chrome
If all went well, you should see a nice icon on the top right of the browser (I'm using opera)
Now let us create a new script
we get this screen
now let us match all domains on github
and change the script name
now if we press save, we'll be directed to this screen. just click on the name to return on your editor
upon inspection of our github page, we find two things
- there are 5 levels of colours
and
- they are graded according to data-count
so here is our starting point
now let us add grading of count
save
Seeing The Result
now go to github and press on the logo, you'll see our script active
now refresh the page and you'll see something like that:
just now we need to deal with the legend
Dealing With The Legend
inspecting the legend reveals a class legend with li children and background colour
we change our codes accordingly
and tada!
now whenever we move around, our graphs are coloured the same. Ethan Furman's profile for example
Wrapping Up
You can find the source here (a gist would have been more appropriate)
also view it on greasyfork here
Feel free to propose more colour schemes below. Hope you enjoyed the article!
Top comments (5)
Wow! This is a really good and in depth tutorial, great job!
On top of being very detailed, it also does a great job of walking through the "Dev process" of going from "Okay, how does this work?" to "Cool, so I see how it works... what can I do to 'improve' it" to "Look at this cool thing I did" which is the very process that made me fall in love with webdev.
Thank You! Yes, missing the in-betweens make beginners remain beginners. XD my main stuff is python, i think i wrote a Js tutorial after a really long time! The web is unbypassable, so is web dev _. "Dev process" , i liked that one!
edit: i see you tried flask, how did you find it?
I haven't gotten very far into Flask yet, I have a tutorial that I'm trying to work through, but finding time to fit it in has been a bit rough lately. I would like to get into it more, just need to make time to really dive in!
pythonmembers.club/2018/07/01/web-...
an article i once wrote. to add libs, like animate.css just add it in static folder and in your html file add the path as "static/animate.css", no need for special flask { } things.
for api see marshmallow, very easy, don't use flask-restful. The best tuto in my opinion is building something, that actually reduces the amount of time learning. A CRUD app with login should cover what you need to know, just be sure to use those things called blueprints. Use SQLite to start with flask-sqlalchemy so that switching db only means switching settings. better, you could a localhost app for someone, mimicking pushing to production at the same time.
else, i'm building something flask right now, will push to github soon and notify you. any flask question, i'll try my best to help you!
Thanks! Seems like a good place to start! I'll let you know if I have any questions! :D