As the title says, its an alternative e621 client. The reason I really started development on it was for more experience with APIs and Javascript which I def got.

Caspar621 allows you to do most of the things you can do in native e6. Really what's left to be added is post interactions such as favoriting. Caspar621 also allows you to connect your own account via your API key. Connecting your account is important if you want to look at NSFW/Q and blacklisted posts because my goal is to make accountless use as unsexual as possible whilst users can still view sexual content if they so desire.

I'm looking for feedback, bugs, and critique because my goal is to make the most user-friendly seamless e621 experience an alternative client can offer.

Caspar621 is located at https://caspar621.com/ and the github is https://github.com/MadjikDotPng/caspar621 !
Feel free to PR the repo and make issues, or send them in this thread.

Thanks ~

aakfan said:
Feel free to PR the repo and make issues, or send them in this thread.

Browser for all of this is Firefox 115.15.0, desktop Linux. I also have uBlock Origin 1.60.0 installed.

If I type something in the "Search" box and hit the Enter key, nothing happens. I have to use the mouse to click on "Search", and then the search works.

Once I do a search, I see a grid of images matching the search, which is OK. If I click on one of those images, I get a... pop-up window? In 2024?

The pop-up window is mostly black; it doesn't have an image in it. It does have some white text labels for "Favorites", "ID", "Rating", "Score", and then "Tags" and the various tag types, but all the data has a gray "N/A".

Looking at the console in the pop-up window, it reports an error:

Uncaught TypeError: id is undefined
    <anonymous> https://caspar621.com/imgload:61   imgload:61:19

Looking at that script, it seems to be trying to parse an e621 URL at that point. Line 60 does a console.log() of what it's found so far, and in the console, I see undefined imgload:60:17 right above the error message.

uBlock Origin doesn't report that it's blocking anything on the main page or on the pop-up window. Looking at uBlock's logger says that the pop-up window is trying to hit https://e621.net/posts/null.json, which may be related to the parse failure above.

If I run a search with the "Network" tab open in the console, I see the API hit, and then multiple hits to static.e621.net to load all the images. It looks like several dozen image hits are being fired off at the same time. I know the official API docs want you to rate-limit JSON to 2 Hz, but I don't think they say anything about rate-limiting on images on the client side.

The site and/or my Internet connection is doing a little bit of rate-limiting; the first 10 or so images come back in 75 to 130 millisec, the next 10 images come back in 220 to 730 millisec, and by the time it gets to the last images, they are coming back in 600 to 800 millisec. Not sure if that's a deliberate choice on e621's end (a setting in Nginx/Apache, Cloudflare, or similar), or just the fact that you can't stuff that many pictures down the pipe at once.

If I have a grid of search results displayed, click on the "Debug" preset, and then click on the "Next" button to see the next page, the page goes black, but no new images load.

kora_viridian said:
Browser for all of this is Firefox 115.15.0, desktop Linux. I also have uBlock Origin 1.60.0 installed.

If I type something in the "Search" box and hit the Enter key, nothing happens. I have to use the mouse to click on "Search", and then the search works.

Thanks for the feedback!
This is one of my first full-scale projects so I knew theres going to be lots to fix.

Enter to search is something I def planned and overlooked, its simple to implement so expect it by the end of today.

Once I do a search, I see a grid of images matching the search, which is OK. If I click on one of those images, I get a... pop-up window? In 2024?

The pop-up window is mostly black; it doesn't have an image in it. It does have some white text labels for "Favorites", "ID", "Rating", "Score", and then "Tags" and the various tag types, but all the data has a gray "N/A".

Looking at the console in the pop-up window, it reports an error:

Uncaught TypeError: id is undefined
    <anonymous> https://caspar621.com/imgload:61   imgload:61:19

Looking at that script, it seems to be trying to parse an e621 URL at that point. Line 60 does a console.log() of what it's found so far, and in the console, I see undefined imgload:60:17 right above the error message.

