about
Site Demo
06/19/2024

Site Demo Page

Site navigation, thread navigation, and widgets

"If you always do what interests you, at least one person is pleased."
- Katharine Hepburn
This page is a place to explore how site navigation, menus, and widgets work. It's small enough that you can try out the menus and widgets without a lot of distracting detail. The site holds information like code, stories, and other resources in hundreds of pages. Site-wide navigation is supported by the menu at the top of this page. You can quickly see what is available by hovering over each of the drop-down buttons and scanning their lists of places to go. Instead of explaining each one, I'll let you browse them yourself. The top menu drop-downs will close as soon as the mouse leaves their territory. In contrast, pop-ups triggered by clicking on buttons on the bottom menu stay open until you click the button again or refresh the page. That was done intentionally because some of that information is useful while you browse a single page. Things work a little differently with tablets as they don't have hover capability. However the corresponding tablet touch functionality works well. The menuing system used in this Home group is new. You will find the new menus on all pages in the Home group, Repository Summaries, Basic Track and Design Track pages. It will take a while before most pages in this site have been converted to new menus.

Threads:

Figure 1. Home Group Thread
Most of the content of this page focuses on means for accessing and traversing "stories" and "bites" using top menu drop-downs and bottom menu pop-ups:
  • Thread:
    A linked list of pages that form some topic-based group. Examples are the Home Group, illustrated in Figure 1., and stories and bites.
  • Story:
    A thread that focus on a single broad topic, e.g., the Rust programming language. Think of a story as an ebook where each page is a chapter, like Rust Data. Stories attempt to give a fairly complete view of the story topic.
  • Bites:
    A thread of pages each of which presents a small digestible discussion of some topic, e.g., each Rust bite discusses in detail, usually with examples, one specific feature of the Rust programming lanaguage, like safety. Think of these as taking digestible bites out of the Rust Story. The bite thread doesn't promise to cover the parent topic completely.
Home page's Figure 1. shows the relationship between "Stories" and "Bites". They are each threads, but have different purposes. Stories sweep over the whole of some topic. Bites focus on key topics and Bite threads don't quarantee covering the whole. The set of four pages shown in Figure 1.: Home, SiteMap, SiteDesign, and SiteDemo form a viewable "Thread". That means that a user can navigate to any of these four pages from any other page in the thread by clicking "Next" and "Prev" buttons on either the top or bottom menus. Users can also navigate between these pages using the "Pages" button on the bottom menu. That's useful for threads with many pages. They can simply jump to the page they want (try it). View threads are a linking mechanism that tie together "Stories" and "Bite" collections. This page resides in the "HomeGroup" thread shown in Figure 1. Essentially it is part of a "Home Level" story. Links are created with hidden anchors in the page's html source. Each page is responsible for maintaining thread order by the integrity of its hidden links. This small HomeGroup story uses a wrap-around structure, as shown in Figure 1. For larger threads like C++ Story and Rust Bites the thread does not wrap-around. Instead "Prev" link on the first item points to itself, and "Next" link on the last item points to itself. That way you can't back up from the first and can't go forward from the last page.

Components

If you click on the body of Figure 1. you will see that it expands. Clicking on the title bar makes the figure contract. Three points about that:
  • Many of the images on pages in this site have that expandable behavior. It's implemented to try to get a good balance between viewing detailed text and viewing graphical information. The image starts out relatively small to give text precedence. But when you want to see the figure's details that is just a click or two away.
  • This behavior was implemented using W3C "Web Component" technology (originated by Google). That's described in some detail in Shadow Dom 101.
  • This site has a repository devoted to Web Components I've built including the one for resizeable images, used here.

Pages

The "Pages" button on the bottom menu pops up a list of all the pages in a thread, from any page in the thread. This page list:
  • Gives a quick snapshot of all the topics in a thread, based on the page names.
  • Allows a user to jump directly to another page in the thread rather than incrementing up or down the list with "Next" and "Prev" keys.
You see the "Pages" key only if the page you are viewing is a member of a thread.

Sections:

It's easy to navigate through a single large page using the "Sections" button. This page has a few sections so try it out. For short pages that isn't all that useful. But many of the stories, like C++ Story and Rust Story have chapters that are quite long, with many sections, all in a single page. In that case, the "Sections" button is very useful. One thing you may have noticed: text lines are limited to 50em's in length. Long lines are harder to read than smaller ones, so almost everywhere text is limited to that length. Figures and Images, however, are allowed to float to the right margin of the page. This isn't particularly beautiful, but uses the viewport's width to present information effectively.

About:

The "About" key displays a pop-up with information about the page, e.g., a copyright notice, page name in case you forget what page you're on, in the middle of a long page, and a last modified date. It is quite annoying to visit some technical site and start digesting details only to discover that its information is out-of-date. If you wonder how fresh the information is on any page in this site, just click "About", at least for pages that have been converted to this new menuing system.

Keys:

For all you laptop and desktop users, each page in the site reacts to select keyboard events. Click the "Keys" button (or type [K|k]) to see which keys can be used to trigger specified actions. Those short-cuts can make you significantly more productive in some situations. You can click on any of the left entries in the "Keys" pop-up instead of using the keyboard if you wish. That was implemented mainly for tablet users, but you may find yourself occasionally using them by clicking in the pop-up instead of striking keyboard keys. Toggeling between two pages is easy using the F (forward) and B (back) keys. I do that often when modifying content in one page based on content in another. The I, U, and D keys increase, return to usual, and decrease font size. The D key, for example, allows mobile device users to see controls that may not be in the normal field of view for small screens.
  Next Prev Pages Sections About Keys