#Inspiration
#
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
🔗 CSS Zen Garden
# 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.
# 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.
# 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.
#
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 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 various 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.
# So 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.
# https://www.youtube.com/watch?v=xMv10E561WQ
# 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.
# That used to be kind of a lie. For 15 years you had to modify the HTML to control what order things appeared. CSS “grid” changed that a few 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.
# I decided to switch to a vector font after all, because the pixel font’s native size was too small to read comfortably, and increasing the size made it blurry. At that point I’m better off using a vector font.
# I’m having tons of fun re-creating my fancy thumbnails with the new style, but… it’s 5:00 in the morning. Maaaaybe I should consider eating or sleeping.
# So I’m figuring out the navigation links at the top of the website, and trying to figure out if I could seamlessly turn them into a side-bar when the website gets wide enough.
# After messing around with Flexbox and CSS Grid for awhile, I remembered something. Floats! They make text flow around pictures. But since anything that’s “inline” will flow like text, I could make the navigation links “flow” around the entire website.
# … I can’t decide if this is really clever or really stupid.
#
I’m leaning toward… “stupid”
The website’s width changes instantly when you tilt your phone to landscape mode, so I don’t actually need a transition. I could just use a breakpoint. Besides that would give me more control over the appearance.
# But I also have another idea…
# I could break the navigation into 2 lists and have the “extra” list appear on wide screens. But that means phones would see fewer links for the sake of a cleaner layout.
# Nothing motivates me like adjusting things. Writing the CSS for this website is getting dangerously addicting. I’ve stayed up til 5:00 in the morning more than once now.
#
God damn I love animation!
Don’t worry, the sidebar also respects the user’s “reduced-motion” preference, so all the fancy animation is optional. That even includes the way the backgrounds slide over each other.
# Even with a page-generator, I don’t want it to just paste the navigation onto every single page. If I change the navigation I’d have to replace ALL the pages and reupload them. Instead I think I’ll just put iframes on every page. Links inside them should be able to change the parent page by using target="_top"
# Now the question is whether I can make them look seamless. Can iframes have transparent backgrounds? I don’t remember.
# Apparently they’re already transparent by default… but only IF their page loads successfully. Failing to load a page displays a browser-generated error page with a solid color.
# Hmm… it doesn’t look like there’s any way for CSS to hide iframes that fail. I thought I could be clever and detect a default <span> inside the iframe tags, but that only displays on VERY OLD browsers that don’t support iframes. And I don’t want to rely on JavaScript.
#
But maybe there’s a design solution.
Many websites have banners, colored rectangles stretching across the entire page.
A failed iframe looks like a solid background color with error text in the middle.
But what if you could not see the middle?
A narrow iframe with no scrolling, would just show the solid color at the top.
Just like a banner.
I can disguise failed iframes as banners!
# It seems to be a lot simpler to lay out 2 iframes than to have the actual header and navigation links all on the same page. Then again, maybe that’s just because this is my 2nd time doing this and the technique is still fresh in my mind?
# Hmm… somehow the new website looks “flat” compared to the old one. The old website’s blurry background helps the stuff in the foreground stand-out but it also creates a sense of depth.
# Sure enough, adding a slight blur to the new website’s background makes the buttons and things “pop” forward just a bit.
# See that space on the right? That gives touchscreen users a spot to drag their thumb to scroll the page. You need that if other parts of the page can scroll too, such as textboxes with stories in them.
# Now to figure out how the project pages will look. Games, pictures, tutorials, stories. Some of these can share the same layout, but some are different. When I’m trying to come up with ideas, messing around with tools tends to distract me. I think better with pencil and paper.
# I was looking at a picture of my old website from 2012. This old 2-panel layout might not be practical on smart phones, but I always liked the way it looked. Maybe I’ll try something like this again for large screens.
# These ugly sketches are the most important work I’ve done on this site. They’re plans. The best tools in the world are useless if you don’t know what you’re trying to make.
# I think I have a good idea of what I want to do now. Putting information underneath a picture tends to look nicer, but a text story should have the information at the top so you can scroll the page normally to see the entire story. Tutorials would work in a similar way.
# The website I currently have online puts the information on the side when possible, but that leaves this big gap on the side when you’re reading. I want to avoid that.
# Alright, I did the basic layout for a “visual” project. I still need to add styles to some of the informaiton itself like the controls, pairings, updates, license, etc…
# It turns out that CSS Grid isn’t quite the silver bullet I expected. I still had to wrap the information to create these 3 parts. But the rest was all CSS.
# The reason why those Download icons on my site are so far apart is because I set a minimum touch-size for all the buttons so you can easily tap them on a touch-screen. There’s a rule-of-thumb that buttons on a touch-screen should be at least 0.4" inches in size to make it easy to tap. It looks slightly bloated on the screen, but I tested this on my phone and it seems to be true. I definitely wouldn’t want to go smaller.
# https://adrianroselli.com/2019/06/target-size-and-2-5-5.html
# Some of my projects have a lot of downloads. There’s no guarantee that all of them will comfortably fit inside a thumbnail. But that’s not a problem. Just display one, and reveal the rest when you hover over it.
# Maybe I should animate the rest of them flying out to the right, from the single icon.
# I’ve sorted out the game controls, pairings, and license.
# I even figured out a CSS trick to recolor the background images for the license permissions. The trick is to give something multiple background images. Set those images to be a gradient and a grayscale image. Then set the “background-blend-mode” so that the gradient has “color” blending and the grayscale image can be “normal”. The gradient overlaps the grayscale image, which means the color of the gradient gets applied to the image behind it.
# Text projects don’t give you anything visual to look at, so I display the thumbnail image next to the main information. Of course, on smaller screens showing it is not a priority. But on wide screens there’s room to fit things next to each other, so I added a few CSS breakpoints. And if you want to test a website on REALLY tiny screens, just open Chrome’s “Reading List” sidebar and shrink the window. It will probably look ugly, but the important thing is that it’s still useable.
# Hmm… my thumbnail gallery needs a background. I can’t just have them floating against nothing.
# This dark emerald looks really nice, but it doesn’t match anything.
# I just can’t ignore it. The new website STILL looks flat. There’s just something excellent about the old website’s background. It’s not just blurry but also large, so it contrasts and makes everything stand out. There’s a reason why I have kept using it for the past few versions of my website for over a decade.
# If this background is so great, where did it come from? Well that’s kind of a funny story. I saw some awesome artwork, but I didn’t want to steal it, so I kinda… “derived” it into something super abstract.
# But part of me wants to use pixel-art everywhere. As a test let’s try a background from Final Fantasy 6. Normally you want to avoid ever blurring pixel-art, but as a background it does create the right contrast. But the blurry pixels look tacky.
# If I’m changing the background anyway, maybe I can just use the old one for the thumbnails.
# Let’s try adapting the old background to the new color scheme. Hmm… the Chrono Trigger beige colors makes the whisp pattern look like a sea of cum. I don’t like it. Brown and green are still a better color combination.
# Pure green looks too… artificial. But I want to avoid adding yellow to the greens because that only looks good on plants.
# So let’s shift the colors in the other direction toward blue. Yes! This looks very nice against the reddish-browns. I think this finally looks like an improvement over the old site. It’s hard to compete against myself. That guy had a 10 year head-start!
# So I had this whole clever thing going with the comic pages displaying inside an iframe, autosizing the images to fit, with anchor links to scroll-advance the page by just clicking on them. But I figured I still needed to add proper navigation links to each page.
# But then I realized something obvious. Just put everything on the SAME PAGE. You don’t need navigation links if you can just scroll. After all, if it works for text stories it will work for comics. This isn’t a “text” layout, it’s a “scrolling” layout.
# It would be different if the comics had hundreds of pages.
# I do use iframes for RSS feeds. I did that on my old website too. Originally it was because I was storing all the update announcements on Twitter and my old website was pulling them in and displaying them. Later I switched to using RSS Feeds so I wasn’t relying on any external websites that might go down later. An iframe gives me a lot of flexibility. I tend to add updates independently from the projects themselves.
# Another reason why I store my project updates as RSS feeds is because it’s a standard format. Anything can read it. Not just my website. There’s also a clever trick you can use to make a browser display a feed as a webpage instead of a bunch of text. Use an XSLT stylesheet. It’s basically a real-time templating language that everybody has forgotten about.
# ❓ https://www.tutorialspoint.com/xslt/xslt_overview.htm
# This new blog design for my site is looking classy. Same old pages with a new coat of paint.
# Those Hash marks are anchor links. You can right-click them to get a link that will jump to that exact spot on the page. My old site has them too. Normally each one is only visible when you hover over a heading or paragraph. I got the idea from GitHub. Later on I’ll change these to use little “linked chain” icons.
# I’m also starting to design CSS for my old tutorials. I have intentionally tried to keep their HTML simple over the years in order to make redesigns like this easier. But I still occassionally threw in a few unique tags here and there. For now I’ll just make them bright red and figure out how I want them to look later.
# One of the reasons I want to try a static site generator is so I can write these things easily using MarkDown and the generator will convert it into HTML for me. One way to ensure the HTML stays simple is to have something else write it for you.
# I plan to give the thumbnails 2 clickable areas. Clicking the image just displays the picture directly, and the “more Info” button takes you to a page talking about the picture. People might naturally click on the picture, but it might not be obvious that these are 2 different links. One way to show what’s clickable is to highlight things when you hover over them.
# Not gonna lie. I’m starting to feel a little burned out from working on this thing for 2 weeks straight. It’s fun, but another project might be a good change of pace.
# After way too many failed attempts I finally figured out how I want to handle random window sitters. Making a picture sit on top of a window is easy, but the “random” part took hours to figure out.
# CSS does not do “random”. Not even a little bit. But it CAN do staggered rules, which sometimes overwrite parts of one pattern with another pattern, breaking it up enough to look convincingly random. I might throw in some optional JavaScript to randomize the –seed CSS variable to make every page look different. The idea is that I’ll still have a convincing effect if JavaScript fails to run.
# I just realized I could have used separate images. The CSS Sprite trick I’m using is completely uneccessary. All of the “randomness” actually comes from those nth-child() selectors. Nothing else.
# I finished adding the window sitters. Making little scenes looks much more interesting than having individual characters just sitting there. Sometimes it looks a little too busy when a tutorial has all of its steps collapsed, but most of the time they’re spaced apart well. I decided to use a CSS sprite after all because that lets me shuffle them all using a single CSS variable and a tiny amount of JavaScript. I kept them tame because I want the spicy stuff to have content labels to warn people before they see anything..
# I decided to figure out the disclaimer. The behavior is similar to my old website. Push the page down, and disappear when you click on it. The difference is that this is 100% CSS. I might add some optional JavaScript later to prevent displaying it if you’ve already seen it.
# The trick is to overlap it with an invisible checkbox. When you click the checkbox, CSS hides the iFrame next to it… and also the checkbox itself.
#
The + selector allows CSS to detect things that are next to each other. For example…
.checkbox:checked + .disclaimer{}
This will affect the disclaimer when the checkbox is ON
# As for the design… it’s counter-intiutive, but it’s actually less annoying to push the entire website down, than to overlap anything. Overlapping is basically a pop-up, which is annoying because it gets in the way of seeing or clicking things. Since a disclaimer can’t realistically filter visitors anyway, just make it noticeable but unobtrusive. It’s just a heads-up warning.
# But I don’t want it there permenently “polluting” the page’s design either, so clicking gets rid of it. CSS has no way of detecting repeat visits, so I’d need JavaScript to keep it from showing up again next time. But the worst case is if JavaScript can’t run, the disclaimer just displays normally. Nothing breaks.
# I might have gotten ahead of myself. Although I was able to make my existing blog posts and tutorials look good on the new website, I completely forgot that I wanted to use MarkDown to create these. That’s part of the reason why I’m making my new website this way. Hugo will automatically convert MarkDown files into HTML when it generates a website.
# MarkDown generates much simpler HTML. It puts everything inside paragraph tags, even images. I don’t get to wrap things in span tags with special class names (without making the MarkDown very ugly.) Is it possible for me to create equally nice results with what MarkDown creates?
# Well let’s see what I need to accomplish.
- Headers
- Text by itself
- Images next to text
- Full-width images
- Sets of images
# Making sets of images automatically arrange themselves like Twitter is tricky. When there’s an odd amount of pictures I want the last one to fill the width. But at the same time I don’t want images to expand when they’re next to text. The hard part is that CSS can’t detect the text as a separate thing if it’s not wrapped separately. But using some weird flexbox wrapping logic I somehow made it work anyway. There’s just one problem… this only works on the latest versions of Google Chrome and completely breaks on Firefox.
# The problem is that the :has() keyword in CSS is still too new and experimental.
# Unacceptable!
#
We’re floatin baby!
I got it to work using floats and even weirder CSS logic. This will work in browsers from 2 years ago. If I wasn’t relying on that :not() keyword, this would work in browsers from 10 years ago. Even so I count myself lucky that I got it working at all. This is the price I pay for using MarkDown.
# I will also have to be very careful with image margins or the pictures will wrap.
# It should be fine.
# Do the other websites do it this way? Fuck no. They wrap their tags inside tags with even more tags, burying things 50 layers deep. I’m not even exaggerating.
# Porting over the new CSS was easier than I thought. And you can still give them a fake “margin” if make their width less than 50% and float the odd-images to the right. This works reliably at all window sizes.
# Let’s try rewriting one of my old tutorials in MarkDown and see if it comes out right.
# On the left is the original tutorial. In the middle is rewritten markdown. On the right is a simple MarkDown preview.
# … Not quite. Huh, why isn’t the picture sitting next to the text? It worked in my tests.
# On the left is original tutorial on my old website. In the middle is a preview of the tutorial rewritten in MarkDown. On the right is the HTML result generated from the MarkDown.
# Oh wait… I added an anchor link in my tests. The CSS was detecting it. That’s how it knew the image was not by itself. The CSS was not detecting the text. It was detecting the tag of the anchor link.
# I could add extra tags to my markdown by just italicizing a period or something. Kind of a hack, but easy to do.
# And sure enough. That works.
# … Aaaaaaand this part doesn’t. Apparently MarkDown doesn’t wrap everything inside paragraph tags. Any HTML you add manually such as videos are just included as-is without being wrapped.
# Okay, I can coerce MarkDown to put the video inside the paragraph tag with the text by putting text just before the video. Such as a stray period. Another slightly ugly hack. From there my CSS can treat it just like an image.
# Actually, if I want to be extra-sneaky, I could use a non-breaking-space instead of a period. But somehow the space actually looks more noticeable… at least to me.
# So maybe you’re wondering why I’m going to all this trouble just to use MarkDown. What so great about it? Well… look at this video. This is how fast you can throw together a page with MarkDown!
# That video was literally one minute long, and I already had half of the page done! … And here’s the result after instantly exporting it to HTML. It looks pretty good, doesn’t it?
# Okay, okay… I did add ONE line to the HTML afterwards. To import the CSS file. But Hugo can automate that.
# Okay, so apparently I CAN skip the :not() CSS selector because it doesn’t matter if some additional images are also floating left. They end up in the same place anyway.
# Which means… this suddenly works with browsers from 10 years ago. Epic compatibility achieved!
# My old site displays code like this. It might look nice, but behind the scenes it’s a messy clusterfuck of separate SVG images added as multiple backgrounds and positioned using finicky percentages. I wanna re-create this… but not like that.
# Wait… couldn’t I just use a border-image? I could combine the SVG parts into a single image, duplicate it, and leave the top bottom and middle blank, so it only draws the border on the left and right edges.
# Now let’s create an SVG image like that. Why SVG? Because vector images have infinite detail and ridiculously tiny filesizes. We’re talkin’ 1KB. They’re so small you could fit a thousand of these on an old floppy disk. Even a dial-up modem wouldn’t break a sweat loading this.
# I could copy and paste everything, but if I want to edit it later, I’d have to go in and modify the copy too. But it turns out SVG has the ability to mirror things without pasting the same thing twice. This is also super-efficient.
# Holy crap, this CSS border-image is so much easier! And I can easily add the background stripes with a single background gradient.
# So I have the background stripes, the paper “stack”, and a programming font so you can tell Zeros apart for the letter O
# Hugo can automatically generate a table of contents for a page. I’ve always wanted to do that thing where it sticks to the side and follows you down when you scroll. Stretching the tutorial to the full width of the page would make the paragraphs uncomfortably wide anyway, so I might as well limit its width and use the extra space for the table of contents.
# Supposedly, studies say that the ideal width for paragraphs of text is somewhere between 50 and 70 letters wide.
# https://baymard.com/blog/line-length-readability
# So… a few weeks ago I was going to make my new website using a static site generator called Hugo. And then… nothing?
#
Actually, it’s going incredibly well!
So why haven’t I been writing about it? Well learning something new tends to burn me out after a few hours each day, so I don’t usually feel like writing about it right away. But I have been writing about the process… a lot… okay, maybe too much.
# In fact, maybe I should just post a few highlights here and post links to the rest. That way I won’t flood your porn-feed too much. ;-)
# I’m mostly done figuring out my new website. At this point I’m just adding little optional JavaScript quality-of-life extras.
# Such as image zoom. This isn’t Lightbox. It’s just a tiny little thing I made, but it’s very nice to have. Basically any picture inside of a link to a picture becomes clickable.
# All that’s left is polishing up the search menu and figuring out how I’ll program my tools to add content to this website.
# For people not using JavaScript, my website’s search just displays a directory page with all the search terms and Hugo pre-generates the results for each of them. You can only “search” for one thing at a time this way, but that covers most situations anyway.
# For people who do use JavaScript, I can do a proper search with multiple words. So I can re-purpose the directory page as a list of keywords. Same HTML, but JavaScript changes its behavior to work as toggle-buttons.
# Both approaches are touch-friendly and fully keyboard accessible.
# But… as cleverly elegant as it seems to repurpose the HTML of the directory page, I think I should use proper radio buttons instead for the keywords window. They represent what’s actually happening better, and it will also look better too. My old website already does this. It styles the radio buttons to look like 3-state buttons that touch-screen users can use to include or exclude things from a search. But because they’re actually radio buttons they behave the way keyboard users expect so you can use arrow keys to switch between their states.
# What’s the new icon for? I’m making my new website’s editor. It’s almost done, but one of the options is for importing and converting ALL 356 projects from my old website to the new one, which involves saving a TON of files… Not something I want to do by accident.
# Most websites put their content manager on the server. But most websites are collaborations between multiple people, and need a database to handle massive amounts of content.
# I’m not most people.
# I’m just one artist with a relatively small body of work. So a static website can scale enough for just little ol’ me.
# I also like backups. There’s nothing I put on the internet that isn’t also on my hard drive. Since all my content starts on my hard drive, I want it managed there before I launch it into… cyberspaaaaace!
# But here’s the thing. I already made this over 10 years ago. That’s how I managed my old website. Why not just modify the editor I already have? Well… I could. But have you ever looked at a picture you drew 10 years ago? It’s awful. Looking at my sloppy old code is horrifying. I can’t stand it.
# So I’m starting from scratch with all the L33T Hackorz skills I’ve acquired over the past decade. Making something as complicated as my RPG Maker taught me a ton about organizing code and making it modular. There’s no going back for me.
#Faster, Harder, Better, Stronger
# One of the minor annoyances of my old website manager is that loading all the data is kind of slow. Yeah I said I wasn’t as prolific as most artists but stuffing every detail about every project into a single JSON file still adds up.
# But I don’t need everything right away. I only edit one project at a time. So why not just load them when I view them?
# Doing this is actually kind of complicated. I still need an overall list of projects, and that list does need to know more than just the project’s name. I like being able to sort the list by date or by category when I’m looking for a specific project.
# Duplicating information complicates things. When I modify a project’s name both the list and the project’s JSON file need to be updated. I also cache the files I load. How do I access that cache? By name… of course. So that also needs to get updated.
# Don’t worry. I totally got this. Send one event, and 3 things can react to it. That’s the whole point of events. The left hand doesn’t need to know the right hand exists. If they both react to the same information they keep themselves in-sync. Everything can be modular.
# And the project editor is the same way. I don’t re-create the editor every time I view a project. It only reacts to changes. No need to initialize. When you switch to another project, you just change what you’re displaying. When the user clicks a button, that’s the only time that button sends an event. And if the new information matches the old information, don’t react. That’s how I avoid infinite loops. My RPG Maker works the same way.
#Labelling All the Things!
# My old website had dozens of keyword categories. Most of the time, half of them didn’t even get used. But the way I programmed the keyword editor was interesting. The program would just add a keyword, and each of the lists would decide for themselves if that word belonged in them. In over 10 years I’ve never had a keyword accidentally end up in two lists. In general, keyword collisions just don’t tend to happen. This had a nice side effect. The programming was much simpler. Other things like the character pairing icons, could easily add keywords without needing to know how any of it was organized. So I could theoretically reorganize the keywords without having to update a bunch of other stuff.
# So why not just store all the keywords in ONE list and let the editor’s category lists sort it for me?
# My update posts already store all the keywords in a single list. I even edit them without separate category lists. Instead I improvised a way to display multiple category labels inside the editor’s one list. It works reasonably well and it’s enticingly elegant. But I do spend a fair amount of time scrolling down just to find each of the categories, and I kind of dread the “misc” category with all the leftover tags stuffed in there. It’s a lot faster to find the categories if I can just see them all at the same time, so I think I’ll stick with displaying multiple lists even if it looks bloated and ugly.
# It’s very tempting to store the keywords together. I was about to do this for my new website… until I realized something. The website’s search page actually uses the categories to pre-generate the non-JavaScript search results. Those separate categories are useful information. I could program my website to make its own assumptions about which keywords belong where, but it seems so much simpler to just preserve the categories I already have.
#The First Download is Always the Best One
# At some point I added “main” download buttons to my old website. It made sense. After all, whenever I go to a website to get a program or a game, two downloads always feels like one too many. I just want the thing. All that other crap can just piss-off. Sure level editors are a nice option. But being confused is not nice.
# But the way I added this was clumsy. I already had a list of downloads and I just tacked-on an extra “mainDownload” variable to every project, completely separate from the list. And then I had to program my content editor to go back through my old projects and make it to guess which link should be that project’s “main” download. Should it be the first download? What if there are no downloads? Was it the content being displayed? What if they were the same? In the end they’re all downloads. I should have just used the first download in the list.
# So that’s what I’m going to do here. No separate “main” download variable. Instead the first file in the download list gets assigned to the big fat “download” button.
#How Many Authors?
# I’m reconsidering whether I should store just one “main author” for each project. Sure it’s my website with all of my projects, but those projects tend to be kind of… okay, extremely derivative.
# In all of the games I made over all these years, I think I only made one completely original character sprite from scratch: Little Red Riding Hood. All of the others were ripped from Super Nintendo games or other sources. Sure I’ve made tons of custom poses, but their designs haven’t changed much.
# I also color other people’s pictures sometimes, and I feel like the line-artist is the true main author of those pictures.
# With so many um… “unauthorized collaborations”, it seems simpler and more fair to credit everyone involved equally.
#Download Auto-Assumptions
# I take a certain philosophy with my download icons. It doesn’t matter what the file-type is. Nobody cares about the extension. All that matters is what the file represents. Is it something to watch? Something to look at? Something to play? The visitor clicks it with an intent. That’s all that matters.
# So here’s an idea. What if my editor can guess what my downloads represent when I drag and drop a file into it? Looking back over the past 10 years of projects on my old website, I seem to have a certain way I like to do things. The first ZIP file of a game is almost always the playable Windows version. The 2nd ZIP file always tends to be that game’s level editor. When I add a video to a Flash Story it always tends to be a recording of that story. These are very safe assumptions to make about me, so my content management program can make some very good guesses. And if it happens to be wrong I can just edit the label and icon. This won’t just speed things up, it’ll also make the downloads look more consistent. And consistency is just plain good design.
# Now… how do I want to program this? Sure, I could hard-code a bunch of IF statements and that would work fine… for me… and nobody else. Better to store these assumptions in the settings instead. Now how could I represent them?
# I listed out the guesses I want my program to make and I noticed some things. Every guess will always go with a specific project category and file-type, but the index is optional. Sometimes the index needs to be above a certain value (>1). Also the index isn’t the position of the file in the download list. It’s whether this is the 1st or 2nd image in the list, regardless of how many other files come before it, or in-between the images. So I need to consider that too.
# The easiest way to represent a combination of values is as a single string. This combination will correspond to a resulting assumption, a label and icon to use. So the “key” is a string, and the value is an array with [icon,label] so I’m thinking:
#
"category-fileType-index":["icon", "my label"]
# for example:
# `“games-zip-2”:[“editor”, “Download the level editor”]
# If I was just matching against single index’s this would be easy. When you drag-and-drop a file, just construct a string, and do a look-up to see if anything matches it. But the optional index makes things tricky. It’s doable, but I’ll need to construct multiple strings and do a look-up for each one. And maintain counters for how many of each file-type has been used so far. Also I won’t be picky about image extensions, so I want all image files to use look-up strings with “img” as the file-type.
# Okay, maybe it doesn’t need to be that complex. These are only guesses after all. So I’ll just construct a single look-up string and always require an index number.
# It seems to be working pretty well.
#Website is Done…ish
# Okay, it’s working. The content editor is theoretically done. The website’s Hugo templates are all finished. The HTML and CSS are how I want them. I still need to make a few tweaks to the upload code to update the galleries and search results too. But the main task now is re-writing all the readme text for all 338 projects, and re-writing all my blogs in MarkDown.
#
After all that, then I’ll upload it.
See you in, like… a month.
#Looking Back on the Process
# When I look back at the process of copying everything over to the new website. Some things were harder to copy than others. But not the things you might expect.
# Sure, simple projects containing a single picture or video were easy. I wrote a converter program to generate simple markdown files for them to display these things. Most of the games are just a picture and a download link.
# All the downloads are stored in each project’s metadata. Which is also just JSON. In fact I’m still using (mostly) the same JSON format to handle the metadata for the new website. That side of things hasn’t changed. But I decided to rewrite my metadata editor again from scratch because I didn’t want to stare at my sloppy old programming. I theoretically could have skipped doing that and just made slight alterations instead.
# Most of the blogs were easy to convert. That might seem surprising since they’re the longest stuff on my site. But what made that easy was how I stored them. Almost every article was originally just a bunch of separate social media posts on Twitter or Mastodon, which I was managing with my Mastodon/Twitter cross-poster. That means I already have a JSON file with every post in it, and each post was tagged with the project it was talking about. So it was trivial to add a feature to my cross-poster to look for every single post about a specific project and just dump all of them into a single MarkDown file ready to upload as an article.
# The hardest part was actually the project descriptions. I don’t mean the one-liners you see under the thumbnails. I’m talking about the “More Info” tab explaining the inspirations and discoveries behind each project. I ended up manually re-creating each of these from scratch for almost 300 projects. And that’s where most of the time went. Maybe I should have just parsed the existing HTML files as XML and tried to look for patterns. That probably would have helped. But part of the problem is that these were all hand-written HTML, and XML parsers are more picky about syntax than web browsers, so that was not likely to work smoothly. On top of that, I might have presented some things in weird custom ways in some of the files.
# Will I have to go through all of this again in another 10 years when I decide to redesign my website again? Maybe… Hopefully it will be easier. Using MarkDown is supposed to force my content into a simpler and more consistent format. Hugo is a single self-contained EXE so it should be possible to run it 10 years later to read all of this and spit out something else.
# Alternatively I could take the consistent and program-written HTML of my website and maybe parse that… but I probably won’t. XML is a pain in the butt to work with at a programming level. (although I recently had an idea about a way to maybe import and export XML to data and back like you can with JSON)
#I think the website’s done… maybe? … probably??
# Well it’s feature-complete, the automatic uploading should theoretically work, and my TO DO list only has minor adjustments in it that I can put off for later.
#
So do I pull the trigger now and completely replace my entire website?
Er… later. I’ll do it later.
I’ll save it for my day off, so I will have time to improvise things when something likely goes wrong.
# Okay, I’m home from work. I have tomorrow off. Time to do a couple pre-flight checks and launch this sucker!
# Actually there’s very little to do. In theory, all I have to do is tell WinSCP to sync the new website’s “public” folder to the server and… done. Most of the actual files on the server won’t even change. I’m just replacing the HTML, CSS, and JavaScript. And the original URL to access the website will stay the same.
# By the way, WinSCP has been an amazingly useful program. Aside from being able to watch folders and automatically sync them like DropBox, and being fully scriptable, it’s been my favorite “FTP” program for about a decade now. It’s freeware, but after all this time I should probably donate as a way to say “thank you”
#
Let’s see… is it worth one Big Mac… or five?
Hell, let’s make it 10 Big Macs for 10 years of service.
#The Problems I Expected
# Sure enough, things didn’t go perfectly. But much better than I expected. Apparently Hugo converts all folder and file names to lowercase by default. My local NodeJS test server was resolving these differences transparently so I never knew it was happening. But the real server is case-sensitive. So pages are “missing” if a link points to a file name with upperCase letters but the actual file is all lowercase.
# This seems to affect only a few projects, but since it doesn’t always affect the thumbnail pictures it’s hard to be sure exactly which ones, so the best approach is to rename all the source files to all lowercase, then give Hugo a minute to rebuild everything, and then sync the website again.
# … OR
# I can just TELL Hugo to preserve caseSensitive URL’s with a simple change in its config file.
# Whoops! I gotta be careful with the synchronize feature. Do NOT activate “delete files” and “existing files only” at the same time.
#
Also… you see that “preview changes” option?
USE THAT!!
You might think you have the correct settings. You are wrong. Always preview before you sync the website.
# … so now I have to wait 3 hours to restore the entire website instead of just 20 minutes to replace only the HTML files like before.
#
Okay, everything seems to be working now.
… except RSS feeds.
Well they do work but they’re not loading their CSS files. Apparently I accidentally used a root-relative path of /rss.css which won’t work in RSS feeds. You have to use full paths like http://www.humbird0.com/rss.css instead. If you think about why, it makes sense. An RSS feed gets downloaded and viewed separately from the website it came from, so the paths have to be full URL’s. Anyway, it’s an easy fix.
# The only other weird bug is the updates page sometimes shows “map” in the text. But only when there are multiple paragraphs. In Hugo, a “map” is basically an object. So apparently the text of this feed is sometimes treated as a string, and sometimes treated as an object.
# On the bright side, if anything is missing it gives me a chance to test my 404 page’s automatic Wayback Machine, which will link you to what used to be there.
#
Okay, my new website is UP!
If you want to see all the adult content, you have to use this address.
# http://www.humbird0.com/content/show.htm
# And I set up my website so my Flash games will still run in browsers that support it, such as Pale Moon.
# https://archive.org/details/palemoon-with-flash
# Of course you can also download EXE versions of the games to run them on everything else, like your Steam Deck.
#Navigation Icons
# I just saw the most amazing website design! This is NENRIKIDO. There are a ton of great design ideas here.
# But one thing in particular really impressed me. The navigation icons. Because when you visit the site on a phone the links look like… the home screen of a phone. And it looks fantastic!
# And here I was thinking I was so clever trying to compromise and squeeze down only the most essential links into as little space as possible. But in the end they still get cut-off on a phone screen.
# Ironically my old website actually handled this better. It simply let the links stack on top of each other. I thought it looked kind of messy but at least it was fully functional. Nothing was hidden.
# If you think about it, icons are just stacked links with pictures added. This layout also feels a lot more inviting when you first arrive. Everything the website is about is just laid out for you. You decide where to go… then look at the pages.
# So let’s re-think my navigation. I’ll use a similar idea, but I’ll let the icons run across the top of the page on large screens.
# … and wrap around into a “launcher” on phone screens.
# These icons might look big of chunky but we’re not worrying about saving space anymore. Besides, icons tend to look a lot better when they’re wider than their text. Ideally the width of the icons and text would match making a “square” shape, but the icons themselves have the biggest impact on the perceived “shape.”
# So with that in mind, I plan to make the icons slightly rectangular so that the height of their text turns the entire thing into a nice cohesive “square”
# Welp, that’s the idea anyway. Now for the tricky part. Sure, it’s not hard to use a flexbox to arrange the links in this way… on ONE page. But my website has over 400 pages. So do I…
# a) Copy and paste these links onto EVERY SINGLE PAGE and then re-upload EVERY SINGLE PAGE whenever a link changes?
# b) Rely on JavaScript to automatically paste the links each time a page is displayed, ensuring that people without JavaScript always have a crappy experience?
# c) Somehow make an iFrame change size even though it has no way of knowing how big its content is?
# Well I’m a stubborn fool, so Imma do C!
# Well… I wanted to use CSS calc() to do this, but somehow most of the web browser programmers forgot to add the ability to round numbers. I kinda need that to count icons and figure out how many rows there are.
# I mean, Apple’s Safari browser supports rounding.
# https://stackoverflow.com/questions/37754542/css-calc-round-down-with-two-decimal-cases#answer-74605447
#
… and there’s supposedly this hack you can do using @property to force a CSS variable to be an integer which causes rounding as a side-effect… but that was only just added to Chrome browsers in 2020 (and no current version of Firefox), so… not exactly compatible with older devices.
# https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/
# So I suppose the most compatible way is to use JavaScript to resize it. Which I can totally do.
#
Just feed the LESS variables to it by storing them in CSS variables. Create a CSS variable called numNavRows that controls how tall the iFrame is…
#
… and let JavaScript set the value of the numNavRows variable. And just let non-JavaScript users live with whatever default value I set it to, which could be either a nice looking but incomplete header, or a too-large but fully functional header. The second option is probably the better idea.
# … or… OR!!
# … I could just use break points… dozens of ’em!
# No really… That might actually be the best way to do this.
# This is literally all the CSS I needed to pull this off without any JavaScript. But it did require some fine-tuning to dial-in the exact break-points and adjust the heights.
# Almost done. The breakpoints are resizing my header’s iFrame nicely. Now I just need to create the actual icons. Hmm… what should they look like?
# Wait a minute… Haven’t I already been using emoji’s on Mastodon for each project type? This is a solved problem! It might seem like cheating to use emoji’s as icons. But that’s exactly what they are. Besides this makes the presentation consistent between websites.
# Well um * snort * aktuallyyy…. emojis look different on every device, OS, and browser so it won’t look consistent between websites. Oh well, I guess there’s a small chance it might match. A broken clock is still right twice a day.
# Then again, I should probably redraw these as pixel-art to match the website’s style. But these at least give me a solid starting place for what to draw.
# But my website isn’t quite wide enough to show them all on a desktop, so I get this giant ugly gap with just one icon in it. If only there was a way to stack the icons on top of each other as they go across.
# Well it turns out there is! Just tell the flexbox to flow downward and the icons will “wrap” to the right when they run out of vertical space.
# This does require me to manually set the height of the icon area, but I was already doing that with the iFrame anyway, so I’ll just add the CSS variable I already have to the height calculation.
# And now the iFrame looks like this.
# I’m not sure why, but for some reason square icons just tend to look better.
# Hmm… what should the icon look like for the “experiments” section? I suppose a science beaker would make sense. I’m tempted to use the potion from Super Mario Bros 2 since it’s a recognizable pixel-art flask.
# Ooh, wait a minute… I just remembered some great icons that Kirby Superstar had! Maybe I should re-create that computer programmer sprite with my character.
# Then again, 3D wireframes convey an experimental “incomplete” look. But a simple shape isn’t enough. What should I make? A star wars Death-Star?
#
Oh… of course.
My favorite kind of experiment.
# I should make it clear what it is. I don’t want to confuse people. Besides they work best in pairs.
# My website’s getting classier by the minute.
# I finally finished redesigning the top of my website. Now it uses pretty icons, which look great on phones. It took awhile to create them all.
# http://www.humbird0.com/content/show.htm
#Image Quick-Browsing
# Wouldn’t it be nice if you could just browse through every picture in a website’s gallery with the ARROW KEYS and just drag-and-drop the pictures you want to save as you go? No need to scroll around, click to another page for a full view, or right-click to download each one? Yeah… I think I’ll add that to my website.
# I already created a convenient little picture-viewer for my website quite awhile ago. I think I’ll just add browsing to that.
# First I need to make a list of all the picture links on the current page. Then I’ll store the index of each one so that link knows where it is in the list.
#
When I display a picture, get the index and store it.
Then when you press an arrow key, read the current index, add 1, use the list of links we created at the start to find the next image link, and make my code display it by triggering a custom event on it.
# Now you can browse every full-size picture on my website with just the arrow keys. And drag-and-drop still works. Nice and fast!
#
How fast? Let’s try holding down an arrow key.
This is not running off my hard drive. This is the ACTUAL SPEED of the actual website on the actual internet. I just looked at every picture I worked on in the last 20 years… in 20 seconds.
# … it feels illegal for a website to be this fast.
#💾 imageZoom.js
# It’s public domain. Feel free to use my tiny JavaScript image browser code, in all of its uncompressed 8 Kilobyte glory.
#
💾 JavaScript: http://www.humbird0.com/js/imageZoom.js
💾 CSS: http://www.humbird0.com/css/imageZoom.css
💾 Buttons: http://www.humbird0.com/css/imageZoom/
#
Source code:
http://www.humbird0.com/js/imageZoom.js
# I actually got the idea from this website. It doesn’t use arrow keys, but it’s still incredibly handy to be able to browse full images this way.
# https://potofu.me/rojiura-manhole
#Artist Recommendation Database
# So my recent exploration of Tinklebell’s amazing work got me thinking about the very best pictures and artists I’ve seen over the years. Maybe I should present them on my website? A kind of “hall of fame” for all of my favorite things.
# I figured out how this could work. I can put an “artist” XML tag on any page and put the artist’s name inside it, and then when I have HUGO re-build my website I can have it look up that artist’s info from a JSON file and replace the custom tag with current up-to-date links.
# Maybe an artist’s profile could look like a Pokemon card? This HTML kind or resembles that layout.
# Then again, my website already recommends artists on a regular basis. I link to them whenever I mention pictures that inspire me. So this is kind of redundant. It doesn’t even look all that different.
# But another place I often recommend art is on my Baraag mastodon account. So far I’ve only been boosting art that people post on Mastodon, but I want to recommend artists no matter where they are on the internet. But posting a picture directly makes it look like I drew it, so maybe I should post a “pokemon card” featuring an artist with a link to their gallery?
# It turns out that there’s a way to make Photoshop read text from a CSV file and automatically display it in an image, and a linked smart objects can automatically pull in an image. This would be a handy way to generate these cards using the same data as my website is using. HUGO can read CSV files just as easily as JSON.
# Just one small problem. Cards are tall and vertical, but mastodon instances are better at displaying horizontal 16x9 images. I’ll need to figure out a different layout. I could try turning a pokemon card sideways and displaying the text horizontally across it. But a few links aren’t enough to fill all that empty space.
# I’ve come up with 2 other layouts. The museum one is very fun but it kind of looks like I’m making a joke. But I want to recommend artists in a genuine way. The other layout uses the same border style as my website so I could also re-use it on there, and the picture is bigger. But I wonder if it adequately looks like I’m referring to another artist and not my own work? Yeah I know it has those big letters at the top but who’s going to notice that with all those boobs distracting them?
# Now, teeeechnically Baraag does not allow people to post anything they didn’t create themselves. But Aethy allows posting things for fair use purposes. Recommendations are a type of critique so it probably counts. So what if I post artist recommendations with links onto Aethy and then boost them on Baraag? It’s not directly posted on Baraag so it doesn’t break their rules… right?
# I suppose that’s a question for the @staff
#Design Adjustments
# I just made some major overhauls to my website’s design (in only 2 days!) Here’s what changed and why.
# The download button is one of the most important things on any page. You can’t play my games if you can’t get them. So this button needs to be easy to find. But I gave it a color that blended into the rest of the page. Whoops! My website is brown and green, so let’s make it a bright emerald.
# Another design issue was that there was just way too much empty space around the sides of the text. I have already limited the width of text to make it comfortable to read and I tried filling the space by breaking up the project data into multiple sections and putting some of it next to the “about” text, but that usually wasn’t enough to fill all of the remaining space. Meanwhile the main title pictures for the games are too large and look a little blurry. Maybe the website itself just needs to be narrower?
# Also, the info above the projects was really chunky! You have to scroll down half a screen just to see the main content. But I don’t want to hide it all the way at the bottom of a long article either.
# But here’s an idea! My old website used to put the info on the SIDE when you viewed the website on a big screen. This makes a ton of sense, but… when you expanded the “More Info” text it would be REALLY tall and you ended up with a ton of wasted empty space on the left side when you scrolled down to read it.
# But what if I make the content stick to the top of the screen and FOLLOW you down the page as you scroll, like I do with the table of contents?
# … Well that’s fine if it’s just a picture, but I don’t want long blog articles permanently glued to the top of the screen with no way to scroll them.
# So instead, what if I just make BOTH sections scrollable and limit them to the height of the screen? This accomplishes the same thing as having things stick to the top of the screen while you scroll down, but now you can see everything.
#Content Filters
# I’ve been meaning to add NSFW content filters to my website so people can choose which kinks they see and which they don’t. After all I can’t realistically expect other people to share ALL of my interests. Even my favorite artists always have a few quirks I’m not into.
# My old website accomplished this by allowing you to save a “default search.” But I’m not sure it was obvious to anybody what it did or why anyone would want to do this.
# It’s actually very easy to make a content filter using CSS. In the HTML, put classes on the body that represent the things you want to hide, and then put classes on the thumbnails that represent their content.
# … and then in the CSS just use display:none to hide things.
# I don’t need to add filters for every possible thing. Just major fetishes. It’s not like Princess Peach is gonna be on anybody’s squik-list.
# I do need to use JavaScript to apply these filter classes because I don’t generate the pages on the server. They’re static and pre-made. In terms of privacy people shouldn’t have to broadcast their fetishes to a server. If I use LocalStorage then these settings never leave your computer. And if you have JavaScript turned off, then you just see everything. The website defaults to a more functional state.
# I can quickly re-use my search keyword buttons to make toggle switches. I’ll just remove the neutral option. When a keyword is “off” then it adds an exclude filter. When a keyword is “on” then there is no filter for it.
# If I include a script tag after each button, then they become modular and self-contained. Their code does 2 things. It modifies the saved setting, and then it fires an event to announce the change so the rest of the page can update in real-time.
# The thing that actually enforces the filters is a script immediately at the start of the body tag. It reads your settings and adds classes to the body tag. The location of this script is important. Script tags PAUSE the loading of a page while they load and run their JavaScript file. That’s why ad’s suck so much. You can avoid that by adding the “async” property to the tag, but in this case we WANT that pause! We want to apply the filters before displaying the rest of the page, otherwise a bunch of naughty stuff might flicker on-screen for a moment. You’re not even going to notice the pause. We’re talking milliseconds here.
# Now I just need to make it obvious what filters are currently being applied so people don’t wonder why stuff seems to be missing.
# I also need to give people a way to access the content filter settings.
# I should also add these filter options to the website’s intro page that lets people choose between the clean and the NSFW version of the website. That way people can choose their preferences before they see anything.
# Opt-in or Opt-out? I’m thinking… both! Visiting most pages should show everything by default and people can just decide if they want to hide anything. BUT… if the first page they visit shows the filter settings, then block all the fetishes by default and let people choose the fetishes they want to see.
# Hmm… should “furry” be one of the filters? It could be helpful, so why not? Philosophically this is no different than hiding any of my other interests. People don’t choose their interests. They only discover them, so it’s not like I can change anybody’s mind. And there’s no need to. Let’s just add this keyword to my projects.
# Wow… for “not being a furry artist” I sure do make a lot of it! … “Casual furry” my ass. I guess you just can’t take the 90’s out of a 90’s kid.
# Okay, everything is working so I’m done right? Wrong! The content filter toggle buttons look exactly like the search keyword buttons but they do different things. That’s confusing. Let’s fix that.
# Let’s be honest. The ancient Windows checkbox is ugly and tiny and hard to click. The Android-style slide switch was a brilliant redesign, so let’s start with that. What I have here is a pretty good starting place. And if I was lazy I would just stop here and call it “Flat Design” … but I’m not lazy. Let’s make it look good instead.
# Classy! That’s more like it.
# Check it out!
# http://www.humbird0.com/intro_gateway.htm
# If you’re using Chrome, you’ll need to add this website to the “allowed” list otherwise the browser will delete the settings when you close it. Just search for “cookies” in the settings.
#A New Search Engine
# I want to replace my website’s search engine. Lunr.js only works when you type in the entire word you’re looking for.
# My old website’s search worked better. Funny how that keeps happening. Maybe I should just make my own search engine again.
# Okay, so here’s how my new search engine will work. The basic idea is to find the words you type using indexOf(). To make this possible, I create a long string for each project containing its name and all of its keywords. To efficiently search for multiple words, each search term shrinks the list of projects and then the next search term searches within that smaller list. Of course I can also include -negative search terms, because I just can’t stand using using search engines without that ability. It’s surprising how often that feature is missing in other search engines.
# Remember that big elaborate plan I posted? Well I turned all of that into comments! Now I just need to add code under each line to create my program.
# Uh… you guys are never gonna believe this, but… all that code worked perfectly on the first try! I typed over 200 lines and it all just… worked. You gotta undertsand, that almost NEVER happens to programmers! Maybe spending the last 20 years writing ActionScript in Flash was good practice? It’s basically JavaScript. But then again, maybe planning a complex program using pseudo-code is actually a good idea?
# Now I just need to wire up this new search engine to my website.
#
Code: http://www.humbird0.com/js/search.js
Search Index: http://www.humbird0.com/search/index.json
#Default Story Illustrations
# I decided to add my social media preview images as the default illustrations at the top of my stories. A story just doesn’t look interesting enough to read without a picture.
#Favorite Artists
# The Aethy mastodon instance is going down soon, but I’m not worried about losing any pictures I uploaded. Thanks to my cross-poster, everything I ever posted on mastodon is also on my website. Well… except for one thing.
# I have been posting artist recommendations every week on a different mastodon account that I use for conversations about adult content.
# So in the spirit of POSSE, let’s see if there’s a way to display them on my website as well.
# I think I’ll present my favorite artists kind of like the thumbnails I use for my blog posts. Display the name of the artist, say some kind words, show a bunch of thumbnails, and clicking on it will take you to their website or some other art gallery with their stuff.
# The HTML would look like this.
# These days I use markdown to write the content of my website. And I can actually represent most of this using markdown.
# Most of it… except for the link. And that’s kind of important. The whole point of recommending artists is to help people find more art to enjoy. Which is kind hard to do without linking to the rest of the art. The most that markdown can hope to do is wrap a link around a single picture, but even that looks ugly as hell. The whole point of markdown is to look like a simple human-readable text file when you view it directly, and this… is not that.
# But the rest of the markdown is almost right. I just need to add a link around it to create the intended HTML. There are multiple ways I can achieve that in the HUGO static site generator
#Just write HTML
# I could just add HTML directly in the markdown and it would work fine, but the philosophy of writing content with markdown is that it isn’t limited to being a website. It’s just text, which can be converted into anything. So I want to keep my options open.
#Wrap it with XML and turn it into links with HUGO
# Maybe something like this?
# The idea is that adding custom XML makes this semantic. This represents a favorite artist. And I’m free to display that however I want in the future.
# I usually use XML because I refuse to put proprietary HUGO shortcodes directly in my markdown. I don’t want to be tied to HUGO forever. I might switch to some other software in the future. So I use standard XML instead and tell HUGO to interpret these like shortcodes by using string replacement during the HTML conversion process.
# So I could just replace “<favoriteArtist” with “<a”, and replace “</favoriteArtist>” with “</a>” and this would turn into HTML.
#Make the whole thing a custom XML tag
# Another approach is to represent the concept of a favorite artist using a single XML tag.
# The advantage of using a single XML tag is it gives me maximum flexibility. HUGO can interpret this as a shortcode and replace it with any set of HTML tags I want. Which means the HTML will get written exactly the same way every time, making it consistent and supposedly easy to convert. This is also super-duper semantic. There’s no doubt about what this represents.
# But the disadvantage is that it’s not very human-readable. Writing it is tedious since I have to copy and paste a bunch of text into this XML thing. And a typical markdown editor won’t display this in a pretty way. I may be a programming nerd, but that doesn’t mean I like editing text.
#A folder with markdown and front-matter
# Ignoring code for a moment, let’s just take a step back. No matter what I choose to do, I’m probably going to store each artist’s thumbnail pictures in their own sub-folders. By default HUGO wants to treat sub-folders as web pages, and the outer folder as a listing or gallery. But I don’t have to actually link to the pages inside the folders. Instead I could just have the gallery loop over each page’s info, and display their contents directly on the gallery itself.
# This is very nice from an organization standpoint. I’m using the folders that I’m going to create anyway. And making the markdown files is direct and intuitive. Each artist has their own folder so they’re handled in a modular way. Adding or removing an artist from this gallery is almost as simple as adding or removing a folder with pictures in it.
# It’s not quite perfect. The front-matter is kinda sorta proprietary. But HUGO isn’t the only program that can read front-matter from markdown, so I’m not completely locked-in. And it’s still human-readable. I think I like this approach.
#The Result
# And here’s the result. This accomplishes exactly the same thing as my recommendations on Mastodon.
#
And when it’s resized on smart phones, the thumbnails shrink into Japanese-style vertical strips. This cropping is accomplished in CSS by using object-fit: cover on the images.
#A Better Design
# But I think I can do better than this. Whenever I visit a website, I instinctively want to look at the pictures in front of me. If I click one I expect to see it in full size. It feels rude to unexpectedly display a website instead what the picture is showing. That feels like being tricked with a bait-and-switch. Maybe I should just expand on my old design for artist recommendations, where you click to see the picture and you have an obvious button link.
# This approach just feels better, and the thumbnails automatically resize their width in a smarter way too. It’s just a happy side-effect of each one being wrapped inside a link tag. Something to do with how CSS flexbox behaves when the inner img tags are set to a specific height.
# Now to find a way to deal with smart phone resizing.
# I’ll just use breakpoints to hide the extra pictures when they no longer fit nicely.
#Where does this belong?
# Until now my website has been a comprehensive archive of all the things I created. My blog sort of loosened that definition since those articles are viewpoints about subjects, which are hardly accomplishments. A favorites section is by definition definitely not something I created.
# So maybe I should re-think how I’m organizing this stuff. If I want to separate these roles from each other, maybe I should make multiple websites that serve different purposes?
# I already know you can create sub-domains by replacing the “www” at the beginning of the URL, and hosting multiple websites on the same machine. But I have a better idea.
# A “website” is really just a bunch of folders and text files behind the scenes, and I can arrange those any way I want. They don’t necessarily have to be on different physical machines or even have different URLs. They just have to look different from each other, with their own navigation. Nobody really cares what the URL bar at the top says.
#
So my “favorite things” site could be at www.humbird0.com/likes
#
My projects can be at www.humbird0.com/makes
#
And my blog could be at www.humbird0.com/thinks
#
“Humbird0 makes” … “Humbird0 thinks” … “Humbird0 likes”
This has an intuitive grammar to it. I like the idea of using verbs to describe the roles of things. I already do this with my mastodon accounts.
#
Of course if I make this change, most the the links to my website will break because all of the URLs changed. Most of my website’s files are currently inside of www.humbird0.com/content . But I can transparently avoid that by using a redirect to tell browsers to go to www.humbird0.com/makes instead. The old web engineers thought of this.
# I should also think ahead a little. At some point I might want to put other things on my Favorite Stuff “website” besides just a list of artists. So “Favorite Artists” should just be one of its sections. I can add more later.
# It’s kind of funny. It would be trivial to just tack-on another section or two to my existing website instead. But the well-organized part of my brain knows that I can do better, and demands it.
# … Which turns something simple into something daunting. Don’t get me wrong, I can totally do this, but it will take some time to design 2 more websites. In the meantime I still want people to be able to see my favorite artists without having to keep track of which mastodon instance I moved to today. So let’s just put this favorite artists gallery in its intended future location. And in time, a “favorite things” website will emerge around it.
