Coding with Jon: Let's Build a Website! | episode 5

It's Sam. Hello world and happy Friday. Welcome to the legally distinct olympics, the international HubSpot developer programming challenges. Thank you for joining us. I'm John McLaren. I'm joined by developer athletes, my colleagues and good friends Dennis and bj.

John, I just want, I just want to say well done. Avoiding any legal issues whatsoever. I will say Olympics all day long now just to, you know, make sure we do get in trouble somewhere.

I just want to say that I wasn't informed that I was going to be part of a competition.

They didn't know this, but they will be competing in a programming words per minute challenge. Just kidding guys. Don't worry, I'm not throwing you that kind of curve. But before we get into things, BJ will be familiar to a lot of you if you've watched the stream just about four weeks ago, as well as if you're active in our community. BJ is a senior software engineer at HubSpot but before that he was an active community member and talented developer building tons of sites on HubSpot and presenting at developer events building open source projects. And now he's at HubSpot building default assets that are available to all of you to use in your projects as well as clone and modify. How's that for an intro?

That's good. I love it. He should walk around with me all the time and introduce me no matter where I go.

Just like a casual work meeting. I just pop on the. Do that and then leave.

I'm thinking just non work related things, just, just general life. I just enter a room and there you are.

I, I would enjoy that. That would be a lot of fun. Well, I, before we get into anything, sorry I didn't ask you this bj but you want to share anything, like what are some like hobbies or things outside of work that you do just so that people can get to know you a little bit better. They know aj, Dennis and I fairly well. So I just figured hey, might be a fun thing. I know of some things about you that are pretty cool, but I think it's better if you share. Yeah, yeah, sure. I.

Well I guess the big things in my life right now are that I, I just started, well I guess like a year and a half, two years ago. Lear piano. I taught myself guitar back in the day. I play a lot of like jazz stuff. So switching over, over to piano land now and that is proving to be quite challenging but very rewarding. And then I would say the other main defining pastime that I have is that I, I'VE been teaching Lindy Hop so swing dancing for like the past seven 7ish years.

I need to know more about this. This is. This is important.

Pretty awesome. I've seen videos. I would never challenge BJ to a dance off. I would lose horribly.

I mean, I would never challenge anyone to a dance off because I will lose to any a rock if it was there.

Yeah, well, it's a lot of fun for those watching. If you don't do any kind of dancing. I would highly recommend picking up something because moving is great, especially if you're a developer and we sit a lot.

100% well, how do I come up with a good segue for this? But if you want to get to doing the fun stuff like doing swing dancing, etc. Then you have to get your work done. It is a Friday and that's what we're all thinking about is how do we get done with all of our work as fast as possible so we can do the things that we want to be doing. So with that said, I thought it would be fun if we do a little bit of chatting around. How can you work smarter and not harder when building websites on HubSpot? So in the chat, if everybody feel free to shout out some. Some general ideas and we'll. We'll throw them up on the screen. I can start us off just to. Just to get us going on kind of a frame of thought. 1. One thing that I think is. Is a good way to do it and I don't know exactly how big a text I need to put here, but would be like using. Creating reusable components, things that are like little pieces that you can reuse throughout a design on a website so that you're not having to rebuild this thing for every little module or every little page on a site. There's a couple ways of doing it, but. So we'll do reusable component. I'm failing the words per minute challenge that we. But the way that I think of these reusable components and Anton's already in the. In the mindset here, I'm thinking like I do it with macros and includes in Hubble. I think another way of doing it is with. I gotta get used to the controls here. All right. Is react. So if you are in the REACT CMS beta. Well, I guess it's not really a. You don't have to be in it. I don't think. I think you can just choose to start using it now, but then you can create literal components. There's also Web components. I'm gonna stop shouting out all these answers.

Let's see, you're just repeating the answers in the. From the comments. So you're cheating, basically.

Am I cheating or are they cheating? Look, guys, I know the work smarter, not harder thing was the goal here, but I think you guys are working smarter and making me work harder. So.

