STOP Using JavaScript For These 5 Things!

contrary to popular belief JavaScript is not always the best solution sometimes you can just get away with using languages like HTML and CSS wait are HTML and CSS even languages I don't know I don't care so I just came across this article you don't need JavaScript for that and I was kind of Blown Away with some of the features that are built into the browser in HTML and CSS that I didn't know about that can remove JavaScript from the equation completely if used appropriately so let's walk through this article and see these five examples and I want to know for each one did you know you could do that without JavaScript let me me know in the comments below so I think the the thing that's most important in this intro is this idea of the rule of least power and the idea is for each problem that you're trying to solve use the least powerful thing to do it now we can debate about semantics of HTML and CSS being languages programming languages versus JavaScript whatever the reality is HTML and CSS are very capable they're very functional and they can do a lot they're very powerful so let's kind of go through these examples and see what JavaScript can be replaced for now the first thing is a custom toggle switch I've definitely done this before where you have a button you handle you have a click Handler for that button as you click on that it applies a different class where it's toggled or un toogle or whatever the classes are that you might call it and then it maybe moves back and forth from left to right but did you know that you can use a built-in input type of checkbox to do all of that with CSS and not touch JavaScript at all so he walks through a little bit of The Styling in here basically some basic stuff and then he references using a before pseudo selector to add the extra bit to this checkbox so he adds the little circle thing that goes on top of it now what's interesting I didn't know this at all form elements along with images are called replaced content that means they're not really part of HTML but supplied by the browser okay what this means is by default they don't work with before and after pseudo elements I had no idea this existed so to get around that you apply the the appearance of none and this basically tells the BR browser that you're going to customize this yourself this is completely new to me so with that then you can combine this with the checked pseudo selector and be able to attach different classes uh or Styles based on that pseudo selector based on that input being select selected so you can uh set the background of this to Green for example and then the before element you can translate that thing over on the x value which gives you the ability to have this interactive toggle switch all with CSS and no JavaScript so think that's pretty cool you can also add some additional features for uh Focus visible Focus Etc really cool now this next one kind of blew my mind and this is a native Auto suggest so I actually just did a video where I built a custom Global search component on this recent website that I was working on I'll have a link to the video if you want to watch that in depth and every time the user types in it makes an API request to the backend to the database to be able to search and get the relevant records so that is one example of this but if you have something simpler uh data list options that can be defined in just HTML or be queried one time and sit there it has built-in searchability into this so if I start to type notice it shows me the popup of what my options are and then it filters based on my typing this is really cool so the only thing he did was to reference a list inside of the input and then attach that to the data list with the ID of that same thing and it all just works you can go and customize and style from there now I think the one reason this wouldn't work is if you actually need to make the JavaScript API calls to your back end because you can't have all your data listed inside of a data list but you have to figure out that balance for yourself now here's one I had no idea this existed there's a Color Picker just built into HTML or to yeah HTML so on on this just using input type of color again I had no idea existed you can go through and click this and it has drag select it has the ey dropper it's got this select you can do RGB or you can do hsl or hex or whatever and that's a lot of different options for the built-in picker now I could see this being something that you really want to customize yourself so right now you're having to click into it to get the selector maybe you want to have something like this just displayed directly on the screen Maybe not maybe you just need a Color Picker and you just need to give the user access to be able to do these things then you can just add input type of color and you're done now the next one is one I've also used JavaScript 4 and it's basically just toggling things open and close this is something a basic thing I think that you learn in JavaScript early on but it's built in with HTML so using the details tag and then inside of here having a summary tag your summary tag is is what shows in the accordion when it's closed and then when you open it you see the rest of the content so I assume you could just add other paragraphs and buttons and whatever else you want but uh it's pretty simple details summary and then other content and it handles that for you you can also set it with a property of open so that's fine and then uh you can style it however you want want including styling this little marker over here with the uh colon colon marker pseudo selector you can also oh this is cool you can do this from the open perspective too so you can change it to see how that little icon changes that's pretty neat so I definitely didn't know about this so here's a really cool one this is dialogue modals and it's really cool because this is stuff that we've all built from scratch in the past you click it you open it you maintain state of whether or not it's open you handle the outside click you handle the click on the x button all the things for Lay or for uh popovers or whatever you want to call them so the fact that this is built in is pretty neat so you have a dialogue component uh you put whatever you want inside of that dialogue and then you have a close button here which is attached to the form method of dialogue which basically goes back to close that now this is where Killian cheats a little bit and this is to handle a button to actually open this thing so three lines of JavaScript to be able to open this but no additional logic uh JavaScript to be able to close it so you can hit close you can also hit the Escape key and that works as well again extra logic you would have had to do now the one thing that's missing here and he addresses this is the background now is not styled so usually you add like a blurred background or a dark overlay on the background if you scroll down you can find an example where he does that uh let's see so you get a multiple buttons in here you can also style the backdrop I think this is one of the most powerful things there is because now this is a legit pop up and you can change the backdrop filter and you can change the background color all these things but that is pretty sweet to be able to do that right there there so not only uh does he have these five examples he also gives you a few others that you may be interested in so native smooth scrolling this is something I use on all my sites so smooth or scroll Behavior smooth so if you add a link to uh to a page and include the ID inside of that to the part of the page you want to go to it'll scroll right down or if you just do it uh in a button that you link down to the rest of the page it works really nice native carousels with scroll snap snap I've never tried this but like a Netflix type thing I think that's cool uh in view elements position sticky I've done that uh not to not to even name the concept of container query something I haven't played with but is really really cool and powerful and also he takes a look at some of the future masonry layouts which will be super cool and a few others so anyway I thought this was really interesting I'm curious if everyone else knew that you could do all of those things without JavaScript let me know in the comments below uh but I want to give one additional shout out to kill in he created polypane app which is my favorite browser for testing accessibility and for for uh thumbnail previews or uh social card previews for Twitter and Facebook Etc all that stuff's built into the browser it's really awesome you can try it for a week or two I think on the free plan or on the free trial and then you can pay if you're interested but I highly highly recommend checking it out Killian is an amazing developer the site looks great here but also the browser itself is super nice and I use it all the time when I'm developing so go and check it out read the article let him know if you have any additional comments questions let me know if you have any as well hope you enjoyed the video and I'll catch you next time Bo

Channel: James Q Quick

Views: 17,043

Keywords: javascript, css, html, web development, web development fundamentals, css toggle switch, css accordian, css popover, css modal, css color picker

Id: Ef6Pe6Ya8SE

Length: 8min 4sec (484 seconds)

Published: Fri Jan 05 2024