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

It. Hello world. Happy Friday. Thank you for joining us. I'm John McLaren and I am joined by my colleagues and good friends Dennis and aj.

Hey, Johnny.

Hello. Today we're going to be trying something new. We're going to live stream building website. This isn't a demo. The project is real. This isn't scripted. You're going to see me make mistakes. We're going to debug some things. We'll make some decisions in real time. And while I have buried the lead long enough, I am building. Well, we together are building. Are building. The developers.HubSpot.com homepage and Dennis, AJ and y' all are here are going to be a bunch of backseat developers. The stakes here are real friends because I know every single one of you has probably inspected the HubSpot developers website at one point. I did it. I'm sure you did it. We're all in this together, as I said. So if you suggest something that we think is clever, you might get something a little neat. We'll. We'll show you what that is later. If you have any questions about what I'm doing or about learning web development in general, ask. We'll do our best to answer. And as I said again, we're in this together. So I'm giving you all a choice right off the bat to steer the direction of the screen. I'm pretty proud of the header navigation I'm working on for the site and I could walk you through how that's working. It involves GraphQL and some newfangled HTML and CSS you might may not have seen before. Or we can jump right into building a module. So please answer in the chat with the number of the option that you'd like. Don't worry, I'll wait.

Newfangled HTML, that always brings an eyebrow up.

Are we there yet?

I'm seeing a lot of happiness with number two, John. I. I feel like this is going to be the one and I agree. I'm really excited about this. Although Anton says do both at the same time.

So at the same time, I don't know if I can split screen that that's in my brain. I don'. I can handle that look like a.

Scene from the movie Hackers.

Just John with two keyboards just going back and forth. But I will start. We'll still get to building a module. Don't worry, don't worry. We'll just start off with the header. Now ignore this section in the content here of the page. We'll get to that later. This will Be part of the module that we're building. But I wanted to show you the header and why it's a little bit special. A couple things. Notice when I scroll the page, it does that nice little animation. I bet you all have done this before but you had to use some JavaScript. No JavaScript involved.

Liar.

I will prove it. I'll prove it. Don't worry. Don't worry. Another thing, as AJ and Dennis know, I'm huge into making sure that websites are accessible and I encourage you all to do the same. And I will hopefully shed some knowledge around accessibility throughout these streams. But the first thing I wanted to mention was so something that's super important for a header navigation is that it needs to be keyboard navigable. So first off, obviously we need that skip to content link that's the default that comes with the HubSpot boilerplate. But this is a language picker. The language picker is completely keyboard navigable. It's also collapsible using that. And if I turned on. Actually, you know what? I have no idea if you can hear this, but you'll be able to.

At least see voiceover on Arc Styles window. English collapsed button has keyboard focus. You are currently on the button. To click this button, press control option space.

Just wondering, AJ or Dennis, are you able to actually hear that?

Oh, yeah, Very, very much. I sound like my mom was calling me downstairs for breakfast.

Yes, Voiceover sound coming through kind of loud. Okay, sorry, I don't know if I can control that. Super well, if AJ or Dennis, if you're able to tweak it, go for it. Otherwise. Otherwise, let me show you. So when you are going to have.

Like some kind of skip to content English collapsed button. You are currently on a button. To click this button, press control option space.

It needs to say it's a button that you're on. And then when you press that button.

English expanded button needs to say visited link. English 6 items. You are currently on a link. To click this link, press control Up Link Link Link Link Link Login Link Documentation Collapse Documentation Expanded link link. Okay, Sources Expanded. Voiceover off.

Mom's talking to me too much now. I'm coming down, I promise.

All good. If you've never used voiceover before, the keyboard shortcut to opening it up, I think the Default is command F5. Don't do that now or else you'll be driven nuts until you hit Command F5 again. If you're on Windows, I honestly forgot what the keyboard shortcut is. So Google it. I forgot. So just Google it. It'll be fine.

And a show.

But anyways, this nav was a pain in the butt to build before because you needed to have these actually be links and you needed to have these be buttons. And then you would have to use JavaScript to tell the acceptability tool that, hey, we've expanded this other element and you had to communicate what element it was and everything. Yeah, I didn't do any of that. For this, I did something a little more fun. I'm going to quick open up the header navigation files. Let me just close some of these other files. We'll get to them, we'll get to them. But first off, I can actually show you that scrolling behavior that I was talking about. So. And can I minimize that without closing it? I'll just shrink it. All right, so the trick to make it so that on scroll, that first part of the header disappears is actually just a CSS animation. And the way that it's actually working is we're using a new thing called animation Timeline with the property of scroll. And then you can pick root. Root means literally root, like how HTML root here. Just checking the chat. DJ John coming. Anyhow, when you set it to scroll, it is looking at the entire document and going, has the person scrolled at all? What percentage of the scroll bar they scrolled? And the other part of this is block. So you're going to notice something else about the code in this whole site. Let me see if I've got an example here. All right, so you might not have seen this before, but have you ever seen the CSS properties block size and inline size before? Feel free to answer in the chat. And I'm going to change one of my windows so that I can actually see what you guys are saying more easily.

