ooh hello and welcome to live coding happy hour on this fantastic March 20th 2020 all right we're joined here with a fun group of people and let's just go dive right into the introductions how about you chuck hi my name is Chuck Tomasi from ServiceNow senior developer evangelist been with the company for about 10 years customer for - before that a lot of my focus has been on custom applications integrations and the platform in general thanks and - bread heyguys Brad Tilton I am a developer advocate at ServiceNow I've been with ServiceNow for about three and a half years I've been in the ServiceNow industry for about ten yeah check your resume for a long time okay pre letters and our fabulous guest today Mark everybody I'm Mark Scott I'm a senior ITSM architect over at TV consulting I've been in the platform for about four years now and I've been doing general software development for about 10 years now so it's been it's been a fun ride so far all right and Mark is one of our developer MVPs hi I'm Andrew Barnes developer advocate here at ServiceNow been doing in this role for a year and a half now I've been doing ServiceNow development work for a little over five years and have been in the software development and enterprise applications systems for 20 years have just had so much fun with this platform I specialized in doing integrations managing large scale development teams development pipelining so your CI CD stuff and just delighted to be here today back in the same order let's have our beers all right I have the orange blossom from Papago brewery the still local Phoenix brewery and ruin 1/8 so yeah mark can appreciate this one goes down nice on these warm spring days Perry all right I have this giant optimistic today I am not drinking all of it on the call I just want to make that clear she was thinking about last Friday and the first component building episode that's right it came prepared it is a bourbon barrel-aged Imperial Stout oh my gosh Wow won't be drinking the 750 milliliters oh that's that's hackathon quantity there yeah and mark today as of today I've got a it's the sand santan brewing moon juice galactic grapefruit IPA it's also a local beer here in Arizona awesome I have a mission brewing dark seas which is a Russian Imperial Stout and can I be the probably the last stout I'm gonna have of this season so I'm pretty pretty excited for this today so what are we gonna work on today so last week we were doing first component building as a group Brad started and then I picked up so if you're unfamiliar with component building because it's relatively new so the the technology behind how we built agent workspace is called now experience and the now UI framework and those things on the screen that you see that build up to that those are called components so that parts of that are fairly an aglet mmm analogous analogous to widgets in service portal that you might be familiar with and these are if you're familiar with more general web development these are web components and today Brad what are we gonna do with our new component today that is a great question so last week we kind of built the first little example of a component or Andrew did after my command lion wasn't working I have that working so my goal for us today is to build a component or take this component that I have and then call another component into it and do some sort of maybe looping through some data so I would like to do something that is like a while loop or a for loop or ng-repeat if you're on service portal and you know I think that's a pretty important thing that you end up doing and so I want to know how to do it in a component and I don't quite know how to do it right now so we're going to we're going to see if we can make it happen so you said to use a component inside a component so that is probably something new because we we I think we touched on it last week but but we didn't actually talk talk about in depth what that means so you can leverage existing components inside of your component that you're building or you can build a component that's utilizing you know sub components that you also build at the same time I did not know they were hierarchical like that that's good to know so in out-of-the-box service now if you go to our developer site and maybe that's the first thing that we share when we switch to the shares will show you the existing components that you can leverage before we get into your code today Brad okay let's go ahead and flip over into share you get a whole five of them out of the box that's more than five plus the container six I think you're talking about what you can leverage in UI builder oh you're right in UI brother well then educate the rest of these things are this is awesome so if we head over to our developer site now under reference and then all the way to the right then I'll experience components so along the left here these are all the components that you can leverage huh inside of your component when you're crafting a new component right can you bump up that phone so he's a little I can and so you'll see there for example last week we built a button and it was just a generic button but ServiceNow is also built a button component that you can use in leverage when you're crafting components should we should we start with that pulling in a ServiceNow component into our component sounds like a good easy quick wind path I mean I I like that path let's do it alright so I am going to switch over to my vs code and I think this should fit fairly well on the screen all right I'm gonna give my determine all up here a little bit so this is this is a component that I have that I've created this is basically the default component that I just replaced the text in and so I think we can see this we can look at it locally if I remember how to do this develop know now CLI develop you believe this will run it locally and then it'll actually give us a little localhost link right here it's open it it says it compiled and there it is and that is configurable so you went with the defaults but that I did now now CLI develop does accept parameters so you if you need to for example change the port or something that those are configured nice all right so that's the that's the component that we have here you got further than you did last week on I did you take a druid yeah will give you this hey alright so there is a way to call to go ahead and grab a component from our component library and I don't remember what it is but I remember that I saw it somewhere so let's look at reference and I believe the UI framework yes we should be able to round example from here you'll you'll want to move to unauthenticated actually Brad oh I forgot that this is this is the monitor I usually have my incognito window so what's the reason for that so the developer site is hosting both internal and external content for now components and so our internal developers are working on things like Paris and so the everything won't be exactly the same I'm gonna make sure we show people what they can really see yeah we want to you know the same exact experience as our customers would be experiencing yes good point here we go actually like this um this is this font size look okay yeah I think so okay Jonah price on YouTube so I know what I need to do is I need to run something first that's gonna pull that component into my project and it's where did I find it try and take a look at so potentially one of the things you can do is take a look at one of the examples and the example should have how to do that so I know like the task board it incorporates the card component but all right so what I'm looking at here let me let me let's get back so people know where I went here so one of the really nice things we have with these components is there are these four examples and it both tells you how to create these examples and it gives you some code to start with if you want to there's a zip file with all four examples in there so you can download that and then go ahead and start from there so I've actually done that a little bit but one of the things that had told me in here was that I can run something [Music] I don't see it in here I might have missed it what were you what are you looking for I'm trying to pull in let's say the one of the components into my project yep and you're looking for how to do that exactly yeah I think there's a command line to grab it or maybe yeah it could be off hmm I'm trying to differentiate between different instruction sets there definitely is a command line to grab one but I'm not sure that that's the that may not be the right way to do it but I feel like it has to be so let's take a look in the CLI and Smew you know what if I think it's under there where because it should be a command in the CLI if it's is the CLA I should be a framework up on the left ah there we go yes Andrew knows this stuff pretty darn well already I heart okay so mmm I'm not seeing it either let me think so I believe that hmm so go to one of the go to one of the components in the component list and see if it has details there of the name of the component the example are in the components list in the components list okay I know the name of the component that I want it's now - but because it might I think it might just be an NPM install of that I believe you are I think it's npm install like at ServiceNow - and then their name from the yeah should we try that um yeah if we know the component name I know there's one called now - install I can't think I used to send pianos yeah I think it's just install and then let's say I think there's one called now button should we double check that or just you know what we're just going to do it I [Laughter] think it's doing something thinking and then after we do this there's a few places that I think that we need to include it right so it'll definitely need to be in the now - UI yes JSON so let's start there so in my in my project folder I've got a few different things going on and what we've been looking at is this specific component and the index that AAS file but there is at the root of this project folder there is this now - UI dot JSON and if I open that up we've got this inner components and I believe all I have to do is add Now button to that and then then you'll need it to import that yes and import and I think we can just go and it should be in there it is there we go now look at us all right this is totally scripted and we knew exactly what we were doing when we started that's right okay so not really alright alright now we need to include it and you know what let's look at the I think I may know how to include it but I think the component is going to tell us how to do that so there's definitely a lot of details on the component maybe so under API there's a copy code for inserting the use of the Now button for example know how wonderful so that's copy let's copy the code we have all sorts of attributes here I definitely want to make it large we'll have to remember that one you know what here all right so let's insert our code in here that is long so yeah let's let's break that up into a couple lines yeah how you doing there mark doing well trying to follow along this is this is awesome I love that all these components are in their own NPM packages that makes it super awesome so we should give it a label seems like a good label to me do it now I think we call this a call to action right is that all I need to do can we go ahead and develop this yes save and see what you got on your screen because you're already rendering right no I stops how we grab the so we'll go [Music] I've been practicing typing develop without typing developed or over I know I know it's a real struggle for me or development but mostly I just hit exclamation now CLI and then space D and and I don't have to type and you get your deploy I'm not deploying so alright it says accessible it's let's go see it successfully did something it's not gonna do anything but so Jase was asking and I must admit I got forgot to what what's R so we're learning how to to add in another component which is great what's our goal you know what's victory look like in 30 minutes let's say let's say there's two goals and we'll definitely well I'm not going to ensure anything we'll try to hit the first one and then this I don't know will be our stretch goal the first one is I want to do this except I want to do this and do it with creating our own component that we're gonna include in this component okay we will you know we grabbed this component from the component library is that we were calling it yep and this is great but maybe I need something different and you know I want to know how do i how do I make that and how do I include it awesome thanks and then if we have time after that we will try maybe looping through some sort of data so so we now know how to include an existing component so now do you want to start to build your own component secondary component yes yes I want to do that all right so the the way that I know how to do that is to create a new folder under the SRC that aligns structurally and similarly to the existing one so you'll want that folder name to be the component name so I have these this is you know we're eventually going to try to do some meetup portal work with these components so I think what I want this to be is a a single meetup item good all right I think that's what we're gonna call it or entry and so you want your internal component object to be something that is a meetup group or the meetup object or who it would be a meetup group a single group so let's make this a meetup group right and then the cards is what I named the other one will be the list of groups or a more than one group okay all right that's enough time on naming the Olympus and the struggles with naming as much like that I did the same thing my name spaces have to be perfect I'm just like is is one year from now Brad gonna judge me when he sees this probably but tomorrow Andrew judges me yeah all right so meetup group this is my empty folder I'm guessing I need an index J s and a Stiles I at least need an index J s brother at least the index Jess all right all right so now we have our blank index J s so we should should be copy what's in the other one it doesn't feel unreasonable let's do it all right the way we all start just copy what's there oh there we go let's move you down and then you probably need to change your what grade custom element you got cards in there a little bit yes this was group hmmm meetup group whenever's between the div tags is gonna be your new yeah thing and do you need to import the button again unless we leverage it let's not use the button so that looks pretty generic what you'd get out of the box when you do your initial component builder thing right so that's essentially what we want to do is replicate the scaffolding then exist in that subfolder and that's what we've been doing so we won't have a styles let's do this without styles and I guess instead of let's try it without a style and then I guess let's put something in here would you guys suggest having a styles for each one of your components or a master style sheet for everything I would think that each component should have its own style I I would agree I think that makes sense because and it's honourable even if I don't do anything in it it's it is configurable without you know reworking sure the world right yeah and then you're regression testing can just be a single component as opposed to the entire thing okay so we have this so do we want to go ahead and let's let's go ahead and add a styles if yeah let's go ahead and add one we just thought we just agreed we should actually eat her own caviar all right let's see what's in this guy not much all right and then then I think we need to import this other yes so in the what in the main component we're gonna need to import the sub component so this is our main component is my understanding amenda that sounds sounds right to me I'm only you know two seconds ahead so do we think this is right no I probably need to get there right I yeah you would need to navigate to there so you need like the our two dots two dots here let's see if it see if it autocompletes for me hey nice there we go okay and then we need to use this button or not it's not a button we need to use this it should be an h2 when we will not gonna work all right I don't I don't like this do we think I can just do this sure or give it a try we're gonna learn something one way or the other yeah where we will learn something it'll be fine that's the important part all right I saved it and huh it's here wow that worked on the first time Wow so we have with two child components that's definitely a drink right there it rendered something on the screen that I expected it to render yeah I don't know what to do with myself now yeah what so I'm kind of interested in what if if I did some styling what so what I want to do something like turn the color green or something can I just add a style here so you think so you know what let's do great and then we'll this styling only have scope of that component or can that break out into the rest of the page that's a good it should just be this component because it'll stay inside of that sub component that's so cool do I need to I would think your H five here would override anything above so this is an this should apply it to our component right next and then we're here and it calls the styles that see I did that I think that I think this is the correct syntax it's been a while but look what if I what if we gives anything if we get rid of the second port oh he's playing with fire now yeah not green red can't spit expect that in your editor and make sure that we actually are at that age five is there yeah it's a good question or if it's not being overridden by something right let's see what do we have nobody else can see this but no it doesn't show up anywhere shouldn't should work this thing mmm this hey let me I don't think they can see this on the stream so let's bring this over that is viewable now all right the edge of your PS code is the like edge nice so we've got this we've got this little guy it's an h5 there's MP style right there that's it that's what is up with that hmm after we made this work I wanted to make both of them h5 s and then the Julia momentum goods aisle in your component that that is a question so go back to your what do you mean yeah so yeah when you're building your component so down in the bottom you need your style to be invoked down here oh okay so you say what styles 7h 5 or I think it's well that actually looks think that is right yeah that's that is right and that's the well that's fine okay but if what if we do this because I heard it wasn't yeah I mean naming my style and then I had to do do something I also remember doing that and it was we named it style instead of styles and then did something weird with the was like yeah I was doing something weird I don't remember what it was or maybe it was the other way no no I think it was right before I don't I don't know if this is going to there's stuff in your H 5 over on the right now well our little into before our M th 5 is gone and I can't that other one with the block was there before so maybe we broke it maybe it was working before what's funny is in when you made those changes Brad and in Visual Studio code it actually like shadowed it out a little bit like it wasn't using that variable anymore yes that that that's a great that's a great point it's declared but its value has never read well we would love to read its value but I think when you took the S out of that Styles right there it lit back up did it that one try it without the the colon and the the extra data yeah take out the okay holes yeah see now flip back up Hey oh there we go let's see that's effectively doing the same thing we had before with the plural though right oh yeah yeah yeah I keep refreshing it doesn't need me to refresh but I keep doing it anyway psycho well it's especially if it doesn't work like maybe if i refresh it'll alright alright I'm resorting to looking at the documentation I don't I'd this is not part of our this was not in the plan just did to start styling no it was more of a thing that I was curious about so we don't have to so in an example in the counter example they did styles : style but that is because they had us do something to the him let me take the look at what we had to die oh I know you're in the same folder there do we need the the period slash on the on the beginning of that Styles SCSS yes get it from the current directory gotcha okay oh yeah yes the I copied that from the other one right mmm so if we look at the YouTube comments Andrew had an idea you set the variable style to your Styles don't set it again I don't know if we have fixed that now yes oh well in the inlet in the counter example we did import style and then styles is : style that's what we did in then so here you're saying styles : style and no quotes around it no quotes okay we have not tried that yet oh all right oh I was feeling that one I haven't refreshed yet though you're go Stage five tag in the back is back in that yeah so okay we broke it but we're making progress oh yeah your h5 empty his back now I'm sad we have some errors and warnings do we want to take a look at those here yeah like a font err yeah then I can make sense of that is a font air alright I think maybe we should move on let's just we'll come back dialing next yeah all right so we have about what less than twenty minutes left to make something happen I think the the data map maybe maybe two and I were worried am I looking for a road too far aggressive but we could try big dream big let's go alright so I think what I would like to do in the spirit of where we are here so we have our component and we have a button what if we I don't know I basically want to loop through some stuff mm-hmm okay so let's get some stuff let's get some stuff so I think I'm gonna pull over another vs code window something out of the oven that was cooked uh-huh this is we're not gonna work with this one I just want to worry you that as reference know what's funny we pulled a cooking show on oh so it was just a cooking show joke I thought I was getting in trouble oh wait someone was prepared for this show prepared is really strong so I know for this task board example it has well we can kind of look at on here what the task board was so it's got some lanes and some cards actually we don't we don't need to do that let's just yeah we can look at the game it's fine task task board has some lanes and some cards we're back on my component I got real confused for there we go okay for example has got cards lanes in a task board so the task board it's got three lanes and then the lanes have cards and so we have these components that are being inherited one of the things that they have for this one is this constants dot J s file where this is this is all of the data yep so you guys think we need one of these I mean if we're one example data yes all right so let's copy one of these and we'll just change them stuff like some arrays of objects yes so we need a k-- well I guess we could probably call it whatever we want but so where should we put this file so I would put it in the top level of the source all the way at the top of our project or inside of source know that it belongs inside yeah I guess it belongs in the I would put it at the top the main components folder in the source folder is where I would expect to find it inside of this meetup cards that's our main component here yeah if everybody's grabbing on to it though I would think this is being so in the source folder would be better you think at the top level of source it really depends on what the what the scope is that you want to use yeah other components going to be record then yeah yeah at at the top of source then right so all right light up source and do new file that's the wrong constants there bowels consummate bowels all right and then so I don't want to call this lanes what what do we want our data to be groups groups I think your groups then our groups probably need a name I can do this all at once and then how about my like a ID mm ID member count ID let's just do ID because there's only two letters an ID I can't tell you how many times I type ideas to this this ID from right I should have I should have done this the other way but no Humanity of typing the quotes so I'm gonna use the Texas usergroups because I live in Texas and we have more than one that's right I think we call this we're just gonna call it Dallas I think it's like North Texas or something and we're gonna say the IDS a string even though it's just a number all right so we have our constants here this is our data now we need to do something with our data and if I look at so the fun part of this is going to be finding where the data map is I think if we look at a lane and then look here we won that find it oh well no I think it's what were you looking for line 10 and 10 okay so yes this is how we would import input so we do need to import that in okay I'm getting ahead of myself so we probably need to import the data in and cards I should have named that something else earlier today Brett I'm judging year sober bread so oh I should have there's currently this one upper case of the we call them group so curly brace groups from does it light up the whole line is dim oh I shouldn't spell it correctly yeah I think we've used in our code though are we sure that oh we have to use it in the code that makes sense I got a little okay okay sorry I'm a visual studio veteran no we appreciate it you need the J us on there I think we do need the Chan you do need the J us if that line didn't have it that was weird it didn't know it was really weird yeah the examples don't have it so oh well then let's let's leave it out it doesn't feel right but it doesn't feel right so should we just try to like reference it somewhere in here before we like do anything here or what's the what's the means to reference it let's go back and look at the end a reference it ya know they imported it card dropped from Constance and then where is dispatch card drop next card dropped that's my place but that's not even HTML in there and this is the land yes so it does I think if we look at the view this is what I want to end up doing oh okay yeah card so they're ripping it apart there but where is the cards coming from so the cards should be coming from the the get the hunted cards online eight get defined index J are somewhere so so the example yeah the lame and the view work together and the index just references those to you okay yeah so we're importing the view here Oh gotcha and then so we're so that we're referencing the view here alright it looks like I'm peeking at the chat it looks like people have some ideas group stock for each function to make state groups group hmm but where do we do this I said this one would be aggressive yeah [Music] have it all sorted out by knowledge could we just do a console log in between before the return and just make sure that we actually have groups somewhere so could we do a console log here do we think that's what I'm thinking why not hope that's not luck so I look at that hey what should we do with this you know bring upon adjusting how about we could just sure we're gonna get a three on this in the log we're good alright so I'm going to reload it manually there's a hey-hey a 3/3 or something not just drinking beer I came here to write code and drink beer and I'm alright so we can use that here console log it out I like that so I'm not sure how I understand how they're leveraging it in the lane part but that might be because they're actually doing it they're passing that from the task board into the lane and the lanes passing it into the card I think this was this was my I want an example in between yeah the easy one and then this is the lanes is intermediate but it feels more it more than intermediate there's a significant jump between the counter example and the task board example yes so maybe maybe that will be us maybe we will write an example at some point so we have it in the console so but my goal right now is just to return it out on the page somewhere okay so you want to iterate through the groups in like display their values I would be happy just showing the length somewhere on the page well my the problem I want to solve is so I have this in the JavaScript how do i how do I make it go here yeah you want to he wanted curly brace curly brace don't you yes looking at one of the other views potentially you can well that's how to reference it from up top oh yeah I'll drag it over here and we can look at look at it together so I was looking at the task board of you to kind of walk up from the task board view I mean it looks like maybe maybe I can currently brace it maybe it's it's passing in property do you need to something similar to constant properties title card state that whole lines 2 through 4 so let's try it without it and then let's see let's see if we could just I mean group style length let's see how it's why not what if we who knows some bows somewhere there's a workspace developer laughing at us if he can jump into chat that would be great if you're out there I've got something for you workspace developer that would like to help get him on a future episode I give up my seat hey hey we got a 3 up there it was pretty brewed for us we're probably violating some best practice we just introduced script injection here I'm deploying this thing we have we have a scoping issue to beat the band let's do something similar to the SN Lane view with the mapping the cards data so that we could then reference those objects and call them okay is what I feel like maybe we could end with try this so exactly what you have on there so we've got yeah but for groups so you want to do this create an UJS file for ours and do the same thing and then try to reference that or do this all on the index expert yeah we shouldn't have to do it in a separate view so the practice of breaking out the view and the Elaine from the index is when they get big sure so we we break them down when they get large but we're not large yet so we don't have to do that so we want that piece to iterate through and do it too we said let's iterate now hydrate is your pressure all right so we don't need this actually I'm gonna keep I'm gonna keep it ready for a couple of them yep so we're gonna need to get the group map so we're probably gonna have to do was this groups an array this symbol is an array you know to get the properties we're gonna need to do the cons properties of the cards in this case groups are we sure I want to try I'm with Brad on this one go group ID and group that name see what happens yeah let's just yeah let's just do this and see if we get a bunch of groups with no spaces no we fail oh it did not like what I just tried to do so it's possible like andrew is right expected comma what one of the comma online e yes yes a comma of course no it's a property [Music] not seeing it bring that other one oh yeah yeah you may have been a little heavy-handed with the delete there cuz I think there's some HTML in there that we're gonna have to output oh well eek oh yeah yes oh this SN card is some HTML it's upsetting those attributes for that oh is it do you think it's enough just to put a tack and that can't be right you'd use your your meetup group tag just as a blank for right now if you needed to oh that's a good call let's try this and see what happens or even the button now that we got the button loaded oh hey Wow Wow [Music] [Laughter] well that was that was victory right I'm gonna go I'm gonna publish this thing on the store and we're gonna see sell like hotcakes and it was iterating over some data I mean that that is that was our conditions of victory next step is we interact with the instance yeah no that's still I mean I think we could do that on the next show but that's still not necessarily my next step for when I'm when when someone's learning how to use these components oh right right but yeah I did let's drop out of the show and we still right we still need to figure out if we're actually doing this correctly no I think the answer is no to that correctly you know what it works so it is correct that's all I can say that's better all right so we're kind of there we go okay yeah I destroyed my big finish so there's still plenty to learn especially for folks like me that are not front-end web developers and never happened and never wanted to be so there there is plenty to learn here you're not alone you know out there if you don't know this and if you do know this and we look silly that's okay because you know now everyone knows everything and we certainly none of us profess to know everything on here that was good though so what we did show was at least how to create a subcomponent and leverage it not a amazingly wild one or anything but we we showed at least how to do that how define the service nails component library and pull one of those into our existing component as a dependency and we showed a little bit of how to use some data and pull those into our components but not instance data yet we're not there yet because that that is a that's a big next step and there's not a lot of documentation on that I will be super upfront with that the the only data that we have for that in our documentation is under in vain so it's under advanced no additional resources maybe where is it or on the dockside or in the developer site developer site recipes HTTP requests yes it's this is this just not to make light of the situation but is it doing nodejs HTTP requests that that's next week's show is that what is that we're aiming for where do we do this you're right just let me believe it's gonna do HT ok I've done outbound with a lambda function for for the AWS button an IOT button thing so I might be able to contribute to some of that and the pain and suffering that I went through to get that working nice so and this is still the the first release of this to service now external developers and the goal here is to facilitate things in agent workspace so these tools are expandable and they will have expanded resources and reach and a larger component pool that we'll publish later this is this is first pass so and we're doing the first learning of it so take that into account when you're watching the show today and in the future we're still getting better at this and and what we release as service now is is going to improve over time and and open up more things in this area to work on and and we'll have some other examples certainly some of our developer MVPs who are better front-end developers than I am are gonna work on some logs and documentation and examples to help the greater community I know upside down Andrew so Andrew Albury I'll breed or he's in Australia he's one of our developer MVPs and he wrote a blog on getting your set up in case you have issues during the setup process so if it works write the instructions on the developer site and the doc site yay if it doesn't we don't have a lot of troubleshooting yet available there so he wrote a little blog on on how to get rolling if you do run into issues so check that out so that was good thank you so much Brad we will work more on this in the future and we'll get better off stream as well on on these components and there will definitely be content for knowledge 20 which is going to be a digital event we did announce that since the last show on Monday we've announced that it'll be a fully digital event and so there will be training labs and workshops for the now experience and UI framework as part of that event so you can definitely tune into those and work those workshops I will I will be one of those people working those workshops because I need to learn more of these things too let's get to the B R rating in the same order if you can remember it um I know I went first so I know Chuck went first to Bop ago orange blossom 3 you know I'm gonna go for a 4 with the with the quarter point success factor this iced tasted extra good today nice Brad yeah so the giant Mauna Kea I'm gonna go for will go for it was it was good it wasn't great but I got it got an extra quarter point awesome and mark my my Santa and Moon juice galactic IPA you know it's an IPA I I'm gonna give it a three it's it'd be hard it's hard to get through but it's it's pretty tasty too much hops I you know it's the Hopsin the grapefruit together that give that kind of tartness to it and you know if I'm in the mood for tart right now so I'm totally fine with that but you know drinking this on a regular day I don't know that I could do it and my dark seas Imperial Stout Russian Imperial Stout me know it was good if it did it helps out the that we so we don't know how to do this yet super well so it's it's a 4 to 5 no it wasn't good so thank you for the interactive chat today I mean there were a lot of people it's pretty Phaeton in chat I do want to call out I I mistakenly did not pull up the twitch chat today normally there's nothing there and apparently there was twitch chat today and I didn't pull it out so I apologize oh man we'll try not to make that mistake in the future thank you for joining us every Wednesday anything last from Chuck breath mark no thanks for joining us yeah I do want to say the component documentation and examples will get better as more people work with it and it gets out there so you know service portal was like this when it first came out and the longer it's out people get their hands on it it will get easier and make more sense I'm telling all of this to myself right now I'm looking forward to seeing you know the next Nathan Firth come out of this who's gonna be the rock star of components that you know makes a name for themselves around this stuff that's an awesome opportunity for somebody that's it's not gonna be me so thank you everyone for joining us today we'll be back again next week as usual and have a safe coding weekend bye bye