Easter Came Early…
How to create hidden content using the SnowShoe Stamp
**This article uses a deprecated version of our front end library that makes pages stampable. Please reference the updated version here, as a good chunk has changed!**
At Snowshoe, we LOVE easter eggs. Over the past few years, we’ve hidden all sorts of fun things throughout our main website. None compare, however, with something we've built over the past few days. Using the SnowShoe Stamp, any web developer can now hide secret functionality — accessible only to people possessing the correct SnowShoe Stamp — on any mobile website.
Once our code is enabled, the website in question functions just like any other site — you can incorporate whatever HTML and CSS your heart (or client) desires. The only difference is that the page now interprets any 5-touch gesture as a stamp interaction.
This is actually a feature request we get really often: clients want to put HTML elements on a “stamp” screen. Until recently, however, the composition of our stamp screen made this impossible. Here’s why: we were using a <canvas> tag as the touch-sensitive element on the page.
<canvas id=”canvas”></canvas>
<script>
canvas=document.getElementById(“canvas”);
canvas.addEventListener(“touchstart”, function(event){ //do something;} );</script>
The problem is that a canvas element can contain no content. You can give it a background image, but thats about it. So if you put an html element between the opening and closing canvas tags:
<canvas>
<div>
Something
</div>
</canvas>
The <div> disappears on rendering. So why were we doing it this way? Because (as best we can tell), when our stamp screen was originally designed, touch events were still a very new phenomenon and the canvas was one of the few HTML5 elements that could recognize them in a reliable way. But this was a long time ago, and thankfully, the interwebs have evolved some fancy new methods to deal with touch events, so we decided it was time to revisit the stamp screen.
Enter Touchy.js . Touchy is an open source javascript library that allows you to very simply and easily handle touch events tied to any element you like, and it gives you the option to listen for any number of “fingers”, and then execute a function with the coordinates of those touches as arguments:
body = document.getElementsByTagName(“body”)[0];
Touchy(body, {// the indexes of this object range from one to five, and indicate how many touches are required to trigger the function
five: function (hand, finger1, finger2, finger3, finger4, finger5){ hand.on(‘start’, function (points) {//Do something with the points
});
}
});
As you can see from the above snippet, we’ve done something really exciting here. We’ve attached a “stamp layer” to the body element of our page. So basically, everything on the page functions normally, but when it detects 5 touches (a stamp!), it executes our special function. Cool!
Now that we had this new functionality implemented, however, we had to come up with something fun to do with it. Given our history of landing page easter eggs, it didn’t take long.
Here’s how we implemented this at http://snowshoestamp.com:
First, we have the necessary code on the homepage:
<script type=”text/javascript” src=”api/js/vendor/touchy.js”></script>
<script type=”text/javascript” src=”api/js/sss.client.js”></script>
<script type=”text/javascript” src=”api/js/sss.util.js”></script>
<script type=”text/javascript” src=”core/js/jquery/jquery.json-2.4.min.js”></script>
<script>
body = document.getElementsByTagName(“body”)[0];
Touchy(body, { five: function (hand, finger1, finger2, finger3, finger4, finger5) { hand.on(‘start’, function (points) {data=[];
for(x in points){data[x] = [points[x][“x”], points[x][“y”]];
}
sss.client.init(“/demo/hidden/”);
sss.client.call(data);
});
}
});
</script>
Its pretty straightforward stuff, we include our client libraries for calling our API, Touchy and jQuery-JSON, then we encode the touch coordinates and pass them to the API client.
The client then calls the callback (‘/demo/hidden/’) with our coordinates. Here’s the Python that lives at /demo/hidden:
from sssapi import Client
@csrf_exempt
def hidden(request):
if not request.POST:
return HttpResponseRedirect(settings.PRODUCTION_URL)
client = Client(app_key=”abcdefg”, app_secret=”hijklmnopqrstuv”)
response = client.call({“data”: request.POST[‘data’]})if response.has_key(‘stamp’):
return render_to_response(“demo/prank-machine.html”,
{}, RequestContext(request, {}))else:
return HttpResponseRedirect(settings.PRODUCTION_URL)
So whats going on here? Well, we import our API client (available for download on our SDK page ), and then we call the api with the data posted from our javascript client. If we don’t find a stamp, we redirect the user back to the homepage. And if we find a stamp? Ahh, the best part: we return prank-machine.html.
But what does prank-machine.html do? If you already have a developer stamp, go to http://snowshoestamp.com on any mobile device, stamp the home screen with your dev stamp, and you will find out. If you don’t have a SnowShoe Dev Stamp, we’ll send you one for FREE.
Obviously, there is more to this than just hiding easter eggs though. We’re working on a way to securely allow any website to offer access to paid content, or just “elite user” content, by distributing stamps. Think newspapers or magazines, access to internal networks, walkthroughs for video games, really anything that you might want to allow only select users to access. That SDK will be available soon, so order a FREE stamp and you’ll be among the first to get notified when its ready.
