Hello, world.

This is CS 50 on Twitch.

My name is Colton Ogden.

I'm today joined by these nice and, uh outside.

What are we?

What are we talking about today?

So Colton's invited me here today to talk about a city sandbox, which is one of the city's Web based applications.

And it compliments what's known a CS 50 i d e.

With which many folks are probably familiar, which is a more feature full Web based I.

D or integrated development environment.

Nice.

And I mean traditionally in the past, from my memory, we had to do things like install VM where even before that we have seen 50 appliance.

Yeah, back in the day.

So really, back in the day when I first started teaching CS 50 and even took CS 50 many years ago, we would all have user names and passwords on one of Harvard's own central servers, and they serve a rain, UNIX or clinics or some similar operating systems.

And even before wait 20 years ago and what everyone would do in the class is connected via telnet, which is really old school program or protocol or more recently, by sshh secure, shelled by encryption to Harvard Server, where everyone had a home directory like a folder where they could put files and they had access to compilers like GCC, your clang and G B and other such tools.

But fast forward to more recent years.

We actually moved off of that environment to a virtual machine, as you say, using BM wear or parallels or other software where students started running on their own Macs or PCs.

Ah, virtual machine.

So their own copy of Lennox and we called it the CS of the appliance.

That was a bit heavy weights.

And frankly, it was a bit knowing to support for students because if they change their operating system or upgraded something, the thing would often break.

And so we eventually transition to a cloud based, integrated development environment, thanks to our friends at Cloud nine now and Amazon.

But that is a complete I D with the bugger built in and persistence and any number of other feet.

Cher's and so it seems that the sandbox, which will look at today, do as well as a a counterpart tool.

It's really about quick and dirty programming environments when you just want a demo, Something you want to just try out an idea.

You don't wanna have to organize your files and save things and use your your day to day environment.

You could just spawned one up and throw it away after.

And the beautiful thing, too.

And I think one of the original sort of motivations for the appliance is that everybody's in a consistent environment that set up the same way.

Indeed, this has been very important because it's just no fun, especially for new programmers to figure out.

Why is my Mac not working?

Why is my PC not working like the instructors is?

And so we instead try to just normalize everyone's environment by using these days of a browser alone.

Awesome.

Um, City were actually also for the very first time, looking at all three platforms extreme, too extreme to twitch normally.

And we've been looking at Twitter chat exclusively until now.

But we're also looking at YouTube and Facebook chat today, so if you wantto toss questions in both of those chats, will try and pluck them off.

Definitely jar attention to them if we miss them, but I say we wait, cut straight to your computer here and we can talk about what the sandbox and start by way of a demo.

Let's do that.

So everyone's welcome to play along at home.

In fact, we can type into the chat here sandbox dot CS 50 dot io Sandbox is also a term of art.

You might have grown up with one outside, like, literally a box of sand that you can play in and build things in a sandbox.

And computer science is typically some kind of environment where you can only do certain things and you are sandbox from that is protected from other users, and that's in the education system.

The sandbox programming environment that you can spawn and create for yourself is just for you, and you have administrative or root privileges you install.

Software removes offer, but it's just your own until we then throw it away Eventually.

No one else theoretically can access that unless you proactively allow them to do so.

So it's a nice, secure environment in theory for programs, I said this is great because it's just right in the Web browser eye on any computer, a chromebook, even something with minimal resources.

could go in here and using someone else's server online, tap into some pre configured programming and back.

Exactly.

And we have a support now for Bunches of languages, and the very first thing to do is to go to that your l sandbox dot CS 50.

Don't I owe you?

May ultimately be prompted the log in via get, huh?

But most everyone on this stream probably has a get hub dot com account.

If you don't sign up for one for free at get hub dot com, we could pay set in his wealth.

And that account just allows you to use the same tool, even though it itself doesn't use Get up.

We do use their authentication mechanism simply to ensure that we know whose sandbox belongs to who.

So here we have the main menu, and there's really very few questions asked of you initially.

Let me go ahead and just click on these environments, and you can actually see the languages and the tools that are available in the system.

So most any language you could think of these days can you program in and CS 50 sandbox Well, you see and python html Java script and so forth Sequel Light.

But there's other languages as well.

And if there's something you'd like to use and you don't see on this list, just email us insisted Men start CS 50.

Sorry, Assistant mints, AK, CS 50 The Harvard Review And we're happy to figure out if we can install it for you as well.

And you were even telling me.

I mean, we update this pretty consistently.

We just recently added a couple new environments in three.

Hot off the press as of this morning is now support for Erlanger.

Go Haskell and Pro Law by request of one of our friends are in Amsterdam.

Who's University uses those languages in their courses as well.

I'm gonna keep bugging you, but no closer.

No, but I only asked me for closure support about an hour.

So So when you get here on the main menu, the default tab is called Create Sandbox because presumably that's the default behavior that you want, and we pre check what we presume are the most common options in this Web programming environment.

You probably want a terminal window, and in fact you have to have a terminal window do anything useful with it, and we presume that you also want a text editor with tabs you can actually create or innit files.

What's this thing called an ex window?

Yes.

On Linux or UNIX based systems, you can have a graphical user interfaces or gu Ys, even though you might be more familiar nowadays, with a command line interface to those systems.

X Windows is the software that you can run on such an operating system in order to add graphical support.

Essentially a piece of server software that just sits there waiting and listening for clients to connect to it, so is to display their interfaces.

We can mimic this in the browser.

It's a little slow, and it's good, really, for very slowly interactive programs, buttons and menus, but not for animation.

