📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Mar 9, 2021
1 star
Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Drag and Drop APIHello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Loading a File via Drag and Drop in ObservableConvex ChatHello, filesize.js!Hello, SVG.jsHello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!String.prototype.replaceAllHello, kdl-jsHow to import remote JS modules into your notebook without NPMUsing new Function() as a way to run remote JSHello, Wild Wild Path!Hello, Lexical!Testing New Mermaid Template LiteralHello, Statery!Hello, pdfme!Testing Scrollbar CustomizationShuffle an ArrayHello, PikasoTesting textContentHow To Use Local JS Files in Your NotebooksHello, Miniplex!Hello, CandyGraph!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Protip: Load and Style and Image in MarkdownProtip: Promises.tick - Run code every set intervalHello, tinybaseHello, umbrellajsHello, pintoraSkypack PixijsHello, sortablejsHello, iro.jsObject Assign to Modify HTMLNew Options for Images in ObservablePlaying With DestructuringHello, JS Image ZoomExploration: Template LiteralsTest Message ChannelJavaScript Class ExplorationHTML Input Types ExplorerHow to: Convert an API Response into HTMLUpdating Game Elements in Kaboom JS Without Forcing a RefreshPlaying with yieldTesting SQLite and ZIPHow to: filter a data set via searchHow to: Convert a Markdown List to JSONHow to: pull in a JavaScript LibraryHow to: Rendering HTML from a Github gistHow to: make buttons run code in ObservableThe OracleTarot UtilitiesHow To: Create and Update HTML ViewsHow to: Make a downloadable text file from an inputHow to: filter a data set via search + suggestionsSimple Calculator ViewGoogle Font EmbedderHow to: get around flat array issue in Observable Tables
Web Component Test
Also listed in…
31 Days of Observable
html`
<template>
<p>The Zombies are coming!</p>
</template>
`
html`
<template>
<p>The <slot>Zombies</slot> are coming!</p>
</template>
`
html`
<template>
<p>The <slot name="whats-coming">Zombies</slot> are coming!</p>
</template>
`
md`The complete markup.`
html`
<apocalyptic-warning>
<span slot="whats-coming">Halitosis Laden Undead Minions</span>
</apocalyptic-warning>
<template>
<p>The <slot name="whats-coming">Zombies</slot> are coming!</p>
</template>
`
md`Now some JS to pull things together ( moved further below because Observable needs to await for the html to show up.)`
html`
<p>The Apocalypse will never happen!</p>
<apocalyptic-warning>
<span slot="whats-coming">Undead</span>
</apocalyptic-warning>
<apocalyptic-warning>
<span slot="whats-coming">Halitosis Laden Zombie Minions</span>
</apocalyptic-warning>
<template id="warningtemplate">
<style>
p {
background-color: pink;
padding: 0.5em;
border: 1px solid red;
}
</style>
<p>The <slot name="whats-coming">Zombies</slot> are coming!</p>
</template>
`
await visibility(), (
// Defines the custom element with our appropriate name, <apocalyptic-warning>
customElements.define("apocalyptic-warning",
// Ensures that we have all the default properties and methods of a built in HTML element
class extends HTMLElement {
// Called anytime a new custom element is created
constructor() {
// Calls the parent constructor, i.e. the constructor for 'HTMLElement',
// so that everything is set up exactly as we would for creating a built in HTML element
super();
// Grabs the <template> and stores it in 'warning'
let warning = document.getElementById("warningtemplate");
// Stores the contents of the template in 'mywarning'
let mywarning = warning.content;
const shadowRoot = this.attachShadow({mode: "open"}).appendChild(mywarning.cloneNode(true));
}
})
)
html`
<style>
apocalyptic-warning span {
color: blue;
}
</style>
`
html`
<template id="zprofiletemplate">
<style>
img {
width: 100%;
max-width: 300px;
height: auto;
margin: 0 1em 0 0;
}
h2 {
font-size: 3em;
margin: 0 0 0.25em 0;
line-height: 0.8;
}
h3 {
margin: 0.5em 0 0 0;
font-weight: normal;
}
.age, .infection-date {
display: block;
}
span {
line-height: 1.4;
}
.label {
color: #555;
}
li, ul {
display: inline;
padding: 0;
}
li::after {
content: ', ';
}
li:last-child::after {
content: '';
}
li:last-child::before {
content: ' and ';
}
</style>
<div class="profilepic">
<slot name="profile-image"><img src="${await FileAttachment("default.webp").url()}" alt=""></slot>
</div>
<div class="info">
<h2><slot name="zombie-name" part="zname">Zombie Bob</slot></h2>
<span class="age"><span class="label">Age:</span> <slot name="z-age">37</slot></span>
<span class="infection-date"><span class="label">Infection Date:</span> <slot name="idate">September 12, 2025</slot></span>
<div class="interests">
<span class="label">Interests: </span>
<slot name="z-interests">
<ul>
<li>Long Walks on Beach</li>
<li>brains</li>
<li>defeating humanity</li>
</ul>
</slot>
</div>
<span class="z-statement"><span class="label">Apocalyptic Statement: </span> <slot name="statement">Moooooooan!</slot></span>
</div>
</template>
`
html`
<style>
zombie-profile {
width: calc(50% - 1em);
border: 1px solid red;
padding: 1em;
margin-bottom: 2em;
display: grid;
grid-template-columns: 2fr 4fr;
column-gap: 20px;
}
zombie-profile img {
width: 100%;
max-width: 300px;
height: auto;
margin: 0 1em 0 0;
}
zombie-profile li, zombie-profile ul {
display: inline;
padding: 0;
}
zombie-profile li::after {
content: ', ';
}
zombie-profile li:last-child::after {
content: '';
}
zombie-profile li:last-child::before {
content: ' and ';
}
</style>
`
await visibility(),(
customElements.define("zombie-profile",
class extends HTMLElement {
constructor() {
super();
let profile = document.getElementById("zprofiletemplate");
let myprofile = profile.content;
const shadowRoot = this.attachShadow({mode: "open"}).appendChild(myprofile.cloneNode(true));
}
}
)
)
html`
<h1>Undying Love: A Zombie Dating Service</h1>
<div class="profiles">
<zombie-profile>
<img slot="profile-image" src="${await FileAttachment("moana.webp").url()}" />
<span slot="zombie-name" part="zname">Mooana</span>
<span slot="z-age">25</span>
<span slot="idate">October 15, 2027</span>
<ul slot="z-interests">
<li>rotary phones</li>
<li>human sports</li>
<li>brains</li>
</ul>
<span slot="statement">Fun and fancy free lady looking for a zombie with all its limbs.</span>
</zombie-profile>
<zombie-profile>
<img slot="profile-image" src="${await FileAttachment("leroy.webp").url()}" />
<span slot="zombie-name">Leroy</span>
<span slot="z-age">29</span>
<span slot="idate">March 1, 2026</span>
<ul slot="z-interests">
<li>disco</li>
<li>leisure suits</li>
<li>brains</li>
</ul>
<span slot="statement">Disco daddy who won't stop dancing your heart away.</span>
</zombie-profile>
<zombie-profile>
<img slot="profile-image" src="${await FileAttachment("phil.webp").url()}" />
<span slot="zombie-name">Phil</span>
<span slot="z-age">31</span>
<span slot="idate">December 22, 2025</span>
<ul slot="z-interests">
<li>brains</li>
<li>selfies</li>
</ul>
<span slot="statement">I'm out of this world! You know... because of the spacesuit... get it?</span>
</zombie-profile>
<zombie-profile>
<img slot="profile-image" src="${await FileAttachment("ahabcshanty.webp").url()}" />
<span slot="zombie-name">A. C. Shanty</span>
<span slot="z-age">41</span>
<span slot="idate">November 7, 2026</span>
<ul slot="z-interests">
<li>sea shanties</li>
<li>reality tv</li>
<li>brains</li>
<li>more brains</li>
</ul>
<span slot="statement">What's a pirate's favorite letter?<br>Rrrrrrr!<br>Aye! But his first love be the C</span>
</zombie-profile>
<zombie-profile>
<img slot="profile-image" src="${await FileAttachment("helga.webp").url()}" />
<span slot="zombie-name">Helga</span>
<span slot="z-age">39</span>
<span slot="idate">February 14, 2028</span>
<ul slot="z-interests">
<li>puns</li>
<li>rhubarb</li>
<li>brains</li>
<li>space lasers</li>
</ul>
<span slot="statement">The hostess with the mostest!</span>
</zombie-profile>
<zombie-profile>
</zombie-profile>
</div>
`
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.
