GitLab Digital Experience, 5 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: BE Walkthrough

Description

Tyler and Miracle Walkthrough BE

A

A

It is Wednesday October 5th of 2022.. uh We are doing sort of a walk through kind of like um uh uh useful things for people joining the buyer, experience team uh and like how to like get your head on straight right about the buyer. Experience code base in particular um and so I think the format we're gonna follow here is I'm gonna like share my screen um and and miracle and I are going to um I. Think Miracle.

A

You want to like ask me questions that you would have asked when you started months ago and I will sort of answer them um and I can also maybe give you some leading questions of things. That I know would be like tricky for a beginner or for a new person to the T one way or another so that sound good, yes, cool, I'm gonna share my screen.

A

uh It is an ultra wide monitor, so uh good luck to everyone's um uh good video cards out there um I think I think we should I think this will still have enough Fidelity. That it'll be somewhat useful, um so yeah here we are we're. Sharing the screen, um and so like I, think something we're going to skip over here is so we're in the buyer.

A

Experience repository um I have like a bunch of different uh code bases here uh in my like little gitlab workspace for vs code, uh but this is specifically around um buyer experience, which is uh this Repository here. So like we're, gonna assume that you have like pulled this down.

A

um We're also going to assume that you like have installed node and like kind of have the dependencies installed and like know how to get like have done. Sort of the like. You know, build setup steps because I think that, like if you are stuck there, um then like this video is probably not going to be the most useful thing for you and like that's something you should work with like an onboarding buddy about um and get someone to help you set up your environment.

B

um So what should be a buyer experience, onboarding issue that goes through exactly that: yeah.

A

Yeah, so we're gonna skip that so we're gonna say that everything's running and um here I'm gonna start with like the biggest distinction. This is actually really useful because I think people get caught by this all the time.

A

um So there are like there are like you have the code base, you have it in your computer and you want to like change things about the website right uh and so what you might do is you know you might run yarn Dev, um which is the thing that we generally instruct you to, and it's like this is these like smoothest, the best developer, experience that you can have um you know working on this website like yarn Dev will like be fast and it will like live reload and a hot update and, like all that stuff um it'll take a little bit to build because our bundle is getting bigger and bigger.

A

um But here it is it's building and um the distinction I want to say is that like so when you run yarn Dev, the thing that is running is the um uh is the next development server which is running in like a node process? It's as though, like if you were to think about what, like the production version of this would be, is like you've got some server out in the cloud and it has a process running and like people make requests to your server and it responds with like an HTML document right.

A

That's literally What's Happening Here. We have like a server running. um That is not how the buyer experience how the like gitlab marketing website is surfed right. The the marketing website is a like statically generated, statically, served website, and so like sometime. There are some things that, like work in yarn, Dev that won't work or like will behave differently in production um and like a lot of things like that, are um it's mostly like client-side differences.

A

um So, like that, that's that's! The big thing is like um yarn. Dev is different than uh than the way that we deploy and the way we deploy is uh we actually do in the in the pipeline um and I'll show you here's our pipeline, and so we have a prepare stage, a lint build test. Deploy, uh let's go, let's find our deploy stage deploy!

A

um Oh, actually, it's not the deploy. It is the build stage right, yeah build stage, so we actually run this. We run this command yarn generate to like build the site, and so you can do that locally and yarn generate will generate the website.

A

The way that our deployment pipeline does um it will not serve it live so like right now, I have in the left hand, side is my Dev server, and here it is- um and this is being served like from a node process in my computer and on the right hand, side I'm, like statically, generating the files and those are going to end up in this little dist folder for distribution and those will behave slightly differently, and so once this is done doing its thing like it won't be running in a process and I'll have to actually use like a separate server like uh like an HTTP server to serve it and make it available um to look.

B

A

Sometimes so, like I, don't have a good example because we're not like troubleshooting anything in particular, but um this is like it is very important to know because, like sometimes like, here's, the Telltale sign like if you make a merge request and your review app is behaving differently than your local development environment.

A

The first thing that I would do in that instance is I would turn off my development server I would like kill this yarn Dev process I'm not going to so we don't have to sit here and wait for it again and I would run yarn generate and then once yarn generate is done, I would and I'll show you. The commands that I would use I would run an HTTP server against this disk file and then I would go check. My changes right like that's.

A

