Skip to content

Reduce hljs FOUC to colors only #960

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Jan 21, 2019
Merged

Reduce hljs FOUC to colors only #960

merged 1 commit into from
Jan 21, 2019

Conversation

michallepicki
Copy link
Contributor

@michallepicki michallepicki commented Jan 7, 2019 •
edited
Loading

hljs class is being added to code blocks by javascript, after the browser runs hljs code. For slower computers, browsers, or heavier pages, this can be noticeable by a FOUC. Unstyled code blocks have different height than styled hljs code blocks, so the whole page content "jumps". This can be especially annoying when navigating to anchor links. Some browsers would scroll to linked page fragment, and after the quick page re-render, the user would not see the linked page fragment anymore.

We can use the :not(.inline) css selector (supported by all browsers) to style code blocks to limit hljs FOUC to just color changes.

@michallepicki michallepicki mentioned this pull request Jan 7, 2019
Closed
@michallepicki
Copy link
Contributor Author

Should have been fine but rebased

@michallepicki
Copy link
Contributor Author

Rebased onto 0b27aed ;)

@josevalim josevalim merged commit 63057a0 into elixir-lang:master Jan 21, 2019
@josevalim
Copy link
Member

I completely forgot about the issues tracker, apologies.

@michallepicki michallepicki deleted the reduce-hljs-fouc branch January 21, 2019 18:59
matlc pushed a commit to matlc/ex_doc that referenced this pull request Apr 4, 2019
@michallepicki @matlc
parent ab2c3dd
aba87fd 
author Michał Łępicki <michallepicki@users.noreply.github.com> 1546725776 +0100
committer Mat Clutter <matclutter@gmail.com> 1554419584 -0400
gpgsig -----BEGIN PGP SIGNATURE-----

 iQIzBAABCAAdFiEEsM4qAF+pTkg2/b7aTIOp6Pcx4e4FAlymj4AACgkQTIOp6Pcx
 4e5C4RAAr+0863jpjah1JcSKz6LBAR341VnwWSccn1ndvT8kohpFaogIqBh2luP1
 iDCq6ZHNHviNoD/YrZDUfFbtcShSD70gCba5l2W2+QItQ7ncm1TGPC5iXi6wi+Cx
 VqrYPSedHNlkUNQEphePTj0a+7S16sZWgZZo74nKQL2jpbnEHQfQBMn3LeLVY749
 M8LqePTPzpctEYqqFWuWhOM3HcWhZyZqR+eqJDbJPhIY0HwvmtL0+Hh/TzIYmBV2
 UhMfQ2Xl2ZMPQsQpmdP8RuqyEE5FbUkY6eyZOw4FLPFt0gGqVlvWaUscFxzG5Jd9
 B1siUUTIv9ghONyO5QlUJigAsMcFqBr27tOWW+qLsPvScR0LEneC/Fc71JvZsTsY
 b/CopfkzVNNNlgx9RYyp4zK00+E8aPqPUxvPLjusymcOmUTP/CxoGZjJY5+xroIp
 AVoL9j994ujM8Qs1IZo2gw6wXgi5NXgn6Tbu/Dy8mWDbShdqQu641K5anlya5A9S
 MkGYUZ2EeeHAYY8nj6HuIqmOvd23K1jz8uX0oqtDcu2T4K7PH1w81T00pwBwekhC
 3CdiLbq0z2aWCfNl8O4/SapMbWIoYbZC6Z8oCrRjSzqQl1qyJQiHX7BunMpQd0zu
 sqjN+7s6mXxG33Qwkk3shOCLgPiF2sCvEnqF82Al3gWmphjcMEs=
 =m5NQ
 -----END PGP SIGNATURE-----

