Coding with Jon | episode 4

Hello, world. Today we're working on the developer's website and this is unscripted. We may make typos, we may encounter bugs, but it's okay. We're going to squash them together. I'm joined by my colleagues, aj.

Hello.

And Ashley.

Hey, everyone.

And my name is John. We're developer advocates at HubSpot. Before we dive in, Ashley is a new face to many of you. Ashley, do you mind if I ask you a few questions just so that folks can get to know you a little bit better?

No, I don't mind at all.

Great. About how long have you been at HubSpot so far? Far?

I've been here about eight months so far.

Eight months. That's about how long it took for me to stop feeling like a newbie here.

I'm getting there slowly but surely.

The fire of information here is just nuts. Just about a month ago, some lucky community members, as well as a whole lot of folks outside of the HubSpot developer community got to hear you speak. Where were you?

So I was at the Render Atlanta conference. It is a black LED conference in the Southeast that's like mostly on the react tech and stuff like that. So. Yeah.

What did you speak on?

So I gave a session on overcoming impostor syndrome and your tech journey. So I covered just common signs that. You may excuse me, experience in pertaining to imposter syndrome, techniques for overcoming those signs, and just a few examples of how I use those techniques throughout my journey.

That's so important and I. I feel like I need to go back and watch it. I think someone on our team recorded it for our team. Unfortunately, they're recording. Not a public one, but maybe you'll give that talk again someday.

Yeah, maybe. I think a lot of people found it impactful, so I would love to give it again somewhere.

Yeah, it lit up on LinkedIn. I saw. Right. While you were actually talking, a few posts go up. So anyhow, I promise I won't make you repeat your talk, but for anyone who may not know what it is, what's imposter syndrome?

So imposter syndrome is that like anxious feeling of feeling like you're incompetent or not qualified enough to do anything that you're trying to do or accomplish your goals or pursue this career. So it's just feeling like you're unfit to be where you are in any stage. It doesn't have to be like, in a technical sense.

It'S. Imposter syndrome is totally real and a lot of people experience it. Many of the Advocates on our team, including myself, have experienced it. But everyone's experience is different because everybody's background is different and everybody's life experiences leading up to. Up to what is causing the imposter syndrome is different.

Yeah. And it affects all people from entry level to CEOs. CEOs imposter syndrome, like big tech execs. Like everybody experiences it different, like you said.

Absolutely. Outside of work, what are some things that you enjoy?

So, outside of work, I'm actually avid street photographer. I love photography and videography. I love, like video editing and I also love music. I'm also in. In the process of becoming a dj. I collect a lot of vinyl. You probably can see it back there. So for the photography and music are like my, my source outside of the tech world.

All right, well, I could definitely use some music suggestions from you, but I have a couple, couple more quick questions and then I promise we can move on to under the actual website project. Before HubSpot, where did you work?

So I came from Wix. Wix.com I worked there previously as a developer advocate.

Sweet. Sweet. Have you had a chance to play around much with HubSpot's content hub yet?

No, I haven't. So which is why I am very excited to be on today's stream to see what you're doing in that context.

Well, I'm super excited because here's the thing. I don't know anything about development on wix, so what I'm hoping happens a bit is we end up explaining back and forth like HubSpot and Wix Concepts, because for us it'll be super fun to learn about the other system and then for everyone watching, you can then connect the dots for yourself and learn some things more deeply. It's also great for anyone who is. Who's a beginner who may have experience with one platform but not the other. All right, well, let's start with a recap. You can see on my screen here. This is the developer's website project that we've been working on and it's gotten a few updates since we last worked on it on stream. But Ashley, aj, feel free to interrupt as I go. If there's any concept or any. If I throw out a weird buzzword that you don't know what it means or anything, feel free to call it out. One sec. Going to drop something in chat.

Will do. John, you know I will always call you out. Don't worry about it.

