Site Building - Issues

Here are the issues I encountered during the process of building this site and the solutions I came out.

Uncategorised

2018-08

When using Hugo shortcode highlight to generate code blocks, there always a trailing empty line?

Dedent the ending {{< / highlight >}} to make sure there is no whitespace in the head of the line.

Live reloading does not bring the latest change to browser?

Google Chrome -> open Devtools window -> click Network tab -> check Disable cache box. Keep the window open during the testing.

Sometime only the currently opened page got latest change to (e.g. css, js files …), if I jump to other pages, reloading page or clear the browser cache does not work.

Rerun the hugo server command with --gc --cleanDestinationDir=true switch.

The tags folder got ignored by git somehow?

Check following files for anywhere mentions tags:

  1. .gitignore at the project root directory (the path where project’s .git folder lies).
  2. .git/info/exclude just like .gitignore but is not tracked by git.
  3. Global ignore file, type git config --get core.excludesfile to see it.

Why the line-height of pre code can not be further decreased under certain limit?

The line-height value of containing block element specifies the lower bound of included inline elements. Set the line-height on the wrapping <pre> element instead.

The sidebar position adjustment script run weirdly in Safari.

It is a bug of Safari. Disabling scrolling inertia in Preferences -> Accessibility -> Mouse & Trackpad -> Trackpad options … -> Scrolling suppresses this bug, but the system scrolling experience is totally changed.

Currently, I added a isSafari check from StackOverflow in scrollPanes function which immediately return on Safari.

Hugo server failed generating the site with error log unexpected EOF.

It is usually due to the hugo template parser did not finish parsing the target template file, on such case I often check the source template file to see if there is unbalanced {{ end }}. For example missing {{ end }} for {{ block "main" . }} …

Reducing line-hegiht of some elements deep in the document DOM has no effect under certain limit.

As stated on [line-height | MDN], ancestor block element’s line-height set a lower bound for descendant elements. And the suggested value form is <number> (without any following units).

Use browser element inspector to line-height inheritance relationship that prevents your to reduce it.

My strategy is to set a lowest value (e.g. 1) at <html> element, then set effective value in elements as deep in the DOM as possible.

Content.

Compatibility

IE 11 does not support alpha component in color hash format i.e. #RRGGBBAA.

Use #RGB or #RRGGBB instead.

IE 11 does not support flexbox layout.

Use the traditional floating or fixed positioning way or table layout.