I also honestly, cheating is working smarter in my opinion. Like actually, you know, knowing that you don't know it all and going out and find out how to do something and borrowing code. How about, how would I say, like that and then, you know, modifying it for your purposes. I'm not sure if that is like something we all, like, do. That's definitely how I've done a lot of my coding in the past.

I completely agree with that. I mean, don't. Don't remake something that someone has already spent a ton of time on. So I'll add to that. Like open source libraries.

Yeah, there you go.

What else?

This is. This one is. I'm going to just keep on talking because no one else is right now. I also am learning that removing distractions, I know this is not code specific, but have you been deep into something and then your Slack notifications go off and then you go off to handle whatever thing happened with someone else and then you come back and say, what the hell have I been doing for the last half hour? You have to start over. That sucks. So turn off your whatever things so you can actually concentrate, dedicate some time to actually coding.

Yeah, I don't have problems so much with, with Slack. Like I'm pretty good at just ignoring them when they come through if I need to be in focus mode. But for me it's like if I.

Have what happens with my DMs, if.

I have like a physical like distraction in my general area, that. That's what I need to like get rid of that. So like throw my phone across the room or like a lot of times for me just going to like a cafe where I don't have any of my stuff is like, yeah, the kicker.

That is a good call out. I do want to highlight. Estron says that we should borrow code and then give it back. I would like to know how you give it back. I mean, maybe if you're forking an open source project. I guess that's.

That's why I say like donating to open source is like, you know, making everyone happy.

With passing the work. Does somebody else doubt us working murder? I don't think you're actually joking. There Anton, because you did just start a new company. That's how that works. What is. What is the word for that? Delegation.

Totally delegation.

There we go. Let me know.

I suppose if we put that into programming terms, it could just be abstracting your work away.

Yes. That'll be 15 story points. Let's see. Come on, guys. In the comments. Add a little bit more in the chat. What else is there? We've got reusable components. We've got borrowing code. We've got. Shoot. Itunes is opening because I tapped my ear. Distractions. I am going to add that. Turn on DND mode.

Start from a good place, make sure the design's coming to you in a quality place, and you have all the information that you need before you even touch the code. So really review everything you see. Be very, very in touch with the designer if it is not you. And yeah, really, really grow the nurture that relationship so you both work on the same page.

I really like that.

You're welcome.

What do we got? One hundreds. Come on, guys. We're doing all the work. We're supposed to be trying to work smarter here. All right, so be in sync with the. The designer. 100. Agree. Like, starting with a good plan of action, like how you're gonna approach it, thinking in terms of making things reusable, components, etc. You know what? I'm just gonna. I'm gonna work smarter, not harder here. Dirt. All right, well, since y' all aren't. Oh. Break down the overall project into smaller pieces or manageable goals. That's good. That's good.

That's really good. That's really good. Also, don't be afraid of versioning, right? Like, have a minimum viable product and then kind of work up iterate from that.

I really like the start from an MVP one, especially doing that right after starting to break things down into smaller pieces. So something that happens for me is like, if I have a very vague concept of a project that I have to do, I'm like, I don't know where to start. And so then the way that I approach is I try to start breaking it down in smaller pieces, but I'm like a person who obsesses a little bit too much over, like, to do lists. And like, if I'm not careful, I'm. I've been getting better at this. If I'm not careful, I like to do list the whole project into these tiny little things that, like, I didn't real. Like, instead of, like breaking the website project down into, like, modules or something, might be like, okay, I need the buttons, I need to get the fonts right, I need to get the headings right and all that. And it's like, okay, in my project management system, I don't really need all of these tiny little mini tasks because then I look at the list of things I have to do and I'm like, this is daunting, like on a Friday. I'm like, I just want to leave for the day. So I, I try to approach things from the start, from an MVP approach as much as possible. So, like, what is the minimum thing that we need to get this home page live? Like, do we really need every piece of this page? And we're down to. Just for context for Everyone knows what we're looking at here. We are pretty far along now let me refresh so you all can see the little animation and Anton's wizardry with the Morse code. And so we're, we're getting pretty far along. We've. We've got also a nice little animation here, but we're down to. We have underneath this testimonial, this is placeholder, obviously, but some of y', all, we'll have some quotes here pretty soon. Thank you for everyone who's contributed to that. One of you is watching the stream. But so we're also. We need to have this logo parade and I'll show you how I made it in a little bit. But anyhow, did we need these bottom pieces? Technically, they're not critical. Like, the main thing that most people are going to do is they're going to. They're going to want to come to this site, they're going to want to see what the changelog stuff is, what the, like how to get started with building, etc. They don't care about, they probably don't even care about the logos, but it is what it is. So.

