GitLab Feature Walkthroughs, 26 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to create a new Handbook page, embed a video, and have a url open in a new tab

Description

Emilie Schario walks through how to execute these Handbook editing tasks. Find other helpful tips at https://about.gitlab.com/handbook/practical-handbook-edits/.

A

All right so I added the recording from last week, thanks so much David for adding some starters there. Why don't we go ahead and dive into those, and then let's save, maybe five minutes at the end, to talk about how we can create a new page for the embedded videos from this so that they can serve as a resource since we're gonna run through creating a new page and embedding new videos say. Maybe someone else will want to do it besides me, but let's go ahead and dive in so.

B

A

Share my screen, I.

C

Just had one-on-one with Monica and Monica is leading our you know: sales communications manager next week kicking off field. Flash first ever get lab newsletter. We want to she's gonna put that into the handbook. So Monica you don't mind I volunteered. This one is like a great place to say all right. What are the steps to create the handbook page for this? Is that all right, let's.

B

Do it yeah I love it yeah cool.

A

So um Monica do you already have in mind where this content should live in the hint? Oh, you do here at location. Oh, this is where you want to link from it. If you want it under like field enablement, oh yeah.

B

That's a good question. um That was something that we talked about as a team this week of like where how to structure our directories so I think like this is what I envision like one of probably multiple field, comms related hands book pages, so I'm wondering I'm thinking it probably makes sense to add a new directory for like field communications or something similar and add this page under that. Okay,.

C

Imma bars, Emily or just under sales right, so yeah.

A

I was gonna suggest, like there's, no reason not to put things at a higher level. They don't need to mimic the org chart per se, so I'll post the session for you. Would you prefer it under sales, which is probably what I'd recommend cuz you're gonna touch all of sales versus being under feel that yeah.

B

I think that makes sense. Okay, I see the logic there sure.

A

The way I like to start some of these bigger problem, bigger projects in the handbook is actually by creating an issue in the handbook project specific to this. So we're not gonna duplicate the whole thing. So we're going to link from this field enablement issue, so I'm gonna copy the name here.

A

And and then we'll link to this place, it I'm gonna assign this to me because I'm working on it and the reason I like to do it this way is because then it creates this nifty create merger quest button. So let it create the merge request for me. So now it's creating a read request: I didn't.

C

Know that that's cool yeah.

A

It's one of the cool things about working from an issue you can, of course you don't have to do it this way, but I think it makes it a little bit easier. Sometimes I.

C

Just question there Emily whoa: could it have been done from from Monica's issue or not a great.

A

Question no because we're the Monica's issue is in the field, enablement project and we're working in the handbook. So if you create like you, can't create an EMR across um across projects like that, uh we could have moved Monica's issue, but I. Imagine there's probably more work. That's gonna be done after creating this page. So this is, like one part, will link those things so they're related. But excuse me this way it doesn't close the issue directly cool, so he said we're gonna, set it up under sales, so source handbook.

A

Sales and let's create a new folder, a new directory. What do you want to call this Monica.

B

We can just call it field, communications, cool.

A

And then inside of this, we're gonna create a new file and who remembers what this file should be eating.

B

Yeah him that index RMT's yeah.

A

Html dot HTML MD MD, dot HTML, oh man, now I'm doubting myself. Let's check what I do.

C

A

Dot, okay, so new file.

A

C

A

Know what I like to do is just like take a page that I know is set up correctly and copy that top matter and then customize it so I'll start there and then we'll call this field.

A

A

So go ahead and commit this create.

A

A

Now, if we were to go back to the M R, which is oh.

A

Yeah, so if we look at this, M are almost signed it to me, so I don't lose it and we look at the changes that are made. We created a new folder and we created a new file in that folder, which is just a pretty blank page. If we wanted to see what this looks like I'm gonna build the handbook locally.

C

This is where Emily I I struggle with right when we get away from the web IDE yeah. Looking at that last video I followed it all along until it had to go to the the command line. That's just you know, yeah.

A

I think that's a totally fair thing to say, I what I, what I did in the last video or I'm like matching all the file names I, don't know a way to do that in the web IDE. What I'm doing now is what this review app thing. That's building right now is doing, and so it's not something that you need to do from the command line. It's just in the interest of like the limited time we have here. I want to.

A