Anyhow. All right, so the first thing that you might notice is this is the module that we worked on with Anton Bujanovsky. I've taken it a little bit further. We've added a little bit of a gradient here as we saw on Stream and did on Stream. We've now got this nice animation. So this module is kind of fun to work on, but a bit challenging responsively because we had some very like we wanted to crop the Morse code and everything. It's kind of a unique design. Other than that, what we've worked on was this module is brand new, it's not that flashy looking, but there's actually a bit happening behind the scenes because I learned a lot about localization on this project. So these numbers here all have to be editable inside of the cms. And so if I go in here. So normally, normally we would probably just have a number field and then this text and you could maybe put like the K for a thousand and plus and everything could just be part of the number field and the number field could just be text.

But.

But a couple of things. I was thinking it would be cool to animate this, that the numbers count up. I'm not 100% sure people in the chat can. Can comment on whether or not we should do that or if it looks tacky for the number to count up. I don't know other than that. The other thing that I found out that I didn't know about is that in other languages certain things like denoting millions. So if we put a number here that's got like, say we change this eventually to 750. Well, probably more like 2 million free weekly active users or whatever if we changed it to something like that. Apparently the abbreviation for millions is different across languages and some of them you have to put that before the number instead of after. So that was a whole learning experience. So because of that we have this prefix field. So I'm just going to. This isn't actually what the. The prefix is for million. And it wouldn't make sense on a percentage. But just to give an indication of where this goes. So it'll make text appear before and then we've got a suffix where you can put. It looks like a module. I've set up. I like the counting up and down options. Yeah. So we got one vote for we should make it count. I. I'm still thinking on it. We'll. We'll see.

Also, good to see you again, Dustin. Haven't. Haven't. Haven't seen your name pop up in quite a while, buddy.

Absolutely. I. Yeah, I haven't seen you in the Slack anyhow, so we did that and I will back out of this. Oh, the other thing that I did, I didn't show it there. Let me jump right back in. Actually, there is one more thing that I learned with localization that was not obvious to me. So in some languages, it actually doesn't make sense to format things in this way where you have like a number first before the text. Like the writing, like how you read. Doesn't work that way. We actually also had to make it so that you could flip it. All right, I will exit before I break anything. Then. This module here, this community module, will look familiar to people who watched the stream with bj. So we didn't directly work on this module on that stream. We worked on the Recent Updates module and I will show that. But we do have this cool little on scroll animation. It's just using CSS. There's no JavaScript here. We also built out this training and tutorials module. But here's that Recent Updates one. So I've finally gotten. I finally gotten through it and implemented it responsively now that it'll change what it visually looks like for smaller screens. It's even got another look there. But this was actually one of the hardest modules to do and AJ saved my butt.

How are you able to pull the info from the changelog?

Great question. Let me actually open up VS code here. Let me close this up. Close all and let's dive into that. All of our modules are in this folder and in HubSpot, modules are basically. I'll just open up this specific one to explain it.

You might need to increase the font size on.

Good call. Is that all right? Or do I need to go?

Maybe go two more. Yeah, that's good.

Okay. I'm sure it looks good for all of you. It looks atrocious for me. All right, so homepage Changelog module. So modules in HubSpot are like. Are you familiar, Ashley, with Brad Frost's Atomic design at all?

No, I'm not.

Okay, so the general gist of Atomic design is that you think of building a website in different sized. I don't want to use the word components here, but different sized pieces. And so you think of it like organisms. What are they? What are the words? Let me actually just pull it up. Highly recommend reading through this if anyone has not. It's a free book online. But the main thing I wanted was this. So the idea is that you think of how you're building web pages in increasingly bigger sized pieces. So, okay, Atom might be like a button A molecule might be like a, like a banner, and then an organism might be like a header or footer. And then templates. Please correct me if I'm wrong to anyone in the community on the exact like, analogies here, but. But then there's templates, which I'm sure you're familiar with. The concept of that is just simply you can reuse a appearance across a bunch of different pages. So in HubSpot we call the like, molecule level thing a module and a module. We. You might even do. You might even call it an organism. They kind of fall into both. But anyways, the gist is they're built out of three main files. A module HTML, a module JS file, and a module CSS file. And basically you can think of it as like the module HTML file is all of the HTML code that will appear inside of the module. And this is probably one of the messier modules to look at because it's got an SVG inlined in it. But, but aside from that, let's see actually, if I collapse that. Oh, I didn't know. All right, so this is all of the HTML inside of our homepage changelog listing module, which is this module. And the heading here is what appears here. And. And what you're seeing here in the handlebars type code is a reference to the module itself. And modules can have fields and so module fields, you write them in a fields JSON file. Now, this file can be a bit much to read through, thankfully. This one's actually pretty simple, but it's a little disorganized than how a person would normally read it. So I'll show you what this looks like.

