Why Doesn't My CSS Show Up in My Website's Surf Club Thumbnail?

[Nori Jammy]

My website is FRAMMYJAMMY, and shows up on the third page of The Surf Club, but it's thumbnail has no CSS! It's a white shell of itself! I have a feeling this has something to do with how my theme selector applies the colors, but I'm unsure.

I'd rather my site never show up like this in any thumbnails! Half the fun of my site is the colors, I think. If anyone could tell me what to do to change this, without compromising my theme selector and CSS variables, that'd be great!

Here is a screenshot of what my website's thumbnail looks like in The Surf Club:

Here's a screenshot of my website looking proper, with the "default" theme selected:

[Melooon]

That's in interesting one! I don't really know!

The logic of the screenshots is this:

• Launch Chrome
• Open a new 600x500 tab with JavaScript disabled
• Wait for the "domcontentloaded" flag to be set
• Wait 3 seconds to hopefully load all images etc
• Take a screenshot
• Close Chrome

It looks like if you disable JavaScript you get about 90% of the way there; your background image is also very big, so its possible that its not loading within the 3 second window.

I don't know that there's much I can do to fix that side of things; when your trying to automate screenshots on 2000 sites things just go wrong on some of them, particularity when they are media heavy

The SurfClub is due a redesign soon though and maybe we should add the option to set your own image as an alternative to the screenshot.

EDIt: Oh and as for the styling on your tab around the screenshot; it looks for background-image, background-color and color tags on the body; set those and it'll import them

[Nori Jammy]

So, I'm thinking the cause is what I suspected. My themes are loaded dynamically with JavaScript. I like JavaScript. Why do you disable the JavaScript? My background image is quite large (because it is just one of my illustrations), but if it doesn't load, my site should still display the (--background-color) on the body.

The start of my style.css file looks like this:

Code

    --container-color: #22233C;
    --text-color: #f265c8;
    --background-color: #14152A;
    --link-color: #51efef;

I checked my site without JavaScript, and yeah, it's blank, though the background image does appear. Why disable JavaScript? I couldn't even load Neocities without it, it just outputs a blank white page. But you do you, just thinking maybe I need to full proof this now, make my site at least somewhat navigable without JavaScript--though how does anyone do anything on the internet without it? Aren't I using JavaScript as I type this?

[Dan Q]

So, I'm thinking the cause is what I suspected. My themes are loaded dynamically with JavaScript. I like JavaScript. Why do you disable the JavaScript?

Actual Answer

The actual answer: Most scrapers disable JavaScript most of the time, or else dramatically curtail how long it's allowed to run for. It's much safer for them (the last thing you want is for somebody to put a JS-powered cryptominer on their site and trick your scraper into burning the planet to make them a few billionths of a coin), plus faster and cheaper, and most sites don't need JavaScript to at least show something (although, sadly, that number is increasing).

And if you do allow JavaScript to run on a screenshot-grabbing tool... when do you know when to take the screenshot? Do you take it after the JavaScript has been running for 150 milliseconds? 1 second? 10 seconds? How long does it take for it to be "finished"? With some JavaScript, it can be hard to tell. With others, it can be impossible to tell (this is a variant of the unsolveble "halting problem" in computer science).

Further musings

But also... JavaScript is the most-fragile part of any website, and the most-likely to break. There are all kinds of reasons it can break! Adblockers going wrong (or right), firewalls and proxies causing CDN trouble (or CDNs going down!), browser changes, etc. For maximum resilience, write HTML that "does everything" you need, then CSS to make it look great, then JS to add things that you don't mind if they break. Obviously that's not entirely possible! But the tl;dr is that if you do something in JS that you could have done in CSS... you increase the fragility of your site.

For example: I've attached a screenshot of how your site looks to me when I first visit it. The sidebars are missing because my browser is configured, by default, to block all unrecognised third-party JavaScript, on which they depend. I enable third-party JS on sites that seem to need it and that I trust with it. It's like an adblocker/privacy-guard, but turned up to 11! (The Web is really fast for me, let me tell you!) Once I enable it for some of the domains you use for third-party JavaScript, it looks much better.

But you can never be certain how another user's browser will be configured. There's always a gamble! And while with a human you can say something like...

Code

<noscript>Please turn on JavaScript! My site looks much better that way!</noscript>

...that doesn't really work for a robot!

Actual, Actual Answer

But yeah: Melooon's given you the actual, actual answer. Try those suggestions!

[Nori Jammy]