I have to say I am super glad that nesting in CSS is now like a native thing.

Me too. I've been having so much fun building this because I get to use all the things that I wished I was allowed to use before. But browser compatibility was terribound. If you haven't seen inline size or block before, what this is doing. And I'll actually demo this in real time if you're not sizing things this way just for context. Block and inline are directly related to if you've ever seen a div. How a div element works is if you have a div and then you put another div directly underneath what happens, it will stack the two pieces of content one over the other. But if you do the same thing but with a span tag, what Happens. It'll actually put them side by side because it's acting like text. Block refers to vertical adjustment, but not quite. There's a reason. And then inline refers to the text before and after. Yes, you are getting quiz Dennis or aj. I don't know which one of you put that in, but anyway, so what it's doing is. And it is actually super cool for a lot of reasons. But if you do border, for example, I will just do it on an actual element here. Let's do it to the HubSpot developers logo. Don't tell our fabulous designers that. I'm going to do some things they would probably not love, like putting a border block. You know what, we'll just do border block for now and then we'll do five picks solid and then var C. Solaris.

Solaris. So nice.

Let's see.

Is there any way to bump the size of the dev tools, John, to.

Yeah, one second. Of course, the live demo. So that's the other direction.

That's not what I wanted. There we go.

Maybe it's just because it's something in the header. Let me do it to this H3 quick. All right, I will expand this out too to make it a little easier to see. So we'll do border. Actually we'll do. We'll do padding, padding block and then we'll do 15 pics. We'll make it more exaggerated. All right, so what you're seeing here is just like you're like adding padding to specifically top and bottom. You can do padding block and set both top and bottom at the exact same time. Super useful if you don't want to be setting the left and right side at the same time. So you can do that. The other part is padding block starts and we'll do 60px. That's bad example necessarily, but so now we can change what the top padding is. And the reason that it's start and stop and why it's block and inline is this. So basically these are called logical properties in css and the reason that they are called that is you can change direction for different languages. The way that you read can be right to left instead of left to right. That means that visually all the text should flip flop to the other side. If you did not program using these logical properties, this becomes a real mess for you. So let me show you how our site will actually handle it. So RTL for right to left, an example, A couple examples of languages that do this. So Arabic, Hebrew. I don't Know that we're translating the site directly to those specific languages. But by preparing like this. This actually flip flops pretty nicely. We could pull up a site. Let's see. Actually, let's mess with this site and see what happens. I have no idea if they've implemented it. Hopefully for my. Oh, they probably did.

How's our current site? What if we did the just developer.HubSpot.com yeah.

So the current site does not handle it. Good idea. All right. You're welcome. All right, we'll add direction. It's not terrible. It could be worse. It could be worse. But it still looks a little funky. So here's an example of why that padding. Doing padding the way that I was doing it makes more sense. Sense. So if you're doing padding right. 15px. Notice something? It didn't work. Now if I flip back to the other direction. It worked. Well, it probably did. Let's see. Inspect. Actually, I should use margin or something because there's already a padding on the button. That's a bad example. So use margin. All right, so there's margin there. And then if we change it to change this again back to direction. I lost it. I'll just try right here. Rtl. All right, so now we've got that padding on that side. But what if you were not trying to do it? Only when the text is right to left. You actually just want it to always be that way. Well, the trick is this. Margin, margin. Inline end 15px. Oh, now we flip this. It'll still be on that side and I'll flip to the other side on oh man. Live demos. Well, the gist is that by using these properties you can make it so that it'll dynamically adapt. Hello Sir, I'm in 10th class. What do you suggest to learn further? I like AI and I would say there's a few different AI libraries out there as well as. Actually, I know this is a little detour, but I think it's worth it. A lot of people will find this cool. Google has a new thing coming out for AI that's built directly into the browser. You don't have to use OpenAI's APIs, etc. It's opt in right now. It's a beta. I don't have the link actually offhand, but so I do recommend checking that out because the future of doing AI, especially when there's sensitive data involved. So like say contact data and other types of data that you don't necessarily want to hit Another API for it. It's going to be client side, local, locally based. So check that out. You can also run use it. Use JavaScript to run what is it called? Lambda and TensorFlow and a few other machine learning scripts. All right, anyhow, so another little thing, another example of something that was done using that same CSS trickery was noticed that the dropdowns actually flip sides when you change the direction of the element. So anyways, that's the gist of why why you should build with logical properties. There's also another way. I did not optimize for this because only a few languages do this and it's optional is totally optional for those languages to do. This is not the default behavior. But this is going to make this look really janky because again I didn't optimize for it, but you can actually make websites display using a vertical writing mode.

