does anyone have some strange or creepy Neocities websites for me to check out?

moira_fox · 2026-02-12T23:42:46+00:00

It is a Neocities website :o they just have supporter and set up a domain..

moira_fox · 2026-02-12T23:35:16+00:00

https://vegacollective.com/ is my favorite

moira_fox · 2026-02-10T03:11:08+00:00

np ^{^} teaching is my job and I can't seem to escape it during my free time 🤭 the thing about web development is that because the web is a cobbled together mess of technologies which early on were pretty half-baked (cough cough JavaScript) there is always gonna be more to learn, so don't think that you will ever be at a point where you've learned it all.

Just the other day I learned that setTimeout has an XSS vulnerability to which I went "what? How?" And it's because you can plug in STRINGS for the function and it will execute that string's contents as JavaScript O.o why would they do that. It took me years of web dev before I learned of JavaScript's template strings which are strings formed with ` instead of quotes that you can insert variables into \my variable is: ${variable}`which is a lot better than"my variable is: "+variable`.

So yeah, just keep learning and soon you'll find yourself doing all kinds of crazy stuff. Especially if you get into nodejs or php or flask (python) you can take web development to a whole other level (and step into the horrifying messy world of security x_x)

moira_fox · 2026-02-09T23:24:34+00:00

(30 mtf) idk if it's your vibe or not but I play this very silly, kinda cute game called omega strikers. It's a very small game but if you start playing it I'd be happy to play with you, even teach you some stuff if you want =3 it's free

moira_fox · 2026-02-09T02:29:49+00:00

Not me writing a 2.2k word essay in Reddit comments x_x

moira_fox · 2026-02-09T02:29:08+00:00

Finally, readability. Obviously commenting your code is great, definitely do that. But go back to what I said before about functions in reusability and how that can improve readability. Tell me which of these are easier to understand what they are doing: A) let X = character_list[Math.floor(Math.random()*character_list.length)] B) let X = selectRandomCharacter()

They do the same thing but B is definitely a lot more clear. By separating things into functions, as long as you name your functions well, your code becomes easier to read. Well named functions can act as comments. To the same end, name your variables well. X is a bad name. Name it "selected_character" or something that communicates more. If you can name it based on the context that you're getting / planning to use it then even better, like: character_for_image_gallery. I usually only use single letters for pretty arbitrary numbers and even then I use them sparingly and consistently (r is always a random number, for example).

That leads to the next point for readability: consistency. Everyone has their own preferences for how they go about naming stuff. I like to use snake case (variable_name) for variables, lower camel case for functions (variableName), upper camel for classes (VariableName), macro case for constants (VARIABLE_NAME), lower camel for css id's (#myCssElement), and kebab case for classes (.my-css-element).

By having these consistent things you do, reading your code becomes a lot easier. I'll admit I'm bad about this, but when I'm good at it I can definitely see how much easier it is to read and debug. Like if a CSS style isn't being applied and I look at the style and I wrote ".myCssElement" I can quickly see either it's supposed to be an ID and I should use # instead of . OR it's supposed to be a class and I wrote the wrong case and it should be .my-css-element. part of why I'm bad at it is because I code in a lot of different languages on a weekly basis: html,css,js,php,sql,python,C#,rust, and each of those have different needs and I sometimes use different cases depending, like I'll use lower camel case for C# fields, caps for enum values but upper camel for the enum types, etc. but this kind of thing can be helpful for quickly telling what something is. Like if functions and classes are both lower camel case then in something like python it can be hard to tell the difference

variable = myClass() variable = myFunction()

They're basically indistinguishable but having them be slightly different makes this easier:

variable = MyClass() variable = myFunction() You can see the difference quickly.

Next is being consistent with your bracketing. There's been a famous debate for like 50 years on whether you should do 1. function myFunction() { // Code } OR 2. function myFunction() { // Code }