What I would do for that merge, request and like work with that locally and it'll be a lot slower of a feedback. Loop like like the trade-off here is, if you're, using the dev server, which usually runs on Port 3000 by default, like your changes will be immediate if you want it to.

A

If you want to like simulate the production environment, you will have to build every time you make a change and it's going to take as long as it's been taking since I ran that command and I'm still talking, and it's like going on down here and then you'll have to like serve it right. So like it's much slower to work that way, but it will get you a full Fidelity of like this is how it's going to be built in the pipeline and deployed, um because we take those static files.

A

We push them up to Google, Cloud storage bucket and then our CDN fastly, like serves those assets when people make requests so I'll stop there. While this goes. Does that? Does that make sense to you Miracle? Oh.

B

A

Followed cool and and you've I imagine you've run into this too right. Yes,.

B

um I think the biggest issue I saw with this was um when I was implementing next images. Things were working when I was serving it on uh that yarn, Dev and then breaking in the pipeline. Yeah.

A

Because next image assumes that, like it's got a node process to do stuff with and when you like, do the static, build, there's no node process, it's just HTML CSS and JavaScript files built into this folder. So my command here is just about to be done on the right hand, side, um maybe um but yeah. That makes sense like like uh a lot of those. A lot of the like.

A

The thing you have to watch out for is like there's a lot of tools out there in view land and next land that, like assume that you have a server running, so you just need to be careful like you just need to make sure that, like when you're looking up docs and like you know, implementing libraries and stuff that you're, following whatever instructions they have for the static build, and they may not have instructions for it. Some some things just won't work in a static build um or they will.

A

But you have to like wrap it in um in, like a client only um uh component and there's like uh there's enough documentation uh called client only or maybe it's no SSR I always forget which one's the new one.

A

um But there's like a there's, a component that basically tells your um your output to say, like don't statically generate this, but rather let the browser render it as JavaScript and, like sometimes that'll, help out too, but, like obviously you'll pay, the um you'll pay the cost of like client-side rendering stuff there. We go we're generating now.

A

If you have an M1 MacBook, this will probably go faster, but I have an Intel MacBook.

B

Oh, no, you got the early teens MacBook. No, this one's from 2020., oh I, didn't realize the M1 was that new, because it's been everywhere yeah.

A

That's yeah, they're, they're, still pretty still pretty new I, think I think you can still buy the Intel ones from Apple directly, um okay, so now so okay, so build build. Ran So this was the the command I ran, was yarn generation. What we do uh in the pipeline and now I will serve this uh MPX HD HTTP server uh and the thing I'm running here is like npx will just so. Http server is just like a node Surfer, which is an HD HTTP server.

A

Npx will run it uh without, like necessarily installing it as a dependency, um and you can just as long as you have npm and nodes set up. You should be able to do that and then so I will go to this 8080 address, and so now this you know, there's no! Oh yeah. There's really no there's no difference here between these two, um but sometimes there is so. This is like how it would troubleshoot.

B

What's the difference between running the npx command and running just yarn start afterwards.

A

Oh yeah, your shirt works, okay, there's I, think, there's I I would guess that yarn start uses whatever, like whatever uh server next wants you to I just do nvx because of muscle memory, um because, like not every because, like I um other static builders, that I have don't always come with that built like next has something built in um so yeah you can run, uh and you probably should you probably should run yarn start instead of npx um that that's actually a better way to handle this, um because you'll get some like useful next tooling out there.

A

um So don't don't listen to me, uh listen to Miracle, so yeah uh you're on start and there you go, and then this is real name, Zone and it'll say like serving static application from dist cool and so yeah, if you're having if you're. If you have behavior that changes that's different in the review app than your local development environment. This is like the first thing.

A

I, don't know if I toolbar back there we go. uh This is the first thing that I would do to like check those differences, cool uh sweet. So, let's um so we're not gonna work. Statically, though, because it's gonna be a pain um to do a little demos and so we're gonna work on the dev server, because that's you know 90 of the time- that's that's totally fine, um so yeah. What? uh Where do you want to start.

B

um Maybe from uh just how to I guess create a new page, we're making a lot of new templates lately. So if you get an issue to create a new template for a page, where would you go to first start making that Page's content yeah.

A

So well, um those are two different, so two different questions right, there's like templates for Pages, which are like the visual like the The View layout, and then there's like like pages with, like new pages that just use the base template right.

