programming-idioms
programming-idioms copied to clipboard
Better rendering before all resources are loaded
Current behavior
After the HTML has been loaded, but before the CSS (Bootstrap, etc.) and JS (jQuery, etc.) files have been loaded, the display is a mess.

Disadvantages:
- if it is displayed for a long time (poor connection), or forever (lost connection), then we can't even read the most important content, lost in an ocean of meaningless elements.
- there is a large FOUC when the CSS file kicks in and when the JS kicks in.
- the rendering is very bright, which doesn't respect the preference of a user having Dark Mode enabled
Desired behavior
Try to mitigate this by inlining some small amount CSS inside the HTML. It will be redundant with the actual CSS files, but taken into account sooner.
- Mitigation 1: hide undesired elements by default, like modal windows.
- Mitigation 2: apply horizontal layout to sequences like header, language lists, link lists, footer.
- Goal 3: make sure the main content (idiom statement, current implementation) is prominent and readable.
- Mitigation 4: apply the minimal dark theme with
@media (prefers-color-scheme: dark): background color, text color.