Colophon

Colophon

Update!! Less than 10 hours after I wrote this I completely removed all Javascript! I got inspired by Mr. Richard Stalman's  article - I nonetheless still believe the Javascript I did have previosuly was okay as it was all for making sure older hardware can handle the site but then I got thinking - older hardware would most likely rather just have plain HTML/CSS to process rather than Javascript! 

Written with LibreOffice Writer – note I am a rambler and my rough draft IS my final draft

This website emerged out of the want to remove myself further from the internet + I just love Web 1.0 and it’s revival – my favorite hobby right now is web surfing in fact! It is so amazing seeing your blogs, life, tips, etc. – huge shoutout to Neocities and Wiby for making surfing better and helping the revival 

Started in August 2025, I started my creation going from HTML → AI Coded (did not like) → switched back to HTML/CSS. 

Core Philosophy 
I am drawing from 3 different movements –  Indie Webs Emphasis on owning your content and switching back to Web 1.0 philosophies, Jeremey Keith’s “Long Web” thinking about digital preservation – I really like all of the cool things the Neocitiy users are doing however they are typically Javascript heavy with tons and tons of source dependencies. Pretty much every technical decision was focused on longevity over novelty which has it’s pros and cons – for example, I REALLY wanted to have a music player but I could not find a solution that met my philosophy 

Technical Architecture: 
All code is HTML using semantic elements that have remained stable since 2008. No preprocessors, no templating engines, no build steps. The source code also doubles as documentation for my usage or others so I can maintain this in the future.

CSS is written in a single stylesheet using only properties that have longevity. No CSS in JS, no POSTCSS, no Sass or other framework dependencies

There is only one line of Javascript for a service worker - if('serviceWorker'in navigator)navigator.serviceWorker.register('/sw.js').catch(()=>{}); 

This single line enables client-side caching for offline browsing so even with JS completely disabled, every function remains functional. 

I aimed to keep the index page below 200kb – I am proud to say we have it at 220kb!!! I took inspiration from the story of Steve Jobs having BHAGs for his team where he would tell them a number that is like …. then the team does it! I have 20 more kbs to scrape but I will be honest, I am very happy with where it is at, I do not want to sacrifice personality or UX for 20kbs given that most websites are far larger than this. 

I chose Neocities as the host as I love the idea of supporting their mission + they have a record of stability and good privacy policy. My static file architecture means that I can migrate extremely efficiently 

Typography is Courier New, Liberation Mono, Consolas with Comic Sans MS and Trebuchet MS – I wanted to avoid using Google Fonts as I believe these are not web safe fonts, where as the ones I chose have been around since Windows 98! Also no web fonts means eliminating render-blocking resources.

The colors I chose were more just me playing around and keeping it space themed, I believe space represents a lot of concepts that I will get into in the future but one idea I that really stuck in my mind was the optimist Walt Disney – I visited Tomorrowland all the time when I was younger (oh no my personal information!) and I was so fascinated with how Walt wanted to reach for the stars and how he felt it was progress, wonder and responsibility.  I feel space often has the thought of “progress” and I feel this web revival movement is indeed progress.

CSS animations are used sparingly and respect prefers-reduced-motion. Our floating effect uses transform: translateY() for GPU acceleration on older hardware. I will talk more about performance below in a “advanced” section. 

In regards to content strategy – there really is not too much of a strategy other than single page design. In regards to what an optimal site looks like, believe it or not I took great inspiration from McMaster after watching a  YouTube video
I am almost to the point where I want to turn my business sites into exactly like this! Functional over this BS modern Shopify web themes. I try to all text “real” where I type out what I am saying to myself in my head as if I was talking to myself. 

For the guestbook I used  Atabook  but I really really want to make my own rather than outsource it. Right now it is an unfavorable but conscious trade-off between some of my principles vs. personality.

Overall main “hurdle” was single line of JS, and I believe the service worker was the best use of it.

Security & Privacy is frankly minimal as the attack surface is so little, the only real attack surface (Mr Hacker please do not get any ideas) is the atabook/iframe connection but that is sandboxed by browser secutrity policies. There is no server side code, no database nor user authentication – at this point go ahead and steal the code! 