uBlock Origin doesn't report that it's blocking anything on the main page or on the pop-up window. Looking at uBlock's logger says that the pop-up window is trying to hit https://e621.net/posts/null.json, which may be related to the parse failure above.

The preview popup not loading the image was something I just realized after sending the original post, and made a temp solution for using localstorage instead of parsing the url params. I think the issue has to do with nginx but I'm not exactly sure. I also may just opt to open a new tab instead of a popup, or add the option to remove the popup (prob just gonna remove the popup, really only added it because it seemed cool like, a month ago lol).

If the post view page is still not working for you, maybe wait a bit because its working on my end, it just seems to take longer than it did when I was working on C621 with Vite.

If I run a search with the "Network" tab open in the console, I see the API hit, and then multiple hits to static.e621.net to load all the images. It looks like several dozen image hits are being fired off at the same time. I know the official API docs want you to rate-limit JSON to 2 Hz, but I don't think they say anything about rate-limiting on images on the client side.

The site and/or my Internet connection is doing a little bit of rate-limiting; the first 10 or so images come back in 75 to 130 millisec, the next 10 images come back in 220 to 730 millisec, and by the time it gets to the last images, they are coming back in 600 to 800 millisec. Not sure if that's a deliberate choice on e621's end (a setting in Nginx/Apache, Cloudflare, or similar), or just the fact that you can't stuff that many pictures down the pipe at once.

Image fetching and loading is something I really struggled and messed around with a lot during this project, I'll see what I could do about it.

If I have a grid of search results displayed, click on the "Debug" preset, and then click on the "Next" button to see the next page, the page goes black, but no new images load.

This part is kind of odd, but reasonable since I really really really need to polish how results are done. I'll see what I can do.

Again, thanks for your feedback! It means a lot to me

I have added pressing enter to search. (Surprising I didn't earlier on.)

I should probably add a detail of my setup: I have a single 1920x1080 monitor.

aakfan said:
Enter to search is something I def planned and overlooked, its simple to implement so expect it by the end of today.

Enter-to-search is working OK for me now.

The pop-up now loads a sample-sized image. For the below, I was looking at post #5126148.

Labels overwriting themselves

When the popup first appears, at 1000x900 for me, a couple of the labels in the popup overwrite themselves if they're longer than the allocated space. For this image, right under the sample image, I can see a first line of "You are viewing the sample. Click here to", and a second line of "view the full image" - but the top of the second line overlaps the bottom of the first line by about half a character height.

Similarly, the time label has a first line of "Created: Sat Oct 19 2024 21:19:06 GMT+0000 (Coordinated", and a second line of "Universal Time)", but the top of the second line overlaps the bottom of the first line by about 75% of a character height.

Interestingly, the "Updated:" label right below that wraps correctly - the "Time)" wraps to the second line, and it does not overlap the first line.

If I grab the right border of the pop-up and make it about 1400 pixels wide, all of the overlapping text fits on one line and displays correctly.

Tags not displaying correctly

On first pop-up load, at 1000x900, the "Tags" section in the pop-up displays some of the tags I see on e621 itself, but not all of them. The artist tags are there, and the "Character:" label is there, but it's blank below that.

If I right-click the popup and do a "view source", all of the tag labels and tags appear in the source. Firefox doesn't complain about the syntax of the HTML, and it looks OK at first glance. I do note that while the div class="left" does indeed start on the left and cover about 40% of the width, the div class="right" covers the entire width of the pop-up. I'm not sure if that's affecting anything, but I thought I'd note it.

If I widen the pop-up to about 1400 pixels, I get the character tags, the "Copyright:" label and tags, and the "Species:" label, but it's blank below that.

If I widen the pop-up to about 3100 pixels, the "Species:" tags fill in, and I also get the "General:" label, but it's blank below that.

If I widen the pop-up to about 4700 pixels, the first part of the general tags fill in. The end of the line is headwear,lake,light-.

If I widen the pop-up to about 7500 pixels, the second line of the general tags fill in (starting with skinned_male,light_body), and the "Meta:" label and tags fill in below that.

I think maybe you need to make the tags lists wrap somehow. :) This might be a CSS thing, or it might be as simple as joining them with comma-space instead of just comma.