A

um So, let's use, let's do the second one which is just like you want a new page and you want to just use the default layout.

A

um So uh here we are Pages, uh so the nice thing about Nexus is like pretty conventional and, like generally, the names of the folders will not surprise you. So if you want to make a new page, you go on the pages folder um that is the first place to start and then uh at a top left, so like in the routing is, is folder based as well right. So like these things, you see at the top level here should basically work from the top level.

A

So if you go to like 15 right, uh this thing exists. There we go um uh and you'll see, in my right hand, side. Here's this 15 page, whereas if you go to say like uh let's do a good one install.

A

Ce or EE right, this page is coming from here um and so again like this is just like folder based.

B

Routing so that's.

A

The first thing so, if you're like, if you've got a new page and if they're like okay, we wanted to be about.getlab.com, my new page, you would create a view file and you would call it like. You know my new page Dot right, but if they wanted something that was like uh uh about dacula.com news right, slash, my new page, you would make a new folder called new and you would put my new page in the new folder right.

A

So um that's the first step is we start with the view file, and these are single file components. um This is just like a next convention. uh It's really convenient to work in in single file components you get to write all the JavaScript templating and styles in one place, uh they're all co-located, which is nice, but they do get compiled separately. So, um let's say you're on this you're uh you've.

A

Well, let's you know we're gonna, do uh new slash my new page, and um you want to put some stuff there, so uh I'm gonna grab. This is like a very simple page, so I'm gonna grab it right and so.

A

Just gonna copy paste it so.

A

I mean I, delete the stuff I. Don't need right now.

A

I think that I don't need that. I really don't need any of this, which is great.

A

Okay and we're just gonna the nice thing is these few single file components. You can just write like plain old HTML. So let's do a little pain. One stuff.

A

Love it okay, and so now this should be alive over at uh new slash, my new page, hey, there's my H1. um So again, if you do nothing right, if you do almost nothing, um you will get this default layout, which includes the navigation and the footer. um It doesn't have like a Min height on it. So, like you know, if you've got a short page, you'll want to do something like um you know, oh and here's you know we can do like a little bit of style.

A

We can like scope it, so it only applies to the scoped keyword there. It will only apply to um uh this component, which is the page, and so that's really useful. Well, that's fine, too. uh If we want to say, like the main is like Min, the heights is like 100 VH right.

B

A

Boom cool, um but this isn't really like the most useful thing in the world right, uh like it's very, very rare that we just like write like straight up HTML. What we often do is we usually do a little bit of like uh content stuff going on, so we use the next content module for that, um and so uh you know quickly like uh you- can really just copy paste this um all right, um so this will probably break.

A

uh Maybe it won't break actually it'll, probably just kind of work from the thing: um yeah, okay and then so.

A

This async data makes um uh this dot like this dot doc uh or like makes doc available right. uh So you can see like Doc dot, header doc, dot additions. So the next step is like to make your little content thing. So, let's make a Content thing: we're gonna put this in the new folder and ideally um you'll probably want to like name it and following the same convention. So do my new page but it'll be a yaml file and then, if you're like me, you will um probably just copy paste someone else's good work.

A

uh Where are we? This is in the uh install. Another thing is so like these are basically like. You know um uh like one to one like there's my there's, the uh install CE or ee Dot View and then there's the install CE that or ee.yaml right and so we'll just follow the same convention here and we'll put this here um and now uh you're running you're running your yaml uh right, which is dope so, uh let's just which is that it's like totally unstructured.

A

So let's give it a title and say like hey: it tells my new page and we'll say: uh subtitle is look at that right and then uh so. um The only reason I really copied, that was to make sure I wasn't like missing metadata or formatting, and it looks like we're all good. So then, what you'll actually do right is like uh this content. Module will go to the path here relative to the content.

A

Folder, so we'll do new, slash my new page and you don't need the yaml extension it'll, just implicitly grab it and now here uh H1 we'll do uh doc, dot title right um and then let's do a little H2. Hey! Look at that! It's all! It's all happening. It's all coming up! Milhouse, um look at that right.

A

um So that's like again, you know: we've gone from the very basic like make: a pay like get the route right like routing based on folders and files and their and their relative paths, and then because our single file view components anything you can do in a single file view component.

