hello and welcome to live coding happy hour on this fantastic March 27th 2020 I'm here today with friends on the stream and friends in the YouTube to to do ServiceNow live coding we'll jump right in with the introductions Chuck hey I'm Chuck Tomasi senior developer evangelist at ServiceNow was a customer from 2008 to 2010 was a an employee since then so I've been living the dream having fun and sharing information like this with you and before I forget happy belated birthday Andrew oh I'm happy belated birthday to you sir we share the same thing we do and Brad I don't share the same birthday Brad Tilton I am a developer advocate with a Developer Program I have been doing ServiceNow stuff since about 2008 as a customer partner and ServiceNow employee and yeah I'm excited to be here wonderful and I'm Andrew Barnes developer advocate at ServiceNow and part we are all part of the Developer Program which brings you this show the developer website all of the content on there the training that's there the personal developer instances and I am a long-term Developer and Enterprise grade systems work in service now and I've been doing this for over five years been focused on custom applications integrations and managing large scale development teams and now let's do one of my favorite parts which is introduce our drinks same order I have the but look it's same on both sides of the can it's handy I can read it enjoy that is handy Oh Bjorn about a hazy little thing IPA from here a Nevada Brewing Company Chico California and no River North Carolina didn't know they were in North Carolina they are I've been there family-owned operated and argued over that sounds about right yeah and Brad all right I am I've got like the last of a pack of nice beers that I got a while back but this is a rut referred Russia furred ten it's a Trappist beer and yeah wonderful and I have got an original sin black widow cider and it is apparently blackberries and freshly pressed New York apples mmm red isn't Roquefort of cheese maybe it's definitely a beer organ Zola you got blue cheese in your beer we'll see there there are many cheese's in the world no one knows all the cheese's so if you don't know what we do on this show is we are all experienced ServiceNow developers we've all been doing this as we said for the I've been doing at the least amount of time at over five years and what we do is we take and work on real problems that we want to solve for our team usually doing some form of automation for us and we do live development based off of know where we we don't know what we're about to do we have a plan but we have not pre solved these problems so this is not a rehearsed and practiced demo we there are venues for that this is not that venue instead what you'll get here is you'll see us run into the same problems you as a developer would run into and how we work through those and solve them live this week we are carrying on from the last two weeks which is working in now experience and then in the framework that ServiceNow is deploying to build our new user experiences in the platform and we are all novices at this so the developer site launched with the documentation for this just just over two weeks ago and we are still working and learning through this so feel free to contribute in the chat and share and help us because this is almost as new to us it is as it is to you and we welcome your feedback and we can all progress together and learn from these and we will get better over time so Brad what are we gonna specifically work on today in in that space yeah so today we're gonna look at we're gonna look at the components that we've created already and we're gonna try to get them to work together a little better so we created a couple of components and showed that we can call one component from another one and then we created a dummy data file last week and then pulled that dummy data into our main component and so what we want to do this week is we want to what we're gonna try to do is iterate through our our secondary sub component and and have it build us a list of of meetup data for our meetups and then the second thing we're gonna do if we can is we're gonna try to connect that to a ServiceNow instance and pull in some actual metadata meetup data from the instance into our component and what are those meetups I've never heard of these things before well they are developer meetups that we have developer meetups all over the world they're all meeting virtually right now but if you you should be able to find developer meet up somewhere near you or start one if there are some developers near you where would they find more information about that that's a great question you can go to developer.com and go into connect yes that's all it's new for us we haven't had to say that very often on the show like where is it again it's so before we dive into that and start the screen share that sounds exciting and I'm excited to do it Chuck birthday cake oh nice okay I've got a virtually share some birthday cake with my birthday friend here Chuck well that's awesome Brad I like that plan so let's do we want to discuss anything else in general just about you know how components work or anything or do you want to want to dive right in well let's let me let's dive in and share and then we can talk a little bit about how the components work before we get into trying to do what we're gonna do awesome all right I will go ahead and share my screen let the sharing begin let the sharing begin I'm going to share the correct screen I've had a lot of issues with that this week that are all my own my own doing all right so hopefully you guys can see my V s code like yeah we can oh I'll move it up there so let's let's start on the developer portal so the developer portal has all of our or it has a large amount of our documentation for our now design system components and the design system overall there's really two main places for that the developer portal and the dock site but if I look in at the reference tab we have the api's for the now experience framework and then we have some components specific information in here which are the individual components that we allow you to work with so we'll start with and you leverage those components from the library inside of a component that you're building yes yeah and so this is this is a really great place to get started with the framework you can come in here and you know take a look at what it is and then get some ideas on how the different parts of it work together we'll be revisiting this page in the on the demo today not on the demo on the show today because there are some things that I want to do that I'm not quite sure how to do so we get to look at documentation forever with together which is always exciting and and yeah so that'll that I'll show you how to get started in the way that you work with these components is that you do it locally here in our vs code n vs code there's a command-line interface that we have that you can install and we've done that on the previous shows we've done it unsuccessfully and successfully on the previous shows so you can get an idea of when what doesn't work or what does work but but yeah so we install that once you do that you can run a command that creates the scaffolding for you so it'll create your your folders and your components and there's some some different files here that it'll create and then from there you can go in and add to it and change things so I will go i birthday cake is delicious alright so I've got the beginnings of a component here this is a component that we worked on last week and I cleaned it up a little bit because I didn't like the way that I looked and so this is this is our component here we're importing some things in and then we have the component the view the middle that's going to actually give us the HTML on the page and we are actually pulling in some data from this constants dot J s file I'll show you what that looks like so these are some different meetups with some dummy data in them and we're only using the name right now but so this is some data hopefully eventually instead of this data we can use real data from an instance and we're pulling that in here and then we're referencing that groups data in a couple of places where we're we're counting the number of groups and then we're iterating through each of those groups and displaying the name and then we're also calling our sub component there so we've seen what all this looks like on the code side we should go ahead and and see what it looks like rendered so I will go ahead and run a command now CLI develop and it's gonna run this without giving me any errors hopefully and we can take a look at what it'll look like when it's rendered I love your optimism it's gonna run without errors it was successful see oh nobody can see that yeah pretty close just just a little bit of it yep there we go alright so now if we go over here and it's going to look like this so let's look at we'll just kind of do this because this helps me so we've got we've got our heading there are groups at length so there were four pieces of data and that constants file so that works and then we're showing our group name and then we're also pulling in our sub component which right now is just a div that says group details which is not useful and our goal is to make this more useful I like making her useful how's that done that sounds like a great plan all right so we want to do a couple of things the first thing we want to do is I want to make this group name clickable so it goes out to the the meetup group and I didn't have time to actually seed this with actual URLs so we can pretend these are actual URLs but I think I want to take the URL here and use it in a link so we're gonna go back to this one and I think this is how it's going to work so let's go ahead and close the book all right so let's go ahead and just save that and see if it all right so now they rendered his links I can write HTML wonderful how much time do we have left all right 25 minutes so I know how to do it could drink celebrate the simple ones so we want to pass the group URL here and the way we do that is by saying grouped URL in here and we don't use the quotes and there's a reason for that that I read somewhere on the developer site at some point this week and I don't remember what the reason is maybe somebody can tell us in the chat let's make this interactive I'm also just assuming this will work yeah it's probably putting it in quotes would make it a literal and then would just say curly-brace group - yes early brace cuz we have the same issue with angular but angular seems to understand what's in the quotes when you put in like C data dot something goes oh yeah I can do that does the substitution for you this seems like it's a little risky let's see we're not gonna get a real link but we do see Lee's URL one yeah we can inspect that blaze URL one that is the correct URL from my fake meetup data so that did work hmm all right so task number one complete that was kind of cheating so it's just HTML so the next thing we want to do some of us struggle with the HTML today the next thing I think we want to do is I kind of want to move all of this into my sub component so I can have my sub component be the thing that builds the group names and info so what's let's try to do that and I want to pass the group data in from here into my sub component mark Scott was asking about script injection and sanitization any thoughts on that or are we not there yet I oh I don't know script injection I know there is like an HTML binding I saw somewhere but yeah we're probably not there yet I am not there yet in my in my component learning journey it's in our back Lord yes all right so I'm going to take this out and we're gonna put it in the meetup group aha so this this is not gonna work right cuz we don't have a group here but you could pass it in as an attribute to your tag and the other one we yes we need to pass it in you just want to see it work first yeah let's let's see let's just make sure that this actually does something that's my it's always my first order of business did I screw up the syntax yeah reduce the number of variables hey yes it did something alright so now we need to pass it some stuff work so she's gonna all right so should we just try to pass some attributes here should we look up pass something in what the right way to fools are or something just right well I've seen something yes do name I don't know can you pass an entire object it's a good question I would think so let's say group is completed for us first so let's try that and now how do we grunts that um is it the state this is where I usually go look at an example I wouldn't think it's the state I think you have to don't you put the other parameter in there in the inline five like group I'm thinking back to last week or a week before when we were looking at one of the examples yeah I don't know if we pass anything in so this is a good this is so we did this on purpose so that we could show everyone where the example where the examples are I'm of course joking we did not do this on purpose I'm gonna pull that in a little bit so this is a checklist example and it may show us you can pass stuff and actions and dispatch actions action handlers we're not doing an action yet oh yeah an action would be what like your unclick kind of thing [Music] casts board test board had sub components in it yeah task boards got sub components so does flashcard I just clicked on the wrong good that's your board Const lanes cards equals state so it's inside the first curly brace you define your constants what does that look like if we just jump right to Const you equals date okay we don't have an export default this is where so I can't remember if Andrew mentioned this but we have we have been talking to the to the team to get a like a developer and now experienced developer on one of these calls so when we run into something like this he can just he or she can just jump in and teach us something example card properties those property title cards equals date who's that export default has got me confused because we don't have one we have Const you all right I think I'm looking at the chat also Andrew it looks like has a couple of ideas in the chat yes we're gonna go for you is like 30 seconds ago from now what do you looking for Brett sorry I'm trying to solve the future problem what what are we trying to solve right now this is what we're doing so we are passing group name into our meetup group component has an attribute here well we don't know how to access it from inside somewhere in that line five or six range that I'm guessing yeah and so we're in the other component is asset you so enemy a property no this is their properties okay so in the other component we have this mm so this will be a group name and then we want to know how do I get that group name and put it here and the examples weren't helpful for that those are on a different level or something they're doing an export I know I yeah they they're probably the the examples are to the intermediate step is yes so there that the jump between like the counter example and the task board example is a is a significant structural jump and complexity jump so I've got the task board example somewhere on locally we could look at it so we do have yeah put it in the properties I am assuming that would be in the create custom element yes that's that's that's where for example the action handlers go so I suspect that that is where this would go to but let's I'll go also pull up in create custom element above you below render define a properties alright injures being very helpful Andrews the world over are helpful upside-down andrew is particularly helpful [Music] you open this folder see what's in here oh yeah here we go you know that was a good so we have a can you console.log state we can probably do that see what that is where are we I D properties I'm not seeing our properties in there yeah we probably have to in a font here yeah all right so we have is is the properties C that's on the second line of the log word says component ID 60 0 this is properties right after up above the line mm-hmm is that the same representation no one more line up oh this one yeah okay that's just a yeah summary of what's to come okay but maybe it was another object we could open up them might be different but no do you bill says could you not do this this duck crops and go break a property named you access the property in your component so it looks like and when looking at the task board example the in the car Jas when they're getting the data there they've got the properties of the car tidy title in Lane and then the Lane does similar so looks like in our create custom element in the lower level component we need to set up the properties and then we can reference those properties in the component that is using that so you're saying in our main component we want to set up the car component we create the property so which which one is the which one's calling the other one so our meetup cards is the one where we were iterating through and we're calling meetup group four times or however many times and in is the other one referent which one is importing the other one we are importing this one we are importing meetup group into meetup cards remember when I Rizzo and meetup group is the one that needs to have the properties set in the data being loaded yes that's what we were trying to figure out we're in zone a here comes some data so we need to be doing the loading of the data here and then putting it into properties and then referencing that and the other one well we are loading the data into this and then we're iterating through the data right and then we want to call our sub component for each piece of data and the master component is the one that you're loading data in and then you're passing data from the master one down into the child one and then you're gonna do something in the child one is that that is design architecture that you're doing right now that is the architecture correct or not that's what we have okay so that that's not how I was thinking of it so I apologize so yeah all right so we do have some good comments in the YouTube andrew provided us some some code that we could try and then we have a comment that says doc says property properties are passed from a parent component to the child component so we're doing it right so so do we so do I so I create my property in the parent component or the child component and I'm all backwards now you guys remember when I wrote the HTML and it worked yeah I remember back back in those ancient times yeah so if we were following along with the task for example the way they have it set up is the card is the one that creates the properties for the card and then the lane creates the properties for the lane and then the task board consumes cards and lanes so let's just think it's passing it let's do this I'm gonna I'm going to type what what Andrew gave us I don't know that I actually see what's going on in there yeah so let's say we have name how do we how do we reference the value coming from the parent component I don't know how to pass things from the parent of the child I've not done that yeah yeah no it makes sense I was thinking of this in the way that you know if you grab a default component like a button or something you pass it you want to say wasn't it what's on those no or should it go you know sure but we can't look at what that button is some Andrew wants to join I have no objection to that I'm good with that yeah we'll pull in Andrew I'll do that oh please yo y'all continue obviously all right yeah you got a DMM the appropriate info yeah we'll just just say the zoo meeting for you want to try it looks like the stuff that he put in there you could hard coat in all right let's try it so default and then quotes Fred and we wait no yeah he had two curly braces that might be a tight what's the other oh no he's not checked so properties is an object and he closed out two of them then transform state : all right parentheses and then in curly brace properties parentheses I think you might have those backwards it's curly braces on the inside what did idea your curly brace on the outside oh there's parens yeah so paren curly and then properties pearly bread and then equal zero properties comma whatever that means [Laughter] nice transform state yellow that kind of worries me do we need compile let's see if it barked at us maybe it's just a friendly color coding of some type compiled I believe transformed state is is reserved in here so that's why you get that color something changed that's everything went away I don't know that's a good thing or not then we could really read Fred well we passed that Fred it now knows about a proper Fred name is great we're making some progress okay we're able to hard-code and that was in the child hello hello hello Andrew Andrews here to save us and um and sitting there I was like oh guys guys guys [Laughter] yeah so I missed like a few minutes while I was jumping on my computer but that that looks better can you explain what that's doing yeah so I mean I'm sort of fairly new at this as well but I was looking at it I'm like well we want to define a properties object okay right so that's an object that accepts all of the properties that are coming in to the child so the child needs to know what it expects and I believe that we accept a default which is the Fred there so that if we don't get that property we've got at least something it's not going to error out and that we have on line 9 we could put curly brace Fred for href label yeah well our curly brace I mean I mean name probably is no name or reference name the property's not a merges name yeah that looks better okay we're here to experiment did something nice name I mean we also and maybe we should use something that's not name was Fred name is Fred names right but it didn't render anything for us so in the in the other verses of this it would be like oh you know what yeah um so state properties tied up state I don't name name and if for example in the in the other end when if when we're including this it would be this thing's object name that makes sense log is telling us also that's what I was like that's where when we do the include for this in the other index it would be whatever that imports name is so whatever we gave it so if we gave it group you know import group and then reference this component it would be group dot group obviously bad and it's badly named so switch over to your other index hey look at that it worked wait how did that work someone explain that to me so I we did to get a comment that told me we were using the word name instead of group yes we passed a group pass it was we use state state dot and then the property that is being passed okay yeah so you can sort of see I'm the in the create custom element if you move yeah so we've got the renderer we've got a properties object and there is something that we can pass in called group and then that next align the transform state obviously pushes that properties object into the state object because we're curly bracket properties pushing and go a non curly bracket properties I'm assuming that the first one is a reference to the line above and the second one is something so yeah that's where I'm sort of there's two properties there they're probably different they probably should be named something different but they are so okay could be like when first one could be props and then the second one on the right side would also yeah but I wouldn't touch the first one because that's obviously what it's looking to accept because it's worked okay so yeah yeah I mean it's all stuff we could play with but I know that works so let's add more properties and get more stuff passed into the child component can you pass it at our object or would it make sense to pass them as individual attributes I mean looking at that syntax it seems to be you could posit any you can you can definitely pass ho objects because that's what the task for it's doing okay that's what I thought that's what I thought and then would your default be an object rather see I mean you would imagine that if your component was expecting an object you should probably default an object that's what I was thinking too yes let's do that let's if we have the line example which I which I have open do you have that open bread I don't have it open but I so in the lane example the card default is just an empty object okay in in the lane and then in the task board it consumes those it consumes the whole object lane and the whole object card so that one feels like it's passing up from the parent from it is patented that ones if the opposite direction is we're doing so that one is passing from the cards into the lane and and the lane and the cards into the task board which would explain let's not confuse yeah let's I'm sending to the parent okay but it's really the same either direction let's try passing in a group as an object group state that group that name I hope all right we're rolling the dice Hey and our console.log has a nice object let's see the whole object lazy girl if I was prepared and had a drink I would take a drink yeah so let's let's go ahead and complete this and obviously it's not gonna work because I didn't put real URLs then that's alright it'll still get our easy URL over over the bottom our inspectors but oh wait in quotes yes and so that's what happens when you put something in quite awesome so one of the things I had thought about doing cuz we've only got 10 ish minutes left to actually do coding I don't know if that's enough time to make the HTTP call work absolutely not that will represent what I was gonna suggest let's do that hi white whale trying to make you can't just call a table API and be done with it well if you can call a table yeah once you have all the syntax and framework correct so again that is actually what we're doing is calling the table API but but yeah it it will it will take me more than 10 minutes to get it to work so we will we will save that for the the next time so let's work some more with the the objects here so we have a third property in here which is whether the group is active or not and the Mars group is not active smells real so what if we pull in some sort of out-of-the-box component and then have it have it do something based on whether or not the group's active okay are we going to have a like I say a button for a modal for details on the group or something like that that we can pull in we could do that oh that's crazy talk I [Laughter] like the nail card I reckon we could probably even use that to show the details yes I almost use was wanting to use now cards instead of my list with list elements but it specifically says I think in the usage don't use this as a list I forget where I said that I was like these are meant to highlight things you shouldn't use it as a list warned all right you know some part about that in the community sooner yeah so I thought about maybe maybe we use this highlighted value thing and we make it true and false and your green and red now highlighted value I think I sneakily have already installed this component but let's do it again alright so it tells us how to use it and it has this handy copy code button but we have to do something first which I've already done but we will well do explain do it again so we need to install it and in in my suggestion is when you're doing this just use the different terminal so switch slightly up slightly off screen Oh No okay I will fix that you've got it bread's got it oh my god and then now so we're gonna install this component and I already forgot the name now highlighted value and it is installing yay and after you install it you need to you know both represent and mark it as a dependency which which one of these do I need to put it against now see one of them has a token in it you know what we're gonna drag it off the screen real quick privacy bushes here whatever one never lets me use that putting it up there anyway all right oh I did it already so now highlighted value we've added that to the inner components so anything anything we pulled down from the ServiceNow components we have to tell it about is the way that I'm explaining this yes sound okay I'm good feature request for the CLI to actually use the CLI to install NPM stuff and already hmm add it to the JSON for the internal stuff so we know which one it's going into do you I mean that could be well when you're working in a project you would know that you want to install that dependency for this project okay it's per project not permit component right okay yes well project and component are synonymous in this scenario multiple components in here but as far as service now and the the tooling is concerned this is one component that is comprised of components odd you know alright so we'll go ahead and import that component is it just the component name I don't remember I'd look yes I aware I just go look that's our component let's put it here on the same let's copy the code again so it should just say highlighted label this is why you wanted to do this in a different yeah all right so let's let's rerun that now so we should get next to our link we should get this now highlighted value and then we'll make decisions based off of status based off the data dupe mm-hmm sounds good additional something or other I'm assuming steps positive is green yes there's a bunch of them so the nice thing a nice thing about this page is it lets us where is that right yeah so we can here's all the different statuses I could say critical I I don't know if this actually does anything cuz we have to give it an icon but warning once you finish playing with your example can you export the code let's see if it changes there we go so has Ikon true I assume we have to pass it an icon or something right let's see does it have an icon property oh no that's so has icon is just I think we get the little not a little dot hmm I don't know why how much of an I hope coming with that here it's a circle icon that would have called it show dot or something well let's go let's go back here and all right we got highlighted label yay and so I think now we would want it to be instead of label as highlighted label we'd want the active group dot active or you could just wrote the state I group got active the name is Nate I knew stayed that group done active okay and then the dadís coloring would be based off of inspecting that right right yeah so active is gonna return us a true or a false so if we go back well maybe it doesn't accept um pools maybe a new story well can we just make it a string oh I got a bad feeling about that yeah I think we're gonna get the string of the whoa yeah put in there yes can we say you just have to group name be red or oh so I would so you're saying make the label state group dot name he wants so was it I wanted to say true or false which is bad so I I was thinking I was gonna say active and not acted so hey there we go really skit true and false and then we want to color them Mars nice this makes complete sense to me if it was me if it was me I would probably look at above our return in there where we've got the console.log we could do some JavaScript to accept an incoming and pass it into a variable or something yeah so it's like if state or group that active equals true say see the holidays and then set some variable like yeah just like let's make a new variable call it goes string positive what are the meetups called if they're active or not active like a live meetup state yeah so defaults are positive and then or well don't you want that to drive the value of status the color oh yeah we want both things you want the users and the status so yes I mean get spending two variables [Music] status you'd say if not and we yeah there we go it's not active you just flip the status and display I like it there you go oh why am i typing copypasta never says I'm excited this reminds me of being back in school when I was learning web development they didn't have web development when I was in school that's the that's the other one positive critical yeah critical yeah it's two critically critical critical all right know what you got it put them in line 30 or line 14 use them yeah use them label has I can't supposed to be like a boolean true the curly brace it seems a little weird to me it's JavaScript that's being paused okay gotcha I didn't see a dot no I haven't seen what that has icon does really one thing at a time let's get our labeling status working here there we go and do we have any inactive demo da no we do the question we do yeah fourth one for Mars that's some victory right there I like it we did not get our data table which makes me upset we did not get the dot if that's in fact what has icon does yeah but it didn't show up here either but if you scroll down I thought there was an example that had a dot on it yes I believe that is we're looking at API so each of these components has okay API [Music] properties crash no show icon that's got API and oh is there a mrs. Oakes I think there's a problem in the docks it said show icon is he oh let's go back show icon show icon all right change it has icon we have a docs problem and interesting extra for that one we feel a [ __ ] problem we'll make a note of that I shall good cashiers that's resolved there's a big feedback button down the bottom right-hand side of that window see I told you I should have got this show dot show the DA has icon that's true show icon makes makes a lot more sense has icon feels way more like a check yeah alright you want to stop the screen share breath yes I am stopping it right now I'm working up a sweat on this one [Laughter] thank you Andrew that was morning again and not this Andrew because no that was great thanks for dropping in Andrew we appreciate no worries I saw you guys sort of struggling and I thought I think I can help you definitely did I I got the you know data transferring working but there was no way to get you to get it to work in ten minutes so we'll we'll definitely do that next time I'm looking forward to that one too yeah that's gonna be a good thing we're doing this incrementally we're getting the steps down so the next the very next show won't be component based so we're gonna have some guests next week showing off some work that they're doing but the probably the week after that we'll get back to component building Andrew just take a second day introduce yourself Oh wrong in my name is Andrew al-ra'd or I'm one of the developer MVPs for this year I work in an insurance company in Australia and have been on the platform for about four years as a developer had been better everything and I'm really enjoying the now experience stuff I've been writing some blogs in my spare time trying to dig in and understand why why it is what it is what it's doing and yeah just share everything that I'm learning and we're getting these blogs you can find them at my website which is Andrew obrador calm and we'll put it in the comments of the yes video here thank you wholesome might be great though I definitely appreciate you joining us Chuck ratings ratings you know I didn't think I was in the mood for an IPA this afternoon but this one was nice and rather smooth so the Sierra Nevada hazy little thing IPA I'm given that a 3.75 when you said it I was like feels like a 375 and came out 375 that's a high rating for an IPA on me because some of them just come up and grab your tonsils and go here's your home that's a good brewery though yeah yeah right so I had the Rushford 10 don't be in the background but in you I always just put it in front of my face yeah there you go there we go so I'm gonna give it a 4 it was very good and we had success some success on the show some success Andrew what do you have this morning you got something some water no that's about it I'm probably gonna head off and get a coffee now because like I wrote woke up about 10 minutes before the stream started and was holding in my period and bleary-eyed watching I'm like no I can help I can help pass the kid off into the wife and run downstairs so I am yeah I haven't had any time to pick something up but well I will uh I'll have something a host stream so my original sin black widow cider was was was quite good mmm irate ciders a little bit differently than I do my beers so it's it's usually shifted up a little bit compared to so that they're not relativistic so a cider which this one's gonna get a for I won't go to that the same way I'll go to a beer at a for like they're not the same rating systems for some reason I'm not sure why but they're not like I'm more generous with my cider ratings for some reason if that was a beard probably be a 3/5 maybe at 375 who knows why I do the numbers I do so that was great Brad thank you Andrew for joining thank you great collaboration in the chat will really appreciate all of you giving contributions and joining us here and feel free to you know share your findings with with the greater community like Andrews doing with his blog and and we're doing on our blog to write about these things and share them in collaborate with them so put your stuff in a repository put any findings that you have in like a readme on that repository or you know just any other text file in that repo and represent from the readme and and share that out to the community and and put it in slack or the community website so that others can find your repository and can even see that history so throw some commits in there even as you're doing failures right like throw commits in there for what you were doing so that others can replay it and learn faster because we we all learn this stuff by a little bit from here a little bit from there a little bit from here and the more people that are sharing those little bits the faster we all can grow as a community and learn learn this new system thing else from you fine gentlemen no Stacy I enjoy wash your hands on ya wash your hands holy crap everybody out there stay safe have fun and enjoy coding and we'll see you back again next week thank you