GitLab Other Product Walkthroughs, 8 May 2020

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Glitch Walkthrough

Description

A quick walkthrough of glitch.com

A

Hey everyone: my name is eric. I'm a product director here at gitlab today. I thought I would do a quick walkthrough from a service that I found out about a few weeks back called glitch and glitch is a service that is kind of a web ide, slash code, sandbox, slash, roughly uh instant, live preview type functionality with respect to your application, and so I'm going to go ahead and share my screen and we'll walk through this.

A

I've done a little bit of ground work here, but not a ton. um So you'll probably see me fumble through a few things, but that's okay. Let's go ahead and share my screen.

A

All right, so I'm going to primarily be working out of the left side here and then use the right side to look at docs and other things. So the first thing is I've already connected it to my github account.

A

You can't connect it to a get lab account. Unfortunately, and before I had made these two projects, there was a little button that said, make your first project, so I went and did that you can do the same thing here if you click this new project button and I've done both a hello express and hello webpage. The first thing to note is that um this product only supports node apps. So if you're using any other framework, it's not going to work for you, but that's okay.

A

So I'm just going to go ahead and make a new project. So I'll click this and what it's going to do is essentially.

A

Fork this project that already exists- and it gives it a randomized name- and I notice that when I want to, if I want to rename this project- uh which I do here, it looks like.

A

Obviously there are unique names which makes sense so we'll just go ahead and name this something new um remixing is their their way of saying: hey fork this thing. So if you stumble across another project on glitch, you can click. This button make a copy of it yourselves.

A

They do have private, private and public projects um looks like there's some theme options. I'll click on those in the second theme option: okay, dark mode, um a toggle to refresh the app on changes, toggle frapping text and keyboard shortcuts, okay cool.

A

um So these simple projects set you up with a readme which is pretty intuitive. It just tells you what the different files in the project are going to do so, for example, this is just a simple web page, so we're looking at index.html to make changes.

A

This is a markdown toggle. We have similar things inside of of gitlab. This is a kind of a cool button where you click this button. It gives you some cool confetti and then format your file, I'm assuming based off of extension.

A

That's pretty neat so going back to to markdown. I think this is really where the power of glitch comes in is when you use this button here so um from what I can tell any change you make just gets automatically deployed to your actual application. So if I went into um well first off, let's let's view what our website looks like so there's two options: you can view in a new window or you can view over here. Next to your code, you probably notice that this is. This is basically already deployed and running live.

A

Which is pretty neat, but I'm going to make a change so I'll, say hi there from gitlab.

A

And what you can see is it changed over here and then, if we go back here, I didn't even refresh this it just it just went and updated that and then, since this is publicly served if I uh opened up a different browser where I'm not authenticated or anything like that like safari, which I never used, I went to that url you'll see that that change was already made there as well, so pretty cool stuff.

A

Looks like you can actually change the url here, which is which is neat. Let's see what this just hides it it's very similar functionality in gitlab in our web ide. We have a live preview function for javascript powered by code, sandbox that comes out from the right panel of the web, ide very similar to this.

A

This is, I noticed this earlier. This is interesting. You can kind of like nest this, which is not a great experience um but okay, so that looks that all looks good uh makes sense. What we're trying to do.

A

um I wanted to do a few other things just to see how they worked. um The first thing I wanted to do was make a new project from an import. Oh there's, one other thing that I think is is pretty pretty cool here so um at the bottom of this, so you have app status, so you, you also get some sort of monitoring.

A

Type capabilities, looks like we're using four percent of our memory, one percent of our disk and zero percent of our usage, because no one's going to this website um always on is inactive off.

A

Glitch always on, let's see what this actually does.

A

Okay, so it looks like it shuts your project down after five minutes.

A

Yeah, that's what I wanted. I really wanted the doc. This is a.

A

A

A

Oh, I can't I can't figure that out, and I also can't toggle anything here so we'll just go ahead and move on. If I click on tools- and this is this- is somewhat buried- I'm just going to go ahead and close this. If I click on tools, this is somewhat buried, but it's pretty interesting and you click on rewind. You actually get this visual, almost version control. Like uh experience so remember, I just made a simple change to say: hi there from gitlab um this line, delineates that this is now.

A

If I click back here, you can see that it highlights a diff and then, if I click this rewind project button, what it'll actually do is essentially like roll back the history of the of the application.

A

So now I uh have brought it back to where it was and see if it added another yeah, so it added another um version control point: um it's not clear to me like when this does this, um which, let's see if the docs.

A

A

Yeah, it doesn't say when it actually saves a checkpoint.

A

So you're not gonna have as much control over if you you know, commit and to get somewhere, but um I'd imagine these are snapshots somehow on time, docs don't say or if they do say. uh Please leave a comment and let me know where they are, but this is kind of cool to see every checkpoint or git commit that has been made along with who made it and what changes are made. So I'm going to import a project from github in a second and we can view that. But this is this is cool.

A

This is a cool way to view to view history.

A

uh Okay, let's go ahead and cancel this see what other tools we have. We have some logs.

A

A

A

We have a terminal, looks.

A

A

Okay, cool, I'm gonna close this.

A

And then there's some sharing options. Oh here's live app code project page and I can invite others to edit. Oh this is. This is actually interesting. Is that this this project is public.

A

um This dot env file uh is not public by default. So if someone who came across my project and were looking was looking at the code of this project, they would not be able to see this this file for the documentation I haven't tested this, but if so so the only way you can see this is, if you are a contributor on the project which I thought was a interesting way to do secrets, let's go ahead and start a new project. Then this is interesting back to glitch. It seems like I'm already english but technicality.

A

um I do like this resume coding button. It kind of gives you the sense that you can go straight back into whatever you're doing I'm assuming it stores the state of the last file you were on in the ide like experience. We could do something similar in gitlab.

A

If we go back to glitch, I'm going to do new project and then I'm going to import from github and then I'm going to I just googled for a sample node to do app.

A

And I found this one: let's go ahead and pull this in and see what that looks. Like the docs also said, you can pull in private projects if you authenticate with uh with github we're sorry something went wrong, please try again or try refreshing the editor.

A

A

I don't know what went wrong.

A

Maybe the logs will tell.

A

A

A

A

Interesting, it's kind of fun to play.

A

A

A

No yeah didn't read the instructions all.

A

A

Okay, this one requires mongodb, I don't have a mongodb instance set up, maybe there's a different one. It's not stateful node to do.

A

That yeah, let's try this.

A

One this one looks like it's using doctor, we'll see what happens.

A

A

I got this air again, which is really frustrating.

A

I mean there's nothing to configure during the import process, so it's hard to think you mess something up, but I suppose it's possible.

A

A

A

I think a sports.

A

A

Well, the import seems to kind of work.

A

I do get some error randomly.

A

um I kind of reached the end of my personal node knowledge, but this is what glitches and um yeah should work. I think there's an interesting lesson for us uh with respect to um our web ide and some of the things that our website e could potentially do with respect to to preview. I really do like go back to a project that actually works.

A

um I really do like the live preview like stuff the instant deployment stuff.

A

Seems very interesting all right thanks, bye.