React Search Filters (P5D44) - Live Coding with Jesse

Key Takeaways

hey everyone welcome to live coding with Jessie I'm Jessie and in this stream you all get to see me do my work as a front-end developer and I don't plan this ahead of time so I make a lot of mistakes when we work through the mistakes together this is very much an interactive stream so I'm gonna paste the link into the live chat now if you go to that link you'll be able to see the project as we work on it if I update it on my computer locally you will see the updates in real time you can inspect the site with dev tools you can go on different pages so you're not limited at what I'm showing you on my screen and we split everything up into Pomodoro sessions so if you're not familiar with the Pomodoro Technique I definitely recommend it but basically that we were using it on this dream is that for 25 minutes we do some code and I have minimal interaction with the live chat then for five minutes I go to the live chat and I focus on all of your questions and comments then we do another 25-minute session of code and then at the end of that I go through all the remaining comments and questions so feel free to add your questions in and if you see me doing something wrong you're just not sure why I'm doing something a certain way put that in a live chat as well I get a lot of great advice from all of you in the chat and really the projects are much better off because of that so I welcome your your input if you want to check out the github repo the link is in the description to this video everyone this is also a little earlier than normal let me know what you think about this earlier time does it work better for you all you know I I know that I can't I can't stream and at a time that'll work for everyone's schedule but sometimes it's good to switch up the time and just see who can make it and who can't so let me know about that today let me switch my camera there we are so today we're gonna work on the search filters that we started to work on last week at some point and we're gonna try to actually get them working so I'm not sure what I did to the search but it doesn't work for me at all now so evidently we left it in a broken state which is okay we'll figure that out now let me check we have some activity in the live chat let's check this before we start our timer the other question is this all on code pen no this isn't on cope and the code isn't is in github and you can use that link let me post the link again in case you weren't in in the chat yet so the link that I just posted in the live chat will let you view the site as we're working on it sometime very soon this test version of the site will be available 24/7 so when that happens you all will have the link for the test version of the site alright hey everyone alright so I do want to let you all know that this site is gonna launch soon so we need to get it ready so on the streams we'll be working on things like a search and we'll be working on the routing and some like minor UI improvements for me when I'm not doing a live stream I'm gonna be working on getting all the remaining data transferred over so it's gonna be somewhat boring for me but I'm gonna try to keep the actual streams a little bit more exciting let's see I'm also considering using now instead of making multiple servers on digitalocean so if anybody has any experience using now especially for projects like this please let me know what your opinion on that is I I haven't tested it yet I'd like to test it first and maybe read up a little more on it but it seems like it's gonna be a better solution in that there'll be less things to maintain and it'll be it'll scale automatically much more easily then if we've actually had to go in start up new digitalocean servers or take them down okay so let's go to the search page on this site oops almost forgot to start the timer where is my timer there it is let's pull the timer over on our screen here so you don't have to switch everything around all right so we're gonna start this Pomodoro time and this timer happened to be built by Harsha who is frequently in the live streams and has contributed a lot to our github repos all right so let's go to that search page if you have the end rock link you can check out the search page as well so right now if I try to do a search I'm getting the black screen with an error so I'm not going to even try it right now but what we are gonna do and I don't need this would be quite so large we're going to get these working so that will make a search with these check box boxes whether they're going to be checked in or not and it will alter the results that we get back for our search so here's our search component I'm gonna make a little bit of room here and then increase the text size so let's shrink that down and to move this over we can also move this side over a bit and I think that should be big enough let me know if it's hard for any of you to see but you know if you're on at least a desktop you know with decent resolution this should work I'm not really sure how it will look on a phone let's see so here's our filter so we have this some functions already in here we have a few functions that we're not actually using yet that we brought over from a previous project so let's take second and sort things out just to see where we are since it has been about a week since we worked on this all right so here's these are just our Styles we can skip through the Styles here in our state let's take a look at what we have going on so we this is for the data when it does come back from the wordpress api which is where we're going to get the data from this is gonna house our search term this is going to house the type of search we want to do so in this case it's going to be the post types that we'd like to search for so that's where our filters come into play all of our check boxes are also our filters so these are the values true or false check they're not checked here's what we actually make the API calls so this base is going to be the same always and this URL for now this is going to be this IP address will be the URL but that may change in fact it's likely to change when we get closer to launch but for this we take the search term which is what's typed into the input and then we add the search type or multiple types which is what we'll get from the check box and then that whole string gets sent to the WordPress API all right so the the logic for that lives in another component so I'm not going to go over that right now but if you check out the the fetch component we we call it yeah so in the in the utils folder the component named fetch is that'll show you what's going on there if you want to check it out in the github repo all right so we have some logic for getting the value out of that checkbox we're debouncing so that we don't fire off a bunch of API calls you know more than we need and let's see I'm gonna get search results I'd like to see where our problem is you know what let's run a search and see what that error message looks like I know we got results with that search term since this website for a Catholic school so they're gonna have that word in there somewhere all right so our data there is no data really this state data map is not a function so we're trying to map over data but there there's no data let's check that out let's see where we're doing that this states map this they data map okay so here's where we're doing that so if this state data hmm I thought we'd taken care of this I guess not let's shut that leg is greater than zero oops let's try a check like that I mean I still think it might not even go through this check but let's see let's see how that works okay so we're not getting an error anymore which is good let's see what's happening in our in our console what we're getting here oh okay interesting type program is required for a matter it needs to be an array okay so the problem seems to be with our types all right so let's see what we're doing here alright I'm gonna check the live chat as well see if anyone's seeing anything that I don't okay hey everybody I see a lot of people saying hi that's all right well let's step through this a little bit more closely hmm look at my error again type 4 Ram is a required parameter and it needs to be an array okay you know what maybe I'm just formatting this in the wrong way okay this is the R is an example that they're giving back of what it needs to be like so it's only sending this so my I see [Music] you know we need to make we need to make a checkbox that's for all so obviously the default is going to be to search everything right I think that's expected users will expect that by default everything is going to be searched and then as you check things it'll narrow it down so we need to send a string that searches for every post type at first now I'm not going to create that string right now but at least in terms of the filters that we're using we can search for all of them then once a checkbox is checked then we switch over and use what we have from there so it'll be I think the easiest way to fix this is to say this is I want to make sure that we're clearing the search type first or it's at least somewhere we're clearing it price filter alright we're not using the price filter yet filter by category we're not actually using this yet there we are no worries and let's search string equal okay all right this'll work that'll work all right so what we need then is to have a default value for this search type and we'll worry about how to get back to the all a different time or should the value oh how about this this can be a little different than I thought but what if the default value for the check boxes is true that should solve everything the default value for every check box will be true and then users can go through and uncheck things they don't want I think it would be useful maybe to have some option to just clear all but I think that's going to be our quickest solution right now so let's do that and this should give us results true and let's see when does that change does it just change on click or are we doing it on search as well it sir saves maybe we should move this let's move this from when a checkbox is checked to when we're actually gonna get results get search results the Divas assist okay I don't remember which which one of these is actually being called let's go down to our form we'll have to clean that up at some point I don't think we need that those examples anymore so we can probably get rid of our input change get search results is what gets called all right so this is the one that gets called debounce search okay what we probably should do some of this I'm not going to delete it right away but at first we're gonna run that there we are all right the reason that I want to run this in the search is that we win it when the component first mounts and everything's checked it won't actually add those terms to our search type string until someone checks or uncheck the check box but we want those added right away so the alternative would have been would have been to manually add that search string which may still be a better alternative but for right now I think this will be quicker and allow us to test our system and just make sure it works and then we can handle refactoring it and let's try this could see against me penny Suresh alright I'm gonna wait I just I was gonna pull that down here but let's just see if this works no it's just refresh and let's check yeah it works alright great now let's toggle this so I can just see what's going on a little bit easier okay so now if I click faculty I should only get faculty okay I didn't even get any faculty members on this search oh you know what that should trigger another search so let's make we're going to make sure we we have a trigger another search all right so that that's not working properly so let's see this is not checked we searched but we could see it's still searching for this old type so I've done something incorrectly so I know two things one we got to make sure we clear out the old search term in state and add the new one and then we also need it to search automatically when we check things so that's I think that's what users expect I don't want to make users have to manually click search again all right so let's check it out rid of that okay so let's see what happens when we do check a check box we'll go down here and start first with our check box so when I check the faculty check box it says this handle change and then faculty so let's scroll up and look at handle change so handle change takes the name the event checked so this day check boxes check boxes name equals checked this state check boxes okay so we're changing the state of that particular check box good so this state check box has changed now what needs to happen as well is a search needs to happen there so let's go up to see what our search gets search results so you know what we we can should we skip this create search types yeah we're not gonna be able to get the correct event if we call this so we're not gonna call that I wanna see what our create search type yes okay all right so I think we should call this fetch search term it's gonna get everything it needs from state anyway and I guess we need we ought to move this then since when we're not see what we're gonna run this alright you know what let's let's have it here and then let's also have it here oops did we have here let's have it here oh I lost what I had copy all right let's see if we've changed anything here okay that works no let's go faculty you know what I didn't I missed this that let's try to search with that and now it didn't change anything that's interesting so it should have hmm yeah it still didn't change anything wait a second all right I see what's happening the let's check on the state because these should have been checked by default I don't think we're using controlled components here and that's I mean that's one problem we need to solve no matter what here we go here's a state let's shrink this a bit and I'm gonna increase the size on dev tools you all can see what's happening oh that's too big okay so our state's here's our data search term search type there we are okay so let's refresh now check it out again okay search term search type so let's do it so here's our search type our check boxes are all true and if I check it it stays true now it's full so I check once check twice so now my search type is correct so if I went like that see now it just gives me majors so I can unclick that so we just need to change that initial state faculty great ok there we have the faculty all right so hopefully that makes sense that were at least part of our problem was the check boxes weren't showing that they were actually checks it took two clicks to get anything to change so when I come back from the break we're gonna make sure we we fixed that the check box is being checked right off the bat and then I also do want to automatically search again when these check boxes are checked or unchecked so let's take a break now and I'm gonna scroll all the way up to the top of the chat and just work my way down and I do I'm expecting an email so I keep checking my email if you see me like bending down to look that's that's what I'm looking at so we have hello from Italy someone from Spain hey how's it going thanks for watching so we have some opinions on the screen time so the time was good for some not so good for others so I'm gonna continue to maybe stream like around noon somewhere around there but I may need to do other times hmm excuse me sorry for the yawn when I do that I always hope I don't make a lot of other people yawn you know how yawning is contagious alright so on on yuge it's a nuj please let me know how to correctly pronounce that but on yuge says hey buddy what you working on I'm kind of new here but subscribe to you long-long the way back alright awesome well thank you for subscribing and thanks for watching so basically we have this rack project and we're trying to make a search function within react so we did get the search function working but now we want to add in some filters so you can see it's it's working but the controls for the filters aren't very good right now so we're gonna try to work on those Michael says early starts today yeah it wasn't early start today I might go to lunch with some of my coworkers so they've been asking me they asked me to go to lunch frequently and I usually stream during lunch so I've kind of skipped out on a lot of stuff so I think I want to I want to try to go today and hang out with them a bit I michael says what if we do search filter equals search filter or the star maybe yes you know it's something like that something like that could work as well yeah maybe will that that may end up being like the final solution that I use I think that's a better solution than what I'm doing now SIB la silla fat sorry if I'm mispronouncing that please let me know what I'd love to I'd love to be able to pronounce that correctly but anyway they say hi Jesse I did subscribe you awesome thank you very much for subscribing and I do have another channel so that I stream on the free code camp Channel and then I also do some videos on my own channel not nearly as many videos but I think I am going to be start producing more like small very focused tutorial videos so if you're interested in that please subscribe to my channel as well I think there's a link to it in the description and occasionally I do some live streams on that channel as well usually I like live streams about side projects and tutorials that I'm working on hey Anna how's it going thanks for joining us I'd be nervous how long my Pomodoro sessions are 25 minute sessions with five minute break in between NS if I was sick I'm not like fully sick I have a sore throat and I was really congested all night but I'm sorry it's starting to clear up now so I hope I'm not getting sick thank you for asking though Brian Sizemore who is in the office right next to me said I yawn said I yawn but I heard you through the wall sorry for making you yawn all right the break is over let's go back and I actually got through everything in the live chat in that five minutes so that rarely happens that's perfect timing all right so let's go back to here I am going to take a drink and I got the G fuel so hopefully this will keep me from yawning let's see Abby now says your get your grinding on your lunch keep up the hard work yeah I have been I've been working through my lunch bag for a long long time but there's a lot to do and sometimes you get in the zone you just you don't want to stop brian says chug chug could you all hear me chugging that I'm really sorry if you could I I will try not to chug loudly next time I'm sure that was gross okay so let's yeah let's figure out what we knew these check boxes all right I think I'm going to take I think was Michaels suggestion and let's do let's take these checkboxes and we will let's move them back to false let's move them back to false and then we'll do this search term source I this states just search type mm uh let's just yeah let's split this out just to make it a bit easier I'm gonna call this you just keep it as search type oops equals in the wrong place so this is gonna equal this state search type or and then we're gonna need to put in our string that has all the stuff so is it still here can I just copy and paste it Catholic faculty major it's a Catholic department yeah this is it it's still right here okay hopefully this will work actually it might not work I'm just gonna try and see it but if any of you know without me trying it'll save a few seconds do will it just grab this value since it's an empty string or will it see the empty string and go to the or we'll find out in a second I guess sir save and then down here we're just gonna put search tight alright okay cool so eventually this will end up being a giant string but for now this kind of solves the problem of the checkboxes and then the other thing that we wanted to do was win a checkbox is clicked we wanted to search so fetch search term I think we can call fetch search term so should we do are we not doing the debounce search we don't get search results this debounce search yeah let's call this D bounced search now I don't want to pass percent of value here d valences do we need a value let me think about this search term value so the state session value here so we don't need to pass in a value to debounce search right it doesn't even do anything with that value I don't not sure I don't even know why I'm passing it okay so we're gonna do on click of a checkbox which it's handle change we're also gonna do this here D bounce search okay feel a lot going on there let's let's check it out and see what happens so I'm just going to start fresh and we're gonna try to do a search right off the bat make sure that still works okay great and I want to clear that out and well I guess it'll search automatically no matter what so now I want to click faculty great we got a search automatically and it's only faculty wonderful now let's click Department as well and there we go we have Department and faculty wonderful now let's click major and now majors are there let's take away faculty let's take away Department wonderful all right great so that's working let's just make sure like let's say we hit enter or take one of these away so do a search are we you know I can't tell if we're actually searching anymore is it not letting me search again okay searches are happening then all right cool and it is major all right excellent okay so those minor changes have essentially solved all the issues that we were having all right so let's think what do we need now it's just some kind of repetitive work is gonna be involved with just getting every single type making a checkbox for it we won't need to change anything the only would need to change in the code is when we add a new checkbox we'll just need to make sure that we add that type to this string as well and it should work the next thing that we need to work on is sorting so we want or reverse alphabetical order and then also by date so newest or oldest and we're gonna have to go yeah we'll go by the word press date that's not gonna be accurate for everything because right we're migrating all this data and so a lot of the data even though it was created you know maybe sometimes years ago it's gonna have a much newer date the exception is in the news all the news that I brought over they all I made the dates in WordPress match the dates that they had in the old system the Ektron system so those dates will work and I think that makes sense I don't know if I did it for events but I don't think we're gonna be displaying past events anyway at least that was the the last time I talked to my boss about it I think there wasn't really a need for that so I think that'll be fun as the site keeps on being updated that will actually be somewhat useful if people are coming to the site and they just want to know what's new they can use that okay that makes sense now what we'll need to do as well is for sorting it would be wonderful if we could just sort the results that we get automatically but we may need to make an API call and get items back based on that sorting this is going to be challenging that's going to be really challenging the reason it's challenging is maybe it won't be I think we've done something similar in in past projects so I'm gonna have to look through some old code I don't think I'm gonna do it right now on the stream because I don't remember exactly where it's at I don't want to take up a lot of time with that but so here's but here's what I'm thinking so we're limited to getting 100 posts in a search so let's say our search actually matches 500 posts but we only get a hundred if I only sort through the hundred that we got then let's say we're sorting by alphabetical order like I'm I'm not gonna get all the posts certainly or if by date I'm not gonna get basically the point is like it's gonna sort what's only there meaning the hundred so even if in the other 400 there's something that should be at the top of the list let's say it's alphabetic order and there's a bunch of things to start with a they're not going to get there at the top of the list because we don't have that data yet but if I make an API call I mean it's you got to make another call right and then I sort the data on the WordPress side of things and then send the sort of data so I don't just get the first hundred pose I get the first hundred posts already sorted alphabetically so maybe it might only be a through C but there will be everything then whenever we scroll down the user can either press a button or will do the infinite scroll and it can make the next API call and it can ask for it we can tell it to skip the first 100 and do the next call and then we can just increment on top of that to make you know more calls and keep skipping until there's no more I have some code for that in an old project as well so I'm gonna have to check that out it was done with jQuery but the logic should still work but what we can do to save API calls is do a check and say like we can look at this that we're getting back here so we keep getting back you know this data and displaying it in the console if we check this out and look at the length of this array and if the length of the array is 100 then we'll do another API call but if the length is less than 100 then we know we've gotten all the results already and so instead of going an API call we'll just do a normal sort will you just do a dot sort on it and that should save us a lot of time I mean I buy a lot like it's probably still gonna be less than a second but it's gonna save traffic and it should just be a faster experience does that make sense I just did a lot of talking and not a lot of coding so let me start to code some of this out as much as I can so let's do let's do a sort by date yeah let's do a date and all right so sir by dates will be yes actually there's gonna be yeah let's make a new function and you know I'm gonna get rid of this for now and fresh filtered I'm gonna get rid of this for now filter by category let's leave this in for now okay so let's say sort so we're gonna do sorts and then we're gonna say type so the sort type and then we'll go in here and here's where we'll do our function whoops yeah I don't think I can use sort let's go sort if I can use that oh I forgot my error there we go so I guess we could do at first we're just going to do one type but we will have multiple types at some point let's see so we're gonna we're gonna check to see if we have the data so if if the state data is equals 100 length length the state data length equals 100 then we're going to call what was that debounce search yeah this deboned search and we're also gonna do the set States and we're gonna make state it will be sort by oops so we're going to change the value sort by and here and so if I will be a string they need to do by a second this should work right I do that right I think is it just mad because in all my spaces what the heck should I oh okay I named it type that's hot sorry that's silly mistake okay since they swear by tight so whatever tight gets passed in that's what the sort by is gonna be and eventually the sort by will probably be a drop down that'll have four options alphabetical ascending alphabetical descending date ascending date descending so that'll get passed into here it'll set the the type and then we're gonna do a debounce search and we will modify our search function here to add something into our URL to change the the sorting on the wordpress side of things so oh yeah all right so now if it's something different so if the length is equal to 100 actually I need to say or is equal to 100 or it's equal to zero right because when we're going to do this this sort type this actually may not ever come into play but it's better just to put the check in there basically it would be like for some reason if somebody hasn't made a search yet so the data is nothing then we want to make another call to get the data okay all right I think that I think that'll be okay there may be some unnecessary calls like that but we can fix it later but I think it's better to do it like that else so else me this would then mean that the length of the data that we get back so the number of posts that we get back is somewhere between 1 and 99 if that's the case we know we have all the data for that particular search so when we do that we're going to sort the actual data so we're going to take the data this state's data and then we're gonna do the sort and cool so let's see look this is awesome it gives us the documentation for sort so we're gonna have this working here folks this is great okay so sort and what we have type yeah this is definitely gonna change based on the type so from now we'll just pick one I guess and let's just copy this from our other project to save some time so let's go to get up it's a pretty sure we did a sort just like this in this project which page is this page resources I'll make it bigger once we get there they are and so where's get a knock on the door hold on one second all right sorry about that that was the head of my department so did not wanna keep her waiting and she usually doesn't knock during the stream she's just a very apologetic about knocking during the stream okay let's see where was functions this might this might be the better the better way to do it hmm so what's this price filter oh I'm sorry I'm not looking for filters I'm looking for sorting sorry about that I thought I did have sorting do I not have that here I'll shoot well my time is up so normally I'd probably take a little bit extra time and figure this out but since I'd like to be able to make it to lunch with my coworkers I'm gonna I'm gonna not do that so basically I I must be mistaken we must not have done a sort in this this project so apologies for that but basically what we would do here then is actually sort the data and then set the state whatever we got back from this we would then set the state with that so this would be like cause sorted data equals the state day with data equals sorted data all right so it would be something like this that said state what's going on oops not equal sorry there we are okay so you see what would what would happen let me know if you need me to explain that and I can explain it a little bit more but basically like we were saying the the point of this is to not waste an API call if we don't need to and instead do it short like this which would be much faster and you know especially we want to cut down on the amount of requests going directly back to WordPress so they're gonna be layers of caching but we're not going to be able to cache search requests because they're gonna be so specific so that's the one place where I'm a little nervous about the load and it could slow things down so things anything we can do to cut down on the amount of requests is going to be good also just for users that maybe are on a data plan you know we don't we don't want to make requests from you don't have to out of respect for for the user you know for their money so for both of those reasons I think it's it's our responsibility to try to keep the the request to a minimum okay so let me save that and I want to push this up to github so that you all can check it out and it's available for me in case I'm working on a different computer so let's do get status see everything's been in search so let's do get add Doge add and then we will say yarn cm yarn cm is something that we have set up for this project normally you would just do a git commit at this point and then put your message in and and that's how you do it but we have a little extra formatting for this project so we're going to say we've added a new feature and this is going to be lets say filters for for search results no breaking changes all right so now it's gonna run the test it's gonna run the auto linting and auto formatting and it looks like we're gonna pass so far so good the tests don't take very long but we certainly don't have a hundred percent test coverage right now so that's that's why they don't take so long if anybody's interested in writing tests you know feel free to write some tests we have and n tests and unit tests happening right now so whatever you're interested in let's see good push or it in whoops get to the origin alright so that date is now available in the github repo and you check it out if you like use it for whatever you want to use it for it's totally open source and and free I'm gonna go back to the live chat and answer all the questions well yeah unless unless you all start putting in a million questions I may have to cut it off but right now it looks like I'm gonna be able to get through all the questions that are left all right I'll be enough says isn't it better to use redux in this application um I I don't know that we need redux really the only place where I even thought Redux would be helpful is maybe for this search so if we do need some redox like functionality it Apolo now has some of that built in so I'd have to look that up and see how to use it but I do believe the newer versions of Apollo have that so if I think we need it at some point we'll do that if there are some some good reasons why you think we should use Redux please let me know I'm definitely I'll definitely consider it Michael says I did something like this and PHP slash my sequel pre github but I don't know where it is well that's cool if you uh if you find it or you have some advice based on your experience you know let me know I'd appreciate that Michael says how are you gonna grab the next results after the first 100 don't know WordPress okay so the the WordPress API will allow you to like offset your search I actually think it's called offset is what you put in the string so like in the let's put this donor so in our string at some point in our string we would just say like let's say at the end I would type something like offsets equals 100 right so now it would skip the first hundred results and give me the next hundred results so if we did a search that gave us five hundred results we'd only get a hundred sent to us first as we scroll down we could have it so that if we get far enough if we get close enough to the bottom of the page it'll automatically send for the next 100 results and then instead of replacing everything in data we would just add on to it was already there for the data so we would essentially be able to show 200 results or more as we keep scrolling down but we'd never we just have to make multiple calls so the way we would do this is you know potentially we would make another function that maybe like would be called like fetch more posts or something I don't know what I'd call it and then it would have all of this the same except it would have this addition of the offset and then it would increment so if we've called offset already then the next time offset calls it's going to skip the skip 200 posts and then 300 posts so you know I it would it would look like that that's how it would work I have done it with jQuery on another project so I know it does work I just have to make sure that I can transport that logic here and have it work with with state and with react a noble self Noble and savage says boom shacka lacka also us what's your favorite color my favorite color is red and what's the airspeed velocity of a European swallow hmm I don't know that one that's that is from Monty Python and the Holy Grail I think that's how it goes that's what's the airspeed of a Leighton swallow and then they say well you mean to Europeans well or an African swallow and then there's this long conversation that happens it's been too long since I've seen it to remember everything that they said but I do remember a bit Blake says as anyone coded on a Chromebook or installed Ubuntu in one I have quote I have coded on a Chromebook but I didn't install a boon to instead I used what's it called kimly I forget the name oh cloud 9 so cloud 9 it's it's like a remote development environment so essentially it is like in a boon to server that your remoting into and they give you an IDE so it I mean it looks a lot like Adam and Visual Studio code you have your terminal at the bottom so you can run all your Linux commands install whatever you need to and you know have all your different projects I believe you can pull in stuff from it it's synced up you know with github and with different things so it makes it a bit easier so I have done that before and if you're using cloud 9 it's it's fine I mean it's it's actually really easy to use I haven't installed Ubuntu but I kind of want to I have a current book right now and that the screen is broken but I could still use an HDMI cable and use like a desk so would essentially be changing it into a desktop computer because it would have to have a static screen but I'm thinking about since it's already broken just trying to do Linux on there and if I mess it up who cares so we'll see I haven't decided for sure what I want to do with that one yet Adam so c9 requires the credit card though it does now yeah when I started using it it didn't and then they got bought out by somebody and now they require credit cards so if you have the credit card you know c9 is great otherwise I think they're all there are alternatives but I haven't checked on alternatives for it's probably been like two years since I checked so I'm not really sure what's out there right now okay Blake's debating between a new Chromebook or a used ThinkPad Blake's as it was it pretty snappy and what were the specs honestly Chromebooks are the fastest things I've ever used fastest like by far in terms of speed like speed of startup and things like that like pcs are down here you can't even see how far down it's off the screen and then Max and then Chromebooks the fastest like you can't even open the screen like fast enough to try to catch it on a black screen it's just it's there it works it's super fast you sacrifice some stuff by for all the speed I don't know if it's still that fast if you were to install Ubuntu on it instead of Chrome OS to tell you the truth I can't remember what the specs are right now on the Chromebook that I have so sorry about that but I got it a while back so I can't remember but yeah Chromebooks are they're really nice for certain things I wouldn't want to do it all up on one primary so I'll say this I've never had a high end Chromebook but if you're gonna go with a high-end Chromebook it's gonna get pricey from the chrome books that I've use which are kind of lower in I wouldn't want to that'd be my primary development environment I just kind of like to have more of the freedom to do things so a Chromebook with Ubuntu installed that that might be perfect I just haven't tried it personally so I can't I can't really recommend it I mean it it sounds like logically it should work out and be awesome if you do it please let me know because I definitely want to see like how that turns out and maybe do it myself div yesh says hello I'm just learning react and JavaScript to I get frustrated as I need more practice with DES and algorithm and JavaScript can you suggest me something you can try out the unity algorithm challenges and free code camp and there's a free book that's on github called you don't know J s read through those that's that's really great for kind of learning a lot of the basics of JavaScript and so it's text and then it also has some exercises so check that out I mean you can't beat it as a free resource it's it's really good let's see I think it's time for me to go so I'm gonna might not be able to get through all of this hey JavaScript to share hey how's it going hey javascript er says a Chromebook with Linux installed is a no-go done it before trust me no good okay so had a bad experience with that I wonder if it would depend on the specs of the Chromebook I imagine it would it seems to me like Linux may use more resources than Chrome OS is meant to use so you might need a more powerful computer anyway I just got a message that said they're leaving in just a few minutes so I'm gonna have to have to end the stream thank you all for watching I should be back tomorrow try to stream as much as I can this week and get as much done as we can on this site until tomorrow have a great