November 16

Hi everyone, hope you're doing well ^^ updates below, been pretty busy so far this month.

Public Update Thread

I wrote a big thread on Twitter to give a public update of Deserted Chateau’s progress, link here: https://twitter.com/antsstyle/status/1722313404965081381. It’s less technical than these Patreon updates are, since it’s meant to be more easily readable, and has some brief demonstrations of a few bits and pieces.

SQL improvements

Gallery search procedure now properly searches for matching terms using a combination of a new function to split search strings, and the FIND_IN_SET SQL function. This allows for searching by search words, tags and other criteria, alongside e.g. “include only these tags” or “exclude these tags” and so forth. Makes for one huge SQL procedure, but it works well.

I’ve been considering trying to implement a light form of booru-like tagging; not in some full sense, but rather in that searching art sites can be quite hard due to e.g. spelling differences of a character’s name, trying to find artwork of a particular series if the series name isn’t included in the title, and so forth. From what I know of writing queries of this nature in the past, it shouldn’t be especially hard - it’ll require having a table that associates one tag with another (e.g. Morrigan Aensland -> Darkstalkers), and then a bit of fancy SQL to find a list of tags for an artwork, both its own tags and the tags its own tags are associated with. That said, with the complexity of the current search query, I'll need to see what extra considerations need to be made.

The aim with that is to improve visibility for artists, and also to ensure that artists don’t feel the need to add a bazillion tags to their art (there’s likely to be some maximum number, to stop pages looking awful and to prevent spam, and making tags more useful in this way means there will be less need to put lots of tags on an artwork anyway).

CSS: major refactoring, improvements and polishing

With many of the site’s main functions mostly complete, I’ve started to finally look at going back and cleaning up some of the original CSS code. Initially I specified a lot of style elements in absolute terms, like an element being exactly 18px, but that isn’t good practice and makes it hard for the site to scale well at big/small sizes. In addition, having things in absolute sizes makes the custom appearance theme less useful, since users changing font sizes will look weird when some elements change size and some don't.

As such, I’m introducing new variables into the CSS to define various relative sizes for things like element padding, using em and rem measurements so they’re relative to the font size. It makes sense to do this now, so that when I’m testing other stuff later, I can see if some part of this doesn’t work right while I’m doing that testing, which should make cleaning up errors in it easier.

There are also scattered bits of CSS that don’t really belong in specific files; for example some page elements are defined in the main CSS file when they ought to be in a CSS page for that specific section of the website, so I need to move those, and change some CSS rules that are for specific elements by ID when it makes more sense to style them by class. It’s important to do this and make sure most elements are covered by standard CSS classes, rather than ID selectors, so that development later on doesn’t run into weird problems when one element doesn’t change when it should.

Emoji Mart & QuillJS

Something I sort of left on the sidelines until now was implementing emojis for artwork submissions, private messages, etc. You might think that doesn’t mean much work (you would hope so, wouldn’t you), but you would be very, very wrong. Most emoji packages I could find required entire web frameworks to function, and on top of that I needed to make them work with QuillJS (the rich text editor Deserted Chateau uses for writing comments/descriptions).

True nightmare horror material…

Thankfully, it’s mostly done, though there is a bit left to do. I’m using emoji-mart to load emojis and display pickers for them; emoji-mart requires React, but I cloned the source code and modified it to not need React, as it wasn’t really necessary except in a handful of places. I also had to make other modifications, as emoji-mart is hard-coded to fall back on an external CDN, which is something I don’t want for Deserted Chateau. There’s also the problem that - for goodness knows what reason - it tries to use functions as attributes to a web component, which isn’t supported (maybe it is in React, but it isn’t in most other places), causing it to auto-default to its hardcoded external CDN even when custom URLs are provided. Took a lot of time to figure out why that was happening, and then to fix it to use variables instead of functions.

I also had to fix it for styling issues; the code for rendering emoji components in emoji-mart adds their styling directly in style tags, making it impossible to override with class selectors. I had to go in and modify the code so that it added a class to those elements instead, then style that class. I can understand why they did it, as I think it was to ensure it works “out of the box” and doesn’t e.g. need an external CSS stylesheet, but it also makes customising it harder. Modifying the emoji picker’s styling is also a bit awkward, as it’s rendered in the Shadow DOM and requires special handling (normal CSS doesn’t apply to it).

Making it work with Quill was also a major pain; Quill’s documentation is far from clear on how custom text elements need to be implemented, and it took a while to figure out how to ensure emojis were inserted correctly and preserved within the delta (the internal representation of the final content) in the database. There’s also an issue with having <span> elements with the contenteditable attribute set to false inside a container where contenteditable is true, which from what I’ve read in various GitHub Quill bug reports, is a browser issue to some extent. I’ve mostly overcome this - the main problem is in deleting emojis with backspace or via selecting a range to delete. Deleting with backspace I’ve fixed, and I think solving the deletion range should also be fairly easy, but I’ll need a little bit more time to finish that. I’ll probably detail the solution I’ve come up with later for other devs trying to figure out how to approach this problem, as it doesn’t seem to have any accepted solutions yet, and that’ll take some time as well.

Private Messages refactoring

With emojis (mostly) sorted, I went back to the private messages page to implement them there. In the process, I refactored the private message code into its own class, as part of the general JS refactoring to prevent namespace clashes later.

Emojis are now working there, and I’ve sorted out the code for making messages appear in real-time as they are sent. I had to decide on a design structure for the SocketIO connection manager class I made; instead of the ConnectionManager trying to handle everything, other classes can now send it functions to add to the socket, to be executed when particular types of messages arrive.

Artwork submission

As above, I’ve moved all of the artwork submission code into its own class. I’ve also fixed a bug that was causing re-ordering submitted images/videos in the submit form to fail… not sure if it was introduced by the refactoring or not, but either way it’s gone now.

I’m in the middle of improving the styling for the submission page, to make it less cumbersome to use. The upload area is now limited in height and scrolls when it’s too big, and the default display size of submitted media is smaller so that they’re still easy to identify but don’t take up huge amounts of space on the page.