okay good evening and welcome to phil goes deep on tonight's show we are going to be looking at obs overlays using a technology that i'm very new to called 11t and i'm very pleased to say that i've got another special guest uh tonight none other than um mr j spencer i'm going to bring you over uh jace you are on the screen so thank you for joining me tonight um and yeah welcome to the show uh do you want to just do a quick intro for anyone that has been under a rock for the last few years maybe uh hasn't seen any of your stuff uh what you're up to uh fellow mvp but you know this is uh this is your intro now so you did a business well thanks thanks phyllis for sharing your screen with me or sharing your stream with me uh yeah i've been working on servicenow for a long time it seems a lot of people find my stuff useful so i make a lot of stuff i try to document a lot of things because i don't think everything will be there when i want to look for it and pretty much servicenow has been my go-to for the last decade that's yeah very impressive stuff and um i personally was very like honored to have you like join one of my streams once quite a while back and and now you're on the show and i know we've we've spoken quite a bit um uh since um since i started doing this stuff so this for me is a huge endorsement but yeah anyone that doesn't know uh jace then check out the links in the description i've tried to kind of link most of the stuff you are a titan of servicenow um officially inducted into that hall of fame you've been on several other um bits and pieces but your jstop pro website i think is where i started getting some of my early traffic to the to the stream so um what's jstop pro about like where did that come from and what can people expect if they click that link i mean that's just where i put my my thoughts on stuff for servicenow related things if i find it something that i that i wanted that i did that i want to share or want to look back on to help myself in the future i write it there and then i know that i don't know about you but i find that if i write it down i can forget about it and then future me is like hey did you ever write a record list rest call and i'm like oh i think i did let me go look and i search over there enough sure enough i find it or i search on it on the internet the community is great but the search is kind of you know it could be better there's a thing i think it's getting better right as well for the answer workspace and stuff like that that's that's on there although i've not explored it um too much is it quite often that you go searching for something on the wide open internet and then end up back at your own site i feel like that happens a lot but that just might be because i search for things the way that i type them right you know your own keywords maybe so uh yeah well excellent um and today we're gonna be today tonight whatever time zone you're in um you you kind of introduced me to this concept and an idea through a bit of a discussion we had but 11 t is a technology that for me is is novel um static site generators is is something that i'm not even i don't even know what that is um although i used to mess around with html and um i remember when css felt new you know i was coding websites in in notepad um uploading them via ftp uh to you know ntlworld.com or or some kind of um you know locally provided uh you know whoever gave you your internet used to give you a bit of web space and a domain name so that was many moons ago and it feels like things have kind of come back a little bit we're talking about static sites now yeah i mean jam stack stuff is very interesting and it's very much in fashion or very much in favor right now right if you look online there's a whole bunch of uh new companies popping up with cdns and different offerings for like hosting this the column jam stack sites but i mean really it's just like you said static html javascript and css but there's a lot of things you can do with that when you apply an api to it or you do some fun like lambda functions okay so we don't need for what we're going to be doing tonight we don't need to have a domain space out in the web what what i kind of end up streaming on because we're going to basically pimp the stream tonight this stream that anyone's seeing if you're seeing uh well right now i'm just sharing a screen there's a pink ribbon up in the top corner there that's uh for breast cancer awareness so and that's you know where the pink hair is coming from as well that's obs that's giving us the ability to kind of share our video share our screen and create this kind of um experience for the the video right um yep oh an overlay is something that's sitting on top of the video that creates these layers um and the fact that if anyone's watched my videos before you see me kind of um hovering down in the bottom corner and you know i'm cut out and that's because you can see this kind of green screen behind me i haven't told zoom i've got a green screen so we're going to create a website on my local machine running it on localhost that's going to enable us to execute some some code and then we're going to send that into obs and then we're going to use that as a layer or overlay that and put the video back in underneath and whatever else we want to do but we can actually make the good stuff in the website so then our obs is just kind of rendering the two layers or three layers whatever we want right is that have i got this right have i got it wrong yeah you got you got that right that's uh that's about right so i'm really just riffing off of uh stuff that i think her name is steph eckles did and she's riffing off the stuff that this jason langstorf did so i mean um i have a repo out there that i think your plan you want to get this started right now let's let's start getting into it i'm just going to crack a beverage actually jason just because um i i found this in the shop earlier and and it looks quite i don't know whether zoom zoom's not going to like it you have to do that thing i mean the camera is quite cool it's a vanilla it's it's it's a vanilla porter which you know if i was on live code in happy hour i'd feel like um i'm one of the crew and i spilt it i'm one of the crew yeah it sounds like it's funky fresh luckily i'm standing at the moment and that didn't just go too far um maybe i should have maybe sort of cracked that before the stream yeah let's get into it man uh so i don't know how this is gonna work technically because normally obs is quite passive it's there in the background doing its thing and i'm flicking around but i know what's happening but here we're going to see obs on the stream and see what's going on behind the scenes literally i've tried to tidy my scene collection up a little bit i've duplicated it so we we can break it it's not a problem but we might see in my repo i have an i exported my stuff so if you don't want to mess with yours you can just import and it should build it properly okay so we are just a warning to the viewers we we may see some strange inception kind of um things in things so i don't know how that's going to look um and i need to share my screen with you right so let's do that um oh i made you a host so you could share could you make me a host please oh my gosh how did that okay i know that i know what happened but it's the settings on on zoom whatever when i started the meeting that there you go prevented you from being able to share so i made you host um so i should share i think desktop1 yes that's me and excellent so let me just fix our not active speaker but i will hide self view so i can bring jace in i don't think you see yourself but um you are there because you're seeing zoom oh i yeah i don't i don't see myself because of zoom stuff but that's totally fine yeah there's going to be inception stuff going on here so it's not looking too bad right now uh apart from i mean it's sharing zoom so my current scene there is zoom but obviously zoom's frozen so if i hide zoom and just go back to i don't know primary just to fade that in this you can see you can see my screen right yeah and i think um i think youtube can see my screen i hope um yes mark ruth off is here uh andrew audrey does here so um hey guys thanks for joining uh i i think we're we're all good right um i mean i don't i'm watching the stream too and okay it's just from black yeah okay so i think things are good i think it's just a delay that you have built in it's a slight delay i don't think i've built that in i think youtube have done that but yeah there's it's not immediate so um right just be aware uh so the first thing i would do because you know you might want to keep the things you have the way you have it set up so i've duplicated but i'm happy to start from like just go new just yeah make a new well actually if you want let's let's start from the repo let's did have you cloned the repo down yet or forked it i've not forked it i've downloaded the zip file of your thing but that's that works just fine you can just unzip that so i've unzipped it so import from your repo yeah import from there i have a folder called obs imports and one's called the scene well there's a folder called scene imports okay so this is your clone here obs import obs yep i thought you know what make this even easier is if somebody made it and you say we can't see anything okay um i'll hopefully you can hear us what's happened oh i know what's happened i know exactly what's happened let's just come back to obs right bear with us guys sorry so that's our scenes okay i wonder if um if you could need to run two instances of obs no i'll see what it is i switch screens i'm not sharing so it's the that's what's happened that's why we didn't get any inception okay um we are now going to go a bit crazy on the screen so um i'm here down in the bottom that's what's thrown me jace is because like i didn't like you can see it i don't know what's going on on the internet um hopefully um andrew's gonna yeah we can hear but can only see your black screen it should be coming in because there's a slight delay there we go i can see it we can wait a second to see the inception happen yeah i'm waiting for the word to come up here it's looking a bit crazy it should just be a moment i have it muted so it doesn't oh yeah there it is i see inception not the movie so um that's because this is the screen here that i am broadcasting and then i'm sharing this whole screen which is my um so what you see here is my whole screen but you can just tell there's a feel ghost deep logo in the corner yeah thanks andrew i mean if if you guys hadn't tuned in we would have maybe an hour of just blank screen thinking uh thinking it was working so um yeah really good stuff so i did i import i don't know i didn't i don't remember can you open a second instance of obs that isn't streaming um this i mean because then you're not messing with your current stream i don't know i'll duplicate it no my main like the main scene that i use for which is messy anyway it needed tidying up um i duplicated that so i'm not going to break anything we can literally no no but if you open a second obs you can stream with the original one and we can configure the second one really probably i've seen other people do it i haven't tried it personally it's a it's we'll call it an experiment i'm uh it's not letting me unless there's a way to say open as a separate session if i click this um when i go to launch it i don't know if you're on windows or mac i'm on a mac here but if i go to launch it i get a prompt saying obs is already running unless you meant to do this so you shut down any x existing instances obs uh let me just kill something else off that i've got going on as well don't say that okay um i think what we'll do because we've already gone blank twice i think we would just mess this scene scene stuff up it it i don't think it's that difficult i mean i might be tempting fate here how are we just doing this i share my screen and you just do it on your desktop okay excellent yeah let's do that and then i will share oh wait but it doesn't screw up though because you're posting it yeah because i'll be doing it yeah we'll lose how about you do it i think you've already done it so we didn't plan this stuff we just said let's give it a go so why can't i just create the website and then create a new and step through it that way or can i import these individual scenes or is it only the you can import the individual scenes i thought it'd be easier to import a whole set of them because then you can just replace your hardware with the hardware that i had let's see like your mic with my mic and that kind of stuff but let's um let's get into the 11t stuff of it and then we can talk about we can remake the scenes from scratch sound good okay yeah yeah yeah let's do this because i don't know where we're going right now so we're in obs right now this is what obs looks like and it just looks a little bit crazy for people but down here on the left uh this is the kind of preview the next screen so if i did which i did before fade that um that's what goes out to the internet we've lost you but we're still here and we fade back in and and that's all good down here we've got different scenes which i use so this is the intro one hi guys welcome to phil goes deep and then this is with a bit of zoom which we're not using right now screen share with me in the bottom right um if i just need to have any emergencies and then they'll write with with zoom so we're going to create some more of these basically and then these are our sources that's what we're going to mess around with but right now we need to get terminal um up and running and do some command line stuff so um not too much of it though just a little bit can i zoom i feel like that might be a little bit small um bigger there we go yeah is that it got like a hair maker there you go there we go okay so if you use if you get into that uh that downloaded directory that you had uh that was in my that's actually in my downloads um don't want to create stuff in downloads that's the only thing so i've got a documents location let's just create a new folder i'll call it pgd js sure uh if i copy as a path name and then do a cd paste i'm in there ls all right nothing in there empty directory we're good uh well yeah i said okay um do you want to get clone the the repo then again down here or yeah because you'll need the you'll need the files from the um the repo so i'll do a git clone clone and then if you have the ins yeah that works yep that'll copy it straight from my repo into another subfolder here but that's okay we can just cd into 11t.twitch.scenes i know this isn't twitch we're on youtube but the premise all works the same i didn't mean to do it dot dots [Music] right let's go yeah back to sorry it's been a while since i wanted to do an ls okay yeah so if you if you cd into that directory because that's where it cloned down into if you just tab it should auto fill the rest of that url okay so now you're in this repo you can just type in um npm space i to install its dependencies which would include 11t i'm not even checking what you're telling me jc like you're telling me wrong commands and i'm running them um right right so what this is you can see the list of files there that there's a packages.json yep yep there should be packages that jason in there somewhere i'm not going to see it let's see yeah it's so it's it's going in there in that file they have um dependencies and dev dependencies and this is just installing those dev dependencies and when we're doing like you've built some custom now components right or you've messed around with that stuff this is like standard like package.json and running install on your directory is like standard command line stuff that looks at that package and and knows what it needs is that yeah yeah i mean if you type in cat space package.json you'll see um the contents of that file here here in the terminal you can actually tab at the end of the file too and it'll fill it in if there's no other names of that but you can see those dependencies right so it's got 11t at 11t uh auto prefixer cross environment css nano dot end npm run all post css post css client and sas right so that's what that's what the npm i installed was those just installed all of those things it said you need them for this project you haven't got them okay so we're good yeah so now that you have that you should actually be able to type in um and also if you see above you see the script section of the package.json yeah yep that's a way that you can package like certain commands that you'd run for any of these types of projects so you can see they have one called start well with npm you can type in npm space run space start um and it'll run the start command right so you can see there it uh it's doing a bunch of stuff now starting my my website my new yeah so if you go to localhost 8090 you'll have like a it's a pretty basic site um we didn't set up the environment variables so it isn't going to check anything in service now but if you go to localhost 80 90 and we have to on your computer we have to put the browser okay you'll see the content of it right and then it made a couple of different pages so this is like your i'm sharing my screen maybe um scene and then there's also like uh i think there's a host one yeah if you type in slash pretty slow pretty sorry slash at the end of that there's no links on any of the pages right slash post show and slash host are the different scenes that um that's def um that's definitely put together that i totally just copied okay so and we've got these kind of formats like okay we might want a brb we might want to um etc but this is this is like really good stuff i mean we've we've got a real starting point so i can just start to plug this into obs now so we can switch it over start using this and then we can change the website styling that you can yeah you're good to go okay and we can we can do that live right but if we just get this into obs i feel like we've achieved something um and we did talk about uh if this goes well then we might build it in now experience or portal service portal and actually run it off the instance and obviously there's a there's a risk with like doing that in a pdi um however it would be fun you'd have more access to the data there than you would with any static site yeah when i'm working in my pdi for the stream and i'm doing things like i could easily put that stuff on the instance and i think that would be really cool to do yeah i don't know how definitely i didn't check with you jase um how long are you around for um tonight like i normally try and keep it to an hour with a guest just out of respect for their time um i have the next hour and a half open okay so we might go we might go a little bit over the hour um and that that's cool with me if it's cool with you i don't know whether we're gonna it actually would whether we would achieve something in now experience so let's use this as a framework to like okay i'm using a browser or website to make my stream better so let's let's start right a new let's call it a new uh scene here and andrew's asked me a question do you use vs code fill yes i do and i love the terminal command built into vs code my vs code on this profile isn't set up properly so i've just installed the now plug-in i've just started using that last week to be honest i'm a little bit late and it's amazing it's absolutely amazing i'm playing around with macros with like syntax editor macros and snippets i'm looking at linting mark's on the stream mark i think i've i've sent you some links i'm going off topic here but um abstract syntax absolute abstract syntax tree for linting is you go to ast explorer.net and paste in a script include and like spend an hour or more just looking at your code is ast trees are scary and magical magical and scary [Laughter] i mean i i don't understand how they work it's like graphql right you can use why don't you get some graphql paste it into asdexplore.net and just like maybe that will help describe your code in a completely agnostic way that then when the live code in happy hour was going with um brad not brad tilton brad kai um and he was talking about oh it's just cycling through the nodes i was like what i don't know what that note what's a node what node.js i i didn't know what he meant and now i've started looking at ast i i know what cycling through the nodes mean so anyway um where where did that come from we want some we want some sources in here so we've got a stream i'm calling it js1 just because i didn't know what else to call it so we do a browser source here right yeah you add a browser source and then it's important when you add these browser sources that you add them at the right width right so if you want to make if you want to do the host screen first it doesn't really matter which screen you do but if you add um yeah how you still go no not you don't want to do it like that there's actually a source type so if you click on that plus again and you pick um it's a browser oh i did that i think i did that um i need to give it a name this is the name of my source so this is um i'm gonna call this jace host oh yeah yeah so you got to make the source and then of course when you make it here yeah you paste that there and i know that in the readme that um that steph echols had wrote she had made hers with 1280 by 720. let's try it and that was i don't know what your stream is set to for um for streaming stuff but that let's have a look i guess yeah so i can always come back and change the properties right um let's just see right settings uh let me just go make sure nothing's you you can always um you can always up it to the right dimensions but it should be i look like i'm on 1920 by 1080. yeah so change that to 1920 by 1080. she had made hers with the purpose of the 1280 by 720. what did i say what were the numbers 1920 1920 by 1280 i thought you said i didn't write it down i should have put it on my own it must be a little bit i don't know you know what it is the dimensions different that's the that's the deal 1080 1080 okay right properties it was 1080 yeah this would be the the um the most specific thing we'll need to do right so right so then if you wanted to add like a a camera or another thing behind there because the way that obs works is if you have like a black section like that i guess it's transparent it's video capture isn't it for a webcam and then i can go to existing yes that's a good thing about obs you don't have to keep adding multiple sources it will add them in okay so i'm here but i'm i'm on top of this right now right but you can put yourself behind it just drag the the scenes in different order there i am so let me lock and you can make it different sizes for this scene if you wanted to make it bigger or smaller let me lock that one right and i'm in the i'm in the window uh yeah so let's just um just for i don't know what the i don't know what the polite time is um fun and games um it begins with s and ends in giggles but yeah let's um let's just cut that over and i'll say good evening welcome to jstop pro i'm jase benson and on today now yeah you've got two screens yeah i've got two screens yes okay i just wanna there's a so in that project um there isn't an environment file but if you um wait that's something you want red yet where is it in that in that project actually if you go to your like however you want to edit some of the project files yeah you want to do in terminal you're better with nano on them you want to open a new tab and go back to the directory because it'll rebuild as you as you change stuff right tell me again what in terminal open a new tab uh yeah just open it up i think you just got to go to new town shell new tab yep and then if you go back to you're already in the directory yeah so in this directory if you do an ls let's just take a look here um there is a folder called src that's where all the um all the the files are for that 11 11 you tell 11t where to look in this case i told the 11t to look at src okay and in this folder you have a data folder an includes folder and index njx which is a nunjucks folder a sas folder and a scenes folder we're going to only look at the data folder right now the data folder is controlling that footer so if you go into the data folder and then you either nano or vam however you want to edit that sn.js or not sn sorry uh yeah stream.js view cd source slash underscore data and then just check them in here yeah i don't know what editor i don't know what what editor you use let's do it let's make um let's make andrew aldridge happy let's get vs code up i think that's what you said just you can actually yeah yeah i was just i always just type in code space dot when i'm in the directory i want to be so i would go up a level so you're in the main repository i don't think i've done it i've binded it or whatever you call uh oh yeah you might have to open it manually and when you've got it that's the thing like i say i'm not i don't don't use terminal that much i use it kind of out of necessity um but that would open here with my workspace right yeah yeah i would just open folder though just open isn't there a folder to open open this is folder i think when i say open here uh go up to documents go into pgd js this one there you go just right here yep don't save anything because i haven't done anything useful okay so i am in eleventy twitch scenes right so this data this stream.js right so you can see here there's details that are were existing on that stream before remember where it said on the bottom left at j spencer and then it said jstop pro and news.js.pro and twitch.tv slash jspensen and tell me more about grc okay those are getting pulled from here if you change these they will change on fly on that other page because it'll rebuild for you because you told start i haven't gotten out is that twitter or was that just like a cool thing to do this doesn't care that's just a character i just put it in let's do it i like it it's like a scope i've got a scope right except html um so phil goes deep i mean i haven't got any of this cool stuff man but oh you've got a break in there okay so that's how it's done you're doing live break um i'll tell you what i have got so i mean you could put in your youtube link here or your i've got a youtube ch channel id now um which is youtube.com forward slash c forward slash phil goes deep i believe um tell me about grc i like that i'm just gonna capitalize it um i'm so anal with i was thinking about how you might be able to like remember the last stream you had you had that um that survey thing or that cloud word cloud mentee meter yeah yeah i was using yeah i was i had the reverse in the stream to find a link to it because i couldn't because you didn't have it on stream you know but you hadn't shown where the minty was or you had briefly yeah you know that bottle might be a great place to put that kind of stuff okay and and normally in obs if you want to do this in obs you can do this stuff and and in the past if you look at one where i um was i called the streamer up in my game and i was like pulling down rest apis from my instance polling them every 10 seconds or something and it was showing the update set i was in number of updates etc but then i was having to find a nice word file a text file and using python to get hold of json and put it into kind of human um speak and then scroll it across the screen etc etc this is where things get a bit more powerful right because we've got rather than letting obs do all the heavy lifting there now we let obs just do the video the rendering the streaming and then my local host website can make it look pretty so we if we wanted to do scrolling text or whatever we want we could we could do that we could actually pull in some dynamic um you you were saying like we could run a rest api on our local host and do the polling there yeah that's what i did so if you actually go back to your vs code and you pull up the if we look back in that source folder that src and then you go to thebase.njk i think it's under includes include based what's an ngk file then it's a nunjux file do i need to get a template would that make this look nicer that it would make it a little messier let's do that any recommendations here this has got three steps downloads that's where i'd go yeah most downloads highest so that's highest downloads and still a good score that's highest downloads but three stars yeah i i don't know which one i'd pick i think they're probably both gonna be fine let's go with the three stars man i'll be happy if i got three stars to be honest with you that's installed um so uh what happened i closed it i didn't you um you clicked off of it or when you went to the plug-ins it took the window up so if you see in here around line 20 where is it around line 12 so interval right oh 12. yeah they're on then 12 i wrote this little function just to get the count because you were doing stuff with like oh i'm working on story 124 today right yep and so i was like well you could do that i mean there's other ways to do this obviously that might be better or worse but this year uh this get count runs this get incidents which would console log the incidence which it won't do anything but it returns where'd it return this does something number of the incidents so this get incidence result.length yeah get incidents is actually defined on line 25. yep down here and that's doing a standard xml http request over to the servicenow instance and that line 27 where i have the curly bracelet race sn.earl and where's that coming from so you know this is dead this is a little bit of levity stuff going on so 11d lets you um bring in these data sources so if you go back to your data folder you see how you have that sn.js there's no secrets in there um but this here says our earl is this and our authentication is this buffer from process and we'll send user process m password so if you make a env file in this folder on the top level in the data file or in the 11t switch so are you familiar with environment file environment variables on your system not really everything everything's in the cloud now chase i i know i know i'm out here living on my machine everybody else is on the internet so when you um when you type in certain things on your computer it it knows what they are because they're set in the environment and windows is a whole like set of environment variables yeah when you're doing this doing stuff like authenticating the stuff even with like uh i'm not sure exactly how the service now now component stuff does the authentication but most of those types of projects use like something to store those credentials locally on your machine to say hey we're going to log in up there a lot of them use an environment file for the individual project okay if you look down in the files there's a file called example.env above package.js packagelock scared me and you can see username password yeah yeah so if if you want to connect this to your pdi yeah all you have to do is make a new file called env in this folder and then give it these details obviously you don't want to do that on stream on screen i mean maybe if you make a user you can so i could copy here and then paste here no uh you can yeah you can just copy paste and press f2 it'll re let you rename the file name or right click just click enter on it in the code yep and then erase that whole firm proto file and call it anything no just have it has to be dot env so yeah so it's keeping the emv what shall i call it phil or pgd no no no no you can't have phil in front of it it's just it has to be just dot envy i see right okay when you said emv i thought you were just um yeah so in the get ignore it it defaults ignores dot files so that makes sure it isn't included which is why example.env was included because it wasn't prefixed with a dot because this is a real file that we don't want to be putting anywhere right if you if you pork this and made it your own you might want to like um set those values differently and so if you patch in your your um instance i know the people want they want to see services some service now brian we've been going for like 40 40 odd minutes jason we haven't brought service now up so let's do it so i'll create a new user now i think is the the correct thing to do um right so if you yeah i mean you can give credential there but if you want but if you just even pass in your um your dev instance you know your dev76430 okay dot servicenow.com um that you have to prefix it with the https yeah and then um if you give it you can give it your own username and password or you can make a new user and password um on your instance right but just uh realize if you do that on stream it'll show here so you might want to do that off screen yeah but it's just a test user right yeah you can just make a test using probably good no we've got a we've got as long as they can read your incident table this will do something okay so i mean it just i mean you read out my url address so um you could don't read out my password and username and would you apparently somebody only needs three things to hack you right um and they're the three things your url your username and your password so um what now i'm trying to sorry i showed that up there i don't know yes it's absolutely fine i mean it's it's my pdi and it will probably fall asleep and and change anyway so you'll if if somebody goes to it it will be someone else's um i'm trying to think of a password now that's not a normal password that i actually care about um so if you're if you're making a dummy user just make you know jace was here or something okay and then you can disable the user later and change it to your own or you can abandon this and move it to web service access only and stuff like that right so you can actually stop someone from from logging in but even so let's let's keep it uh let's keep it at 100 and so should i grant them any roles they need what i do as long as as long as the the user can read like i would just if you want to get mine to you can as long as they can read incident this will do um because that the code i had and i was just reading incidents okay let's do it obviously they just they just have to have table api access and that's pretty much given everybody so if i do this off screen this particular file yep and then right if you save it close this vs code or open the vs code on the other window and just type it up which windows for a moment and what can we put on here that's a bit more interesting um a bit of code yeah this looks good inception sections again so if i just put this in i forgot what i forgot my password already you know i don't commit any passwords to memory i find it so password managers make that really easy to do it's safer that way i agree just don't remember your passwords um i just wish there was something better than multi-factor authentication like that was more convenient but still is secure yeah passwordless and all this stuff's going on i i i just reset my password every time i try and log into something okay i've got a file now i've got a file yes hiding so just make sure you yeah make sure you don't open it there but now if you go back to your if you okay so it's yeah so it should have updated that thing i might have changed the text i might have lost some text in there so was i supposed to have saved something as as long as you have https slash your instance um they don't have a slash in mind and then your username and password in that environment file you don't have a trailing slash i don't have a trillion slash okay and that would be you could you could see exactly what it's expecting on line 27 of that base njk okay um bass sorry so where would i see it though on the screen yeah so it should it should be writing over writing the um where'd it go i had it overwriting something i showed you a few weeks ago as you were you were talking about like oh let me prep this yeah it should be overwriting that short description so where you have um youtube.com slash c slash field goes deep it should be overwriting that so you maybe um maybe you need the oh you know what you need to restart the server restart it because you change your environment variables and that doesn't get re so in your terminal if you press ctrl c the terminal tab that's running and then do the same again and then yeah run start and what this is doing is it's looking for incidents where active is true does it need to refresh the browser version of that file now or should that have you should it should have well um what's going on here let's figure it out let's see where the problem is this is looking good right my website's up and running my local host up and running um let's let's let's just add something to the to the page so if you go into your base njk yes okay and you can see there like online 27 we're calling curlycurlysn.org yeah yeah let's copy that out and paste that in like the body somewhere like at the top or bottom of the content uh like just actually just you could actually just go down to where do you see online 56 where it says heard the brace for the brace content safe yeah yeah like just add another line and do curly wrist curly brace sn dot url this so i can just take that bit yeah or we can inspect the page and see like if there's an error on the page that might tell us to yes sir so i've saved that let's see what happens yeah i've got it up there okay yeah so it should it should be it should be running um all right so the next thing that has gone through and it hasn't got training slash okay yeah it should be good to go because i mean you can see on line 27 that the slash is not included in the earl yeah right yep so there's nice training flash so that's good and you prefix it or you had the https in there yeah yeah what if it doesn't hit it what if it fails here i don't i don't have a fail case in there um you could tell it to just return the response let me just open an incognito window or in private window it's called in edge for mac you you you should be able to see the error it should be telling you what it gets back right now if you open up the browser and you press f12 or right click and inspect elements anywhere on the page just refresh that and then if you edge which is a version of yeah if you go to if you go to your console you got you see there's a bunch of errors yeah it's there's something failing look at look at your console do you see on top there that number is incrementing oh excellent really good it's working but it's not i forgot i forgot we have to enable cores in your instance to make the call because your instance is like hey i don't expect any local hosts to get stuff from me right okay so it's a security thing this is good i like it i forgot all about that it's good it's welcome so if you wanted to enable it where you go then is in your instance um i can tell you where in just a second but if you type in cores in your filter navigator on the left cause as in core of an apple uh no cores as in the c-o-r-s i forget what it's i think what it stands for but it has to do with letting sites that aren't you connect to your stuff it's like cross-origin request something okay i think i think you might i don't know if you're a bit low there oh i was making my voice was low no no i'm just thinking where to put you on the oh on this screen yeah i think i've given myself enough space in that corner so hopefully that that's good okay in here you'll add a coors rule and this will let anybody with localhost connect to your machine which is dangerous but you can you can enable or disable this and so what you need to do is you add a new recipe and give it any name i don't i don't know about the application scope um i put mine in global but that's because i want to give it access to now table i don't know if you can do that in a scope uh let's take some some things out oh uh satyakis on the stream good evening i hope i've got the name right satyaki sanyo thanks for joining um cause rule so i'll call this pgd stream overlay it doesn't yeah the name is not precious is it not really the rest of it and then the rest api we're just using the now table api right now but you could use any api you wanted to eventually if you wanted and then here you want to do it has to be specific http uh no s um and then you wanna make it just a port 8090 okay and then i gave mine a max age of zero and that's it once you save this oh it's there already instant and the errors are the errors are going let's just clear that yeah so it's so if you go and update like um if if you want another screen where to update like a different incident that's active that would be the new incident number so obviously you could do different stuff i do what i liked on your stream you wanted to see um the the demo kind of you did to prepare for this which i really appreciated um the the kind of surprise moment where you closed your incident and then because you were like if i just update the incident now the most recent updated one it should pull through and you updated and then it it it disappeared because you'd close it and you're actually getting active incidents so let's just check here what one we're looking at 108. so if i save that now if you go to split screen we'll see it happen on the fly okay high four oh it's high four that must be i don't know what pac4 is uh let me look at the repo the repo says to get the incident state and short description and then it says the it's just been a while since i did this is it getting the most recent updated or is it getting some oh it's just state closed i've done the same thing jace i've updated a closed incident so let's just go into let's use nlq just because um um active i haven't actually used this as much just start using it man just start using it it's there like i've i've just put active and it's just gone active equals true i did it twice and it hit it so i didn't even type i just typed active um so yeah it's it's looking at stuff that's active is true in order by to send it updated so if you update a record it'll become the the top record there okay so this so right now you're looking at incident zero zero one zero zero eight and that thing on the right of it must be its short description or the first 20 characters oh there it goes on hold hold it instantly yeah well it's checking i think it's checking every second so it looks like so it's not catching any event it's not that it yes okay it's a yeah servicenow isn't pushing down to your local host you need a mid server installed for that kind of stuff we need to be on now experience on the platform streaming from the browser so yeah i mean if you if you want to rebuild this in service now you totally could right i mean it's a simple page and then you make it your your source so let's just do something then so we've got we've got host here i just feel that we've we've got some good stuff if i add a new scene so that that one was called host let's call this let's just rename it because i called it jase and it will become confusing if i just use uh so obs you want to give separate just go like 11 team hosts oh yeah 11 11 host i was i was trying to find something to prefix the host with i mean to be honest jace is fine so 11 t um the other scenes that they had were um post pre-show post show and then they had their working screen yeah so i'll call that one main so that should be that would be no yeah that'd be new browser with your 19 was the ninth i forget the numbers name is already in use oh if i okay i didn't oh it doesn't let you share you can't have your source and your screen i would just type like a working session or however you want to call it 70 mainbree browse okay and that's going to be that but not host and then just yeah just make it the the default and then that was the 19 you had it in 1982 by 1080 i think you're working you ever used to play 1080 on the n64 or not no i when i was a kid we actually didn't have a 10 uh n64 in my household we went nintendo to sega to uh playstation nintendo which one the nes the the original the big square black big square box yeah powerful yeah i love me some mario 3. that was my gamer choice kid my neighbor had my neighbor had one of those yeah um 1080 if anyone's played um n64 1080 is a snowboarding game and my mate just used to and all you'd hear is 1080 1080 1080. cause you're trying to you're trying to do enough uh spins to get the 1080 degrees exactly yeah so it was just when you say 1080 anyone says 1080 i can just remember him just start hitting the you know you can't even hear the keys um on here so yeah 1080. nice uh 11t so we've got pre and post right so we'll do another one for browser for boom pre and i'd like to see that's called pre-show oh why am i typing in uh yeah pre-show post show yeah pre-show okay and this will be pre-show 1920 by 1080 1080 right and they all have the nice same footer for you you don't have to worry about that footer and that's that's shared across all of them it's not the same one in all four places so although it's called a static site it's not it's not like it's actually static it's it's dynamic well it's it's rebuilding each of the pages statically okay but from a central source and it's shared then so when it builds it's yeah the html would be in in four places right you can actually see it if you want to see it would you like to see it let's let's just let's just finish this post show because what i want to do obviously for the purposes of the i mean for me this is amazing um it's a starting point that's what it is in my opinion of course but the fact that we've got it up and running that's great but what we haven't done is kind of flipped through on obs at all so oh yeah yeah if i kind of just for the benefit of the stream because i think everyone can see what you can see but they can't they only see what obs is broadcasting and so they're seeing like some crazy inception stuff and i'm just trying to think about the audience a little bit so let's just go through the process so hi this is uh phil goes deep and right now we're looking at incident zero zero zero zero zero zero two um and just hold the line a second okay so my my my other one hasn't been set up but we can just say bear with us we've got some technical difficulties um okay the stream will begin shortly don't worry guys we're still here jace can can we still hear you yeah you guys can probably still hear me okay thanks for joining um it's not over yet don't go anywhere uh yeah so i need to don't go anywhere we're still here so this is great this is like i said for me amazing because now i've got the framework it's a starting point and the only thing is this main one what we haven't done it what we would probably do in here is put my browser video captured whatever you want to share right it might be your desktop or your window yeah it's not video capture it's display capture so that would be large screen which is what i tend to put in their large screen okay and just switch over the obs and lock it you probably have to resize it i'm guessing so that it's not huge because it's huge right now yeah that's uh oh it's massive yeah just start dragging that top corner down oh yeah that's not too bad okay now this is going to be mad inception then because so we can get that right into that little box there okay so like i said this this was set up with that 1280 12 that other dimension in mind but you know you could change your um but you change the style of the site so it's different right of course yeah because you could also just share your window at that dimension and call it good oh can i can i change the properties of that and and you could also just prop the bottom there's a shortcut to crop the bottom if you hold alt and pull up on the part of the screen you want to get rid of so like if you want to bring the bottom out if you hold alt then click on that square on the bottom and drag up it should drop the bottom yeah you see but i don't i don't want to crop the bottom i hear you yeah i understand so it's going to be sorry we'll actually widen the width of that sidebar i appreciate the shortcut jace um i love a shortcut so i'll tell you what let's just flip over to this one because now we are on the stream so that that's what i was trying to get to so we've got jace still down the bottom uh which is great and we're now embedded in the website so whatever we're doing on the site you should be seeing on youtube so all of the audience that we've got which is i have to say jase one of the um best turnouts we've we've had which is amazing but you know i did mess up the the scheduling so i scheduled it it was really used by it so my bad my bad um not you know this is this is probably i know that someone earlier you know ashley yes n said what is what's obs overlay so um hopefully someone benefits from this i'm going to benefit what are we doing what were we doing so so we got this right we can keep riffing on this um or like configuring this if you want or if you want you could try to move into um move into like servicenow for rebuild because you can see exactly what we did here we made a website and it's the source for holding all your components of your stream i just remembered sorry i haven't put the webcam back down here that's what i was missing audio video capture device existing webcam okay and no yeah put that whatever you wanted down there you could also add some you could change the css to make that sidebar wider yeah that would probably be good let's just put me there for now let's just remember where that is exactly inspects i mean that element is called the scene primary sorry let's go with that better how is the code i've got too many windows my css work is is not good like i'm not i'm not the best with my css it's something i'm always hoping to get better at it but do you know what i do my trick for css no what's your trick for css inspect the element see what it's already doing and then change the values in the browser until it's kind of roughly right and that's good enough then i take those values and put them in and then i'll move on and try and i i focus i am not a front-end developer that is clear so even this stuff that you're doing up here using when i first started learning javascript it was all in the front end there was no back end at least not that i was aware of it was all like i've actually got a piece of code published on javascriptsource.com from 2001 i think and that was basically me doing a tutorial and then changing it and i posted it and that was updating the status bar in your browser window to show the date and time completely unnecessary but i think that's dom manipulation uh which is frowned upon in some in some circles so oh and service now i know uh so it's obviously very important to be able to manipulate the dom to make the browser do what you want but then i kind of when i got into service now about six or seven years ago i started opening the bonnets up and was like oh this is just javascript okay cool i'm good with that so i knew the syntax and i knew the kind of language but it was now back-end stuff so i'm making the client do things is now for me less i'm less fluent in that than than probably i ever was so css is like also not my not my forte oh man i just found this project a few weeks ago called um stylestage.dev okay did you ever did ever used to look at css zen garden no um sass is probably the the most recent thing that i got excited about with css where i when in service portal you've got variables and you can reuse values across your css and i was like wow that's amazing so what's zen garden so css zen garden is a project somebody started i don't know the guy's name um but it was pretty much here's a static html site and i will let you upload any styles you want to it so people can cycle through these different like ways you can style a website and the project started in like 2004 i think or maybe it was 2002. like it's old now it's um it's still up but the the maintainer doesn't accept new new css things how much anymore what's that how many did he get to before he said that's enough enough's enough it was 200 or so i think but if you if you just go there you might just pull it up and awesome yeah i know you know we can we can talk about it but it's it's way more fun to look at it so i don't need these split screens right now do i that that points proven uh why why are you playing what are we doing here that's this is what i was looking for first it's my first uh time have you transitioned into the are you still on the are you still sharing the screen on uh obs we should be good we should be good now um oh yeah i just there's a dead delay and it seems significant when i look at it it is when you're live yeah you've kind of and because obs is in the window that we're sharing on normally i've got a live view and i know what's going on and i'm monitoring it in the other window just to make sure that i'm in the right scene and things look good but here we are you know really playing around like we're building the car while driving it yep so if they even just css zen garden just search for it because i don't remember if it's just cssngarden.com or something different but yeah that top link there this existed like back in 2002 okay and you can see like this is their page it's just some static like page or some stuff and there's all these different styles on the right i don't know if these even work anymore if you click on one let's just see what happens yeah so this is that same page with just different styles now this is like circa 2002 okay nice man nice i like this so so you can do like this stuff with css and it's just crazy to me right um somebody else started a project called style stage because cssn garden is like it's like it's not the fun it's just it's not updated anymore yeah and its purpose was to like just show what you could do with css because it was new back then so if you go to stylestage.dell uh style stage i'm gonna do a new window style stage.dev yeah so this is the same premise you scroll down you can see that this is a page that's pretty much there's very little html on the page like if you inspect the element you can see the details of it but they talk about these different elements but when you get to the bottom you'll see that there's different styles you can pick from that people submitted there's featured styles and then there's all styles right if you click on any of these styles by the way this site is built with 11t oh right okay which is kind of cool and this is that stephanie eccles i think her name is this is this who you mentioned at the start that's yeah yeah she's the one that started the repo that we pulled from so the repo that i've shared into the youtube video description uh down at the bottom uh i think it's at the top of the list of the links that i've shared down at the bottom um while you're down there don't forget to like and subscribe the video yeah subscribe to the channel like the video um or dislike it you know however you're feeling just some sort of engagement it's always nice but you'll find that jay says forked he's he's got a link to git which is what we've used to build tonight's scenes and that was fought from stephanie eccles who has got stylestage.dev as part of this this whole site is hers or yeah yeah so but what she does is she accepts pull requests for different styles right this is the exact same page you just saw a moment ago with that banner with the colorful stuff on top yeah so this page here if you scroll down you can see like it's if you look at the content it's exactly the same content a lot just style different with css and this is using sas and modern css its purpose is to demonstrate using modern css as opposed to just random like the standard css yeah so okay so 11t is there any way so if we were on twitch and there's reasons that i choose not to stream on twitch mainly because youtube is a bit i don't want to say easier but it records the stuff and it seems like twitch is for gaming but twitch is a lot of fun there's a lot of events that happen when you're when you're on a twitch stream that the interaction you can pick up the events and you can sockets and all that stuff that learn with jason it talks about in youtube i think i think he just has his bot listening to the chat though i don't think it's like a like an actual official stream you don't think so twitch on twitch isn't doing those things i don't think so either i think it's just that you have like a irc bot running in the chat that listens for messages as opposed to as opposed to polling in the chat which if you want to do any of these types of commands and yeah and youtube you'd have to like have it polling in the the chat as opposed to having an interactive thing in there yeah and he's he's like filtering stuff out so he kind of like he says let me send a command here is he just posting into the chat but it's not displaying on the screen because you know if you look his messages don't show up in the chat when he renders them on on the kind of screen oh i don't i don't know i thought he does have them render on the screen stream they're done with the jason you're done with jason ling's swords yeah but he doesn't his messages don't come up on the on the ob he might he might have his bot ignoring his own messages yeah and then well i think the bot picks them up but it doesn't show them on the screen so he'll let me send a command boom and he'll make things happen on the so he like moved the submarine he had like a monocle submarine so yeah i was just wondering like here's some really cool stuff change the styles etc is is there any way we can from some kind of event or something like imagine somebody joins and posts to the youtube channel and it switches styles dark mode yes it's a dark mode or something like that you know is there any way we can where would we get the event from i'm not sure but i spent probably an hour looking for different packages that just like let you easily interrogate the youtube apis to get that stuff and there wasn't a whole lot of stuff i found that was really helpful there are some but i wasn't able to um i wasn't able to find it in a way that was useful the documentation on the youtube apis is extensive and very detailed but i don't think they're trying to solve the problems that we're trying to solve i don't think they're i don't think they want us to do these things that's what i feel i feel like twitch kind of wants us to it's just natively on twitch if somebody likes the video and somebody subscribes while you're on the video it makes a noise and does stuff yeah you can i think you can do that with youtube with um those partners like stream elements and i forget the other ones streamlabs streaming labs yes yeah like you've been set up like a clap they'll set up a website for you right and you can figure out your layouts there kind of like we did here locally and then you can tell it to listen for the events of like somebody subscribed or somebody sent me a super chat yes oh there's one there's one of those styles on that style stage which is really neat it um where'd it go it's like this html one it's so bizarre and interesting you should really check it out so um which one sorry tell me i'm looking right now so i can tell you for sure but if you look at this all the styles um the screenshot should look very it's transparency it's by jen's oliver marriott i think it's second to the last in the bottom on my transparency by jen's olivier miate okay okay oh what so is this the site in that style is that pure h yeah this well don't but it's it's not just this is it's actually styled like if you look at the css like she styles it you can see like none of the tags actually end yeah yeah yeah they just they just open but it lets you easily read like oh so this is all the html that they use on the site there it is i get inspired when i see stuff like this style stage and css end garden but back to your um your stream thing if you want can we tell can we like so because you've fought from stephanie eccles yeah is the stuff that she's done in here let me put we don't need obs over here like that'll make me a bit more comfortable if i just put that there and i know what's going on um so she's built these sites which we are looking at in code here she built this and you just borrowed it i thought i forked it i added some service now look up stuff right and um other things but this html is something from i mean you could drop it in but it's not going to render right because the html structure is different okay we can't just we can't just nick it that's what we do you know the word nick nick in the uk is just steal okay no no i mean so yeah i would i would like to like pull in those styles and just be like oh this is different obviously it would work different than um the stuff but the style of this of this twitch thing is very the scene repo is very minimal compared to the um style stage.dab yeah sure i was just thinking of yeah okay a lot of the time css or any kind of styling and design is is contextual so yeah you know if you want to change the styling she has the stuff set up well i found the property to change the width of that green bar if you want to make that twice as wide did you you know i forgot we were even doing that so where is that is that in primary because it's in the src yeah it's in the primary scss and then i would just maybe double or make those numbers 400 as opposed to 250 i'm not sure what's going to be on your screen to make that right and then make the the same number different on line five well no that's what because transparency she's she's doing something with uh with um a gradient so that because technically the screen has a black gradient and a green gradient and so she's saying make the transparency anyways she's making it so that there isn't a gradient here i feel like i just shrunk but i haven't you're i've just got loads more space but i i haven't because it's not that's not my dream i still go off so probably if i wanted to i should make the css go to around here somewhere where's my hand there if i like there so there is another thing you can do and maybe a better if you look on look off stream but you can add a you can add the ability to draw on your screen okay with your mouse um it's not too difficult i i did it the other day you want to want to do it at some point let's do it man let's do it we we should probably probably try and do one more thing you you've you said you've got time and i've got a bit of time and i feel like we need we need a bit more and then this is like this is great stuff i need to do some bits in the background and then the next stream is going to be in in this in some way shape or form i mean why wouldn't i why wouldn't i well let's let's first make sure you that you because you can change the color scheme too so i guess first things first is are you familiar with this as the sas variables i know them kind of they're at symbols from from portal at least you you define them i feel like they're at symbols yeah i'm looking for where she defines them she defines them somewhere darn it we can just hold down this link yeah i'm looking for the color primary if you do edit find files you'll find it i'm sure or maybe it's just color primary yeah on on the layout on layout css css on line seven and eight yeah okay if you if you wanted that not to be green and black if you wanted to do different colors like i know your your stuff is pretty much white and black right but if you want to change that to like pink for uh for the lives for the breast cancer awareness or if you want to change it to whatever other color and you just give that a save it should re-render and change all of your sites it's gone we're white now we're on we're all good so let's try it on a different scene let's just uh okay let's just fade this over oh look at me now uh this is excellent uh so so that nice nice and simple like settings for that kind of stuff because she used the same variables and places and this this is what i'm saying about um being contextual right so white is great but not if your text is white but because down in the bottom left that primary color is is kind of um what's the word that they they say in you know if you ever see the shows where they talk about um like the house interior design and they talk about that color oh you've picked it's like it's picked up it's picked out or something like that by using the same color in a couple of places it yeah it's like you're using like a theme or like uh you're styling it it's like consistent yeah your brain picks up on these things without even realizing without even thinking about it it just looks expected i feel like the the white and black is is a bit harsh but we can style it again a bit more um i mean vs code who would why wouldn't you use vs code i would have to go and google my hex codes normally yeah me too and and this is just this is just here so that's a that might be a bit harsh just going down oh that went rgb why did you go rgb that's weird it'll work it'll work the same why did oh was it already defined in rgb though no it was defined in uh it was defined as um 222 which it's not black if you want it black i think it's just zero zero zero yeah i don't know i i didn't know that i wanted that but then i do yeah um that's what i'm doing anyways yeah cool that's how you change that stuff if you wanted to make it so you could draw on your screen while you're streaming because like you i think you like to point stuff out and you like to draw your diagrams right exactly exactly let's try it let's see yeah so i included a file in my repo called green screen which might seem silly to include like just a green image like if you where was it it was somewhere in there include space i've seen something that we've seen during screen.png yeah yeah that thing so if in obs if you add a new source and okay let's maybe add a source that's like an application like i don't know what whatever your favorite draw like coloring application would be right so if you use i don't know what they have a mac but on windows it might be like paint or paint.net or [  ] or whatever or adobe illustrator whatever your case is right i'm adding a new source do i do it on the which scene do i do on doesn't matter whatever scene you'd want to draw on so i'm guessing your host scene where you'd have like your diagram on the left maybe like or like you're like white on if you had like a web page up and you're like you see this diagram here has a problem and you might circle like the database yeah so it would be it would probably be on the one that we're in now where like the main yeah so this is where i might draw but i don't know i don't know how this works so is it image source or is it well you'd wanna i i picked paint.net but i'm using windows and that's in a windows like by application to edit images you're gonna wanna have the same kind of thing so whatever application you'd use to modify that if apple has like its own drawing application i might have [  ] installed no no you you probably just just right click the uh the file and like go to edit whatever edit comes in i've got [  ] installed yeah okay sure sure so you'd add a source for like the [  ] window right or window and um and that and then you tell it to go to hold on sorry dice i'm already adding that green screen file am i adding the green screen file no no no you're you need to be able to if you want to draw on it you need to modify so you'll open it like you'll edit it and then you'll you'll see so add like add [  ] do i have to have it open i do don't i um you might have to have it open because i haven't got application here yeah open up the [  ] application then tell it to do a window capture of [  ] okay yeah zooms there so this is where i get i called mine drying screen but you can call it whatever you want let's just see if gimp's opening i haven't touched [  ] for a while i don't think i even know how [  ] works uh jace it's i think it's amazing from what i've heard and then i'll go into it and you know i've started playing with photoshop and after effects to do some of the scene transitions i haven't touched photoshop for about 10 years and i just realized why why you've got people that are kind of experts at this stuff the kind of effort that you and i might put into making a script work they would put into making an image beautiful right you know and and and looking at all these have you seen all these plugins and you know that's their gig and there's no way that i could i could be uh on par with with them from just opening downloading the file off the internet and then saying i'll open it up and know what i'm doing i i just don't know what i'm doing with with these things i'll i'll be better with ms paint uh to be honest so yeah i've got [  ] open i need to now add that as a file as a as a window capture as a window capture source yeah oh it's new right okay that's why so i call it [  ] so i know what it is right and then is [  ] there yes it's like the fifth one down yep and then if you tell it to yeah you're good to go if you add it like that i think oh i know what's going on you you're you're gonna wanna open that file now with [  ] i know what's going on here we're gonna have to alt translate to crop out the stuff but open that file first with that um so we're gonna chroma key are we yeah we're in a chroma key yet and then when you make changes to that if you had that up on like a second window or something you could just use your mouse and like circle stuff on the screen or or point to something like so i would open up that file first because it's going to be sorry i'm trying to i'm trying to find the file uh in here can i do it sorry i'm looking at the youtube stream and i'm back in time because i've got both on my screen watching it yeah i'm not being the best guest all right no you're good man now you're all good i'm trying to fight so i've got it open okay let me move [  ] over here because i'm not being the best host to be honest i've i've got it and i i know what i'm doing but i'm in a different window um open location no open open and i don't know where i've put things so it's in your user directory in documents yeah okay you can have access open then we're in this one this one where did we find them we found it under drawing scene which is not included not sass not a source i think it was 11t twitch scenes i think it was just underneath the main directory where's there where did you come from yeah okay so then if you just like leave this window like it is and you add it to your obs scene which is and you could make this your whole your whole scene if you wanted to if you wanted to highlight like your you know you're in your yourself or if you want to highlight like that bottom left text just doing the alt uh crop command yeah yep and then just put that to the place you want to be i would put it over to hold the whole page over the whole thing sure or if you want to just be over your wood like the the current content you could do that too i just want to crop it at the right size and then i can increase it okay so yeah i'll tell you what let's put it into if you do it over the whole yeah see the way all these things i made for that 1280 by 720 and your resolution is different than mine yeah and also it's different from different it's different from the laptop so i've got a monitor and i've got a laptop at the moment so yeah those two are at different resolutions as well so that doesn't help when i move uh screens around okay so do i want to chroma key that now yeah so now you want to right click it filter chroma key that thing and you should be able to do key color type just to green yep and it should disappear and now if you opened up something else you know on your like if you want to share whatever let me just uh fade this over because i haven't put that in so no one will see any different right now if i put this into a different screen though does that screw me up are you still here so can i draw is the idea so so in [  ] then if you were to draw on the [  ] the file in [ __ ] like to draw a circle on something in there let's change color and size see i don't even know how to change color there we go let's make it red normally you would annotate in red and how do i make the size drop that right down so i've done some stuff here tell you what let's switch the screen over to stardew it looks like you drew something there yeah i did yeah all right let me get obs you see this is the thing you need another you need almost like another window to do it in right that's too small so let's take that up 460. one of the things that that steph echols did with that bottom section which like why most of it's black is she went to this um it's in the readme file sorry jason i'll go the paint brush size um yeah so where's obs going have i just drawn the only other thing that she had done which i thought was really cool i didn't know about it is um she added web captioning to her stream so like when you spoke it would go to it would write it out on the bottom of here yes you see there you're drawing red on that uh style director the styles directory oh now it's disappeared because it disappeared now it's back when you share so when you're when you show your appreciations yeah it cuts but but if you wanted to like highlight something right or draw something quickly somewhere like you could just do it there and then you know you can just draw it out now it might not be the best to save it like that because it's green because i've switched screens it's gone into a different resolution i see what i was drawing because i did think this i i did manage to draw over your face which was not at the yeah not quite because i couldn't see you so i've got switch applications and that screws things up but you are down here somewhere so can i do that and there's jace yeah okay right so you distracted me and said i can draw on my stream so that was that was great um that's gone now um the web captioning stuff was really cool and i saw that learning with jason yeah he was talking about this is like accessibility right he's actually making because i haven't i've never thought of that somebody who did that who can't listen with ears like sorry with hearing like standard stuff i i have never thought about captions yeah i i don't normally think about him either but that um that steph echols she she used her like her stream that layout that we're using on her bottom right she used that whole section just for the captioning right um and there's a really interesting website called webcaptioner.com if you go there and you speak it'll dictate everything you say and it does it really well if you're using chrome i think uh this will work as well you just click on start captioning and you just start saying something like what is this incompatible browser on your workspace oh yeah you gotta use chrome or i found that i had to actually use chrome i couldn't use rave even okay but but that but that's just fine because then you don't have um then it won't be conflicting with the other windows right i'm not getting into the politics of browsers right now jace i'm not running i'm not running chrome at the moment so it's good to know so if you if you end up running at some point yeah just for this like you can just make that another browser over like a window overlay and then alt remove those bits and then when you speak it works it like it just makes the text happen does it do you have to set language and stuff like that you can set the language if you want it defaults to english and um you can change the size and uh you can have it filtered out like uh cuss words um and different kinds of things that's interesting so the things like the the submarine and whatever else that learning with jason had like floating on his thing that was like really interactive stuff which is really cool uh right i mean we could do that in the platform if you said you know like i was working on the sprint stuff i obviously did the community service stream i did i said well here's five or six stories which were actually links to the community posts and as i worked through them if that was in the platform that would be fine or if i even just modified your api calls that would that would work but i'll tell you what we should do um have we got on obs one last thing um i haven't got of those streams sorry obs is over here now i'm completely confused like what's what's going on i know we want this no this one won't work main host let's try duplicating this um and 11t host let's see i'll call it 11t zoom and i'll hide that and i will put window capture yet zoom in there underneath i think it there's a whole bunch of really interesting um links that uh that jason fellow had linked to and spoke about like including that obs ninja if you wanted to like make it so you could bring people in differently like if you don't want to be tied to zoom and you want to control like what could be seen or if you want to like maybe use your phone as a camera for some reason i'm just just trying to sort something out on here jay sorry i've i definitely don't have the show self view there we go and bear with me i know i'm in two places right now this one build this up let's fade it over i think now okay i've got i've got you still a little bit a little bit low there that's weird this one crop i'm just trying to bring this one over fade this in i think that's a bit better i'm just conscious of time and we're having we're having a good chat um yeah and probably good to kind of i don't know where you were in the stream um like i got i don't know what that was like for anyone who wasn't kind of on this side of the it was definitely fence mess it felt chaotic for us i'm sure it was worse for them i don't know what it felt like yeah like i mean we had a few kinds of moments where people couldn't even see the screen i went to black like fade to black and we were just chatting away so yeah user experience here maybe for the audience who knows did we do you think we achieved what we what we aimed there what what we set out i mean you have an idea of like here's a like a stylized theme of different scenes that that stuff echoes put together that we forked that we changed to like your liking right and then like you have a place to build off of i told it to query your instance or query and instance for different bits if you want to have that display different data you can just modify the code and have that run so i mean i i think we said we got out to where we needed to go i didn't i think you would be the person to make that call yeah i i certainly feel like very enthusiastic now about getting under the kind of really getting under the nuts of it figuring it out and just trying to do that but i think you can't do too much of it on on stream without knowing what you're doing like when we watch those videos of like learning with jason etc he knows what he's doing and how he done it he's like this is what you do this is how i've done that thing and he's got like set pieces yeah we're definitely the amateurs compared to those folks with service now i don't mind sharing my screen and figuring stuff out a little bit that's a lot of what this channel is about is there's something over there that i want to look at and figure it out and you guys can join me kind of thing but with with all the moving components and obs while streaming it definitely feels like like the wheels might fall off while we're driving along so it i was on on my edge of my seat even though i'm standing up um i felt nervous but i definitely feel that there's there's something here to work with so i'm really grateful uh jason if not if nothing else it's inspiration to move it to within servicenow to build out the now platform right i i don't think that we would have been able to achieve as much as quickly as we did with that preset set of yeah things um but now we've got something to like that works you know maybe we don't want to be in a circle um there's just css buddy yeah the stuff we don't really i'm not great with but you can figure we can figure it out i'm i'm gonna take a look at what is going on there and come up with some i think some ideas that eva is gonna connect to the instance and pull something down or some way of kind of you could even here's an idea you could even add another source that is the instance and then just make that like a frame like i'm gonna this make this page make this like scene or this page public or this workspace public yeah and then you'd have that interactivity without having to worry about that uh yeah james neal actually who i was speaking to and what's james if you get this far through the stream what's happened man i just imagine you're super busy like share logic is is kicking off lots of things going on um i was tuning in every kind of thursday to his stuff but he came on the channel um and i don't know if it was on the stream or just where we had a quick chat afterwards and he was like yeah i thought about doing so having a service portal page that is a source that's you know it could just be your left-hand column you don't have to do these overlays you could just share your script like share your scene with a page from service now and that would i mean that would be probably the quickest quickest way to get somewhere with it but um yeah i do like the over especially with a circle like you you cut off you've got a bit of um depth maybe so anyway i'm i'm talking um the beers the beer's not very nice i no not in the habit of rating beers on this show but if i was to rate it it would be it would be low um it's not my bag so yeah i just had water how was that with my it was good see my my official branded canister was that swag yeah that's swag from like a year and a half before the before times oh the old world the old world have you uh have you got any any have you got your bitmoji yet have you got any swag from mvp 2021 no i haven't got any of that stuff but i i am presenting something with um atash atreyatosh i think his name is okay knowledge i get it wrong yeah yeah on the speaker yep on the catalog uh the new catalog tool that they added builder what did you think don't know i have no spoilers no spoilers right tune in for your session but what did you think i think it's great i think the biggest problem with it is going to be getting the administrators to drive their citizen developers on where to do the stuff right because it doesn't handle it doesn't tell you you should do this in dev or prod or whatever like it's just it's there so and that isn't going to be addressed by the session that we're doing no of course it does check out though it does have a checkout doesn't it does it have an approval flow so because i was at a consultancy before the one i'm at now so i'm currently at rangoo uh focused on grc and other such like security and privacy um topics but you know in a previous life this was something that was recognized as being needed and it meant that you as a customer could manage your catalogue kind of development which isn't normally real development it's it's like new items decommissioning updating those types of flows in a kind of staging process if i recall i didn't know the product that well but it it checks out the builder so does that solve it and maybe we shouldn't get too detailed here because this is you know i don't want to tell you i don't think you're spoiling anything specifically but i don't remember i don't think it had like a checkout process because it really it's just simplifying the build so that when you tell it i want a new item as an admin you can say like i want folks to make items and i make a template so people can make items in this catalog and they can make them in these categories and they can make these items available to these users like these different user criterias and then they can have these variables or these types of variables and then as a user goes in there to make one of those things they're limited to things you had predetermined with your templates okay so that so for instance if you had like an item for software right like every software like i want to be a request microsoft access or vs code or whatever the case is to be installed whatever when the team that manages those tools wants a new one it would take somebody to make a cadillac item in an update set or in source control commit that stuff to prod this would let them do it by like picking the template like the software template or they say i want this installed and maybe they want to let them choose the computer they want it installed on where the date they want it installed and then they can just make those items and you're protected as an admin because you've limited the scope of the types of things they can reference yeah and um yeah it's kind of neat okay so i did see a checkout flag somewhere that meant that if i started doing it in the catalog builder i couldn't then come along and do it in the back end something that i didn't explore in the catalog builder you can edit it until you edit it in the back end once you edit in the back end it stops being available in the catalog builder okay for me the the big thing when i saw that was look look how powerful now experiences where they've rebuilt and they've consumerized the catalogue and they said look here you go here's a use case and then you've done the the dashboards and here's another use case and something was mentioned uh today there's another thing that that's using the experience but you know dev developers servicenow blog site that's built in now experience it's i think cattle build was a great place to start with something that really permeates into the organization i i think you've hit on something there about you know exposing that to the end user but is that that's true and broad today right people can create reports in prod and it's not synced back that's why cloning is important so right yeah i guess let's see let's see what happens um jace anything you want to plug do you want to give us the number or share it now or when is that do we know any details that you can share i don't have the number off top my head um i we have yet to record it so no worries um we can add it to the links i'll send you a link later put it in the comments on the on the video whatever i think i've i've done a fairly good job of dropping in your your plugs in there but is there anything else you want to mention people should be aware of are you taking part in the hackathon for creative con this year i don't think i'm taking part of the hackathon um this time this year but i do know that i am going to be doing a rewrite of my news.js.pro on thursday and friday this week okay so i'm really excited i hope i can get it done in those two days and be saying on stream is like a commitment to myself that's this what's gonna happen this i have thursday friday out this week for doing other stuff and i thought you know what's really good use my time to unplug to plug in to really get deep nice man nice so you're going live like saturdays you go live date or friday night or you know when when should somebody go in there and click refresh and expect to see something change or will it just be incremental are you just are you developing in prod i just see uh andrew barnes has joined in so uh are you testing in prod uh jace i've got i've got a proof of concept but it's um it's not i have to start over because things have changed too much in the tool i've been using so anyways my whole point news.js.pro will be getting a big update where hopefully people like yourself can like manage your content and other people can like start it or upvote it noise um so that that was the idea robert fedoric had reached out to me and said you know you could really make this better if you could like have something to like review this stuff like this is jace's favorite content or whatever the case is i think you know that is a good idea yeah excellent so and like i said i was getting i was getting hits on youtube from jstop pro and i was like what jace has posted a link but you you just had a crawler out there that was finding the stuff or something an aggregator at the time when you first got edited i had um a script running on netlify once a day that would read like 50 rss feeds and um 50 rss feeds and a few other things and it would build links to all of those bits whenever it found it now i have it running locally on a computer at my house and it uploads it to netlify's cdns every hour you are just you're something else man like well i mean i have to think uh i know um upside down andrew he gives himself a hard time but me messing with it so much but it was really his idea and i just made it a thing so thanks andrew and andrew barnes um the right way up andrew is has just posted the knowledge session in the chat as well so um i don't know that somebody should have to wait to the very end to get that so i think i don't know if this is dangerous i'm editing the the thing here so um everything else with ninjas this uh this stream i think one more thing one hurt yeah so check out jace's knowledge session yeah i'm really excited to rewrite that um that news that jsonpro i am going to be borrowing some bits from servicenow like right click filter out show matching because everybody loves that stuff you want that in every section i literally want it on every site everywhere i'll go places and i just right click on things and it's like oh yeah that's just not there why is it not there whoever did that first first right click kind of context menu i don't know if it was fred or whoever it was just i hope they were just walking around happy with themselves proud you know well the new stuff it isn't a right click anymore now you have the three ellipses you click the dot the button which makes it more accessible because before if you didn't have a mouse because you couldn't use a mouse how would you get the right click menu up like if you had to speak to the yeah you could get a screen reader you couldn't like tell it to show matching on a cell accessibility is very important and it i think it's one of those things that needs to be challenged a bit more because it's very easy for people to overlook that and you know we were talking earlier about transcripting live um and and what that means for people so accessibility is important putting things even just putting alt text in your images when you upload them um you know there's a lot we can do on it i think someone needs to hold us to account on this stuff and make sure we're doing it and thinking of those those points um yeah just last week there was that supreme court decision and i figured what state it was but there's been two big decisions in the u.s about accessibility dominoes had lost one and they had i don't know what exactly they did but they had to rewrite a whole bunch of things to make them accessible compliant and i think that was around the time that servicenow had big pushes for their accessibility in service portal so it was like 2018 and then there was just another one where the the high court not supreme court but some other court went the other way like no you don't have to make yourself accessible you have alternatives for people to get there yeah i i would hate to think that somebody was missing out because of a design decision that wouldn't have been that difficult had we just thought of it at the time and neuter thought of it and it was in there in the standards in some way that said you should do it and maybe instant scan is going to have an accessibility suite and make sure that the things we do on the platform um really do support that so that's a great idea to have a check for accessibility because i'm sure there's stuff we miss i don't even know what accessibility really really means to be quite honest with you like i've never looked at things through a screen reader or had to i you know i don't know enough about it to know what's what's required and why it's important so that sounds like a great idea for your stream sometime absolutely um you know and it's thanks to you fcj so we've been talking about that because you pointed me at learning with jason and he was talking about it and i thought whoa hold on a minute that's something i'd never thought about so anyway um i think we've done some good plug-in um andrew barnes joined i don't know how long he said we were playing in the background so um it was like radio it was like radio we managed to just hit the two hour mark there jay so um let's um let's say goodbye to uh the audience and i'll say um thank you so much i need to switch the screen somehow seamlessly roll out of this complete chaos of a show which has been very enjoyable i'm going to fade to black so yeah thanks everyone take care stay safe and see you next week or on the next show thank you thanks for having me you