A

You basically can do here in next right, and so you can just write HTML and you can just hand code, the stuff and personally I think it's a great place to start um I think sometimes it's just nice to like, if you're going from, like a super from uh if you're starting from a blank slate, give it a blank slate and just like write it all by hand, I love doing that, and then once you get a feel for like how it's going, you can abstract the content into this uh content, module and and we use yaml because um historically, uh we have in the past, we've used.

A

Ruby based static site generators and gitlabs Ruby on Rails and like yaml is like plays very nicely in the Ruby ecosystem, and it plays fine in the in the JavaScript ecosystem. um So you know we've just kind of kept that around uh technically the content modules can adapt to Json files. uh Toml files, I would guess uh it's csvs like any number of things, um but you know yaml's the thing we do. So, let's just keep doing it.

A

It's fine um and once you have the yaml in there, you pull it in, and this you'll you'll really see these lines from five to eight um you'll see that kind of on every page for the most part- and you can just like copy them, update the route to point at your content and then start pulling the content in and again you'll have this doc variable and you know it could be called anything.

A

But, like you have this doc variable available to you, um you know, keep it that way because, like it'll just be uniform with the other pages, and then you can access it like you. Would you know um the so?

A

This is another piece of like background is just like you know you might consider if you're not familiar with yaml um go, do a little go, look up a little bit of yaml and look up how like JavaScript reads: yaml it'll basically come in as an object and like if you are familiar with like accessing properties on objects in JavaScript. It will basically work like that. Like you, shouldn't find too many surprises for most of what we do um and most of the things we do like.

A

You should generally be using like key value pairs that are mostly strings, like we kind of have no need for anything else like really it's just like content. Sometimes it's like paths to images right and then you drop it into like Into The, View files, and you use those strings, as you know, usually as like props or just like, you render them in the in the templating language, so I'll stop there um I! Imagine you've! You followed all that miracle. If you were four months ago, any questions on that. Yes,.

B

You brought up images. um How do we organize our images and then map them to the yaml files? Yeah.

A

So um same thing key value pair, uh so you know, let's call it hero image. uh Oh here's. The thing um yaml tends to want snake case, which is like kind of weird for JavaScript, um but we're just gonna do snake case anyways, so call it hero image, and then um we have this little static, folder and because of a historic for historical reasons, um we have a static folder and this stuff just gets basically copied in the generate command.

A

Basically, the static folder just goes to the root so like the so like you don't need to worry about the static part of the path, but we have this next images thing, and this was um when we were- and we still kind of do it like help separate images across two different repositories that deploy to the same Google content um Google bucket. uh So this is just like kind of a conventional differentiation um but, like you know, I'm not going to find a new image. Let's just grab one. Oh look, there's code.png interesting!

A

um So, like you know quickly like this image should actually live at next images. Code.Png, hey there! It is! You can see on the left hand side here. So the thing that we always want to do, like you know the best place to start, is um start with relative paths to your images.

A

So we know the relative path to this is next Dash Images, slash code.png and then, if I wanted to use that in here, I would do an image tag where the source is equal to Doc uh view Source equals to Doc dot, hero, image right.

A

Next is finding it a look at that there's your image, so um I do so. That's the and the reason we do the relative path here is because you know in your development environment you're on localhost, but we have this whole review app um set up in the pipeline for when you do merge, requests in the review app works at a different domain um than where we're deploying to and like by using relative paths right right now.

A

The way we're set up is that we do not really have a digital asset management system and so, like all of our image assets come along for the ride, with the git repository um that should change like we like future state. Is we don't want to do that? But that is how we do it, and so since like in order to enforce that sort of like it's a soft enforcement.

A

If you always write your image paths relative, you will find out quickly if you are missing an image right like like, do your best not to rely on absolute URLs, because we cannot depend on them because they are not necessarily part of our code base and, like you kind of want, your your merge request to be Atomic, so that everything your word requests like everything your change set relies on like comes along for the ride with the code changes and if you use absolute URLs for your images, you will know quickly like if you, if you goof it up, if you, if you like, delete the image right.

A

You know you'll know where's. My image right um it'll just be very clear that you're missing the image, but if you had you know used and like I, would guess that image that image should exist in production so like if I do like https at about.getlab.com, Images, slash, code.png,.

A

That doesn't exist, but that's interesting.

