cjvfx > writing


Hello world!

Everything starts with "Hello world!".

Incidentally, regarding the previous sentence, I have a problem with the grammatical rule that punctuation should fall within the bounds of the quote marks, should a quote complete a sentence. That's why I included a full-stop after the quote.

In my mind, the exclamation mark is capping the sentence "Hello world!", and the full-stop is capping the entire sentence. The 'official' way to end the sentence would create ambiguity. Am I exclaiming that "Everything starts with 'Hello world'", or am I simply stating that "Everything starts with 'Hello world!'"?

Even that question mark would make things weird if it had to be inside the quotes. I'd read that as quoting a question, not asking one...

It's just something that bugs me sometimes.

Style should be client-side configurable

Not everything on a webpage can be styled with CSS, but almost all web designers want to have control over the visuals down to the last pixel. This can create problems in frontend development, because often it's necessary to work around the standard HTML elements with hacks and tricks, just to get something to look the way it's supposed to.

HTML <select> elements are the default way to provide a native dropdown menu on the page. These in particular cannot be styled using CSS (very much). There are some workarounds, but if JavaScript is an option for you, it's normally just easier to use a library or reimplement them yourself if you need to make them look a very specific way. This might not be obvious to everyone, since it's normal to visit a modern website and use all sorts of different dropdowns, many of which have extra features like filtering.

During my time as a frontend developer, I have more than once encountered the problem of having to reimplement a select or a table element, because of stylistic preferences handed down from a design team or PM.

The first time this happened, I was pretty happy about it. My component would be a major part of the UI, reused in multiple places. I had an opportunity to extend the features of a normal table and make it look prettier as well. In short, it was a chance to show off my clever CSS skills using grid and flex, and take ownership of a not-so-little piece of the UI.

Looking back, my implementation was not the flawless, smooth user experience I had hoped to facilitate; at least not right away. For one thing, we needed to show a lot of columns, and the stylish, 'clean' look that I had gone for was just not that spacially efficient, what with all the stylish padding and margins. I allowed scrolling within cells, but this had a tendency to make things look ugly. Rendering a lot of content on some pages was sluggish, and ultimately I had to rectify multiple issues in the form of bug reports from QA. I probably should have just used an npm library and called it a day. I'm still pretty happy with what I was able to make in the end, but I wouldn't approach it that way again.

Later on, I was called on to make some forms that included dropdowns. This time, without specific directions to style them, I just went for <select> elements. After all, that's what they're there for, right? But again, I was asked to make them fit in better with the rest of the UI on our site. This was not unreasonable in any way; they did look a little out of place; but something about it bugged me.

Back then, I had set my window manager to use a dark theme on my machine, and the dropdown menus in question, implemented using <select>, were respecting that choice. The rest of the webapp UI was how 'we' (as devs) wanted it; a light, colourful, modern-looking theme; but the <select> elements were the only things on the page that were rendered the way that I (the 'user') wanted them to be. It looked downright ugly to be honest, and in the end we used a react-widgets dropdown component instead. Nevertheless, that experience stuck in my mind. We were eradicating the small amount of user input into how the page should render. Why?

It's probably not very common for users to do this, but it is actually possible to specify typefaces, fonts and text/background colours in the preferences of most web browsers. This information doesn't need to be sent anywhere for it to work; it's all on the client-side. Why don't we respect this as frontend devs and designers?

In recent times, it has become common to provide a 'dark-mode' option in modern web browsers, which can be supplied to websites allowing them to load different colour themes through CSS. Perhaps this is the best we can do to give users some control over their experience whilst also allowing the website owners to provide what they think is the best representation of their brand or product. But it misses so much of the potential of client-side colour theming.

If you're as old as I am, you probably remember fiddling about with Windows 2000 colours and making all sorts of vomit-inducing / unreadable themes. It was fun! If you wanted all the backgrounds of windows to be pink and the text to be yellow, you could do that! You could even save different themes and load them up according to how you felt on any particular day. Yes, you can sort of do this today with Windows 10, but it's to a much lesser degree- the user experience is much more tightly controlled by the designers. Don't get me started about MacOS. You are no longer allowed to get yourself into a mess where all the text is unreadable, or parts of the UI are too small to click. I can't help but miss the days when you could, if you wanted to.

I don't think this is just nostalgia on my part. On the contrary, I believe that most users of any computing device are very creative and love to customise. Do you still have the default desktop wallpaper that was shipped with your PC? How about your smartphone? Whatever it's possible to configure, most of us at least have something to say about it. After all, it's often a screen we'll be staring at for hours at a time throughout the day (the healthiness of this being another discussion, of course).

I'm aware of the existence of web browser extensions that allow overriding CSS, or the option on some web browsers to override the font and colour styling of websites, and these are indeed useful, but since neither of these solutions is being designed for, there are inevitably some elements that don't behave nicely when this is done. There will be some text box that suddenly becomes indistinguishable from the background, or something like that. Besides this, the default behaviour of websites to control their appearance down to the last pixel means that users are not really aware that things could be different.

We can design for a range of viewport sizes (even resizing on the fly), we can design for various zoom levels, screenreaders, and different languages. It's not beyond us to develop websites and applications with custom colours and typefaces. Sometimes, the user's theming choices will be bad, but this is within their power to fix; I think we should allow them to make those mistakes.

Of course, frontend devs and designers will have to have some say in how the webpages they create are displayed; the user can't really anticipate what the content of the page will be, so it's really not feasible to expect them to the control the layout or relative scale of elements on the page. But I've come to believe that, wherever possible, the basic colour and typeface configuration should be in the hands of the user.

Every site they visit would be tailored to their preferences. If a user needs the text to be bigger, or has trouble seeing certain colours, they would no longer need rely on third party browser plugins or overrides that cause issues. No longer would they need to tweak styling options for each site. The capability to do this is built in to most web browsers! All we as web developers need to do is respect those preferences by not interfering with the browser's configuration unless it's really necessary.

This doesn't mean that our web pages are doomed to look terrible and amateurish. Good designers can work within limitations. But we should be putting user experience above branding and short-lived design trends.

I will provide some examples of how this could look below.

Youtube looking... not great This site, version 1 DuckDuckGo, steampunk style maybe? D&D Beyond, Halloween special This site, version 2 Github, cyberspace style