Chaos Abyss

mhm. Ladies and gentlemen. It's shipping time!

If you search up a query that shows you enough articles, scroll down, and carefully watch as the background changes, you might find something interesting at the latest stage...

Added pagination to these little article widgets, except you probably won't see it because I made the page number hide if there aren't enough articles for a second page. But now you know it's there, watching you, all the time.

Currently making tweaks to the back-end to make my life more convenient. Writing a thing shouldn't feel like a chore after all. If I just write and the rest is handled by my UI, then I can focus on the writing. 🍴

Also made another article in prep for shipping

You might be wondering. This is impressive and all but why 240 hours?

Well, you see, in addition to an unhealthy self-obligation to deliver a good thing I want this place to be as a resume-able as possible. 'Tis an evil scheme of mine.
Moshi moshi, have you any experience on X THING?:
I implemented markdown for Chaos Abyss
I built an API for Chaos Abyss
I built a back-end for Chaos Abyss
I did emails for Chaos Abyss
I spent 240 hours writing js and making art for Chaos Abyss
I almost learned SQL for Chaos Abyss
I improved my writing for Chaos Abyss
...
I thought I’d stop tweaking Chaos Abyss. I was wrong!

Conjured a banner for this very page.

I spent a while realizing I found a bug in Supabase's SvelteKit auth example, among things.

The website is up and running now! Go check it out - chaos.abyss.com!
Hosted on Vercel.
Got a domain from Namecheap from an HCB grant ofc.
Then struggled with a kinda obscure SvelteKit issue that made server.js always return 405 method not allowed if you don't specify the methods. Pretty annoying but sure.

Added a favicon recently, the other icons I used were kinda too 2d to make much sense in a browser tab so I just made a fake 3d one. The lightning doesn't even make that much sense, but it's so small in a tab that it doesn't matter.

Plus lots of prep for shipping right now.

Soon it will be time for shipping. Exciting. No, not that kinda shipping.

Mostly fixing bugs and thoroughly testing stuff right now

i'm going overkill on easter eggs for the website hehe

Look, it's been a little while since I made this, but I can't stop giggling every time I think about it.

bugfixing mostly. Look at them, silly.

Writing these before releasing the thing actually helps with bugs and minor features I wouldn't think I need otherwise. Like I just added a math markdown-it addon, but my word count counter doesn't like math and made my 600 word article a 8000 word article.

And yes, they are wearing slippers.

Writing an article that suspiciously resembles this whole Summer of Making devlog section, uhm.

Improved its looks by a mile thanks to Xelu's (Mental Checkpoint on Youtube) controller and keyboard prompts game asset pack.
Praise the free stuff:
https://thoseawesomeguys.com/prompts/
Here's the better shadow, can't forget border-radius: 0.8rem too:
box-shadow:
-2px -2px 0 0 #6a6a6a,
-2px 2px 0 0 #6a6a6a,
2px -2px 0 0 #6a6a6a,
2px 2px 0 0 #6a6a6a,
-4px -4px 0 0 #353535,
-4px 4px 0 0 #353535,
4px -4px 0 0 #353535,
4px 4px 0 0 #353535,
-5px -5.2px 0 0 #1d1d1d,
-5px 5px 0 0 #1d1d1d,
5px -5.2px 0 0 #1d1d1d,
5px 5px 0 0 #1d1d1d,
-5px -5.2px 0 0 #1d1d1d,
-5px 5px 0 0 #1d1d1d,
5px -5.2px 0 0 #1d1d1d,
5px 5px 0 0 #1d1d1d,
-5px -5.2px 0 0 #1d1d1d,
-5px 5px 0 0 #1d1d1d,
5px -5.2px 0 0 #1d1d1d,
5px 5px 0 0 #1d1d1d,
-5px -5.2px 0 0 #1d1d1d,
-5px 5px 0 0 #1d1d1d,
5px -5.2px 0 0 #1d1d1d,
5px 5px 0 0 #1d1d1d;