This looks better to me. This looks more appropriate. This is how I read sites.

So horizontal scrolling only.

Yeah, yeah, please.

So the reason that this exists is so if you write Mandarin as well as not sure if Japanese does it. A few other languages they have, perfect for strolling in bed. Yeah, a few other languages you can actually write vertically. So that's when you'd use this writing mode. As you can see, it looks a little funky to us when it's in English, but that's the logic behind it. So I'm not optimizing for that. Again, that's just not one of the languages like a specific thing that we're aiming for. But it's all right. I did mention one more thing. That's Enable Nap mode. There's another cool feature here that I'm using to make the menus accessible. If you haven't heard of it, there's a new thing that is. If you have not heard of this, there is a thing called Project Baseline MDN Popover API. Okay, they're not showing it here.

Is it bad that while I saw that on screen I read pop tart rather than pop over? Maybe it's because I haven't had much yet.

It's lunchtime. That's normal. That's expected if you are not familiar. Again, I guess I'm diving into CSS because I love css. And this is also HTML if you haven't heard about it. Browsers are doing a thing called Base Project Baseline. The gist is they're trying to make it so that new features that they are introducing will be by default cross browser right off the bat. And so Popover is already Cross browser for all the modern versions of all of the major browsers. What Popover does Popover, we'll go back into our site. Popover is what makes this whole shindig possible. Something that you used to have to do on button elements, if you're going to do this is you would have to specify what you are expanding and then you'd have to toggle an attribute for saying whether it's expanded or not. And then you'd have to handle all the css. And there's also another little annoying thing. You used to have to care about the index. If you had a menu like this. You used to have to do something like Z index 999-999-9999 to make sure that nothing that was in the page content would show up over the top of your menus. It was the worst. Thankfully, browsers and W3C team together to make it so that you can just do this instead. I'll show you in the HTML.

I remember when I first started doing web and I learned about Z index that I didn't think about sets of 10 or 20. To do the Z index, anytime I needed to change, I would have to go back and change 75 different things. Because my numbering, it was like probably six months into it that I was like, why don't I just do this by tens to give myself some buffer. I remember just completely like hating myself at that point, being like, oh my.

God, why did I do this?

Been there, been there.

Absolutely. I've been there as well. All right, let's see. Render link. So I guess we're going to get into a little bit of the craziness that is how this menu is actually set up. So before that though, all I want you to look at is this code right here. If blink has children and the depth is greater or is less than 2, we're printing a button and then we're adding this attribute called popover target with an id. And then we're just adding this SVG just for the little dropdown chevron. And then in the actual children, we're adding the attribute popover and an id. This is all you need to do to make it so that it's keyboard navigable and clicking it will pop up the popover. And it also means that you don't have to do this Z index anymore. The reason that the index thing, you don't have to do it anymore. Browsers invented a whole new thing called top layer. Basically they throw the element in the. Like in the rendering pipeline. They Throw the element all the way to the bottom of the page and then basically give it like a fake Z index. So super handy. And it makes it so that you don't have to write a bunch of JavaScript. So there is no JavaScript in this header at all right now. I might add some for the mobile menu. Haven't gotten there just yet.

So, John, in your code there, you're using the menu items. Do you want to speak to the difference between using just the normal Hubble menu generation thing that we have and then being able to actually use the menu function to iterate through things? Because I don't know how many people know the difference between those two and the power of the menu function.

And Great call out, A.J.

Great call out.

That was enabled. I know back in the day, the second that dropped, I basically changed any menu thing that I was doing to use that function because it just provided more customization and just control over.

So great question. I'm going to actually pull up our docs. Really?

I know it's a great question, John. That's why I asked.