Hey, John, maybe I don't want to derail you too much here, but I'm also thinking about because this is something that I, I struggled with initially when I started working in HubSpot development and that is like the why to the site, how it connects to the CRM and what the point. So I basically, I could build something that's not dynamic, doesn't. It's just a static thing, but actually working with the CRM, knowing what is going to be used in the future and how to make it, you know, dynamic. That's something that I never really thought about prior to this. At least not too much.

Yeah, I, I'm. I might have been slightly distracted by A comment about my dog, but, but I think I got the question and was it something along the lines of why do we, like, how do we. What is the purpose of the.

Rather than presentation, what is the actual goal? Like when you, when you actually look at. So I used to just look at the design. All right, how do I translate this into HTML, css, js, whatever, you know, just put it on the page. Now I have to think about, okay, what is this connected to and what is the point of it? So is it going to be a simple, you know, blog listing, for example? So I need to connect that to the blog. Do we have some HubDB content that's going to come into this and fill out as well? What's the purpose of that? How's this CRM form, et cetera? Yeah.

All right. So yeah, that is a great question to ask and something you should ask on every website project. Build out the gist for what we care about. For the HubSpot developers website, we're caring about making it easy for a new developer to start with HubSpot. So they need to be able to see how to create a developer account. They need to be able to see like, why it's like what available resources there are for them. They need to be able to get quick access to our docs. They need to have some context of like, how many people are using HubSpot, how many. These kinds of things help people go, okay, it's worth investing my time, it's worth investing energy into learning HubSpot. And, and then like, this is something we're really proud of, but our community is really awesome. And yeah, and so we're putting the community right on the homepage. We want people to know. This is a pretty welcoming, great group of folks. And then we want them to know, hey, there's resources right here for you to just get started. You don't need to be an expert, you don't need to be like 15 years in your web development career. And then so all of that is about getting started, like being a new developer. And then for the developers who are already in our ecosystem, what we want them to see is they want quick access to the developer docs. So right at the very top, we add a link just to dive right into the docs. We have this menu up here and then we also have a quick access in case someone wanted to know what we've been releasing on the developer changelog. By the way, just so you know, what's currently showing on my screen is not the live current Change log it will be when it goes onto the live site. This is just an old export of those posts. We are using the HubSpot developer or we are using the HubSpot blog functionality to manage our changelog, which means email notifications are just out of the box and we can also do cool things like display the information in different modules.

So I think, I think another point that Dennis was, was leading at too is like in. In terms of think smarter, not harder or whatever the motto is that we're running off of when you're. When you're looking at a design, not just seeing it as static pieces but understanding the question of like where is this data coming from? So is it just existing at the page level or is it being sourced from a blog? Is it being sourced from contact records? Is source from HubDB and especially for client, like facing work on the partner side, you know, like how do they want to update it in the future?

Oh yeah, that's a great point.

Is it, Is it like content that's structured in some way? Hub DB is a really great option or custom objects are a really good option. Is it something that is going to be updated on a daily basis? Maybe some kind of automation, maybe some kind of API work? There's a lot of different avenues and thought that goes behind just figuring out how a specific module is supposed to work, if it should even be a module or if it should be a full template or something else entirely.

Well said.

100 agree with all of that. I'm wondering, oh, I don't know what that sound was that I heard, but maybe it was AJ joining in the.

