April 9
Hi all, hope you're doing well.
Video encoding tests
I did some extra testing of HEVC / H.265 video encoding to see the performance differences when used with AWS MediaConvert, as I realised that for videos with a lot of views, the bandwidth savings will outscale the encoding costs.
I also discovered that BunnyCDN has recently started offering a "premium" encoding tier for video stream CDNs, that allow encoding with H.265 and VP9 as well as just H.264. The price seems roughly comparable to AWS, though the filesize reduction is inferior, as they likely don't have the same level of performance tuning technology (AWS has all kinds of optimisations that are unique to them, which may account for the differences).
I've written up some more information and some test results on this page.
Refactoring: preparing for SPA-style artwork display
In past development logs, I wrote about the difficulty of maintaining an SPA (single page architecture) hybrid implementation for the artwork display page, after initially trying to implement it. After giving it some more examination, I think it can be done, but there is a lot of refactoring to do before it can work.
CSS refactoring
The main problem is that much of Deserted Chateau's CSS code is rather sloppy with its naming conventions, and there is significant overlap between class names in some files, which becomes a problem when loading new content into a page due to new CSS declarations overriding previous ones. As a result, I need to clean up the CSS code to remove duplicate class names, and whilst doing so it makes sense to reduce duplicate declarations in general (e.g. several classes that all just make a component visible).
I've decided to use LESS to make the CSS code easier to maintain. Initially I thought I might run into problems testing them in development, due to some site features such as changing the site theme without reloading the page (which requires some CSS stylesheet manipulation) and TinyMCE themes needing CSS changes, but compiling LESS files on save removes this issue; they're ultimately all CSS files where actual execution is concerned as a result.
I've analysed the CSS and found only a handful of conflicting declarations, which are now cleaned up. There's lot of "redundant" declarations of the same properties for different classes, but I'll have to see if trying to clean that up is worth the potential nightmares it could cause.
JS refactoring
Another problem involves the current mechanisms for loading scripts, whereby each page loads the necessary scripts to load its own page, which is problematic for an SPA. It's not too hard to fix, but requires changing a few methods and the calls to those methods in each different page, so that a page called via AJAX to inject content into an existing page does not load any new scripts.
I also need to investigate what changes need to made to some listener functions, particularly in the gallery code, to ensure that going back/forward between pages in the SPA style won't cause weird styling issues.
HTML refactoring
While there isn't much to do here, there is one primary change to make: each PHP page in Deserted Chateau declares its own HTML tags, which makes for duplicated content when injecting a new page into an existing one. Much of that is solvable, but I need to decide on what approach to take for it.
I've started to make the changes for this, effectively removing a lot of redundant HTML declarations from pages as they are no longer needed when loaded via AJAX. I'll write up a more detailed structural view of the new system in the next update.
AJAX PHP forms: possible restructuring
I haven't decided on this yet, as I want to properly plan out any changes, but I'm considering restructuring the current PHP form structure for AJAX calls. At present, most operations have their own separate file, which is growing unwieldy due to the number of different operations, and likely will only get more and more unwieldy over time. It'd likely make sense to consolidate operations that are all common to a given site feature into one PHP file, but I'll need to examine my current FormHandler class to see what changes would be needed there.
At present, the FormHandler class deals with all incoming input for a given form and validates it, allowing each form file to specify a set of parameters. That wouldn't work if a form file covered multiple AJAX calls, so I'd need to change how parameter validation is handled.
Performance improvements
Deserted Chateau's backend performance is (so far) fine, but the frontend scripts for galleries are still somewhat slow in some situations, at least on older hardware. This is due to rather inefficient scripting where resizing gallery elements is concerned; in the standard style gallery display, the size for almost every element in the gallery is manually changed each time the page is resized, making it quite slow to resize the gallery and sometimes to load new elements.
I've been slowly identifying redundant JS calls to update component CSS and sizes, and improving the selectors used to find elements by using IDs as much as possible instead of class selectors which are slower to execute.
Financial costings update: CDN changes
While testing the gallery code performance, I noticed that one thing wasn't to do with scripts: slow image loading times. In a sense this isn't really a surprise; at present, the image CDN is using BunnyCDN's volume pricing tier, which gives lower prices but incurs higher latency, as it uses fewer nodes. Load times for a group of images reduced from 2.5-3 seconds down to around 400 milliseconds when switching to the standard non-volume pricing; that doubles the CDN costs, but the load times on the volume tier are high enough that it's warranted.
I've updated the costing spreadsheet with that change. Videos are still hosted on CDNs using the volume tier, as they'd be prohibitively expensive otherwise.
Misc / Bug fixes
- Fixed an error in the submission form's artwork tags regex, that was incorrectly showing some tags as invalid when they weren't.