High Technology in One Small Blue Circle
Good evening, world!
Earlier today, I was cruising around Pillars in my wheelchair when I discovered a little library. I’m not much of a book reader. I’ve always been more interested in creating things than sitting still and reading about what somebody else created.
Still, one hardcover book caught my attention. Its title began with one memorable word:
Boom.
I glanced through it, put it back, and rolled on.
A little later, my coding partner and I gave a name to a control we had been discussing for the MB Journal. The moment the name appeared, I knew it was right:
BluDot.
Boom.
BluDot has now been born in the upper-right corner of the MB Journal.
At first glance, it is simply a small blue circular button containing three white BluSup waves. But BluDot is not just another menu button, and it is definitely not a hamburger menu wearing a prettier shirt.
It is a context-aware, access-aware, page-aware control designed to give each person the actions that are useful to them at that exact moment.
That distinction is what earns BluDot its place in the BluSup family.
The Problem BluDot Solves
MB has grown into much more than a basic blog.
It has private and public posts, owner tools, visitor accounts, image handling, music, editing controls, search tools, security controls, and connections to the larger BluSup family.
All of that capability is good, but capability can create distance. A control may exist farther down the page, inside a post card, behind a login, or within the large BluSup Functions panel.
BluDot shortens that distance.
It stays fixed in the upper-right corner while the page moves beneath it. Whether I am at the top of MB, halfway through a long post, editing an entry, or reading something on a phone, BluDot remains within reach.
Its purpose is simple:
Show the right actions, in the right place, to the right person.
What BluDot Does on the MB Home Page
When I am signed in as the owner and viewing the main MB page, BluDot gives me direct access to the actions I use most:
- Write a new post
- Open posts
- Open the latest post
- Open all BluSup functions
- Return to the BluSup page I came from
- Open the BluSup home page
- Sign out or change user
The existing BluSup Functions panel remains important. It contains the broad collection of owner tools and destinations.
BluDot does not attempt to squeeze that entire control center into a tiny panel. Instead, it provides a fast route to the full panel when I need it.
This is an important part of the design: BluDot supplements the existing system rather than duplicating it.
What BluDot Does While Reading a Post
When a single MB post is open, BluDot changes its controls to match that situation.
As the owner, I can use it to:
- Return to the complete post listing
- Move to a newer post
- Move to an older post
- Edit the post currently on the screen
- Begin writing a new post
- Copy the direct link to the current post
- Return to the previous BluSup family page
- Open the BluSup home page
- Sign out or change users
BluDot also displays the title of the post being read. That gives the menu a little bit of immediate context and confirms that its actions apply to the current entry.
The Edit this post control does not create a second editing system. It locates the current post’s existing edit control, activates it, and smoothly moves the existing update form into view.
That is good BluSup engineering.
Instead of adding a competing mechanism, BluDot connects intelligently to the machinery MB already trusts.
Different People See Different BluDots
One of the most important technical features is that BluDot understands the MB Security Guard access level.
An owner, a signed-in reader, and a public reader do not receive the same menu.
### Owner View
The owner receives writing, editing, navigation, account, and owner-function controls.
### Signed-In Reader View
A signed-in view-only reader receives reading and navigation controls.
That person does not receive:
- Edit controls
- New-post controls
- Delete controls
- Owner-function controls
### Public Post View
A public reader who opens a directly shared public post receives a deliberately limited BluDot.
The public version can provide:
- Copy the public post link
- Open BluSup home
- Open the private MB sign-in entrance
It does not expose private navigation, owner controls, or protected post information.
This is not accomplished by drawing every possible control and then using JavaScript to conceal the dangerous ones.
The PHP page builds the menu according to the access state before the page is sent to the browser.
In other words, unauthorized controls are not merely hidden.
They are not rendered.
That is a much stronger design.
Server-Side Context Awareness
Before BluDot appears, MB’s PHP code studies the page it is building.
It determines:
- Whether the visitor is on the MB home page or a single post
- Whether the current post exists
- The title and direct address of the current post
- The newest available post
- The post immediately newer than the current one
- The post immediately older than the current one
- Whether the visitor is the owner
- Whether the visitor is an authenticated reader
- Whether the visitor is using the public read-only route
The resulting menu is assembled from that information.
This is what makes BluDot context-aware. It does not display a fixed set of links and hope they are useful.
It evaluates the current MB state and produces the appropriate control panel.
BluDot Remembers Where I Came From
BluDot also introduces a useful piece of navigation memory.
Suppose I enter MB from Pillars. BluDot can display:
Back to Pillars
If I enter from BluPilot, it can display:
Back to BluPilot
The first version recognizes several BluSup family destinations, including:
- Pillars
- BluPilot
- Photos
- TrikeBlu
- Bluoxi
- AustUp
- 250
- BluSup home
This memory is stored in the browser’s session storage. It lasts for the current browsing session without creating a new server-side user record.
The return system also checks the address before accepting it.
A remembered address must:
- Belong to the same BluSup website
- Be outside MB itself
- Not point to a logout route
- Be a valid address the browser can safely understand
An outside website cannot insert itself into BluDot’s return control.
If browser storage is unavailable or blocked, BluDot does not break. It simply continues operating without the remembered return link.
That is called graceful degradation: an advanced feature may become unavailable, but the primary control remains useful.
The JavaScript Controller
BluDot’s browser behavior is managed by a compact JavaScript controller.
When the blue circle is pressed, the controller:
1. Changes the button’s expanded state.
2. Updates its accessible label from “Open BluDot” to “Close BluDot.”
3. Reveals the control panel.
4. Moves keyboard focus to the first available action.
BluDot closes when:
- The blue circle is pressed again
- The panel’s close button is pressed
- The user clicks outside the panel
- The Escape key is pressed
- A menu link is selected
When appropriate, keyboard focus returns to the BluDot button after the panel closes.
These details may not be visually dramatic, but they are part of what separates a serious interface component from a decorative popup.
Accessibility Is Built In
BluDot was designed to work with more than a mouse.
The button and panel include descriptive accessibility labels. Decorative icons are excluded from screen-reader speech, while meaningful text remains available.
The open or closed state is communicated through the standard `aria-expanded` attribute.
A visually hidden label tells assistive technology whether the control will open or close BluDot.
Keyboard users can:
- Tab into BluDot
- Open it
- Move through its actions
- Press Escape to close it
- Return focus to the original button
The controls are also large enough to operate comfortably on a touchscreen.
This matters to me personally. I am currently working from a medical rehabilitation room, often from a bed or wheelchair, with my laptop positioned wherever I can manage it.
A small target that looks elegant but is difficult to operate is not good design.
BluDot aims to be both.
Responsive Design
On a desktop screen, BluDot opens into a compact panel aligned beneath the upper-right button.
On a smaller phone-sized screen, the panel adjusts its width to fit the available space. Its height is limited so it can scroll internally rather than extending beyond the screen.
The position also respects modern device safe areas. On a phone with a notch, rounded corner, or reserved display area, BluDot uses the browser’s safe-area measurements to stay out of trouble.
The control includes:
- A fixed upper-right position
- Large touch targets
- A mobile width calculation
- A maximum screen-relative height
- Internal scrolling when necessary
- Strong focus indicators
- A high stacking level so normal page content does not cover it
The BluDot circle remains small, but the interface behind it is carefully engineered.
Motion Without Nonsense
BluDot arrives with a brief fade, scale, and downward movement. The animation is subtle and fast.
It is there to help the eye understand where the panel came from, not to perform a circus trick.
The system also respects the browser’s reduced motion preference. When someone has requested reduced animation, BluDot disables its entrance animation and transitions.
That preference can be especially important for people who experience dizziness, vestibular difficulties, or discomfort from unnecessary screen movement.
Visual Technology
The BluDot panel uses modern CSS features, including:
- Layered gradients
- Responsive sizing
- Safe-area positioning
- Backdrop blur
- Flexible grid layouts
- Focus-visible styling
- Motion preference detection
- Touch-friendly spacing
- A custom three-wave SVG mark
No separate BluDot image file is required.
The wave symbol is drawn directly as scalable vector paths. That keeps it sharp at different sizes and avoids adding another image dependency.
The circular button contains the same visual DNA as BluSup: blue water, movement, depth, and the familiar wave.
It looks related to the family because it is.
What BluDot Does Not Change
A feature like this should be judged partly by how little unrelated machinery it disturbs.
BluDot V1 does not:
- Change any MB post data
- Change visitor records
- Change passwords or PINs
- Change authentication rules
- Change Security Guard permissions
- Add or replace images
- Create a new database
- Replace the existing editing system
- Replace the BluSup Functions panel
The complete patch consists of changes to only two operational files:
- The MB page controller and layout
- The MB stylesheet
That is the kind of surgical improvement I prefer.
A new capability should enter the system cleanly, use the strong systems already in place, and leave unrelated data alone.
Why This Counts as High Technology
High technology does not always need flashing lights, artificial intelligence, or a processor announcing its presence.
Sometimes high technology is a small interface that quietly understands:
- Which page is open
- Which post is being read
- Which direction time runs through the journal
- Which person is signed in
- Which controls that person is allowed to use
- Which BluSup page they came from
- Which device size they are using
- Whether they prefer reduced motion
- Whether browser storage is available
- Where keyboard focus should move next
Then it presents the right answer in one little panel.
That is BluDot.
The Future of BluDot
MB Journal is BluDot’s birthplace, but it should not be its final home.
Once the MB version proves itself in daily use, the same design language can spread throughout the BluSup family.
Each site should receive a BluDot only when it can provide meaningful, site-specific value.
Pillars might offer fast routes to services, staff, BluPilot, and the main Pillars page.
BluPilot might offer its overview, project history, current development work, and related MB posts.
Photos might offer photo sets, the current collection, search, and owner editing tools.
TrikeBlu, Bluoxi, AustUp, and the rest of the family can each receive a menu shaped around their own purpose.
The circle, wave mark, position, motion, and behavior can remain familiar while the actions adapt to each location.
The guiding rule will be:
Same familiar dot. Different useful actions.
BluDot should never appear merely because we have the code.
It must earn its place everywhere it goes.
A Small Beginning
I found a book today whose title began with “Boom.”
I did not take the book with me.
Instead, I came back to my room and helped create something.
A small blue circle now sits in the upper-right corner of the MB Journal. It knows where it is, what I am doing, who is looking at it, and which controls should be available.
It is compact, secure, responsive, accessible, and ready to grow.
MB Journal — Birthplace of BluDot.
Boom.
This shared post is read-only. Sign in as owner to comment.