Background, the producer joining in the background.

All right. Anyhow, I think this is a pretty good list. I think I should get into taking from that idea of like, let's borrow code, let's reuse things. I don't want to reinvent the wheel. One of the things that I have to make for this website here is I have to create now I call it a logo parade. I think that comes from a prior, prior boss that I've had. But I call this a logo parade and I need to create that on the developer's website. But I'm lazy. It's Friday and I know someone who's already done all the work for me. I just need to tweak what they did. I'm going to cheat off of my colleague BJ here.

Interesting.

My answers, huh?

Yep, yep. This is how I roll. So if you did not know, you can see all of HubSpot default modules. So BJ created. I have one. I don't think you probably know this, but I was going to just ask. Do you know how many like modules and themes and such you've created since you've been here? Probably don't.

I have no idea. I'm not keeping a tally.

Okay. Anyhow, so one of the assets that BJ created is called the Logo Grid, so I may disagree on the name, but it's all right.

Oh, wow. Spice.

Dang.

Oh, the politics are coming out.

His. His description is probably more the appropriate one, but. But if you ever want to say, see the code for the modules and themes that HubSpot provides by default, you can totally do that. They're not open source in the sense that you can contribute to them, but they are in the sense that you can view all of the code, you can copy it, you can modify it, you just can't directly modify HubSpot's copy of it. The way that you'll do it is you can go into the CLI or you can do this in Design Manager, but I will do it here. So if you just as a tip, if you do HSLs in the terminal and you have the COI installed, that will show you literally every. Sorry. Oh man, am I in the wrong account? This is what doing it live does to you. All right, let me just make sure that I am on the right. Oh, the right portal. I am not. So that's the problem. Allow me to just fix that real quick. Let's use. I just. Just don't want to show all of my portals on screen, but I will quick change to the correct one.

For what it's worth, I'm pretty sure that I too opted to originally name it a logo parade, but I'm pretty sure it got shot down by the team and UX because as John mentioned earlier, we both had the same boss and we both learned about the Parade as the. The proper name for something like that.

Okay, I will. I'm not going to show what I did exactly there, but you can. You can already see this id, which is fine, but tip. If you need to change the default account that you are working with in the cli, you just use HS accounts use. And then it will literally let you just use the keyboard to navigate up and down from all of the options that you've currently got off in the cli. It's wonderful, wonderful. Not going to redo that because then I'll expose all of the accounts I have, which is way too many of them. But all right, we're going to do that H.S. ls again. All right. Notice there's not a whole lot in this. In this account, the Subspot account, but this is literally everything you would see in the design manager. So if I go into here, this is literally all of the exact same assets. So if I pull this back up so you can see side by side, we've got App HubSpot, we've got Web team assets, yada yada. And then we've got. This is the theme that we're actively working on, etc. The at HubSpot one you'll see is bolded here. And it's also a little special here. I don't think we graphically show much other than this little no edit sign. But what it means is that you can't directly edit files that are in there because HubSpot owns those files and we manage and update them specifically. BJ does a lot of that. We try not to tinker too much once you can see things in there. We try not to tinker too much with stuff so that we don't break stuff. But that's HubSpot's little protection thing so that we can safely control those assets. If you want to navigate into a directory, you can do it like this. This is just the file path, so the Folder name of HubSpot. By the way, if you have Marketplace themes, you'll also see App Marketplace. All right, so this is literally all of the assets that HubSpot provides out of the box by default. Some of these are newer, some of them are older. But the specific one that we care about is the logo grid or Parade and not the logo module and not the image grid. Though I would imagine there's probably some similarities with the image grid. It's just not. I think, bj, you probably implemented some aspect ratio stuff that's not in the image grid, I'm guessing.

Probably. I don't.

I don't know.

I don't think I made the image. I think that Joey. Joey did that.

