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

Added a video for SoM reviewers inside the demo (or here)!

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.

Fixed a few issues with hosting restarts, all good now poggies.

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.

had some issues with nest, been fixing them when they popped up. But it's also been on ship certification for 20 days now with a payout of 0 shells, and i'm confused as hell.

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

Aaaaaaand the bot is done, just gotta make a small demo. Truly a 🗿🍷 moment of all time. Cheers.

Add a command to list all whitelisted channels because it tripped me before.

Added the raremode, where it sends these with a small chance instead of complete chaos

Funny issue: when running the bots on a server (on Nest, provided by hack club, shank you), I didn't realize you have to stop the script every time, which resulted in the bot multiplying every time I ran it. Solved this by using pm2 which handles this automatically.

Added whitelist and unwhitelist commands so you can keep the chaos confined

Also, added a small cooldown for spam protection

I've made bots with Discord.py and Pycord before and right now trying out Discord.js for this project and oh god it kinda sucks. Just taking a moment to rant:
1) the tutorial was pretty meh
2) what are these pseudo 'classes', I mean you can fix this with typescript but I'm not taking my while to do that
3) I guess the library itself is ok it's just that js without ts sucks, and with ts it also sucks, but way less

Got it to listen and act on every message send ... uhm, almost
(ignore my overfly flashy Discord theme)

So I'm running a small Minecraft server, and we had a running joke with these two emoji 🗿🍷because they're honestly just funny. We're using a moai with sunglasses for the ultimate effect too. Eventually, that lead to me making a script that adds 🗿🍷 to every thing I type on my pc. And now this. I want this to spread. I WANT CHAOS!

Starting to work on the bot. This one actually has a lot of backstory that I'll explain in a later devlog I guess.

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.

This project actually took me so long that between photos 1 and 2 in the devlogs I got a new chair and new bed. I hope you like, this was genuinely difficult, but, the thing is, next time I'll do it twice as fast, the time after that even faster and after that, you get the point. Reach for the stars.

I also submitted and presented the project on a competition. It was an international one, although it was mostly just all-Ukrainian (yes I live in Ukraine, hello), it was still big and there were hundreds of participants if not thousands. And I got second place in the AI project category, although there were only 4 projects to even pass into finals, there definitely weren't a lot of submissions there. And they didn't even assign the first place to anyone. The reward was a 2500 UAH ($60) gift card for a tech store which turned into a controller, power bank, and a pillow (yes, I found a pillow there). That was actually really generous of them, and I'm glad I participated, even if I had to write a lot of bureaucracy for it.

To transfer data to the physical device I used, Bluetooth Low Energy - Bluetooth's slightly superior but still almost just as bad as the entire protocol, little brother meant for short burst of info, like switching a lock on or off for example. The rest was wiring it to a ESP32, some LED's, and a cheap wood box with 3D printed bits.

The software part of this was kind of pain, because a library for properly using BLE with Tauri only appeared literally a month before I started developing my app, it's very fresh. I initially just used Btleplug, but that apparently didn't work on mobile, and I wanted to make a mobile app as well, luckily our boi @MnlPhlp on Github recently made a library for just that, it's kind of janky though, but after a few or more than a few days of trial and error it did the trick.

Unrelated but I've been listening to this song on repeat for a while now, such a banger

The app is made in Vue, because Vue is nice.
Tauri makes it into a desktop and Android app.
The AI part is made using Google Mediapipe. They had a similar example and a gesture-recognizer AI, so I plugged it into my app.

The hardest parts were the AI, the UI, and making Bluetooth Low Energy work. That's to say, everything was the hard part. Tauri is great, it's the simplest and simultaneously most mature (since it has the years of web standards and development behind it) ecosystem to make an app. But it's also very new, unlike for Electron where every path had been trampled over, for Tauri you need to figure stuff out, which is particularly annoying for Android, although that's barely in alpha. It was quite difficult, but it was a lot of fun (ish). Then I had to spend just as much time as I spent on the project writing very formal documentation and reports for it because of college bureaucracy.

It's also funnily hard to capture these on camera, you have to play around for a while to get the settings right. In real life you can totally light up a whole room with it at maximum brightness though, not as much as a lightbulb but enough to clearly see objects, it looks amazing irl, I wish it was easier to convey this through a camera. A runic matrix like this on camera suffers from Moiré a lot (google for it, it's interesting as hell), and they work by displaying an image every small portion of a second, for our eyes it looks static but in reality it's going on and off lots of times a second so if you tune your camera wrong, you can sometimes see half the image or even no image at all despite it being there if you look at it in real life, funky effects.

As for what I did in this hour in Hackatime, I added Ctrl+z undo because it's been bugging me, polished a few things and tried to draw Hatsune Miku, that went horrible though, no, no, no don't post iTT NAAWW-

This project existed as an idea since November 2024, it was a college yearly final project. And I got around to making it this Spring (that's why there's so little time on hackatime lol).

You can try out the demo right now! 👍

I actually developed the majority of it in 3 days working non-stop on a weekend, due to a tight deadline before the hardware parts arrived so I could actually work with them. That was kinda fun ... (no it was pain), but it's all worth it.

