README
dumbass
:bug:Chosen by toddlers, insects, and stupid coders.
Be boring, be dumb. Be too stupid for complex tools.
Make components from cross-browser web standards without thinking too hard.
Dumbass is a library to help you do this. It is not taught by exposing its concepts, but rather through examples. Which are provided below.
The aim is to aquire an intuitive understanding of what works, and to be able to use it without thinking.
Much care has been given to crafting the developer experience to enable this.
Why?
Kernighan's Law
Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
(Brian Kernighan)
Kernighan's Law is named for Brian Kernighan and derived from a quote from Kernighan and Plauger's book The Elements of Programming Style:
Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it?
While hyperbolic, Kernighan's Law makes the argument that simple code is to be preferred over complex code, because debugging any issues that arise in complex code may be costly or even infeasible.
So, what's this?
No JSX, no Shadow DOM, no fancy framworks, no opinions.
- Just HTML, CSS and JavaScript—No JSX, no Shadow DOM, no fancy frameworks, no opinions.
- Stop learning, stagnate!—Use the syntax you already know. Stop learning new things. Do more with what's already here.
- Crazy and fun, but in a serious way—Dumbass is the tool for people who don't want to think too hard to make UI.
To learn more...oh wait, you already know enough.
Gorgeous dumbass
function Spin(n) {
return d`
<div
wheel:passive=${spin}
touchmove:passive=${move}
>
<h1>
<progress
max=1000
value=${n}
></progress>
<hr>
<input
input=${step}
type=number
value=${n}>
</div>
`;
}
Still not bored?
You soon will be. Nothing amazing here: Play with the full example on CodePen
See even more boring code in a 250 line TodoMVC test
Install mantras
Install dumbass with npm:
npm i --save dumbass
Parcel or Webpack dumbass and import:
import { d } from 'dumbass'
See a CodeSandbox how-to of above
Or import in a module:
<script type=module>
import { d } from 'https://unpkg.com/dumbass'
</script>
Basic Examples
Components
Defining
const Title = state => d`<h1>${state}</h1>`
Nesting
const Parent = state => d`<main>${Title(state)}</main>`;
Inserting
Parent("Hello").to('body', 'beforeEnd');
Updating
Parent("Greetings");
let i = 1;
setTimeout(() => Parent(`${i++} 'Hi's`), 3000);
MVC Example
ToDo function App(state) {
const {list} = state;
return d`
<header class=header>
<h1>todos</h1>
<input autofocus
class=new-todo
placeholder="What needs to be done?"
keydown=${newTodoIfEnter}
>
</header>
<main>
${TodoList(list)}
${Footer()}
</main>
`;
}
function TodoList(list) {
return d`
<ul class=todo-list>
${list.map(Todo)}
</ul>
`;
}
Updating on events
function newTodoIfEnter(keyEvent) {
if ( keyEvent.key !== 'Enter' ) return;
State.todos.push(makeTodo(keyEvent.target.value));
TodoList(State.todos);
keyEvent.target.value = '';
}
Properties
Do not exist.
Global State
is nothing special.
Routing
function changeHash(e) {
e.preventDefault();
history.replaceState(null,null,e.target.href);
routeHash();
}
function routeHash() {
switch(location.hash) {
case "#/active": listActive(); break;
case "#/completed": listCompleted(); break;
case "#/": default: listAll(); break;
}
}
function Routes() {
return d`
<ul class=filters>
<li>
<a href=#/ click=${changeHash}
class=${location.hash == "#/" ? 'selected' : ''}>All</a>
</li>
<li>
<a href=#/active click=${changeHash}
class=${location.hash == "#/active" ? 'selected' : ''}>Active</a>
</li>
<li>
<a href=#/completed click=${changeHash}
class=${location.hash == "#/completed" ? 'selected' : ''}>Completed</a>
</li>
</ul>
`
}
Most of the examples above are taken from in a 250 line TodoMVC test, the full code of which you can see here..