DEV Community

loading...

Gitlab 'hacks'

shushugah profile image shushugah Updated on ・1 min read

Ever wanted to look 'productive' on Gitlab? Paste this into your console. What are your favourite git related hacks? 😜

colors = [`rgb(172, 213, 242)`,
`rgb(127, 168, 201)`,
`rgb(82, 123, 160)`,
`rgb(37, 78, 119)`]

$(".user-contrib-cell").each(function(){ $(this).attr("fill", colors[Math.floor(Math.random()*colors.length)])})

See image below for results!

Graph of pixels representing coding activity on Gitlab homepage, with varying shades of blue. The darker, the more productive.

Why choose a platform when you can have both? 💩

Github productivity chart, however with Gitlab and Github mishmash of blue and green tiles

Thanks to lukeshiru for their vanilla javascript solutions + GitHub script



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

You have a typo there, it should be colors.length instead of items.length. Also, you could write it with vanilla JS this way:

((colors, query) =>
    Array.from(document.querySelectorAll(query)).forEach(cell =>
        cell.setAttribute(
            "fill",
            `#${colors[Math.floor(Math.random() * colors.length)]}`
        )
    ))(["acd5f2", "7fa8c9", "527ba0", "254e77"], ".user-contrib-cell");

And for GitHub, you can just change the parameters this way:

((colors, query) =>
    Array.from(document.querySelectorAll(query)).forEach(cell =>
        cell.setAttribute(
            "fill",
            `#${colors[Math.floor(Math.random() * colors.length)]}`
        )
    ))(["c6e48b", "7bc96f", "239a3b", "196127"], ".js-calendar-graph-svg rect");

Discussion

pic
Editor guide
Collapse
jacobherrington profile image
Jacob Herrington (he/him)

Lol

Make that screenshot your linkedin banner

Collapse
lukeshiru profile image
▲ LUKE知る

You have a typo there, it should be colors.length instead of items.length. Also, you could write it with vanilla JS this way:

((colors, query) =>
    Array.from(document.querySelectorAll(query)).forEach(cell =>
        cell.setAttribute(
            "fill",
            `#${colors[Math.floor(Math.random() * colors.length)]}`
        )
    ))(["acd5f2", "7fa8c9", "527ba0", "254e77"], ".user-contrib-cell");

And for GitHub, you can just change the parameters this way:

((colors, query) =>
    Array.from(document.querySelectorAll(query)).forEach(cell =>
        cell.setAttribute(
            "fill",
            `#${colors[Math.floor(Math.random() * colors.length)]}`
        )
    ))(["c6e48b", "7bc96f", "239a3b", "196127"], ".js-calendar-graph-svg rect");
Collapse
shushugah profile image
shushugah Author

Good catch! I changed variables and forgot to update my copy/paste last minute!