A Collection of Learnable Components

This is a collection of components that are both useable and learnable. Each component is feature complete, does what you need, but is small enough to understand in a day. You can start your project quickly, and alter them as you need, or replace them entirely if you outgrow them.

These aren't simple static user interface elements. They feature complex difficult to implement features such Video that adapts to HLS live streaming on all platforms, WebTorrent based video support, full feature mini chat, and Bitcoin Payments.

You'll also find various user interfaces found in other components, but with a simpler code base and CSS style that's easier to understand. Useful tools like Stacked Layers, Tabs, Data Tables, Sidebars, and Forms.

All of these components are extracted from real websites I created for real businesses or creative ideas. I also made copies of common components found in other UI component collections so you can learn how they're made.

The Components

This list of components is constantly expanding as I work on new websites and extract things I created.

{#if !developer_admin} Set environment variable DANGER_ADMIN=1 to view components and use the Bandolier. {/if} {#each components as component} {component.title} {/each}

The "Bandolier" is a belt that holds all your ammo so you can quickly load them when you need to get something done.

Documentation

Every component is fully documented with a complete code demo. No unrealistic abbreviated demos with missing code and settings. If you see the demo or component doing something you can view a tab to see he entire demo code with nothing hidden.

Getting Started

You should have received access to the Learn JavaScript the Hard Way course which includes a full module on using this starter project. If you forgot how to forgot how to create your admin account:

After you've made your copy of the project you should register a fake account and then use the database admin to give yourself admin. The database admin tool is only open when you've set DANGER_ADMIN=1 on the command line, or if you're set as an admin.