bitty

Bitty is a tool for making things on the web. For example, this match game:

The Basics

Bitty comes in the form of an HTML tag. Wrapping it around other tags makes them interactive. For example, this HTML:

<bitty-7-0>
  <button data-use="getDate">Get Date</button>
</bitty-7-0>

<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>

and this JavaScript:

window.BittyClass = class {
  getDate(_, el) {
    el.innerHTML = new Date();
  }
};

Make this button:

Tap or click it to show the current date and time.

More Examples

Here's some other things you can do with Bitty. Each one has a link to the code that makes it work.

How It Works

bitty is a web component. You can include it on your page with this script tag:

<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>

Once it's on your page, there are three steps to add functionality:

1. Add one of bitty's data-... attribute to an element

   For example, this button uses the data-use attribute

   <button data-use="randomExample">
     Get Random Number
   </button>

   The randomExample value of the data-use attribute is the name of a signal that connects to the JavaScript will write in step 3.

2. Wrap the button inside a bitty tag

   <bitty-7-0 data-connect="Randomizer">
     <button data-use="randomExample">
       Get Random Number
     </button>
   </bitty-7-0>

   Individual bitty tags connect to JavaScript classes that provide the code for the functionality. In this case, we're using data-connect="Randomizer" to connect to class on the page named Randomizer that we'll create in the next step.

3. Add the JavaScript

   bitty can use JavaScript from a module or from code that's directly on the page. We'll use the later for this example by creating a class on the window named Randomizer (which is the value we set in the bitty tag's data-connect attribute).

   <script>
     window.Randomizer = class {
       randomExample(_, el) {
         el.innerHTML = Math.floor(
           Math.random() * 100
         );
       }
     }
   </script>

   The randomExample method name matches the value from the data-use attribute on the button element. That name matching is how bitty connects elements to methods to make them interactive.

Putting that code on the page produces this button:

When you click it, the text inside turns into a random number between 1 and 100 thanks to the randomExample method from the window.Randomizer class.

A Few Technical Details

• Bitty is a Light DOM web component written in vanilla JavaScript. It's a single file. Compressed, it's a little under 4KB.

• Bitty requires no build steps or installation of npm packages. You simply included it on your page with a script tag like:

<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>

• Once you have the script tag on your page, you're ready to start adding <bitty-7-0> tags to enhance your pages.

• Bitty's design goal is to make is as simple as possible to work with. It uses native HTML Attributes, Elements, and Events connected to single JavaScript method with a signaling approach.

• The entire HTML portion of Bitty's API consistes of six data-* attributes:

  • data-connect
  • data-init
  • data-listeners
  • data-receive
  • data-send
  • data-use

  You can learn more about them in the documentation.

• The JavaScript methods are custom code that you write. Each one has the same incoming signature with two arguments: an event and an element. They look like this:

someFeature(event, element) {
    // do something with the 
    // event and element here. 
  }

anotherFeature(event, element) {
    // do something with the 
    // event and element here. 
  }

• Bitty is designed explicitly to work with a Progressive Enhancement approach as well as general JavaScript loading.

• Bitty provides for loading external HTML, JSON, TXT, and SVG files with find and replace feature that make it easy to assemble new elements and document fragments.

Next Steps

The Getting Started guide is almost ready. In the mean time, you can:

• Check out the documentation.
• View the code for each of the examples above. They're ordered with the simplest ones first and get progressively more complicated to demonstrate the basic concepts
• View the test suite where each tests has the source HTML and JavaScript used in the test.