GitLab Product Walk-Throughs - All, 28 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create:Editor Walk Through - January 2020

Description

This is a walk through of the Create:Editor features including the Web IDE and Snippets.

A

Hi, my name is KY Armstrong I'm, the PM for the editor group in the great stage of the DevOps life cycle, I get lab and I wanted to do. A quick walkthrough of some of the features and editor kind of show you what's going on in the group and what we've gotten so I've got my screen up here. I've got a an empty terminal window and I've already created a project over here. That's got some files in it, and so I want to use this as a base start.

A

The editor group encompasses two primary categories: the first one of those is the web IDE. So we'll talk about that show some of that off and then the other one is snippets. So if its existing both projects and personal namespace, so we'll talk about what's going on there right now, I'll give this a shot. So if you take a look at this, I've got a project here. It's just a base.

A

One page food chef, template I pulled from somewhere else, I've added a few things to it and check a few things locally ahead of time, just to make sure they were set up properly for some features here, but everything I'm, showing you fairly easy to do easy to set up. So the first thing we'll do is we're gonna open this project in the web. Ide so got the project. Maybe we need to make some changes.

A

Maybe we've got some simple edits to make me want to do something else, so we'll open it in the web IDE. The log ID is really easy to navigate. You can see. I can I've got full access to the file tree here. I can open multiple files flip back and forth between these all the tabs up here and do anything you know like that that you might want to edit, and so with this one in particular. Maybe we just want to make some quick changes and just kind of change. The title here.

A

Up in the head, maybe we'll just say this is the create editor group Timmo project main space is corporately and then, let's give that takes care of the the header of the page, and we were to load that you know we might want to make a change on the page and one of the things that the web ID has a feature called live preview. My 3d works for most JavaScript based websites. It even works, for you know, playing HTML CSS JavaScript, which this is and so over.

A

On the right hand, side you'll, see this live preview option if I click that I'm gonna go ahead and make this whole window bigger terminal. Are the code area still stays here, and then we get this sort of like mini browser window, that popped up over here and there's generally something wrong over here. It should be loading kind of a complete site. I opened an issue with my engineers and we'll go check that out, but this is this is a live preview. It's based on code sandbox and it's actually being rendered in real time.

A

So what's fun about this is if I were to go and kind of find the title on the page. Maybe oh, maybe I'll update this as well, while we're here and I'll say this is the create editor group.

A

Awesome and what you can see is while I was typing. All of that was changing in real time over here. This is a really powerful feature for editing these sites and seeing what's going on in real time. So the next thing we'll do is now you made those changes. We should go ahead and commit those and so we'll commit those.

A

The editor automatically stages. Those changes for us, which is great and then I'm, just gonna, leave the default commit message in there. You could update the commit message. However, you want I'm gonna, leave the default branching as well, but I'm gonna create a new branch and starting a large request. This is a pretty common workflow inside of the web a year. You know most editing to create a new merge request, and so, as soon as that, merge request is created.

A

We end up in the merge request, screen and we'll just say: title changes to demo project. Alright, when I in a write, a description we'll just do some title changes: I've assigned this to myself: I'm, not gonna, give them a milestone, a label or anything like that, delete the source branch squash commits and we'll go ahead and open this metric last.

A

You know now that I've open this merge request. There's another entry point here into the web IDE. So we might see this in a second, but you know: I was talking earlier with someone I think you know. One of the things in this demo project is: we've changed the primary color that we want to use, and so you know someone might come and do this they might leave feedback or there might be another way that they communicate that with you or we talked about this earlier.

A

Snippets are another part of the other group and so snippets existent projects, and so let's go check these projects that that's and I see that there's one called a new primary color and so looks like this was some documentation. Actually I wrote some documentation that might exist. It says hey. This is in this file. This is a new primary color that we're using, which is which is nice, so you could I could easily share this with someone.

A

So if I go back to kind of merge request, it's open and I say yeah tag myself and say.

A

You can find this in the snippet here.

A

Some comment that it'll link out to that snippet I can now open that a new tab we'll see this here and so what's nice about the snippets is you can tried small, quick examples of code? You could provide kind of standard things that you're using all the time, but in this case we've given the primary color that needs to be updated. It looks like this kind of matches the structure, the files that we're using too so I'm gonna copy that and because we're using we're doing it inside this mode.

A

You can choose I'm gonna open the web ID in the context of this large request, and so what this did is it opened my branch, but also automatically open in the review tab. So you can see the changes that we made previously when we were that's, you were able to see the diff between those two which is really nice, but I'm gonna go here and go open that variables I'm going to take out a review and go into edit mode, and so we just snip.

A

It says this is the new primary color we'll go ahead and copy that we should I replace this entire line with a new one, we'll commit that and we will commit it to the branch. It automatically knew that we were in this branch because we opened it from the merge request.

A

So that's nice makes it easy to go back and make continuous changes to what you're working on we'll go ahead and commit that, and now we've committed that we will go back into our merge request here and so now, if we look at this, we've got two changes. Those are the changes that we made. We've got this other change that we made.

A

We've got two commits in an overview which is great, so I'm actually going to go ahead and merge this now, just so that that's all up to date and then we'll go back check it over here I'll see that it was updated just now based on wedging, my master patch in and one last thing I'm gonna do is I'm gonna pull this down grab the latest copy, this locally perfect and then we're gonna, compile that CSS. Okay.

A

Perfect and then, if we load it up here, so this is the old primary color. It's this pink color that we were using we'll just make sure those changes went through. So now we've got to create edit a group, whatever I use awesome and it's in blue. So you can see that all of those changes went through.

A

So so it's just a quick overview of some of the features in editor and how you might be using them or some other things that you can do we'll go back through this every so often as we update features, fix and bugs and reduce. Some of you think you've got some great stuff coming for snippets, so keep an eye out for those things. And if you have any questions you can find us in the get lab issue. Tracker tag, improve editor tag me I'm at saikai, pH, IKEA and right.