Okay. Oh, good. It did just go up. Sorry, I'm catching. I vote Image parade. It is 12pm in Illinois. John will be. Yep. We. We will be coding with HTML, CSS, JavaScript and Hubble. Hubble is HubSpot's proprietary language. It is a templating language very similar to Jinja. And if you've ever worked with Shopify's Liquid, it's very similar to that. Okay, so we know what the module is called and we can actually just fetch it. Let's actually make sure we're in the right directory though I'm doing this a little slower to make sure that you can see what I'm doing. I'm changing directory one step at a time and I'm going into my modules folder in my project because what I'm going to do is I'm going to just go HF fetch at HubSpot slash logo grid, parade module and this is just the path to that individual module. And because I already in the CLI navigated to the folder that is the modules folder, I don't need to set the destination path. I technically could have just stayed at the root of the folder and passed the destination path. But I don't know the way that my brain works it, I. I just prefer doing it that way. All right, now that we're downloading, there will be a little bit of funness because I also have a watch running so it's uploading all of those assets right now. And you'll notice there's a ton of files in here and the reason for that is actually localization. This is a horrifying thing to ever see in a git commit. But 49 changes. But it's all because of these messages files and I will open up one of those. So we'll go to logo logo grid and let's pick the English one because that's the language that I know best, the gist. If you didn't know about this, this makes it so that your module can be used by folks who are someone who speaks a different language and may have the HubSpot interface set to a different language. You can also technically though I don't think too many people are using it this way. You can also grab these strings and use them in your modules code too. That has to be done if I recall. Actually we might handle it for you. I don't recall exactly how it works. I know that there's JavaScript involved, so feel free to chime in Dennis or BJ if you actually know that answer to that. That might be a really weird esoteric thing that most people don't know about.

But to be honest, I never go into locales and never have messed around with this part of it. So I am learning right now, which is great.

Yeah, this is something that especially like. So for most of you you probably won't need to set set up locales. If the company you're building for is just in say English speaking countries or, or one specific language, then you probably don't need to do this. But if you are Building a theme for the marketplace or you're building a theme for a company that is all around the world and may have employees that that speak a bunch of different languages, then you probably do want to implement this. Yeah. I'm curious.

Em in the chat actually does use this like Anton, I know you. You're in Germany. I'm curious to know if you do German and English for certain themes. I'm just curiosity. No need to wait on the answer. You can continue, John.

All right. Anyhow, that's what those files are. So. And the reason it's a lot of them is just because of this folder structure. I forgot exactly how we like how we came up upon this folder structure. I think it had to do with. We followed a format that some other popular localization framework used. It depends on the client, but most times it's plain English. Makes sense. Yeah, but so those strings actually correspond to the fields as well as they can correspond to strings that you use in the module itself for the module HTML. So I was getting to. We're cheating off of BJ's homework. So this is his module as it is. Let me pop it into the page just so that we can see it. Logo grid. Oh, this is a mistake on my part. I should have renamed it. Let me hop into VS code real quick and make it so that we can tell the difference between these logo.

Name it correctly now, John. The right name for it.

No, because it's correct. Not more fun.

Exactly.

Corrector. It's corrector. All right, let's go back into editing. There we go.

Yeah.

And if you ever wanted to know how long. How long it takes for your text to get cropped. That's. That's how long. All right. So we actually have this one here. Right. So that's what we're going for. And then we'll add the logo grid which may technically. Okay, we'll delete this old version. All right. And let's add some logos. Actually we can just go with this default, I think. I don't know.

Snacks.

Oh snacks. Those and styles we can throw. See background. Let's do that. Let's make it just slightly different than our other one. All right. And you know what? Let's make this. Is this doing what I think it is foreign. We're checking your work now, bj.

Yeah, I don't know where isn't snack. So coming up.

I don't know. Let's throw in.

You're welcome.

You're welcome. Let's see.

Maybe just go blast away all the other Snacks.

Those. Yeah, yeah. We'll just put a bunch of banjos. All right. Actually, let's hit the limit with it. Let's. Let me go back. I'm going to delete this one and we'll clone this. There should be a limit to how many I can create. I thought, okay, maybe let's keep on going. BJ says there might be a. There may be a limit. I thought that the field had a limit. I'm not saying that there should be a limit. I just thought there was one. This is glorious, by the way. This should just be.