A

That's funny uh uh on the right.

A

Well, oh because I typed.

B

I've noticed that either yeah.

A

I was like this, uh so I was like this. Oh there we go so now it works right, but here's the thing like this only works because that image exists in production and if someone takes it away, it's gonna break and like because of this absolute URL like you're, not gonna. It's not gonna be tied specifically to a merge request and that that means that our merge requests and our commits are no longer Atomic.

A

They have these external dependencies on the existence of other um assets and, like that's fine, if you're, using like a digital, Asset, Management solution that like handles this appropriately, um but we aren't so we can't rely on that. So so the best thing to do as a soft conventional way to ensure that your images won't break or change in a way that is unpredictable to you. As the author of your change set, you should use absolute URLs or wow. You should use relative URLs.

A

You should not use absolute urinals, um okay, so the entry Christmas images, yes, cool, sweet. Okay, um so we haven't really talked about components so like right now, I've just been like writing my stuff um and, uh like I, said I personally strongly recommend that you like, if you're starting from scratch like, do it from scratch. It like everyone like they're like everyone's. Like, oh, don't repeat yourself, don't repeat like repeat yourself: it's, okay, you can repeat yourself, you can say things twice so like write it out.

A

Do it the way that you would do and sort of like you know the reason that I would do this is like it allows you like if you're going from nothing and you have like a Word document or even like a figma file, um what you might consider doing is model out the semantics of the thing right, like the thing that really matters like one of the big things that matters here is we're writing HTML and like we want to make sure that our HTML semantically reasonable, and the best way to do that I think, is to like ignore Styles, ignore functionality and like treat your web page as a document because, like this, is a marketing website, and it's mostly about getting content to people that need content right um and so like take your figma file.

A

Take your word doc. Take whatever change that you have to make and start by modeling it out to like okay, like what is the title? That's my H1. Where are my subtitles? Those are my H2S. What is the text? Content, though, should be in paragraph tags like what are the links? Those should be in anchors. What are the images?

A

Those should be image, tags and you'll end up with like a nice, you know, it'll just go straight down in the line and then, when you're ready to make it look the way we want it to look right.

A

You can start chunking things out and you should start using components and, like the components are gonna like weave this layer of abstraction over the stuff that you've done and so you're going to redo your work right, like that's just like something that is fine, sometimes because, like this exercise, shouldn't take you too long like if you have like a page of stuff, it should take you like 15 minutes to model it out in the HTML, maybe like 30 minutes, or you know like if you're really thinking about this man takes like a little bit longer 45 minutes if you're stuck at 45 minutes, maybe reach out to someone for a little bit of assistance.

A

But, like you know, that's I think that's a reasonable exercise like take half an hour model out the content and then go looking for the components right um and so there's so I'll stop. There does that make sense in terms of like what my recommendation is and why? Yes,.

B

um The only question that I have is um like you're saying model it out first and then go find the component and then I have the option after that of just reusing some old component that we already have or creating a new one.

A

Yeah yeah, so uh you know you want to reuse a component. If you can um that, like generally makes sense um it, it can be tough I. You know the the challenge comes down to like probably you're working off of some kind of design, um and the challenge is like how how much in that design that figma file or whatever that asset is how much have we relied on like existing components and like appropriate labels for those right.

A

So, like that's, that's kind of the biggest thing um and and truthfully you know, I think we one of the challenges we have for the team right now. Is that, like there's, not a good mapping of our like um design system and its components over to the components in the code base like it's, it there's not really a great one-to-one there, so you sort of have to like the real answer there like. This is not a thing that I would do um so if you're just joining the team and you're watching this.

A

This is not something that I would do on my own for the first time um like I.

A

Think the first thing you should do for the first couple weeks is: you should just like grab a grab a buddy to like do some pairing with you, because prob chances are people like know what components they would reach for and what folder to find them in and at the very least, if you like, if they are mistaken and using like in a deprecated one, you will consistently make their same mistakes and so rectifying mistake will be easier because it will be a consistent mistake to rectify.

A

But probably you know, they'll they'll, at least at the very least. They'll have a good idea for you for where to start so you're, not totally flailing. So that said, um you know, like I, said we're in next year, and so one of the nice things is that, like um uh the folder should not surprise you, so the components are found in the components, folder and then there's a couple things so like there's a common components. Folder and I would generally recommend starting here and like go check a thing right.

