programming-idioms icon indicating copy to clipboard operation
programming-idioms copied to clipboard

Better rendering before all resources are loaded

Open Deleplace opened this issue 3 years ago • 0 comments

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.

image

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.

Deleplace avatar Oct 30 '22 21:10 Deleplace