Hey, John, real quick, do you want to call out what the. The hyphens were in your Hubble code?

Sure, yeah.

Be aware of what that is and the feature that you can use that with.

Yeah, this is a tip for anyone who's building on HubSpot in Hubble. You can. I forgot the exact term for it. It's some sort of delimiter. But basically on your Hubble tags, whether they are print tags, which is what you do with the double brackets like that, or with the statement tags, you can add to either or both these hyphens. And what the hyphens will do is they will strip all the white space before that tag or after that tag based on which side of the tag you're putting the these on. And so in this case, I wanted to strip any white space that's basically from here to here and from here to here. Now. Yeah, in the situation that I did it here, it's not that valuable. But in a place where. Let's see this one. I don't know if we're using Mac, right.

I know personally, like I've used it a lot for especially like content editors who have to create like a ton of pages if they're copying and pasting from like a migration is usually like a good place where that comes in handy because then if you're copying and pasting and they accidentally like copy some of the white space over, they ain't.

Got to worry about it.

You're just knocking it out right there in the code.

Yeah, it's very useful.

One of the most useful times for. For doing is in Hubble we have a concept of macros and macros. I kind of like to think of them as functions like in other programming languages, but they're not quite functions. They're a little bit weird. But what they do is basically you can define a macro and then you can use that macro somewhere else just like a function. So here's an example. We have a macro called Menu Items and then down here we're just running that macro.

Okay.

So with macros, because they repeat a bunch and you can have logic inside of them, something that will happen is you will have white space that shows up between your Hubble statements. And that can be kind of annoying for it to actually get output on the page. So that's a perfect time for doing this kind of thing is it just makes it so that you're not printing a bunch of white space, you're just printing the things that you actually care about and any logic that you're doing.

And hey John, we just got a question in that I think is actually this is kind of, kind of perfect timing. Victor basically saying like, what are some best practices for developing a landing page? So fun fact, we're actually like on the side, we're working on landing page templates for this exact theme. So this question comes in perfectly. John, do you want to. Do you want to start addressing that? Do you want to go first?

Yeah, yeah. So I do want to also clarify. So there is. Some folks have different interpretations of what landing page the words landing page means. So first I'm going to start there. I have no idea. I wonder if I would love to know if WIX has a. Has a definition for it, like if they use that term too. But first I'll say what the HubSpot one is. So on HubSpot we referred when we are talking landing pages. We are referring to a type of page content. Landing page, it is like a, is very much like a website page except it has a goal. The goal is usually to get someone to fill out a form so that they can get access to something. Usually is the general gist of what you use a landing page for. So, so an example might be that you might have a landing page that is for an event, like registering for an event or you might have a landing page for an ebook and someone has to fill out a form, give you a little bit of information about themselves in order to get access. We have some landing pages that we're calling landing pages that you may have seen me post online about. They are, they're not traditional landing pages because there's no form to fill out. We're just giving you the cheat sheet. So if you build apps on HubSpot, here's an example of a landing page that we have. So the gist is it's giving you information and it's not really connected to the rest of the website. It's just got the same look and feel. But it's supposed to be kind of self contained where we did something different and it's not really intentional here it was just a matter of time. And laziness is normally on a landing page. We advise that you do not put your main navigation links because you want people to focus on the things that you are trying to show them in that moment. Instead you might get rid of this and keep the logo obviously and maybe keep these other links if they're useful to someone who comes to that page. Just out of curiosity, Ashley, is there a WIX equivalent?

So with wix it was mostly like whole businesses. We, we didn't come across a lot of people just having just one like page for one purpose. It was like people actually having like a purpose or like a business that goal that they were trying to solve for. So I can't really speak to like how WIX would define a landing page because it was just like a full on website most of the time.

Okay, all right, that makes sense. Yeah. So and HubSpot's Got Normal website pages as well. This, a homepage like this that you're seeing is an example of a normal website page. I'm just going to check the chat here to make sure I didn't, make sure I didn't miss any questions.