A

um So I don't know what do we got? We got like a header. uh Is there.

B

Anything here right, it's like I, don't have a header in the common folder, but we are using the new buy Solutions cool.

A

Sweet awesome, um so this is like what a pairing session would do for use. You'd like get on a call Miracle a miracle would tell you that right, like and you'd be like Oh. Okay, that's maybe a little confusing, um so you know like, but to get your work done, go to Solutions, oh Solutions, and use this hero component right and go for right, because Miracle has like conveniently told you where to expect this, um and then you could, you know, grab uh so like import ant.

A

uh um Are we hero and there's an index? So we do barrel Imports. um So in this folder that the hero is there's actually an index file. The index file handles all these uh imports and exports, and so you're going to import the.

A

Solutions, hero.

A

Rom components: Solutions index.view and then in in view we have to register that as a component components Solutions hero uh and then we have to use it. So.

A

Right so this is just like empty. Yes, I.

B

Will see, though, typically we won't just use the direct component, we'll have a series of components and then map that through, but we can look at that in the next question. I ask cool.

A

um I didn't follow that so you know so now I'm getting an error because there's probably a handful of like required. Unexpected props right, um where it's like yeah, take some data so like something that I generally do is I sort of just like uh I like to look for other uh places where we have used things right: Solutions, hero.

A

Right and then like so this, uh so this data.

A

Doc and then just for example, I'm just going to use an Enterprise.

A

Solutions here I'm just going to copy this block. This goes down to 28 the buy industry.

A

Okay, here we are solutions. Hero, I'm, gonna drag this in so the thing I'm doing is I'm just getting sample data because we don't like have any for what we're doing here, um Solutions hero so now this should work. I would guess uh what am I missing.

A

Oh did I not save you.

A

Hey there, cool I, just didn't save the file um so yeah. So again this you know you'll see this has Enterprise language, because I pulled it from the Enterprise file.

A

um Honestly, this is a totally reasonable place to start like I, often just start by like copying, because like by doing that, you start conv as conventionally as possible, like if you like, if it looks the way how we've done it before it'll, be it'll, be easier to troubleshoot everything together um and so I'll stop there and what I will so I'll say this, uh like I honestly, haven't done a lot of front-end work in a long time here, I've been working on some like analytics stuff and some pipeline stuff and some infrastructure stuff a little bit more like a b testing.

A

um I would like if I found myself importing the solutions hero to be a hero elsewhere, I would make an issue to be like we should like get a common hero component um like we should file an issue about this I I think this is a problem. I think that this is and I think that people generally agree that it like is confusing that, like our components, are not are like, common components are not in the common folder and it's hard to find, and you need someone like Miracle to say, like oh we're.

A

All using the solution like like that to me is like a yellow flag that, like we've, missed an opportunity to like add a tool for people to like use things conventionally um like if we're. If this solutions hero is, is great, if it if it is, if it is perfect and it works in every scenario for everyone, whoever needs a hero or for most people who need a hero, we should move it up to the common level, um but we should just go. You know should make an issue.

A

Someone should do it, we should review it. We should talk with the designers and make sure that it like handles. You know most of the cases it's supposed to and if there needs to be variation, then like we should figure out what the variation is and handle it. um You know I think as far as I'm concerned. This is a a sub-optimal state to be in, and it is worth the one or two days that it would take for us to move this over to a common one and start using a common component.

A

It's like it will gain us so much time in like developer productivity that it's worth a day or two of work. uh We haven't done it and that's fine. We have competing priorities like this works. That's fine again! If you're new here and you're, like I, just want to get my stuff done, I actually think. If you're new here, you have a lot of opportunity to slow down, because the expectations are probably much lower.

A

So you should like I, think you know if you're new, here and you're watching this like please consider like taking the day or two to like make a common component and use it, and you don't need to swap over here's the thing you don't necessarily need to swap over all the other instances of solutions hero. You just use it for yourself and then tell people you've done it and people can migrate over. They can choose to use it like.

A

Don't let the perfect be the enemy that good here like it's good, to have a common component, even if we're not using it in 100 of the places, we should be the fact that we have it and we use it two or three times we'll encourage people to continue using it, maybe eventually we'll migrate over right. So um you know that that to me is like like doing this: I'm like that's a pain Point like that's a they call like a paper cut right, it's like something that like hurts, while you're doing your normal work.

