October 27
Hi everyone! Sorry there’s only one update this month; I think I actually got more done this month than I did last month, but for some reason my brain simply did not want to finish writing update stuff. I think it’s due to being “in the middle” of lots of different parts of the code, and it always feels weird not to finish them first, but can’t wait forever.
I’ve been logging it as I go along as usual, so the full update is below.
Gallery Improvements: Alternative display style
User profile galleries and search results now have two display styles; the standard one, and a “feed” style that presents artworks in one vertical row. The feed style has controls that let the user change the size of the feed to suit their viewing preferences, and to prevent super-tall images being huge in the feed. Controls to change the width of the feed will also be made, which should be easy as I’ve tested the functionality behind it and that works.
The different styles can be toggled without refreshing the page, with a nice clean transition. I'll make a video showing it when I can, as I've been meaning to make a public update on the site's progress in any case.
I also discovered that, when I refactored the gallery code into templates, I inadvertently removed the detailed title option (to show profile picture, username etc alongside artwork title when hovering). I’ve re-implemented that, as part of improving the feed style to optionally show titles and descriptions.
Gallery Improvements: SQL queries
After quite a bit of work, I figured out how to make all of the stored procedures that find gallery results (for user profiles, search results, browse pages, following pages) into one procedure that can handle all scenarios, including how the results are sorted. This will make maintaining the code for searching artworks a lot easier, now that there is only one specific part of the code logic responsible for it.
Artwork categories restructuring
I decided that the current fixed system of artwork categories, where they’re hardcoded, really wasn’t a good idea after all. I’ve refactored artwork categories to be their own database table, which requires a huge amount of refactoring; about 90% of it is done. It’ll make the code much easier to maintain, but also means it will be easier to react to users asking for different NSFW categories to be implemented.
Video hosting: encoding improvement
After some chance browsing, I realised videos encoded in HEVC/x265 actually are compatible with most browsers, where I had previously thought compatibility was a lot lower. I’ve tested encoding videos in this format for the site and it works; the resulting filesizes are halved or even smaller for the same quality, which is great. The time to encode them is roughly doubled, but this is well worth the filesize reduction for the purposes of a website.
To test the efficiency, I ran a bunch of tests on a video as a sample, the results of which you can see here: https://docs.google.com/spreadsheets/d/1zTfrhPx0TInzXv67r_LdmveRSnAgnk8KCw0Z7-XksoE/edit?usp=sharing. As you can see, massive filesize improvements. Note that CRF (constant rate factor), which is effectively an indication of the resulting video quality, has a default setting of 23 for x264 and 28 for the same quality in x265 (i.e. the CRF numbers are not directly equivalent).
Messaging webserver improvements
To remove some of the unnecessary overhead, I’ve disabled HTTPs long polling on the messaging webserver, forcing all clients to connect via WebSockets without first using polling. This should help reduce overall server load; I’ve also improved the internal documentation for refreshing the SSL certificates for the messaging server, as due to using both Apache and Node it requires additional steps compared to the other servers.
Stripe subscriptions
I looked into what happens for subscription prorations, if e.g. a customer moves from a low plan to a high plan or vice versa, and it’s not necessary for any backend code to handle this. Since users go to the Stripe portal area to change their subscriptions it’s handled there, so the site only needs to record which new subscription option they moved to and so forth.
Since it’s likely Deserted Chateau will have multiple prices (e.g. a monthly price, a yearly price, and maybe some kind of low yearly price for lower features / just for supporter purposes), I’ve also changed the code and related database tables to record which Stripe price the customer is on, so we can identify precisely which subscription they have.
Navbar improvements
More settings pages improvements
I’ve been further streamlining settings pages, to replace text explanations with tooltips. The sidebar menu now scales better, has icons on each menu item for better readability, and turns into an icon-only menu on smaller screens and browser windows.
Appearance customisation options
I’ve created a settings page for users to change how the site looks, in terms of colours, fonts and font sizes. I’m unsure whether to make this a subscription-only feature yet - I don’t think it will be, or at least some parts of it would be free for accessibility reasons. Regardless, it’s useful in cases where a user might want to eg use fonts they have an easier time reading, or have a particular objection to the site’s colour theme, etc.
As part of that, I made a custom dropdown input for settings pages, as trying to select a font family with a normal input is far from ideal (as the input can only use one font family, making it hard for users to see the differences in the fonts available in the input box itself).
Improving the Submit Artwork page
I’m partway through making the submission page cleaner, as much of it dates from earlier on in Deserted Chateau’s progress. Much of this should be fairly easy, involving making templates instead of hard-coded HTML for various things like the submission categories on that page, but there is also a video encoding problem to tackle.
The general flow for uploading an artwork is that you upload it, the upload finishes, we resize the image to 480p and then display that version in the preview area. This is done to avoid having full-size user artworks exposed to the internet for any length of time; however, while resizing an image to 480p takes at most a few seconds, resizing a video can take 30 seconds to over a minute.
From a backend perspective, the client doesn’t know the upload has “finished” until the encoding process is complete, making for a weird experience when an upload is stuck in 100% finished state for 30 seconds before being displayed. I need to separate out the upload and encode logic, so that the client can be shown when the upload has finished, and then be told when the encoding is going on, so it’s more clear what is happening.
I likely also need to modify how video encoding is decided at submission time; making the user wait for 1080p or 720p versions of the video, especially if uploading multiple files, would be very impractical. This is okay for images, where we can finish all resizes in at most 5 seconds, but for videos it’s too long. What will need to happen is for submission to take place, the 480p video is used to display the artwork, and in the backend the 1080p or 720p versions are made and then displayed once they are available.
Misc stuff & bug fixes
- “Login to view” placeholders on NSFW art, where they are displayed, are improved to not show a question mark icon (as non-logged in users don’t have category preferences, so there are no categories to display in the icon).
- Cronjob bug involving wrong user permissions and log file directories is fixed.
- Logrotate bug fixed. There’s a weird quirk in the logrotate commands; the ‘size’ directive, for archiving logs when they reach a certain size, completely overrides any date directives (e.g. rotate logs weekly), but the minsize and maxsize directives don’t.
- When playing a video whilst another video is playing (causing all other videos except the one just clicked to be paused), the play/pause button now correctly updates to show a play button on videos paused by this.
- Profile picture and profile banner upload bug fixed. A rounding error in JavaScript, plus some bad bracketing in an if statement, was causing it to occasionally send bad coordinates to the Lambda resizing function and use larger images than intended.
- Tooltips have been improved for better accessibility, to accommodate for <span> elements needing tabindex attributes to be properly focusable for TippyJS purposes (e.g. if a screen reader is being used).
Deserted Chateau public update
I’ve been meaning to write a public update on Deserted Chateau’s progress, mostly to give an idea of where it’s at, hopefully in the next few days. There’s always that annoying feeling when showing stuff in a video or screenshots that various styling stuff is unfinished/looks half-done, but that’s something I’ll have to accept given the site is still WIP :p