I already had it pulled up there. All right. What AJ is talking about is we have a function. This is for if you are feeling like you want to manually control all the HTML and code for your menu. Otherwise we do have default menus as well as in the boilerplate, we have a menu module. I will show you what I'm doing here in our code. R code's a little bit different. So this is specific to how we do the HubSpot.com and developers.HubSpot.com websites. But I'll show you kind of what we're doing there. But first you mentioned that function. So what it does, we click the docs. All right, so it will give you an object. Where is it? Menu, Menu items. So if you do menu and then you provide the menu ID or name, or you can provide default and it will default to your default HubSpot menu from the advanced menus in HubSpot Settings, Site Settings. Then you can pick from a few different ways that you want the menu to actually operate. So let's see here we jump over to the function docs. The options are that you can do site root. This is what you normally do for like a header now. But you can also do different things like top parent, which is great for situations where if you want to have a sub menu that links to all of the sub pages within that section of the site, that's what this is great for. Then breadcrumb, if you need to build a breadcrumb menu, like horizontal type menu. You can also just use the breadcrumb option and it'll give you those links in a really nice format. So this returns an array of links, objects and let's see link for that. If you want to see all the different options, all the different things that show up in that object. It's also in our docs menu node variables. You get the label, the URL. You can also get the content IDs, which is useful if you want to do any metrics, tracking, etc. The link target if you want it to open in a new tab, etc. That's the normal way of doing it. That's actually how our menu module, the normal boilerplate menu module, how that actually works. So this is the boilerplate menu module and it does exactly that, children, is how you get the menu. What we're doing inside of the menu though, and I'm doing this in the developers.HubSpot.com website as well. But I thought that this is probably worth stepping through because not everybody is actually taken the time to actually understand how our module is working. So let me shrink this down a little bit more so you can see more of this and I can't Curious if a video dedicated to building an add model. Yeah. If you guys are interested in learning more about how to build really sophisticated menus, definitely let us know. We can create a video about that. But so the idea is we have a macro that we're using and so if you are a part of the Hubble Mastery live stream that happened, was it two weeks ago or a week ago? Yeah, some macro tricks and tips happen there. But basically what we do to generate a menu is we create a macro for the individual link item. This is the individual menu item, not the whole menu itself. We then generate. We go, okay, this is going to be a list item and if we have a URL for it, then we need to have an anchor link. If it doesn't have that, then it's probably going to be a dropdown situation. Then here's all of that crazy ARIA dropdown logic that I told you about. Where you have to have Aria has popup is true ARIA expanded. This is defining whether or not your dropdown is visible and you have to use JavaScript to toggle it on and off the popover. We're not doing any of that for the developer's site, but so from there we're just going, okay, if it has children, guess what we're going to do we're going to create a menu button to show that. And then we're going to pass this macro and we're going to go for each of the sub links inside this menu item. We're going to just render link item. You're not catching that. We're just looping. We are putting the macro inside itself. We can infinitely generate any size menu that way. Then at the top level we're just doing for link in menu render link item. When we get to the actual nav structure, nav UL menu items, menu items is just a macro wrapping all that. So that's how menus normally work. I'm going to show you something that's a little bit gnarly, but it makes some sense. It's how we're doing this for the developer's website. So if you have a use case where this makes sense, this is probably going to be useful for you. So, all right, I have some debug statements. You guys will probably find that useful. So let me cover it first. I made a macro so that I can use throughout all of all of the testing of this. Basically all it does is anything that I put within it. So that's what this caller does. Cover it all. Anything that I put within this call and end call statement will be treated as a debug console log type thing. The way that I'm actually doing it is I'm going if requestquerydict hsdebug, then show it. If not, nothing happens. I'm also adding request domain. This is just so that when we go live, people aren't going to just sit there and HS debug and see what's going on. If you didn't know about this, let me go back to our page here. There's a Chrome extension, I built this before I came to HubSpot that lets you toggle on a query parameter called HSdebug equals true. So if I toggle that arcs being goofy. Arcs never goofy. Yeah, I've had that happen to me a few times lately, so I don't goofy.

I am curious though, like how many people just in the chat, like how many people are actually using that HubSpot developer extension? Because I know, like I've had it since basically since you created it, John, like beginning of time, like if anybody else is using it, like sound off, let us know.