Backstory

I made the entire project for my college lab this Spring. Right now I'm mostly just publishing it + doing a little bit of polish. A friend also minorly helped me out in places as well, though he was pretty useless... The whole Tauri app ecosystem is very young, and it's actually really interesting to develop apps for it, although with that comes an immense amount of jank to things being very early in development (mostly for mobile), I already made a few things with Tauri so I've used it. Vue has been my favourite UI framework until I finally decided to try out Svelte, and I used Vue for this one, it's still a very nice and intuitive framework, great developer experience.

My whole development is kinda very shortly documented in the #how section of the Github readme, check it out!

This project is an app, available on Android, Windows and Linux, and requires a hardware part for its full functionality.
The app is developed using Vue, because Vue is nice, and made into a tiny and really fast app with Tauri.

Here's a video I sent to my mom at 3 am when I made this

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.

Also an interesting thing, there are a few popular js markdown libraries. Marked.js is most popular, it's lightweight although harder to modify if necessary. There's also Showdown which doesn't use the Commonmark standart. And Markdown-it, I picked it because of the plugins specifically and ended up making one.

Made some changes to the demo, and now ready to ship!

Now I post the package to both to npm and github's registry automatically. Also today i woke up to a 500 download popularity jumpscare just to take 3 seconds of brain time to adjust and realize it's all scrapers. Courtesy of me posting like 10 versions accidentally previously.

Anyway, posting to both registries would've been easier if my namespaces in both wouldn't have been different, I think on github you have to use your username, which is @maksiksq in my case (maksiks was taken long ago), and on npm I use @maksiks. So I just forced ChatGPT to make a script to rewrite the package.json every time I run my custom command to publish to both. Voilà.

Then it was just reading docs and articles and setting it up.

In the first devlog, I said it's a lot of set up to make my npm package output both CommonJS and ESM, but guess what I did.

Thanks to Rollup's great documentation, it was actually really easy. I had to fiddle with configs a lot but it's really all just adding some rollup plugins and reading the console as the error pops up for you to fix it.

Rollup is a module bundler, a thing that bundles things together. I knew of it before this but never got to use it until now.
As shrimple as that, now my plugin can be used both with require() and import.
```
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import typescript from '@rollup/plugin-typescript';

export default [
{
input: 'src/index.ts',
output: [
{
file: 'dist/index.cjs',
format: 'cjs',
exports: 'auto',
},
{
file: 'dist/index.mjs',
format: 'esm',
},
],
plugins: [resolve(), commonjs(), terser(), typescript()],
},
];
```

Another thing I'm using is Terser, it's a minifier. What's a minifier? It squishes your code so it takes up the least bundle size. That's why if you go to the source code of a React app for example instead of component names you'll see like 'm' and 'r', same for Minecraft mods and lots of other software.
When you're forced to download 50 libraries for your brand new project it's actually really nice to shave up a few megabytes or ten so your thing loads faster. I could also include mappings so you can actually debug the errors if some occur but the package is so simple and i'm lazy so no.

Next up probably the ability to post both to npm and github packages with some ci because this is starting to bug me really hard.

We need more 10+ hour certified projects, so I decided to push this with features till 10 hours, just for the funsies of it.
I've spent most of this time smashing my head on the table solving issues that I'm unfamiliar with, though.

So now I'm adding custom classes so that you can style the markdown-it image without making some global styles. Well, I'm a liar, I already added that. To do that, we simply take in more arguments in the exported function from the package, and then I had to figure out the logic to make it conditionally add the class with some ternary operators. Getting it right was actually funnily the hardest part but I did it anyway.
A nifty command that exists is npm link (i use pnpm though), it allows you to access your package without publishing it by making a symlink (like the ones on your desktop) in the global folder for node modules. It updates every time you do pnpm build. Nifty as hell!

Another important thing it to not forget to document changes like these, or else no one is going to find out unless their IDE suggests it to them because of typescript.

There's not that much to devlog, frankly. This is a pretty straightforward library. I already knew how to make an npm library from my testing yesterday, although I did encounter some interesting issues on my way.

Markdown-it has a plugin system and some really old-looking docs, but they're understandable, particularly as I had an example already. The actual library part just took some minor edits and prettifying the whole thing.

For the library to appear on your GitHub repo's Packages page, you have to use GitHub's package registry, which is apparently a separate thing from npm. So you have to annoyingly log into two registries every time if you want to publish for both, unless you set up some custom CI, which is too much effort lol. Quite a dilemma.

I also found out that with TypeScript you can ship your files as an ESM module (newer), CommonJS or, with more setup - both. You need to setup some settings to make it compatible for both, which took me a little while and 9 whole public versions that should've totally been a single development one.

I'm making this for a future project of mine as well, gotta wait a little longer for that though.

Making the demo with Svelte was really easy, I know Svelte pretty well at this point and didn't encounter any issues there, but it was a little fun thing. Hosted it on Vercel because convenience, and downloading your own library feels pretty nice.

Next up is adding a custom class to the caption, which should be rather straightforward as well.