Not yet, no, from what I could see. But there is the question of what team are you on Team A, where there is no navigation or Team B where there is navigation. For me it's like 95% of the time it's team A. But there are those special use cases where I'm like, yeah, like a menu. Sometimes depending on, like, to me it's about the intent of the landing page. Right. If it's lead caption stuff, naturally you don't want navigation. You want to focus on the core information as much as possible. But if it's one of those just like, hey, FYI kind of things, like, for instance, we have, I forgot we have landing pages for a lot of the different things on the developer site that are done, but we still have navigation on there, so that way you can still browse about the rest of the site.

Yeah, I, I agree with you. I think for like the sake of conversions and everything, I think it's better to not have that nav there. If someone really wants to get to your site, they can always click on the logo and, and go directly to it. I, as a user, like when I'm coming to a landing page from Google, I get a little annoyed at it because usually like it's. I search directly for like a company and, and I'm just trying to log into their interface. Like what I think those companies should do is typically keep a login link or something just so that if you aren't there for whatever the landing pages, you're just there to get to their site like that you can easily get to your stuff. But otherwise, yes, I think, I think.

That calls out a good thing. Like for me, it's the logo. Like I've been to some landing pages where the logo just redirects to the landing page and I'm like, that's not, that wasn't my intention at all. And I just like, you know, even though it does it, I'll still click it like two or three times just because I'm in disbelief.

I have absolutely been there. Well, if there's no more questions about the landing pages part, I will get back to the module and how this is built. I don't see any more questions coming in. So, so what I mentioned was that there's a field here. So let's look at that again. This module, because it's got an SVG in it, it looks a little messy to read through, but the basic gist is it's just normal HTML and we have some Hubble in here. And the Hubble, all it's doing is this, is pointing to a, A field and let me actually open that up in split view here. I will like this and then open to the right. All right, so what this is saying is literally grab about whatever the value is for the section heading field. And we have this field here named section heading. And what I was going to show you, and I'll do that now, is while this JSON text is kind of hard to read, there is another way of looking at this as well as another way of composing the fields. You can go into the Design Manager and I'll open up this module. And we have a list of fields that this module has on the right side here. So the first one that is mentioned in the, in the HTML is that module here. Let me collapse this module dot section heading and that's coming from this field. And if I click Edit Edit, you can see what type of field it is. So it's literally like a. You can type type in it and supports every kind of rich text you can put images, etc. And the value, the default value can have some HTML. So we have an H2 the text recent updates and then a paragraph that says that it's powered by the developer changelog. Any. Any questions while I'm going through there?

Okay, it's 12 o'.

Clock.

It's 12 o' clock somewhere. It's. It's 12 o' clock in the central time zone. For those of us one day I.

Remember to turn off that accessibility setting during a live stream. One day I would.

I.

Today's not that day.

It's all right. It's a good reminder. All right, and then we have another field here listing footer text. And I'll show you here. I can actually show you this. So HubSpot has a preview button. So if you're working on a module, you can see how your fields are working outside of the context of a web page. So all of the modules that were built here are built to work within the template they're displayed in. So you'll notice the font doesn't look right here, the background color is not right, but the text here is correct. Except for the blog here that it's picking is not the right blog. You can see there's a dad Joke Generator app by another Developer Relations team member. But anyhow, you can pick a different blog like the change log and see, okay, here's what the posts will look like. So this is just a helpful tool. The View Developer Change log, which is that listing footer text appears at the bottom of the module.

So the files that are in the Design Manager, did you structure them yourself or is this Being pulled from anywhere in particular. Because in Wix most of the time you have to structure your own files how you want them.

