DEV Community: orangishcat

I learned art, design, and webdev to create my personal website!

orangishcat — Mon, 10 Aug 2026 01:20:34 +0000

Intro

I've never made a personal website before. If I was ever going to do it, I would do it now, during summer break. I've done plenty of webdev over the past two years or so, and I think I know just about enough to make the best personal website I could make.

A month and a half ago, I sat down and listed all the ideas I wanted to do for my personal website.

Most importantly:

Must be my own design. No templates, no AI, must be my work. I should be able to enjoy the process as well. The website must be personal, and I must enjoy spending time there.
- Draw inspiration from Neocities. The retro style with hand-drawn art is exactly the style I'm going for.
- Make it based upon my real life a bit. Like, use my real room for example, but change some stuff.
- Some things that would appear in my room: a plant, my desk setup, a cat similar to the one in my pfp, and more.
- This is kinda supposed to be like a portfolio. Fit in a bio somewhere, and maybe some links to a blog and whatnot.

Looking back, I'm quite surprised at just how terrible the earliest drawings were, and how easily I managed to make the later ones. Such is the importance of learning new skills. It's fun and also very rewarding!

Alright, the final finished website is on https://orangishcat.github.io. Next are all my devlogs, fully unedited. I highly recommend giving them a read, it feels like I became a totally different person after the project.

2026-6-3

I have no idea how to draw, and this is my first time. I've procrastinated for about a week already because I know this is going to be hard. And I'm also starting with the hardest thing to draw: the cat.

I started off with a 256x256 canvas, then realized that was too difficult for me to handle given my nonexistent skill. I then downscaled to 128x128, then to 64x64.

Long story short, I fiddled around a long time with no clear results. But I have learned a few things:

Drawing actual lines is too hard. I'm going with pixel art.
Krita is actually a really nice piece of software. 10/10 would recommend. And it's FOSS too!
I'm gonna have to use reference images pretty heavily.
I'm pretty terrible at this. Hopefully things will improve...
I'm glad I went with pixel art. How am I meant to draw the eyes? That would be an absolute nightmare if I didn't choose pixel art. I know literally nothing about drawing.

Revision #7

Revision #8 Added spots

Revision #15 adjusted the head position a bit to make it look better

Revision #16: Adjusted the face and the shape of the body

