Editing Salesforce Visualforce Pages (Part 2) - Live Coding with Jesse

Key Takeaways

everybody welcome to live coding with Jessie today we're going to continue with the styling that we were doing yesterday so I did a little bit of work on it between yesterday stream and now so I'll catch you up with the work that I have done and then we'll keep at it let's see I did want to let you all know in case anybody can make it to the the node member conference that I'm going to be speaking at Nashville at the end of November I don't know if anybody is in that area or is planning on being there but if you are I know when and where I will be speaking so I thought I'd share that with you all you can go on the November site and check it out whenever you want but I just figured I'd I put that on there so I will be on Tuesday it will be Tuesday November 20 I think it's a 28th at 4:00 p.m. so not bad get this timeslot right before the keynote speaker so I don't know if that's as good or bad but I'll be one of the last speakers all right so let me get I don't have my live chat window open yet let me get that open okay it looks like someone was kneeling so AR wants me to link the site I'm gonna put a link to the site that we're working on and the live chat right now all right so I've changed some some minor details but I think there are important details not everybody who would notice them but it's important for consistency so it's going to be hard to tell without a side-by-side of the old version but what we've done is we've added a different shadow and we've changed the border radius before the border radius was three pixels now it's two pixels that might not seem like a big deal but we use two pixels for everything unless something's changed the last time I checked for material design the standard was a two pixel border radius so we switch that up we have the proper shadows now the shadows were different we have a new button the colors may or may not change I just copied these over from another form that I had done so we have let's see we're gonna have to change that border radius so I was right in the middle getting this button changed whenever I started the stream so let's make sure that that border radius is correct we now have the correct shadow and the correct effect when we hover over it okay we've gone with the all-caps for the text and a slightly thicker for the font the font so all changed to we're going to change the font family and then other than changing the font family changing the color of these it's probably the last thing that we need to do yeah because this this effect is exactly what I want so I'm really glad that this is the default effect that way we don't have to worry about trying to like this okay all right so let's finish up with this button let's change these colors and then we'll try to get the correct font in here so let me see right now what those are no this isn't the right I have a lot of dev tools windows open right now okay so this actually has a three pixel border radius right now as well oh look at that we did we definitely don't want that so that's the bond focus all right good to know I'm glad we that we caught that so let's go over to our CSS so I've since we're adding so much to our CSS I started putting in some some comments just to break it up so all these are for the navbar these are for the cards this is for buttons so hopefully it'll make it easier if we ever have to come back to this or somebody else has to come back and edit this at some point it'll make more sense all right so first of all let's take this good button focus okay that'll get rid of those styles that we saw briefly forgot my period oops and I forgot to check the chat and start my timer so let's get the timers started wherever it is it is okay so let me do 25 minutes of coding and then we'll take a five-minute break and I'll come to the live chat so if you have a question just hang on for 25 minutes and then I'll get to your question see cool Andrew in the live chat said I'm a big fan so thank you so much that's that's awesome that's actually really cool that my stream has fans anyway I'm glad you're here glad you're in the live chat and unable to join us so I really appreciate you all who are able to join in the live stream I appreciate everyone watching but it's also really cool to have that feedback in the live stream it's definitely a different vibe whenever there's nobody did my camera oh no ok I thought it froze for a second but I was looking at a different preview so we did anyway what I was trying to say was it's a it's just a different feel when there's not that many people in the live chat I I don't know if it's bad I wouldn't say it cause say it's bad but it's just it's very different so I kind of like when there's when there's more activity a hard shot I said you tested the print view and PR 50 in the bulletin I have not tested it yet so I'm gonna test it soon probably I'll get back to that project when I'm done with this but like I think I mentioned yesterday I really just want this to be ready I'm just I'm getting a little bit nervous because no one's been talking about it here I don't know what the due date is I'm just nervous that I missed something or that it's not gonna be ready when it needs to be ready so I'm trying to get ahead of things oh you know what I just saw - we don't want this color - the underlined so we need to change that as well so we're gonna we've already put in the code you know we didn't we need to put in border-radius two pixels and that should take care of it okay you know let's let's check this let me bring over my dev tools window and let's pull this to the side so we can see what we want to see here and yeah this is definitely the input interesting okay yeah this is what we want so on focus we want to change the color awesome alright so let's grab this and we'll change that color button so let's let's put in input let's let's put in this yellow so I don't know if you remember from probably stream a long time ago probably months ago we had some discussion about the the color this yellow color that's in the palette so this is color I'm talking about and in its original version it's just too light to use on the web it's hard to read so I converted it to this format and was able to darken it just a bit and then that little change made it much easier to read so on a button it's not a big deal but if you I rarely rarely do font like this but on like a thin thick place like this then it it's useful to have it just slightly darker so it's it's it's almost you'd have to have the colors right next to each other to really tell the difference but it's that little bit of Darkness really helps so I kind of like that I think it's the third it was a hue saturation light and I don't remember what the last one is I think that's what it is so anyway I believe it's this third value here that you need to change to darken or lighten an image or I'm sorry a color okay so this is that's right that's what we want now let's grab this and I want to do two things to this actually text occasion so we want to change the color first of all but then we also want to make sure that we have a text-decoration:none no matter what I don't really like the underlined I think the cursor:pointer will be fine I'm assuming we have that yeah we do it should be by default on an a tag anyway so let's grab all goodness this is just the default a style all right then ling-su we want to put this I almost want to put the styles that are more Universal you know for a base element like an a tag up at the top so let's put that at the top that I know I didn't copy out yet let's see all right let's see what color I don't want this blue but I do want whoa is that for some reason we just got a refresh it's okay I want to I'm okay with the blue color let's check out what we're currently using here okay here we're using this blue this blue is in the color palette but I'm not really a big fan of it for the web so let's see I'm pretty sure we have links here okay so we are using that yellow for links okay we could try that I'm a little bit hesitant to put the yellow text right next to the yellow button it might be too much so maybe we switch up the button the only reason I really like yellow for a button as it stands out now this isn't really a call to action so mut I'm not that worried about it but for for a button that would be more of a call to action I do like the yellow stands out all right let's just see since we have the hex code right here or I shouldn't say the hex code because it's not what we're using but since we have this here we'll try that first if not I'm gonna try to track down a blue color that I know I'm using in a few other sites that I do like better oops I forgot we're not I don't have library though alright so that was a good time oops and you make sure we apply that to both and then let's just get all of them just to be sure I'm not gonna test it out to see if this is necessary it's just so quick to to type this out all right so let's go through our little flow here we're gonna take our Styles move it into our template we're gonna save that and then we're going to take all of this and move it over here now you'll see this looks a little bit different I wanted to show you all the newer version I think they call it the lightning experience so this with the newer version looks like and also if you remember yesterday I was super frustrated by how tiny this this window was here with the with the code so I went in dev tools and made it a lot bigger I'm thinking about using tampermonkey to write a script to just change this but I don't know if it's worth it it depends on how much I'm going to be working with this if I'm going to work with it a lot then it's going to annoy me so maybe I will wear a script but for now since I'm just copy and pasting in there it doesn't really matter it'd be worse if I to edit it directly okay let's check this out okay okay so that's working out like we wanted two buttons here the yellow I don't know how I feel about that yellow yeah I'm not sure I think I might change it I think I'm gonna leave it for now just kind of get used to it and then maybe come back to it later on so let's make a note let's see can you do inline notes now you can't well at least let's see if you could do this I don't think you know what I think you can do it in SAS but not in regular CSS I don't really know it doesn't matter I'll put it right here okay all right I'm just gonna look quickly oh that actually changed that as well that's interesting so I guess this is an a tag and this is not actually I don't really hate these being two different colors I'm but I'm gonna revisit those again I really don't want to mess with the colors too much well I have a different font because the font the the type of font and then especially the font weight plays such a huge role in how things look a color might be fine and with one font and with another font it'll make it unreadable so let's get the right font in here now I keep saying we need to change the font so let's just do it now so I'm gonna go through I could just copy the font from a other project but I think it might be a good idea to go through how to grab a font so we're gonna get a Google font let's see so I just typed in Roboto Google font am I good at google fonts okay now there is a home page the google fonts where you can browse different fonts and pick what you want so you can go to that if you're not sure what you want but since we knew exactly what font we wanted we're just going to go right to it so you can see a lot of information about the font but what we want to do is select it so we're going to go up here and select this font and then we have this little you know drawer down here and it'll give us several options for how to embed this font we can also customize the font so we can see we can grab what we want so right now we're just bringing in the regular 400 font weight but I want to bring in light medium bold and I'm not sure if we're using italic anywhere yeah I'm not I'm not sure I'm not gonna bring in any italic now if we find somewhere where we see us our text will bring this in but for now this is good if we end up not using one of these font weights we can always redo it later because this is a lot to load it gives you a low time estimate of moderate we'd rather get it to be fast so I'm thinking we actually might not need the medium at some point but we'll see for now I'd rather have it so that I could see what they look like you can also pick languages so we're gonna stick just with Latin I'm I don't sorry I don't mean languages in the sense of a I know it says languages but these are really more characters I'm not sure why they have languages as the title there okay so we can do it two different ways we can do the standard way or we could use the import and I'm not sure what would be the best hmm I don't know I think I'm gonna try to do the standard way since we have access if if I only had access to a stylesheet it's nice that you can import it as well but let's put this in right above our style I'm gonna bring this in and see you can see it it tells us all our font sizes here and now we'll just copy this and before I paste this into our our style sheet let's see where they're bringing in their font if they're putting it on the body tag or down lower let's see okay they are oh they're bringing it on the HTML tag okay that's interesting I think will bring ours in on the body tag there should not be anything that displays outside of the body and that's true so I'm gonna put it on the body tag and I'm gonna do this like this so HTML body that way I'm positive that at least at this level my font family is more specific than theirs so it should override theirs we may find some cases where they've added a font family you know down lower or something more specific but we'll we'll figure that out when we get to it so with these I want to test this out and let's keep forgetting where I have these windows actually you know what I really want to do whoa Oh interesting so it's giving me an error for my link tag interesting let's see if I couldn't just do this okay so it would not let me put this link tag in without terminating the tag which is fine um obviously we've been doing react for so long we're used to doing that so normally I would but since we just copy and paste it in I didn't even notice okay anyway I was going to say if I end up using tampermonkey to put a script in I think I'm gonna put in a button that can just make this fullscreen because I don't need any of this stuff around the edges it's just taking up a lot of space and I'll never need to select anything so that might be useful to have a nice you know fullscreen I don't know what these buttons do maybe there is a full screen you know that's a search this is like oh okay there is an undo redo increase font size decrease this is the most bare-bones editor of I've seen at least it tells you the positions it's probably hard to see that fonts are really small but it does tell you your the line numbers so not bad but very basic ok let's see what this is nice let's verify that we are getting the correct font so we're just going to click on a font here and we'll go to computed and see computed is usually the easiest way to find something specific yep it's the right font let's try one other place just to be sure it all looks right but yep there we go okay wonderful great alright so with the exception of a few things that we're going to think about and maybe come back to later on this is not bad we may change this add some things I don't know but I don't want to make any serious design changes until I get some input from other people at the University here because it's honestly going to be a waste of effort if other people have strong opinions and more authority than they permit it to how to do something right now okay let's see alright I got about four minutes left and then I'll do question answer so if you've been asking questions just hang on for four minutes and then I'll get to them okay now let's check this sign up view and make sure that it looks right if everything's right with that then we're actually going to sign in if you remember yesterday we tried to sign in and it looked a mess so we're gonna have some work to do so let's sign okay interesting interesting maybe there's an inactive class I'll have to check that out as to why these colors are changing but this looks fine it looks like all our styles are being applied oh that's a problem I don't know if you notice that when we need to let's see what it does here all right this spacing is fine but we need to add some more space between this and this so before with the other font it was it wasn't overlapping but now you can see it's actually overlapping that T and the GR overlap so that's not good this kind of thing I don't want to make myself sound like I'm an expert or anything but I really think that when it comes to CSS stuff attention to small details like that are the difference between a really good site in an okay site it's not the type of thing that every user is going to notice but if a user does notice it it's gonna drop their confidence in your brand or your company or anything at least it definitely does for me if I notice little things like that I think if this company doesn't pay attention to these little details on their own sites are they gonna pay attention to the little details when dealing with me with whatever product or service that they're offering so I've I've actually just refused to look at anything else on a company's web page because I noticed little things like that or even bigger problems and I think I basically just in my head think if they don't care enough about me as a user to fix these things then that's not really the people that I want to work with so at least to me it's a big deal maybe it's just because I do this and I notice those things but I mean if you went to a building right and the steps were all cracked and it was hard to get in and it was kind of you know dirty he it would be leave a bad impression right it's the same thing with a website you come to companies web site and things aren't quite right it makes an impact on people alright so and enough of my my speech on CSS let's fix this okay so our h1 let's grab this class and application and title let's let's put this down in the card Styles section since we're inside the card so in our card style section this this is about the entire card the wrapper so it makes sense that the title would be underneath that so I'm trying to give some structure to the CSS I'm not following a specific methodology but better to get do try to do something then just have a mess of things which if you've all watched the streams for previous projects you know I have a tendency to make a mess of the CSS if I'm not careful okay so let's just change this bottom margin a bit margin-bottom and let's go with I know they're doing EMS but I'm just way more comfortable with pixels I can usually tell how many pixels I need just by looking at a thing and I can't with with other units it's got a 24 because what we really want oh yeah that's that's much better let's zoom out of it yeah perfect I like that okay so let's grab this and paste it over great okay I'm not gonna bother testing this right now it's pretty basic it should work and my timer is just ran out so let's take our five minutes do some question and answer let me scroll up to the top and I'm gonna work my way down and get to as many questions and comments as I can if I don't get to your question during this session after our next 25 minute session of coding then I'll get to all the questions so red asks is it possible to learn Python on free code camp so as far as I know free code camp there there exercises or challenges whatever they call them it does not deal with Python but potentially free code camp is more than just those lessons so you have the YouTube videos you have the forum you now have the guide which deals with a lot of different topics so there may be other free code camp resources that could help you learn Python but in terms of the specific challenges that are on the main free code camp site I don't believe there's any Python in there they are working on a new curriculum as far as I know there's no Python in that either I could be mistaken so if anybody I know some of you that watch this are also working on helping with other things in free code camp so if I'm wrong about that let me know but I tell you where is a decent place for me to pick up the little bit of Python knowledge that I know is Udacity is intro to computer science course uses Python so if you also would like to get some background in computer science and learn Python at the same time that's probably your best route if you are already really confident in all these computer science concepts and you just need to learn Python syntax quickly then that might not be the best for you you might want to try out code academies and browser exercises I believe they have Python I'm not 100% sure it's been a while since I was on their site but those would be my top suggestions hopefully that helps okay harsh it says I have a question what is the benefit of using Salesforce let's see you may have used Google forum for submissions yeah so the benefit with Salesforce is really in I don't know how much I don't want to show you too much in the Salesforce because we have student data that you're not supposed to show anyone so I don't want to accidentally show that on YouTube because the university could get in a lot of trouble for that and so could I so I'm just gonna try to describe a little bit about the other things that Salesforce does this is probably I'm sure you could check it out on their website but basically the ability to track and run reports on all the data easily from a pretty simple user interface is one of the strengths of Salesforce there are a lot of other additional things Salesforce can do with that data like sending emails automatically depending on what stage of the journey they're in you can get sales horses like you pay for the base product and then you pay for these add-ons so depending on what add-ons you get it can do other things were maybe going to get an add-on soon I hope we do where we could define routes a basically a decision tree for new students or donors or whoever depending on what actions they take they go through entirely different route of automated emails and mailings and phone calls and different things that could happen so that we can really customize the experience for each prospective student so that they get the materials that are of most interest to them based on you know where they're at what major they're interested in what sport they're interested in playing so I think it'll be a nice it will help to automate a lot of the work that we are having people do right now that they probably there's no need for them to do manually so that'll be nice to free up some time for other people but then it'll also be really nice for the prospective students as well so that they don't get a lot of material that's irrelevant to them and kind of a waste of their time to go through so that's kind of the cool thing that to me that I've seen that Salesforce does there's so much more the Salesforce does that I have never seen or used so I don't want to limit it to that there's also some machine learning things that they're building in now that I haven't used so it can do so much more in this use case it's basically online form right we could do this ourselves and it would be easier honestly to build out the form in just plain HTML CSS set it to a Google sheet and be done with it but we wouldn't have access to all those other things and it wouldn't tie into other systems that we have on campus so anyway hopefully that explains it a bit I am by far not a Salesforce expert so I'm sure I'm not doing it justice in terms of what it can do okay let me go I was just checking now I don't think I was hoping I'd get down to the bottom of the chat but there's too much there now so I'm just going to mark down where I left off and we'll get back to it after our 25 minute code session okay all right so what was next all right we fix this now we're gonna login I thought did we log in yesterday why am i logged out of I'm gonna grab the grab what I need on this other screen evidently I have several accounts for this now that I'm checking in my my last buzz okay all right I should work whoa wait wait wait hold on yeah you all saw this yesterday right it did not look like this yesterday it this is what did we click on yesterday that looked so crazy all right we need to check this out okay this is our video from yesterday this is what it looked like yesterday and then now it looks like this I'm happy that it looks like that but I don't know well hopefully at some point we'll get this screen again and can see what the problem is all right wow that's pretty crazy okay well I'm happy about this so the styles that we've applied here and to the button are still working as well as our font so that's good news this might take less time than I anticipated so let's go ahead and start the online app why [Music] why do they make me click that and then click another button alright that's not really something I can change I don't think that was a good user experience decision though all right let me see I'm just kind of checking the font size is a little small for me that looks like twelve or fourteen yeah it's fourteen let's make that bigger where are we getting that fourteen from I like to set my minimum font size at sixteen pixels so how is this Christian's contain [Music] Wow this one is at 12 point font yeah we definitely need to make these bigger these should both be at least 16 let's see if we can see if we put it on here on this element if we can get it to affect the elements below it I don't think so but it's worth a shot whoops it's 16 no but can we get here we go no I don't want that now it affected this font size as well all right I was just trying to get around being really specific with these classes but I think we're gonna have to so let's go to this one I guess we could use not yeah let's just do that let's try to use and knots and knots will that work yeah that worked awesome I like that okay let me copy and paste this and then explain what I did in case you're not familiar with this selector we're gonna put this under let's go with loops do not mean to hit that let me make this a bit bigger I'm sorry I should have made this bigger earlier okay okay so here's what I did hopefully you can see this you know what I want to let me reset these settings is I don't want this to get cut off by my face so I need to set this so that we can scroll past the bottom core settings scroll past end okay that's a good setting I I like to have this setting on all the time I don't know how it got turned off at scroll past end and Adam lets us do this which can be useful if you don't want to have things right at the bottom of your screen so right now here's what we're doing we've selected that target X application percentage container which was our full container and then instead of having to go through each one of these spans and select the the class because we didn't want it to apply to one of the spans so instead of having to select each one of these separately we just added a knot and then put the class that we didn't want to have in there so this is so much more concise so that's that's what we've done there in situations like that it's it's really nice and it saves some code alright it's ok I'm ok with this the only thing I might change I'm not worried about right now is this red I don't understand why they're going with red for that that usually indicates that something's wrong like an error so maybe it will change that and see I'm just really interested in seeing what it looks like when we start so let's move on to that okay not bad let's ensure that our Styles okay so our button styles are not applying whenever this disabled class is there let's see what happens when we apply okay great now our styles do take effect so that's okay let's make sure that our card styles are there it looks like it but it can't hurt to double-check target ex-con interesting no they didn't apply okay but we do have a nice class too to latch on to here so we have this target X card so let's grab that and we should be able to just add this to our card styles and we already have so here's our card Styles it's interesting on that first page they don't use this card class on what is essentially a card so that's a little bit odd okay but that should take care of this card also I want to fix the same thing that we had going on before with the spacing let's see Target X application form title let's make sure okay great we should be fine we just never pasted those styles over so I'm not worried about that let's see dab this blue color is on these dropdowns so we may change that and they are actually really small all right I'm not going to change it right now right now going through I'm trying to differentiate between things that if I have time I would like to do and things that really should be done so this category here of things are things that I think aren't necessary to do so we're gonna hold off on these what we would do is change the color and the size and positioning of these a bit so that they're in here more but I'd rather kind of go through everything and look for major issues alright so let's start now the problem with this application is going to be that there are things that I won't see depending on what choices I make hopefully there's nothing like really different that I should be seeing it should just be what questions I get shown or not oh all right so this is see that this is a good illustration of the difference like this obviously is something that needs change this is ridiculous oh well interesting on this page these arrows are much more reasonable in terms of size I wouldn't say errors what do they call these Chevron's okay all right so the only problems I see here right now are the logo is way too small this button needs styling and the text is way too small in a lot of places here you know down here inside this select this button these styles oh do you see this we're definitely going to take away that I'm not a fan of this here yeah all right so we're gonna take away that animation let's see what happens hmm that's a cool effect we'll want to change the colors here of this sidebar I think the font size should be larger here I'm thinking more of on a phone it that click the tap targets need to be I would say at least 40 pixels tall and that's there's no that's nowhere near 40 interesting this is going to need some work on mobile I'm actually really surprised that it looks like this one on a mobile device I'm gonna have to I'm not gonna do it on the stream since you won't be able to see unless I get my phone in but I'm not a fan of this I'm surprised this should be centered maybe it is centered in terms of the entire width but they're not taking to account this little sidebar and they should so it should be centered it should exclude this width and then be centered here yeah so that definitely needs some work there's no reason why we can't show the logo as well I mean I'm all for a really slim navbar on mobile because there's not a lot of screen space but I think we could stand to be a little bit taller here and keep the logo otherwise there's there's no branding at all for the University okay let's see how much time I have nine minutes all right that would be a good time to make some some notes about this because I just noticed a lot of things I'm definitely going to forget I'm after the question-and-answer session so let's grab a Trello board and make these issues I mean normally well I wouldn't say normally I was trying to test out doing a github project instead of a Trello board but I'm not even really putting this on github right now so and I don't know if I ever will so let's just go with the Trello board I forgot on Chrome Canary and I don't have any much stuff save alright I'm gonna make a new one and potato this first application and I'm just gonna go with the blue for now okay I'm not gonna do all my Kanban rows here right now because I just want to get these ideas out of my head and onto something before I forget as fast as I can okay so let's say [Music] vacation and I'm gonna give these estimates pompadour estimates while I'm doing these I probably wouldn't need a whole Pomodoro cycle to fix that but it's easier to type 1 than 0.5 let's see okay so the first three in case you can't read these it's a fix button colors in the in the nav here change the side nav colors increase font size and and items on the side nav change icon colors and we're going to make all fonts at least 16 pixels and let's let me check this up because I think what's happening is they're using gray instead of black with opacity so let's double check this I didn't give me what I wanted oh there yeah see is this it so they're Gray's are actual grace we don't want that we want Gray's that are black with opacity set and I can't find whether where they have this label there it is let's see okay yeah see that's great let me change this right now just to show you what it different so I'm looking I'm a zoom in here on this name where it's his name right here and let me change this so let's bring this up and let's pick up let's just pick a black so we're gonna do black first and then actually let me switch No there we go let's go 54 okay this is going to be hard to tell because we we don't have it side by side but basically hopefully you're able to see and you can go back and rewind the video and see it's so much easier to read text that's black with opacity with I'm sorry transparency yeah you could say either way transparency or opacity but basically it's 54% is the standard that I do when I want to do input fields 87% is the standard color for all other text but it's so much easier to read when you do that as opposed to using a very similar color but using the hex code for gray in this case it was cccccc yeah I think that was right so anyway that's just a good tip that's actually in the material design guidelines so I didn't make that up myself or discover it myself but anyway that's a good tip so let's just say in our Trello board okay all right what else did I see we remove that hover effect for these buttons scroll down so required field shows up as red I'm gonna have to think about that that seems a little extreme I have a show up that red let's see Center courts on mobile let's see okay okay not bad so far let me check my timer alright I got a minute left so we're gonna stop there we got a little bit here down there so not not too bad all the the big things are there Oh actually I want to change the colors on these indicators there we go all right I'm just gonna start with the question answer session a little bit early since I don't there's not that much I'd get done in another minute so let me scroll up to where I left off so at this point in the stream I'm finished for the most part with the coding portion so if you're not interested in the question answer session and that would be the time when you might want to take off otherwise please stick around and help answer questions or ask some questions of your own okay and see the heart rook said please add some space between username and sign-in when you click it yes that was exactly what I was thinking so good call on that sorry I didn't look over and see that sooner okay Harshad has some good advice here Harshad says he found an online wire framing software called Sigma fi GMA which is as good as sketch and it is free so check that out I just heard of it so I can't recommend it but check that out figma comm fi GMA calm thanks for the say the suggestion Harshit John Hanson says with Google Fonts is it ever worth it to actually put their CSS into your code or best to leave as a relative link Harshit says I guess for Roboto it's good to use the the link because it's usually cached it's quite a popular font yeah I agree and I think that that would harsh it said can apply across the board to different JavaScript libraries and CSS libraries and things if it's very popular you might get better performance in terms of load times by using the the link from a CDN or something like that if what you're using is not as popular then you might get better performance by having it you know within your code base so it's a good idea when you come to the testing phase for you know site speed to try it either way then and see what kind of results you get it looks like those sign up and login links that we were seeing on the first page that for me were two different colors were not two different colors for some of you so maybe I thought we'd changed it for visited as well right didn't we do that yeah maybe active there's got to be some sort of active or inactive class that's going on or off to check that out more closely later on that'll up probably fall under the category of little things that don't absolutely need done but if we have time we'll do it okay rook says the courses from Rice University on Coursera are also good for Python they're free to audit so awesome thanks for for pointing that out rook there's a lot of free courses out there it is really good to hear what other people say about the courses because otherwise it's like which one do you pick you know there's so many free courses not just for you know stuff like we do but all different fields world's asked do you see things like Salesforce take away possible dev jobs in the future I I don't know that I know enough about this to give a good answer but based on what I do know here's what I think the something like Salesforce would help to cut down on a lot of manual work that's done but not necessarily by developers I'm talking about data entry work manually filing things manually making spreadsheets and copying things over so in that sense I don't think those are necessarily things that devs would be doing and for Salesforce if you want to do custom things then you sometimes need a dev so I can see it going another way and there's now this whole niche of Salesforce devs that can develop you know add ons to Salesforce or change the look right now with the level of permissions that I have in Salesforce I actually have higher permissions than most other people from the University because I need to access some some of the code but I don't have permissions to change everything but if I did I could change the look of the the whole UI for the the admin panel in Salesforce you can change quite a bit so I imagine there are dev opportunities because of Salesforce where there weren't opportunities before now certainly are there going to be opportunities as many opportunities for devs to build something like this from scratch you know proprietary systems for different institutions no but I don't know that that was a that'd be a good situation anyway I that would be kind of a mess I think to have to go in in every different place has their own custom built system I don't know so I guess my short answer is I'm of the opinion that this would not take away depth it might just shift dev jobs Harshit says did your famous IT department finished the single sign-on yes they did actually let me let me show you what this single sign-on looks like I don't think I showed you this I did work on some of the styles it didn't turn out exactly like I would like I wanted it to but it was a weird workflow where I couldn't edit any Styles directly I had to send them to the head of the IT department and then she forward them on to another company and then somebody at that company had to actually put the styles in we had a lot of trouble going back and forth where the code that I gave them didn't get inputted into the right place or properly and so finally I just tried to make as complete of style sheets as I could and then send them and say exactly where to put them and then for the most part it worked out but there's still a lot of would change but the the feedback loop was just so slow like we're talking like weeks before I could see what the changes were so I did what I could do you know considering all the other projects that I had going on so you all could go to the login screen if you wanted to it's access FUS dot franciscan ddu you won't be able to get past the login screen though so let me show you I actually can log in as a student or as a staff member Oh Logan as a staff member I think there's more to see there so basically the background image wasn't my decision that was already there when I started working on it I don't know that I would have put a background image there but there were so many other issues that I just left that alone there is one cool thing that you can see here in the image that's kind of weird I don't know how many people noticed this but it was a like a long exposure photo so some students were walking here and you can see a couple things one you can see a shadow on the wall but you can also see this faint outline of so a student's shoe in their leg so it looks like there's a ghost there so anyway cool little easter egg that I don't know how many people will notice but anyway you can see I added the proper card style shadows border-radius the right effect for the button changed the font to Roboto another thing that's really weird is this look at that that's an image I have no idea why they couldn't just put in text I'm pretty sure that's an image inside of an H tag that's another one of those things that I recommend it to them to change and it didn't get done so I just left it alone they are using the older logo on on this screen which is fine I think it works better in this situation once we log in we'll see the newer logo so we have the new logo here we have the the newer styles for the header I would have liked to have done more with a search but like I said there are a lot of other problems this black line was added after I already submitted all my Styles I would not have this this thick and this color I would make it much thinner and a grey color but maybe you know this will be the next round of changes I'm hoping now that it's completed we'll actually have more access to do some changes on our own but I'm not sure I also made these work cards kind of but they didn't have the right style so now they have the right styles the border radius the shadows a hover effect since they're all clickable I have a hugger cover effect normally I don't recommend a hover effect on a card unless the entire thing is clickable so anyway the university bulletin is on here currently and that's what we've been working on as the project for I think so I'd love to have it integrated into this I think they're using a saml for a single it's the single sign-on so still need to talk more with the IT department to get in there their last suggestion why don't you just make it so that you can only see the bulletin if you click on this link within here I don't think that's the best idea I mean it's I'm not even sure how it would implement that and it would actually be secure but even if I could then that would mean that nobody could actually go directly to the bulletin so any bookmarks of the bulletin wouldn't really work you'd have to come through here so rather not do that so we'll see hopefully you can get it integrated better so anyway this is it you click on it you're automatically logged in so not bad I'm actually I'm really excited that they got this working it's something that they've wanted for a really long time and yeah so I'm happy I'm proud of the IT people for you know getting this together and working so and I'm happy that you know they asked me to work on the Styles too so that was really cool I think well it shows that they know that I'm I'm good at this I guess or good enough that they wanted me to do it and that they care about the look of the sites which i think is awesome so always happy to collaborate with other departments whenever possible and so this was cool and that's cool the head of the IT department is really nice she's a really smart woman and I enjoy working with her so so this was kind of a cool project just a little one but it was nice alright let me go back to the live chat Oh on Anson's has going to the gym for a workout my wife somin is making me go what can I say well I guess you gotta gotta keep your wife happy right that's your marriage means more than then you're coding right keep it in perspective so see you tomorrow it's on okay Blake says thanks for the pool request but now everything is undefined okay so earlier today I submitted a pull request to one of Blake's projects yeah so let me so here's what I was you're getting undefined everything is undefined what are your here's what I would check Blake what are your headers look like on your Google sheets because that's what because if you if you're actually getting information to go to your Google sheet and saying undefined then that means a lot is that is going right so that's a good sign but we need to make sure that one the data getting sent is in the right format which it ought to be you just need serialized data and then we also need to make sure that the headers match up exactly with the names so let me okay let's check this out Blake do you mind if we check this out on on the live stream right now I don't want to check it out if there's any data in there that we I shouldn't show but it would be cool to show everybody a little bit more about how this works so just let me know I'll open it on and on okay cool all right so let's open this up here and let me get rid of this dot and this asterisk okay okay here's this is SSS okay so we have this awesome let's put in another row that that should be helpful another column I mean come on another clone won't you let me put another oh it's view only I'm gonna send a request for edit access if you don't want to give it to me that's fine I'll just tell you what to do here but I'd like to add another column for the time stamp because that can be helpful let me check out the repo as well oops on the wrong wrong repo okay let me see oops dang it okay good timestamp and let's make sure okay it looked like there was a space at the end of named so that potentially could be that could have been the problem with name so let's see so that may work now and let's see that's fine double-check this yeah okay let me show you I think I still have my stuff up okay so this is so this is exactly how I had it set up so I was able to get everything to come through at at one point so it looks like hmm interesting yeah I'm I'm pretty sure the issue with the name was that extra space at the end so that should work now because that was consistently undefined let me check out I mean if you want to test that again maybe it'll work yeah gasps is that a SteelSeries Siberia headset by the way those are really comfortable yes it is that's crazy that you were able to identify the headset from my tiny you know video in the corner they're so cool yeah I actually I really like these SteelSeries headsets I've been using them for and I think at least three years and they're great I get they are really comfortable occasionally my ears will hurt but only if I've been coding like all day and taught it like for like ten hours if I've had them on ten hours plus otherwise it's great audio quality I don't really know I'm not really an audiophile so they sound good to me it would be nice if they had a little bit more bass but it's not it's not a huge deal they're they sound good and it keeps the rest of the noise out from you know other things going on so it keeps me focused over the under fight says you won't be able to get past a login screen though is that a challenge actually yes if anybody can get into this access FUS somehow get to this screen and prove that you got to that screen then I don't know what you'll get you'll definitely get a shout out on the live stream at the very least but that would act that would really be awesome I would I wouldn't call out the IT department but I would like quietly just go to the head of IT and say you might want to check this out so that's how I prefer to handle things I have a lot of respect for the head of the IT department so I don't like to publicly call anyone out on stuff I'd rather give her the chance to you know handle it with her team quietly and I appreciate when when they give that same chance to me if something's wrong on my site so I'm a big believer and like going directly to a person privately when something should be changed instead of calling them out publicly calling someone out publicly in my mind should always be the absolute last resort because you can't ever take that back okay so I just saw one go in here does this mean that it works let me see all right cool thanks it's working yay all right and Blake if you I did change a lot of stuff for the Google the Google Apps Script stuff so if you want me to explain why I change the things I did let me know otherwise I mean if you can check it out and figure out what's going on then you know that's that's good too but I'd be happy to explain a little bit what I did I didn't really change that much at all with with the code that's on the site with the HTML or the JavaScript the the biggest changes were in that Google Apps Script and that's only because I I have used it I don't know maybe a half a dozen times on other sites successfully so I just pulled a lot of that code from my other site since I knew that it was already working okay Blake says and I'm assuming because of the Google script it sends the form to me but it won't send it to test a test comm yes so that area where I put test to test comm so let's check this out let's check out the script editor so if you've never seen this in Google this is really cool so on Google sheets you can have you can run JavaScript right in here this does not handle any es6 or beyond so just be aware of that that's why we're doing this ridiculous stuff here with concatenating all these strings and variables uh-huh instead of using template literals so I actually I I am part of a very large string on the the forums for Google Apps Script asking for es6 support but that's been going on for like two years so I don't know if they'll ever have it or when otherwise this is really cool so you can see when we're sending the emails okay it looks like you already changed that I'm really sorry if you didn't want that email shown on the live buddy I can't do anything about it now so sorry about that but anyway yeah so you can hard code the two email that you want to get so either your email or the email of whoever needs to be checking this at the company that you're building this for and then for this email that the user gets it pulls the email from its you know Eid up for a murdered email so it's just pulling that out from obviously an object and then so that's why there's two different templates because for the user right now we're keeping it simple and just saying you know hey we should receive your submission as a subject thank you of course you can add anything else you want but then for the person that's actually receiving they need the data right they need to know name email phone message so that's why we have two different templates and we're doing two different sends also I don't know how you have this set up if email is not a required field which I recommend it should be but so we don't get an error we have this send in an if statement so it'll only attempt to send it if there is an email otherwise you'll get an error so that's why we wrap this in an if statement but like I said I would recommend making the email first of all validating that it's a valid email and then also making it required so anyway I'm glad I can help with that so I mean i said i'm i'm really happy to help i've done it before so i've gone through quite a bit of oh no no more access how that's cool i've gone through quite a bit of troubleshooting with google sheets and sending form data Google sheets so no sense in you having to go through all that work better to share my information with you and save you a bunch of time okay let me go back through Michael says the background image has ghosts I think I saw Slenderman in there somewhere also yeah it is weird I didn't even notice it somebody in the IT department noticed it and told me and I thought we were gonna try to get a different image in there or Photoshop that out but I guess that didn't happen so I don't think it's a huge deal I think it's kind of a cool little easter egg but I don't know maybe we'll probably switch that image my boss looked at it today and said he wants to switch out the image so it'll probably happen at some point our suits is switching to Kali Linux now I will get through now if you if you don't know what Kali Linux is then you're not a hacker number one but also Kali Linux is Linux that comes preloaded with all these penetration testing tools in there so if if you're white hat therefore penetration testing to use it for good if your black hat then then they're hacking tools that can be used for for evil so if you're interested in that kind of thing check out Kali Linux if you intend on using it for evil though then you didn't hear it from me uh-huh see okay Blake says how do I redirect it to a thank you page okay so you want to thank you page to come up after the after the forum successful form submission yeah you could since you're using javascript to submit the form I actually recommend that you don't redirect to an entirely new page because that would cause a page refresh and that's unnecessary what I think might be better let's bring this up I think I have it on another screen okay so what I think might be better is when you submit the form you have equal either a modal pops up or something in the submit button maybe a little checkmark and it turns green something like that telling people that it was submitted I like that for two reasons one you don't get a page refresh which is nice but also it allows the user then to immediately fill out the form again in case they want to would they really want to I don't know but potentially maybe they they didn't put in the full message or they put in the wrong thing and didn't realize it till they sent it then they won't have to you know do any type of navigation at all they can just redo it so that's my recommendation and if you wanted to do that then what you want to do then is in your contact j/s here where it's this dot done do something that's where you'll want to do you know whatever so like you might want to do so maybe submit form something like this because that's the button right and maybe you could just do like CSS color background color and then do I don't know like green something like that would probably work so check that out if you're interested and want me to submit a pull request for that I can definitely do it I mean I I already have this in here otherwise this is where you'd want to do it and just make sure that the submit button is still active if they want to resubmit that would be that would be my suggestion I usually do modal's that pop up and say hey you know this worked but you don't you don't have to get that complicated with it just something really simple down here a check mark icon anything I think would work okay Blake says thank you you welcome Blake no problem oh cool Arshad says I started learning ethical hacking last month it's good cool yeah I've always wanted to get into stuff like that mainly to do penetration testing on my own sites and make sure that they're secure but I just really have in that time to get into it maybe one day Blake asks do an alert I wouldn't do an alert like not a JavaScript alert so I actually never recommend never doing JavaScript alert on JavaScript alerts on production sites it's so much nicer if you can actually make a modal that will appear because then you have much more control over the Styles cool okay so Blake Blake's gonna do it himself all right that's cool Blake just let me know if you have any trouble with it I think you'll be fine though Harshit says I will try a DDoS and sequel injection okay now officially I did ask you all to try to do this so if if you get in trouble for attempting to hack a university website make sure you tell the authorities that I'm a developer at this university and I asked you to do this test thing I don't want anybody getting in trouble for her for doing that so I'll probably get in trouble at that point but I don't want you all getting in trouble so see I'm doing these oh cool Blake said I'm doing the u.s. I'm trying to read how I would read this CyberPatriot competition this year that's cool I haven't heard of that competition what was it for okay ok so it's a competition for securing networks and computers awesome that sounds really cool you have to let me know when the competition is and how it goes so I'm I'm interested to hear how you do inflate gas how do how do I reset it so how would you reset the form then put it up there we go I think by default it depends on what you want to do if you go with if you go with the modal then you could just have us if you click outside of it it goes away or you can put a closed you know like a little X icon there if you go with something down here you could maybe do it so that when any of these inputs get focused it just resets this that's that's probably how I would do it because if they focus on an input then that means they probably want to want to change what they've done there okay cool rug says I finally made the livestream when it was going score awesome glad you could make the livestream ok Orson says I will not try I don't want to get in trouble yeah I didn't even think about it until just a minute ago like that's probably not a good idea to have everybody try to to hack that site just because I don't I don't know what the laws are in other countries but I've heard that in the United States at least like the laws are pretty strict about attempting to hack even if you don't intend to do any harm like but you could still get you can you still go to jail for that so I mean like I said technically I'm giving you permission but it may not even be it's I probably don't have the authority really to give you permission to do that but if you happen to see anything that would seem like something's off with the security you know let me know and I'll try to check it out yeah I mean I would imagine some of the yeah there's definitely some stuff we wouldn't want people to have access to so anyway I have gotten to the bottom of the live chat so I think I'm going to end the stream now to Thomas yeah pretty decent length of the stream we're coming up on almost two hours here so oh alright I get exhausted after these streams they like I love doing them but it definitely takes a lot of energy okay so thanks everybody for helping and for watching the stream and anyway I'm really glad that I could help you out with your project lake so if anybody everyone's help with your project let me know the best thing would be to send me the github repo because then I can actually see all the code but I'm more than happy to help I don't always have time to do things right away but I'll try to get to it when I can so I should be back tomorrow what's sorry Thursday Wow tomorrow's Friday the week just went by so fast yeah so I'll be back tomorrow probably around the same time 2 p.m. Eastern time and I think we'll be working on on finishing up this the styles for this I think it will take less time than we anticipated or at least that I anticipated so maybe we'll be able to finish this up tomorrow and then then move on to something else so thanks again for watching and until tomorrow have a great day