In regards to privacy it is whatever Neo cities collects as I do not track anything. 

Pretty much all content is available to see in the “view source” – I tried not to minimize, or have obfuscation – I intend on even my kids one day learning from this code.

Advanced
So we used a lot of tricks for this site that I think would be beneficial for a web dev/master/king/queen/overlord/god to implement 

The most impactful optimization was splitting CSS into critical and non-critical portions. All critical styles are inlinded in the  for immediate rendering. Non-critical styles load asynchronously after the initial paint. This eliminated any need for render-blocking CSS, reducing our first contentful paint by aprox 40% on slow connections. I used a fairly simple window.addEventListener(‘load’) to inject non-critical styles after load completes.

All animations uses CSS transforms and opacity changes rather than layout triggering processes. The floating animation uses transform: translateY() which leverages GPU acceleration even on 2014 integrated graphics. Animation durations were extended (3s to 6s) to reduce CPU stress on older hardware.

For image optimization I have not fully set this up but I intend to in the future and each image is to have a 3 tier-fallback system: 
WebP for modern browsers (80% file size reduction)
Optimized GIF/PNG for legacy support
Static JPEG fallback for maximum compatibility

I added in fixed dimensions width and height to prevent cumulative layout shift. 

Below the fold is loading=”lazy” to defer loading until needed. Combined with the  this reduced the total page weight by a large margin.

Meeting one line of Javascript requirment meant some creative solutions using only CSS however right now I actually lied and do not meet this requirment as I did endedd add in multiple lines of window.addEventListener('load', function() { ... }) to help performance however the attempt was still made!

Button carousel uses pure CSS @keyframes animation instead of JavaScript scrolling
Hover effects achieved through CSS :hover pseudo-classes
State changes handled via CSS transitions rather than DOM manipulation

The service worker registration was compressed to 78 characters: if('serviceWorker'in navigator)navigator.serviceWorker.register('/sw.js').catch(()=>{});

I made an attempt (and that is why the web site has some places where images belong) to self-host every dependency including 

Downloaded and optimized all 88x31 button images locally
Self-hosted cursor files instead of external requests
Replaced external font dependencies with system font stacks
Created local alternatives to external iframe embeds (later reinstated for guestbook functionality)

Older hardware Optimization

I quickly realized there is a niche group of people that use older computers  so I attempted some optimization to help with this

The main changes are:
Memory Management: Implemented animation pause functionality when browser tabs become inactive using the visibilitychange event. This prevents continuous GPU usage on battery-powered devices and reduces memory pressure on systems with 4GB RAM.

Background Loading Strategy: The cosmic background GIF loads after critical content renders, preventing it from blocking initial page display. Changed background-attachment from fixed to scroll to eliminate the performance penalty on older graphics drivers.

Animation Performance Tuning:

Reduced transform: scale() effects from 1.1x to 1.05x to minimize GPU overdraw
Extended carousel animation duration on mobile devices (30s to 45s)
Added will-change: transform only to actively animating elements to optimize compositing

Another goal was browser compatibility – I used CSS @supports queries to to progressively enhance rather than poly filling missing features, I had already mentioned the universal font choices 

Pre-Optimization=
500kbs

If you would like to get an idea of the pre version – I made the decision to keep my About Me page unchanged from V.1

 About Me 

Post-Optimization=
220kbs

I unfortunately did not measure site speed however anecdotally I believe it is faster. Another project I need to do is audit the code on multiple computers and web browsers. 

Future:

I would like to replace the Atabook sooner than later, I would also like to either make a .Midi player for local .midi files. 

I am in the middle on whether to reduce JS, I believe right now I have a nice middle ground between performance and philosophy. 

I need to setup the fallback features. 

RSS feed is a must. 

Overall I believe I need to spend more time making content that I enjoy rather than getting into the weeds. 

Thank you for reading and have a pleasant day.


Sign my guestbook to keep in touch, hopefully to add RSS soon.