Here I'm collecting some/most of the features of this website.
I implemented all of them on my own, in plain JavaScript (Vanilla).
Feel free to also visit this links, for m0re info:
JFYI All items with the ⚙ icon are configurable items.
Important feature!
... I didn't integrated a usual dialog asking for cookie permissions;
...
but you can manage your cookies in the Settings section!
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.
[ UPDATE 2025-05-01 ]
My help's are now also supported on touch/pen devices (smartphones without mouse).
In an easier form: without moving, but by TAP and HOLD 'long' it'll be opened
(if the tapped element or positional parents got some help attributes);
Then by tapping again (anywhere) the open help will be closed. ... but this only
worx on smartphones/.. this way.. with a PC/Desktop/Workstation/ the right mouse CLICK
will be ignored by the `Help` sub system (and usually open some browser's context menu).
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.
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..
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..
The last version of this kekse.biz website used my own implementation
of any animation. This was easy by using `requestAnimationFrame()`, etc..
plus the (optional)
sinusoid functions like `Math.psin()` [just calculates ((Math.sin() + 1) / 2)], etc..
But in this newest v4
I decided to use the common `Web Animations API` since it should be massively faster.
...
I don't really like this, but hey..
therefore I extended this one really very much! See the animation.js.
Plus, some were nevertheless implemented completely on my own, without the API. This had many reasons, but OK; doesn't matter.
The Menu's animation is described above at the Menu feature.
So, at least for your client's sake I decided to make some animations optional.
As I told you above, the Menu's sine animation can be enabled/disabled,
and also my Gradient Animations (they got their own class in the `animation.js`, btw..);
which are used partially in the main document view area, and also the Help PopUps are animated this way.
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. ;-)
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!).
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: Just implemented my own SCROLL BAR, which is only visible in non-mobile mode.
Using your mouse/finger you can 'load' to a value, so this amount will be scrolled in the document to (after releasing finger/mouse).
But it's only vertical; located on the right of your browser window.
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.
On the bottom there's also a 'status bar' which let's you know about some vectors of this web presence:
NEW: Massively improved the scrolling feature of this bar.. so if your screen width is too low for the whole bar, use mouse/fingers on it!
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..
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).
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.
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)!
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)!
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.