The image I tried all this is closer to "landscape". I also tried it with post #5100262 , which is more "portrait", and I see similar things - some of the text overlaps, but making the pop-up window wider fixes it, and not all the tags display, but making the pop-up window really wide fixes it.

Image fetching and loading is something I really struggled and messed around with a lot during this project, I'll see what I could do about it.

It's probably good to ask the e621 staff about this. Like I said, I know they want you to rate-limit the JSON, but I don't know if they have a recommendation about speed of fetching images. They almost have to have some kind of rate-limiting for this somewhere, but it's nice to not bounce the needle off the peg if you don't have to.

Suggestion: Maybe you are already testing in more than one desktop browser, but if not, you're probably testing in Chrome/Edge. Test in Firefox too. If you have enough money to buy a Mac, you can even test in desktop Safari. :)

kora_viridian said:
I should probably add a detail of my setup: I have a single 1920x1080 monitor.

Enter-to-search is working OK for me now.

That's good, I added it almost immediately after your first reply.

The pop-up now loads a sample-sized image. For the below, I was looking at post #5126148.

Labels overwriting themselves

When the popup first appears, at 1000x900 for me, a couple of the labels in the popup overwrite themselves if they're longer than the allocated space. For this image, right under the sample image, I can see a first line of "You are viewing the sample. Click here to", and a second line of "view the full image" - but the top of the second line overlaps the bottom of the first line by about half a character height.

Similarly, the time label has a first line of "Created: Sat Oct 19 2024 21:19:06 GMT+0000 (Coordinated", and a second line of "Universal Time)", but the top of the second line overlaps the bottom of the first line by about 75% of a character height.

Interestingly, the "Updated:" label right below that wraps correctly - the "Time)" wraps to the second line, and it does not overlap the first line.

If I grab the right border of the pop-up and make it about 1400 pixels wide, all of the overlapping text fits on one line and displays correctly.

Tags not displaying correctly

On first pop-up load, at 1000x900, the "Tags" section in the pop-up displays some of the tags I see on e621 itself, but not all of them. The artist tags are there, and the "Character:" label is there, but it's blank below that.

If I right-click the popup and do a "view source", all of the tag labels and tags appear in the source. Firefox doesn't complain about the syntax of the HTML, and it looks OK at first glance. I do note that while the div class="left" does indeed start on the left and cover about 40% of the width, the div class="right" covers the entire width of the pop-up. I'm not sure if that's affecting anything, but I thought I'd note it.

If I widen the pop-up to about 1400 pixels, I get the character tags, the "Copyright:" label and tags, and the "Species:" label, but it's blank below that.

If I widen the pop-up to about 3100 pixels, the "Species:" tags fill in, and I also get the "General:" label, but it's blank below that.

If I widen the pop-up to about 4700 pixels, the first part of the general tags fill in. The end of the line is headwear,lake,light-.

If I widen the pop-up to about 7500 pixels, the second line of the general tags fill in (starting with skinned_male,light_body), and the "Meta:" label and tags fill in below that.

I think maybe you need to make the tags lists wrap somehow. :) This might be a CSS thing, or it might be as simple as joining them with comma-space instead of just comma.

The image I tried all this is closer to "landscape". I also tried it with post #5100262 , which is more "portrait", and I see similar things - some of the text overlaps, but making the pop-up window wider fixes it, and not all the tags display, but making the pop-up window really wide fixes it.

Now that you point all this out I am starting to see a lot of odd CSS choices I may have made and forgot about, most likely because I have a habit of not resizing my window to see how elements react.

I took a glance at

body {}

and saw what my "solution" to word wrap was.

body {
    background: var(--bgsecondary);
    color: var(--text);
    display: flexbox;
    font-family: mono;
    margin: 0;
    overflow: auto;
    line-height: 0.2;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
}