You know, show you what that looks like, but if we had patience, which is not my middle name, it would show up right here. So let me actually pull up another, mr that I've got on the handbook. Oh, this one should be merged.

A

Here so this was a change to the team page that Jesse made adding a new vacancy, and so, if we load the review app, it's gonna take us to the team page where we can see that vacancy and that's what this is doing. This is doing the same thing just locally so but I think what you're saying is I want to see it as fast without having to wait for the review operate. huh But even this isn't like super fast yeah.

C

That explanation helps us that what you're doing is mimicking that other process that we're familiar with that takes a little bit of time, not long, but no.

A

I think now I'm gonna, like under 10 minutes now, which is really cool. It used to be like 40.

D

Question, and so basically, this is kind of a question for everybody. What types of things do you find yourself doing often I can think of two one right now we're talking about creating a new page such that we can add content to that page, another one. It would be I'm somewhere in the handbook and I want to edit something in this page. Assuming those are two fair reads: what other actions would any of you be interested in doing, or does that pretty much cover the bases in.

C

That Google Doc the notes that would capture a couple. Others like embedding, that is, okay, adding images. Okay, doesn't super regular, but those are things that would like to be able to do what else team yeah.

D

If it's in the doc I can check that out more but that's helpful so, but that would that would that's a specific example just great, but that's still I would consider that edit the page, but it's good to know like specifically what you're trying to do in terms of editing the page I'm just trying to I'm kind of a fly on the wall.

D

But that's talking but I'm, trying to understand yeah try to understand like the scope of what you're trying to do, because I can already think of some things, and you made the comment David that you don't want to once you see the command line. That scares you and it's like it. So it's unsettling and that's type of thing, and it is for me and I'm a developer. So I I know that pain. So so anyway, I'll check out the docs but yeah. If there's anything else that you think that hasn't been covered.

D

Freeze added to that trick now sorry to hijack that hammer, no.

C

And I think the intent to is like of the series of these meetings will cover those right, yeah.

A

Definitely I think embedding media is a huge hurdle like media being slides videos. Images in general, like people, have different opinions on where we should store images and things like that relationship files. So that becomes a tricky thing, but I just wanna highlight here so you know I finished, building it locally. This is the review app. So now we can see the fields communication page under sales, but there's no content on it. So Monica I assign this mr over to you. um We refresh you can see that and you can build this.

A

You know it opened the web IDE and just kind of build it. The way you would any page in the handbook um in in markdown, so this kind of gets you started. Do you feel like if you wanted to create your own page? Now you have an understanding of how to do that. You.

B

Have anything you definitely you got me to the right place so just to make sure, though, when I do go and open up the mr again, can you kind of show me where I would I like input the new text like in the screen that you're on now like in that index.html file or yeah, whatever that's.

A

Exactly it so, if you like, when you log in to get lab, you'll, see your merge requests assigned to you and this this, mr will be under it. If you just open in web IDE, it should take you right to that index.html dot and D file that has already been edited, got it many times. I think we might have talked about this a little bit last week, but when you see this split screen, what it's showing you is the before and the after.

A

So I like to come over to this single screen, where I'm, just seeing like here's the state of things right now, so you would go in and add you know like a blurb with an intro and then like you,.

B

Know some header and then some.

A

Other things I won't save that, but so that's this short there we feel good. Does anyone have questions on that? Just.

B

One more clarifying question from my on the title of the page comes from the name of the file. Is that or the name of the folder? Is that correct? No.

A

The URL of the page comes from the site, the name of the folder.

B

A

Of the page comes from this, you look at that review. App again. Mm-Hmm I just closed it. So this is the review app of the handbook that I have run running locally yeah.

B

A

Know that the URL is going to be, you know the Purls gonna, be hand, books, flash sales, flash field communications because that's what we just said. It's gonna be under sales directly note the field communications with an astronaut, um but that's gonna, be the URL path, the folder name. But the title is coming from this and the way we can know that for sure I'm gonna open the file here locally. So you can see what making a change to this looks like, but.

A

Okay, this is the file is created if I delete this s on the title name and then I'm gonna kill this and rebuild it, and it's gonna take a second to build when we reload it locally. It's not gonna have an S here, but it's still going to have that s in the URL, because we didn't change the folder title. We only change the title in that front and matter on the page. So this section up here if you'll see this on floor, moves, we call this front matter. Don't know why just okay.

B

