wisdom : scroll horizontally. if things look weird, try:
~ resize window
~ Ctrl +/- (Cmd +/- on Mac)
~ change browser. best viewed on Chromium based browsers and Safari
| stats for nerds : this page weights 53 KB and is JavaScript-free

What do computers and the forest floor have in common?

                                                                                                                                                      
                                                                          !7~                                                                         
                                                                          #@B                                                                         
                                                                          B@G                                                                         
                                                                         .#@#.                                                                        
                                                                         ^&&&:                                                                        
                                                                         ~&&&^                                                                        
                                                                         !&&&^                                                                        
                                                                         7&&&!                                                                        
                                                                         P&&&Y                                                                        
                                                                        .B&&&G.                                                                       
                                                                        7#&&&#~                                                                       
                                                 .^^.                   P#&###5                   .^:                                                 
                                                 ~PG5.                 7GBBBBBG~                 .PGP^                                                
                                                 !PBG^..:!J~....     .~YGGP5PGGY^.     ....~J!:..~BB5~                                                
                                           .....!YGPBJ..       .:.7YJ77?J5555YJ?77JY! :.       ..YBPPY~.....                                          
                                           :5GPGG55Y5:.......   .7GPY??!~!?J?!~!??YPG!.   ...... :PY55GGPGY.                                          
                                            :P5P55GGG?:...::^^!JYJP55Y?77?J?7!!7?Y55P?YJ!^^.:...:JGGGY5P55.                                           
                                            :YYYGGP?.  .~:JY5BG#5JP5PPP5PYJJ?7!?JY55PJPBBGYY?:~.  :JPGPYYY.                                           
                                         :5JYJJPP?!::!?J55YPGB##BBGGGBBBGP5YY55YJY55PGGBGG5YJY5J7~::7JGPJJJJ5.                                        
                                          JYJ7JJYJJY?7!!!77JY5GGBBBGGBBGG5YJ5YY5J?JJJJJ7!~^^^^^^!?JYJJYJJ7JY?                                         
                                        .:!!7JY5YY?~^^~!!7JY5GB#####BBBPP##B5JYYJJJJJJJ7!~^::.....^!JYY5JJ7!!:                                        
                                        ^Y~!JPP5?!^~~~YBP???Y5PPGGGGPPGGPB#B5JJ!!!!!!!!!~~^~JGY:...:^~?5P5?~~Y:                                       
                                        :!!5P555YJ?JJYG#&B5Y5555YYJJJJ5PGGBGP??~^:::^^~!?JJP#&P~:^^:^^~7J5PY~7.                                       
                                       .!7PP5Y55YY5YY5G#&PP55PPP5YJJJYGGPPP5?JJ?7!~!77?YY5PPGGY!^^^^~^~^7?Y5P7!                                       
                                        JPJ7JYP5PP55GGB##G5BGGGGGPGPPPPPP55Y!?JYYYYYJJYYPGGJ55J7!~~~~~~^^:~7Y5?                                       
            .::..^?!^:.^Y?~^:^^        :P55JJPGGGGPGBB####PPGBGGGGGPPP55YJYY??JJJJYYY555PG55YJJ7!!~~!~~~^:~?Y5P:        ^^^^~JY^.^^!?^..::.           
       .:::.^~:.        .. ..~?J!.     YPP5Y5PGBGBBB#####BBPPGGGGPPPP5YYYY5YYYYY555555555Y?????77!!~^~~~~:~?5P5J     .!J?~.. ..        .^~^.:::.      
    ^5Y^.                    :JG&B55!~?JYY?YYGBBB####&#&##GGYJJYYYYYJJ??777?77???JJYJJ?7!~~!!!77!?7!^^^~~^^!?JYJ?~75PB&G?.                    .^Y5:   
   :&!                      P@@@&&&BG#G!7J55PBBB###&&&&&&BBG?~^::^~~^^::::::^:::::^^:.....^~~~~77?7!!~^~~^!7J?77BBPB&&&@@@Y                      7&.  
    7                      :Y^.^#&&BPG5!^JY5GBB##&&&&&&&&&#PJ7:.......   ....            .:^~~!!!?7!!!~~!!!7J?^7PPPB&&#^.^Y.                      7   
                              ^#@@&#GP5J^7YPBB##&&&&&&&&&&&B?^::^:..           ....:..    .:^~7!?7???Y?777?J?!^J5GB#&@@B.                             
                             .BBP??YGGY?~^?5G##&&&&&&###&&##7:^!!!!~^:....::^~~!777!^..   ...:^~!?JYY55YJJJJ7^~?5GPJ??P#P                             
                                   ?#B5??77J5G###&&&&&##BBB577?JJJJ??77!!7J?????7??7!^:........:^!?5PPP5YJJ?77??PB#!                                  
                                   .::~5J5PGPPPB#&&#####BBGGGPPPP555YJJJJJYYJ7777?JJ??7!!777777?JYPGGPYJY5PGP5JY^::.                                  
                                       .^JGBB#BBBB#&&&&#####BBGGGGP5YJ?Y5PPGPJ??JJJYYY555PGGGGBBBBGP555PGBBBGJ^.                                      
                                       .Y#P#&&&&######&&&&####BBBBBGGGPGGGBBGPPPPPPP5PPGB#BBBBBBBGGGGGGB#GB#PBY.                                      
                                      :B&PJB&@&&&&&&&&##&&&&&&&###BBBBBBBBBBBB#B5JJJ5PBB###BBBGGGGGB#&&&#Y7JYG#G.                                     
                                     .B#5?B&&&&&&@@@&&&#BBB####&&&&&&###BGP##BP??5G##B#BGGPGPG##&&&&#B5YGB?^7JP#G                                     
                                     ?&G7G&&&#B#&&&&&&&@@@&&##BBBBBBB#&&&#BGPGGGBGGP55GGB#&&&&&&##G5?~::~PG!:?JP#!                                    
                                     G#J?B&&&&&&&#&&#B###&&&&@@@@&&&&######BPG55B#&&&&&&&&#BGG5YYJ?~~!?YPBB?:^JJBP                                    
                                    :#GJJG&@&&&&&&&#B#BBGP5PGBB##&&&&&&&&&&&&&&&&&#BBGPPY?7!!!^^!?JJJYPPGBG?::?JGB.                                   
                                    ~&YYYB&@@@&&&&&&###BGYJYJ777YGP5YJY5555555YY5PG57!~~!~^~~JJJJ555Y5GGBBP7:^~YY#:                                   
                                    ~&?55G#&@@&&&&&&##BBBGPP555J7Y###GPPGGGGGGB#&&G??55JJYYYYJYYYY55PPGBBGJ!^~^J?#:                                   
                                    ?&?5PGB&&&&&&&&&###BGPPPPP5PPPP#&&#BBB###&&@&BPPP5YYYYYYYJYYYY555PGGB57~~~^J7&!                                   
                                    :&JYGPB&&&&&&&&&##BBGPPGGGPPPPPG#&&#####B5&&#BGP5555Y?JJYYY555555PGGGY!~!^^Y?B.                                   
                                     GPJGGB#&&&&&&&&&#BBGPGGGPGPPGPGB#&&&&&&5G#BBBP5J?Y5Y?JY5JYY5YY555PGGJ7~!^!JYY                                    
                                     JBJGBB#&&&&&&&&&#BBBGGGGGGPPPPG5GGGG#&#BBGBGPYYJ~?5Y!JY5JYY55555PPG5?!!!:7?P!                                    
                                     :GJGBB##&&&&&&&&###BBGBGGGPPP5Y7PPY?G##G55BP577J.7YY~YY5YY5Y55Y5PPPY?!7~^!!5.                                    
                                     .JJGBB##&&&&&&&&####BBBBGGPPP5J^GGJ~PB#GJ7GPJ.~J ^JJ!YY5Y55555555P5J?7!~^~~7                                     
                                    .!PYPBB###&&&&&&&####BBBBBBGBPPY~PPY^GB#PJ.GP! 7!.!J7!YY5YYYYYY55P5J??7~^^^75~                                    
                                   :G#&B5BB###&&&&&&&&###BBB#BBBBGGY^GG5:P#BPY:PP7:5!:7Y?JYYYYYYY55555YJ?7!~~~!P&#P.                                  
                                   Y&@&&PGB####&&&&&&&&&###B##BBBBG57GP5~P##GPJPPYJ5??Y5JJJY5555555P55J??7!~!?5&&@#?                                  
                                  5&&@&&#BBB###&&&&&&&&&&######B##BGPBGPYG&#GP5GP5Y5YYY5JJYY555555PP5Y?7?7775B#&&&&&Y                                 
                                 ^##&&?:.P#B####&&&&&&&&&#########BBBBGGPB&&GPPGPYY5YYY5YYY5555555P55J????JP#5.:J@&##:                                
                                 ?&##&~. .5#BB####&&&&&&&&&#&&#####B##BBG&&&BGPG5Y55YY5555555555P5P5YJ??JYP#Y ..7&##&!                                
                                .P####!    YBBBB###&&&&&&&&&&&&##&###&#B#&@&BGPG5Y5P55555555555PP555YJJY5GB?    ?####5                                
                                 YB###J    .G#BGGBB###&&&&&&&&&&&&&&&&&##&@&#GPG555P55P5555555PPPP55YY55B#P     Y###BJ                                
                                :P####G.    :~5BGPGBBB###&##&&&&&&&&&&&&&&&&#BGGPPPP555PP55P55P5555YY5PBY^.    .G####P:                               
                                 ~B###B!       ^5BGPGGBBBB#B#####&#&&&#&&&&&#BGGG55P555P55P555555Y55PGY:       7B###B^                                
                                 :G####B^        :YGGPPGGGBBGBBBB#########&#G5YPYJY5YY55Y55YYYYYYYPPJ:        ~B####G.                                
                                ^PB#####B^         .^?5GGPPGGGGGGGBGGBBGBB#BPYJY??JJJJYJJJ??JYYYJ7^.         ^B#####BP:                               
                                7G55####B#~            :~7JY555PPPPPPPPPPGBGPYJY??J??J????777~^.            !#B####55G!                               
                                    !&##B##?                .:^^~!!77?J??JP55J??7!!!~~^::..                J&#B###^                                   
                                     J###&&&P.                                                           .G&&&###7                                    
                                     ~##B#&&&B!                                                         7#&&&#B##^                                    
                                     ^5#B#&&G5B5!.                                                   .75BYB&&#B#Y:                                    
                                      ^BGJ^PG^ .:^^^:.                                           .:^^^:. ^B5^YGB:                                     
                                       ..   !P7.      .                                         .      .?P~   ..                                      
                                             .?GJ:                                                   :YP7                                             
                                               ^7YJ:                                               :YY7:                                              
                                                  ^5J.                                           .YY:                                                 
                                                    !!:                                         :7~                                                   
                                                      .^^.                                   .^^                                                      
                                                        :!:                                 :!.                                                       
                                                           :^.                           .^:                                                          
                                                             ~:                        .:^                                                            
                                                               .:.                   .:.                                                              
                                                                 :~:               :~.                                                                
                                                                   :.             .:                                                                  

