I’m helping https://twitter.com/mickfuzz with https://github.com/webgameclubs/edlab-gamemakers-club . I’m trying to find a way to create https://codepen.io/ environments automatically from the GitHub repo.
How Can I Create a New Pen Using Code?
There is an API documented here: https://blog.codepen.io/documentation/api/prefill/
I’d like to test it. Can I do that on CodePen itself? Here’s a work in progress: https://codepen.io/davepottssoftware/pen/XBvLjW?editors=0011
The way that CodePen responds to a call to its API is to send an HTTP 302 redirect to load a new Pen with the values set up as per the API parameters. It seems to use the “codepen_session” cookie to then know what details to load in the resulting Pen. This new Pen is not saved at this point. It needs user interaction to be able to save the resulting Pen.
Hypothesis for How To Create Pens From GitHub
I’m going to try to create a button in the readme.md file shown on GitHub that will take the contents of the files in the repository folder and create a new CodePen Pen from them.
- Friction-free to get started – no installing stuff
- As little boiler-plate typing as possible – fill in the blanks and tweak rather than staring on a blank page and typing
We know what we’re going to use for the web page stuff:
- Hosting the web pages we’ll use CodePen – simple interface and easy sharing
- Writing HTML and CSS we’ll use the editor from HTML CheatSheets as a way to get started editing snippets of web code without needing so much typing
The next thing to sort out is how to make the basic call to the Google Translate API. We need something that hides the complexity of the API and leaves an interface something like:
translateFromTo("This original text", "english", "french");
Calling the Google Translate API
Google needs a few details to be covered off before you can actually use their translation API.
Google Cloud Account and API Key
You can’t just call the translate end point. You need to have a Google Cloud account set up and create an API key to access the translation service. You end up being on the hook for usage of the API key. The problem from the CoderDojo perspective is that all the attendees are going to need know the key, even if buried in a library, to be able to make translations. Here’s the plan:
- Lock the API usage down to specific IP addresses. All attendees are likely to be using the site wifi so presenting to Google as the same IP address. These are settings Google Cloud Console lets you change
- Put a reminder in my calendar to turn off the API once the dojo is over
Implementing the Library Function
Blocking Network Calls
translateFromTo() function to block the program execution until it synchronously returns a value. For synchronous HTTP requests out of the browser you need to turn to the old-school XMLHttpRequest and turn off the async flag when constructing a request with open().
Using the Google API Key
The other wrinkle to be aware of when implementing code that calls Google APIs is to pick the correct method for authenticating to the API service. The Google documentation tacitly makes the assumption that you’ll be using the OAuth service to get your users to authenticate through to Google before being allowed to use the API. This is not what we want for the CoderDojo. Rather, as described above, we want to use the simple API key. The use of the API key involves adding a
key= parameter to the request URL. The Google documentation for how to use the API in this mode is here.
Here’s the full code for the function:
Deploying Into CodePen
You can see the CodePen for yourself here: https://codepen.io/davepottssoftware/pen/dKNXaK
I’m starting to prepare what we’re going to do at the June 2018 Manchester CoderDojo. It’s going to be something web-based as #3 son has started enjoying playing around with Mozilla Thimble tool. The question is what tools can we use.
It is a perennial problem to find tools that will help the CoderDojo attendees (typically in the 10-14 age range) work on whatever project we are doing that month. We get a wide collection of random PCs and operating systems showing up at the dojo. Something web-based definitely saves loads of headaches setting things up. This month I’m going to have a go using HTML Editor and HTML Cheatsheet. They are simple tools to explore and experiment with HTML and CSS. I think they have the right level of simplicity and interactivity.
Anyone with experience of using these, or other HTML/CSS tools, for kids’ starter projects please drop me a line.
It was the last Manchester CoderDojo of 2017 this Sunday. Continuing the tradition from last year we got the whole event together to make a Christmas video. You can see the results here: https://youtu.be/A3eQ8ROCevA