Not really for games, because you have an entire Internet between you and the servers that are running this environment, you're making network requests.

It makes it.

Send your coat over, and then they have to send you back.

Sort of the visual changes.

Take it up with a lot of bits.

Yeah, um, it looks like we're the cattlemen's asking.

So is this free and better than Cloud9.

It is free and different from Cloud nine.

I would say it is a subset of the features that Cloud nine and Interns is with.

The idea provides, that is, by design.

Among our goals was to create an alternative to CS 50 idea that students wouldn't use day today for their problem sets.

But instead, if they want to just try out an idea, they want to do a demonstration.

They want to share their code in an interactive way with someone else and in the case here on campus at Harvard and Yale and elsewhere.

We wanted to make it easier for our teaching fellows or teaching assistants who helped me and pulled him with the course to be able to just quickly do demonstrations in class and do it in a uniform environment.

If you use CS 50 I D.

Or any idea you're probably used to creating projects and folders, you probably want to keep them organized in the file, browser and such, and that's fine.

But that's a lot for new programmers.

We really want to get the tool out of the way and enable students to focus on the code and the compiler and eventually the bugger.

But here we have really the first of those two, and I mean, we've been used this on stream a couple times where we want to just really fast get someone's code and just tweak it a little bit or test something out.

Just yesterday in the code reviews, they have asked this way for me to pull up a programming environment, Mistress, do you see in the sandbox?

And a couple people, by the way, are saying that they're impressed with hair dressing up.

So have ignite says that you dress up like a real professional, for sure.

But it's really just a coincidence, because lately in the mornings have been teaching a course at Harvard Business School, which is for the MBA students there for Rich.

I dress up a little more fancy, take the fun out of it.

I mean, I dressed up just recalled, All right, why don't we Why don't we fire one up?

I'm curious to see what they look like if you'd like to play along at home and you're at sandbox, etc.

Etc.

Etc dot io literally.

The first thing you could do is hit enter or click create to get the default settings.

And what you'll see is after a few seconds, is a pretty simple environment than indeed, that's by design.

We wanted to get rid of his much visual clutter is possible to focus on Lee on the problem at hand, which is presumably commands and code right?

And indeed, that's all you see at the bottom half of the screen.

Here you see a familiar terminal window.

The gooey or user interface looks a little different in sandbox, and it doesn't cloud nine because these were different tools.

But same idea.

The file browser and code editor or a little different, but hopefully pretty straightforward.

I have no files initially, so if I click on the folder icon, there's nothing there.

But if I click the plus icon, I get a little dialog window where I can create or upload a file.

If you've already got some code, you can drag and drop it or click the upload button.

Or you could just type out a file like hello dot see if I want to write a program and see, but it doesn't have to be proceed.

Could be hello dot pie or hello dot Go or any number of other languages as well.

Um, you be f w t y z three.

I'm not sure how to actually pronounce that.

I'm saying that it's little bit like if you're watching on Twitch, we are streaming to youtube dot com slash CS 50 and also on Facebook, where you can get a lower bit rate there and more watchable stream and above ignite actually asked an interesting question.

How is this different from CS 50 labs?

We're gonna get there today.

CS 50 laps is a super set of the sandbox.

It essentially is a environment for proof, presenting lessons, tutorials on programming in bedding, CS 50 sandbox is part of it, but adding to it instructions on the left hand side, which you might have seen in sense of x 2019.

We introduce this republic that one and two in the first couple of weeks of the class and then von Dingle.

I'm not sure if you just answer that.

But when did Sandbox become available in CS 50 September of 2000 18?

Nice just a few months ago, So I will say I do like very much how this is laid out the color scheme.

Somebody mentioned that it's dark fame and they're a fan of it.

But having just the editor and the terminal, I think we were just talking about this today.

It's a kind of an ideal minimalist development environment.

Yeah, it is.

And much of the why that you're seeing on the bottom portion of the screen is thanks to our friends at code of all now called Next Op Tech.

We met them just about a year ago and began this collaboration to make this tool available to see 50 students.

So the interactive code window, the file browser and the terminal window eyes provided by next Tech, which is running on top of Google's cloud.

And they're providing a very similar feature that Cloud nine on Amazon provides for scenes with the I D.

Nice.

The truth.

Denise is asking how temper and you might be talking about this, but how temporary is the sandbox we create?

And can we show the link to a created sandbox to somebody else?

Short answer.

Yes, on both accounts.

In fact, if you go back to see us of these main sandboxes, main menu, you can click on the tab called Recent Sandboxes, where you can see the past.

I think we've hard coded into the the past 50 sandboxes that you've created.

We haven't really decided how long we're gonna keep him around.

The design of city sandbox for the tag line here is that these were meant to be temporary.

So more than a day, maybe less than a month, we're going to see what the usage patterns are exactly like, sort of figure this out as we go to really decide what the best use cases for now we're saying temporary, which you should assume is maybe a month, give or take.

But you shouldn't plan long term CS if the idea is meant for long term persistent software.

I do.

I am getting a little bit of a bootstrap vibe from that landing pages that happen to be written in boots.

Well, I'm very good with Booth.

No bootstrap, if you're unfamiliar, is a popular CSS library.

If you want to go to get bootstrap dot com on the streams, it's freely available.

Originated a twitter some time ago, and it just is a nice set of widgets and CSS properties that you can use to make your websites look nice.

Hopefully without having to figure out how you make tabs and nice looking buttons and all about yourself.

It's nicely responsive, so all this will collapse Nice.

Mostly nicely when your browser get small.