Bugs!

No but seriously, do send me insect pics, I'd love to identify them.

I major in environmental engineering, it's at odd with my computer tinkering habit but I like to keep the things I do for money apart from what I do for fun.


25/09/21

Finally renovated the index. Removed the "Under Construction" sign, it's now forever under destruction </3


21/11/21

So I saw Sadgrl's new updates including their own Yesterweb Radio, and I was hooked. As a frequent listener of aNONradio, I was very tempted to learn how to stream my own radio station through icecast (as if I have anything good to stream) but apparently I didn't have any time at the moment. So next "goal" is to figure out the whole icecast thing. Shouldn't be rocket science.


26/11/21

Made a Go Back and Refresh button just so I can edit and preview the page easier locally. Added Picrew page & changed the Microblog layout completely. Enjoy Microblog 2.0!


03/12/21

Changed the font to Arial. Good ol' sans-serif Arial. At first I didn't expect to do a lot of writing so this whole page was set in Menlo, Roboto Mono or monospace (there was a lot of ASCII art around here so setting all the texts to monospace saved me a lot of formatting). But after some long ass blog (rant) entries I realized that:

  1. Monospace fonts make it easier to recognize letters, but not words.
  2. Serif fonts make it easier to recognize words, but not letters. Also they give me visual fatigue.
  3. Sans-serif fonts are perfect for reading, and Arial is the best sans-serif font ever made.