Yeah. So it's a mix. A little bit of a mix. So that was a really good question. So the only module or the only files that are special in where they have to be is. There are. Let me collapse this. I'll collapse that as well. We'll go out of that. The only ones that matters where the files are is the. At the root of your theme. So a theme is like a collection of templates and you can. In. In this theme we don't have any fields for it. So it's going to be boring here. But the concept is that in. In HubSpot say you wanted to change the background color that's used across your entire site, so it's a global like styling change. Any of those types of options would appear here in the left pane and you could make those changes for the developer's website. Everyone who's working on the site is a developer and we already have the mock up of what the site's supposed to look like, so we didn't need a bunch of those settings. So I'm not using those. But the files that determines what fields are available to a theme is this fields JSON file. And this is identical to the module fields JSON file. So it supports all the same things except it does not support what are referred to as content fields. So an example between content and. And styling fields is like a content field might be like a block of text that needs to appear on the page that would be content. Styling is more like the colors of the background or the colors of the text. It might be like ornamental graphics that appear, that kind of thing. And then the other file that matters where it is is this theme JSON file. It also has to be at the root. And then this is a little bit unique about HubSpot. I don't know of any other platform that does this. Modules also have a similar hidden structure to them. So in the Design Manager we abstracted away so that developers aren't having to see a million files in their file system. If I open up that changelog listing module again, you'll notice I'm in the module. But I'm also seeing module HTML module CSS and module js. What's happening is these files are tied to the module itself. So they're not treated as inside of the Design Manager. They're not treated as separate files. You can't like reference them from other modules. They are part of that module.

Okay.

And John, we just got another question in that I think would be good to. We could probably answer it here. But it's basically Corey. Corey, Coreybot24 is saying that they're new to HubSpot and is it a CMS kind of development that's low code?

I would say it's a mixture of.

Both in a way.

I would say that HubSpot's a mixture of both. So if you wanted to go true loco experience, say you are coming from I don't know WIX nowadays. So I don't want to make any claims there. But I can say, but I can say a good comparison is like in WordPress, Elementor or what is it? Divi are like builders that a non technical person can use to build out a website and HubSpot kind of allows you to do something similar. So if you were to go to our template marketplace and you were to either buy or just install a theme from there, you can get a very similar experience to Elementor or Divi inside of HubSpot where you don't have to be some amazing developer. And some of our community members here I think actually have submitted some themes to the marketplace. Shout out if you have. And Nick here is the one who is the judge above all judges when it comes to that marketplace. So on the flip side, if you are a developer and you're like I just want code, I just want to be able to build my thing and I want it to be as easy as possible and not worry about plugin updates, not worry about making sure that the main CMS is kept up to date or anything, then HubSpot's great for that too. In that case you are writing just HTML, CSS and JavaScript and you're sprinkling in Hubble where it's needed. So I'll pick one of these modules that's a little bit simpler to look at than the changelog one. So this is a slider that I built and I'll show you the slider. So this is the other thing that I worked on while I was offline. So we've got this fun little slider. Ooh, it's got a localization thing I gotta mention too, that's kind of nifty. But anyways, just a normal slider that you, you see on other sites. It's got text and an image. Is there a good market for HubSpot devs? Sorry, I'm in the coding side of things, not an expert. Perfect. And I should have popped that up here, but there we go. Anyway, my opinion is that yes, but I am a HubSpot developer advocate, so I'm going to have a little bias. So what I encourage is, Dustin, I know you're out there as well as a few other community members. Shout out, what do you think? What I can say is I've been seeing on LinkedIn a lot of people hiring. I've also seen people who are looking for a HubSpot developer to help them not just with their website, but with customizing their CRM. So if you didn't know, HubSpot isn't just a place to build your website. We have a whole thing called a CRM and the website is directly tied into that. So basically everything that the company does to do marketing, do sales, serve their customers, like do tickets, etc. Is all tied into the website and the website knows about all of those things. So you can do things like smart content where your website will literally adapt to the individual person. You could do like personalization, like put their name on, on the website if you really wanted to. That's not that exciting. But what it is is being able to go, I know this person is interested in X thing, so I'm going to show them more content about that thing rather than whatever the generic thing is for everybody else. So that's some of the power. We also have, as was dropped in the chat, we have a new HubSpot developer mentorship program. There's, there's some info at that link. I believe there is a sign up to get mentored. I'm not 100 sure. Correct me if I'm wrong there, AJ.

Yeah, I believe that. Where is it? Yeah, the application is still there, so you can go ahead. There's a link to it on that landing page and then you should be able to fill that out to apply to be a part of the mentorship program.

And I do want a quick call out again because you asked is there a good market for devs? The answers are yes, yes. And I think yes, there is demand. So there you go. That's not from someone who works at HubSpot.

