js/index.html

118 lines
2.7 KiB
HTML
Raw Permalink Normal View History

2022-01-01 12:05:43 +00:00
<link rel="stylesheet" href="page/style.css">
<script type="module" src="page/codeblock.js"></script>
2022-06-09 11:46:42 +00:00
<script type="module" src="page/scrollToTop.js"></script>
<scroll-to-top>
</scroll-to-top>
2022-06-23 07:28:33 +00:00
<a class="ribbon" href="https://github.com/darkwiiplayer/js">
View on Github
</a>
2022-01-01 12:05:43 +00:00
<h1>DarkWiiPlayer/JS</h1>
2022-06-23 06:48:17 +00:00
<section>
<p style="text-align: center;">
A collection of <em>JavaScript modules</em> to make <em>front-end</em> easier.
</p>
2022-07-02 08:55:38 +00:00
<p>
</p>
2022-06-23 06:48:17 +00:00
</section>
2022-01-01 12:05:43 +00:00
<section>
<h2>Skooma.js</h2>
<p>
Skooma lets you <strong>generate DOM nodes in JavaScript</strong>.
<a class="fancy" href="page/skooma.html">Read more</a>
2022-01-01 12:05:43 +00:00
</p>
<p>
<h3 class="all-unset"><b>Code Sample</b>:</h3>
<code-block>
import {html} from 'skooma.js'
let div = html.div([
html.h1('Hello, World!'),
html.p('Here is some text', {class: ["class_a", "class_b"]})
html.button("Click Me!", { click: event => console.log(event) })
])
</code-block>
2022-01-01 12:05:43 +00:00
</p>
</section>
2022-03-10 04:59:59 +00:00
<section>
<h2>Element</h2>
<p>
A helper function that adds many convenient features to classes for custom elements.
<a class="fancy" href="page/element.html">Read More</a>
2022-03-10 04:59:59 +00:00
</p>
<p>
<h3 class="all-unset"><b>Code Sample</b>:</h3>
<code-block>
import element from 'element.js'
element(class MyElement extends HTMLElement {
static attributes = { foo: true }
fooChanged(oldFoo, newFoo) {
console.log(`Foo changed from ${oldFoo} to ${newFoo}`)
render()
}
$render() { /* ... */ }
})
</code-block>
</p>
</section>
2022-03-17 08:49:57 +00:00
<section>
<h2>Listener</h2>
<p>
Like a normal object, except you can register callbacks for property changes.
<a class="fancy" href="page/listener.html">Read More</a>
2022-03-17 08:49:57 +00:00
</p>
<p>
<h3 class="all-unset"><b>Code Sample</b>:</h3>
<code-block>
import listener from 'listener.js'
const user = listener({name: "John Doe"})
user.listen('name', value =&gt; console.warn(`User name has changed to ${value}`))
</code-block>
</p>
</section>
2022-07-02 08:55:38 +00:00
<section>
<h2>Speaker</h2>
<p>
Publish and subscribe to messages, relayed via micro-tasks.
<a class="fancy" href="page/speaker.html">Read More</a>
<code-block>
const speaker = new Speaker()
speaker.listen((...args) =&gt; console.log(...args))
speaker.speak("First", "second", "third")
</code-block>
No, this has nothing to do with playing audio.
</p>
</section>
2022-01-01 12:05:43 +00:00
<section>
2022-02-08 13:50:32 +00:00
<h2>Debounce</h2>
<p>
Debounces data like user input or events that can occur in a burst.
<a class="fancy" href="page/debounce.html">Read More</a>
2022-02-08 13:50:32 +00:00
</p>
<p>
<h3 class="all-unset"><b>Code Sample</b>:</h3>
<code-block>
import debounce from 'debounce.js'
input.addEventListener("change", debounce(event =&gt; update(input.value)))
</code-block>
</p>
2022-01-01 12:05:43 +00:00
</section>