Welcome to my website!

[Norvella9] Day 839 of waiting for a SquaredPancake update...

[Norvella9] Day 840 of waiting for a SquaredPancake update...

[mooncat] dude stop spamming

[Norvella9] Day 841 of waiting for a SquaredPancake update...

[SquaredPancake] [2026-01-update-changelog.md]

I updated my site!

(after only 2.25 years)

The emotions I feel/felt towards this update are kind of difficult, but luckily feel resolved (at least for the time being). First off, some basic questions: Why did it take so long? Why was it done now, and not delayed even longer?

The reason why nothing came in those 2 years is personal, but that's been solved and so I'm back now! The main reason I'm releasing an update now was at first to just publish the progress I made whilst tinkering on the site on-and-off in the past years as I do believe some things I added during this time could indeed be of some use to specific visitors (I mainly added a lot of new links to the links section, but I also slightly hope that some of the feature- and style-work I did might potentially inspire aspiring webmaster to improve their own website).

However, as I was reaching the end of my Todo list filled with what big, broad stuff I wanted to include in this update, I started feeling anxious and uncertain (as usual) as there were still a lot of ghastly little imperfections and outdated writings haunting around the website. It felt a bit similar to how I felt when I uprooted my old website to start work on this new one – that it was all just a lot of busywork; that there were still so many outdated sections I'll have to review still to see if I can stand by by what I said there. Especially as I pressured myself to get this done some day, each little tweak I felt I had to make felt more agonizing; each thing demanding attending felt more life-time consuming.

I felt conflicted and under pressure, but a neat little miracle occurred and my mind got the right thoughts at the right time and convinced itself that it found a solution that it likes! "I'll just publish the update when the major things on my list are done." – is the conclusion it came to, with following reasoning:

1. If I do multiple, smaller updates instead of one singular, big and perfect one, things that are already mostly ready for publication can get published without having to wait for other, unrelated things to get finished.
2. If I were to follow that feeling of only wanting to have it published when the site is truly done and lickety-spit polished, I'd likely only update the site when I'm 80 as there are always more things I learn and do. With that come more things I want to share on this site, and with that more time needed to perfect all the new content and features I'll need to house the new content.
3. It's probably healthier and better to just step from the gas a little bit, only fixing those minor imperfections as I notice them while working on the more important things that matter (i.e. bigger projects and writings that could actually have an impact, or fixing things going awry in real life). I essentially have a life-time I want to spend improving this website, so why should I force myself to fix every single mistake now?
• That essentially means "stop being such a perfectionist", but that's a vague goal that probably doesn't convince my emotions to stop coming back when standing before the big red launch button of another update in the future. I do hope that, if that day comes, I will reread this "journal" entry and manage to fight on against my perfectionism again, even if just for a little bit.
• I could apply the "Little bit every step" thought and just do a little bit each session I work on this website on. That way, I might not feel the agony of my life-time drifting by!

Other related ideas:

• A related idea I had while thinking through this was that I could remove not-strictly-necessary pages so there's less stuff I need to maintain whenever I change global stylings or otherwise add or change content related to it. For example, the Website Assets page has mostly been left out in this update, and because I did draw some new graphics (mostly for buttons in the Links section), it is now outdated and a maintenance burden.
• Applying my idea would mean that I could let that page drop because the graphics I made are already tagged with "ButtonByMe" in the Links section and "Artist/Me" in the Graphics Gallery, and any other unused asset could then fall into a design graveyard sort of page in the meta section that I'll only ever have to update when there's more unused content around.

...

Ahem!

I said everything I wanted to say – let's change the subject!

The Change

Core

Features, Bug Fixes & Layout Changes

