June 3
Hi all, hope you're doing well. My health has been getting worse this month due to medication issues, which is why I didn't publish this update near the end of May, but still chipping away at things nonetheless.
CSS name refactoring completed
I've finished refactoring and renaming many of the various variables in Deserted Chateau's CSS files. This was necessary as otherwise, when merging CSS files together for efficiency purposes, there would be conflicting selectors that would mess with the site styling.
JavaScript restructuring progress
To start making the site's JavaScript code more manageable, I reorganised some of the Manager and Tool classes, and made import scripts that export all of those classes for other files to use, so that each file doesn't have to start with a bunch of very specific import paths. I also got rid of the HelperMethods class entirely, as it wasn't really doing anything except acting as a middleman for other classes at this point.
I still need to do a bit more work on this to reorganise the scripts that manage HTML templates, and to disconnect the functionality of some of the page-specific scripts from the on-load functions they have, so that it becomes possible to merge some files together in production if necessary to improve performance (more on that below).
Resource loading improvements
Both to organise the code more and to improve the performance of the site when it's live, I've implemented some new systems for loading resources both in the frontend and backend.
In the backend, JavaScript files and HTML templates that need to be loaded on each page are now included via a separate PHP file, eliminating the need for untidy "loadThisScript() and loadThatScript()" functions. Most of the scripts that are loaded are fairly small, so it makes sense to load them on each page so that they are then cached from that point on in the user's browser.
For the frontend, I've set up two build tools in the Deserted Chateau codebase. The first tool uses gulp and some of its plugins to merge the site's CSS files together and minimise them, both to reduce their overall filesize and to prevent site visitors having to download a whole load of stylesheets in separate HTTP requests; it serves the same purpose for the site's HTML templates as well.
The second tool uses grunt to minify the site's JavaScript files. I couldn't find any reliable gulp tools for this, and grunt does the job nicely; by using a specific output path, it's possible to create a copy of the site's JavaScript directory that can easily be switched to in production, using minified code. As of yet, the JavaScript files aren't merged, due to the fact that some of them have onload functions when the given page is ready, which precludes merging them until that behaviour is changed.
Frontend Logging improvements
Up until now, I had something of a primitive wrapper around the usual console.log contained in the HelperMethods.logDebugMsg function (which basically just did the same thing, but could be turned on and off via a variable value). Actually debugging anything with this was proving difficult, since the call stack would always show HelperMethods as the originating class for the error, masking the actual source of the problem.
I've moved to using the loglevel library, which provides a much nicer experience. It required a little configuration to work properly (mostly to avoid conflicts with other libraries), but that's sorted now. All existing console.log and HelperMethods calls have been removed.
Moderation: progress
One of the big "main tasks" left to do is building Deserted Chateau's moderation system. I had some basic parts of it done, but decided to go back and check it was designed correctly and so forth. I'm partway through this, though I imagine it will be a few more weeks before it's likely to be finished.
Redesigned Report Display
In order to make it easier for moderators to deal with reports, they're now grouped by the item being reported (rather than individual reports being displayed). That makes more sense in terms of actually resolving/dealing with a given set of reports.
Moderation Modals
Instead of the old moderation page, where going to a report's details meant going off to another page, I've designed some modals that load in the same page with the details of the given reported item. For example, when looking up the details of a reported artwork, a modal appears showing the details of that artwork and all the active reports against it, to give a moderator all the necessary information to decide what to do without loading a new page (which would get very cumbersome).
Stored procedures
I've rewritten the stored procedures for getting reports and reported items for moderation, so that they work within the new way of displaying each reported "item" instead of individual reports.
Moderation: AJAX form refactoring
When the moderation system is finished, it will need to have functions for moderators to perform specific actions (such as deleting a comment on an artwork, modifying an artwork's NSFW categories, and so on). To make this a more efficient process, and organise the code better, I've started to refactor how the site's AJAX forms work.
At the moment, a lot of forms contain the actual code logic required to perform a particular action; for instance, /forms/artwork/DeleteArtwork.php is called via AJAX when a user chooses to delete one of their artworks, but there's no good reason why the code logic to actually perform the deletion should be in that specific file. I've started refactoring the code logic for these sorts of actions into handler classes within the src/ directory, which should also help clean up the project structure somewhat.
This will make it much easier to implement moderator actions like deleting artworks, as a single method can be defined for the action instead of having a "moderator specific" artwork deletion function.
Video thumbnails improved
Due to how Deserted Chateau loads gallery pages, videos were often being loaded with low-resolution thumbnails, due to how Hls.js determines what to show; the video would be attached to its HTML element before being resized to its final size, causing it to display 360p thumbnails or worse.
In theory, this is easily solvable by using Bunny Stream's pre-generated thumbnail for each video as the video poster attribute. However, the generated thumbnail is of low quality (at least, lower than I'm happy with; I suspect it's a 70 or 75% quality JPG, but hard to be certain). I've created a Lambda function that can generate a high-quality thumbnail for a video, which can be added to the normal artwork submission flow, as we need to upload the video to S3 for a bit to generate the short preview for artwork submission forms anyway. I still need to polish up that function and integrate it into the submission flow, then update the database schema for the artwork tables to contain the new information.
Documentation updates
I've updated a lot of the Tech area of the docs, to reflect the updated frontend coding standards and third party library information. I also updated the tech stack section with gulp and grunt, and merged the AWS Pitfalls section of the docs into the main AWS section, as they were overlapping somewhat.
Gallery SQL: search improvement
Whilst testing the multiple artwork submission form, I noticed a bug in the gallery search code that was causing it to return no results when there should be results. Two things had to be fixed: firstly, a bug in one of the database functions that searched for the presence of a string in a given set of strings, and an improvement to said function to be able to match partial phrases instead of only exact phrases.
The result is that searching for e.g. "lightning farron" will get results with that name or tag, but searching for "lightning", which would previously not return anything, now returns the former entries as expected.
Misc
Styling improvements
- The standard checkbox styling now has a distinct background when an input is disabled.
- NSFW category options, when displayed per media file in the submit artwork area for a multiple submission, are now formatted correctly in a grid.
Code improvements
- Improved how monolog is used in PHP classes, eliminating class-specific logger instances and using one global logger instead. Helps remove a lot of unnecessary boilerplate code.
- Updated all of the Lambda functions and layers within the codebase, as some were out of date compared to their current versions on AWS Lambda. Removed the last credential that was still sitting in a Lambda environment variable; they are all in the Parameter store now.
Bug fixes
- Fixed an issue with album galleries not displaying in the correct gallery style.