Beige Buttons

Demo

How to use

1. Include the JavaScript file:
   <script type="module" src="//beige-buttons.danq.dev/script.js"></script>
2. Put the component anywhere you want it:
   <danq-beige-buttons />
3. That's all!

Advanced usage

• The panel will fill the available width. To make it narrower, put it inside a container with a specified width:
  <div style="width: 400px;"><danq-beige-buttons /></div>
• The turbo button defaults to ON.
  Default to off with <danq-beige-buttons turbo="false" />
• The turbo button doesn't do anything, by default, but you can write your own functionality. Make your website run slower when turbo is disabled, for example!
• Check whether turbo is enabled with e.g.:
  document.querySelector('danq-beige-buttons').isTurbo()
• Externally change state of turbo with e.g.:
  document.querySelector('danq-beige-buttons').setAttribute('turbo', 'false');
• Listen for turbo toggles with e.g.
  addEventListener('danq-beige-buttons:turbo-toggled', e=>console.log('Turbo enabled?', e.detail.turbo));
• Listen for reset presses with e.g.
  addEventListener('danq-beige-buttons:reset-pressed', ()=>console.log('Reset was pressed.'));
• You can change the look-and-feed by overriding the CSS variables defined in the source code, e.g.
  <danq-beige-buttons style="--led-color: #22e;" />
• Prefer to selfhost? The JS file is self-contained: just download it onto your own server and load it from there, being sure to use the type="module" attribute to your <script> tag.
• Want fallback content for browsers that can't or won't run the JavaScript? Just put it inside a <danq-beige-buttons> ... </danq-beige-buttons> block.

About

In the 1980s through early 1990s, PC clock speeds took several leaps forward. Unfortunately, some older software - especially games - used the clock speed as a timing mechanism. This meant that if you ran a game designed to run on a 16MHz processor on a 33MHz processor, it could run impossibly fast.

The "turbo" button found on computers of this era was in reality a "slow down" button. Switching off the turbo would instruct the processor to run at a slower speed (often half speed), enabling older software to work as it ought to.

As PCs became more-powerful, software developers migrated to using the computer's real-time clock as a timing mechanism, independently of the execution speed of the processor. By the early 1990s, the turbo button was a curiosity for many users, who didn't need it or understand why it existed. However, turbo buttons continued to be installed on some new computers even towards the end of the decade.

This web component is an homage to the physical design and function of the turbo button, and the reset button that was so-often found alongside it. The design was inspired by this photo.

It was made by Dan Q and all the source code is released into the public domain. There's a blog post about it too.