A

um You've like got a paper cut because you were like flipping through like the the pages and a binder of reports or whatever so like this is a paper cut. We should solve it um and yeah. That's what that's what I would do next, so you said you had another question: yes,.

B

So this is the process for creating a completely new page, a completely new template, um something that happens, but not as often as creating a new template for an existing page. So my question is you if you have an existing page um and you need to create a new template for that existing page? What is the process of doing that? Okay,.

A

So I don't understand the question: a new template for an existing page, so you're just redoing the whole page. Yes,.

B

A

The design changing or the content or both.

B

Sometimes both sometimes it's just the design.

A

Okay, um I would do exactly this process. I would just make a new page and I would just like call it like um to begin like I find it convenient to keep the old one around. So I would just like literally so, like let's say we're redoing. The my new page I would just like make this and I would say. Like my new page oops, uh my new page new DOT, you right can I do that.

B

Oh and then just to throw in there, if you're, making a new template for an existing page, you have to keep the old page because that's still being used in production. We have a whole nother process for approving the final draft of this new Temple that you've made.

A

I, don't I'm not familiar with that. That seems um it's new I wouldn't do I, wouldn't do that I I, don't under I, don't understand what, like your your Mr, should make the new one and remove the old one um right.

B

Not necessarily because sometimes we have like higher reps that, like the idea but then actually want to see it built and then make a decision after that. So, for example, I have an issue right now: I'm making a new analyst template. I still have the old analyst template and content. Still in my still on my experience, I just have created a new template and new content um and the new template and new content is listed in the route ignores file. So it actually.

A

Oh, have you merged this end.

B

um It it will be merged in today.

A

But it's not approved.

B

um It's so it's been approved for me to build it. It hasn't been approved yet for me to actually Swap this new analyst page for the old one.

A

Yet okay um I mean I, just wouldn't merge it. I would just build a new one like the merge requests, like the thing that I would do um is like I would make a merge request that swaps, the old within, like you know, I, would start like that.

A

Like I said, you know like that's, basically what I'm doing here, I'm keeping the old one and, like you know, copy pasting and like going over to the new one, but the merge request would eventually like take these changes and put them here and I'd be like this is the new page and the merge request should deprecate the old one and like whoever's, a whoever the approver is on it can look at your review app and I would say that this is the correct way to do it. Is you know if your review app changes?

A

The pricing page you'll have a link. That's like my review, app slash pricing and you can compare it with like abouttakinglab.com pricing and my review pricing. So um I I haven't heard about this process, so I I'm, sort of, like speaking without context but like um I, think that it is not a useful thing. I I, don't know, maybe there it must be solving some problems so um yeah, uh maybe that's how we're doing it I would hope that we don't do it it that way, though cool so okay well uh one way or another.

A

uh You know if you're new and you're watching this uh talk to your manager and figure out which way we're doing that um and then do it that way, um and hopefully uh hopefully it makes sense for whatever problems we're solving so um yeah I. Would you know again like so to get back to your original question?

A

If I'm doing a new template for a page like I, would you know create a new file and I would like give it a new name and then I would like if I'm just changing the design I would mostly be working in the view file and like grab components. If I'm changing the content, um then I I, you probably if you're changing the content. If the structure of the content has to change, then probably so does the view file itself um and then, of course, if you're changing both, you need to change both.

A

So um you know, I would find it useful to do to take that approach of, like you know, make a whole new thing. Work on your development environment keep the old one around for reference, but then I would make a merge request that moves all the new work into the old files and then the review app would have your new page, uh your new design and your new content that people could compare against. What's in production.

B

um My last question is- and this is probably the issue we get the most is um there's a bug in production on some random page, okay and the bug happens to exist in a component on the page. This is a little bit redundant, but how would you go about finding that bug and fixing it.

A

uh Yeah, let's say it's in the I'm looking at the pricing page now so let's say it's in the pricing page, um so I would start by uh to start at the page level. Let's start top down is how I like to do it and I'd go over to pricing and then I'd go into the index page, and um you know like.

A

Obviously, there's a lot of stuff here, it's hard to say without a clear example right. It's like um you know, I would like hop into the inspector like this might need to be its own video. What's up, oh.

B

