Programmatically Creating a CodePen

Background

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

Latest progress:

If you follow the link to the CodePen above you’ll see that I can run the sample HTML form to create the pen just fine. I can’t seem to make that work with a JavaScript Fetch request.

 

CodePen.io Won’t Allow Python Files – Use Glitch.com

I’ve started experimenting with Brython, the project that allows you to use Python code in your browser. The first problem I’ve hit is that CodePen.io doesn’t let you edit Python files in projects.

We need an online coding environment for the Manchester CoderDojo so I’ve switched to Glitch. That works just fine. See: https://glitch.com/edit/#!/mcr-coderdojo-jul2018

Brython: Python for Scripting Webpages

I’ve just discovered Brython a project that let me script webpages using Python instead of JavaScript.

Getting started is really easy:

  1. Import the brython.js library
  2. Add an onload handler to your <body> tag to boot Brython
  3. Write your code inside <script type=”text\python”> tags

Here’s how to use the translate function code from my previous post.

Note that the translation won’t work unless you set up your own account key on the Google Translate API. Drop me a line if you’d like an IP white-listed.

I’m sure there will be gotchas using Brython. I will spend some time investigating further.

Google Translate Whispers Game – Calling the API

Objective

For the next Manchester CoderDojo #3 son and I plan to run a HTML/CSS/JavaScript sessions for the attendees to build their own game. The game idea is to use multiple iterations against the Google Translate API to mangle an English phrase and see whether the players can guess what it was. As this is aimed at notice coders we’d like it to be:

  1. Friction-free to get started – no installing stuff
  2. As little boiler-plate typing as possible – fill in the blanks and tweak rather than staring on a blank page and typing

Starting Point

We know what we’re going to use for the web page stuff:

  1. Hosting the web pages we’ll use CodePen – simple interface and easy sharing
  2. 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

What Next?

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:

  1. 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
  2. Put a reminder in my calendar to turn off the API once the dojo is over

Implementing the Library Function

Blocking Network Calls

Modern JavaScript is all about asynchronous event-based programming. While this is great for building responsive user interfaces it is a terrible model for new coders. It’s just too conceptually difficult. I want the 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.

The Code

Here’s the full code for the function:

Deploying Into CodePen

The final step it to load this code into a CodePen.io pen. This requires clicking on the settings cog of the JavaScript panel and adding in the file as an external resource. To host the resource from GitHub I’ll use the RawGit CDN Service.

You can see the CodePen for yourself here: https://codepen.io/davepottssoftware/pen/dKNXaK

Coding HTML and CSS at the Manchester CoderDojo

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.

Azure CosmosDB is Too Expensive for Experimenting. Alternative: MongoDB Atlas

Background

Recently I’ve been experimenting with Azure Functions, and I’ve got to the point where I wanted to play with Functions interacting with a storage layer. Azure CosmosDB was the obvious choice. I went through the process of setting up a database and turning all the performance dials down to their minimum settings. Nonetheless, after four days playing with my experimental DB I realised that it was going to cost me more than £20 (UK) per month to keep my toy DB running. I needed an alternative.

MongoDB Atlas

MongoDB Atlas (https://www.mongodb.com/cloud/atlas) is the hosted DB service from the people behind MongoDB. For my purposes it is attractive as it provides a free tier for up to 500MB of storage (https://www.mongodb.com/cloud/atlas/pricing).

It set up an account and downloaded the Compass DB management tool to work with the data. One snag I ran into was that if you had a password with special characters in it then this needed to be URI encoded before entering into the Compass login screen. This held me up for a good couple of hours as the error message back from Compass was the cryptic, “Missing delimiting slash between hosts and options”.

Finally I had my database running and had entered some test data:

2018-05-04 08_22_47-MongoDB Compass Community - sleepsuntil-shard-00-00-vyqwg.mongodb.net_27017_slee

Connecting Azure Functions to MongoDB Atlas

I pulled my connection string information over from Atlas and stored it in the application keys (See my previous post on storing API keys for Azure Functions).

Now I needed to open up the Atlas firewall to allow inbound connections from Azure. This is non-trival since Azure will allocate an outbound IP from Functions from any of the range of IP addresses for their whole data centre. See the Microsoft article explaining outbound IP addresses. I’m hosting in “UK West” and at the time of writing the data centre had 24 different IP ranges. Given the fact that I only have toy data in my DB I decided to allow access from all IPs. If you have a real world example you will need to implement some process to lock this down some more.

With this setup complete I now have some working code, see below, to show Azure Functions connecting to MongoDB Atlas…and it is free!

module.exports = function (context, req) {
    context.log("Starting Atlas example");
    const mongoClient = require("mongodb").MongoClient;

    function opendb() {
        const url = process.env["atlasurl"];
        context.log("Attempting to connect"); 
        const db_promise =  mongoClient.connect(url);
        return db_promise;
    }

    function readdata(db) {
        context.log("Accessing sleepsuntil");
        let dbo = db.db("sleepsuntil");
        context.log("Got DBO " + dbo);
        let query = { key: "example1" };
        context.log("Starting query");
        let results = dbo.collection("testing").findOne(query);
        context.log("Got results");
        return results;
    }

    opendb()
        .then((db) => {
            context.log("Return from open was: " + db);
            return readdata(db);
        })
        .then((results) => {
            context.log("Read: " + JSON.stringify(results));
            context.res.body = `
            <table>
            <tr><td>_id<td>${results._id}</tr>
            <tr><td>key<td>${results.key}</tr>
            <tr><td>value<td>${results.value}</tr>
            </table>`;
            context.res.headers = { "Content-Type": "text/html" };

            context.done();
        })
        .catch((msg) => {
            context.log("Error caught: " + msg);
            context.done();
        });
};

Managing Azure Functions API Keys

Context

I’ve been working on example code to use the JavaScript MongoDB driver to work with the Azure Cosmos DB. To connect to the DB I’ve had to manage my DB API keys – the secrets that allow only me to get at my data. Here’s how to do that in Azure Functions.

Azure Functions Environment Variables

The simplest way to store API keys for use in Azure functions is to write them to the environment variables using the Portal web interface and then read in the environment variable as the script runs.

Setting Environment Variables

To set an environment variable open up the Azure Portal, navigate to your Function app and click the “Applications Settings” link.

2018-04-30 06_38_43-sleepsuntil - Microsoft Azure

Once you open applications settings tile, go down to the “Applications settings” area and click the plus sign to add a new setting. Give the new setting the key “example” and the value anything you like. You then must scroll back to the top of the page and click “Save”.

In your JavaScript function you read the application setting value from the process.env array.

Here is some code to show you the value that you just set.

module.exports = function (context, req) {
    context.res.body = process.env["example"];

    context.done();
};

API Keys From Applications Settings

Now we have a simple way to look after API keys: set the value in an application setting and read into our code using process.env. My code to connect to my Azure CosmosDB is something like this:

let url = 
  `mongodb://${process.env["cosmosdb_name"]}:${process.env["primary_master_key"]}@${process.env["cosmosdb_name"]}.documents.azure.com:10255/mean-dev?ssl=true&sslverifycertificate=false`;