Got distracted while writing an article and spent way too much time on these little style keyboard inputs. It doesn't even look that good. Originally I wanted to quickly make an svg, split it in 3 parts and stretch the middle, but that had some weird rendering issues in small sizes, and now I made a box shadow here, and it also has some weird rendering issues if you look at it closely due to shadows overlapping. 🫠
Here's the shadow if you need it:

box-shadow:
-1px -1px 0 0 black,
-1px 1px 0 0 black,
1px -1px 0 0 black,
1px 1px 0 0 black,
-4px -4px 0 0 #4F4F4F,
-4px 4px 0 0 #4F4F4F,
4px -4px 0 0 #4F4F4F,
4px 4px 0 0 #4F4F4F,
0 1px 0 0 black,
-1px -1px 0 0 black,
-1px 1px 0 0 black,
1px -1px 0 0 black,
1px 1px 0 0 black,
-1px -1px 0 0 black,
-1px 1px 0 0 black,
1px -1px 0 0 black,
1px 1px 0 0 black,
-1px -1px 0 0 black,
-1px 1px 0 0 black,
1px -1px 0 0 black,
1px 1px 0 0 black,
-5px -5.2px 0 0 black,
-5px 5px 0 0 black,
5px -5.2px 0 0 black,
5px 5px 0 0 black,
-5px -5.2px 0 0 black,
-5px 5px 0 0 black,
5px -5.2px 0 0 black,
5px 5px 0 0 black,
-5px -5.2px 0 0 black,
-5px 5px 0 0 black,
5px -5.2px 0 0 black,
5px 5px 0 0 black,
-5px -5.2px 0 0 black,
-5px 5px 0 0 black,
5px -5.2px 0 0 black,
5px 5px 0 0 black;


I've been researching and writing articles to have some for release. I like writing youtube scripts and stuff, so this isn't really hard, although I have a bad tendency to get mildly carried away with my ADHD. Which is how half of my ideas get born, don't get me wrong.

Made a bare bones dashboard to control everything. NOTHING can escape my sight, muh-muhhha-hahaha-muhahhaah

It now gives you threats if you do something wrong. What a chill way to make a cool article editor. This is a good thing tho, I don't want to publish something unpolished.

My laptop charger just burned in my own hands. It was already kinda brokey and I was adjusting it AND THEN I SEE A SPARK. In a second it went flying half way through the room, now everything smells like burnt plastic

Made myself a fancy editor behind admin authentication. You shall not pass. But crocodiles can they kinda cute.

Added authentication for admin pages through Supabase. I didn't expect this to be so difficult considering it's such a basic thing. I've done it before with cookies and forms but doing it actually securely is kind of a pain. Luckily Supabase docs had a ready-made example for SvelteKit so I just rewrote it. Shrimple.

Been on a bit of a skill issue irl so couldn't develop nearly as much. Originally my deadline was today, but whatever. Got to make something good, so gotta take my time. Doing auth for admin pages right now.

Meanwhile, have a slugcat

Absolutely out of context to my previous major feature devlogs, but added search result count, among other things. The more you think about it, the more little features like these make a difference towards completeness, the same page a few days ago was already pretty cool and furnished but didn't feel the same as a similar page on a random news website, but with these small things it does. Just realizing the impact of something like this, stuff with bare-bones usage even with stylizing feels unpolished, particularly when you're used to having something in there.

Made EVERYTHING responsive. What are you a rock? Well that's unfortunate, you're getting squished so you can be seen by mobile users. It's over. Give up. There's no saving from the responsiveness, rock.

new logo, kinda reminds of that meme

I went absolutely overkill on making the site as search engine compliant as possible. Why? Hell knows, I spent way too much time on all that. This is definitely overkill for my little not little blog, I got a sitemap - generated automatically and assigned priority for each article, jsonLD for every page - generated for each article too, all meta tags, and any other optimization I could think of. SEO optimization in Svelte sucks and I wish they improved on that, notably the title and i think the rest of the <head> of a parent route overrides the <head> in the svelte:head intended for that, which is weird, why?

Added this little open source plug, because of course I did, give me all your stars muhahahaha