• Polished the light mode previously present only in specific pages and rolled it onto every page. You can toggle between Light and Dark Mode by clicking on the transparent moon/sun in the bottom right corner of the window (it should only be visible to those who have JavaScript enabled).
• One thing I'm a big fan of is the transition screen that fades in and out in between switching. It has a medium-bright background color to ease the eyes into the completely opposite brightness level!
• Renamed side notes to "hover cards" to both differentiate them from actual side notes (which are essentially footnotes but positioned directly in the margin besides the main text, so my "side notes" actually weren't side notes at all!) and to make it a bit more clear that they are a thing created by me and are in no way an official standard.
• I also made it possible to hover your mouse over and interact with the text within them. This allows for features such as clicking links inside hover cards or easily copying and pasting text in them. Especially the "clicking links" thing clears up many UI Design problems I had before where there simply was no space to put additional links (e.g. in places like the Links section).
• Extended the hover duration needed for hover cards to display (to hopefully prevent cases of hover cards accidentally opening while moving your mouse over something and then blocking off anything below it).
• Restructured the <header> present on every page:
• The navigation menu is now above the title of each page since I found it awkward to have global site navigation below something page-specific (<h1>).
• I also simplified it's styling so that it isn't too attention-grabby as you'll easily memorize it's existence within 5 minutes of visiting my website because it is on literally every page. The styling took heavy inspiration from gwern.net's navigation.
• Also added a button all the way to the right that leads to the sitemap in the belief that it might be convenient if you know your destination (and also to make it symmetrical with the pancake item at the very left)
• I believe it was thanks to the cool black background you see anytime you pick up an item in the Binding of Isaac: Rebirth that I got the idea of marking the header with it. It just helps make it a visually distinct element, looks cool and fits the background/general theming I aim for.
• The jekyll plugin that allowed me to show when a page was last updated broke through mysterious means. I took that opportunity to take out the garbage and replace that widget that was under the <h1> with something that solved another quarrel I had with my previous site design – I now have a dedicated section and styling for links to sub-sections! (they're colorful buttons below the marker-ed header on pages like the Links section)
• Added a summary block to most pages that describes the page's purpose and contents. I practically did something similar before by just having plain paragraphs that told the same thing, but I just began liking the idea of having a dedicated, visually distinct section for it (after being inspired about it by gwern.net).
• They also look stylish as hell and can generally be used as a sort of way to highlight certain text and break up the visual flow of writing by providing a bit of variety (see the newly added Cool Fonts > Trunic page for a good showcase of that!)
• I investigated options to automatically compress every image asset I use on the website, which led to a total reduction in file size from 62,3 MiB to 42,4 MiB. It isn't the most efficient, but it's mostly-automated, convenient and therefore essentially free!
• I continued tinkering with my tagging system and improved it manyfold! Besides just featuring a snazzier, more accessible styling and figuring out how to let visitors on mobile negate tags as well, it is also now employed on the Graphics Gallery and the Links Section!
• Moved and renamed a few pages for the sake of better organization. Don't worry though – I set up an underdeveloped redirect system that redirects any access to the old URLs to the new ones!
• Moved stress_test.html from /simple/misc/ to /simple/meta/
• Renamed the Shareables Gallery into Graphics Gallery since it's starting to house more than shareables now, and changed the file name from /simple/links/shareables.html to /simple/links/graphics.html to follow suit
• I'm wagering another attempt at keeping an RSS feed after starting to use an RSS reader myself. At first I plan to just update it in sync with these changelogs. Let's hope it sticks this time!
• Through the cool "Set font size" bookmarklet I made, I could easily test how certain elements look if someone set the font size in their browser settings to something other than the default 16px. Thanks to that, most elements now scale well when minor adjustments are made to the browser's font size settings!

Content

• Generally sweeped through most pages to modernize their formatting, tweak sentences, fix typos etc.
• The pages I mostly haven't touched on in this update are any pages in the Me sections as well as the Video Log and some pages in Misc like the Misc. Lists, the Reference page or Screensaver & Live Wallpaper homepages.
• Improved onboarding when first visiting the website a bit by including the summary you can see at the top of index.html (the page you're currently on), describing each main section briefly whilst giving a short status report and other links of interest to first-time visitors.
• Restructured some stuff:
• Restructured the Links section a bit – what was previously listed under "Resources" is now split into "Direct Links" and "Assets"!
• Restructured the Music Library – there is now a main page with album covers for those I have at least written a bit of a description about, and an Album List that bluntly lists off all albums I had in 2024 (the time I made this change)
• Added an album with it's own page, Remixes & Co. 2, to the Music library.
• Added bits and bops to here, there and everywhere
• Added and rewrote a lot of stuff in "About this Website", like this site's purpose, ~5 design decision bullet points and a better history section.
• Added a somewhat massive amount of new items and descriptions to the Links section (+223 links – 68 -> 291) and the Graphics Gallery (+303 graphics – 170 -> 473), and sifted through most items in the hopes of unifying their formatting and giving them all appropriate meta data (e.g. tags, author, date added). I haven't tagged everything yet, but it's good enough.
• A bit of new art for Me Art – Two new paintings for the Animal Crossing: New Horizons page ("Trainline Map" and "Pitstop at the Edge") and a bit more Pixel Art & Website assets
• Added a few new words to Cool Lingo
• Rambled extensively about an idea for a video game that I've had for a while now, but that I'll very probably never make.
• Added a few new pages!
• Added a bookmarklets page to hoard useful bookmarklets I come across
• Made a Cool Fonts page for really kool fonts – currently sporting one singular radikal font

Visual Changes

• Generally made the decision to purge transparent backgrounds for any large block elements because it was ugly, instead replacing them with solid colors.
• Made the grid texture in the background more subtle to contrast less with the actual contents of the page.
• Gave pages that were a bare-bones list of links like the "Me" page little cards with descriptions to not make them so bare anymore.
• New visual elements!
• Added Link buttons – Links that are styled like colorful buttons to make them stand out more! They also make lists of links quite a bit more fun and compact when combined with the new inline-list styling below:
• Added inline-lists to have lists whose items are placed directly next to each other in a line instead of having each item in a separate row. This is often used in conjunction with link buttons for a more compact way to link to stuff while still maintaining proper semantics (e.g. telling a screen reader that it's a list of something)!
• Supplied a custom font for code blocks, JetBrains Mono, because it feels like it's a bit narrower than most other monospace fonts.
• Upgraded the favicon!
• Drew custom icons specifically for this, featuring both a bright and a dark outline so that at least one outline is always shown regardless of what theme your browser has.
• Instead of the stinky non-standard 24x24 resolution of the previous favicon, I instead made a favicon.ico file with 16x, 32x and 48x variants. Because of these specific resolutions, browsers display these icons pixel-perfectly now and make them look deliciously crisp!
• Also added a 180x180 apple-touch-icon so that if you, for whatever reason, pin this site to your phone's home screen, it'll have a nice home screen icon.
• Also put a favicon.ico to the root of the server so that it also gets displayed when e.g. opening non-HTML file types like .png's or .xml's directly in the browser.
• Updated styling of various elements:
• Blockquotes look more like a speech bubble now and have a cool background pattern now that reminds me a bit of a Nintendo DSi.
• Hover cards have a different visual cue now – instead of being indicated by a dashed underline (that makes it awkward if a thing is both a hover card and link, as both primarily indicate their existence by their underline), it is now indicated by a markered background.
• Made bold stuff colorful alongside the slight increase in weight, making it stand out more and being able to be used as a sort of in-line header for some things (for example, check out the Boxentriq description in the Links section which makes good use of this!).
• Text in parenthesis will be highlight when you hover your mouse over it, potentially making it easier to read for some people (hover over this text to test!).
• Headings look way more different now – inspired by the Things theme in Obsidian, they are now big, colorful squares colored after the colors of the rainbow to indicate their level, and can have some styles manually applied by me to visually indent them for more visual orientation.
• Code blocks are purplish and have sharp corners now.
• Form stylings are looking snazzy and funky. See the Guestbook for a tasting.
• Lists lower their indentation size when there's not a lot of width available.
• Stylings for the Guestbook are up to par, having consistent card styling now
• The buttons used to filter tags now look like tags, and in a stroke of genius, their hole now also shows their state, with them displaying a checkmark symbol when active and a cross symbol if negated. This also improves accessability as it shows the state using icons instead of being purely color based, and is just generally a cool and elegant design!

Internal

• Rewrote my .css files to make use of newer CSS features, primarily nesting!
• Restructured first the Graphics Gallery, then the Links section to now use jekyll's _data folder as a test to see how well it goes. The hope is to unify the formatting of the descriptions for each buttons as well as make it easier to add buttons in the future.
• Along with that, I've been toying around the idea of composing most of my files in Markdown instead of HTML directly to make it less annoying having to actually write stuff, but I'm still unsure how smooth that would go or how to e.g. make typing <p-t> less of a pain.
• Rewrote every internal link on this and the old website to not end with .html so that the URL is cleaner.
• This made me realize that relative links suck and break when subjected to different ways you can type the same URL

  The reason it happens is because of an annoying necessity (?) where browsers only sometimes automatically append an / to the end of an URL (they do if there's a folder with the same name as the current HTML file in the same directory).

  Because of this, relative links don't work on pages that A) are linked to without a .html suffix and B) have a folder with the same name, meaning the browser forces a / suffix. See the arithmetic below:

  https://squaredpancake.neocities.org/simple/meta/ (current URL with forced / suffix) + meta/sitemap (relative link on page) = https://website.com/simple/meta/meta/sitemap (invalid URL leading to 404)

  If the / weren't in the URL, the relative link would first look for the meta folder and then the sitemap.html file inside, but the / makes the browser think it's already inside the meta folder, making it look for another meta folder inside it and then the sitemap.html inside the non-existent /meta/meta.

  Quite shtewpid behavior, if you ask me. And I believe this auto / appending is part of Firefox and Chrome (so probably most major browsers anyone uses)

  so I had to turn every relative link into an absolute link. They now don't break if you visit a page with the wrong URL now, so that's nice now!

Closing Remarks

I have to say that my site has improved considerably from this update and is now further along the goal of being a good website for me to share things of value to others. Everything from style changes (e.g. better styling for guest book, playful patterns for blockquote and summaries, cooler headings), new semantic/visual elements (e.g. page summaries, link buttons, inline lists, inline buttons), the restructuring of certain things (e.g. the page header and navigation menu) and new and improved features (RSS feed, better and more unified tag system, light/dark theme) feel like nice optimizations and a good ground work for easily adding a bunch of content now.

Neatly enough, it also seems like some ideas and things of mine are vaguely shaping themselves up to be potentially ready to share in the maybe-ly nearby future, like...

• A cool project of mine that I listed in the Me Projects section and that feels like I could release once I finish the last push towards polishing & publication.
• I might be able to finish some pieces of writings I like quite a lot if I put in the effort to finish them someday.
• A golden gates page which is a highlight reel of the best-of-the-best of the website – what I feel would be the most useful to take away for visitors that just have time for a brief visit.

There are also some ideas that're farther ahead in the future, like...

• Generally more research and thinking about how to structure and do the knowledge database / digital garden / "my current magnum opus" thing.
• Automating sections like the music library (since I religiously maintain my meta data for my local music library, I could probably easily add some custom tags in them and then automatically generate pages based on the metadata I include in them (like tags, comments, ratings)) and then being able to sift through all that data using JavaScript and tag pages, album pages, etc.
• There were some pixel cliques I wanted to participate in and Forum posts I wanted to write, but currently that feels more like optional stuff.

...

It is relieving to know that this site endured a lot of by emotions, and that I was able to publish this update. I still have a lot of things in my life that need my attention, but at least I can be happy that I managed to publish something here after all this time, solving some design/structural problems that've bothered me a bit for months and years.

[mooncat] thank god he can shut up now

[Norvella9]