Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Published
Edited
Apr 22, 2020
4 stars
Audio Worklet - Volume Monitoring RMSCSS Radial Gradient GeneratorFast Video Seeking - Encoding TestsAfter Effects Motion Tracking DataSorted Named Colors For HumansDiamond Theory: Symmetry in Binary SpacesRough.js make your own textGT Flexa Variable Font Experimentbackground-position ScrubberHello OGL - Minimal WebGL libraryHello q5.jsScrubbing Youtube Video Experiment
Hello Crank.js
Also listed in…
Libs
{
const el = DOM.element('div');
renderer.render(
jsx`
<div class="container">
<div class=quote>
<${Greeting} name=${'You'}/>
<${Timer} />
<${Quotes} />
</div>
<div class=dog>
<${RandomDogApp}/>
</div>
</div>
`,
el
);
return el;
}
async function QuoteOfTheDay() {
const res = await fetch("https://favqs.com/api/qotd");
const { quote } = await res.json();
console.log(quote);
return jsx`
<p>
“<${Raw} value=${quote.body} />” – <a target="_blank" href=${quote.url}>${quote.author}</a>
</p>
`;
}
function* Quotes() {
const interval = setInterval(() => {
this.refresh();
}, 5000);
try {
while (true) {
yield jsx`
<${QuoteOfTheDay} />
`;
}
} finally {
clearInterval(interval);
}
invalidation.then(() => clearInterval(interval));
}
function Greeting({ name = "World" }) {
return jsx`
<div>Hello ${name}</div>
`;
}
function* Timer() {
let seconds = 0;
const interval = setInterval(() => {
seconds++;
this.refresh();
}, 1000);
try {
while (true) {
yield jsx`<div>Seconds: ${seconds}</div>`;
}
} finally {
clearInterval(interval);
}
}
async function* LoadingIndicator() {
await Promises.delay(1000);
return jsx`<div>Fetching a good boy...</div>`;
}
async function RandomDog({ throttle = false }) {
const res = await fetch("https://dog.ceo/api/breeds/image/random");
const data = await res.json();
if (throttle) {
await Promises.delay(1000);
}
return jsx`
<a target="_blank" href=${data.message}>
<img class="img-fluid" src=${data.message} alt="A Random Dog" width="300" />
</a>
`;
}
async function* RandomDogLoader({ throttle }) {
for await ({ throttle } of this) {
yield jsx`<${LoadingIndicator}/>`;
yield jsx`<${RandomDog} throttle=${throttle} />`;
}
}
function* RandomDogApp() {
let throttle = false;
this.addEventListener("click", ev => {
if (ev.target.tagName === "BUTTON") {
throttle = !throttle;
this.refresh();
}
});
while (true) {
yield jsx`
<${Fragment}>
<div>
<button>Show me another dog.</button>
</div>
<${RandomDogLoader} throttle=${throttle} />
</${Fragment}>`;
}
}
html`
<style>
.container {
background: #333333;
color: white;
padding: 1rem;
display: flex;
}
.container button {
font-size: 1rem;
padding: 0.5rem;
border-radius: 10px;
}
.container .quote{
padding: 0.5rem;
flex-basis: 50%;
}
.container .dog {
padding: 0.5rem;
min-height: 350px;
flex-basis: 50%;
}
.img-fluid {
width: 100%;
heigth: auto;
}
@media (max-width: 650px){
.container {
flex-wrap: wrap;
}
.container .dog {
flex-basis: 100%;
}
.container .quote{
flex-basis: 100%;
}
}
</style>
`
createElement = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module'))
.createElement
Fragment = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module'))
.Fragment
Raw = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module'))
.Raw
renderer = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/dom.js?module'))
.renderer
htm = require('htm@3.0.4/dist/htm.umd.js')
jsx = htm.bind(createElement)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
