 Okay, so hopefully, many of you have been to my website, filmsbychrist.com, that's Chris with a K. When you go to filmsbychrist.com, it'll make the forwards you currently to filmsbychrist.com, or redirects you to filmsbychrist.com, forward slash v7. I get asked sometimes, what does the v7 stand for? It's version seven, which is just an estimate, because I didn't start numbering the changes, the updates to my website till version four, and I was guessing that I was at version four at that point, but we're currently on what I would consider version seven. It had been on for a while. I'm very happy with my current design, and that's what we're gonna look at today. So this is my site, you come here, you see this, and actually I'm gonna click on here, and basically refresh the page. After a second, the page automatically scrolls down and gives focus to the search bar here, where you can search through my videos, not only from my main YouTube channel that you're currently watching, but my second YouTube channel. So I can type something like doom, and it'll bring up all my videos on doom, and it filters as I type. I can say grep, or android, or I can say nmap, and so there's certain things that are important to me when it comes to programming. First of all, if you have something that has a list of things, and there's more than 20 things in that list, or definitely if there's more than 50 things in that list, you should be able to have a search feature, and preferably, I like it to filter as you type when possible. In fact, I plan on doing a whole series of filtering lists in different programs and languages, but it's very important to me to be able to quickly, as I type something, as I'm typing the list changes, and I can see what is available. So that's it, pretty basic, pretty straightforward, but we're gonna look at how that works, and obviously, as a webpage, it's using JavaScript, which some people dislike JavaScript, which really there's, I disagree. I understand some aspects of people not liking JavaScript, but usually it has to do with bad programming, not JavaScript itself, and I'm gonna talk about that a little bit here, but don't worry, don't worry, because it's not that hard, and I have provided provisions for you, many provisions for those of you who don't want to access my website with JavaScript. But first, let's look at the JavaScript, and look what it's doing, and look at why I wrote it, how it wrote. First of all, the main part of this page, you're probably coming here to search through my videos. Originally, when I designed this page, when I say designed, I use the template, but when I set this page up, this is what loaded, and you saw this, and of course, it's, you know, it's what you would call it. What's the word I'm looking for? Where it resizes for mobile devices, it's, I'm drawing a blank on the word now. I use Bootstrap, and it resizes the page, whatever. It will come to me later on when I'm then recording this video. So anyway, it used to load to this, which is nice, you see that you're at Films by Chris, and it gives you some options in the menu here, but really, then you'd have to scroll down to here, and then you'd have to click into the search bar here. What I set up was after one second, so if I was to refresh this page, the page loads one second later, it scrolls down to videos, and also gives you access to, it takes focus to the search bar. I hate webpages that the main point of them is to type in a search bar, and it doesn't give focus to that by default. I actually use this plugin for Chrome here, Vimeum, which gives you key bindings, they're similar to VIM, and I can actually type when I'm on the page if we're not in an input already, I can type in GI, and automatically brings me to the first input on the page, which I use all time, but I think if the page is properly designed, it should automatically go straight to the search field if that's the main point of the site, or whatever the first field is, if there's fields to be filled out, and that's the main purpose of the site. I'm not saying every site needs that, but if that's the main purpose. So again, I press F5, it shows the top, a second later it scrolls down, it gives you focus to this, and you can just start typing. I don't need to grab the mouse and click, or even press special keys to get through that search field. So let's look at that real quick. I'm gonna open up the code to the page, and I'm just going to search down here to ready. So okay, so when the page loads, I actually, this is probably not the most efficient way to do this, but I just set a timeout that waits one second. After one second, it's going to set an animation to scroll to the top of the video section. Pretty simple, I tell it to do it slowly, you can set different speeds, and then as soon as that's done, or even at the same time, it's going to then take the search field and set focus to it, and that's it. Two lines of code to do that with a wrapped in a timeout function. Great, so how does our search work? I also wanna show you my search, in this case is not a smart search. So actually, let me show you here. If I click on probably software here and I scroll down and I click on notes, that actually brings you to another page where I didn't set. I'm actually breaking my own rule here and I need to change that. This is all my notes that I put on Payspin. Every day I have a cron job on my web server that grabs the newest Payspins that I have posted, puts them into a database and loads them here. And I'm not saying that my code is the best because this code is actually very, very horrible, but it still works. Currently there's 601 entries, and here I can type in things like Android. And this is where you can go and look through a lot of my codes. Whenever I take notes or write codes or scripts for stuff that isn't a big project that goes on GitHub, if it's just a short script, I put it in my Payspin and I put a link here. I much rather use, what is it, GIST, but I actually created this before GIST and it's just set up so I just haven't changed because then I'd have to move all my code over or rewrite this to look at both sites. Anyway, as I type it works fairly quickly, I say because, again, I wrote this absolutely horribly, but it's not searching just through the title of the objects, of the notes, but it's actually searching through the scripts too. So I can just say something like Churroot. And you can see Churroot isn't in the title of most of these, it isn't some of them, or even most of them, but some of them not like this first one. It doesn't say that because when I click on this, it brings me to Payspin and it shows me the code and it's actually searching the word. But I'm doing it all on client side and not only, so really this should have been done. I have everything in database. I should be sending requests to my web server and it's going to then go through the database and return what I'm looking for. But that's not what I did in this case. If you actually look at the code of this page, oh, well, you're not gonna see it here. I'll bring up the developers bar because that's the code before the code runs. It actually queries and grabs the title and the entire content of every single script. So let me click on one of these elements here. So you look here and you can see it's an anchor tag with an H reference. When I open it up, you can see here that we have the title and we have some div tags here. And let's do another one right here. So here's an example. I'm actually loading every single one of these scripts into your web browser. So there's an example where it's not just the JavaScript but the fact that I'm just doing it poorly and it shouldn't be done this way. This is just how I wrote it originally because now everything's being done on the client side. Once the page loads, it grabs everything. It's all done on client side, which is sometimes a good thing, but not when you have this much information. Really, this should all be done on the server side. But you know what? On my desktop, it runs fairly well. Again, I can type in Android. You can see it's filtering the list fairly quickly. On a mobile device, though, it will take three to five seconds for the list to filter, not the end of the world. But again, that's an example of I could have done this better and it's not even the JavaScript but the fact that I'm loading everything in the web browser and it's a lot of text for your web browser to filter through. And the JavaScript's filtering through it where it should be done with a database on the server side using PHP or some other type of programming language using the database rather than flat text file that's been loading into your web browser. Anyway, so here's an example of where I'm breaking my rules. It doesn't auto focus and it's written poorly. But good enough, I wrote this for my personal use and I just posted on my website for you guys to share. So again, if you wanna go through the code on my page, if you click on software, brings down here and you can go to my GitHub page where my larger projects are. Scripts, oh, brings you to example scripts on my website. So that's stuff that's actually gonna run on my website. And notes is basically all my paste bin that you can search through. And actually let's, let me see here real quick. Network, all, reload. And you can see right here, right here, get that PHP, it's actually not that big but it will be over time if I keep using this. Oh, keep clicking on that, don't wanna click on that. I mean, it's a quarter of a megabyte. It's actually not very big for loading but searching through, it's a lot to search through in your web browser after all that's loaded. So again, just giving you examples of not saying that I am the best program in the world. Sometimes you just do what works but you can't bring the program language when it's written in properly. Anyway, going back to my website here, let's go back to the code here. So here when the page is loaded, so the document is ready, anytime in the search field the key is lifted. So you press something and lift up. It's gonna run a function to search the views but before that, let's look at this get function here. This is doing a request when the page loads and it's looking at a file called current list, current.lst. And again, a lot of what I have set up on my website, I set up many, many years ago and I would do it again differently if I was do it now but it works. So even when I'm doing things poorly it's working fairly well. And what I mean by that is in this case I actually am using server side code rather than client side search through stuff but I'm actually using flat plain text files not a database for any of this which is not the end of the world. It's not that I have 2000 some videos and it's only searching through the titles of them and returning the ID for it on YouTube and then loading up the image here but we're not gonna look through this greatly but you can see we're splitting out of pipes. So what is happening here when this loads? So this is a current list which is just a list of my last I think like probably 20 videos. So my newest 20 videos will be loaded here. I'm gonna refresh the page so it's at the, you know. So I think it might be 20 from both my channel so it might be 40 videos altogether but it just loads those up so that you right away you see my most current videos from both channels. But as I said earlier, anytime you type something and lift your key in the search bar it's gonna do this search video which is this right here which is basically doing the same thing as this but looking at a different URL it's actually going to look at the videosearch.php. So actually if we were to take this and we were to go in here and type in so filmsbychrist.com forward slash v7 forward slash videosearch.php, we'll click that and it actually is going to load up all my videos because we didn't put any search fields in there. I don't think I put a limit on how many videos it returns but we can do question mark q equals nmap and hit enter and it actually will filter out and it's not giving us line breaks in the browser if we were to look at this as code or as a source code. You can see what it returns and what it's returning is the title of the video because it's looking for anyone that has nmap in there and then it's returning the ID for YouTube. So let's go back to my page here and talk about this a little more. So again I was saying I didn't make this a smart search so I can type in something like wolf and you can see it brings up my two videos on the wolf web server. I can type in wolf web server and it filters it but it's not smart enough that if I was to, if I was to type in just web server, it's gonna bring up all my videos say web server and you can see the wolf ones right here but if I was to type in web server wolf it's not gonna come up because it's not a smart search. It's looking for exact matches. So it's not the smart, where on the other hand if I was to go back to my software section here and click on my notes I actually have it smart enough that I can type in something like churroot, android, if I typed android right and so it doesn't matter, it's looking at the words and it doesn't matter what order the words are in. I can even do parcel matches. I can do that and that and you can see there is a one second delay when I'm typing stuff here because it is again doing all in the browser searching through the entire code of every one of these scripts but it's a little bit smarter. It's not super smart. It's not like Google algorithm smart but it's a little smart. I can do that on my homepage here just because I didn't bother doing it because I think if I type in doom it's only gonna show so many videos. I think probably one of the longest ones you would type is something like Python probably would return a lot of videos and then you gotta go through all these but at the same time you can if you're looking for something in Python in particular you can type it in so like if I wanted JSON videos here are my videos on JSON there's only two that return so that's why I didn't bother taking the time for doing like a super smart search with all this but it's usable. I think it works great. Even on mobile devices it works pretty quick and responsive. Even like I said, my tests for when I write stuff like this I go to Walmart, find the cheapest tablet, test it out in there and if it works fairly good it's good enough for this but again some of you may not like the idea of JavaScript in the web browser again it would be this if I didn't do it like this what you would have to do is you would have to type in doom and then click enter or search and the whole page would have to reload and I hate that I hate when websites are like that so although there are people who out there who are I just like JavaScript I much rather just have the plain HTML on a web page I completely disagree because I think that's very inefficient to reload the whole page when you could just be grabbing some text from the server requesting some text from the server and loading up what you need from there and it's also just quicker more efficient, cleaner, whatever but here's the thing like I said I have options so you saw that we could go to you know our what was it was it video search you could do that don't do that though that's you could go into your shell and type that so let me go like this go to a shell say W get and put in that code and it would, oh I do want to just display the output on the page so you can see and then I can say make it quiet and I get that, I get these lines and that works but I have better options for you so first of all as I said I'm just grabbing stuff from some text files if you go to my website filmcircuits.com and do forward slash site data there's a folder in here with actually some files that are old and I need to remove but there are three main files in here that you might want to look at current list so again this is my last I don't know, I'm gonna say four I think it's 20 from each video 20 from each channel I mean so if I was to take this I can do quiet, oh yeah so there's the list and then if I was to word count this 80, so yeah so it's 40 from each channel so by default when my page loads you get the 80 latest videos from both my channels so again that's what happens when you're in here and I just refresh the page the first 80 videos that show up are actually just being pulled from that plain text file this right here so you could if you wanted to see my most current videos you could just W get this file this URL here or Curl or whatever program you want to use and once a day I have a cron job that checks my channel so if a new video posts today it may not show up in this list till tomorrow depending on what time it posts and what time I have the cron job to set up which I don't even remember because I set it up many many years ago then we have a playlist which I don't even actually use on my website but this searches through all my playlists and it's up to date if I was to search for 2008 here you can see their playlist from 2008 and again it's separated by a pipe so all you need is this and then you can go to the YouTube channels from there, the playlists from there so currently I don't have a playlist search on my website which I used to with the last version but the file is still there and it's still constantly updated you know we got some old test files the actual, this is actually a copy of the script that runs in the cron job if you want to see how it works it pulls stuff from my website so if you want to manually on your site or on your own computer pull my videos from YouTube you can do that but I'm already doing that on my website and you can just grab the list and then of course there's the video list which is all the videos on both my channels filtered, sorted and unique so I can grab this and I can W get dash Q dash capital dash this and I'll get that list and if I word list it yeah just over 2000 videos is in this list are in this list and you can manually grep through this so I can grep and probably dash I for case insensitive say doom and I can find all my videos that have doom in the title you know and then if I wanted to filter it down I can then grep dash I cheat and there you go here's some custom cheat codes video so all you have to do is you know this is the ID for this so for example if I was to go back here to my page and click on this you'll see right here there's you know an ID goes there all you have to do is grab that ID from the other side of the pipe pipe it in there and it will bring you to that video so again if you are a you know using the shell and you want to script this out you know you could do something like this so this will return all my doom videos but I could also say cut with a delimiter of pipe field two and I get all these IDs and then I can say while read L or ID or whatever I want to call it echo done and I always forget to do do and I can grab this put it there say dollar sign ID and now I have links to all these and I can do whatever you do I actually have code setup that I can use hot keys to select a video boom and there we go we're at that video so again if you're into shell stuff there you go that is one way to do it but not the only way so I've shown you you know there's my web page here and then there's also the files the plain text files that you can just pull down with W get or curl or whatever you want you can do that but there's actually cleaner ways and again it's all about good programming even when you're not the greatest program in the world like me so what happens if I try to go to my website filmsbychris in a text browser so like links and I say filmsbychris.com of course I kind of spell my own name properly I go like this and here it loads you get redirected it loads and you come down and you still have your search field but if you try typing in here nothing happens because I don't have a submit button and it's using JavaScript for those submits you're like oh well this site it doesn't work it doesn't work when you're working in a text browser well again I've set things up for you if you look up in our menu options here actually let's go to it in the regular browser menu options here there's a shell option look at this a very basic setup of the same thing that doesn't use any JavaScript and I made it just for you guys because I know a lot of my viewers are probably those people who don't like JavaScript and so in here again it shows some of my most current videos just a few of them it doesn't show the full 80 and in here I can type in doom and again I have to hit enter before it loads it doesn't filter as in typing because there's no JavaScript in here everything's done on the server side and you're just getting plain text output I can say grep and I'm also not setting focus I'm sure that I'm sure there's a way to do that with HTML but normally I do it with JavaScript so that's why it doesn't set focus there and map so there you go but not only that you know that's this in links so again I can hear I can just go shell and I can wait for it to load and I can type in doom hit enter twice I can type in grep and there you go so there you go you get your text based web browsing you can also once you know that that exists I can use let's use W3M just use a different browser here I can just do forward slash shell and it'll bring me straight to that and I can type in I haven't used W3M in a while what do I press to oh I just hit enter okay I'm just using doom because I know I have videos on doom there you go so same thing and also at the top it gives you notes here on how to use it so in case you're using W3M make sure you go to filmcircuits.com forward slash shell but it also shows you here with W get and curl so again I have created things to make things easy for you if I was to quit out of this and I was just W get dash Q dash oh so basically this means quiet and then the output just is displayed rather than going to a file and I type in filmsbycris.com what happens is it actually gives you and you may not like my theme but instead of just plain text so the other way you know I could grab W get you know here is my video list or I can do current let's clear the screen current oh it would be good if I spelled current properly there you go so here I can do this and I can search through the videos like we were talking about dash I doom oh there's no that's my current videos we'll just say chip so there you go you can do that but if you actually just W get my home page it gives you instructions on how to use it with curl which we'll use next and with W get again you may not like my color scheme but I gave you colors I automatically add the URL in there for you instead of just returning the ID so this is actually probably a better option than unless you can pull the list entirely if you want but if you're actually gonna search through it you might as well use this so curl dash capital L filmsbycris.com forward slash shell question mark Q for query equals and then what you want to query and again it's not super smart query it's the same as before but it gives you the titles over here which blue probably isn't the best option on a dark background and then the titles in red here so you can actually just if you wanted to do searches like this doom you do partial matches like that and then if you have code set up like I do to go through this I can select a video like that one and it loads man my volume is way too loud okay so yeah and again I set it up so that my website knows it knows when you're coming from W get or curl like this instead of loading the actual page it forwards you to the shell page it gives you your little title here it tells you how to use the page with both W get and curl so in case you weren't one of the people who watched this video and maybe you don't see the shell link in the menu if you tried to W get my page it will give you instructions on how to use it with both W get and curl because it knows that you're using W curl it checks your user agent says oh you're using curl or oh you're using W get unless you change your user agent and it makes it easy so to set up this to where you can access it from the shell here using curl and W get or W3M or links was very very simple it took me maybe a half an hour to do it total to make sure that it ran properly with all those with curl and W get and the text when you're using curl, W get and a color code stuff which is probably unnecessary but I felt like doing it really didn't take long at all so one of my points here is JavaScript is not that bad which is always one of my points let's go back here I personally won especially when you're working with media like this it's nice to have the pictures but obviously you're not gonna have that in the shell unless you're using a browser that overlays in which I always just looks confusing to me but I like lists that filter while you type and that's a big thing for me to have the filter to have it again in the shell you can pipe to grab, pipe to grab, pipe to grab as much as you want which is great but if I can search while I'm typing and I am gonna show you how to make a very basic shell script in a future tutorial that will as you type filter a given list because when you have a long list I think that's just awesome to be able to do but my point is I made this, this works great this is not that much code so again, ready so this is the entire JavaScript that I wrote obviously I'm using some libraries I'm using Bootstrap and jQuery but this is the code I wrote that does everything on the page there are a few things in here that I didn't even go over but mainly clicking on links and stuff like that but to search through videos and really a lot of this code is repeated up here it could probably be put into a function and cut out some more code but why, it's short already and even though my server side is just using flat text files which in this case it would be bad if I had millions and billions and millions of things in the list but a couple thousand is not that hard for a computer to search through and it's being done on the server side and loaded up to your browser it's not that much code it didn't take that much time to write I used a basic open source template for my website, a free template I think one of the hardest things I did was I rang code that when the title of the video is too long and it was causing the videos here to be unaligned because it was making the words go down to a new line that I set it so that they're limited to a certain length and then they do dot dot dot other than that it's all very basic stuff you use all the time and I think it's great to have both options some people out there I'm not going to call any names of other YouTubers who constantly bash JavaScript don't have JavaScript on their web page and I hate that if there is a search field like I have over 2,000 videos I have to type doom hit enter just like I do on my shell here doom hit enter I want to be able to just start typing and see it filter as I'm typing even if it was just a plain text list to be able to have that to where I can type and filter it's just so important to me reloading the page every time you want to do a search is just ridiculous and I'm sounding like a broken record now it's just so no, don't do that anyway that's my website if you don't like JavaScript I have options for you multiple options again if you just go to filmswikers.com search site underscore data that's where I dump these files at and again I need to clean this up because there's some files that are many years old you can go through those you can pull them at your leisure I do ask though I'm guilty of this too I watch a lot of my videos my YouTube videos using something like WPV or some other video player just because I like it better and I don't want to have to load up the browser just to watch a video but at the same time if you do enjoy my videos it does help if you watch my videos on YouTube because I get likes and hits and stuff like that I'm not telling you I have to just saying I appreciate it but definitely you can pull down the full list and archive all my videos to your own server if you want because I provide the lists for you to do that this video list right here is just a list that way you don't have to scrape YouTube I do it if you want to scrape my YouTube channel again update.sh is right here there's a whole script that does that for you and you can obviously change this for other YouTube channels as well whoops and um yeah close this but again you have the shell option here if you want to use it in a guli web browser you can still use this where there's no JavaScript if you don't want to use JavaScript so if you have a plugin on your web browser that prevents a JavaScript from loading or you just have JavaScript disabled you can use my filmsichrist.com slash shell to do that you can use wget you can use curl you can use WM3 links or links to spelt differently each time but yeah those are the options I set it up for you I hope you appreciate it because although it was not that much work to do and I considered doing stuff like this this is what I call doing it properly to where you give those options you give what I would consider a better option as far as searchability viewability but then also give you the option for the plain text and the limited code running on client side it's all running on server side um I'm giving you both options because it's not that hard to add that second option of shell access it really isn't but we have a lot to talk about today and so I hope you stick with me for a while we got a couple hours at least gonna go as long as I can so keep watching I appreciate you watching check out my website and uh yeah so what do we got going on next?