Code Standards: Frontend
Trying to maintain consistent frontend anything will drive a person to insanity.
Artwork Galleries
Display styles, gallery object variables, etc.
Display Styles
There are currently three gallery display styles that galleries can be displayed with. Standard ...
Implementation Details
Dynamic resizing For the "standard" gallery layout, the code notes the aspect ratio of each artw...
Variables
For each "item" in a gallery (i.e. an artwork submission, with one video or image as the thumbnai...
Gallery Variables: DOM nodes
Element ID standards Gallery elements all conform to the following element ID standard: ${prefi...
CSS Standards
The SpaStateManager class
Deserted Chateau's SPA is implemented via this class, and can be enabled or disabled by users via...
Frontend Class Structure
What moron wrote this code? Oh... I did.
Frontend Library: Manager classes
AjaxManager
Purpose The AjaxManager class is a wrapper around the jQuery $.ajax methods, to allow for standa...
AppearanceManager
Purpose The AppearanceManager class deals with the website theme being displayed for the user an...
CacheManager
Purpose The CacheManager class is used for storing and retrieving specific values from the clien...
ConfigurationManager
Purpose The ConfigurationManager class keeps a list of hardcoded variables, specifying the web a...
FlowUploaderManager
LogManager
Purpose The main purpose of the LogManager class is to initialise the loglevel library, and give...
ModalManager
NavbarManager
TinyMCEManager
TooltipManager
Frontend Library: Tool classes
HTML / JS / CSS notes
"Once, only god and I knew what this code did. But now..."
Incorrect event object properties in Chrome DevTools
When logging some object types in the Chrome DevTools console, you can get misleading results. Co...
Cross-browser behaviours: fractional pixels
When manipulating CSS values directly, be careful of how precise your numbers are, as different b...
CSS relative colors
Relative colors in CSS Until fairly recently, there was no way to define a CSS colour as being a...
Fade animations on HTML elements
Sometimes, fading in an element (for example, using jQuery's fadeIn() method, or setting an eleme...
HTML: Strict vs Quirks mode
What even is "strict mode"? Strict mode is a declaration you make at the top of a HTML document,...
Inconsistent image load event firing
Due to some inconsistencies in browser event behaviour, trying to detect when an image has finish...
HTML Templates
Site Themes Implementation
Notes on how themes (including the custom theme) are implemented.
TinyMCE Standards & Overrides
Injecting world domination into the Shadow DOM. Please stand by.
Styling overrides and customisation
Normally, customising TinyMCE's appearance means creating a new theme, compiled in LESS. For most...
Upload handling
To handle images uploaded into a TinyMCE editor's content by a user, a few things have to be done...
User-submitted rich text content security rules
Certain security practices need to be adhered to when dealing with user-submitted TinyMCE content...
Plugin Notes
Emoticons To avoid using a third-party CDN, we use a self-hosted copy of the open-source Twemoji...
Initialisation options
The TinyMCEManager class sets some default options for TinyMCE editor initialisation. These can b...
Troubleshooting & Pitfalls
Errors "Node cannot be null or undefined" While this error can signify a lot of problems, I've ...
Logging Standards
The LogManager class initialises all of Deserted Chateau's frontend loggers. To use them, you mus...