Total time spent today: 4 hours?
(these are all estimations as I'm not really time tracking for art)

2026-6-4

Any artist looking at this is probably losing brain cells right now.

By the way, I make a new revision every time I make a potentially breaking change that I might want to revert. So Day 1 consisted of a lot of experimenting. Hopefully things will stabilize now...

Revision #17: Adjusted the face, moved the head like 10 times so that the position made more sense.

Revision #18: Added whiskers, adjusted the spot pattern and added some white for the belly

Total time: roughly 2 hours

2026-6-5

I had an interview for a robotics competition. I had plenty of time to draw, but my brain refused to stop thinking about the interview so I just didn't.

I set up the Astro template for my website though.

The robotics interview went pretty well. Yay!

Total time: 14 minutes

2026-6-6

Maybe I should have googled "cat proportions" or something before this. The drawing has started to make sense, but it's clear the proportions are off.

I've run out of ways to adjust the cat for the most part. But a lot of things are still glaringly wrong. I tried to make it look cartoonish to play off all the issues, but they're still making my drawing look a lot worse than it could be.

Some issues:

The head is too big.
It looks as if the cat has no neck.
The face expression is supposed to be minimal and cartoonish, but it still looks kinda bad.
The tail is disproportionately thick.
The legs are too thick.
I dunno how else to describe it, but cats are extremely long. The body in the drawing is definitely not long enough, and too thick.
I found a good reference image to compare my original drawing with, and it becomes pretty obvious what I'm talking about.

Source (Alvesgaspar on Wikipedia)

Revision 1

New drawing time!

I'm not quite satisfied with the cat design, so I'm redoing it. I'm gonna draw it in a sleeping pose so I don't have to draw sprites for like walking animations and stuff.

Nevermind, this is taking way too long. Let's just copy the original design and modify the shape.

In editor screenshot 'cause why not

My reference images:
3D Cat Billboard in Shinjuku, Tokyo (from a video I took while I was there in the summer of 2024)

Kylahhill on Pinterest

Oliver_Johnson on Shutterstock

Revision 2: made the head smaller

I did it again, the head was too big. So I fixed it.

Revision 3: Fixed the coloring

I realized that the coloring didn't make sense. You would usually see stripes like these on an orange cat, not a calico.

Also I got distracted and read a post on calico cats. Basically calicos have three colors in their fur, are 25-75% white, and from what I can tell, their fur colors are mixed pretty evenly. So that means redoing the coloring.

This is pretty good. I could probably adjust the color a bit more by adding some blending between the fur colors and whatnot, but this is pretty much done. The size of the spots are a bit too similar, but I don't have a good fix for this so I'll just leave it as is.

Total time: 2 hours

2026-6-7

Ok moving on. Let's draw a plant to put on my table.

Nah, not the right vibe.

Reference image source

This plant is apparently called a dumb cane, and is a beginner friendly indoor plant.

Ok, that's better.

With some color

added the leaf veins

Final result

Pretty good. I could add some horizontal veins and improve the coloring a little bit, but I'm getting tired. For now, this is done.

Total time: 2 hours

2026-6-8

Drew this.

I needed to make the screen a slightly bit more interesting, so I added a splotch of gray and then aggressively blended it with the Blender blur brush. Now the screen looks like it's been smudged with fingerprints. The AVIF image compression kinda ruined the effect a bit, but that's fine. The effect still works out pretty nicely.

For improvements, I definitely need a bright accent color and incorporate it into the drawing somehow. This is good for now.

Fortunately, the cat seemed to be by far the hardest thing to draw. Hopefully that means smooth sailing from here?

Total time: 1 hr 15 mins

2026-6-9

Used the same technique to brighten the frame of the keyboard. I'm too lazy to figure out to draw a bright spot on the screen so whatever, leaving it as is.

I also stared at a blank screen for 20 minutes trying to figure out the layout of the website.

The biggest challenge was definitely how to fit all the content I wanted to, such as updates, bio, and blog, while leaving space to view the art and assets I had spent a long time making.

Plus, since this is based off of a front-view of my room, it would be very challenging to create a scrollable section in the website. Like what would happen if you scrolled an image downwards?

I'm tempted to use the computer screen as a scrollable section, but I had already decided that the computer would be purely cosmetic.

Total time: 45 minutes.

2026-6-10

Yeah so progress started to slow down...

June 10: I spent 20 minutes and couldn't think of anything.

June 11-15: I was busy preparing for and attending robotics competition, and had no time at all to work on this.

June 16-July 7: Traveling. Although I had time, I didn't feel like it and wanted to enjoy the vacation.

2026-7-3

Finally I've done enough work to the point where I can at least make some sort of devlog from it.

It totally hasn't been 3 weeks since the last devlog...

Layout would look like this:

I still need to draw a banner to place on the top, fix up the clock, and replace the table lamp with a hand drawn version instead of a downscaled version of a random image from Amazon.

Not sure what to do with the window, either.

I will definitely be using a grid view (similar to Supabase's landing page) where there will be my about me, projects, blog, etc. taking up each panel. I might make it appear immediately after the user scrolls down on the webpage, or I might make it replace the window. I'm leaning towards the latter option, as otherwise I'd have to draw something for the window, which would be super annoying.

Annoyingly, I pretty much abandoned my original idea for the layout, where you hover over items to reveal panels such as the about me, but that doesn't really fit a personal site very well. For most personal sites, all you need to do in terms of interaction is read and scroll down on the page, and all the important information should be present in front of you.

I also drew the title banner (won't be including the background pattern in the actual site, I'll make something else for it). My reference for this was neon lights, as I had the idea of a glowing neon banner at the top of the page. However, I didn't really execute the neon effect that well, as if you imagine each letter as a neon light tube, they would be too thick. The glow effect also kinda sucks, because I was lazy and just used Krita's fill tool with some feathering. It recreates light scattering decently, but it's not the greatest.

Also, the text would've looked much better in lowercase. Didn't think that one through.

Total time: 4 hours (since the last devlog)

2026-7-4

Did the clock. It's a very rough drawing, but it gets the job done.

This is an exported image of the table as of right now. I need to replace the desk lamp, but it's getting pretty close to completion.

Updated layout: (not drawing the window that will take forever)

the main content and bookshelf won't overlap in the actual site

I started coding a bit, and it seems like taking up so much vertical space just doesn't make sense. The layout might need to change again.

Total time: 3 hours

yeah, this project is starting to take too long.

2026-7-6

Stuff is happening. The page layout is already different as the desk setup is part of the main content rather than scrolling. Now I need to decide if I want to change the bookshelf on the left and screen on the right as was originally planned in the layout.

Total time: 2 hours

2026-7-7

I changed the layout again. Hopefully this time will be the last.

Also improved the styling of the homepage.

Remaining tasks for the website:

Add more content to main page
Add Projects page
Set up the blog
Figure out how to use remaining assets
Make the clock display the user's time
Add custom icons for entries in the links and socials sections
Bookshelf asset + move devlogs there
Add something as the background (e.g. rain, moon, stars)
Polish all assets That is still a lot of tasks... but the layout and design (which is what I struggled with the most, basically stalling the project for like 2.5 weeks) seems to be fully done, now only the implementation remains.

Total time: 2 hours?

2026-7-9

I'm in a summer program now. I'm actually writing this devlog and all the ones until July 14 on July 14, since I've been doing work occasionally in the background without logging it. I've spent my remaining free time working on this project, here's what I've been up to (according to my commits).

Created a separate component for the links on the right sidebar, and adding it to the About me page.

Also moved the cat into the links component, as I've decided I want it there all the time.

The text is currently the same as the index page, I'll figure out something new to write later.

Total time: 30 minutes

2026-7-10

Set up the blog. I'm gonna debug it further when I get an actual blog post in.

I also added a robots.txt that allows search engines to crawl my entire site if they wanted to.

Total time: 30 minutes

2026-7-11

Finished the content in the homepage!

And yay, I used the computer for what I intended it to be used for: displaying stuff on the screen!

The video is intentionally very low resolution, it fits the pixelated aesthetic of the site. Right now it's just my top play in osu!, but I want to put bird videos, cat videos, memes, etc.

And I also changed out the about me too, so it doesn't repeat information on the homepage.

Total time: 2 hours

2026-7-12

Animated the clock.

Since I didn't have any resolution for the am text, I actually tripled the resolution of the image. But it still fits in surprisingly well.

And I animated the cat too!

I learned a lot about how to use Krita's animation features.

The animation is just a linear fade-in-out animation for each of the three z's, where there is one for each layer and offset for each layer.

And the clock is even simpler, it's just two frames, one with dots, one without.

One caveat was that GIF images don't support partial transparency. I was too lazy to figure out how to do a color transition instead of an opacity transition (I'd have to transition the color of the Z to the background color of the website). So instead I converted all my animated images to APNG.

Then I got GitHub Pages deployment working.

I found out that instead of using the base img HTML tag, I had to use Astro's Image component, otherwise all the assets in /src/assets would not be included in the built output.

Instead of fixing it properly, I just dumped all my assets into public/, changed the paths, and called it a day.

Total time: 4 hours

2026-7-13

Projects page!

Projects list! (in the homepage)

Devlog book!

This one was fun to draw. I used the book on https://kuroi.neocities.org/ as a reference on how to draw a book, then I drew my own.

It turned out surprisingly well! I went for the look of a non-spiral notebook, but I think it fits better.

I also learned how to use a transparency mask in Krita to create the beam of light, and how to animate a transform mask.

Total time: 4 hours

2026-7-14

Everything was completed, except for the blog post.

Then I spent like an hour fixing the blog. First it was fixing the content collection to load it from the blog site properly, then it was passing the table of contents to the blog's layout component so that it could render a post's table of contents.

I also made a favicon for the site, it's very basic.

I can't believe everything is done.

Total time: 3 hour

2026-7-15

The site is fully up and functional, and could be considered done. Some few remaining tasks:

Background image. This one is important as not having one bugs me a lot.
More animations on the images. Like do one for the plant and definitely the banner.
Separate background image for the blog.

Ok I'm making a background image.

I was wondering why I couldn't erase this, turns out it was a reference image I somehow pasted in.

Background. btw, the little dipper is on the top left!

Stars only; just an upside-down image of the background with the moon removed and the stars scattered a bit.

Now I could do a grass overlay on the rest of the images, but maybe later. The project is fully done now! Everything works amazingly, and I could not be more satisfied with the outcome.

Total time: 4 hours

Final thoughts

The website is done. Fully done. There are improvements that could be made, but everything is functional and looks great. As with most projects, I will have to leave some stuff for the future to complete, as I need to be done with this project and move on.

Originally, this website was supposed to take 2 weeks max, but it instead took a month and a half and 30+ hours.

Remaining tasks for the future (in order):

ANIMATE THE STARS
"ground" background image to place at end of page (e.g. grass, stardew valley, or drawing of a street with houses)
Animate more assets (most importantly the banner and plant)
Add a music player
Add more easter eggs to the computer screen

Alright, let's summarize what I've learned.

Pixel art! I gained so much experience with using reference images and different techniques to achieve my desired drawing. Definitely my biggest gain from the entire project, I had no idea I would improve this much.
Krita! One of the best art programs out there (if not the best), yet 100% free and open source!
Astro! Friendship ended with SvelteKit, Astro is now my new favorite web framework. Its built-in routing and mdx support is amazing.
Writing blog posts! Like this one! The only time I've ever documented my progress was after I had finished my project. Bad idea. These devlogs literally showcase an entire character arc.
Finishing projects! I have a slightly better idea on how to manage my time and finish a project, hopefully the next project won't take any more than 2x longer than expected.

These final thoughts probably don't do my learnings justice. But I really need to wrap up the project, so I will be ending it here.

The end!

Reflection (1 month later)

It's been nearly a month since the site was finished, and honestly, it feels like a weight off my chest.

I've gotten so used to having a bunch of half-finished projects that having a completed one feels incredibly unusual.

Unlike my other projects, this site does not need any maintainence. If I edit the site, I'm almost always adding new content
or writing a new blog post.

Practically, having a personal website is highly useful. It's a centralized place where my projects and activities reside, and a good marketing tool as well. I can drop a link to my site if anyone wants to know more about me, and I don't have to individually tell other people what I've been up to.

Besides, blog hosting (e.g. Medium) feels very predatory these days. Large companies essentially have full access to your work, and who knows what they will do with it. Their site experience is often terrible, with ads, trackers, and paywalls throughout the page, and it's not something I want to be associated with. As for something this personal, I needed to feel like I had true ownership of my work, and I also wanted to have the ability to customize the webpage surrounding my blog posts.

Joining Neocities

This site is dual hosted on https://orangishcat.github.io and https://orangishcat.neocities.org.

I usually use Neocities as it gives me a view counter, and number go up make me happy.

More importantly though, it's a great community. Neocities was one of the biggest inspirations for my site, and I'm honored that I can and am allowed to contribute something to the platform. I'm glad to know that out there, creative people making cool things still exist.

I might consider joining a webring someday.

I'm also, like, probably the only person to use Tailwind CSS on the entire platform.

Site changes

I updated my socials and my games list. There are, as it turns out, lots of cool games out there.

I also made my first Rust project, so I will be adding that to my projects list too.

Conclusion

I'm pretty proud of this website. I've never really made something so personal before. I partially wish I had done it earlier, but I'm also glad that doing it this late means I had enough webdev and art experience to execute it well.

Thank you so much for reading.

Page Proxy v0.2.x: the boring 'polishing' work and why I think it matters

orangishcat — Fri, 10 Apr 2026 22:48:12 +0000

This is the second devlog for my Chrome/Firefox userscript manager extension, Page Proxy! Here I'm gonna cover v0.2.x, where I'm still trying to figure out what direction I'm planning to take the extension in.

Refining and QOL work

This is what I would normally call "polishing" work. It gives the extension much-needed features and fixes long-standing bugs. This stage, I would say, comes after the "minimum viable product" stage, where you just need to get something working as idea validation.

After you get your initial users who are interested in your idea, keeping them becomes very important. This is where usability comes in, and to make a product with good usability, it must have adequate features and minimal bugs.

Extension early stage

At this point, I had a solid main idea of what I wanted the extension to do: turn page interactions into reusable userscripts.
But the extension was lacking a lot of features, so I had to find the order which I wanted to implement them in.

Roadmap

Website homepage
Create tool:
- Create a settings UI for your script (or any UI) easily
- Create components
Settings page for the extension
Multi-file scripts
Local scripts
Export to Tampermonkey userscript, CSS stylesheet, WXT extension
Import/export with Figma
Sync to cloud storage (Appwrite backend)
Userscript discovery, sharing, and collaboration

Now I had a good idea for what I wanted the extension to do.

But for v0.2.x, I started with the missing features.

The inconvenience I wanted to solve

While pq.selector could do a lot, sometimes it is simpler to just write CSS instead.

Using JS would be a waste for doing things that CSS can do already. Worst of all would be using a JS pq.selector just to inject styles on every matching element.

So I made a CSS inspector!

CSS Inspector

The CSS Inspector (above) works similarly to the selector popup added in the previous version, but it directly allows you to apply CSS rules to a pregenerated selector for the element.

And there's a nice dropdown that allows you to switch between this and the selector popup.

On the right side of the CSS inspector is a properties list, similar to the one from the other selector. Placing the mouse caret over any part of the main CSS selector will provide documentation for what that CSS keyword does, which essentially acts like built-in documentation.

As the tooltip says, you can also hold z to highlight matching elements in lime or x to preview styles applied in the editor.

I also added a button that can bring you to the CSS inspector page directly from the Select Tool.

There's also some other features. Like, you can view the computed styles for the selected element! It's very similar to the computed styles in DevTools. If there are :nth-of-type selectors in the selector, a link appears to remove them easily. The CSS selector syncs with the baseSelector field in the selector popup as well! Anything to avoid repetitive copying.

Upon hitting Save, it adds a ps.injectCSS snippet into the editor, which will directly inject a style tag into the document head upon script run.

Other QOL features

run-on-page-load grant

Before the update, the script wouldn't even be able to run on page load, and you'd have to click the run button manually every time. Fortunately, I added a @grant field to the metadata. It only accepts one value as of now, run-on-page-load, but it allows the script to execute automatically. A much needed feature.

// @grant run-on-page-load

Upon reload, it will create a dialog asking the user to grant permissions, like this:

Then it will ask the user to reload to apply updated permissions.

Help tool

Previously it was hardcoded into the extension. Now it fetches from the Github repository's HELP.md file, and rendered nicely in markdown.

DevTools integration

Added a wrench button in the select tool panel that appears when DevTools is open on the active tab. When clicking it, the selected element will match the selected element in DevTools. Highly useful for when the select tool can't select the element you want, like for example if its bounding box is covered by the bounding box of another element.

New APIs

pa.moveNode to move a node elsewhere, such as to a parent node, or before or after another node.
pv.pressKey to press keys programmatically using JS.

Editor persistence

Previously if a script was unsaved, switching to another tab without saving would cause you to lose your changes. Not anymore. Now a warning message appears and forces you to manually save before continuing.

It does not handle the extension sidepanel being closed, though, as there is no way to prevent it. The only solution in that case would be to autosave, which is risky as if there are bugs in the implementation someone's userscript can get overriden with the default script, causing them to lose it entirely.

Selectors tool

I gave it functionality by displaying highlighted elements upon hover.

Error handling

Errors are less likely to be silently swallowed now, and surface more clearly. It still needs a bit of work though.

Moving on to v0.3.x

v0.2.x added some much needed polish and a crucial CSS Inspector. It wasn't much, and ended up only being three versions, v0.2.0 to v0.2.2. That just means there were less features.

Oh and I also changed the storage format, which ended up causing some scripts to be lost. It was okay as I still don't have that many users, but I definitely need to be more careful with that next time.

Final thoughts

I think it's okay to be still figuring things out, and not just for your project either, this probably could work as life advice too. Changing directions in software development or in general is perfectly okay, and it allows one to refine and test their designs, and also throw out ideas that just don't quite work.

Of course, I definitely could have planned my features more thoroughly. The CSS Inspector as the main feature in v0.2.x is probably fine, but the rest of the polish would probably make more sense to be done in v0.1.x. Like having a method to inject CSS (ps.injectCSS) should have been like one of the main features of the custom pp-api. And making a breaking change to the storage format was definitely not a good idea. Could have used some planning beforehand.

Also, I started to use AI for coding a lot for this project. My AI setup is just Codex and some basic skills like superpowers, but it works pretty well. AI-generated code certainly isn't as clean as handwritten code, but it handles edge cases pretty well. Previously I found myself spending a lot more time passing states between components and fixing type objects, than spending time implementing actual functionality. So it's nice that AI allows me to go back to focusing on features, rather than type errors.

But the great thing about agentic engineering is that the product is still the output of my creative work. All the designs, the raw flow chart, and all my ideas are all me, and I've documented them in the Figma file and my devlogs. AI is just speeding up the implementation of those ideas, in a controlled manner.

The landing page is still looking pretty barren... definitely need to do that earlier next time.

I think that's it for this devlog. If you want to stick around, maybe I'll see you for v0.3.x?

Try out Page Proxy, and maybe give me some feedback? I'd also be interested to hear about your thoughts on AI and whatnot.

I built a GUI-powered Userscript manager to turn page interactions into userscripts!

orangishcat — Sat, 04 Apr 2026 04:04:56 +0000

I made Page Proxy, a Chrome and Firefox extension that converts page interactions into reusable code via Userscripts.

This is my first project I've ever released. Please try it out and give feedback! Would be really appreciated.

Why?

I've always found messing around with userscript managers like Tampermonkey quite fun; I could fix websites and change their behavior to my liking. But it took me roughly 15 minutes to go from idea to code, then 30 minutes to an hour just to debug and polish the script.

The first issue: juggling with DevTools windows, copy-pasting CSS selectors, and debugging my scripts was incredibly tedious.
I'd mostly have to rely on print debugging, then I would have to reload the page every time and search through the console for errors.

So I wanted a way to quickly generate CSS selectors and code. I wanted something similar to DevTools, but has integration with code and selector generation to speed up userscript development.

Second of all, there were many reoccurring patterns in all of my scripts. For example:

Do something on key press:

document.addEventListener("keydown" ev => {
    if (!ev.altKey) return;
    if (ev.code === "KeyV") {
        runFunction();
    }
});

Press a key using JS (e.g. Escape):

const escEvent = new KeyboardEvent("keydown", {
    key: "Escape",
    keyCode: 27,
    which: 27,
    bubbles: true,
    cancelable: true,
});

document.dispatchEvent(escEvent);

So I wanted to make an API that included all of these common usage patterns out of the box.

My philosophy

The product should solve:

GUI tools for userscript creation to make it less tedious
API covering common use cases and code patterns

The product must remain:

Accessibility: The extension can be complicated, but it should be easy to use. Add help docs (or links to them) everywhere.
Break-resistant: If a website's CSS classes change, the script should still work or at least be easy to migrate.
Integration: The extension should not replace any other tools. Keep Tampermonkey compatibility, integrate with DevTools.

Planning and design

Note: this was the first ever design sketch of the project. The extension has probably strayed quite far from it now.

I learned how to use Figma and some common design patterns. Designing my own UI has always been a goal of mine as a programmer, so I'm glad I was able to do that for this project.

Plus, I really disliked the overused blue-and-purple palette signature of AI website design. So using Realtime Colors, I chose a simple orange and lime color palette.

If you're interested, here's a raw, unedited flow chart of the features I wanted in Page Proxy that I threw up in an hour or so.

Initial design

I originally wanted to make Page Proxy a web app, mainly so it would "be unique". I quickly realized that unique does not always mean that it's good.

From a technical standpoint, the web app quickly became a terrible idea. Websites won't function due to CSP, and they certainly won't keep cookies, rendering pretty much all content behind a login screen completely inaccessible.

Besides, it just didn't make sense at all. It would be much more convenient to create an extension side panel, allowing it to be easily accessed, like DevTools.

Old design:

New extension design

After some designing, I came up with this:

I finally loved the design. It was significantly cleaner, and I also was incredibly proud of myself that I could make my color palette work so well.

It's similar to DevTools, but I kept the top toolbar as buttons. This fits the design very well, keeping the UI large-scale and with self-explanatory icons.

I liked this design for its simplicity. While DevTools, for example, was feature rich, it also had quite a steep learning curve, and a very dense, packed UI. I wanted to do the opposite; with the features I am planning, I wanted to prioritize ease of use, and I had no need for such densely packed features.

So the natural next question was: what tools do I want to add?

Tools

Select tool: Similar to DevTools' inspect element, but provides additional information like selectors, attributes, and more.
Create tool: Create components (like in web frameworks like React and Svelte) in scripts
Selectors tool: List CSS selectors and their properties
Help tool: Help links and stuff
Export tool: Export the script in a variety of different formats.

Now for the bottom half of the sidepanel.

Code editor

JS code editor
Has highlighting and autocomplete
Inspiration: Tampermonkey editor

Total time spent in design phase: 10 days. Probably only a few hours overall, but designing kinda felt like a chore since I was so new to it, which is why I didn't have the motivation to spend much time on it per day.

Implementation

Setup

I split the monorepo into web and extension directories.

Some library choices:

Package manager: bun
Web framework: Svelte
Extension framework: WXT
Components: bits-ui
CSS: tailwindcss
Icons: lucide-svelte
Network: axios (no I was not affected by the breach, because I update my packages like once a month)
Test: vitest
Code editor: CodeMirror

Actual coding

And implementation began. It was a bit rough at the start; the first implementation did not look good.

Along with the selector panel, I added a popup centered on the main page that provides element information and a selector builder. This helped identifying elements much easier, as unlike DevTools, all the selector information was all laid out already for me to convert into code.

The API

Original API layout (changed now):

pq: stands for pp-query, contains methods related to querying and traversing through DOM elements.
ps: pp-style: A module for style helpers
pv: pp-event: A module for callback-based event selectors For the methods that were added, view the old documentation, there's too many for me to list here.

The three files was placed in the extension directory, serving as a library containing the modules.

Also at the top of each userscript, there must be metadata. Similar to Tampermonkey, it had @title, @website, and @description to describe the script, and it is autogenerated upon new script creation but is very much editable.

// ==Page Proxy==
// @title Page Proxy
// @website
// @description
// ==/Page Proxy==

The editor

Looking at the above screenshot, the editor looked, well, not great. Code syntax highlighting broke often, and required a lot of maintenance. There were no line numbers. The entire container was offset for some reason. It was overall a huge pain to fix.

So I switched to Monaco editor, the same editor that powers VSCode. The extension instantly became a few MB heavier, but it was definitely worth it. Monaco editor was extremely powerful, with all the standard editor features such as renaming variables, syntax highlighting, and more just out of the box. I'm so glad I didn't have to implement any of that myself, yet it's available for everyone to use.

For autocomplete, I eventually hacked together a solution that generated type stubs from the API and passed it into Monaco editor. That temporary solution is still being used today. If it ain't broke, I ain't fixing it. It's probably staying in the codebase for good.

Nearly two months of coding later

The extension looks much more polished now. It was also functional enough that I was able to actually make and run userscripts on it.
I had spent way longer than expected on the project, and decided to cut some features for the initial release.
The select tool was finished fully, but the create tool was marked "Coming soon", and I settled on a simple display for the selectors tool.
At this point, I just needed to publish it and get some initial validation.

Demo website

It was quite plain, and didn't even have a feature list. I struggled a lot to explain the premise of the system in just 1-2 sentences. Even after publishing, the landing page remained incomplete for another two months.

Final polishes

Oh... no one could figure out how to use the extension. I've already tried to make the extension pretty self-explanatory, but I guess I still need to write some documentation.

Documentation

I used Docusaurus to host my documentation website. Although it used mdx (based on React) while the rest of my website was using Svelte, there just wasn't a solution that worked nearly as well out of the box. There I made some basic tutorials and wrote documentation for the API.

It was very primitive, but it got the job done, and eventually it was good enough for publish.

Bugs

I initially used script injection to run user JS in the page content, but that would be blocked by CSP on certain websites, rendering them completely inaccessible for userscripts. This was fixed easily by migrating to the UserScript API, but now users will have to enable permissions to run scripts on the main page.

Also, there were annoying Firefox-specific bugs that I had to fix, but they overall weren't too important.

The end of v0.1.x

For the rest of v0.1.x I just did some chores, bug fixes, and small features. I had made a basic sandbox for the userscript using @endojs/lockdown, but it didn't really work as it was extremely easy to bypass. I wanted to add functions, network access controls, etc., but it couldn't be done reliably without OS-native controls so I removed it in the last version of v0.1.x.

Initial validation

I published to Hack Club, and everyone who viewed my project thought it was pretty cool :D

Final thoughts

Whew! This is probably the longest piece of media I have written in my entire life. Evidently I have a lot to learn.

I'm ending the devlog at v0.1.x because as my first post ever, this took me like 3-4 hours to write. I've already added way more features in v0.2.x and v0.3.x, but I will get around to writing about them another time.

I learned a lot over this journey. This was my first introduction to multiple new webdev (and also non-webdev) concepts I had never interacted with before.

Figma: Probably my biggest reward from seeing the project through. I used to never plan out my projects, working things out as I go. Terrible idea. I eventually lost track of where I was going, leading me to lose motivation, and it's much easier to change a wireframe or Figma design than website code. Without UI planning, the UI doesn't look good and is quite clunky. I definitely also wanted to avoid the AI-generated UI look, so rolling my own would be a great learning process and would also look decent.
Svelte: I used React for a project once, but I hated it. I eventually became trapped in useEffect hell and gave up. Svelte gave me way less trouble; it handled all the dependencies and states easily without me ever needing to use a $effect.
WXT: Last time I tried making a Chrome extension, I gave up because Chrome refused to recognize my manifest no matter what I tried. WXT allows me to build extensions that are not only cross-browser using a unified API, but simplify the configuration as well. WXT gets a glowing recommendation from me.
Docusaurus: Not much else to say, other than it is insanely cool and works very well for hosting documentation.
GitHub actions: I learned to set up Actions workflows for basically whatever I wanted. I wrote build, check, deploy to GitHub Pages workflows using myself and some AI.
Dependency management: I configured Renovate to check for package updates. After all the package breaches that have been happening lately, I probably won't be updating any packages until they're each at least three days old.
Search Engine Optimization: I learned to add some basic metadata to the website for SEO.
Coding with AI: I learned to code alongside AI (no, letting the AI do everything didn't work) and speed up development, while I reviewed the code and kept the code quality as best as I could.

And as of v0.1.x, am I following my original goals for the project?

GUI tools: yes
API for common use cases: yes
Accessibility: yes
Break-resistant: no, not really; there were matchers based on other attributes like inner text, but CSS selectors were still much better
Integration: no, there's not much integration

But this is just the beginning, so I'd say this is a great starting point. I still have a lot of blogging to do for v0.2.x and v0.3.x.

If you think my extension is interesting, you can give it a try and maybe stick around as I devlog more of my journey!

This being my first project, I've probably never even written a blog post before, so I'm still figuring things out. Any feedback you have would be greatly appreciated!