Credit where credit's due

With a final spinning move I struck down the last of our foes with my brand new saber. Catching my breath, I looked at my mentor, seeking acknowledgement. Maybe even hoping for a hint of pride. I should have known better.

A few moments later the ending credits were rolling past, with the adrenaline still flowing through my veins. Epic music honoured the people who had given me this thrilling experience. The people who created the Star Wars VR game Vader Immortal Episode I. I realised how proud these makers must be. Of course they wanted their work to carry their names. They deserved it.

But why should credit rolls be limited to movies and epic games? Aren’t we as web developers just as proud of our work? Doesn’t our work tell stories? Excite people? Thrill them? Move them?

It most certainly does! Our work makes people say “This is the internet we were promised.“ Our work is honoured with prestigious awards! Our work brings peace, fights crime and brings magic into people’s lives. Of course it should carry our names! And it should be epic.

That is why I made QreditRoll on our bi-weekly Tinker Friday. (Yes, I wrote credit roll with a Q. Yes, it’s because we’re called Q42. I know, it’s an obsession. It was either this or CreditRoll42.)

QreditRoll can be implemented on any website. It takes the content of your humans.txt, which is kind of a standard for crediting the people who have contributed to building the website, and turns that into an epic credit roll. Visitors can trigger it by entering the Konami code. Or you can offer them a more obvious call to action, like a button, a link, or a game.

It starts with including the https://www.qreditroll.com/qreditroll.js script on your website. This script does a couple of things:

• It fetches your humans.txt file.
• It creates an iframe which contains the credit roll. We use an iframe to prevent conflicts between your CSS and JavaScript and ours. The iframe document is served from our domain. (By the way, did you know iframes can be partially transparent if you make the background of the body of the iframe document transparent? Pretty cool!)
• It listens to the keydown event, to detect the Konami code.
• It sets up cross-origin communication between the included script on your webpage and the iframe document using window.postMessage().
• It offers a QreditRoll.start() function if you want to offer the user your own way of launching the credits.

The entire thing is built with plain vanilla JavaScript, HTML and CSS. The only library used is Typekit.

Visit the GitHub repo for implementation details. And feel free to review the code or maybe even improve it with awesome new features. We all know the web has much more fun possibilities than movies. Try scrolling through the credit roll on desktop to see an example of what I mean. I would love to hear your ideas for more fun features!

Would you like to work at a company that gives you time off to invent such creative stuff? Check our job vacancies (in Dutch) at https://werkenbij.q42.nl!