A bit of letter-spacing and line-height magic and Arial becomes the most readable font ever.

Readable monospaced fonts like Monaco is on thin ice (and it's also used in the code editor of Neocities I believe?). But hey Monaco isn't one of the default fonts in some browsers. So, boo.

Courier should be used very sparingly for it is a reading nightmare, as it is both monospaced AND serif. I get tired looking at all the nooks and crannies of it and if I need to read a wall of text in Courier I'll just hang myself.

That said, if the text was formatted properly (i.e it has hierarchy and moderate paragraph spacing, unlike mine) and if the content was well-written (unlike mine), then I honestly don't mind reading it in Times New Roman.


21/01/22

Happy New Year. I played around with CSS and changed everything again in terms of design. There's no such thing as a microblog anymore. Added more multimedia content. Added my diary so you can use it to bully me in the future.


22/02/22

Added the Shrine, which for now includes picrews and some Advance-Garbage fashion brands. Added the Inventory, which includes Bookmark & Web tools. So far just functional stuff for my use.


02/04/22

God I've spent months fixing a bunch of small things that I was too lazy to fix. The devil's in the details. Reformatted this whole page because I changed the font and realized I can't just get away with white-space: pre-wrap; everything to save tags.

I'm really trying to make this page as lightweight as possible with all the styling I'm putting into it. I discovered some post-processors that can format my HTML and CSS files, but I'll only run it when I've already perfected the markup.


13/04/22

Rewritten the copying page. Rewritten the whole style of the index page, really. Changed background color to silver ( #c0c0c0 in hex, I was this close to go with #e0e0e0 to be meta) because after hours of staring at the screen, black on white doesn't seem like a good idea anymore. I can't decide on an off-white color, and white on black or a "dark mode" scheme is kind of gloomy and makes me want to sleep, so now we have black on grey. I unironically think it looks good.

More note on color palette: it's not like I want to go grayscale, but I have to put a limit on colors because i'm so indecisive and if I have too many options my brain will explode and I will stop functioning. I learned that when I started using TIC-80 and realized it's much, much easier to work with a limited palette. It goes the same for drawing, making powerpoint presentations etc, I'd always have to start from b&w or a gray scale, get all the base done, and then I'll consider colors. If I start with colors I'll get NOTHING done. With this page I think I'm limiting it to the hex grayscale ( #fff - #000), dark blue #000080, blue, and red.


17/04/22

no: create smaller flexboxes to allow line breaks between flex sections

yes: create one huge flexbox then hijack it with horizontal rules

tell me now am I insane.

also, found a new tip: from now on whenever I need to link to a Youtube video I'll just future note: this doesn't always work because some videos block embeds (the Youtube Music auto-generated ones, for example). For now I rely on Invidious for a handshake to the 'Tube – this can even fetch regionally blocked videos, though I have to switch instances occasionally and some of the instances really eats up CPU power. , for example, https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ. No ads, no recommendation, less surveillance, just how a video should be.


24/04/22

Added Winamp player, and of course I have changed my whole layout to adopt the Winamp. Haha. Oops. The skeuomorphic y2k computer screen was cute but I don't want to seem nostalgic (since I'm not) and honestly I don't like useless skeuomorphism. The pseudo-screen was functional, it served to limit viewport to ~750px, but now I don't need it anymore. I still have the old layout here in case I change my mind lol.

Also, moved main navigators to the side. They used to be at the bottom of every page, and looked cute with the whole computery aesthetic but it required extra padding and I had to paste it to every page. Silly me. Also? It's a shame that the <frame> element is obsolete, really. No more bottom navigations.


25/04/22

Added Winamp player cheatsheet. Switched to pure CSS modals (alert boxes). Why? because javascript:alert() and similar JS methods block the Winamp player, and because I can. I always wanted to that aged pretty well. See list of no-script pages on e0x0e0 , even if it adds a bit of markup. After all CSS is Turing-complete, so theoretically you can do anything with it, and I'm willing to try.

I previously learned to make modals with anchor links and div:not(:target) { display: none}, but this changes the URL and writes more into the browsing history, so it doesn't really behave like a modal. My new CSS modals are based on <input type="checkbox"> and <label>, inspired by this. Shoutout to Tonic Funks for including this in their Links page.


27/04/22

Got access to a Lenovo ThinkCentre at school, I think e0x0e0 works well in Edge, except that it looks tiny. I work on a Mac Pro, but I have scaled screen so the viewport looks like 1280 x 800, which is smaller than most nowadays' computer screen. Maybe I'll put a note on my front page telling people to Ctrl+ to see things properly.

I changed the cursor from inline SVG (the cursor is an ASCII character, the ✸) to PNG the other day because it broke on Safari. Now I change it back to SVG again because the PNG cursor looks fugly and pixelated on Safari. The SVG looked crisp for a few days and now it's pixelated again, and occasionally breaks into random strings. Works fine on Chrome/Edge tho. Tried image-rendering: pixelated, base64-ing the picture, clearing Safari's cache, nothing works. Might be Apple's font smoothing but I'm not sure, it looks like a bad resize job using sips. God damn. So much for having a custom cursor.

Who knows 90% time spent making a website is just trying to make it look the same on every browser.


28/04/22

FILTERS!!!

I DID IT. I made a filter system using only CSS. We are a no scripts society >:) Right now the devlog is a sandbox for filter (the tags - very Tumblr, ik), note from the future 29/10/22: implemented, finally, after like 6 months

