Small Web September Check-In 4: Troubleshooting

[enchantedsleeper]

It's time for Small Web September Check-In 4!

The loose theme of this check-in is troubleshooting! Have you run into any unexpected problems accomplishing something that you'd like to do with your project? Maybe you have a feature that you want to implement, but have no idea what you'd need to look up in order to do that. Or are there any questions that you have about the small web (maybe terms you find confusing) that you'd like to ask?

Whatever it is, add it to the comments! There's no obligation to take part in the theme, of course - you can just add a progress update for your SWS project, or share anything you want to discuss. The sky's the limit \o/

A bonus discussion-starter (optional, so no pressure to include this!): What was something you didn't know how to do when you started out on your small web project(s) that you've since learned?

(This doesn't have to be during the challenge - it can be anything you've learned while doing small web stuff).

As a reminder, this is the fourth of five ‘check-in’/comment points that will be published during the event – you can check out the schedule and dates for these posts in the event intro post. There’s no cut-off point for leaving comments on these, so you can add something at any time – you also don’t need to comment on every one or do them in order! The themes are a loose guide, but any discussion is welcome.

Also, a heads up that the date of our next check-in will be the 30th September (the last day of the challenge) - so whereas these normally go up on a Sunday/later on Saturday depending on your timezone, the last check-in will go up on Monday or late Sunday. So don't be alarmed if it hasn't arrived at the normal time!

For our last check-in with 'halfway point' goals and discussions, go here: Small Web September Check-In 3: Halfway Point

Comments

[tempural]

I spend 2 days helping someone over email with my deploy to neocities tutorial. So I've updated it with more information that seems to be helpful for beginners. Specifically information about connecting a github account and repository for the first time, which stumped some people and I did skip when I created the page because I already had my account connected. Also added a section about using the same account to work on your website on multiple computers.

I'm also helping my spouse, by making a template (in progress) for their commissions page. I'm thinking maybe have a small table of contents on the side that's in a fixed position, so people can see an overview of the offerings? I honestly need to update my own commissions page too, I haven't added anything to it in 2 years...

One problem I've been having is typing folder structure. For some reason, typing the src like "images/blah.jpg" to reach the folder directly inside the current folder doesn't work for me, I need to include everything before like "/commissions/images/blah.jpg". Maybe it has something to do with my vscodium to github to vercel workflow. Maybe it works for Neocities LOL.

"What was something you didn't know how to do when you started out on your small web project(s) that you've since learned?"

I learned that you can use different sets of variables in the same CSS file for color schemes! Like what I use for my exchanges page:

[data-theme="light"]  {
  --sidebarbg: #dce0e8;
  --sidebartext:#4c4f69;
  --bodybg:#e6e9ef;
  --bodytext:#4d4449;
  --accent:#1e66f5;
  --darkaccent:#001eca;
}

[data-theme="dark"]  {
  --sidebarbg: #11111b;
  --sidebartext:#cdd6f4;
  --bodybg:#1e1e2e;
  --bodytext:#cdd6f4;
  --accent:#f38ba8;
  --darkaccent:#d66666;
}

Instead of making an entire new CSS file for different colors, you can use the same file and change the colors (or even fonts) on the fly with a button that sets the data-theme. This is good for simple websites that don't need entirely new styling. My main website uses different CSS files for different color schemes because I was playing around with sizing and borders that might be more obnoxious to have to do variables for. But I'll keep this in mind fo sho for my other contained sites (like the dafoe shrine and fujofans). Makes making light/dark modes so much easier and easy to implement when you don't have to ctrl+f every color manually lol.

I also learned what SCSS is. Lol. Every single tech related website takes too many words that mean absolutely nothing to me to explain things, then they tell you to read the 5000000 page docs to learn what it actually does. Like literally what the hell is "CSS with superpowers" or an "extension language". Tell me what it does on the front page!!! But BASICALLY SCSS lets you @ import more css file within one css file (I guess instead of calling five different style sheets within your HTML like I am right now with my main page's color themes LOL), and also nest shit within each other. So instead of managing main, and main>header, and main>header>.pee in your CSS, you can stack stuff main{header{.pee}} and put your edits within those curly brackets. That might be useful for SOMETHING but I can't articulate what right now.

Also I learned that < s > lets you strike things through with html.

[larissa]

SCSS was really useful when I made multiple color schemes for my domain in 2016 but when I went back to make a new layout in 2023 variables were a thing in CSS so I just used that instead (and had to... recode my entire CSS page as a result, sob.) It was a fun experiment at the time but I ended up finding it something of a hassle in the end. Seems very useful for things CSS doesn't support though.

Also I did not know you could set themes within CSS now, hmm. I may have to make use of this for when I want to make a dark mode for a future site. Thanks for sharing it!

You can also use <del> to strike things out! It... does the same thing, lol, it's just semantics...

[tempural]

CSS variables are soooo good, if they didn't have that in vanilla CSS right now I'd probably be aboard the SCSS train :P

I learned the CSS variable set for light/dark theme from this page! https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f

And there's another way to do it without any javascript: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

You can even do light/dark modes with just HTML and a meta tag now? https://stackoverflow.com/questions/72922557/light-dark-mode-in-html-without-css-only-html

Def gonna do more research into these lightweight methods so it's easy to recommend them to people who even more beginner level than I am!

[le_gaosaure]

Did you try "./images/blah.jpg"? I think this should work and avoid having to type the whole path =') (The single dot meaning "folder we're currently in", with ".." being "folder directly above the one we're in" in case someone reading this has a use for that!)