Yeah, drop it in the chat. I'm watching. Otherwise, what I was referring to here is so when you add that query fram I need it using it for sprocky. Yes, absolutely. If you didn't know? Sprocket was an April Fool's joke that AJ and I pulled before we came to the spot and pranked around 3,000 HubSpot developers. Very fun story. We'll tell you about it some other time. The HSD bug, all of a sudden when that's in the URL, it spits out all this stuff into the head of the page. Basically I can look through all of the menu logic that I was doing. Basically, that's all I'm doing with it. Feel free to steal that macro. Super useful if you do have the extension. Fun fact, if you've already got HSDEBUG enabled, you can just click it again and it will undo the debug mode. We're going to talk about the way that this menu works and why it's weird. It's necessary for me to create sections. Yes. So the reason that our navigation menu is weird on the developer's website, and this is also applies to the HubSpot.com website, is our localization team already has a process and a way that they like to do automating some of their translation and it's not fully automated, like it's still human. Humans are looking at it, but they have like a whole process that they use for it. So what we're actually doing is we have pull this up. By the way, if you didn't know, there's a bookmarks bar now in the main nav and you can add your favorite pages to it. So I've got HubDB in here. Let me hop over to HubDB. I have this Developers Nav Data V2. This is our menu. It doesn't look like much and it doesn't look like it sports nesting, but it does. So this is an example of how we're making it so that we can localize this header really easily. It's kind of like taking a CSV file, shipping it off to the localization team they can take back. Somebody just dropped into the chat. We have a good feedback form. Please fill it out. We want to learn what you liked, what you didn't like about the live streams so that we can keep doing this and keep improving otherwise. So what we're doing in here is we've got the text that shows up in the menu and then we have the URLs for all of the ones that are, except for references, apparently all of the ones that are not actually a link, they're just a button to drop down. We're putting a hashtag here. There's no Actual logic for it, it's just getting ignored. It's just a visual to make it easy to see. But we also have a has dropdown. This actually is something that we used to do, but I'm not even looking at that value anymore. Instead we're using order. Order determines. Let me plop these side by side. Order determines which order these dropdowns appear in. So documentation, resources, community, etc. And then we have a parent ID and a child ID. This is determining basically what things fall under these dropdowns. So is there a benefit not using a dedicated Hub DB per language? That's an awesome question. You can do it both ways. The only reason that we're not doing it that way is that's a lot of hub DBS. Like. Like really like HubSpot officially supports. I think we are up to like nine languages. HubSpot official language. Holy moly. It says 11 more rows. We got a whole lot of languages here. So this would be a Hub DB per one and that's a lot of work. Oh, hi Mark, I'm in Wisconsin. That's the origin of the room. So reference there. If you don't get it, don't watch the room. It's known as the worst movie of all time. Anyways, so we're doing this crazy Hub DB stuff and in order to do that and not lose my hair, which I'm already losing, what we're doing is we're actually using GraphQL to grab the hub DB data. Let me show you all first, if you didn't know you can use GraphQL inside of your modules, you can absolutely do that. The best first movie of all time. So you can add a data query path to your module and this path is just a path to another file. So it's literally. I have a file. Let me collapse the CSS and modules here and templates. I have data queries and I have this main NAV graphql file. That's all that this is linking off. This is a GraphQL query. There's some cool things that you can do like using Hubble to pass variables. I will be doing that here. I'm not currently. I've just pre prepped it for doing that. So right now it's English only. But I'll show you if you've never used GraphQL before inside of HubSpot. So I don't have the NAV enabled for it. Let's see. Can we grab the. Just wanted to test that first before doing it this way. So there is a link in our developer documentation.

Do not follow Brook's advice on leaving. Stay with us, please. But please go check out GraphQL.

Brooke, what you doing? Okay, so in our developer doc, we know there's a problem that you can't easily find this tool if you do not have the CRM development tools. I've talked multiple times with the teams in charge of our navigation. Hopefully we'll get this into a better spot for you to be able to find it. But there is a link for GraphQL.

Nice.

That link takes you to the link for GraphQL. Then you can go, maybe I should do this off of the stream so you're not all looking at every account that I have, but it'll let you pick which account you want to operate in. And I will quick put it back up on the screen once I'm done. Developers. You know what's a bad search term to use when you're a developer advocate and you're looking for your staging site? Typing in developers when you hit command F when you're looking for accounts. All right, here we go. So here is the tool GraphQL. If you're not familiar with GraphQL, like, you've never used it before, don't worry, you don't have to know it. It's a query language that makes it really easy to get the data that you want out of Pub SQL Spot in the format that you want. You can filter requires tails or enterprise. No. Oh, wow.

With a snap. He says no.

GraphQL is available for free in every tier. The things that you can query, though, that depends on what tier of HubSpot you have. So HubDB. HubDB is. I do want to make sure that I'm not making something up because we did change things recently, but you better be right, John.

That was a very aggressive snap and I really want. Mark is a little upset about it.

Yeah.

And to all people, Mark, I mean, come on. Ah, yes, the CRM Dev Nav beta. Yes, that is correct. Then, Mark.

Yeah. Yes, correct. That's where that tool currently resides. That's why it's kind of funky to get to it right now. If you do not have sales or service enterprise, but HubDB is marketing hub, Enterprise or content hub, Professional or enterprise. So if you want to query that with GraphQL, you can. So here's what I how I'll explain this. So in order to grab our nav, I'm going to go rogue here and show you how easy it is. I deleted that whole query. We know That I created a HubDB. We know that the Hub DB's name is called Dev Site Header. We know that it is a Hub DB with a bunch of rows. And we don't need the metadata for the HubDB. We want the rows of data so we can go Dev Site Header collection. Notice how it's generating the query right here. We know that we want all the menu items. We know that the fields, the columns for the Hub DB involve name, they involve tax, they involve URL. For example. Now if I hit this play button, which means run, it'll run that query. It'll show you a query complexity. This is a system that we use for handling limits because you can literally query everything inside of the CRM and all of your DBs in one query if you wanted to. And that would be super, super expensive. We have limits on complexity and some other little limits. And they're using this point system and basically you want to stay under those points. This is not a complex thing to do, just querying one Hub DB with a couple of properties. But already you can see that the value that we're getting out of this is we're getting all of the rows right here. We're grabbing the name, the URL and then we can also grab, say if they had a drop down, someone was going to ask something.

No, just make it anywhere.