No. And also if you, if you're on LinkedIn and you just do a search for like HubSpot developer jobs or, or things like that, you'll see that a lot of the partner agencies that we do have are hiring and they also, I mean there's, we have a, we have a very, very great, we have great partners in our ecosystem. So I mean I, I couldn't recommend enough to definitely Check that out.

Absolutely. Okay, so we were talking about the ease of development. If you don't know, for example, HubSpot's specific language called Hubble, if you've ever worked with Jinja, which is a python based templating language, Shopify's Liquid, it feels very familiar. It's just basically you're doing handlebars statements and we have the same for if type loops and everything that you're. Well for loops and if statements that you're used to with any programming language. And everything is well documented out on the developer's website, which is getting a new home page, as you can see. And our developer's website also just got a Developers just got a new revamp. I'm just going to do overview. This is the search results. But it just got a new revamp. If you are someone who's used to working with APIs, for example, the API docs are now a whole lot better because you can see a breakdown of here's all of our get endpoints and you can even test your API calls. You can change what version you're looking at, etc. If you're developing on CMS, you can easily get to that. You're building what I mentioned before, customizing the CRM, which is you can add UI components directly into HubSpot's backend interface so that sales, service, marketing folks, etc. Can all get information easier or take actions easier. Okay, I just rambled for a long time.

I wouldn't say you rambled. You put out a lot of good information. You explain things well.

Thank you. Let's see, you had asked. We'll jump back again. So you had asked about the blog, specifically how we were getting the blog posts. So what I'm doing is I'm setting a variable collapse this a variable called blog and it's equal to blog. Recent posts. This is a Hubble function that will grab the re the most recent posts from a specific blog. And so the first argument that that function takes is the ID of the blog. And like I mentioned before, anything that starts with module dot is a module field. This is actually pulling. You saw me in the editor before the preview screen where I changed to the changelog blog. That field is what's passing a value to this. Then right here we're going, I want four items from that blog. And then I don't know why the indentation is like this.

Because he's not here. That's the easiest.

Dennis was tinkering, apparently. Yeah, all of this is a little weird. I don't know why, I must have ran through Prettier or something.

And this happened to me before with VS code. When Prettier did it, for some reason it always. It. It hacked off like that last carrot and dropped it every time. I don't know why, but I don't know.

It's annoying. But anyways, the gist is then we're just doing a for loop. We're going for each blog post that's in the blog, display a list item and we are going. This is a little bit special. This is unique to HubSpot's developer site. So we have a blog called the Changelog subscribe if you have not already. This guy, this blog is a little bit special. So we have this text which will say announced and then we have text that will say when it's live. The concept here is that when we make a change to the HubSpot platform, we will often tell you months in advance when that change is happening. And so we will state when it is going live and if it is just a change that doesn't require you to know about it ahead of time. Like what's a good one? Like launching a new API. If we're launching a brand new API, you don't need to know ahead of time because it's not going to break anything for you. So in that circumstance, then we're just telling you what the the date of the announcement itself was. So we conditionally display whether the live date or the announced date in the page. Checking over Template Marketplace Nick, I feel like you calling out that the Template Marketplace requirements are looking pretty sweet is a little bit. I don't, I don't know what the word is for it, but like patting yourself on the back kind of thing.

I mean, it's not like he wrote them or anything. I'm just saying.

Let's see. Excited for apply from HubSpot staff member. Okay, Anyhow, so we're just looping through, creating a list item and we're grabbing from that blog post. Again, we're just grabbing from this object here. Data from that post. It's in. If I was just to print this out, why don't I just do it? I am accidentally double typing there, but now it's going to look terrible when it refreshes. It doesn't look that bad in this case because it's blog, but. So blog posts are actually a little special in how they display by default because they're a special type of object, but they are an object. So what I did there Is this is called pretty print. Adding that is a great way to dive into variables in HubSpot, understand what type of variable it is. So in this case, it's saying, this is a blog post object. And then it goes, this is the entire object, which it's really hard to read when it's squished like this. But. But basically it's telling you that all of the data from the post, like I was the person who posted that, that changelog, and all of the metadata associated with that post, you can even.

