 Being a programmer is pretty easy a lot of people think writing software is difficult. It's really not Writing good software. Well, it's just a little bit harder than just writing software 99% of the software we interact with every day, especially in the business world is just gonna be forms We're going to be filling out forms. That's super simple whether it's you know entering something into a web search Filling out logs for work filling out forms for work doing that is super simple anybody can do it Anybody can be a programmer to be a good programmer takes a little bit more effort and then to be a great programmer Basically your John Carmack and and very few people get to that level But I want to show you today how taking the basic things you do and literally taking a few seconds Sometimes can make it so much easier for the end user and for you and these come down to my own little personal rules Which I have a lot of but these one or two rules here make it easier again for the end user and you and when I'm at Work or anywhere and I'm filling out forms and I see people not doing these things I think wow no effort was put into this whatsoever and basically it comes out to these two rules Limit what the user can input sometimes you just have to give them a text box to fill in something But a lot of times you can give them a list to choose from and that makes it easier for them and for you It makes things more consistent So for example if you're trying to collect someone's name, you don't know what their name is going to be You might just have to give them a plain text box to fill it out But if you're filling out forms for your business and you're having the employees enter their name They should be able to check their name from the list because you should have a list of employees and that prevents inconsistencies for example, my name is Christopher spelt k r i s t o f e r Not the most common way of spelling Chris I've met lots of Chris's spelled their name with a K But very few have the F at the end or just one F some people have two Fs So when I'm filling out my name someone gives me an input box a lot of times I'm just gonna type Chris but sometimes I might type Christopher if someone else has filled out my name lots of times Even though they know my name is Chris of the K They will just type chris because they're not thinking and you want your information That's being logged or put into a database to be consistent You don't want to have to search for the forms that my name is on and not find all the results and try to figure out Why because someone misspelled it or maybe I capitalized wrong Maybe I just hit the wrong key my last name is pretty long and lots of times when I'm typing fast I'll leave out a letter making it selectable from a list prevents that from happening also having a list We come to rule number two you should try to always but especially if your list starts getting long My rule is more than 20 or so items in the list. The list should be searchable This is super easy to do and you can just have a simple search a search that Searches for more than one item you know a string or you can have a full fuzzy search So I'm gonna give you a bunch of examples today and a lot of it isn't even really programming We're gonna be looking at creating the interface in with very very basic HTML as minimal as it can get I'm not working on how the program can look which is also important I'm talking about functionality day We're gonna show you how just taking an input and then making things searchable and list forms so much easier on you And the end user. Let's have a look. Okay the most basic example an input box The user can click on this box and type stuff. Let's look at the code or code if you want to call it code It's HTML. That's it. I mean obviously if you're gonna submit the form you need a little more information But not much you need a form a submit button and give this an ID of some sort or name So yeah, but again if I'm filling this out. Did I type in Chris? Did I type in Chris lowercase? Did someone else fill it out and spell my name like this? There could be a lot of options and and you want to avoid that when possible So the next option is a data list. So it's a list that they can choose from let's look at that So basically just it's a select I say it's a data list. This is a select list So we have select and then we have all the options here. Okay Another rule of mine that I didn't mention earlier is make your list alphabetized. They should be alphanumeric So it's very simple. So that that's the example of a drop-down list But things aren't appetizing and I can't believe how many times I see this. We're literally you just Have to list it alphabetically. You should be able to dump it that way with a script So here's that same list about 200 names or so alphabetical orders so now They can choose one list, but also the basic select list in HTML is Somewhat searchable so like I can hit TR and it will jump to well There are no TR names in here, but I can type in T and we'll jump to T names I can type in ST it will jump to the first ST name and then I can scroll through those Even without the list open if I'm clicked in here I can type in P and it jumps to the P's or I can type in PA you and there we go So we can go through the list and you know, you're gonna get a consistent name with that this option has been around forever again, it's just a select list with options and This will work way back in browsers going back 20 years, you know the next option is Written basically the same but is slightly different. It's a data list. It's a little bit newer So again, we'll look at the code here So I have an input box, but I give it a list I say look at the list with the ID of my list or whatever you want to call it and then instead of select You just say data list and give it that ID and then I have the same list as options So how is this different than just a select list? Well now when I click click into this box here, I can do a drop down here, which I can scroll through I still have them alphabetized But now it has it isn't a full fuzzy search, but it's a little more so the problem before is if I wanted to Find a name in here. Let's say I click in here and I type in j o n h It brings me to John's and then Johnson and then Johnson and then Johnson So there's a few of them But if I want some of the first name of John, I can't jump to them unless I know their last name and maybe you can't remember someone's last name you're filling out a form for them where with the Datalist in here. I can type in j o h. Oh, sorry. I clicked on the wrong Tab here j o h n and you can see I have Foster John Fowler John John's Ernst So it's not a full fuzzy search, but it's looking for anything with that match in it So that is a bit better than actually for me. I think it's a lot better than a Select list although it is a lot newer and some older browsers aren't going to support it Safari which is always behind all of the browsers might have issues with it And then the only other problem I have with this is when I do it on my phone This drop-down list sometimes covers up my keyboard So and I've tried it with two different browsers and different keyboards So hopefully that's an issue that gets fixed you but if I click on it It covers up the keyboard and then like if I click on it again It goes behind the keyboard so it's not the other world, but that might confuse some end users But again, this is not so much about HTML. I'm just using this as an example of Improving on searches. So here's another option when it comes to data input. We have a Input let's look at the code for this. It's just an input, but you can give different types You can give email type. You can give phone numbers. There's a lot of different types that you can do with HTML 5 and One of them is number. So now if I come in here, I can use this This little tab to go up and down. I can type in numbers and here I'm in Brave browser, which is a Chrome based browser But if I try to type in other characters, it doesn't let me but Be aware that if you're in another browser such as here, we are at the same code in Firefox It does let me input characters, so you would have to do some sort of check on that to make sure the input is valid Also on a mobile device This is nice because when you click on this when it brings up your keyboard It's going to bring up the number pad rather than the letters So it's really easy to just type in a number another option if you're inputting numbers would be something like a slider like this Basic example doesn't show what number you've selected. So you obviously would want to add some code to that But let's look at the code. So we just say input here. We're saying a range type And we can give a max and a min which is nice because now I can limit what numbers they pick I have the default value I can set to whatever number I want in the range I don't want them to pick more than a hundred or less than one and you can also put in Intervals so if you want to go every five or every ten or even a fraction you can do that So that's that's an option but it takes a little more effort because you're gonna have to put in You know the output because they have to know what number they're selecting and it's kind of feels intuitive If you're working with like volume control or something that in general I wouldn't use this But it is an option for me lots of times. I'll do I'll just do a drop-down list So this is just a select list again Let's look at the code select option and here I Statically put in numbers, but you can use Java script or even server-side script to generate this so you can change numbers at will And that will limit the range they can pick zero through one But you can also do something like this where I have leader characters Maybe you want to always be a three-digit character. So it has those leader zero leader zeros. So Yeah limiting what they can input and again Benefit of this so without the leader zero I can type in eight and it jumps to eight or I can do eight again It will jump down to 80 and then I can go through so you can still jump down the list They can type a little bit and then use the arrows With this with the leader zeros if I hit eight. Yeah, it doesn't work because of the leader zeros So that's something to think about all depending on your use case. Let's look at one last example here so this last example here is Basically the same thing but again using the data list box So now I have the leader zeros But I can type in eight and it brings up every number that has the eight whether it begins with it It's in the middle or the end I can hit eight again and now I have 88 So I can type what I'm looking for but it also narrows down the list and I can select limiting what they can put in there So yeah, that is some examples of just the little bit of effort again I mean look at this we go from an input box to a drop-down list to a sorting just by just by Adding that list and again you already should have a list of employees It's basically a copy and pasting it and putting the option tags around it which could again I statically did it, but if you're dumbing it out of a database very easy to code that out And then to make it even more searchable is again just to use that Data list instead of the select list Again relatively new might have some issues Use whatever again. This is not so much about the HTML but examples of how you can improve your code So let's do it again Let's jump to our terminal here and work with some shell scripts So again if I wanted to get the user name for example in a shell script and bash here I can say read name and of course they type whatever and it puts that into a variable called name So they can echo out name Obviously you would want to ask them for something so I would say read dash dash prompt actually sorry dash p and I can say Enter your name and then it says enter your name and I can type in Chris and you can see even there I typed it fast and the R came up capital Which you wouldn't want but now I can echo out that variable So that's how easy it is to get user input in the shell Let's improve upon that if I cat out here. I have a file called name dot list, which is that same list We were looking at in the web browser Over 200 names or about 200 names Again right now you can see it's not Kate. It's not a alphabetized all I have to do is pipe that into sort Oh, sorry guys spell things right sort and now it's alphabetized There's no reason to not have your list in an alphanumeric format. That's how easy it is Okay, so how do you get the user input? How do you make it searchable for this list? I mean that's a pretty long you can't use like a case input for that You know so a tool that's not a core tool, but is cross-platform. You can get for Windows Mac Linux You can get it for arm. It's it's easy to get it on all your modern systems is Basically fcf which I've talked about a lot in the past. It's a fuzzy finder You pipe any any input to it and it makes it a searchable list So now but it's not just This is way better than what we were looking at in the web browser with even the data list because this is a true fuzzy finder So I can type in again John and we get John John John John's Johnson this John Johnson Johnson But I even got Jonathan because it matches some of the letters because it's a true fuzzy finder again Once I choose this I hit enter and it outputs name. So all I have to do is pipe that into a variable So basically I would take it Like this I would say name equals now. I hit it again. I can type in John I can choose one of these John's and now if I echo out dollar sign name. I've got that name I got the first name last name How I expect it to be But one more thing if we're doing this you realize it's Obviously we're picking a name, but what are we picking am I picking my name? Am I picking? co-workers name so what you can do is with this dash dash prompt and We can just say Enter your name And now down at the bottom here. You can see it says enter your name We have 206 names to choose from I can see pet pat and you can see I have patricia I'm gonna choose patricia or maybe I can choose Peterson again. It's it's like maybe you're thinking Maybe I can do BTH So I'm doing You know the B for brown and then Thomas so it's it's a true fuzzy find this is way better than any other search And there are JavaScript libraries out there for doing the sort of thing, but it's not as simple as this fuzzy finder I choose the name and then again That's in the variable for name and I can echo that out We can do the same things for numbers and there's probably a few ways to do this if I go echo And I put in parentheses here zero dot dot 100. It's going to echo out Zero through 100 What I can do now and there's probably a better way to do this But just off the top of my head I can just say make each space with TR I can turn them into new line characters And then again, I can just pipe that into Fcf and now I can type in eight and I have all these numbers I can hit eight again, and I've selected 88 and 88 is the output and again. We can give it that dash dash prompt and I can say Enter a number so if you're getting like the quantity or something whatever you're gonna ask them for You can do that and Of course that would snows. Oh, what did I do wrong? Oh, I hit up that get arrow again There we go And now I can enter a number and it's limiting me to this list somewhat I would do have to like if I type in some number that's not in there I hit enter it's going to output nothing so you would have to do an error check to make sure that the answer isn't blank But for them that would just be one more line of code you would just say something like if You know, whatever variable equals blank or null or whatever you want to do Exit or re-ask the same question But we have this again. I can type in a number I'm limited to the range and if I wanted to have those leader zeros all you have to do is add in however Many leader zeros I want if I want to make sure it's a three digit number I put in three zeros here or whatever number I want to start at So I can I can start at ten maybe whatever number it is They can't select less than ten so now if I go You know to the top of the list here. It says ten so I can't pick Just one I have to pick at least ten to a hundred. Anyway, those are examples again Any language you're programming in these things should be simple again basic rules Don't let them whenever you can enter whatever they want limit it to a list make that list Alphabetical alphanumeric if it there's numbers in there Make it searchable the more searchable it is the better So again, I have over two orange names in this it only takes a couple of characters So let's say I type in t a look array the list has narrowed down to what 15 names in here from 200 Usually three characters is enough to get your list down to something easily selectable So that's that and yeah, so limit the user input make it a list make it searchable whenever possible Thanks for watching this video. I hope you enjoyed it. I hope you start implementing this because there's so many times In my work life or going to doctor's offices or just filling out forms places where it's like Why is this not a searchable list? It's like it almost makes me just want to to bang on the keyboard and put in Garbage it's kind of like when someone hands me a paper form to fill out It's like I'm gonna write a sloppily as I can because I should be able to fill this out digitally Because either you're going to enter into a computer Which means you're just wasting somebody else's time because you're having me fill this out and then someone inputting into a computer Or you're not really going to use this paperwork at all. So Just Follow these rules Chris says that's what I say do it for me if not for you if not for your end user Do it for me films by chris.com. That's chris the cares link in the description Please visit there. Please support me patreon.com. There's links in the description there also at my website Which again is Films by chris.com Chris with a k when you're there you can search through my videos here There's a few sections you can see software. I've written games I've created and you can also support me with libre prey paypal or patreon If you can't support me financially like share subscribe comment all those things help me out I hope that you have a great day