We can also grab the order. So this again is determining the order that these appear in. But maybe you don't actually want the order in the data. You can do this. So you can go, I want the data to just be ordered by order and you can pick whether it's ascending or descending. And so then all the list items that you get are ordered based on that. So that makes creating this menu super easy because I have all the data I need and the actual query that I'm doing is this one. I'm grabbing the text, the URL has dropped down. Name, language, order, description, parent ID child ID GTM code is English URL. That's something we're using for translation sake, in case a page does not have a translated equivalent. There are certain times where that might be the case and someone going to ask something. So I was a little, a little, a little ambitious, I think. So I wanted to retain most of the cool logic that was done for the render link macro, but I wanted to do it using the GraphQL version of the menu instead of the actual menu function because we're not using the HubSpot menu system for it. So instead we're actually setting, let's see. Well, first I mentioned that we have in the meta, this is where we have that query. So once you've got that, you can then query against it. And let's see. Main nav. I have main nav query. This is the Hub DB graphql query. I'm just setting it to a main nav query variable. And this is some crazy logic that I had to do to do this. But basically I need to find out the parent child relationship and I want to regenerate the same exact structure that our menu module from the boilerplate uses. Because I actually really liked the format that those links came in. I'm actually translating every single link into that format and then I'm looping through them to actually get the child objects and I am appending them to an array and then that way when I do the actual menu macro to generate the render link items, I'm using the same structured data and I am just doing the exact same thing that you see in the boilerplate menu module with the exception that I'm using popovers because I wanted to minimize how much jugs script I was putting into the page. That was a lot. That is the summary of how we're doing the menus here. There's a little intense. Let's see, we're at 10 minutes.

Yeah, 10 minutes, man. Let's make a module in 10 minutes. You got this.

We can try and get as far as we can. Otherwise please, please fill out the survey. We would really appreciate that. If one of y' all can drop it into the chat again, that would be awesome. We want to learn how we can improve doing these kind of live streams. Again, I did not really have a plan for this, so you guys actually dictated what we were looking at. We will try to be more productive maybe in getting some modules done in the future. But I think it's a lot of fun when you guys get to choose things. In fact, we did a pilot live stream and we started building this module here and I will give you at least a sneak peek, an expert's viewpoint. Thank you. I try. I try to be smart.

You're not half bad.

I will at least show you what we would have started working on had we gone the module route first. This is a portion of the mock up for the developers homepage. There's a fun banner here with a hidden secret to it. It's not really a secret if you tell people, I bet. But then we have these cards and then on mobile the cards are going to do this interesting horizontal scrolling Thing this mobile mock up is not with exact pixel values or colors. This is just something that the designer was able to pull together right before going on vacation.

We're totally going grayscale when we go mobile. Oh yeah, that's full on design. That's it right there.

That makes the contrast with accessibility stowage. You know what, we'll take it a step further. It'll just be black and white. The CSS will be next to nothing. Anyhow, I can step through what we're doing with that module real fast and we can try to make some things look a little bit better. What I've done. I'll show you some ways of thinking about this. We're splitting things up. So notice how in the mobile mock we have this section which matches this section here. And then we have. In the mobile mock, we have this, which is not in the desktop version, but we need to accommodate for it. It's not in case we have some cool announcement that you guys are going to be all excited about. In the desktop version, it'll probably appear above this heading, but then we have a separate section here which is that grid of cards. So what we started building out is this bottom section. This part I have some fun ideas that I want to implement. But we start out with building this and I'll show you what that looks like. Feel free to cut me off, Dennis or AJ if we get to a point where it feels like it's going too long.

Nope, I gotcha.

So quick question, John, for the. Where you're doing the craft, exceptional experiences and stuff like that, right? For the heading there, are we going to make that an actual heading field similar to. I think now on the docs the little chain icon appears before so you can quick link to it. Are we going to keep that.

The chainlink icon thing? And if you are not familiar with what AJ is talking about, I had built this. I am a huge fan of it. For all of our headings, you can hover over the heading and you can get this little chain link icon and you'll be able to click it or just right click it and you can grab the permalink. If you click it, it'll show up in your URL. That way, if you're ever trying to help out a friend, if you're not already in our developer Slack, please join it. Smart people are helping each other out there. This is for you. You can grab a link to a specific heading in the doc and link someone else to it. You can also copy the link from here. Too, if you want. But anyways, that's what AJ's talking about, I think for the content pages. So our. Our actual dev docs will probably do that for the home page. I don't think we're gonna have these in these modules just because this is more. This isn't referency. Oh yeah. I wasn't gonna totally tease the entire design. You'll have to come back the next streams to more of the design. But these headings, we're not gonna probably do that, even though it's not that hard and it's cool. Tell people to yes, please do read the manual. AJ and I worked very hard on that when we first started at HubSpot. Most of the CMS docs were initially written by us that you see. And then we have now a dev docs typewriting team who are wonderful and have written most of the docs since and continue to update them. Speaking of which, one quick other call out. If you didn't know there is a feedback form at the bottom of every doc, please do use that. If you find something that is inaccurate, unclear missing information, or there's some irrelevant stuff to what you're looking for, let us know. We do actually look at the feedback. There's a ton of feedback that comes in as well as people just asking weird questions. It's not a place to ask questions. Like if, if you're trying to get a job at HubSpot, this is not the form to fill out. There's a career page. Yeah, so that's almost that.