We're done.

I'm gonna have to send this to. To a former hubspotter. They will. They will love it anyways. It's their dog anyway. Okay, so John's still trying to find out if there's a limit. Love it.

Gotta be there somewhere.

The limit does not exist. The limit does not exist. All right, well, I did say that I thought there was a limit and we can actually look in the code. I thought there was. I'm kind of surprised that it's not limiting us, but it is what it is. This is the null. Okay, Null. There was no limit. The limit does not exist. You can't have less than 1. You can't go negative. No negative. So anyhow, I want all of what BJ did, except for. I want to be able to set the background not on the logo blocks themselves. Here, let me refresh. I believe I hit update. No, I did not hit update in the editor, so I won't update. But what I want is this white space behind here. I want to set the background color to that to be this color, this darker color. And there is a way that I believe BJ was designing this to work, but it's not the way that I want to use it in this site. So specifically is you could just add a section, plop this bad boy into a section, and then you can set the background on that section. Is that accurate, bj? That's.

That's the intention. Yeah. Trying to not duplicate areas where you can set background. So we're making the assumption that folks at this point are trying to leverage DND areas. And in the event that you are, you can set the background color for sections there. So we're trying to not have two places to set the same thing.

Nice. This is going to look atrocious. I'm just going to set this temporarily so that everyone can see what we're referring to. So we've got the section wrapped around it. It's actually Wrapped around all these modules. This is. This is. If I sat there and flipped between this and another color, it would cause seizures. So sections are hugely useful. They also let you do something else that I want to use the module itself to control where you can center the content within a specific area. I'm not going to do that in this particular case. I don't honestly have a great reason for not using the section here. I just wanted to make this as straightforward for someone to build out new pages as I could. I could have a better way of doing this that I would recommend y' all doing is do use a section and then you can do this. This is not something I ever want to reuse, but let me. Oh, hang on. I am clicked into too many things. Okay, click on there. I'll just click it this way. All right, so if you're on the section, you can actually do this. You can go save section. I'm gonna do it. It's gonna be atrocious. It's not the thing that we actually want, but. And that's not how you spell that.

Anyone have an answer to this D and D sections question? That is throw it out there.

Why you.

While. Whilst you cannot nest D and D sections, so you can't have like a section in a section. Like, that's where rows and columns start to come into play. So I mean, I don't think you really lose. Lose functionality. I guess the only thing you do pseudo lose is like the ability to set a column or I mean, a section inside of a section. So if I have like a section that's constrained and then I have a section inside of that, trying to be full width like that.

Yeah, yeah, that'd be weird.

But really it's just the architecture of like, yeah, you can't have section in a section, but you can have section. You can have columns inside of sections and those can keep nesting. So you can, as far as I know, just have unlimited nested like columns and rows inside of sections. So you should still be able to get that. That architecture. Albeit I will admit that if you're trying to hard code it, it is a little swanky to get the syntax right. And maybe John, maybe you can demonstrate here. But if you switch into developer mode, this might be just a cool till today moment for people, but you can switch into developer mode. This is available to everybody. When you're on a page editor, it actually opens up some new options when you're hovering over a D and D section, One of those switching into developer mode, as John is showing here is just adding the query parameter Developer mode equals true. But the cool thing is that if you build a section and then you can hire hover over that little corner, which, yeah, if you just go to it the other way. Again.

Sorry, I was lazy. It's because I have this. I have a floating header. So.

Well, it gives you an option to copy all of your, all of your Hubble. That, that section is right. And that is super, super useful because you can just copy the Hubble. You can build the, the page or the section that you want in the page editor with all of the nesting the way that you want it and then you just click Copy Hubble and then you can just go paste it in your template and then it comes with all the modules and all the like data links that you have, stuff like that.

Bj would you consider that to be working smarter and not harder?

I would consider that to be working.

