Features

Here I will collect this website's features.
Since I implemented it on my own (totally from scratch, plain Vanilla), I also wanted to let you know about all of this.

You can also look at the whole source code in the `Source Code` section;
.. and there's also the with more details and more..

BTW: These features are not all features available.
This collection just lists those you will see as user.
The rest is hidden/under-layer and works great. ...

Index

Pages

All of my web pages are embedded into the `<main>` element.

They are loaded dynamically. Either by clicking on elements with `href` attribute, or when the location's `hash` changes.

Hint: If you'd like to give someone a link to a specific page of this website, you should use the (current) `hash` component of the `location`.
But replace the `#` by `?`, so the link will really get called! If you open a site with a hash, when there's currently another website open, it'll get ignored..
So you can enforce it with the `?` (which will just get converted to one of my regular hash links.

Since v4.4.39.0: a hash can now be divided into a low and high part (quasi); so if you'd like to load another page, define it in the hash.
If there is a local element in there which you'd like to directly address (on this next page), you can define it after a second hash `#` symbol:
so after loading the new page (and displaying it), the element on this page will automatically be scrolled to. ;-)

Mobile View

If your browser window (or display) width is under a calculated value, both, the main menu and the (optional) TOC, will be turned off.
This way we save some space to let the real contents shine brighter.. ;-)

Will be calculated each time your screen/window/.. size changes!
Double click/tap to toggle it manually, or use the button on the top/left of the main element (which is only visible in the mobile view!).

Menu

You'll only see it directly if your screen got enough width (so not in the mobile view). It indexes all real pages on this website (in my `home/`);
and it's dynamically changing it's look when some loading was done; and this is also animated, like most things on this site..

Scrolling

When (and only when!) your page is bigger than your screen/window/.. there's a Progress (on the top/right of the MAIN content)
to indicate your current scrolling state (a circle progress form, with the percent value in it's center).

New: Now the STATE bar got it's own scrolling functionality..

Page section

On the top there's a 'status bar' which also indicates your scrolling progress, but not as percent value but a string with the whole path of the current section's `<h*>` ('heading').
The full path is calculated out of the TOC.

State values

On the bottom there's also a 'status bar' which let's you know about some vectors of this web presence:

  1. Visits
  2. Update
  3. Last Visit
  4. Uptime
  5. Session
  6. Version Update
  7. Version
  8. Copyright

New since v4.4.39.2: This state/status bar can now be scrolled horizontally, if not every item is visible due to smaller window width (untested, mostly to check on mobile phones).

TOC (Table of Contents)

If the contents got some <h*> elements, they'll be automatically parsed to create an index on the right (will be automatically toggled).
It's not visible in the mobile view/ (but can be toggled).

BTW: it also scrolls when you do some scrolling in the main content; and it also changes, depending on your behavior..

Help / PopUp

Some elements got their own help/popup views. But you can't use this on phones or hardware with touch (or pen) devices - only mouse is supported.
This was a design decision, it's not a bug.

Freeze mode

Use the <Ctrl> key to enable it, and release it to disable!

It's there for some reasons - the first one was to let Popup/Help views stay as they are (not reacting to mouse move/click/.. etc.), so if there's a LINK in such help/popup, you can easily click it.
Another reason was the OSD feature.

Maybe in the future I'll also pause any animation while this mode is on..

OSD

You'll see it when something happens which is worth to mention.
The OSD items start on the top/right and will be counted to the bottom.

You can also manually close any OSD item by clicking/tapping on it;
or use the info message on the right/bottom to close all at once.

Clock

On the right/bottom you see an (24h!) analog clock.
Click/Tap on it to enlarge it; and move your mouse above it to see a digital view (as Help).

Progress

You'll see one or many when something is loading (in the background).
Either the regular circle form (the Clock depends on it), or just one or many bar(s).

The drawing is done with `Math.sin()` and `Math.cos()`, and more.

Dialog

It'll be sometimes visible, depending on how you behave.. ;-)

Mostly it'll be shown when you download something: every time you'll be asked if it's really O.K. for you (and never without your permission)!

GitHub / Markdown

I also extended the `URL` etc. for my own `github://[/user[/repo[/path]]]` scheme.

There's the creation of a repository list for a GitHub user.
And there's the conversion of `text/markdown` code (to embed my repository `README.md`s into this website)!

Your IP address/version

Now fixed to the upper/left. I counted it in here for a maybe important hint: double click on it to remove it from your screen. Maybe you wanted to make a screenshot without your IP visible.
To re-enable it, you have to reload the whole page.. xD~

FileInfo

Everywhere where a file is provided, there's also a FileInfo which is a general approach to also provide Popup/Help with interesting meta data.