When I left Twitter, some people weren't sure about what was changing. Not much. I'm still making projects. Still using my website. The only difference is that I'm mirroriing the updates to Mastodon instead of #Twitter now.
You'll see the same updates in both places.
http://www.humbird0.com/content/show.htm https://aethy.com/@humbird0
I gotta admire #NeoCities, encouraging people to make their own personal websites, with all the quirky creativity that comes with. Custom cursors. GIF pets. Experimental navigation. It warms the heart.
https://mileshouse.neocities.org/
It has me thinking that my website's kind of boring. Nice navigation, but not much to look at... besides the porn.
Sure it's not a generic wordpress white rectangle-fest. But it's no NeoCities either. I miss all the cool-looking websites from 2006.
My Website in 2022 [web.archive.org] CSS Zen Garden [web.archive.org]
It's not just the boring flat colors that are bugging me. It uses a big complicated single-page JavaScript blob. And it really doesn't need it.
The irony is that this is technically a static website. There's no database. Everything is stored in the HTML itself.
Thank god I never fell into the trap of using a JavaScript FrameWork.
So how did my website end up this way?
My original plan was to store everything in a JSON file and let the browser cache everything else, so you only load the parts that changed since the last time you visited, theoretically making the site super fast and efficient.
Then I discovered the WayBack Machine at the #InternetArchive and changed my mind about this. I wanted my website to be easy to archive for #DigitalPreservation, so I started storing all the information in the HTML itself with standard markup instead of using a weird custom JSON file that nobody else understands. That way when you save my site on the Wayback Machine, it can grab everything.
Which means that the main HTML file is pretty huge and every time I add a project, the entire thing needs to get downloaded all over again. And that one file is over a MegaByte! So much for efficient caching.
NSFW I was so proud when I made the HTML data itself display as a nice looking gallery when JavaScript is turned off. It looks nice, but browsing the site this way is kind of janky. No pages, just direct links to files.
NSFW But the experience could be better. All these JavaScript-generated project "pages" and galleries could just be actual HTML files instead. Hell, each project already loads an extra HTML file just to display its "about" info, so that file might as well just be the project's entire page instead.
I wanna play with border-image and decorate all the boxes to look like RPG windows.
I want #PixelArt all over the place!
That's what I've been making all these years. My website should look like it.
Lesbian sex Hmm... ideas.
What should the website's theme be? "Pixels" isn't a theme, it's an art style. But my games tend to have themes. Certain recurring situations, kinks, characters and places. Maybe these cliches can guide the design somehow?
Maybe I could have pixel girls sitting on the website's windows, like Kawa's Window-Sitters.
https://helmet.kafuka.org/windowsitters/
The website's background could be a forest or an RPG map.
Ooh, I REALLY like these warm colors! Dark green and brown with wood textures are a very cozy style.
I'm such a sucker for the whole "book study" personal library aesthetic.
Is it something you see in my porn games? No.
Will I ever afford anything remotely like this? Hell no.
Relevent to my website? ... no. 
But... I can use the colors.
Oh, and I gotta use the Chrono Trigger font!
In fact, maybe I should just use Chrono Trigger's text windows.
But its wood window is too plain for my tastes, and copying is boring anyway, so I'll use those rich colors and make my own chrono-like window. I always preferred the fancy borders of the game's 2nd window style anyway.
There we go! Sure it's a "stone" texture but the rich colors feel like cozy wood.
Hmm... if I nudge this "inner" border down, I could put title text in between them. I'll have to try some CSS experiments to figure out how I can manage this.
Looks like this will be easy. The only quirk is that the window's gradient is drawn behind the borders, so I have to use Photoshop to manually add a gradient to the border images to create the illusion that they're getting affected by the shading.
I'm debating whether or not to double the size of everything and use chunky pixels. If everything on the page looked like this, then it wouldn't look out-of-place to draw my decorations and pixel girls in low resolution too.
I gotta go with my gut on this one. Small resolution looks better to my eyes. One of the most impressive things about #PixelArt is how it can pack so much detail into small spaces.
Also, the #ChronoTrigger in-game font is not Chicago. It has some changes.
But I decided to go with a slightly different #font by LockeZ instead of either of those, because it renders sharper pixels in a web browser and has nice chunky punctuation.
I'll start with almost raw HTML. Just to figure out what information is going to be on the page. After I know what a thing contains, then I can figure out how it looks.
You can invent your own HTML tags and they'll be treated as SPAN tags, it's just XML, but you should use existing HTML tags whenever possible if they have a specific meaning.
https://www.semrush.com/blog/semantic-html5-guide/#html-semantic-tags-for-structure https://matthewjamestaylor.com/custom-tags
Before I get too carried away with adding other things, I should figure out my website's overall color scheme. I usually use 2 colors in multiple shades, and neutral greys.
Gonna try something:
I'll define basic hues. (Greys, Browns, Greens)
Then assign them to color-roles. (text, clickables, foreground, background)
Then apply those roles to individual things in the HTML that fit those roles. (Buttons and Links are both things you click)
They're just variables, but I decide what they mean
Next I'll check if things have enough contrast by temporarily setting all the colors to shades of grey. To test this the only thing I need to change is the hue-palette, the roles update automatically, and everything that uses those roles updates too.
Then I'll adjust the shades until they contrast against each other better, and check the thumbnail to see if links stand out next to text and if text stands out against the backgrounds.
I took screenshots of the old color palette and the new shades of gray. In Photoshop I can overlap the greys on top of the colors and set the blend mode to 'Luminosity' to change the brightness of the colors. Now I have a set of colors that contrast better. I'll just use the eye-dropper to get their color values and paste them into my CSS color-palette file.
And sure enough, everything has better contrast now. I've actually never tried this technique before. Apparently it works.
Well that's interesting. Framesets naturally collapse down to navigation icons. That might actually be desirable. Although I personally think hiding labels is always a bad idea. You could add tooltips, but smart phones don't have those.
Humbird0 Makes NSFW
@humbird0@aethy.comSo I tried out a static-site generator called Zola. It could theoretically re-create my site as separate HTML files. The idea is that I would write all my stuff as MarkDown files and Zola creates folders and HTML based on the templates I give it.
My only gripes with it are that the settings seem kind of limited. It always names the files index.html which makes it hard if I want to let people browse the files in the project folders. And it doesn't do live updates.
I think I'll try out another generator called Hugo. It's very similar but it might give me more options.
But before I jump into any HTML generators, I should figure out what I want that HTML to be.
For example, if I take my old project page, and remove all the CSS, the result is basically a list of what's on that page.
I feel like that old HTML code is kind of bloated, so instead of copying everything I'll rewrite it. Same contents only simpler.
I was gonna go off on this whole tangent about HTML structure, but that's probably boring to everyone who isn't a huge #WebDev nerd like me, so... imma post it anyway! But I'll dump it all into a single long post so you guys can ignore it faster.
"Semantic" HTML is about using HTML tags that represent the information well, so that machines like search engines can understand it. Ironically the trick to writing this way is to pretend a person is viewing this page raw with no CSS. Would they be able to understand it? Is everything labeled and visible?
Don't worry about how ugly it looks. That is 100% the job of CSS. HTML's job is to be raw data. Because when you separate appearance and data, it becomes easy to modify one without needing to modify the other.
CSS Zen Garden [web.archive.org]
That used to be kind of a lie. For over a decade you had to modify the HTML to control what order things appeared. CSS "grid" changed that 10 years ago. Now you can rearrange things on the page using CSS.
Where was I? Oh yeah, making a porno website.
... so let's talk about menus instead!
One of my favorite things in Chrono Trigger is the way the menus slide around in the equip screen. Maybe I'll do something like this with the thumbnails when you hover over them.
They say you should design websites for the smallest device first and then build up from there. So as a silly thought experiment, I thought I'd throw together a rough mock-up in Photoshop of what my website might look like on a Super Nintendo. You'll never find a smart phone smaller than this!
Chrono Trigger loves to cram all its windows right next to each other with no margin except on the outside. And when the player picks between menus, each section is just an unlabeled icon. We can do better.
This looks better to my eyes. Also, I LOVE that soothing "beige cloud" background the game uses.
Okay... so I just spent like, 5 hours creating a whole elaborate system for generating beige looping patterns.
This one's my favorite. I call it "blunt leaves." Hmm... what if I made them green?
Nice! I can't decide if I want to fill the web browser with this dark green leaf pattern or use the soothing beige one. Dark backgrounds are easier on the eyes, but using the neutral beige for the background lets me use the green color for something else.
Then again, what else would I even use the green color for? My current website only needs the secondary color for links and text. Beige might work for links, but it might not contrast against regular white text.
... So what if I reverse the text colors? Beige for normal text and white for links? I have to admit, I like how soothing the beige text looks.
Hmm... that gold "items" icon at the top contrasts very nicely against the green. What if I used that color? It's not as bright as white, but it could work for links if I keep them underlined. The gold also looks good as a title color. In fact, it looks great against both colors. I guess my website has a 3rd color now. (I count beige as a "neutral" tone.)
No wonder that gold color looks so good. It's an "analogous" color, which means it's near both of those other colors on the color-wheel. Therefore it looks good next to both of them.
I plan to organize the CSS by having each file represent individual things on the page, but not the page itself. So any page with a gallery on it will link to the gallery CSS and the thumbnail CSS. But most of the website's appearance is the same everywhere, so most of the details are in the website's global CSS file. The seperate files are mostly just minor adjustments. That's the key using CSS. Keep the design consistent and only load what you need.
Some people might be annoyed by lots of animation, but that's a thing that CSS can check for.
As a rule of thumb, I try to make my website backward compatible with older web browsers instead of just the newest (and expensive) devices. I still have a 10 year old phone kicking around that runs Android 4. The phone still works perfectly, so I'll test it against that.
Ooh nice! Google Chrome for Android 4 can handle CSS Grid. That was the only potential compatibility issue I was worried about. I guess I can just make my site however I want.