The side bars are optional (they don't show up at all on mobile). They also use a very simple function provided by W3, W3-include--it allows my website to run smoother. Also I didn't realize we were talking about bots! They way it was worded I thought he was manually taking screenshots . . . Anyway, the styling solution is to manually write

Code

<body class="default">

so that the CSS appears regardless (normally I have a JavaScript function that applies the class dynamically). I just did this, hence why there are styles in your screenshot, I'm sure.

Before I broke my homepage into dynamically rendered, separate, HTML files, it was lagging, because there was so much HTML all stacked on top of each other, then styled through CSS to hide and call things and even then there was JavaScript.

JavaScript breaks easily because it is a script. Mine breaks all the time because I only pretend to know what I'm doing. My sidebars also will not load in if you've disabled all animations, neither will the top bar, because they are hidden off screen until the CSS animations play.

What am I trying to say? I think 99% of people who use the internet have JavaScript and animations enabled. I've had IRL people look at my site on various devices, with various browsers, all with their own various personal settings, and never had a problem. Two of them, I know have blockers and are at least relatively tech savvy.

I don't fault anyone who fears the dreaded JavaScript, I was just confused cause I didn't realize we were dealing with a bot, so I understand now.

But yeah: Melooon's given you the actual, actual answer. Try those suggestions!

Now I'm just slightly confused again because:

Code

body {
    font-family: 'Handjet', sans-serif;
    background-color: var(--background-color);
    background-blend-mode: var(--background-blend-mode);
    scrollbar-color: var(--text-color) var(--container-color);
}

p {
    color: var(--text-color);
}

These are just snips, but essentially I've already followed his suggestions. If I change this it will compromise my theme selector. Also this is just pure CSS, the trouble is that I'm using JavaScript to dynamically apply a theme class to the body tag.

Also I use rarebit to host my comics and it'd be a monstrous pain in the ass to rewrite and create an entire new HTML document every time there's a new page etc. I don't know. Everyone uses JavaScript. You can't even watch YouTube without it. More than anything I've learned, by sitting here thinking, is that I need to create fall backs of some kind.

A singular side complaint (I know, irony): I've noticed negative (by every stretch of that word, yes my post here is included) posts on here get more attention than people actually sharing their work (yes I'm talking from experience).

[Dan Q]

I didn't mention earlier, and I should've, but your site's gorgeous, BTW.

It all looks fine to me!

Those CSS vars shouldn't cause a problem: you're overriding them with your actual theme anyway, right? So you've changed from:

1. body loads with missing variables, 2. JS applies a class to the body, 3. class provides the variables

to:

1. body loads with a default class, 2. JS modifies the class on the body, 3. class provides the variables

That looks like a solid change: good defensive coding, because it doesn't assume that the JS will run flawlessly. When it fails (for any reason) you still at least get the default theme.

Here's what I'd do (but I'm a little weird...)

If it were me, I'd go one step further and make the theme selector work without JS (well, everything except saving selectedTheme to localStorage: that would still need JS). But bear in mind that I'm more than a little overkill on progressive enhancement and defensive coding!

I'd define all my themes, and my theme selector, in the CSS. Something like this:

Code

/* Variables for the default theme: */
body {
  --some-variable: #123456;
  --other-variable: #abcdef;
}

/* Variables/overrides for the light theme: */
body:has(#theme-selector option[value="light"]:checked) {
  --some-variable: #234567;
  --other-variable: #bcdefa;
}

/* Variables/overrides for the mono theme: */
body:has(#theme-selector option[value="mono"]:checked) {
  --some-variable: #345678;
  --other-variable: #cdefab;

  .some-override-happens-here {
    font-family: 'Mono Font';
  }
}

/* Variables for other themes... */
/* ... */

This would make switching themes work entirely without JS! CSS provides much better performance and reliability than JS, and that's the kind of thing I go wild over (but again, bear in mind that I'm weird).

The JS would then just say something like this (and would be optional: if the JS broke for any reason, all that would happen would be that theme switches wouldn't be persisted: annoying, but not showstopping):

Code

// Theme selection saving/loading only if localStorage is available:
if (typeof localStorage !== 'undefined') {
  const themeSelector = document.getElementById('theme-selector');

  // When the selected theme changes, update localStorage:
  themeSelector.addEventListener('change', (e)=>localStorage.setItem('selectedTheme', e.target.value));

  // When the page loads, attempt to set the theme based on localStorage:
  const initialTheme = localStorage.getItem('selectedTheme', e.target.value);
  if(initialTheme) themeSelector.dispatchEvent(new Event('change'));
}

That's 100% of the JS you'd need for a CSS-powered theme selector! Tiny, right!

You wouldn't need any of your theme-validation stuff, because anybody who somehow got an invalid value (e.g. if you removed a theme, or if they'd tampered with their localStorage) would fall-back to the default theme, whose variables are just defined on the body.

Anyway, that's how I'd do it. But again, bear in mind: I'm somewhat obsessed with making sites degrade gracefully under the worse possible conditions, and having the best possible front-end performance. Normal people don't do things like what I've suggested above!

Once again: your site's beautiful! Keep up the good work.