Issue with javascript and some considerations about this amazing starter

[ornelasnarciso]

When my javascript is used I don’t have any error on the console. But when is not used I get an error. For example a back to top button. When the button shows on the page, no problem. In a page where I don’t have one, the console gives me an error “Uncaught TypeError: Cannot set properties of null (setting 'onclick')”. Should I worry about this or not really?

Some considerations/improvements about this starter (sorry for the long text):

I said this some time ago and I’ll say it again, this is the best starter for eleventy (probably for any framework), but it could be a little better. Please take this with a grain of salt since is my personal opinion.

Two things that made me brake the starter over and over again. The share button and the reading progress bar. In my opinion these two things fall into bad user experience. Why?

The reading progress bar. Is very distracting/annoying while I’m reading. Every time I enter a website with parallax effects, reading bars and moving parts like this I immediately leave.

The share button. I think I understand what you want to do with it but must users don't. If I want to share a link I just copy it from the browser or use an actual share button to share it to some social media. The button is somehow pointless.

In order for the starter to work properly the code from these two things need to be in the starter or completely, properly, removed. For someone with little experience with JavaScript like me, this becomes a huge problem since is very easy to brake things and not know how to fix them. Trial and error until finally everything works, but still concerned if I somehow created a security flaw.

How to improve this situation for someone with less experience? The first would/could be to remove the reading bar and the share button, and leave everything else as it is. The second, to at least comment where these two things are, where they start and end, and how to remove them without breaking everything. This would make the starter much easier to use.

One more thing. How developers should use their own JavaScript if they are not familiar with the starter.

Maybe a comment like this on rollup.config.js and on the read me file:

Place your own JavaScript on the src folder, then change your rollup.config.js file to look like this:

export default [
{
input: "src/main.js",
output: [
{
file: "js/min.js",
format: "iife",
sourcemap: true,
plugins: [terser()],
},
],
},
{
input: "src/your-javascript .js",
output: [
{
file: "js/your-javascript.min.js",
format: "iife",
sourcemap: true,
plugins: [terser()],
},
],
},
]

Then link your javascript to the head of your project in “_includes → base.njk” like this:

<script async defer src="{{ "/js/your-javascript.min.js" | addHash }}"></script>

Sorry for the long post and hope I helped make this starter better than it already is.

Thank you for your time and for sharing this project. :)