Neocities tipz and trickz
Neocities is a great host for static web content. "Static" meaning you can't host any Dynamic content, which would be anything with server-side interactivity such as a forum, or anything that would require the server to process and/or store some kind of data from a user of your website.
However, there's still a lot you can do with just JavaScript. Here's some things that would normally be done with server-side coding.
Google Powered Guestbook
My guestbook appears to be serving dynamic content, since you can leave and read comments from people. There are widgets you can use that have allowed people to do this on their static sites since Geocities, but I wanted to make one myself.
I made a Google Form and Sheet, and use them as the submission and storage method. The page takes your form input (username, comment text), then submits a form with that info using them as URL parameters. The form is set up to send its submissions to a google sheet. There is also javascript on the page that loads the sheet as a .csv (comma seperated value), then formats it to display as comments on the page.
One other thing I implemented is having it send you to a "thank you for commenting" page after the comment is made.
It's not perfect, it does take a little while to load the comments, and I haven't implemented any pagination or way to handle the sheet if/when it becomes huge, but it works.
Updateable Sidebar
The sidebar to the left is not written into the .html file I am writing into right now. It's actually a script tag that loads a seperate .js file, which inserts some HTML wherever the script tag is. If I want to add new links to my sidebar, I don't need to update all my pages. I just need to update that .js file, and all my pages will load the updated sidebar.
This one is very easy to do. You just need to place your script tag into each page, into a container element if you need to, write the sidebar's HTML, then put it in the .js file. When you need to update, just edit the .js file.
You can write this HTML in the same way you would normally, with classes/styling/whatever. Document.write() will insert it into the page wherever the script is run.
If you run document.write() after the page is already loaded, it will erase the whole page.
Also, make sure to use grave accents ( ` on the ~ key ) instead of quotes in order to make a multi-line string.
This is the file I use to insert my sidebar links. I also use it to insert the "New" gelmew icons.
CSS: Making pixel-perfect/bitmap fonts not blurry
I love the look of non-anti-aliased fonts a lot, to the point where I use one (Terminus) as my system + default browser font. If a website doesn't have a font set, it will default to Terminus, which is very pleasant.
Unfortunately, the only way to have a aliased font on the web is to use a font that is designed to be pixel-perfect at a single size. Even though Terminus works on my browser locally, for some reason you can't use it with CSS and therefore anyone who visits your site won't see it.
So, instead, you have to use a pixel/bitmap .ttf font, and make sure its font-size is locked to a multiple of its size. You can find a bunch here. Here's one called Pixel Operator, that has to be rendered at a multiple of 16px:
Pixel Operator - 16px
BUT..If you have used a font like this, you might have noticed that this inevitably happens to random blocks of text:
Oh god check out these subpixels
The reason for this is that the text ended up getting positioned on a fraction of a pixel, and is being rendered with sub-pixels. Browsers do this to make regular fonts look better, but it fucks up pixel fonts. I positioned it on a subpixel manually here, but it will happen if you use any non-px unit on your layout.
There are a lot of sources saying that you have to use a CSS property like font-smooth or -webkit-font-smoothing. However, font-smooth is not implemented in any main browser and -webkit-font-smoothing only works on Mac.
I have found 2 solutions. One is to always use px values for EVERYTHING involving positioning. The margin, size, padding, border size, literally anything that can affect any element on the page's position needs to be in pixels. If you use em, %, fr, or any non-px measurement, at least one element on the page will have this problem.
The second solution is hacky as fuck, but it works. If you use the following CSS property on the text element, its text will snap to the nearest pixel.
transform: perspective(0);
I used it on the first example of Pixel Operator above to ensure that it renders correctly.
PROBLEM: This is a transform, which can make your browser work too hard and slow down if you use it too much. Don't use a selector like html * { ... } . Try to only put it on the elements that actually have the text. It doesn't look like its doing much, but its still doing a whole tranformation.