And is there any kind of best practice like ads are building out in the handbook to have like the URL match? The title of the page? Typically like I I, know that makes answer you them, but I don't know if it's like I, don't.

A

Know that we have any rules about it, but, as a rule of thumb, I think it's easier. Things match sure, also for, like SEO e reasons, not that we're trying to rank all the handbook pages, but because google is the way that most people will find what they're looking for in the handbook- and here we can make that for team members, the better okay, so I, don't think that worked.

A

So this I'll just share this two bit. This is it's an ileus that I have set up on my computer to build the handbook, so I don't have to remember the full command I.

A

Just run that and that should build the handbook.

A

While that's running the next example was embedding videos: did you have a video on this page? You want to embed David. Oh all of these well.

C

So the question I have here a couple buttons: one is uh I mean, can you embed a video within a table or not and maybe that's more advanced, maybe start with just can you maybe you show everybody had embed a video, but uh can you only embed public videos and not private.

A

Yeah, so private videos I'm guessing you can't not super sure. um We could try to find out.

A

Embedding videos in tables so.

C

For example, yeah, if we scroll to the top of that list, if we wouldn't pick one of the most recent ones, just the idea was a instead of true ups being a link which works. Fine right, it's yeah is that okay, is that preferred, or would it be better to embed this video, and so it actually that, like a visual, shows up in the table, yeah.

A

So my personal preference is the video. If for no other reason, then it keeps people from going away and then having to come back right, because when we open this on YouTube, inevitably, like you end up on YouTube and then the wormhole is large next thing you know you're watching the plan team's weekly meeting and you have no idea how you ended there. um I have a question yeah. Is there a way they get it to open into a new tab or a new window? Oh yeah?

A

A

Let's look at this really quickly, so when you I just want to see, could underlying this.

A

Okay, so let's Google this together, markdown URLs open new tab, yep okay. So what we want to do is add this at the end of URLs. For that to happen, let's actually test to make sure that that works so open the web, IDE and.

A

C

You're doing this cab. Can you test one of that, but then maybe pick another row to see if we can within the table yeah.

A

Okay, so let's do these two will do this target --blank thing to have it opening in a new. So let's test update sales, enablement session videos to open in new tabs it. It's gonna, create a new mr.

A

And then we'll on this same, mr we'll go from the bottom up and we'll pick one of the bottom videos to try to embed. Just sign this to me.

A

The way because I think it's kind of burdensome to have to remember how to embed videos or how to embed different media. So I just remember one place where it's done well and then I just have to know that, like oh, if I want to see how to embed a video I just have to go to this place to go copy and paste the code. um So, on the kpi index we have a video embedded um and it's right here, discussion about page improvements, so I'm gonna scroll all the way to the bottom.

A

To get the code behind this page and we'll look at.

A

Discussion, so this is how we're supposed to end the ED videos in the handbook. Let's go ahead, we'll really open the web ID on this, mr and we'll do one of the bottom videos.

A

So this is what we're supposed to say: let's open this video, because we have to get the embed URL.

A

So here you go to share and embed it produces a special embed URL. We don't want the whole thing. We just want this part of it.

A

Okay, well, maybe we'll copy the whole thing and then get rid of what we don't want.

A

So what we want is this section.

A

Well, update this and then we're gonna put this.

A

A

That should work well just on one line and it.

C

Doesn't matter if there's a space in between those uh greater than less than signs, no.

A

Great question doesn't matter: um I think markdown is sensitive to the fact that it has to like a row in a table needs to be all on one row so like how these are all on row. 51.

A

The whole row has to be in the same kind of line number. So if it rolls over to the next line, things will kind of get wonky. So we want to make sure everything so add video using and then we'll commit this. Now, let's go take a look at Monica's, mr and I opened earlier.

D

A

From just to see what that review app looks like because that should be done now Sophie here we can see you app and that's gonna. Take us right to the page that looked exactly like we expected so you'll be able to add content below. As you add the content, the table of contents will magically appear. So that's great MRR is done. um We've got the embed. We need from this.

A

Excuse me, this is building we committed that change. So now this is the m RR on videos. If we refresh it will see, there are two commits we made the first being where we added the thing to open videos and new tabs, the second being where we change to an embedded video.

A

So those that's the first. This is the second and it's still building.

C

So while we wait for it to build, maybe put into that that last topic of now we've got these awesome less than one the recording you did before recording today, we're not used to live well.

