On the other day, I got an email notification from Bandcamp about a newly released album from a band I followed. I went to the bandcamp.com site, and there was “We’re hiring in design and engineering!”. Out of curiosity, I checked what their job ad looked like.
In the very end of the job description there was “To apply, check the HTTP headers.”. Oh, a treasure hunt!
Usually, when I browse a site I check page source too, for no particular reason. I have this thing. Sometimes one can find interesting things in it. You could guess now what I did. Yes, I let myself hijacked from my original intent. I immediately got hooked, and I enjoyed their game so much! Not to mention how much I learnt meanwhile.
This also could be an example of why you should start using browser developer tools.
So I checked the HTTP headers.
Open the developer tools, select Network tab, reload the page, select any HTTP request on the left panel, and the HTTP headers will be displayed on the right panel.
And there was an url in it, the next clue!
x-bc-jobs: Why hello there! http://bandcamp.com/treasure2/berners-lee
Visiting this url I got this:
At this point I realized I would need a tool for editing requests. I googled for a Chrome extension and found Advanced REST Client. I added it to Chrome, and I could come up with the required POST request pretty easily.
Yes, the response contained the next clue (yet another url), which led led me to an image of some code.
I have to admit that I was too lazy to solve this properly. I knew it would lead me to the next url, and based on the previous experiences, I assumed that it started with http://bandcamp.com/. I was working on this for a while, but in the end, I managed to get right url. Which led to the next mystery:
In the bottom of this page the text was:
.e .m .a~.i .l, .y .o~.u>.r, .c~.o~.v .e .r, .l+.e~.t .t .e~.r, .a .n .d, .r~.e+.s~.u .m~.e .t+.o
It took some time until I found that out what I saw was CSS selectors. So I copy-paste-d this text into the browser’s CSS as a new style rule.
Open the developer tools, select Elements tab, select Tyles tab on the right. With the plus icon you can add new style rule.
I set the background-color to red, thus I all I had to do was to collate the letters marked in red.
What a pity, they don’t have tester positions open…