Eight images, not these. We have these eight images. And I don't want to have to reset this on the production account. I want, as soon as I upload this module to the production account, I want those images all set up. So the way that I did that is all of the image URLs are on the production account already and I am just referencing those and then I am setting defaults here for every single one of those as well as the alt text, etc. And I'm letting the module control its width and height on these images so I don't have to actually set a value here. Was someone about to ask a question? I heard a.

That was me breathing deeply and just excitement.

All right, well, breathe deep because I think, I think I should just show the little Easter egg that I was working on that inspired the theme of how to work smarter and not harder. The reality of the situation is that I productively procrastinated, maybe I had to work on the whole logo parade module and a couple of other modules that are in the mockup and I was just kind of getting a little bit bored, I guess. And so instead of working on all of that, I spent my time doing this. So if you open up the inspector on the developer's website, obviously this is not right now, although we do actually have a similar Easter egg on the current Live Developers homepage. If you go to the console and you do not have all of the settings showing, we have a little, little Easter egg. So you like to look at what makes things tick, huh? If you click on that. Let me, let me make this bigger and actually let Me. There we go. I spent way too much time on this. Yeah, this is. This is some SE Arts sprocket work here. And. And I didn't know that you could actually style things like this in the console, and so I spent way too much time learning how to do exactly that. And buttons are not a thing that you can technically do in. In the console. So that's why it looks like this where there's these buttons, but they have the link right on them. So anyway, if you want to be like myself, Dennis, or BJ, and. And you love building HubSpot websites, I guess this is your way to find the careers page.

John. John, you should have, like, your reference in there so you get credit for any person who's hired via this.

Yeah, yeah, that's a good idea.

That would be funny. That would be funny. Get credit for everybody.

It's like passive income coming your way. Just people hired.

Boom, boom, boom, boom, boom. For reference, for those who are not HubSpot employees, HubSpot employees can refer other folks to join HubSpot, and if the referral succeeds, then they do get a bonus. But do not go messaging us with a million requests to work at HubSpot. We will only. Only, like, support the folks who we truly believe will make a great contribution and. Yeah, get a cut. John. Oh, the days of it at the art. The at the art days are coming back. I think so. All right, well, that's all I had to show, unless you want to see how you actually do the console log stuff. You guys interested in that? Feel free to drop in the chat.

2, 3, 4.

I'm gonna answer for you then. If. If you ever had apologies. I have to sneeze or not. If you ever thought you. Oh, man. I will try not to sneeze, I guess.

Thank you. Thank you.

I didn't get a choice. Okay. Anyway, show us everything. The snot and everything. That's what Anton. So the way that you can create something similar to what we've got going on is you're using console log. You can. There's also, by the way, if you didn't know, there's console.info and console. Warn. I did not want this to come. Come up as a warning, as I would make it look like there's a problem when there's really not. So I think I just used console log. Yep, Log. And the way that it works is really weird. So you can see these variables here for orange text buttons and white bold. These you could think of as CSS classes, but meant for the console. As you can see, all they are is just an array of some CSS properties and values. Then we're doing this join, which is just making it. Again, it's just acting like css. But then what we do to actually make this work is a little weird. More than a little weird. So you can make a console log be as structured as you want by using the little tilde sign instead of quotes. So it will keep all the white space. And that's what we're doing here. And then the way that you can control the colors is. I don't know who came up with this. Probably some terminal, like, like a person who designed a terminal or something came up with this. But you use percent C to reference just like you would in. In like a JavaScript string, doing something like dollar sign. And then whatever the the variable is, etc. It depends on what framework you're using, etc. To do things differently. But instead of referencing the variable though, you do percent C. And the way that it works is you actually have all of the text is one quote, basically. And we're using Tilde's for this. And then all of the references to the colors and the styling are all properties that follow after that text. And so the percent C starts off referencing the first one here references sprocket, which are these styles. And then the next time it hits percent c, it hits orange text is a bizarre thing. I, I don't know why it works this way, but it does, I guarantee.

