Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better rendering before all resources are loaded #219

Open
Deleplace opened this issue Oct 30, 2022 · 0 comments
Open

Better rendering before all resources are loaded #219

Deleplace opened this issue Oct 30, 2022 · 0 comments

Comments

@Deleplace
Copy link
Owner

Deleplace commented Oct 30, 2022

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant