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

Key Takeaways

hey everybody welcome to live-streaming with live coding with Jessie and today we're just going to continue on with what we were doing yesterday I haven't yeah I don't think I've done anything since yesterday it's been working on other things so there's nothing to catch you up on only if you haven't seen any of these the last two streams we're working on an application page so it's basically just a big forum a really big forum well it's a big forum and this is running in Salesforce which is a platform that a lot of businesses use in particular the type of page in Salesforce is called a visualforce page and they have this templating system I think they call it Apex it has these apex tags and we'll see that in a minute when we get to the code but today we're not really going to be messing too much with that we're gonna deal almost exclusively with CSS maybe maybe completely CSS so this should be nice for those of you that maybe aren't really confident in you know your JavaScript skills or using you know frameworks JavaScript frameworks you might be a little bit more confident with your CSS skills so should be able to follow along a little bit better and I'll try to explain everything as I go along and explain the reason why I'm changing the styles and and how I'm doing it all right okay so I'm just getting my my other screens ready they gave everything ready so let's get started I'm gonna start this timer I have all of our tasks here that we're gonna work on so we're just gonna work our way down this to-do list and see how many we can get get finished and really this to-do list includes pretty much everything that we need to do to complete this project so this might be the last day that we're working on it we'll see you ever know for sure occasionally you run into some things that she didn't realize we're there or we didn't realize would be a problem I already see something I forgot forget to we're gonna make that logo larger all right let's start with that actually because that's right here at the top in the corner here so I usually like to kind of start with the header anyway and then work my way down so we'll probably start with this get this completed and then we'll work over to this side side nav here will complete the styles on that and then we'll finish up a few things that need done within the form itself okay so let's take a look then whoops in progress and let's take a look at what's going on here and why it's so small okay so we have a container div try to see what with where is it giving these let's just go down one and see okay it looks like it's getting these from here yep okay interesting so there's some media queries being used here that's defining the width of that icon and the height so let's move this around a bit and see what changes with these media queries okay they don't have any smaller yeah they do it just changed it yeah okay 768 pixels we change once we get down here the logo just there's a good set to display none I'm gonna think about changing that you probably should change that but for now let's let's stick to the task here let's change this first and so what we'll do is grab this we may as well keep this media query because maybe we will want a smaller logo on a smaller screen we'll see we it may be the case that we can just keep the same size on both screens but it'll save us a little bit of typing later on if we just bring that media query right over okay so let's see I'm gonna keep this with the nav but within that bar style so when I get down here I'm gonna make another section within here just just in in my comments and call this the interior nav let's so sentir your top nav because we do have a side nav and we don't once when you copy media queries from dev tools it doesn't get everything that you need so if you copy it over and it's not working it's probably because you don't have that other set of brackets so if you notice when I when I brought it in it just had the media query and it did not have these little curly brackets so I had to add them so if you've been working with dev tools I'm sure you've already encountered that but it might save you a little bit of frustration at some point why am i okay shoot I was editing directly the wrong file so let me copy this over I wondered what my indentation was like that and that's why it's wrong file so luckily we didn't change that much pretty easy to copy that over and so now that we I know we have that in there let's kind of mess with this now and then we can put in the new values when we get what we want here so I'm just going to change the width and let's do height:auto that's interesting very interesting okay 100% Wow okay we're gonna have to let's go with this then we'll select the heights interesting I am going to have to set I thought it was odd that they were setting both the width and the height like that evidently the way they have this set up you have to do it so let's let's try it okay actually that looks fine I just kind of guessed and figure you have to adjust this but I think that looks fine alright let's keep those those numbers then so we got 150 and 113 I forgot to mention the beginning I merged another pull request on our other project on our bulletin project that we were using react and graph QL doing some password lists log in through through email links so Harshad had another pull request and he implemented a print view I have a lot of people who are used to printing the bulletin from back in the days when it was just a Word document and they still want to print it so shortly after I launched the current version of the bulletin I decided to implement a printer-friendly view and so that's why we had this I really do want to keep it because I had several people ask very politely for it so thank you harsh it for implementing that view it looks great I issued about that just to add in a few things and fix some positioning things so I think we already have someone who's Whelan's here to to do that so thank you for that I can't remember the name off the top of my head but you know who you are if you're watching so I appreciate that okay that's not bad while we're here let's just check out well let's just go really big okay that works that works just kind of making sure we don't have a third media query and it looks like we don't so when we get down to here though I think I'd like to display the logo and that may require us to make this header a bit bigger I'm okay with that though I think it's important that we we still have some continuity with our branding even on the interior pages and I know that my bosses would agree about that so that's what we'll do I let's see if we need to set yeah all right well let's set our within our height like we did last time let's go with let's try 100 okay I guess we won't need to with this this time just the height so first thing I'm gonna try to make this small that's interesting alright we're gonna have to change the background sighs I could have typed that out faster then it took me a tab down there so we need to change the background size here whoops background sighs let's see interesting we are there we go it would just wasn't working because I was putting it on the wrong thing okay there we go this is what background has contained there we go okay so this is what we have here let's see that that small but that will be on a mobile device so I think it's you know potentially it's reasonable to have a smaller logo a user will have the device closer to their face than they would a computer screen or something like that I think that works I think we're gonna go with that and if we get some feedback that it needs to be bigger we can always do that but we'll go with this and then we won't even have to mess with the height okay that works so let's go let's just double check and make sure that we can put this height here and it still works and it does we're gonna grab these two let's just grab the whole thing here okay and we're still within our our top and a half here and let's put this here the media query below it you know what I'm gonna keep this here even though we'll be we already have it elsewhere because I just like to keep all of my custom styles in the same spot and then I can remove this from the area where I had this previously okay great so let's do a little test and copy these over and then we'll copy it over into Salesforce make sure that all our styles are being applied correctly okay oh okay and that is not being applied correctly that's all that's all right let's let's do a hard refresh here okay maybe I messed something up when I copy and paste of this okay that's that's there it's definitely there alright let's try it again then copy and paste and quicksave okay try it again alright let's inspect it should be this style tag yep alright let's go down to this place yeah actually so we do we have this we have these styles here why aren't they being applied target X header University icon um let's try this I'm not 100% sure this is the problem but it's worth a shot nope thought it might have been throwing an error okay well let's see let's see if the other one is being applied nope it's not interesting all right let me check the live chat in case you all saw something that that I didn't see oh no I forgot to start my timer I even moved it over here in the corner so you all can see it and I forgot we're gonna have to keep an eye on the clock but 218 right now let me set this 10-minute timer and that'll be right about the time when I started coding so thanks for for asking about that Harshit let me check hey everybody I see several of you were saying hello haha alright it says I now have 41 commits in the bulletin you have 21 I know I know you've done quite a bit of work I am I told everyone and we had a department meeting yesterday and I told everyone that I you were doing a significant amount of the work for this bulletin and they were all impressed so so I'm not taking credit for your work making sure that that everyone here knows not just the work that Harsha does but the work that all of you do so I do not mind sharing credit at all okay Sebastian says I see some angular stuff there yeah there's some angular going on here so yeah this this is built with with angular oops it's not showing up properly when it's small yeah so let's see yeah so we've got angular here and jQuery the moment for the dates and then here's that Apex pages that's a Salesforce thing yeah speaking of angular we had a new video out this past week setting up an angular project so if you're interested in angular check that out I never really do any angular stuff so for any angular people that might be watching you can check that video out it it's one of just check the the last like several videos it'll be in there the title is really obvious but that's really cool cuz we didn't we didn't really have a lot of angular stuff going on until now shoot all right let's troubleshoot this hmm okay so I'm gonna check let me look in this style tag again to see if we've made any mistakes actually let me see this I believe is being applied correctly where's our a tag okay here so our a tag is being applied correctly I'm basically trying to see how far down the page is there an error [Music] hmm all right let's all right so that's way at the top yeah that's way way to talk I'm thinking did we miss I'm thinking we messed up our syntax somewhere but just it doesn't look like it these are all things we did yesterday that worked the only things that we've added but this year so I'm not 100% sure this is entirely necessary but I I see that almost always so MIT it's worth a shot I don't see how that could have messed up the previous code though the previous Stiles okay you know what let's let's inspect that element we're gonna have to expand this so I can get that okay so that's alright yeah in Hughes okay so that's already showing up in the page and it's at the bottom okay we've got some things overriding our styles so let's take that out completely or we can comment it up these are all commented out so that's fun okay so let's dig in to Salesforce a bit and find where this is is being put in and let's take it out let's see okay so let me think all right let's go into our our visualforce pages sorry this is so small I'll try to make it bigger the medium crease the font size okay we need action is that we may be able to get this quickly if I go back to the main page sometimes it'll show me what I've there we go default I think this is it yep yeah this is it - anyway it shows my recent item so luckily I had checked this page out recently enough that it was still here save me a lot of time looking for it okay wow that's so useful for custom CSS as sarcasm really I mean how can you put custom CSS and the box of the small I know you can resize it but the default should be like at least that big okay let's just comment this out the reason I'm commenting it out and not taking it out completely is that this this was put in here by the company that's doing this so target X is the company that made this application portion that works with Salesforce but then another company called Jenzabar is reselling that to my University so we don't work directly with target X we work with Jenzabar so the ghent the person at Jenzabar that's in charge of helping us left all this code here as a little helper so that I didn't have to look for where to do these things so that's why I'm leading it here in case I ever get stuck and don't know where to change something I can come back here and it's all you know has some helpful comments so that's why I'm keeping it like that otherwise I would just get rid of it okay all right now let's refresh and see what happens haha not expected at all okay I didn't think that would happen because I thought we yeah we are bringing in that background image here alright let's see maybe this is being inserted somewhere else further down the page as well interesting okay this is a good sign though no it's not that's the old stuff we're still not getting any of our newer stuff okay finally here we did get some of the new stuff here okay so you see it is being that's really odd okay we just need to get a little bit more specific with our style so I'm not gonna even look at these anymore let's just let's just do this I mean I don't really like doing this often but this isn't a usual situation where we have access to all the files and my timer just went off so I'm going to test this and no matter what happens we're just gonna answer some questions oh okay we have something all right great this is very slow to update I mean on how many people are gonna be moving this back and forth like that but okay I'm not exactly sure why this isn't working here oh you know we forgot to take out display:none as soon as we get back from the question/answer we got to remember display:none needs to be changed to display whatever we want we'll see which display works the best there okay short break and I'm gonna go through the live chat answer any questions that you've had so far then we'll do another 25-minute session we'll finish up with that header should be just one more thing needed for the change and let's mark down that we did spend so far one Pomodoro cycle on that okay let's see hard asks okay some gist jitan says can you read this yes I can read this so let me know if you have any other questions of more than happy to answer them and welcome I haven't seen you in the chat before so thanks for joining us so hard should I ask if there's any big work left in the bulletin project like authentication I might do that this weekend you know what hard should I I'll think I'll think about some stuff and maybe put some issues in and if I think about what I'm streaming I'll I'll say something maybe in the question and answer session at the end we can take a look at the site quickly and maybe go over some things and that way you or anybody else that wants to work on it over the weekend can do that I as I said before about that project I really want to tie it into the login system that we have at the University it's saml-based I just I need to get some information from the IT department I can't implement that I can't do anything from my end unless I get the right info so I'm still working on that info I do have a meeting and the head of the IT department and the second-in-command that the IT department will be there but it's not until November 7th it's about something else but I could definitely ask them if I haven't got the info by then I hope I get the info sooner than that but I don't have very much hope that you know it's it's 2:30 p.m. here on a Friday so I don't think I did very much done now if I especially after the stream everybody would probably be gone so probably next week I'll reach out to them again and maybe meet with some of them and talk about it so there is more authentication work that that needs to be done I hope but I don't really have enough info right now for us to get it to work or test it out or anything like that Harshit also asked what's the plan for deployment of the bulletin okay I don't have a date yet for deployment so yeah so in terms of a date there's no hard you know date for that when we do deploy we're going to deploy it just like we've done in some of the previous projects we're gonna have we're going to set up a droplet on digital ocean with Ubuntu we're obviously running node we're gonna run nginx as a reverse proxy we'll set up an ssl with that and probably it will end up being a bulletin Franciscan University and then we'll just set up a redirect for the current URL because the current URL is Franciscan University / bulletin but with the way we have things set up ladies I can't do that if we want to put this on digitalocean so we'll just set up a redirect for the current URL to redirect to the other one and yes I mean it's not really anything we haven't worked on before we don't need it to handle a really heavy load you know the university has around 500 employees and so there's not really going to be that many people on this site at any one time so we should be able to just to run a five dollar droplet now I should said try important to override I know I try to avoid using important whenever I can though so it would it may be have saved some time and we may end up having to resort to that anyway but since in that case I could get rid of some code and I was going to get rid of that code anyway at some point I figured we may as well do that it makes everything look a lot cleaner in the end rooks said what is that a CSS CSS box for ants it needs to be at least three times bigger I know right it was crazy like maybe they just don't expect people to even use that and so they just made it small let's say I only have a few more comments left so I know my timers up but I'll just get through the rest of them inna says how was your day Jesse actually today wasn't bad actually if you all don't mind I mean let me tell you a story for two minutes here because I did have a little excitement today so I come into work and I'm working for a little while and then I get a call from my wife who says she was upstairs with with the two littlest ones with the baby and with my three-year-old and all of a sudden she heard the door alarm go off so I have a alarm on the house and even if the alarms not said it still makes a noise like a doorbell annoys when somebody opens the door and then a voice says which door was open so it said the basement door came open so she looked out the window to see if I was home didn't see my car got scared and took the kids and ran it across the street to the neighbor's house who I guess my wife has the code for their garage door opener because she takes care of their dog whenever they're away so she goes over the neighbors house and calls me I'm at work I'm saying well I don't know what to do I'll just come check it out so I drove home went through the whole house to make sure nobody was there nobody was there I think what happened is my wife just was holding the baby when she came in and did not close the door and you know just kind of it closed but it didn't latch all the way so the wind probably blew and blew it open but anyway uh-huh I had to go home and and protect my my family so but I did get to see the baby and my three-year-old and my wife so that was kind of cool I got to see them so anyway so that's how my day was so far and yeah not bad I've been a I wrote a gist that fixed what I think was an error in materialized CSS I wrote this a long time ago and I just just now the the maintainer czar their post we don't think that it's a problem they think that it's not a bug and it should be like that so anyway we disagree on that point but I still put my gist in the issue so that other people could use it if they were having the same problem so anyway I've been going back and forth with someone on there trying to help them to use that so that's kind of cool because I like I mean I took the time to put that on there so I'm really happy that somebody's actually using that although I do kind of wish they put it they merge it but I mean hey it's their repo they can run it however they want anyway thanks for being patient through my story let's get back to the code actually meet so harsh it says may I submit a pull request having sam'l boilerplate yeah definitely yeah I mean that'll that'll set us up that it'll be easier later on when we do get the info we need so yeah for sure I appreciate that Harshit says consider vulture comvee ult are calm it's cheaper than digitalocean okay has anybody use that website before V ult are calm let me know if you have and how you like it I just got to make sure that it's it's good quality since it's for the University I I got to be able to justify to the IT department while we're using this and is it safe and who else uses it and they're very security conscious so anyway as long as it's all cool and it checks out I'm definitely open to it but I mean for the university of five dollar droplet on digital ocean is not really a huge expense although I'm personally I'm more than happy to try it out for my side projects and things alright let's go back to this first things first where's that display:none get out of here alright okay cool so display:none was our problem let's get rid of that and say whoops what do we want to say let's see what it it's automatically going to hear display:block all right great we will set it to display block where we add oh right here very what my cursor is on what I'm thinking display:block all right I'm not even going to check that I'm almost positive that it's gonna work actually now I'm not I'm gonna check it now I don't remember before the the break exactly how much we we worked out in terms of the overrides it's okay looks like it worked wonderful alright let's move let's move this over to the done right we've already tested it now it's done I'm not gonna I'm not gonna change this amount of time we took since we only went over by a minute or so all right so next one fix button colors on the application of let's go for that all right and then let's put all these side nav ones on deck here and ready for dev saina saina saina okay so the button colors obviously are not what we want let's think about what color we want do we want to go with the yellow I think it's either going to be that yellow color or with a green color hmm I think I'll go with the yellow for now since we're already using it for the other buttons just for consistency and then we can always change it later if we if we feel like we need to forget X button header okay let's grab that class and as you can see I've been editing in this file so I think I think I'm just gonna edit in this file to take out one step from our flow here and then I don't know at the end of every day I can just copy it over here if we really want to keep a separate CSS file but I think it might be better to just keep all this in style tag in the head like we're doing since that's the way we're building it and testing it then it's most likely to be reliable like this I'm afraid if we move it into an external CSS file and then bring it in it it'll get overridden by a lot of other styles and we'll have a mess okay where mine is my button styles that's not it I think they're down here there we go button styles let's add this in oops and we're gonna add it in here as well all right so that should do it let me make this a bit smaller whoa interesting all right so that didn't work probably let's see I'm guessing that the styles interesting all right are they have going on here all right let's I think we're gonna have to use important here so it looks like the hover is working so that is turning a different color but we're gonna have to use important for the non hover State so so important on our color and on our background color if you're not familiar with important important overrides everything in CSS so even in line styles so if you really need something to apply use that but use it sparingly because you'll never be able to change this it totally breaks the cascading nature of cascading style sheets so normally you want the cascading yeah so that's why I try not to use it because it makes things difficult later on to change but sometimes you have to do it and in this case I don't think we have another option unless we want to take a lot of time to try to find out where all this markup is coming from and change that and I don't think it's that important to take that much time okay interesting so we still have some things that aren't being applied we still have that weird effect which I definitely want to get rid of we have this is that supposed to be a shadow or a border that's weird let's see where that's coming from oh my goodness it's a blue box shadow wow I've never seen anything like that that's a weird shadow too I mean aside from the color it's just really odd anyway okay so we're gonna have to get rid of that box shadow why is it not Oh where is this being pulled in from grid framework I got to see where on the page this is coming in it no just no finding this for some reason the search is not working come on actually you know what I think it's searching there we go interesting it must be being pulled in some other way alright let's find all our style tags six-six style tags you gotta be kidding me alright there's nothing in that one this one's above ours we need to look for ones that are below our style tags so I'm sorry that's a script tag now that's weird so we have our head tag here and then we have our body but then within our body we have a bunch of meta stuff and more tags ah that's a mess okay so we've got our first one our second one third one is ours the fourth one okay so I don't think we're dealing with any of these yet but it's good to know it's there now we should have one more and we already commented all this out that's really odd let me check the live chat here and see if you all saw anything that I didn't yeah hard you're right it is a source map that's why I started to look in here manually because I thought well here's what I thought of one that it is a source map because it had the dot less at the end right but I thought even if it's being pulled in anywhere on this page as as a link it shouldn't be overriding what we're doing so maybe somehow they're pulling it in and putting it inside a style tag but we can see that's not the case we just went through every style tag so yeah let's do that let me see I'm not I never use source Maps so I need to figure out where I can turn this off at I said I want this there we go okay all right source maps are off now hopefully we'll be able to see where this is really coming from whenever I work on projects like this that are old projects that I need to do things with it feels like I'm a detective it's like a puzzle like I'm trying to figure out where the things are it's kind of fun when it works out not so fun when you spend hours trying to figure out something but so far we haven't really spent that much time trying to figure anything out where was that button header there's our button right all right let's scroll down no all right let's refresh because it's still showing me the less file what's it's still showing less files no no still gotta be kidding me all right let me look all right hard good good IRS it yeah okay I'm so glad you saw that I turned off JavaScript source Maps not CSS source maps so thank you for catching that hard I would have been searching for a long time in vain okay cool now let's let's give it a refresh whoa let's go back here and let's see where this is coming from okay these are our styles where is this coming from I guess these aren't ourselves these are ours okay I was mistaken these are ours these are the ones that are overriding ours and they are in a style tag we just missed them though they're not what this is so weird this should not be overriding our Styles our styles are down here right I thought they were I guess not all right let's go back here oops not well it'll be easier to see here okay better nav nav or I I really hate to do this because obviously you don't want to put style tags in the middle here but I think this is the only way that we're gonna be sure that we're overriding a lot of stuff so here's what I'm gonna do I'm gonna move our style tag down here if I put our style tag right here above the nav we might have a shot at having it be above I'd rather not have to put it inside the nav but if I do I will just it's just gonna look terrible inside than that but anyway I think we'll do it now the reason I I'm gonna do this even though I wouldn't normally put a style tag in here is because the way that the document is being put together the style tags are already all messed up you have multiple places throughout where there are style tags so I don't have control over that I can't change that so I shouldn't be too worried about it okay let's change this and hopefully this will solve our problem there we go we can leave our link tag up here that's fine now let's bring this in save it copy it and alright now let's see what's going on it's how is it worse no what is going on okay but none of my styles here now I am us a copy and paste wrong right that's insane no that's okay there's our font dashboard so I get it you I already check that the style and these are not it right here's the one that we wanted to get below here's our header we should be inside that hmm all right for some reason it doesn't like it that we put that style in here let's move it somewhere else all right I'm gonna try it in here if this doesn't work I may just have to throw some more importance in there wow did I copy this over or not now I can't even remember and let's make sure we do a hard refresh style oops gonna check the style tags yeah we're missing one see before we had six and now we have five so that style tag that we're trying to move around will not work if we put it down lower in here so potentially we could put CSS down at the bottom here we have this portion here that's being added it would work I know where I need to put this but I'm hesitant it already is taking so long for the styles to actually get applied I'd rather not add to that time at all by moving on the further down the page hmm all right let's let's move it back to where we know it works first of all all right so you got ourselves back that'll be a good place to start from let's do another question and answer sessions I'm gonna set my my five minute timer right now but I'm still I'm trying to fit decide whether or not I want to do another Pomodoro session of keep looking the wrong spot of CSS so I'm not not hundred percent sure this one's taking way longer than anticipated and I know I estimated one but I thought it would be before one okay let me scroll up a bit and it's actually not a lot in the live chat so oops maybe we will do some more some more coding nan says that styling tags are a mess yes is they Harshit a switch mouse and keyboard I use I use the what do they call it the magic trackpad or something like that so the Apple trackpad thing that you can get with with Macs so that's what I use the gestures are nice so it was really weird to get used to coding with this at first but I've been using it for about a year and a half mount and it's just really fast to like swipe between screens you know and do things like that so I've gotten used to it does anybody else use a trackpad when they're coding or is it you know mainly use use a mouse and my keyboard is just it's nothing special the keyboard is just the basic Apple keyboard so I mean it it has the number pad on it that's the really special thing so I've been one to try out one of these mechanical keyboards that I see everybody talks about how awesome they are so I want to try it out they're kind of expensive and a lot of them look really cool so maybe uh maybe I'll try it out I'll try one out one day Harshit said i mostly use keyboard for us all stuff yeah I've heard that that that ends up being a lot faster horses I rarely touched them off yeah that would be a lot faster I've heard especially people that use them they like never need to touch the mouse they can do everything from the keyboard so that's cool I can see the benefits of that for now this this works for me I'd have to make like a deliberate effort to try to switch up how I do with the so if I think it'll really help speed up my my dev process here then I'm willing to try something else but for now this works for me like I said I probably I'd like to try out a new keyboard but we'll see I'll just maybe have to wait and see if one's on sale and it's it's good quality I really like I've seen some keyboards that look like they're from a typewriter so they look really old-school I think that looks cool I would I would want to try that or try to make that or something rook says hi is that how the screen sometimes slide halfway across yeah that's I do the little slide thing so it is cool and that's one thing like when I had a mouse I used to do this with the keyboard I think you can do like control and then the number keys but one thing you can't do with that is you can't slide halfway across and check what's going on here so like there's you don't have as much control with the keyboard for things like this sometimes you like I don't need like I don't need to go completely up here I just need to peek really quick and see what's behind something so it's not it's not a huge difference but it makes a little bit of difference Sahil says Trello does help yeah definitely Sal says I mean for one person on a single project Oh does Trello help sorry I misread that first one it's a question the question is does Trello help for one person on a single project yeah definitely Trello is very helpful so this is how I set up all my Trello boards for for projects that I'm doing this is the the Kanban style I do add this column here you don't technically need all these columns for for Kanban but this is I like to set it up and how I learned to do it it's very helpful for me to keep track of everything I can easily at a glance see how much more I have left in my project how much I've done it's a very nice visual reminder once this done section gets really long it's it's cool because you just get the feeling like I've done all this work it's a sense of accomplishment even though you haven't finished the project yet you can still see all the work that you put into it so I recommend this even if you're the only person on the project it'll keep you on track and it gives you a nice record you know in addition to your commit history and things like that but this gives you a nice record and it helps me you know I can i can put to-do lists in here I can put attachments if I wanted to I could I could allow somebody else to see this even if they're not working on the project maybe like let's say somebody who's handling the photography or the content for the site maybe able to put their stuff in here so even if they're not a developer still be useful so anyway I really like this and I imagine if you had more than one person this would be even more useful so that anybody could automatically see what's going on with the project and if somebody's working on something or not so I like it it helps me but you have to you just have to be consistent and use it occasionally I'll have a project where I just quit using the board and then obviously there's you know there's no benefit to it let's see Harshit says you can annoy people with them meaning the mechanical keyboard especially the Cherry MX red switches okay that's what that's what I wondered so if any of you have experience with a mechanical keyboard let me know so I guess I have two questions one is the noise really that bad now I work in an office by myself I have walls the ceiling a door so it's probably not the noise issue won't be a problem when I work at home I usually work in the basement so probably not a problem either but I mean is it so loud that I would hear it over my headphones and it would annoy I would annoy me myself right that's my first question number two if I was to get one what are the best kinds of switches because I hear like all these different colors for switches which ones are the best okay so I'll let everybody answer that and I'll move on here Brian asks how are you peaking you mean this so hold on a sec I'll show you okay all right this will be easier to see so I move three fingers across like like this you can't see it on my other screen because someone I'm a couple screens over so I just move three fingers and then I can peek so you need a trackpad I think you can do it on the Magic Mouse as well because you can do touch gestures on the mouse hello okay the expose gesture that's three fingers straight up so this one just move them straight up okay Robert says read drag red dragon mechanical keyboard is what I use it's only $39 I replaced my Corsair with the red dragon okay that's that's a pretty reasonable price compared to what I've seen for for other mechanical keyboards so so Robert so would you would you recommend it is it does it give you a better experience when you're typing is it a noticeable difference or you know is it worth it all right rook says the Cherry MX blue or the clicky tactile ones okay oh man Sahil says that once made a Trello board for my friends for university project but no one even bothered I know how that is I tried to get other people that work here to use Trello for things before nd use like Google sheets and edit things you know on the Google sheet instead of emailing something back and forth or worse printing it out and just sending it to people we've actually had people burn files on CDs to share them and this is within the last two years so the situation is I totally understand the situation of trying to get people to use some technology that will make things go faster and be more productive and then nobody wants to to use it like I'm gonna make my my face smaller because it just feel weird I'll leave it a little bit bigger since I'm talking and not coding but I was looking at my the the video feed and just not used to me being the focus okay so Robert says there they are noisy so that use a logitech wave at work Harshit says some coders do not use mechanical keyboards on their YouTube bits and livestream oh that you know what that's a good idea actually I didn't even think about that but so it would probably be good then to have a either a backup keyboard at work or just not use it at work and you should use the if I'm going to use mechanical keyboard maybe just use it at home Carson says the Cherry MX brown are the best okay cool so what what makes the brown the best sorry for all the questions about that I'm sure I could look this up on my own but I think it's cool to get advice from from you all especially if you have experience with them all right rook says for mechanical switches go to stores that have them and fake type away really the best luck that's a great idea this is just this kind of goes to show like how much Amazon has changed the way I think it never occurred to me that I could go to an actual store and type on a keyboard before I bought it in my mind I'm just thinking like I'm just gonna buy this off of Amazon like I the only store I ever actually go to in person is the grocery store that's that's it I buy everything else from Amazon okay Harshit says that corsair mechanical keyboard costs $170 whew that's more than I'd like to spend on a keyboard especially if I already have one that that is sufficient I would definitely have to have significant proof that that keyboard would be much better for me oh okay so I guess Harshit saying that now Windows has the same gestures that's awesome before I am I downloaded some some program that let me use gestures on Windows and it wasn't as good as the Mac but that's really cool that they have them natively okay so hard should ask which one do I find better github or Trello for a github projects or Trello I'm gonna tell you right now if I had to pick right now I'd pick Trello but I'll only use github projects just for the last what like week or two so I don't think I've really given it a fair shot so maybe in a couple of weeks I'd have a better opinion if I really force myself to use get up projects I think if I found a way on github projects to actually track my my Pomodoro cycles then I would probably like it a lot more so I either need to find something that does it in a very similar way or better way that I could do it on Trello or make something so this is just a chrome plug-in that does this right now so potentially I could just make a plug-in that would do the same thing but for github pages so if I really start I'm sorry not github pages github projects if I really start to like get up projects maybe I'll make try to make something like that I don't know otherwise I'm going to go I'm going to probably use both and I it's really nice though that it's integrated everything with github is integrated so it's right there on the repo it's convenient for people who come to the github repo and want to contribute to the project and not have to go somewhere else so I like that we'll see I really want github projects to work and be the thing that I can use so I'm gonna give it I'm gonna give it some time and and try it out a little bit more okay harsh it says for the keyboards switches the mechanism feels different for each okay the MX browns are still tactile but quieter than the blues okay now our suit says it's personal preference all right Robert says I think it's worth it because I like the tactical feedback I did not want to pay a hundred dollars to replace Mike or Sarah so I went with the red dragon and it works just as good as the Corsair okay cool so what oh yeah that was going to be my next question and you've already answered it so awesome Robert says the red dragon has fake red switches so I'm assuming they're they're not the the Cherry MX brown switches then they're there there's some type of off-brand okay all right cool you know what actually maybe that might be a good way to start out just to get a cheaper one even though it's not like the best switches that everybody says you need and then at least I can get an idea of whether I even like that and then maybe maybe if I really like it then I can justify paying more money for the for the chariot brand switches it could be a work expense I might be able to deduct that from my taxes that is another cool thing when you freelance be sure depending on your tax laws where you're from you can save money on your taxes by making sure that you deduct all work expenses which can include if you work out of your house part of your internet bill potentially even part of your rent if you have a dedicated working space you know bills for your computer for all your your servers you know if you're getting like digitalocean AWS something like that so another I didn't talk about that when we talk about freelancing before but you're gonna have to deal with taxes if you freelance unless you pay somebody else to do it okay so brooke says the patent expired on the cherry MX switches so now a lot of other manufacturers are making them okay that's kind of cool so potentially they could be close to the same quality that's interesting I think it's worth a shot then I don't know if I'll get it anytime soon I got Christmas coming up so I got a save up some money and buy presents for all the kids and everybody so maybe after that I'll be looking to get get a keyboard all right well I'm to the bottom of the live chat we've been streaming for about an hour and a half now so I think I think I'm not gonna do any more coding it's probably obvious at this point you know on this stream right now I'll probably be able to do a little bit more work on this before I leave today and I'm gonna do some digging around in Salesforce because that's kind of boring for you all to watch I'm gonna do some digging around and see how much I can actually edit of this and maybe we can we can get this looking a little bit nicer and sort it out so because it's it's kind of a mess and the mark-up is just it's weird so oh okay sorry how should I almost forgot so harsh it's reminding me that to bring up the bulletin and plan that out all right totally forgot really glad you reminded me all right so I have the bulletin up right here all right let's see so all right so aside from the what we already discussed at the beginning of the stream about the sam'l authentication stuff here's what we still need I see they make a search this way the search is probably the biggest most complicated thing that we need right now so the search I'd like to have it be a live search so when you type I mean we definitely want to debounce it so it doesn't or throttle it so that it doesn't come up with it doesn't send like a million requests but we're gonna have to hit that graph QL endpoint to get what we need so yeah so that's what we're gonna do we'll need some type of live search feature as a model this live search is gonna function almost exactly like the way we did it on project one so I guess yeah it's gonna function like that Harshit says there is already data in there yeah well here's the thing of this there's a lot of posts so if we can bring in all of the posts that are in WordPress then that's fine if we just filter what we have but do we really want to pull all those posts every time somebody comes to the site because normally people are just going to see a small fraction of the total available posts so I guess it's going to be a trade-off is do we want to keep it really light and only pull in some of the posts that people are likely to want to see and then just make another call when they go to search or do we want to pull in everything all the time so I don't know I don't know what would be better but either way we need to be able to get have you user type something in and then automatically have these cards pop up so it would be like basically once they type in three characters or more if they stopped for I don't know 400 milliseconds after typing then it runs a search something like that so anyway that's their what I'd like to have happen is if you click search it just extends it either can do one of two things you can just extend out a search box here obviously it needs to be like the material design style or it can change out this entire thing and make it one big search with an X over here and a search button over here when you click the button and that's another thing it needs to happen on first button click it needs to open up the search and then the search thing needs to remain here or slide over and then you need to be able to click on that to initiate a search once you've typed in what you want obviously a live search is it's going to be an option there and it's going to automatically come up but the live search is only going to happen if you search for something that's three or more characters on the off chance that somebody's I've sent two characters and wants to search for that they need to hit the search button which why would you ever search for some those two characters but you never know maybe it's two really weird characters okay so that's the search like I said if you check out that project one the catechetical Institute page it's Caddick etics com I guess we should bring it up right now so we did this on the resources page we have the search if you see I can type that in and right nothing comes up so anyway so that's where you'd look for for that let's see I don't think we're actually going to do classic mode the help page we're not going to do that yet because I think oh that the current help page is based on the current site so it has some tutorial videos and things on there I'm going to redo all that because we're not going to have the same issues that we have with the old site so we'll hold off on that until we're close to being finished the filter by date so as long as a user needs to be able to pick either a month in a year and we just get all the posts from that particular month or if we want to we can allow them to pick a date range so down to the day and they can pick a date range so either one of those are fine probably the month year thing will be the easiest and then the current bulletins needs to only get the bulletin items for the past week I already have some logic in the current bulletins project so I'll probably share that logic with you all sometime next week and see if we can just recycle that and apply it to what we're doing here it's it's a little weird and kind of specific to our situation so just I guess hold off on that and until we can look at what we're doing now and see if that'll work if we need to to make it better so anyway that's kind of the plan I think that covers the biggest things and yeah I mean I'll be doing a lot of little adjustments here and there to make things look nicer or make the text more readable and things like that you know just small small adjustments so cool okay let's see okay heart should say an Apollo 2 came out interesting I should said it's crab Redux should we migrate oh man I don't know I'm I'm not mice I'm not necessarily interested in migrating this project right now since we're already in the middle of it but I'm open to suggestions if you all think that I really should migrate it we can think about it if any of you want to attempt to migrate it that's that's totally fine with me if that's something that you would like to do and like to try to do but I'm happy to just leave it as is for this project and then migrate maybe the next time we use it we'll use the the newest version okay all right now I am at the bottom of the live chat and I'm really gonna in this time what's today Friday alright it's Friday so I hope you all have a nice weekend I'll be back Monday and hopefully you all I'd like to see what you all do over the weekend so I know harsh it's going to be working on this but I know some of you have some cool side projects and things that that you shared with me so I guess if you're doing any work this weekend let me know on Monday because I'm really interested in and seeing what you are working on and see if we can help each other out I think it's really cool you all helped me out on my projects but if we could all help each other out that would be awesome as well so if your stuffs not on github already put it on github and make some issues and then on Monday we can go over that and try to help each other out you guys can maybe I'll I'll bring up some of the projects and I think that would be kind of cool it'd be like we have our own little team here you know all right I can never find the button in the stream when I want to all right I found it oh it was great coding with you and a CEO on Monday