Adding SEO tags for everything
It's pretty hectic

Edited the home page a bit, for search engine optimization. It didn't really include the title of the website before, and I figured that's a bad thing.

You could say it's gone deeper

I found a brand-new way of enforcing copyright

Made working article search, so you can pry under each rock on the website. It's fuzzy search using fuse.js, e.g. if you make a typo or just search up a similar thing, it will likely find it anyway.

This is a simple way to do search, there are more complicated ways, but this is good enough for me.

Implemented Supabase for the back-end. That's where I store and gracefully retrieve the articles from now on

Added a contact and about page, the tooltips took me more time than the whole thing lmao. Also fixed a host of bugs.

Made a page for search/a list of articles. It ended up kinda bland tho.

Made a very overengineered home page.
<br>
<br>
<br>
I swear in 2 months I'm going to look at it randomly be dissatisfied with something and then remake it from scratch i'm so sure

I implemented accent colors using oklab, essentially you just insert the hue, and it's all matched for you on the actual page.

Made my secret page editor look fantastic. Yes, no one except me is going to see it, but I've made it for myself.

And also I made the background art myself a while ago

To travel to the secret™ article editor you need to enter the Konami code because I lacked originality to come up with something more fun

I'll lock it under authentication later so only I can access it.

Successfully started on making an editor for my articles that no one will ever get to see except me probably, heheh.

Made the Next article/Previous article buttons function!

I made the error page completely responsive, the text didn't quite fit in with the art, so I overengineered it a little and made it flip colors when over it using mix-blend-mode: difference;, funky css styles rock.

Also, if you're worried about putting too much stuff to load on an error page it's fine, if it doesn't load, Svelte will put a default plain HTML error page, and if parts of the styles don't load it's fine, the text always will. It's not an image, it's just html. Stuff like this is mostly an easter egg and a pleasant thing to see when you've typed a link wrong or, more rarely, something went horribly wrong and you're cutting losses lol

The 'variable' routes on our websites are called slugs, because of some old news article classifications, and unfortunately that's way too funny for my underslept brain. Look at me, I'm an official slug hustler. Do you want a slug?? Here, come to the back alley, I have some slugs to show you. (what am i saying now, I make no sense, I'm going to sleep for today, localhost:5173/api/off)

Figured out SvelteKit routing, it was really easy thanks to their docs. Never done dynamic routing before and it's actually really cool. Now for each article in my data json there's a page generated. I'm so glad I'm doing this with SvelteKit instead of Next.js or even Nuxt.js, their docs are okay-ish but it would've been so hard to figure out, I don't like to be a fan of things too much but Svelte is just too great to miss out on.

After a bit more time, I settled on a FISH!

Just added a 404 page. Made some art for it too but I kinda don't like it, I'll remake it in the future likely.

small update, added these, working on the back end now

Also the day before yesterday I wrote almost 100 fake copyright notices to display in the footer, what a madman

Made this sick footer art

To highlight code in my articles, I use Highlight.js, it's the standard choice for this. And a theme for it by @catpuccin.

I'm using Bacon ipsum for placeholder text, because it's funny. There's also Astronaut ipsum and others. lol.

Instead of rendering HTML to generate bits of the article I use Markdown instead and parse that into HTML. Like on Discord or Github or this very textbox. I use Markdown-it for that, it's a pretty nice library with a lot of plugins. So I write actual human readable text in a future editor and then render that to html.

A very belated devlog entry, but here we are. I'm using Svelte, because Svelte is my favorite js ui framework and it is amazing. Might not look like much after so much time, but I want to ensure a few things with this project:
1) I can write my articles for the blog wahoo
2) The most easily maintainable codebase ever, I can plug stuff in, I can easily do a lot. (thanks to Svelte basically)
3) Develop a few other things along the way (e.g. my past Markdown-it plugin) made specifically for this project.
4) And the biggest time eater, get creative with it.
I just want it to be a pleasant experience visiting this place. A light of hope in the bleak dark internet that we live in, a lil bit of spark, creativity, not too much, not too delude you, but it's something you know. Not bleak.