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

[marinehaddock]

• Tag Index Page - Created
• Search added to fics (except it doesn't work)
• Fixed light mode a bit
• Grundo's Cafe - Updated
• Junjou Romantica - Updated
• Mermaid Melody Pichi Pichi Pitch - Updated
• Quantum Devil Saga: Avatar Tuner - Updated
• UuultraC - Updated

Yippee you guessed it how the fuck do i get a functional search with astro
Everything I've tried is only pulling an index from fics for some reason (this one I know the reason but not the others) and if it's gonna be fic only, do I really want it pulling from the body of text?
I'm kinda at my witsend with it tbh - everyone use the tag page instead-

[Edit: It's not only indexing fics, it's only indexing .html files when the standard file for astro is .astro. I can't find how to do anything about this and apparently no one has ever had this problem ever.]

If we're talking not just during this month, when I started this project I didn't know anything. I knew HTML... 4? 3? Which one was used on neopets? I had to learn all the stuff that had changed for HTML5 and learn CSS. Everything on my page I've learned on the fly.

[falkner]

I love the "liveblog" logs! Did you manually copy-paste tweets, or is there a speedy way to convert from a Twitter archive to a web page?

[marinehaddock]

Thank you!! The actual answer is a bit of both; I started off copy-pasting and after a few thousand, I made a way to convert them but I did this in 2022 and over the past couple of years I've heard people saying they're going to make a better version this - I haven't seen any of these programs but they may be out there if you look! My version works with Excel and LibreCalc, results with other macro-friendly spreadsheet programs may vary.

It'll work for any twitter thread long as you can get the archive of the user data! You may want to edit the HTML output to fit your needs, I believe the one I uploaded is a very stripped down version so people can just edit it as they like.

[falkner]

Thank you for the link (and for creating the tool!), I shall look into it!

[axolotls]

Been struggling to make a Javascript script work properly. It's meant to trigger after the DOM has loaded, but before any images do. Defer mostly does that, but not consistently enough... might have a solution soon though, checking if an image has width to see if it broke before the script... Hmmm.

But! I made a page of the Star Trek books I own! Took some troubleshooting and remembering how CSS works, but it's working, woo.

[pebbleinalake]

Oddly, the biggest trouble I've hit this month is with the goal I thought would be the easiest to get done: updating my fanfic archive. As I kept adding more fics, I quickly came to the realization that the current setup for that page really only worked when there were a limited number of stories on there. Which means I'm probably going to have to start from scratch all over again and code a new archive section for the site. (This will make the third time I've had to start over with coding that part of the site, so it's admittedly a little discouraging lol.) Also can't find any way to add a sorting/filtering system on it without using php, and neocities only allows static pages, so I think I'll have to give up on the idea of creating a tag filtering option.

On the lighter side, though, I did make a ton of progress on my other goals for September. I'm actually really happy with a lot of the changes and updates I've gotten done so far.

What was something you didn't know how to do when you started out with on your small web project(s) that you've since learned? - Coding! 😅 Before launching my main site last June, I basically didn't know anything about coding. Back on Toyhouse I could sometimes manipulate bootstrap into making my profile pages look prettier, but that was about it. And even then, I didn't really understand any of what I was doing, I just messed around until things looked how I wanted. I'm kinda proud of how much I've managed to learn in just this past year, and hopefully I'll someday get to the point where I don't have to constantly check W3Schools for info.

[tarlanx]

Sadly I didn't have time to get anything done this week :(

[enchantedsleeper]

Aww - me neither, I only just found time to add my update from last week to the check-in post xD Cheering you on for next week!

[tarlanx]

Thanks! I had a lot going on this week so fandom related activities had to take a backseat.

[sleepyquail]

For something I've learned, I managed to figure out how to add a music player to my Sartauvoir shrine page, but it seems to persist when using the tab links to go to other places on the site so now I need to figure out how to make it not do that.

Also added my OC splash page and the first OC page for my WoL, but back on the struggle bus once again with making the splash page mobile compatible, cos atm it overlaps my damn navbar. So I think mobile compatibility and the music player thing are my main stumbling blocks at this point.

I did manage it for the shrines splash page so I guess I need to just poke that html and see if I can transfer some over. HMM.

EDIT: okay so after spending the whole afternoon in the coding mines, I've now come up with a style for my fic pages, put it into a stylesheet and successfully linked the damn thing to a test fic here! Also decided to do away with the navbar completely in favour of bottom navigation buttons, so I'll be adding those onto my other pages as well at some point, as well as sorting the CSS for all the fics I've got uploaded so far! I also want to add the same sort of < details > box to the bottom for fics with endnotes, so that'll be fun as well!

[tempural]

The fic styling looks super neat, really easy to read! I love the bottom nav bar idea, and the images you used for the buttons. I've been struggling with my own fic page design, but it's really smart to have only a bottom nav so that there's not a bunch of buttons on top competing with the fic AND fic information.

[sleepyquail]

Thank you so much! I'm really pleased with it, and I think I'm gonna actually update my main fics archive page to match because it looks so much cleaner - the buttons are tiny icons from the part of ffxiv I'm obsessed with too heh, gotta keep the theming!!

I definitely recommend the bottom nav, for that at least. I'm really preferring it over the sidebar, even if only cos it's a lot less of a hassle lol.

[lumiosecity]

I have been doing nothing but troubleshooting all week, as it happens. I completely borked the code on my index page because it’s best practice to utilize either flexbox or grid for the layout I wanted, and I was using absolute positioning like a madman. It’s so much and so spagettitastic that I’m best off starting from scratch.

I don’t know how to code at all when I started. And now, I am scrabbling my way through trying to learn!

(This isn’t the resource drop post, but I’m dropping this here anyway: Flexbox Froggy and Grid Garden are excellent little games to learn the ins and outs of flex and grid with.)

[tempural]

Flex and grid are so cool once you discover they exist! I use flexbox for pretty much everything, then grid for image galleries.

[le_gaosaure]

State of the SWSing:
- added two paper garlands tutorials to my "patterns" page
- organized the projects I want to feature on my "other" page (I ended up with 9 types of craft lol I don't have a problem ehem)

Since I went back to coding sites last year after... quite some time away, I'd say the most notable progress I've made is learning more concrete things about accessibility features. Of course I also regularly learn a new property or a new standard, but it's bits and pieces with no unifying theme, while accessibility clearly is a common thread in my learning!

[silvercat17]

I feel like I'm not getting a lot done, but I have done a bunch of stuff for RainbowLists / RainbowFic, plus making an accomplishment tracking sheet that automatically counts everything. Updated several of the prompt lists ("Colors") with links as well, and got more of the into plain text format in Google Drive.

[miscellanium]

kicking my butt to get this gallery page up - it's happening, i think i just find the updating links/captions tedious lol so it's a struggle but the end result will be worth it!

i used to have a comment form on my "about" page, but for some reason it would only work on the http and not the https version so i ended up deleting it :( will have to check out the recs for guestbooks that people have shared in this community.

not sure i've learned anything new in terms of coding yet, but i went ahead and renewed my current host because they gave me a $30 discount (so it ended up being cheaper than something like hostwinds or nearlyfreespeech for my needs) and i got an email saying that automatic payments had been enabled when i hadn't even been given the choice to do that. i immediately disabled it, of course. unless they give me another discount next year i'll still be looking to transfer since that's scammy behavior, lol, and the lesson here is always pay close attention to your email and bank accounts!

[aikoto]

I haven't wrote anything in the last few days since I have been sick, but I did manage to finish the "Why I love her" page for the shrine ^^ (its text has been cross posted over here as well since I think it fits).

I think I'm pretty much recovered, so tonorrow I will focus on researching about Io/Isis for her Persona page.

On troubleshooting... I want to eventually make my site mobile (and huge screens) friendly, so any new page I make I try to make them responsive. But despite how simple they are, it's giving me a headache...!
I think it's because my HTML knowledge is very "fuck around and find out" though haha, idk how to study so for the last 3 years I learnt by inspecting element-ing other people's sites lol

It's not eating me alive tho, the reason of why I want to make them responsive is because I see it as a challenge (with useful repercussions on top) and like to lesrn, so I will just sit down someday and read an actual manual

[tempural]

Your page is so cute! The color schemes and fonts and images all work together so well. It really makes me want to write a shrine to my fav characters too.

re: responsive sites, the thing that made responsive site building soooo easy is learning to use "max-width" instead of "width" LOL. Like, for example, right now your .contain is width: 800px, but if you just wrote it as "max-width:800px" it'll automatically resize for mobile :D

It'll break some things like how your buttons on your banner are chopped up images right now, but you can also fix that by having your banner be a background image for a

, so you can type your links as regular text.

The other thing that helped me a lot with responsive layouts is using "display:flex" for containers, and switching between flex-direction: column for mobile and flex-direction:row for desktop view.

aaa I hope that wasn't too much! I just love how single lines of css can change everything once you learn them.

[aikoto]

Yeah that page was coded in 2022 & probably wont see a responsie update anytime soon (banner being pics is just so I don't have to link another whole font just for its links, Neocities loads slowly so all the miliseconds I can save on loading is good) but nowadays I mostly use max-width and relative units rather than pixels :)

My struggle was actually on flexbox, as I tend to nest lots of flexbox divs inside one another, but the flex direction might be what I was looking for, thanks you!

[kalloway]

At the moment I am tremendously behind on my goal since the month ended up ignoring previous instructions and being incredibly hot and busy. ^^;; I took a few days off this coming week for a different project and will just multi-task, I guess.

When I made my Neocities last year, I was still using the HTML I'd learned in the late-90's/early-00's before quickly realizing that I needed to learn at least a bit of basic CSS or else. ^^;; I managed a few bits, but for my main fanfiction page (link is a list of fandoms only), I had to ask on fancoded because I couldn't even figure out what element I was looking for. (It was flexboxes!)

[tempural]

Nothing wrong with HTML-only sites :P That way they're always readable even if the stylesheet gets lost. But truuuuu a little CSS goes a long way. Flexboxes are great! Your site looks great - really pleasant, neutral, easy to read color scheme with cute flowers and lemons! It's so cool that you've kept your site alive since 2003.

[kalloway]

Oh for sure! I had intended to do HTML-only but the allure of a style sheet and being able to adjust everything at once was too great. ^^;;

Thank you! I started off on Geocities in 2003 (I had other sites back to ~1997, but those are long gone!), moved to a friend's domain, and friend has been MIA with real-life stuff for awhile so I'm building fresh.

[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!)

[sophia_sol]

I had some major life stuff come up this last week so I wasn't able to get much progress made on my website, unfortunately!

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?

pretty much everything hahahaha! some features: how to use a command line, how to use an ftp, how the layers of javascript/css/html work together, the very basics of how to read javascript and make minor changes to a script, how to find useful tools online for figuring out how to do what I want to do, and so much more!

(I already knew the basics of html from my long-ago forum days, and the basics of css from earlier this year when I went down the rabbit hole of creating a custom ao3 skin, but EVERYTHING else was new to me!)

[ghislaine]

Have you run into any unexpected problems accomplishing something that you'd like to do with your project?

My biggest struggle was how to implement a fixed-width div that floated right and would be as long as the overall page. This div was supposed to extend my wallpaper since the wallpaper was designed for a smaller resolution. This div gave me all kinds of problems: when I got one thing to work right, another thing didn't. Eventually, I decided I didn't want a right-hand floating menu, especially as I began exploring websites from "back in the day" and thought about the kind of overall aesthetic I want for my site. I edited the background graphic to extend the width and did away with the divs.

I've finalized how I want my homepage to look (https://porcelain.neocities.org/), and now I'm finally ready to start building my pages.

[linky]

Life has been getting in the way of doing more for the events page, but I have managed to add some things to my site over the past week: the now page (which was long overdue for an update), the stamps page, my Gotchard fanart gallery, and my links out page!

[alaterdate]

Stalled on my manifesto/primer, but it's almost finished. (That's not even actual coding, but I want it done before I finally upload everything.) & that's all I've been focused working on ^_^ Planning to have everything done and uploaded by the last check-in.

When I started making my website I barely knew HTML (the amount of times I had to look up how to make something a link was ridiculous). But now I've learned some CSS and even some JavaScript. I find it all fascinating and fun.

More specifically though I recently learned how to do CSS Grids and I love it a lot! I also learned how to make my own keyframe animations, which are fun. Those are probably my two favorite things right now.

[kirkjerk]

My life is complete chaos but I took a day to finish up my minimals online webpoll project
(I'm coming at this from more of a graybeard UI guy than a fandom fella)

https://kirk.is/polling/ is the result, https://www.youtube.com/watch?v=xBJH-UT6ISw is an intro video showing it off.

[le_gaosaure]

Thank you for sharing this! I bookmarked it when I saw this post a few days ago, thinking "maybe at some point I'll have a use for this" but not imagining it would come so fast! Just used it to check if the players on a TTRPG campaign I'm vaguely assisting with were up to date on some info, it was a super helpful tool to have! Would use again and recommend ^^b

[your_local_grubdog]

I unfortunately haven't gotten much progress done so far since this started, having only ported over a blog post or two :( school's just been sappjng my energy.

That being said, tommorow I should have some free time. I'll try to port over more blog posts then :3

[beetmint]

In terms of the site revamp stuff, I’ve pretty much finished up everything I wanted to do for the summer revamp, which was pretty nice, but the fanfic update is gonna give me some trouble outside of hunting down everything scattered data wise because now I’m unsure of my template. How does this look for the template I’m trying to use?

https://beetmint.neocities.org/fanfics/UFO

I’m considering adding in a light mode feature, but I’m not sure how that would work out because I don’t really have good picks in terms of light colors because most tend to give me eyestrain and I mostly just generated those colors for my template using coolors.co.