Helpful Shorthand Methods

[00:00:00]
>> So now I'm going to open my, we're going to follow now step by step what we have here. And we're going to start with initializing the project. And this is something that we won't use, but I wanna show you what this is. One of the fears that we have is, or one of the challenges that we sometimes have when we are working with vanilla JS, is that it's too verbose.

[00:00:26]
document.querySelector, document.getElementById. Well, JavaScript is a very flexible language, very flexible. So this code, if you copy and paste this code here, it's just one example of how you can make your code less verbose if you want to. So for example, if you don't wanna type querySelector all the time, okay, you can put this, this is like an alias.

[00:00:59]
So then, instead of document.QuerySelector, I can use the dollar sign, that by the way, is related to jQuery. jQuery was using the dollar sign for doing something very similar to this. And you can reduce verbosity easily with JavaScript. So for example, what else do we have here? You don't like eventListener, for example, instead of nav.addEventListener.onClick, you can say on, and how?

[00:01:32]
You change the prototype of HTMLElement, and you can use call to get all the arguments or pull the arguments manually. It's just a hack that I wanna show you that if you feel like some parts of vanilla JavaScript are too verbose, just create a quick alias sort of wrapper on top of it.

[00:01:53]
And even with prototype, you can actually change directly, or you can add aliases to any object, such as an HTMLElement. This is just a global variable. And we can use in JavaScript, you can start or use the dollar sign as an identifier. And the same happens with underscore, you can also use underscore, so only underscore and dollar sign as symbols.

[00:02:20]
So then you can create the variable with a name underscore. So instead of a variable, you can use a function or an object, you can create an object with some functions that you use a lot. For example, domready, and you receive an event. And you say that this is, I'm doing a mix here of syntaxes, something like this, like so.

[00:02:50]
And then here you say, okay, domready is going to be window.addEventListener. So then you use domready, and you pass a function. I'm doing a mix here, that's the syntax. So then domready equals to, I'm just playing with this, okay? But I'm showing you that, yeah, you're creating your own library if you do that.

[00:03:13]
And that's, we are going back to that slide where I show you a tweet. Saying that maybe it's a good idea to, at one point, when you are doing vanilla JS, creating your own library. Of course, when we are doing things like this, we are reducing, let's say, Having clean code for others to read, things like that.

[00:03:40]
But hey, we have ChatGPT now, I guess ChatGPT can make the conversion pretty quickly. But we explain ChatGPT, okay, this is my library, give me full completely vanilla JS code, and he will do that for us. And this is just really quickly to show you how JavaScript is really flexible, to actually change the language completely if we don't like some things.

[00:04:01]
We won't be using this today, we will stay with verbose vanilla JS.