Unify code styling for makeup and hljs (elixir-lang#959)

Fix anchor links sometimes not working by moving js to html head (elixir-lang#962)

Raise error message for unknown docs chunk

Add goto icon

Fix sidebar margin on Firefox

Allow direct external links on the sidebar

* Clicking on the sidebar now consistenty expands the menu

* However, on every root link, there is now an arrow to open
  the page directly

* If shift is pressed, we keep the browser behaviour

* Improve CSS classes: clicked is now currentPage and active
  is now currentHash

Hide formatter modules

Release v0.19.3

Remove broken link

Always show link

Add extra padding

Use the goto arrow consistently on expansions

Reduce hljs FOUC to colors only (elixir-lang#960)

Fix typespec arg number (elixir-lang#966)

Previously signature where typespecs didn't have an argument name,
were named starting with 0

time_zone_period_from_utc_iso_days(arg0, arg1)
time_zone_period_from_utc_iso_days(Calendar.iso_days(), Calendar.time_zone()) :: ...

this commit fixes the number starting from 1

Name args in Autolink.default_text/4 helper (elixir-lang#957)

Add titles to sidebar top-right icons

Improve mouseover and titles on goto, related to elixir-lang#968

Add a versions dropdown to the html sidebar (elixir-lang#970)

Remove overflow on content, closes elixir-lang#972

Reduce size of app-vsn annotation

Keep trailing periods in summaries (elixir-lang#977)

Closes elixir-lang#975

Revert "Remove overflow on content, closes elixir-lang#972"

This reverts commit 43effcb.

The reverted commit breaks anchors on Firefox.

Fix anchors in Firefox/Chromium

Closes elixir-lang#978

Added ARIA-label to the search button

Signed-off-by: José Valim <jose.valim@plataformatec.com.br>

Add keyboard shortcuts (elixir-lang#976)

Fix issues with JS events under non-webkit browsers (elixir-lang#980)

Keyboard shortcuts - improvements (elixir-lang#982)

Add module to node structs to carry module name; add mfa into title attribute on links to improve seo

Fix tests to include title

Run formatter

Remove module attribute on nodes; update templates to pass in module to reference title where needed

Remove 'Link to' text except for detail chain link and screenreader info

Update tests to remove Link to text from api and non-detail templates

Undo unintentional format of spacing

Remove link to text from title attributes

Update css/js with new sha version

Add title attribute with mfa on links to improve seo

Add module to node structs to carry module name; add mfa into title attribute on links to improve seo

Remove 'Link to' text except for detail chain link and screenreader info

Undo unintentional format of spacing

Add title attribute with mfa on links to improve seo

Update title in detail template examples

Add title to replace function for links in text

Update auto link to add titles to links within page content and specs

Add module_id into default_title to add full mfa to local functions

Lowercase section headings in titles

New dist files after running build after rebase accumulation

Remove rebased-in code

Update module details and search results

Create seperate entry function for extras headings; change casing on summary

Update templates and tests to remove tags from titles

Change binary block formatting keep formatter from breaking lines

Full text search (elixir-lang#974)

Fix required double click on sidebar for safari

Improvements to full text search

* Add loading state
* Only load search items on search page

No longer depend on Poison

Move shared dependency to HTML

Do not render to markdown multiple times

Make the linter happy

Ignore : in search as it is not stemmed anyway, closes elixir-lang#983

Provide search help on invalid syntax

Remove double var

Keep structs in signature, closes elixir-lang#973

List delegation docs if delegate_to metadata is present

Run the formatter in released Elixir version

Update CHANGELOG

Search autocomplete (elixir-lang#985)

Rename config.js to ex_doc_config.js

Push Earmark to v1.3 (elixir-lang#988)

Add module to node structs to carry module name; add mfa into title attribute on links to improve seo

Run formatter

Remove module attribute on nodes; update templates to pass in module to reference title where needed

Remove 'Link to' text except for detail chain link and screenreader info

Undo unintentional format of spacing

Update css/js with new sha version

Add title attribute with mfa on links to improve seo

Add module to node structs to carry module name; add mfa into title attribute on links to improve seo

Remove 'Link to' text except for detail chain link and screenreader info

Undo unintentional format of spacing

Add title attribute with mfa on links to improve seo

Add module_id into default_title to add full mfa to local functions

Lowercase section headings in titles

New dist files after running build after rebase accumulation

Remove rebased-in code

Update module details and search results

Create seperate entry function for extras headings; change casing on summary

Update templates and tests to remove tags from titles

Change binary block formatting keep formatter from breaking lines

Add link_title to new searchItems list

Update earmark after deps.get

Update css/js assets after mix build

Update css/js assets after mix build
@matlc matlc mentioned this pull request Apr 4, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@michallepicki @josevalim