<button type="submit" onclick="shoutout()">YAY!</button>
Doing that is just bad, really really bad. You should never do it. Never ever ever do it. In all honesty and fairness, your code will generally work the moment you do it and everything will be fine. But, the moment you make up your mind to optimize your page... Horrible stories will be told thereafter.
I didn't even need to think too much about this. Just a quick search brought me a stackoverflow thread that highlighted a lot of my reservations for inline js and even more. I'd list them here
- Separation of concerns
- Optimization and minification - I tried extracting the js files and minifying them, but the code never worked at all, which is why I am writing this.
- Inlining does not have any direct performance gains compared to external scripts. However, when you talk about caching and running scripts after you have loaded the page, it begins to make sense why not to do it.
Ok. I think that's all I have off the top of my head. Now, read the full story of how I got to writing this.
So, I met this cool project and liked the idea, so I jumped on it. It is in the fintech space and I have always loved money and fintech and money. I always wanted to know how all these things worked behind the scenes. So you can see how I jumped and accepted this with my two hands wide open when it was presented to me.
class names and
id names were completely obscure and undescriptive. I have a headache thinking about it right now.
I minified it quite alright and some parts of the app were working while others were not working. I unlinked the minified version and linked the 'unminified' version and the page worked fine. I copied and pasted all it's content again and minified one more time and it still did not work again. Something was obviously not right.
I went through the page again and realised that when I minified the file, for some weird reason, every method that is called directly from the HTML as the example above somehow didn't exist anymore (well, it got minified obviously). I checked how many of such exists and I am certain I counted at least 10 before scrolling the page. There are multiple lines this way.
The best thing to do is use event listeners for everything. This way, it wouldn't really matter how I minify it, everything would just work fine. I probably have like 10 pages to rewrite and use event listeners for, but that fine. Imagine you have to do this for an application with several times that amount of pages... Sheesh!!!
I'm already scared.
Wish me luck... I'd definitely be needing a lot of it.
PS: In a totally unrelated topic, please always indent your code properly and remove anything you commented out you no longer need. Take pity on the next dev who would work on it.