A

Great question I was thinking about this earlier um and here's my thought about took um dark on flash handbook. um We have a thing here.

A

About the handbook, I think we should create a section under the handbook page that is like the Monica's gonna, be the expert communicator. So maybe you can help me with words here, but like examples of editing, the handbook or yeah.

B

Maybe like um place I, don't know I'm like I mean I like the meetings I like. Maybe we could say like practical light hand, book practical application or something like yeah I like.

A

B

A

Continue David sounds.

C

A

um Keeping in the theme of the meeting how about this I'll start the mr and Monica, you want to finish this one too sure cool. So let's go ahead and we'll do it without creating an MMR first, we'll just kind of do it here. So if we open the web IDE and.

A

I know we're a time- let's just finish this so under handbook, let's create a new directory called practical editing of the handbook. Words are not Forte.

A

A

A

Where did it go.

D

It said there was a little error message saying it was already taken so I think it happened. It just made. The UI didn't seem to update a parent.

A

To call crack pra should be right. There. 8-Under is.

C

It under about.

A

Okay, we're starting over when things don't work the way you want them to wipe it and start over again, so let's create an actual issue. This time issue create page for practical.

A

Create merge, request.

A

Awaits and the merger press.

A

B

This game source.

A

And book and then new directory practical.

A

There we go new file.

A

Yeah yeah and we can use that same frontmatter as before. No no! Let's not do that, because.

A

This review app is still building, so let's go ahead and just pull from some random page.

A

We'll call this.

A

Let's start there how's that sound.

A

Okay, so I just committed the new page he's got the table of contents. He's got a title: it's got a brief skeleton there, but feel free to edit it just some of the things you've covered. Now. If we refresh this, we should see those changes and I'm going to reassigned.

A

Cool, so that's there now I'm gonna do see this.

C

A

Really want to know if the table supports a video and my suspicion is yes, because it's a tables markdown table support screen, so I would guess that um it would work yeah.

D

That would be my assumption. Two images work and then videos, if they don't it would be. We can very easily create an issue to add that functionality. It would simply be as CSS addition to make sure that that gets accounted for. We might not display exactly as desired right now, but it just as well might so. Yeah.

A

Do you like which do you think would be a better way to consume this David like? Would you prefer when people are on that page? Looking at the table, do you think it's easier for them to go to open in a new tab or have the videos kind of all right there I.

C

Like the idea of the video right there, but it would need to be kind of small. Ideally it would be small enough to where, like you, didn't, have to scroll way down. Look at all of videos you can with it could be as not as condensed but relatively condensed. But then, when you click the video, maybe it would expand and become larger. I were worried that, like right now, the default might be. The video might be too big. Yeah.

A

I'll keep this, mr and we can communicate kind of offline after this, based on what it looks like the other option could be maybe embedding a playlist like. If all these videos are on the same YouTube playlist, we could embed the playlist into the page, so that I mean it's a little bit more work like the table could exist as it is now, but people who want to sit on that page and kind of get that information good run there Emily.

B

You can change the size of the video, though right, like in the iframe.

A

Like in the ute pen yeah, you can I think I'm like the way markdown handles screenshots. Is it like condenses the screenshot to be as big as it can in that kind of table and so I'm guessing that it's gonna handle the size of the video to make it as big as it can without breaking the width of the table, but I'm never tried so.

D

Yeah they're they're definitely like oftentimes. There are many solutions, I think the playlist one is actually probably the best if, if you're trying to have a lot of videos that right now, that sounds like the best solution. Well,.

C

The only concern I have with playlists is it makes it it's more onerous on the salesperson. They want the easy button right thing. You know you want to see the list and say: oh, that one versus going to a playlist and then having to scroll and tread. We can figure it out. Yeah.

A

D

If it's really vital, we basically a very common pattern, is to show the thumbnail size which is David what you're recommending. But then, when you actually view it, it would open up in a pop-up box so that you'd actually have kind of a larger display. I just don't know if that's built in into the handbook right now something we could add if that's desired. I.

C

Also want to make sure we're keeping things boring and simple and effective right. So yeah.

A

C

Don't want to try to get all too fancy with it. Yeah.

A

Cool well we're over time, so I appreciate that I hope today was useful for you all and I'll circle up with you offline around this, mr and we can figure out what's best. How much folks see you next week. Thank.

B

A