You know, you said productive procrastination. The reason this is a exist is because some other developers somewhere else just was procrastinating on what they should have been doing and they built this instead.

I, I agree, I agree. They're like, they're like, I'm supposed to make it so that you can change directories in the terminal or, or they're.

Like.

Well, I got to make it so you can do some nested debugging here. No, I want colors. I want colors, font sizes, I want padding. Yeah, we gotta make this look sick. So anyways, that's the gist of how it works. And also, if you didn't know, you can group, you can create these little dropdowns using console group and console group end, which is a little weird to me that it's not like a function, like, not like, where is it console group collapsed. So you can also do console group. But I wanted the initial state to be collapsed so that every time you open the inspector, you weren't getting like shown this massive thing. I wanted to be able to see other things. It was mostly for my own convenience because I'm the one who's looking at this most. But anyway, so it's weird. You run a function to open the group and then you have to run one right after to close the group with group. And I would have thought that you would have like had a function and you'd pop everything else inside of that function to define the group. But that's just me. Maybe it's one of those weird we did it this way when we started working on JavaScript and here we are things. So I guess. Any questions on that? That was interesting. Yeah, it's interesting to me. I didn't even know about the. The group stuff. I definitely did not know about formatting the text this way before I did this. And so I went way too far down a rabbit hole and barely got a logo parade done.

John I would like to get some metrics now on how many people will be distracted from actually doing their duties of building a site. I'm now focused exclusively on console messages.

Just for the 10% of web developers that are actually going to open the inspector. At least you found a rabbit. You're right.

Start adding these messages. Hidden secret notes in all default assets, so be ready.

That would be amazing. And really noisy. Especially if it got. Well, it wouldn't have to happen every time the module is on the page. Ideas. Anyway, that's all I had. I think. Well, I'll. I'll say a few things and then if I miss anything. Dennis, that you think that we should call out, feel free to shout it out. But I do want to say thank you all for joining us. I hope you had a fun. Had a fun time and possibly learned a little something. Hopefully it was something useful. We're going to do more of these streams. We're thinking of doing both a performance focused stream and accessibility audit stream. And if we can get our chickens in a row for it, we'll also do a launch stream. It's almost the end of the month and that means a new HubSpot developer changelog roll up is coming out and we'll be talking about new features and updates to the HubSpot platform. And if you'd like to be notified about changes like that right away, please subscribe to the HubSpot Developer changelog. It is right here. You can sign up right here. Please don't email me. Yeah, if you'd like to be notified, sign up and the URL is developers.HubSpot.com changelog. Other than that, we have a developer newsletter. You can also find that. I believe it's listed here. No, it may be at the bottom of the page here. Developer newsletter.

You have to really want it to.

Get the newsletter, apparently. Newsletter. Okay. You can find it up here in the resources drop down and again you can go to this page. It should. If you've been using HubSpot for a while, it might fill in your info for you like it did for me. And you can sign up to get the the latest news from HubSpot about HubSpot development. You'll find out about things like upcoming events when Dennis is doing another stream, when there's a developer hug. Lots of good stuff. Yeah. Did I miss anything? Dennis, well done.

I mean, speaking of developer hug, there is a new one come up on the 29th of August at 2pm Eastern which will be called Road to Inbound, where we'll go into what developers should see at the Inbound thing that happens in September. Yeah, John's gonna continue doing these. Let us know. I put on the screen a link. I assume that it still works, John, so if it doesn't, I apologize. Fill this form out because we take the feedback seriously and it helps us improve. We also are very curious to know like what kind of content you like to see. So if you want to see, not just John up here talking about the console, if you want to see BJ doing some, you know, maybe some JS fields for example, in the future. That's right. Bj. I just volunteered you, buddy. We also have another developer advocate who specializes in REACT and the UI custom cards. So if interested in that, let us know because we want to put it all out there and we kind of enjoy doing this, so hopefully you do too. That's it. That's all I got.

Thank. Okay, thank you all. I hope that you can productively procrastinate the rest of the day away. Happy Friday. Have a good one.