DEV Community

shushugah
shushugah

Posted on • Updated on

Gitlab 'hacks'

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)])})

Enter fullscreen mode Exit fullscreen mode

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!

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");

Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
jacobherrington profile image
Jacob Herrington (he/him)

Lol

Make that screenshot your linkedin banner

Collapse
lukeshiru profile image
Luke Shiru • Edited on

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

(query =>
    document
        .querySelectorAll(query)
        .forEach(
            cell => (cell.dataset.level = Math.floor(Math.random() * 3 + 1)),
        ))(".user-contrib-cell");
Enter fullscreen mode Exit fullscreen mode

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

(query =>
    document
        .querySelectorAll(query)
        .forEach(
            cell => (cell.dataset.level = Math.floor(Math.random() * 3 + 1)),
        ))(".ContributionCalendar-day");
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
shushugah profile image
shushugah Author

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