You can key off and get any of that metadata using dot syntax.

Yes. And so for the live date, the way that we're doing it on HubSpot is this is literally a module. We just have a module that you fill in a field to determine what that live date is and we conditionally show it. So I will delete this before I forget.

Also call out, that module was created by you, John.

So.

I do want you to get credit for that like John did.

Alive. Get blame. Alive. All right, Refresh. I accidentally clicked the wrong window before hitting refresh. There we go. Fixed. I admit to nothing, Texas. I do want to call out something fun about this testimonials app. I had a little bit of fun with it there. So, first off, a few of you, at least one of you in the chat right now, is going to have a quote that will appear on the developer's homepage in this banner. I'll let you guess who that is. Here's a hint. He has contributed very significantly to the developer's homepage. So he'll have a quote and get his picture up here as well. But for anyone who we're, we're getting quotes from if they don't have a picture using css, I did this. So if there's no image, it will change the appearance of the whole thing to basically what our mobile version of this looks like. So it's looks like that, which I thought was a nice little thing. But the thing that's actually interesting about this module has nothing to do with that little image trick, by the way, that's using CSS has if you're not familiar. So this testimonial card, I open up the css. Basically we're going in css. We're saying if the testimonial card has an author that has a photo, then do this and otherwise display it the other way. But the actual interesting part is I didn't know this about. Well, I didn't think about this with other languages. And Anton probably knows More about this than me? Because I have a feeling you've done more localization work than I ever have. Quotes are different in every language or in most languages. I didn't really think about that. So we had to make it so that no matter what language, we're displaying this site in, these quotes that are slightly bigger, different color and offset, and everything are going to look right in every language. And that used to be hard, but it got way, way easier with this. So if I go into the quote itself, I'm implementing these with a before and after. And this blew my mind. I had no idea you could do it. Do this. All that I'm doing to make it dynamically change based on language is just setting the content to open quote and close quote, and it will just automatically change. I might even be able to show you, just for example. See, someone internally had to figure this out about quotes and did a lot more work around this than I did. I got to be lazy about it by doing that quote thing I mentioned. But there's this document. These are a bunch of different quotes, and these aren't even all of them. So, like, Japanese does these cool things. French apparently does these. Like, I don't have to worry about any of that with the closing open quotes. So that's awesome. As well as this is what was mentioned about numbers. So in different languages, you place the, like, abbreviation for millions in different ways. You spell it in different ways. It's got to be wider or it's got to be shorter. It's. It's complicated. So anyway, yeah, I wasn't aware of that either. Done a localization or two in the past. Absolutely. Anton. Well, what are we at? We're at 25, trying to determine. We were going to try and build a module or two quickly. We're pretty close to time, so I'm not sure. Maybe what we could do instead is maybe there's some. Some concepts with HubSpot that would be fun to, like, teach effectively. Was there anything weird to you, Ashley, that you're like, what is this? Like, why do you do it this way? Or.

No, nothing too weird. I did have a. Just another question about the Design Manager. Where is this the code being pulled from? Or are you building those files yourself?

Yeah. Okay, so this is a great question. So if you go into HubSpot and you go to Content and then you go to Design Manager, this stores a developer file system. So there's kind of two developer file systems within HubSpot. There is one that is visible through the Design Manager and there is another one that this account doesn't have access to, but it is the one used for building UI extensions as well as building React based HubSpot projects like CMS projects as well. So for the design manager, this is a whole file system. And basically when you're working with the HubSpot CLI, which, which I am here. So HSL. Oh, all right, so this is the HubSpot COI. The HubSpot CLI has a whole bunch of commands for uploading files, deleting files, creating certain assets, like a, like the base website themes. We have a thing called the HubSpot boilerplate as well as you can create modules by typing this command. And basically what those commands do, the create commands do, is it'll create that like scaffolded structure. So like we were showing, each module is basically just a folder and it's got the name dot MODULE in it. Here we go, dot module. And then it's got a fields, a meta JSON and then it's got module, CSS module, HTML module, js. And I should mention while we're on the topic, if your module does not have CSS or JavaScript, we ignore that file. It does not get rendered to the page. It's a performance win there. But so all of those files, if you upload them, end up inside this developer file system. And so when I'm working on this project, what I have going on, I have a little command that I've set up for it which is NPM run watch stage. But that's just me being fancy pants. You don't have to do it this way. The all I'm doing is I am inside the project folder on my computer and then I am watching this source folder. So if I go here, so I have this source folder and I am just uploading everything that's in it. And if I run watch specifically, what it will do is it will just watch for if I save a file. If I save that file, it uploads it.

