10 |
Plan 1
11 |
12 | A love letter to the grateful dead internet hypothesis
13 |
14 |
15 |
Elves
16 |
17 | Elves are discreet hypertext helpers.
18 |
19 |
20 |
Hello World
21 |
22 | The first elvish taught to most humans is hello-world.
23 |
24 |
25 |
Demo
26 |
27 |
28 |
29 |
30 |
QR Code
31 |
32 | qr-code required attributes:
33 |
34 |
35 |
38 |
39 |
40 | qr-code optional attributes
41 |
42 |
43 |
44 | - data-bg: custom background color
45 | - data-fg: custom foreground color
46 |
47 |
48 |
Demo
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Elvish
57 |
58 | "Learn to draw in style and when to teach them" - the mantra of the elves
59 |
60 |
61 |
Befriending Elves
62 |
63 | The function of an "elf" is to be a hypertext helper. Known elves speak the same universal dialect of elvish.
64 |
65 |
66 |
67 | The goodbye-world elf is known by the following definition:
68 |
69 |
70 |
const $ = elf('goodbye-world', { planet: 'World' })
71 |
72 |
Learn
73 |
74 | Elves tuck information away in what humans have categorized as "JSON", better known as Jason.
75 |
76 |
77 |
const data = $.learn()
78 |
79 |
Draw
80 |
81 | When elves draw, they have the full hypertext target to work with. Hypertext returned from the callback will be drawn automatically. The target is available in the draw callback, as well as optional hooks before and after the draw callback is updated, when Jason has new information to learn.
82 |
83 |
84 |
<![CDATA[$.draw((target) => {
85 | const data = $.learn()
86 | return '<button>Hello ${data.planet}!</button>'
87 | }, {
88 | beforeUpdate: (target) => null,
89 | afterUpdate: (target) => null
90 | })]]>
91 |
92 |
Style
93 |
94 | Elves style the same way humans do, with cascading style sheets.
95 |
96 |
97 |
$.style(`
98 | & {
99 | color: red;
100 | }
101 | `)
102 |
103 |
When
104 |
105 | When elves have detected a human interaction, they can process the event.
106 |
107 |
108 |
$.when('click', 'button', (event) => {
109 | $.teach({ planet: pluto })
110 | })
111 |
112 |
Teach
113 |
114 | Elves can teach Jason basic data with a single object. An optional merge function may be passed to teach Jason more specifically.
115 |
116 |
117 |
$.teach(
118 | { planet: 'pluto'},
119 | (state, payload) => {
120 | return {
121 | ...state,
122 | defunctPlanets: [...new Set([...state.defunctPlanets, payload.planet])]
123 | }
124 | })
125 |
126 |
Demo
127 |
128 | The demo below is inspired by the documentation above, but not exact.
129 |
130 |
131 |
132 |
133 |
3 | 
9 | 
10 | 
11 |
12 | 
13 | 
14 | 
22 |
32 | 
7 |