First off I did not catch the double overflow tags. Which is odd. But mostly what might be the reason for your problem for not all the fields showing is the overflow being hidden, instead of the text either shrinking or adjusting in some way. Another thing I noticed that may be causing issues with the word wrap is how the line height for all normal text is 0.2 as you see in body {}, but elements such as small text (the gray text used in tags) and the title (aka the description) which is in bold at the top. I noticed that those two things are the only things that wrap correctly if you shrink the window. I went in and changed the line height in body {} to 1 and everything wrapped correctly. I think what I wanted out of the 0.2 line height was to bring the <p> tags individually closer together, which it did, but it also brought text with more than two lines together. For everything else I may have to go in and change somethings to reflect the size of the window rather than being static.

I'll also have to change the way the text is even broken, because it cuts off words mid-word instead of wrapping the entire word. And also I need to make the "," a ", ".

It's probably good to ask the e621 staff about this. Like I said, I know they want you to rate-limit the JSON, but I don't know if they have a recommendation about speed of fetching images. They almost have to have some kind of rate-limiting for this somewhere, but it's nice to not bounce the needle off the peg if you don't have to.

Suggestion: Maybe you are already testing in more than one desktop browser, but if not, you're probably testing in Chrome/Edge. Test in Firefox too. If you have enough money to buy a Mac, you can even test in desktop Safari. :)

I will consider asking about rate-limiting just in case.

And I will take your advice and download Firefox to test things on there. I use Opera GX (lol) as my browser which I believe is Chromium based, like Chrome and Edge. So it would be a good idea to test on other non-chromium based browsers. And I can def break out my old 2011 Macbook and try Safari on there, it isn't the best Mac but it has Safari!

Thanks so much for the follow-up, I'll begin fixing the things mentioned later today.

aakfan said:
Now that you point all this out I am starting to see a lot of odd CSS choices I may have made and forgot about, most likely because I have a habit of not resizing my window to see how elements react.

I know on Firefox, you can (could?) make a "bookmarklet", which was a little bit of Javascript that resized the browser window, and would show up in your bookmarks. You could have (say) one for 1600x1200, one for 1920x1080, and whatever else you wanted. Resizing was as simple as choosing that bookmark; it was faster than grabbing the corner with your mouse and doing it yourself, and it always went to the exact size you specified. I used it many years ago when I had to make sure that a site at work would look reasonably OK on various screen sizes. I'm not sure if Chrome can do this, but it probably can. There are probably extensions for both Firefox and Chrome that give you buttons to quickly resize the browser window, too.

Firefox and Chrome also have "resize to popular phone screen size" buttons in the developer tools, and at least on Firefox, you can add your own sizes to the list.

The whole idea is to make it easier to check, by clicking a bookmark or a button.

I use Opera GX (lol) as my browser which I believe is Chromium based, like Chrome and Edge.

I'm pretty sure it is Chromium, yeah.

Until very recently, the simple rules of thumb were: anything on an Apple device (Mac, iPhone, iPad) is really Safari; anything branded "Firefox" is really Firefox; everything else is really Chrome/Chromium. The EU made Apple stop making everything Safari in 2022, so Chrome and Firefox on Apple might really be Chrome and Firefox by now.

And I can def break out my old 2011 Macbook and try Safari on there, it isn't the best Mac but it has Safari!

Testing on another platform is always good. However, a 2011 Macbook is likely running Safari 5.x or 6.x, which may not respond the same way as Safari 17 or 18 (the latest versions). In other words, if it looks weird on Safari 5 or 6, it might not actually be something you need to chase.

kora_viridian said:
I know on Firefox, you can (could?) make a "bookmarklet", which was a little bit of Javascript that resized the browser window, and would show up in your bookmarks. You could have (say) one for 1600x1200, one for 1920x1080, and whatever else you wanted. Resizing was as simple as choosing that bookmark; it was faster than grabbing the corner with your mouse and doing it yourself, and it always went to the exact size you specified. I used it many years ago when I had to make sure that a site at work would look reasonably OK on various screen sizes. I'm not sure if Chrome can do this, but it probably can. There are probably extensions for both Firefox and Chrome that give you buttons to quickly resize the browser window, too.

