A CS50 Sandbox for Students and Teachers

David J. Malan

CS50
4 min readJul 17, 2018

Since 2015 has CS50 equipped students with CS50 IDE, a web-based programming environment built atop Cloud9, an open-source integrated development environment (soon to be) hosted on Amazon Web Services. Students of CS50 prior to 2015 might recall its predecessors.

Among CS50 IDE’s features are a file browser, text editor, and, most importantly, terminal window, which provides students with command-line access to an underlying container running Ubuntu, a distribution of Linux:

Not only can students share their IDE as needed with classmates and teachers, they can even collaborate and chat in real time, a la Google Docs. Moreover, thanks to CS50’s own Dan Armendariz (now at Amazon) and Kareem Zidane, CS50 IDE also includes a graphical debugger, debug50, via which students can step through (and find bugs in!) their code:

CS50 IDE also includes other CS50-specific tools, among them check50, render50, style50, submit50, and more. All told, CS50 IDE is simple but powerful. Try it out at cs50.io after signing up for a free edx.org account!

CS50 Sandbox

CS50’s newest tool, CS50 Sandbox, is simpler, though, by design, it doesn’t do as much. Built atop Next XYZ’s platform, which itself is built atop Google Cloud Platform, CS50 Sandbox allows students and teachers to create temporary programming environments quickly, without even logging in, and share copies (aka clones) of those environments with others.

For instance, a teacher might begin a class by asking students to visit sandbox.cs50.io and start a sandbox for C with a terminal window and text editor, with a file called hello.c:

Every student in the class will then have their own copy of an otherwise identical environment, uniquely identified in its URL with a UUID, a 128-bit pseudorandom value (e.g., a031ccd9-ebc1-402b-ab10-241554f5198e):

Class can begin straight away with everyone on the same page!

Alternatively, a teacher could provide students with a pre-configured link like https://sandbox.cs50.io/?file=hello.c&window=editor&window=terminal (perhaps shortened via a URL shortener) that, when visited, would yield the same.

A teacher could also provide students with starter code, as by creating a sandbox, editing one or more files (e.g., hello.c), clicking Clone at top-right, and sharing with students the short URL that appears (or the longer URL in their own browser’s address bar):

Following that link will lead each student to a copy (i.e., clone) of that sandbox, uniquely identified by its own UUID.

Sandboxes can even have embedded browsers, as might be helpful for teaching HTML, CSS, and/or JavaScript:

Sandboxes can also have embedded X windows, as might be helpful for implementing GUIs, as with Java or Python:

Best if those GUIs aren’t animated (a la games), though, since the underlying X servers are (likely far away) in the cloud, which means there’s necessarily some latency. Windows and buttons and menus and the like, though, work well.

The sandboxes themselves are ephemeral, intended to be used only once (e.g., during class). Indeed, they’re cookie-based and thus lost when cookies are cleared or expired. But students can download any files they edit via the folder icon at top-left. For true persistence (and, with it, authentication), though, they can instead use CS50 IDE.

But for quick demos and exercises, CS50 Sandbox is now an option as well, thanks to CS50’s friends at Next XYZ and Google! Indeed, students and teachers alike are welcome to start using at sandbox.cs50.io.

Here’s how it all began!

--

--

CS50

Harvard University’s introduction to the intellectual enterprises of computer science and the art of programming.