The very first idea of a filter came to me last year sidenote: the portal on my page might be inspired by them too. Damn I thought I just like the idea of "terminal commands"-like shortcuts but now that I think about it... maybe it's really inspired by Otto985 I tried replicating their layout to use it for u3s6e9r's page (yes I started working on u3s6e9r's page since last year), did a bunch of draft on that, unfortunately my noob coding skills didn't catch up with the idea. I really thought this was impossible with pure CSS. Well, I did it! It's still a bit hacky, I may try to improve it in the future. But hey, it's lightweight and it works.

*** future note from 15/11/22: this design is now obsolete, see previous design of the devlog here


17/09/22

I love coding on TiddlyWiki, it really forces me to try a different approach to CSS, as in, trying to reuse as many classes as possible. I think I can apply this to my website to make the code more systemic and manageable. TW's codebase is like a masterclass about using classes (lol).

Things I'm trying out: base color palette consists of:

This basic palette pretty much covered all colors in the "Hacker" palette I made in TW (black-black-white-green, monospace font, terminal style). More colors can be specified for borders & other elements:

And then every other elements' color will be defined using these relative values.

All tiddlers in TW are wrapped in the class .tc-tiddler-frame. This is used to display not only tiddlers, but also other frame-based elements of my macros. I might steal that for my site too, for example a .e0-frame class as a generic frame style, or .e0-flex for flexbox elements, since I also use that a lot.

note 27/10/22: I did! I use macros for pretty much everything now, even classes, because they did the same thing on the TW wiki , since TW widgets can generate HTML. I still want my site to be script-free, but script-free sites tend to be a lot of markup, and it gets repetitive. I like to have the idleness of just writing content instead of code, and if not for WikiText I would've written most of my content in Markdown to convert to HTML anyways. Guess I can consider WikiText a robust version of Markdown for me.

One thing I'm still not sure about is the layout for my site. The early 2000s frame-y layout is cool and retro and probly plays nice with CSS classes, but it "passes" too well as a regular website while I wanted to think outside of the... frame.

what I mean is a layout where content is distributed on both horizontal & vertical directions like in YWOT, unlike the regular web page which only scrolls vertically. , which was apparently developed to fit the limitations of YWOT, so it sounds a bit stupid to put in HTML bc there's no such limits in HTML. Plus, it'll be based on anchor links which means I can't use anchor links for anything other than map elements.

yeah, those certainly are all words.

it's hyperlink. what you're looking for is a link-based navigation. sleepy writer.
Like the map in Animal Croissant. And then it's almost like I don't know iframes exist . Idk why I'm obsessed with making it like an actual 2D space lol. Maybe I just like (and miss) the bareboneness of YWOT and the tedious mechanical scrolling. I have infinite space behind the screen, why not using it.

One thing ppl did on YWOT was railways, or roads, or breadcrumbs that lead to another closed area. I can try to do that with HTML, ex:

 _____                            _____
|     |  anchor AB    anchor BA  |     |
|  A  |============||============|  B  |
!_____!          portal          !_____!

when user scrolls to the far left of (B) they can take a train to the far right of (A) then scroll left to centre of (A)

       ,-------[map]
   ___/_
  |  /  |
==|  B  |==
  !_____!

if user travels to (B) using the map, they'll always end up in the centre of (B)

27/10/22

Couldn't sleep. e0x0e0 rework idea, total reconstruction.

Future concerns:


29/10/22

Rethinking some stuff for e0x0e0 rework


15/11/22

e0x0e0 update:


17/02/23

e0x0e0 update:


. nope, nothing here