I've always known about bookmarklets, but didn't know they could resize the window, this will def come in handy! If you have the scripts sending them would be awesome.

Firefox and Chrome also have "resize to popular phone screen size" buttons in the developer tools, and at least on Firefox, you can add your own sizes to the list.

I've known about this too, but never used it for Caspar621, which I honestly should.

Testing on another platform is always good. However, a 2011 Macbook is likely running Safari 5.x or 6.x, which may not respond the same way as Safari 17 or 18 (the latest versions). In other words, if it looks weird on Safari 5 or 6, it might not actually be something you need to chase.

I couldn't get the MacBook to boot, looks like it'll be Windows only for now.

aakfan said:
I've always known about bookmarklets, but didn't know they could resize the window, this will def come in handy!

I looked up the script and it doesn't work anymore, and it probably hasn't since 2010 or so. For a little while, it was said to work if you only had one tab open, but not multiple tabs, but now it doesn't work at all - I tried it. I think both Mozilla and Google killed it because web sites were abusing the function.

You can get browser extensions that allow you to define a list of window sizes and choose one with a couple of clicks. I'm not sure which one to recommend, but they exist.

Looks good so far! No major issues to report, just some tiny stuff. 1 and 2 are more important. 3 and 4 are my opinion.
1. the DText system that E621 uses isn't implemented, which means and stylized text ends up looking funky.
2. The grid when viewing images is also a little weird. The tiles for images could probably be resized a little better, and videos can be player without opening the popup window.
3. The pop up when viewing an image is kinda wonky, but it could work.
4. I know it is still very early in development, but I feel like there isn't enough distinction in the UI. Space could possibly be utilized better in the side bar.
I'm only just starting to learn to code in C#, so I'm not yet sure how hard it would be to implement this stuff, but I know coding takes time to get it right. This looks really promising. You're doing a great job so far!

protox3alt said:
Looks good so far! No major issues to report, just some tiny stuff. 1 and 2 are more important. 3 and 4 are my opinion.
1. the DText system that E621 uses isn't implemented, which means and stylized text ends up looking funky.
2. The grid when viewing images is also a little weird. The tiles for images could probably be resized a little better, and videos can be player without opening the popup window.
3. The pop up when viewing an image is kinda wonky, but it could work.
4. I know it is still very early in development, but I feel like there isn't enough distinction in the UI. Space could possibly be utilized better in the side bar.
I'm only just starting to learn to code in C#, so I'm not yet sure how hard it would be to implement this stuff, but I know coding takes time to get it right. This looks really promising. You're doing a great job so far!

Thank you so much for the feedback! You made many good points, and I'll 100% take them into account in the next update (soooooon). The tile system is so odd, and I'm most likely going to redo it, maybe doing something similar to how native e6 handles it. Also, the popup idea is being scraped, it will just be a new tab now. (I'll change it right after sending this)

Also, the popup idea is being scraped, it will just be a new tab now. (I'll change it right after sending this)

Updated.

kora_viridian said:
I looked up the script and it doesn't work anymore, and it probably hasn't since 2010 or so. For a little while, it was said to work if you only had one tab open, but not multiple tabs, but now it doesn't work at all - I tried it. I think both Mozilla and Google killed it because web sites were abusing the function.

You can get browser extensions that allow you to define a list of window sizes and choose one with a couple of clicks. I'm not sure which one to recommend, but they exist.

oof, that would have been sick lol.

after a month of work we have a new update!

changes:
fixed issues on the image page
outlines are different colors if the post is a gif or a video
videos now display their thumbnails rather than the whole video (to reduce load times)
posts now have their scores displayed under them
more presets for both nsfw and sfw
fixed lots and lots of css
loading text changes
title text/favicon of opened posts now fixed

https://caspar621.com/ please send back feedback and ideas!
all of it is greatly appreciated