I can actually make this a little bit clearer if you scroll down on the pricing page. um We have an issue with um the talk to an expert mobile I, don't know, but talk to The Experts, not showing. How would you fix that.

A

uh What do you mean Sunshine? Is there.

B

No I mean like this is hypothetical.

A

Oh um okay, uh so uh inspect uh you know, assuming that I know that this is the thing right that needs to be like that. um I would like try and find like try and isolate the smallest bit of like UI. That has the problem in it, um and so it looks like you know here: ish right, there's like I'm, like okay, there's like next steps and like the thing is happening in my brain a little bit because of my oh sorry, I lost my screen.

A

um The thing that's happening a little bit in my brain is that like um I have enough experience with view to like kind of like know where this is coming from in the view file right um and so I think this just comes a little bit with experience of I'm like okay, like I'm.

A

Looking for this, like next steps thing- um and actually, uh you should grab the view Dev tools right and this will actually be a lot easier, um especially if you've got a little less experience so uh view devtools use a little Target thing to like click on a component to select it it'll tell you what component this is, um and this grabs, like the wrapper. So this is like an SLP. It's like a causal layout component here, um but here, okay, like I'd, probably go to like next steps or like Ctrl f for next steps.

A

Hey here's some next steps stuff here right and then this is: where are we I purple fade right, FAQ next steps component, all right, so I'm, assuming that this next steps component is where, because the problem is here right, so this next steps component has the stuff, and so I would look for. Where are we importing this from Next Step from common common.

B

A

B

Next steps: that's next step.

A

Sure uh I would also probably be like well. This is coming from. No, this is still in the this is oh, it's in the pricing all right, you're, right, you're right! Oh.

B

You know right on your on the video when you click on Next Step, the S becomes black and it's hard to see. Yeah.

A

Yeah, okay, so um yeah I. Would you know? uh But here we are, we found the import.

A

um Next steps is being imported from pricing, slash index.view, which means that this component lives in the pricing folder, and here we are, and then uh you know this is there is so then I would like find some waypoints here right. So you have this next image on line 30, which is probably this next image, and then we have a typography component and icon component and you can see in my Dev tools.

A

I use a detox in it, so this so like I would look for it's hard because, like we're talking about a fake bug, but.

B

A

If it was a problem with the talk to an expert, I would like try and isolate like where is it and I would like map up like? What's in the browser, which is this component SLP typography and then what's in the code base, which is this component SLP typography and then the other thing I would do here too.

A

So now that I've found I'm like okay lines, the problem is probably somewhere in lines 38 to 40 in the code base, and that should match up pretty nicely here and then I would, like you know, mess around with it. So.

A

Something right.

A

Should change to something? Oh there, it is okay! So now it's like so I'm like okay cool I, can like make it say what I want to right and then I would like troubleshoot uh from here. So this is the pricing index page on the left and we're looking at the next next steps component, which is taking this data prop right and it's data.m next steps, and so I would like look at like how are we getting the data from here?

A

Are we doing any processing on it and then finally, I'd also be looking at the pricing.yaml file uh pricing index.yaml file, yep, and then this is coming from we're saying next underscore steps right and so I'd look for this like talk to an expert and like see if this is coming through as I I'd like make these like again, this is a fake bug. So it's hard for me to say precisely what I would do but like this is how I do my way finding right.

A

It's like use the view, Dev tools in the browser isolate down to the smallest component.

A

You can find that has like breadcrumbs that you can follow into the code base go into the code base set yourself up for success by finding, like top down, be like, where am I in the code base, drill down to that small bit of UI and then like connect, the dots of where the data is get like, where the data is going through and then just start making changes and, like you know, test your assumptions like again, if it wasn't showing up I'd, be like okay, like what happens when I do change this text.

A

To just be the word, something it should change right and something that like happened unexpectedly here right, is that, like I change, that text to something you know she's on both of these I'm, like oh okay, so we're like there's some Loop here right, where it's like supposed to be reading from some. You know, array of objects so like maybe that gives you some information about. What's going on or what's wrong right.

A

So um again, it's hard to like we've just made up a problem that doesn't exist so I don't have more specifics there, but does that? Do you think that's useful in terms of like wayfinding yeah.

B

A

Was great awesome, well, sweet I will stop Sharon uh we're a little a bit over and I think you're. The recorder.