Once a day, just talking about John. Once a day, some comment about what John's doing.

I think it's good to call out in this. In this part too. Like as John said, like we do read a lot of this and I know like this has been something that was talked about when we did the extend event a while back. Even in the developer Slack, if you guys are talking, we are watching. We may not always respond to what you are saying, but I can guarantee you that there are links constantly shared in our internal Slack that are directly linking to comments in the developer Slack. And teams do discuss what's happening in there, so don't feel like you're just shouting into a void. Like we are actively listening. We are paying attention to what you guys are saying. It's just we can't publicly comment on some of the things. But you can guarantee that there are conversations happening in the back end in HubSpot around a lot of the stuff that you guys talk about.

Absolutely. Yeah. Well, let's See, we have two minutes. How far do you think we can get?

Any design decisions or code decisions that we need to make in terms of the module.

That's a great way of breaking this down. So here's kind of the thinking that has been started so far is we know, all right, we need text right up at the top. So we know this needs to be text. Something that I prefer to do. You don't have to do it this way. You could make. You could use a headline module like Anton just suggested. I'm not doing that here. I actually want it to be part of the same module because I have a feeling we're going to reuse this piece a few times throughout the site. But something else is I don't want this to just be a text field. The reason is there may be times where we want to change what that heading is. Maybe have some specialized text like some italicized or. Or bolded text. Or we might want to have a tagline appear under it like a little piece of text underneath. If you notice, we have a rich text field, which Pro Tip don't name your rich text fields the default values in production. But this is what our heading is. This enables us to go hello world and we'll have underneath we'll get our paragraph. That way you can change that text below. The other thing that we need to care about is this. So we have a grid of cards. So we need a wrapper for this. And then each of these individual cards is a card. Each one of these have an icon, a heading, some tech and a learn more button.

And will these people a blog or are these going to be point where these lead in the end, like the text that's in there. Are you determining on this page or is it being pulled from the description of a blog post or something?

That is an awesome question representing arc. Yes, I'm a fan. However, it has done me wrong a couple times during the stream. Just saying. Anyhow, so your question was, are we pulling this from another page or is this going to be written in the module in this specific case? In a specific one, it's going to be in the module for other modules that will be on the homepage and you'll have to tune in again do a future live stream to see it. But we will be pulling from the blog and we may be pulling from another location in the future as well. So the reason that we're not pulling from a blog is these aren't blog posts. These all have to have an icon and yeah, that's the main reason, as I mentioned, we then have the icon field, we have a heading field, we have text and we have learn more. Notice I did make the learn more be a separate field. You might be thinking why isn't it just like this is just one big. One big thing and that learn more is just a link in it. Yeah, I'm not doing that because notice something about the way that the designer did this. These learn mores are always vertically in about the same exact spot. So I need to in my design, in my development make it so that they stay up. Same spot is also another little thing, is another field that we're going to do on the Learn more. That's because we care about accessibility.

I was just going to ask if you were going to do the thing that we have enabled on a lot of the link fields that we do.