Okay, okay.

And so then it will immediately appear here. And something that a lot of developers will do, and I encourage it, is if you're working with git, for example, I'm working with git on this project, but I don't need this in this account because it's a staging account. I will do it in production. If you want to make sure that no one uses the design manager to hop in and make a change because the design manager is not going to reflect its changes in git, what you can do.

Not Sure. I think John may have froze a minute there.

Okay. Yeah, I thought it was maybe me.

Yeah. So essentially what John is explaining is you can lock a folder inside of the Design manager and essentially anybody who goes into the Design manager and opens up a file, it will let them know that it has been locked. It's currently locked. You're not going to be able to make edits to it via the Design manager. So as John was saying, it's really great when agencies and stuff like that are building for multiple clients because you can basically, and I'm not saying always lock your client out, but like you can lock the design manager while building something in a client portal and lock that particular theme and then that stops them from accidentally going in and maybe making a change or saying like, hey, I looked at this, this isn't what I was expecting it to be, you know, so I'm just gonna make an edit real quick. It kind of helps you lock down your process and, and a lot of web shops have that like process find that they do. So that's definitely something that I think has been awesome. That's. I know. I can't remember when we enacted that exact thing. I want to say it was maybe about a year and a half ago, maybe two years, I want to say. Or when the light started coming around if themes were first introduced in the HubSpot ecosystem or platform. So then that's kind of where that all came about. But yeah, definitely recommend locking, especially if you're in a production account, just on the off chance nobody can just go in and start making one off changes to make what you have in your GitHub repos or anything like that out of sync for what's in your production site.

Yeah, makes sense.

Yeah. We'll see if John comes back here in the next couple minutes. I know there's probably some Internet issues going around.

Sorry about that. My Internet went down.

That's right.

I just explained everybody how wrong you were and you just picked up where you left off.

Good, good. Yeah, that must have been my. My Internet service provider telling me that the stream was supposed to end two minutes ago. Anyways, long story short, I don't know if you caught when the lock thing was not working. Well, it works. It was just literally that that's when my Internet was dying.

And we just recap that. Like once you lock it, even if you open up a file, it is going to show a warning message to that user saying that it's within a locked folder and you won't be able to make changes to it via the Design Manager unless you unlock the file.

So, yes, I recommend using that. And in addition to that, I would put a readme file in your folder so that if someone opens that folder and they're like, what is with this? Why is this locked? They can immediately see your readme and go, oh, this is why. Because you have a readme explaining, hey, go to this GitHub repo or whatever other version control hosting platform you're using and go. All right, I need to make my changes here. With that, it's probably a good idea to wrap up because I have no idea how long my Internet's going to last here. I'm shocked it came back on as fast as it did. Thank you all for joining us. Thank you a ton, Ashley, for coming on and joining us for this, too. Hopefully we didn't scare you away.

No, thank you for having me. I hope to be on more in the future.

Sweet. All right, well, have a great weekend, everybody. Happy Friday.

Bye, everyone.

And you won't be able to make changes to it via the Design Manager unless you unlock the file.

So, yes, and so I recommend using that. And in addition to that, I would put a readme file in your folder so that if someone opens that folder and they're like, what is with this? Why is this locked? They can immediately see your readme and go, oh, this is why. Because you have a readme explaining, hey, go to this GitHub repo or whatever other version control hosting platform you're using and go. All right, I need to make my changes here with that. It's probably a good idea to wrap up because I have no idea how long my Internet's going to last here. I'm shocked it came back on as fast as it did. Thank you all for joining us. Thank you a ton, Ashley, for. For coming on and joining us for this, too. Hopefully we didn't scare you away.

No. Thank you for having me. I hope to be on more in the future.

Sweet. All right, well, have a great weekend, everybody. Happy Friday.

All right, bye, everyone.

Bye, everyone.