May 21, 2021 | 17:00
Reading-Time: ca. 2 Min

Please notice: This article is more than 3 years old
Content, Source code or links may no longer be correct in the meantime.

No Javascript harmed or died

Friday afternoon, a long bank holiday weekend lies straight ahead. Time to fix a few issues in this blog. Basically just minor ones and for the most visitors irrelevant. But for me important details, making the difference to the standard modular websites.

Yellow Textmarker

One of these inconspicuous details is the highlighting with a “yellow textmarker”. I have been annoyed more than once when highlighting is done in the standard system colours. For a viewer, exactly the opposite happens: The highlighting worsens the readability and the contrast as the following picture shows:

Screenshot, poor and low contrast on the left, clearly more legible on the right

With a few lines of CSS I’ve added the pseudo-class ::selection and look forward to the next webinar, where I can show something more clearly.

More Drama

An important quality feature of this site for me: It is discreet and free of javascripts, cookies and other dependencies. Visitors are not bothered with consent requests. This is exactly what makes the loading time optimal for Google and other search engines.

On the other hand, the page looks quite static and may need a little more “action”. With the help of another CSS hack, I have added a typewriter effect to the title and let the cursor blink permanently in a loop.

Update-Tags

Another detail: I was not able to indicate updated blogs accordingly. In most cases a ““Update”” suffix was added to the title. But this seems “lazy”, has a damaging impact on searches and is visually not noticeable when looking at the page. In future, nice update tags will mark updated content.

Screenshot, lazy left vs. done right

Tooltips

Last but not least, some explanatory text was missing for the minimalist icons in the top navigation. More icons will be added in the future. Tooltips are the solution without disturbing the appearance of the page. In order to make Hugo to distinguish between German and English texts, this is done with the help of partials in the corresponding i18n language files.

For a casual Friday afternoon, a lot of small improvements. Everything in pure CSS, no Javascript harmed or died.

In that spirit,
have a sunny weekend!

Tomas Jakobs

© 2024 Tomas Jakobs - Imprint and Legal Notice

Support this blog - Donate a Coffee