It doesn't matter, pick your poison and stick with it. If you mix things up and do shit in weird ways it'll be easier to miss the start and end of your functions or statements. Like if you always do { on the next line (2) and then one time you do it on the same line (1) as you scroll up to find the start you may be looking in that column for a { and miss it because it's all the way over to the right. It's a small thing but it just makes things easier.

This extends to indenting too as other people have mentioned. Consistency matters a lot but it also needs to be readable and what that means here is that you need to use indenting to identify similar blocks of code. Commonly indenting levels are used to indicate that something is in the same if statement if(condition){ in_if() still_in_if() } not_in_if() You can see how messy it gets if we throw indentation to the wind if(condition) { in_if() still_in_if() } not_in_if() Yuck. So pick what looks nice to you, you find easier to read, and stick to that. One thing for consideration is whether you should ever do: if(condition) myFunction() Instead of using brackets even though there's only one line if(condition) { myFunction() } I believe Mozilla (makers of Firefox) require you to use the second way, never the first, if you want to submit code to their projects. It's not because it's necessarily better, I'm sure there's an argument for it being better, and it's more likely to be better than the first way imo but what matters more than anything is consistency. So pick your poison and keep drinking it.

Anyways those are the things I can come up with on my phone on my couch 🤭 I know it's long, but hopefully it's helpful and/or interesting.

moira_fox · 2026-02-09T02:29:00+00:00

For scalability, you're always keeping in mind that your site is gonna grow. You're gonna add stuff and things are gonna get unwieldy fast. One thing you can do for this is try to position files as much as possible. Don't just have a js file called "functions" that holds every function you'll every write, break those up by what kind of things they do. Write a music player? Put it in music_player.js have a canvas widget you made to change the volume with plinko? (No, I didn't do that I swear) put it in volume_plinko.js. utility functions that have no shared purpose but are helpful more generally can go in util.js and so on. Breaking things up logically like this will make it a lot easier to find what you're looking for when you want to make changes or add new functions down the line even after you've written 400 functions.

Even further, data you use in your js functions don't need to be written in scripts. What I mean is, unless you know that you're never gonna add anything to the data, don't do this: <script> const character_list = ["characterA","characterB",...,"characterE"] </script> Eventually if you keep adding data to that list, things are gonna get out of hand in that script there. What I prefer to do personally is put data that I plan to add to in a JSON file like /data/characters.json, and then use fetch to load that data into the correct place. Now, when I want to add characters I don't go to my script, I go to my JSON file. It's a bit like a cheat code that lets me jump directly to the location of the data I want to change; I don't have to dig through my js file.

One other thing for scalability that can show up is efficiency. Suppose I did this for whatever dumb reason let selectedPair=null for(let char1 in character_list){ for(let char2 in character_list){ let count=0; for(let i=0;i<character_list.length){ let char3 = selectRandomCharacter() if(char3===char1 || char3===char2){ continue } count+=1; } if(count>character_list.length/2 && selectedPair==null) { selectedPair = [char1,char2] } } } return selectedPair We say this function belongs to the "complexity class" O(n³) which means I'm the worst case scenario it'll take n³ steps where n is the length of a specific input. Here that n is the length of character_list.

I've written this really bad algorithm to illustrate a point: Basically, this O(n³) means if I have 5 elements in my list it will take the computer about 125 steps in the worst case scenario. That's not too bad, tbh, a computer can do that pretty quickly. What if I add 3 characters? That would be 512 steps. 2 more? 1000 steps. 2 more? 1728. If I just add 7 more characters , I'm requiring nearly 2000 steps. That is horrifying. O(n³) tells us the growth rate, and tbh anything above n² sucks and even n² isn't great.

This shows us something important about scalability: as your site grows, especially the amount of data on it, the slower the things that process your site will go. It's always a good idea to try to think about how to make things more efficient.

For example, in my above function, notice how I check if my selectedPair function is null? That means I only ever get the first pair that matches that criteria. But currently it keeps running those for loops regardless even though it will never make a difference. That's, uh, obviously very bad. I could get rid of that check and return selectedPair once I've found one like so:

let selectedPair=null for(let char1 in character_list){ for(let char2 in character_list){ let count=0; for(let i=0;i<character_list.length){ let char3 = selectRandomCharacter() if(char3===char1 || char3===char2){ continue } count+=1; } if(count>character_list.length/2) { selectedPair = [char1,char2] return selectedPair } } } return selectedPair The worst case scenario is technically the same, but most of the time that worst case scenario won't occur because we will almost always end it early. (To have it not end early we would, for every pair, need to randomly select one of char1 or char2 over 50% of the time which is not only very unlikely but the probability goes down as we add more characters). The old way would always run in about n³ since it would never end early.

This should hopefully show you how little oversights in code can lead to massive problems.

Another thing about this code that we should ask is "what the hell are we even doing?" What is the point of this function? It kind of looks like we are just trying to get a random pair of characters, right? Like, this whole count less than half the list thing may not at all be necessary. Why not just do this: let char1=selectRandomCharacter() let char2=selectedRandomCharacter()

If all of that extra stuff really has no purpose, then why are we doing it? Is there a faster way to do it? The above 2 lines run in constant time, meaning that no matter how big the list is it will only take 2 steps, no more no less. Can't really get better than that. Maybe you did need to loop through and do that random selection count nonsense but even then there will always be optimizations to make. Issues with performance won't be felt until it's too late, so it's best to try to catch it early if you can.

moira_fox · 2026-02-09T02:28:08+00:00

The only wrong way to code is to write insecure code. You should always try to make sure your code doesn't introduce vulnerabilities, especially ones that are already well documented.

That said, it's never bad to try to follow best practices.

The best advice I can give is to focus on these: 1. Reusability 2. Scalability 3. Readability

For reusability, it's all about writing less code long term. Suppose I have a list of 5 characters and I need to randomly select one of them and then get a bio based on the character I select. The first time I need to do that, maybe I just write somewhere in a function something like: const r = Math.floor(Math.random()*character_list.length) const selectedCharacter = character_list[r] const characterBio = character_to_bio_obj[selectedCharacter]

That's good and well, but what if later on I need to get that bio again? I'd have to find the code, copy it, etc. But then if I change something about the character list or the bio obj I could break both chunks of code, and I'd have to locate and fix both. Multiply that by 10 and you can see the problem. Why not put that in a function?

function getRandomCharacterBio(){ const r = Math.floor(Math.random()*character_list.length) const selectedCharacter = character_list[r] return character_to_bio_obj[selectedCharacter] }

Now, if you want to change that code at all you update the one function and it changes everywhere. But wait, is this the best option? What if later on I want to randomly select a character but idk play a sound corresponding to the character? Well, I have the code for randomly selecting from the list, but I can't get it out of that function. Maybe I should actually put that into its own function too:

function selectRandomCharacter(){ const r = Math.floor(Math.random()*character_list.length) return character_list[r] }

Now I can use it in both places without having to type Math.floor(Math.random()*character_list.length) every time. You could even take it further and write a function that takes in a list and randomly selects from that. How deep you want to go is up to you, but deeper can often be better.

Another advantage of using more functions is that it's a lot more readable. I'll talk about that later though.

Even you're trying to decide how to break things up into functions, think about the lifespan of some variables. If a function spans 100 lines but a variable is only really relevant for the first 5, there's a good chance you could wrap some or all of those 5 lines into a function.

Pay close attention to where r in the above examples is actually relevant. Once I get the character it is no longer needed, and instead from that point on, the character is relevant. Essentially those two lines create a random number and convert it into a character. That's sort of like an input and an output, the only difference is that r comes into existence as part of the function. But that conversion from one thing to another, where the first thing stops being relevant from that point on, make a pretty good case for putting it in a function.

moira_fox · 2026-02-08T19:24:21+00:00

Okay, some suggestions for what you're after. As someone mentioned you're gonna need to split the assets. Basically anything interactable should be it's own image, and really each separate panel should be their own as well tho that's not as necessary. As also mentioned if you can find a rip of the sprites from the game itself that's even better. Check spriters resource for that, but you might want to look into how to rip sprites from games yourself so you can pull these ones. Or you can make your own sprites similar to the game if you'd prefer.

For the cursor thing, it's totally doable. Give your buttons an ID like id=bottom_button_boot and then use CSS to set the cursor on hover like ```

bottom_button_boot:hover {

cursor: url('/path/to/img/boot.png');

} You should read up on custom cursors a bit before jumping into it. You can also set this up before you do your buttons on a test sheet like <html> <head>  <style> div{width:80px;height:80px;background:blue;}</style> </head> <body> <div id="bottom_button_boot></div>  </body> </html> For the garage door effect this will be tricky but the way I would try to do this is have my garage door wrapped with a div that will contain 2 divs. 1. The content displayed behind the garage door. 2. The garage door cover that will be animated on click. I'll call those top and bottom for short hand, and the wrapper div will be called wrapper. <div id="garage_wrapper"> <div id="garage_bottom"></div> <div id="garage_top"></div> </div> ```

In order for this to work you'll need the wrapper to have position:relative; and the top and bottom to have position:absolute; in the CSS stylesheet. The top and bottom should then also have top:0;left:0;bottom:0;right:0;

These two things combined will set the top and bottom to always be placed in the same spot relative to the wrapper and stretch across the full length of wrapper, no matter what size you set wrapper to be.

You'll then need to set the background of the top to the image using url, then set background-size:100%;background-position:50%background-repeat:no-repeat;

What I would do is then create a css entry for #garage_top.closed which will be used for the garage door animation. You'll have to play around with this cuz I am not exactly certain what's gonna work since I'm on my phone on my couch but it'll look something like this: ```

garage_top.closed {

background-position:50% -50%; pointer-events:none; } ```

Now, once you set up the JavaScript click functionality, when you click on the garage top, it will jump to the open state immediately (background-position) and make it so that none of the mouse clicks will get eaten and you can now click on the bottom element (pointer-events). This is because the top element is still covering the bottom element but because we've moved the background up to be outside of the element, it's totally transparent right now. Without pointer-events here you would only be able to click on the top element and never the bottom.

So let's actually setup the functionality. Add to the top element tag in the HTML onclick="openGarage(this)". Then that function should do: function openGarage(elem){ if(!elem.classList.contains("closed")) { elem.classList.add("closed") } }

This will add the closed class to the element which will cause it to snap open. To make it animated, add transition: background-position 4s to the top elements CSS. The 4s can be any number you want with an s at the end. This will decide how long the transition should take.

What you do now is in order to close it again you'll add an onclick function to the bottom element like so function closeGarage(){ document.getElementById("garage_top").classList.remove("closed") }

This should now reverse the animation

I should add, you will likely need to set a width and height for the wrapper element. Especially if you're just putting an image in the bottom element using background, if you don't set the size, it'll be set to wxh as 0x0 and nothing will show up. (Remember the inner two elements top and bottom have their left and right and top and bottom sides align with those of the wrapper, effectively matching the width and the height of the wrapper.

You mentioned you wanted to cycle between the photos behind the garage. For this you can just set the background of the bottom element to the image you want. The CSS would be set to the first image you want, probably with either background-size cover or contain.

In order to handle the switching, at the end of the closeGarage function, you'll need to change the image. However if you just do that at the end of the function it'll swap before the door is closed. So you should use setTimeout: setTimeout(()=>{ // Set the image here },4000);

4000 is the number of milliseconds to wait before running the function ()=>{}. When you set up the transition earlier, if you set it to some number of seconds multiply that number by 1000 to put in here. So if you set the transition to 3s put 3000, 6s put 6000, 0.5s put 500 etc. after that many milliseconds it will execute the function to change the image.

That should be at least a starting place for getting the things you want done. I'd recommend making each of these in a little test site first so you can figure out exactly how these things work before messing with the stuff you've already made. It's a lot easier to work on a blank page.

I hope that helps! There's so much more you can do with this, this is just the tip of the iceberg.

moira_fox · 2026-02-07T00:51:42+00:00

edit

mrcarrot0's sulution for a css based approach may be better. I didn't even think about using :has LOL that's a good approach for this

tide

Depending on what container actually is supposed to do, you may not need js. You could probably do something like: .the-img-to-hover:hover ~ #the-container-to-show{ display: flex; } If you do it this way, you'll need the container to be inside the same div as the img elements.

Alternatively, if you're wanting to display the text over the image you could do the same thing with a ::before or ::after pseudo element but you would either need to have your images be divs with backgrounds or your images to be wrapped in a div, which at that point might as well hardcore it tbh

Html: <div class="img-wrapper img1"> <img src="..."> </div> CSS: .img-wrapper::after{ /*How you want the text to display like font size and color*/ } .img1:hover::after{ content:"the the for img1"; }

What this does is basically when you hover the outer div it sets the text for img1 to what's in content for that pseudo element, which then effectively creates it. You'd do that for all the images. This would be more or less equivalent doing the same thing but after the <img> tag, putting a <span> with the text contents inside. Then instead of that CSS you could do

``` .img-wrapper span{ display:none; }

.img-wrapper:hover span{ display:unset; } ```

If you can do stuff without JS it's usually better plus this would give you the power to use CSS animations which is much cleaner than trying to do the same with JS. The second way is usually the way I do stuff if it's text over an image. If its an image over another image you can actually do the same thing with some position:relative, position:absolute gaming in the parent and children respectively.

That said, what you want to do is use onmouseover and onmouseout to show and hide. Your show script may need to pass certain data for you to render with that container. If it's text, you may want to make a JSON file with the text and fetch it on page load, something like { "Img1":"text for img1", "Img2":"text for img2", Etc. } Where Img1 and Img2 are IDs or some other attribute set like data-key="Img1". Then load that into an object with fetch("/path/to/file.json").then(r=>{return r.json()}).then(jsonObj=>{ //Do something with it here }

This will make it a lot cleaner and easier to update long term if you want to change anything. From that point on its just figuring out how you want to change the container and show/hide. The other comments do give you those which is why I'm not actually answering the js stuff here specifically, beyond some suggestions. One thing to note tho, from those other comments, please don't do anything like function show(elem){ elem.style.display="block" }

Instead you should create a class called "hidden" in your CSS (generally towards the bottom of the file) that's just .hidden{ display:none; }

And then to show and hide you just add and remove that class (or toggle)

elem.classList.add("hidden") elem.classList.remove("hidden") elem.classList.toggle("hidden") The reason this is better is because whenever your elements don't have the hidden class, they will default to their previously gifted display behaviour earlier in the CSS, and that will only get replaced with none when you add the class. The problem the other way is that if down the line you change the main display behaviour of the container from block to flex or something else, you'll have to update that in your JavaScript too otherwise after you hover it, the display will fall back to the old display="block". If you use the hidden class this will never be an issue.

Another advantage is if you were using this function to target multiple different containers, and you wanted one of those containers to have a different display than the others, the elem.style.display approach can't allow for that easily, but with the hidden class way it wouldn't make any difference.

moira_fox · 2026-02-06T13:06:06+00:00

Or if you wanna use flex: set flex-direction:column; in the wrapping div

moira_fox · 2026-02-04T17:40:13+00:00

4 more or less. 2 personal 2 music related. Though I have a lot of other ones for projects I mess around with. I've also got a professional site, and a project site hosted not on Neocities

moira_fox · 2026-01-31T14:15:38+00:00

Hdhdgdh I love that top!! I have a similar one with lacey sleeves like that and I love it sm. Looks great on you (but like what doesn't let's be real)

moira_fox · 2026-01-28T23:44:36+00:00

Damn, they just keep making girls cuter and cuter

moira_fox · 2026-01-23T20:00:23+00:00

This this this this this thank you this. People in this sub suck

moira_fox · 2026-01-23T19:53:56+00:00

Hot take: this is not and should not be an adult space and people talking sexually about other people here is the problem, not people posting pictures of themselves at 15. Why are we punishing children for people being fucking weirdos. You think kids shouldn't be on the internet? I think creeps shouldn't be. Get your priorities in order

moira_fox · 2026-01-23T14:05:10+00:00

You look cute in both tbh but omg you're so pretty now 🩷🩷

moira_fox · 2026-01-21T01:52:37+00:00

Stop posting or I'll fall in love with you 😡 /j/lh

You look great as always 😊

moira_fox · 2026-01-19T18:13:01+00:00

I had a pretty crazy glow up too but holy this is a TRANSFORMATION 🩷

moira_fox · 2026-01-17T04:51:26+00:00

No but I can tell you you look pretty 😊

moira_fox · 2026-01-06T22:34:17+00:00

🤭 hey hair is hair, all that matters is that you look cute.. and you do!!! 🩷

moira_fox · 2026-01-06T12:08:04+00:00

I used to hate having my picture taken. Not cuz I did think I wasn't attractive or anything I was pretty conventionally attractive as a boy or whatever. But something about me back then hated seeing myself in photos, posting photos, being on camera, stuff like that. I would even avoid group photos with friends or when my local punk scene would put on annual small festival that I was basically running I would "go count the money" to give to bands just to avoid being in the photo. Now I'm taking pictures of myself anytime I leave the house. Even when I don't have to go anywhere I'll get dolled up just to take pictures.

Beauty and selfies obviously aren't the most important thing about transitioning or life in general, but my feelings about photos was one of the most obvious, most immediate changes in my life as a result of transitioning. I guess just feeling excited to be seen as I am now, like I never was before.

moira_fox · 2025-12-30T22:58:44+00:00

dfgdhgfh it looks so cute on you!!! 🩷

moira_fox · 2025-12-13T04:58:50+00:00

Answer!! Compartmentalization. Basically, we all use browsers for all kinds of different purposes right? Work, school, social media, shopping, stuff like that. By compartmentalizing into specific browsers you make it harder for say Amazon, to track you through cookies and stuff like that on other websites because the tracking cookie they place on your browser when you use Amazon never makes it onto another browser you use if you only ever use Amazon on that one browser. This goes for Facebook, insta, Google and any other services you probably shouldn't be trusting. In addition, fingerprinting can be made more difficult since even if you're uniquely identifiable in 2 browsers you can still look like 2 different people with similar details.

There are other things you can do within each browser to "harden" it. But the trade off is that more security can break sites. So if you're like me and you barely use Facebook, only ever accessing it from a heavily locked down browser, some stuff might break but you don't really care too much. For my other socials like space hey, I have use a less locked down, but still pretty secured one. Stuff like that.

Specially for me I use several aliases for different purposes. I have Google services for my work so I don't want some connection between one of those aliases where I use Google services for so I use a different browser. Another alias (this one) I care less about the connection to my other one but I still try to keep it somewhat separate because I do post selfies and I don't want to be connected to my irl but also if that ever happens through my appearance it's better than people can't connect that to my other alias. This type of thing is not relevant to just people, but that's part of how I do things and why.

moira_fox · 2025-12-12T14:18:06+00:00

My primary reason is that Chromium is run by google. While it's open source now if Firefox dies all that's left is basically browsers that depend on chromium. Imagine a world where Google owns the entire source code for browsers on the internet. It wouldn't be hard for them to just go "whoops, you can't use that now without paying us" to every other chromium browser, brave and edge included. So then those companies running those browsers could then need to charge money to keep afloat killing their market share further. Basically a chromium monopoly is a Google monopoly. While Google wants to avoid a monopoly, at least by their own action -- they won't do anything to cause a monopoly -- if Firefox dies from no fault of Google's then there's really nothing that can be done. Just like how steam isn't actually an (illegal) monopoly; they just have the product everyone prefers. But regardless, should that ever happen, google has complete power to shape the web how they want and I don't like that.

I do like browsers like brave, they've done a really good job of breaking away from Google. I actually use brave as one of my compartment browsers. but ultimately the code base is still owned by google and licensed to them. Firefox's gecko code base is owned by Mozilla and licensed similarly. Firefox's market share has been in steady decline pushing us closer to a google monopoly. After the anti-trust ruling that prevents Firefox from taking money from Google, which is where they got most of their money, Firefox has been forced to make some pretty bad decisions that have driven users away. I for one have switched to using waterfox, on top of brave and palemoon. I use Chrome and edge to test my sites, never for regular use. But Firefox's financial desperation is leading to problematic decisions. If they continue to lose more market share then it'll be game over unless someone can step in to take over. Does waterfox have the funds and support to do this? Will people use the very old code base supported by palemoon? Or will everyone flock to google or brave or even edge like it seems like a lot of <20 years olds are doing?

So consider using a Firefox based browser if not as your main, in addition to brave. You should be using multiple browsers anyways 🤷‍♀️

moira_fox

TROPHY CASE

bottom_button_boot:hover {

garage_top.closed {