Like a YouTube video, the entire pen can be embedded into another web page. The web app works within that embedded player and, if you subscribe to CodePen's Pro level as ProgrammableWeb tried, all of the interactivity of seeing what happens when you play with the code can happen in place without leaving the web page that the pen is embedded on. We thought that this made it very suitable for ProgrammableWeb’s developer tutorials.
So, as you can imagine, we can develop the code in a JSBin bin, and then embed the bin right on one of our pages. Developers can come, read the tutorial, play with the code, copy the code to their clipboards, or press JSBin's "Save" button to clone our bin into a bin of their own. Like the facilities of many API developer portals that allow for experimenting with code without leaving the portal, we think of these as "playgrounds."
Hiding API Keys For Public Code Samples
Over the years, one downside we’ve seen to publicly shared source code that demonstrates the consumption of an API (for example, a code sample that an API provider might include in its API documentation) is how that source code must deal with API keys. API keys are often required to access an API and API providers issue them on a per developer or per application basis. Unlike your house or car keys, API keys by themselves should not be considered an API security mechanism. But they’re a great way for API providers to, within their dashboards, tie API usage to certain developers or applications.
When sharing source code publicly, it’s a really bad idea to leave any API keys hard-coded into that source code. When you do that, you’re basically sharing something that’s confidential to you with the world. You really don’t want other developers copying and pasting your key into their code.
One way some developers handle this is they chop their API key out of the code they're sharing, and its place, they substitute a placeholder. Maybe something that says
<PUT YOUR API KEY HERE>.
This way, no matter who comes and uses the pen, s/he has to BYOAK (Bring Your Own API Key) and the same pen works for everyone without modification.
So, while it was one thing for us here at ProgrammableWeb to write about it as we did, it’s another to actually do it. After all, it really didn't take a lot of work. So, what I’ve done is I’ve built a bin whose only purpose in life is to demonstrate this concept. It doesn’t actually access an API. It’s meant to work in such a way that you can just cut and paste all of it into your own code.
Yes, it’s not particularly elegant. Like I said earlier, it’s just minimally viable to get you started. We realize there are different ways to accomplish the same thing. But minimally, this code has buttons to prompt the user for an API key, to display the API key on the web page (if one has been stored in HTML5 storage), to wipe the display of the API key (but not necessarily from storage), and to clear the HTML5 storage of the API key. You will see this code appear in many of our forthcoming tutorials.