Yes, I am doing that. What AJ is referring to. Let me. Yeah, pull up that module header, nav icon cards, module fields JSON. So this will actually be easier to show in the Design Manager. I close that. All good. We can look at it here instead. So I've created a field group called Prints. All right, where is the beginning cards choice field Children? It's out of or like the. The items in my fields JSON are displaying a little bit out of order. And the reason for it is because I did a little trick that you can do in the Design Manager. Let me just open up the Design Manager real quick. So icon cards. So if you didn't know you can do this, there's a few ways you can make fields JSON. You can do it locally. And something that a lot of people do not know is you can actually create a field like this. You can go field dots, make it be. I don't know, something complicated like background. I think we have gradient. Let's do gradient. Gradient is a complicated one structure wise. So if you wanted to, you can just type field dot and this requires the HubSpot developers extension and VS code. Totally install that. You can type that in and then just hit tab and it'll generate the JSON for you. So you can do it that way. I did originally do it that way. But to try to speed some things up, there's another trick that you can do is you can go into the Design Manager and you can go. And you can add your fields here. You can then customize all the settings here. And then you can do this nifty little thing. You can go to actions, you can go copy JSON and let's Create a new file here, you can paste it and there you go, you have the entire file with all of your fields. Now, getting to that link thing that AJ was talking about. It works the other way around as well, at least for me. Just type in gradient and select the field option. Exactly. And you can also. I also reference the developer docs all the time, so sometimes I'll copy and paste from there whatever you're feeling on the day that it is. If it's a Friday, whatever comes to your brain first, go for it. So what AJ was talking about is we do something interesting with links. So it's not implemented in the HTML, but I will show you right now we are getting a link text field. This is what is visually shown. And then we have an accessible description of what's at that. Learn more text field. The way that you use this is you'd go and in your HTML, let's see, we'll copy this, we'll display it right here. And we don't need all of that. But I'll explain what that is because I know that not everyone knows why this is a thing. So. All right, let me click Add Fan class SR only if you didn't know about it. This is also included in the boilerplate. It's actually got a different class name in the boilerplate. I renamed it just out of habit. I always use SR only. Doesn't matter what you name it. But basically there's a trick to visually hide text. Basically the way that it actually works is really funky and can't believe that this is the universal way we all do this. But basically the class just goes make this thing with a width of one, a height of one, position it off of the page so that it can't be visually seen. Use CSS class flipping to make it as small as possible. It's just a weird trick. Basically the gist of why we're doing this though is so if we have a link and we want our link to have this link text, we'll copy this. Oh, another pro tip. What you're seeing here, all I did to get this Hubble, if you have. This is especially useful when you have repeater groups. You can go to the group and you can go copy snippet and I'll just paste it in into this just so that you can visually see what's going on. It generates the for loop for you. It goes and prints all of the different fields that you have. Obviously you're going to want to put in your own HTML and everything, but this Gets you a huge part of the way. And this guy. I'll explain finally what. Well before I do that, explain again why we're doing the accessible thing, the screen reader only text. So basically a screen reader, when you go get to a learn more link like you can see on the right here, it's going to read out learn more. If you hit tab it's going to read out learn more, learn more. You keep doing that. Learn more, learn more, learn more. That's useless. If you are listening to a screen reader telling you what these links are, you have no idea where you're going to end up. So by using screen reader only text and using a separate field we can go, okay. This will take you to rich code samples. So you could, you could make things easy and just use the heading text and have that be here. I wanted to be able to do it a little bit more like straightforward and explicit. This is what you're getting. Maybe I'll make it so that if you don't enter a value, we'll fall back to using this. I don't know. That's the logic behind that. Then one last thing. Then maybe we should wrap it up because we are 10 minutes over. But you all have probably seen this before. This is a HubSpot history thing. About time we have another video or two on accessibility. Yeah, absolutely. If you didn't know, we do actually have some videos about accessibility on HubSpot Developers YouTube channel. Absolutely. Check them out. There's a cool panel one where we talked with John Sasala, a partner, a HubSpot partner. And also. Oh man, I'm drawing a blank on his name right now. But an awesome person who's an advocate for accessibility and we talked everything accessibility that we could in like an hour. So check that out. But so getting to this inline text thing, this is something that not even every HubSpot employee actually knows. This is a history thing. So before we had this module system you would use these Hubble tags everywhere. These Hubble tags would let you have fields inside of your page and so you would directly click on that field in the page to edit the text. An example of kind of what this looks like. I. Well, I'll just always tell you about it. I can't. I don't have a blog template on. Well actually you know what? I think I might, I might. We'll see how janky it is at the moment because I was not planning to demo this. So we'll see. HubSpot developer blogs, not Japanese. Okay, I guess we're Going with Japanese. Oh, there we go. You've probably seen this before. A couple of different things. You can click in the page and your title gets filled in there. We can do that. You can also have a rich text field and type directly in the page. Well, those Hubble tags that I'm using here, that's what those are for. It makes it so that we can put a wrapping element around your field value so that we can do that. We are not doing that currently in custom modules, but it is something that we could do down the road. So if you want to have your modules magically support that functionality someday when we can get around to implementing that directly in modules, then that would be the trick to doing it. Otherwise, you can just get the direct value for your fields and display that. And then you would still have to use the edit modules pane to edit the. Yes. Sam Prue was the guest that I was trying to remember. Super awesome person. I encourage you all to check out what he's up to as well. So. Okay, John, I think it's time.

I think I'm gonna cut you off right now. I'm gonna encourage everyone who is still on this to go ahead and fill up this form that we have up here, because, honestly, it does mean a lot to us, and we do take feedback pretty seriously. And we will be doing this every Friday at the same time throughout June or until John decides to finish this project. And if there are any other things that you like to see out there, just let us know, because we're always looking for ideas to do for. For y'.

All.

John, AJ thank you both for doing this. And, yeah, I'm excited. I think we'll work on that module finally. Like, really get it going next time, right?

Yeah, maybe I'll get it a little bit further for us, too, so that we can. Yeah. Thanks, y'. All. Cool.

Have a great day, guys.

Happy Friday.