Html5-boilerplate: File name optimization, add "defer", console greeting to confirm connectivity

[klutchdev]

I'm submitting a ...

• [ ] bug report
• [x] feature request
• [ ] other (Please do not submit support requests here (below))

---

Hey Everyone!!!

I LOVE this tool, it's amazing for devs such as myself that write mostly in Vanilla Js, especially when frameworks are overkill for the task at hand.
My feature request(s) are simple- I'd be happy to help implement them if any of it is deemed worthy!

1. Change the "main.js" file name to "app.js"

_Vs Code and many other IDEs/code editors default to "app.js" as the "default" Javascript file_

2. Add "defer" to the source Js file script tag:

<script defer src="app.js"></script>

_This allows all DOM elements to load before executing any Js scripts_

3. Add 1 line of code to main.js (_or app.js, if its changed_):

console.log(' √ Js file connected! Thanks for using HTML5 Boilerplate 🔥 ');

_This is just a neat way of confirming that our HTML and Js files are good to go!_

4. Change the "main.css" file name to "style.css"

<link rel="stylesheet" href="style.css">

_Vs Code and many other IDEs/code editors default to "style.css" as the "default" css file import_

[klutchdev]

I can be reached via [email protected] in addition to github.
Thanks!!!

[coliff]

1. I think I'd be ok with changing the name from main.js to app.js, but don't mind either way.
2. Defer can be a great help for optimizing pagespeed, but it's not always a good idea as the JS may be needed to render the page. I think it'd be better to not add defer to the template.
3. I'm not sure if this is needed really. It's probably better for devs to setup tests themselves rather than leaving code in the script which could go to production.
4. I think this could be a good idea. Agree that the most common filename for a site's CSS is 'style.css'

[vltansky]

Agree about 1 and 4. I always use app.js and style.css in my projects. Agree with @coliff about 3. Console log can be deployed to production by mistake.

[roblarsen]

History time: #1116

I will point out we do have a whole separate project that is literally called main.css so it'd be a little funny to change the name downstream. I'm not entirely against it, but it might be a little weird.

[klutchdev]

Thanks everyone. Let me know what you want to do about #1 and #4 (if it's not too weird, just trying to keep things current)

[klutchdev]

Should I close this?

[roblarsen]

I'll follow up when I have time. So just let it sit for now. I'm not sold on any of these charges, but I also want to properly address the suggestions.

[klutchdev]

Oh ok! No problem , I just don't want to cause anyone a hard time. No rush on this end at all, I just didn't want to have the issues tab glaring with something I opened and not be proactive about it. Cheers! 🔥

[roblarsen]

No worries at all. Sometimes this stuff moves quickly, other times not so much.

[klutchdev]

I don't plan on doing anything for a very long time except advance my skills and continue to tutor a couple students!!! I had no idea you have a couple books out, I'll be scooping those up ASAP. Also, It's great to see a fellow dev from Mass... I'm by Springfield, but I have played a lot of shows out that way. Anything you need, just gimme a shout no rush for any reason, nothing is broken haha

[roblarsen]

@vltansky it might be cool to add the file names as an option to the create script.

Spoiler: I'm leaning towards app.js, but am hesitant about changing the name of main.css, just because of the project that hosts it. I guess that's a discussion point. Does it matter if the upstream project has a different name? I think styles.css is a better name, for sure. Maybe I'll tweet about it. There'd be no problems with having main.css as a dependency (as a project) and then building it with whatever name we want. We could even add that as an option to the main.css project. hrm. I'll try to move the ball on this over the weekend.

🤔

[klutchdev]

Sounds good. This is my first feature request, I appreciate it

[coliff]

I vote in favour of using the style.css file name. A user's final compiled CSS will include our 'main.css', but it would also include their own custom styles and maybe styles from other plugins etc - so the final CSS in their project isn't just 'main.css'.

[klutchdev]

aye 👍🏻

[mohamedmehdigara]

Hi @klutchdev. I have forked this repository and added changes like you requested. Now what should I do?

[klutchdev]

oh!! uhhh, I think it's up to @roblarsen ? He was going to think about some changes @coliff, @vltansky, and myself talked about so I'd say just hang tight

[roblarsen]

closed via #2341 and #2342 Thanks for the suggestion @klutchdev !

[klutchdev]

welcome