Appearances aren’t everything

Hey guys. Hope you and those important to you are doing well during this pandemic. I’m overdue on a writeup on the stuff that’s been going on with the site so I’ve finally decided to get around to it.

You may have noticed that last month I rolled out some changes to how the site looks. The main feature is a appearance menu in the settings that allows users to customize the appearance of the site to their liking. This replaces the myriad of separate style sheets that we had accumulated over the years. It’s not perfect and, in the interest of not overwhelming users with settings and keeping a degree of simplicity/consistency, some smaller appearance tweaks in the older styles were done away with.  

As I mentioned, the various style sheets were replaced. This frees me up from maintaining them and decouples color from structure. Editing a single file to tweak how the site looks and behaves is far more reasonable than doing the same for a dozen. I had been working on this decoupling for a while, simplifying the various style sheets, but ultimately decided to get rid of all these styles to fix a few outstanding problems. The most obvious is the ‘white flash’ that users sometimes saw when loading up a page.  

To briefly explain how CSS works: all main style sheets are applied whenever a page is loaded. Alternate stylesheets (ie our other themes), are retrieved but not applied. To change to one of those other stylesheets, client-side scripting is required. Using javascript, your browser retrieves your stored value in a cookie/localstorage and then edits the webpage—getting rid of the default stylesheet and loading up a new “main” one. This is not an inherently seamless process as depending on your internet speed or your device’s computational power it can take a brief moment. Hence the ‘flash’ of unstyled or wrongly-styled content.  

What happens now is that there’s less CSS to load. Instead, a script checks your localstorage and writes the style settings stored there directly to the document page, before external stylesheets are applied. This means that there is no ‘unloading’ of the main style sheet and replacing with another one, simply that the styles applied to the page directly take precedence. It virtually eliminates flashes to a satisfactory degree. There may be some edge cases, that would be solved by embedding this script into every page (as opposed to an external file), but I don’t think it’s worth the trade off in losing caching and html complexity.  

Along with this, I did a lot of other tweaks for consistency in the site’s appearance. Margins adjusted, precedence given to some elements over others on smaller screens, etc. In the month or so since this colorful rollout I’ve worked to simplify some of the disparate rules in the site’s code for the various pages (front, board, thread). Some of this also had me change not only the html side of things but also css and some other scripting functionality.

For instance, the clumsy buttons that adorned threads on board pages were removed. These let one hide threads, watch them and whatnot but were incredibly clumsy solutions. They were actual colored icons, ones that didn’t necessarily mesh well with different combinations of colors for themes. As a funny aside, they were actually just one big image of a specific size. The ‘watched’ button, for example, would be an offset of x pixels by y while another would by another offset in the best of typically hacky Kusaba X tradition. Their replacement is a little menu that pops up and gives users context-appropriate options. Helps that it’s slightly easier to click on a phone, too.

I refactored some code relating to thread hiding, expansion and image expansion while I was at it. It was both necessary for this new menu and also I bothered to fix some long-standing edge cases and bugs. It may not sound like much, but even this represents quite a chunk of code. I’m satisfied with the results but there’s still room for future improvements.  

One last thing that is worth mentioning: how these various small functions worked and appearance issues also needed to be made more predictable and consistent to enable me to work on some other stuff. A lot of appearance issues on smaller screens have also been addressed. The top navigation bar was changed up and ought to behave and look similarly across a far wider range of devices. I wanted to remove some of the mobile-specific scripts and unify the site’s functionality to make it easier to maintain and improve. Much the same reason for the changes regarding colors.   

I hope to eventually eliminate all mobile-specific hackery and special code and instead have a modern, responsive site that looks good on any size screen. To that end I’ll be putting on ice some of my showier overhauls for the time being. Instead, I’ll be working on getting feature and appearance parity between the desktop version of the site and mobile. I’ve wanted to eliminate some of the special-case CSS altogether as well as implement features like thread watching. I’m not sure how much of that is feasible yet but I’ll be looking into it and working on solutions in the coming days and weeks.  

I’ll make sure to let you know how all that turns out. After that, I really want to get to overhauling other parts of the site.  

Until next time, stay safe and healthy! Take it easy!