Platform
Resources
Pricing
Sign in
Get started
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Workspace
Fork
Published
2 collections
By
Andrew Wooldridge
Edited
Aug 15, 2022
1 star
Tips and Utilities
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 API
Hello 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 Observable
Convex Chat
Hello, filesize.js!
Hello, SVG.js
Hello, Counter-element!
Hello, Ramda!
Hello, Block Protocol!
Hello, Reef!
Hello, Croquet!
Hello, Markdoc!
Hello, Multiavatar!
Hello, Tableful!
String.prototype.replaceAll
Hello, kdl-js
How to import remote JS modules into your notebook without NPM
Using new Function() as a way to run remote JS
Hello, Wild Wild Path!
Hello, Lexical!
Testing New Mermaid Template Literal
Hello, Statery!
Hello, pdfme!
Testing Scrollbar Customization
Shuffle an Array
Hello, Pikaso
Testing textContent
How To Use Local JS Files in Your Notebooks
Hello, Miniplex!
Hello, CandyGraph!
Hello, Supabase!
Hello, Embla Carousel!
Hello, core-js!
Protip: Load and Style and Image in Markdown
Web Component Test
Protip: Promises.tick - Run code every set interval
Hello, tinybase
Hello, umbrellajs
Hello, pintora
Skypack Pixijs
Hello, sortablejs
Hello, iro.js
Object Assign to Modify HTML
New Options for Images in Observable
Playing With Destructuring
Hello, JS Image Zoom
Exploration: Template Literals
Test Message Channel
JavaScript Class Exploration
HTML Input Types Explorer
How to: Convert an API Response into HTML
Updating Game Elements in Kaboom JS Without Forcing a Refresh
Playing with yield
Testing SQLite and ZIP
How to: filter a data set via search
How to: Convert a Markdown List to JSON
How to: pull in a JavaScript Library
How to: Rendering HTML from a Github gist
How to: make buttons run code in Observable
The Oracle
Tarot Utilities
How To: Create and Update HTML Views
How to: Make a downloadable text file from an input
How to: filter a data set via search + suggestions
Simple Calculator View
Google Font Embedder
How to: get around flat array issue in Observable Tables
Also listed in…
Working Libraries
Insert cell
Insert cell
atomico
=
import
(
'https://unpkg.com/atomico@1.61.1/core.js?module'
)
Insert cell
Insert cell
function
component
(
{
name
}
)
{
return
atomico
.
html
`<host shadowDom>Hello, ${
name
} !</host>`
;
}
// WEBCOMPONENT
Insert cell
{
// WEBCOMPONENT PROPERTIES AND ATTRIBUTES
component
.
props
=
{
name
:
String
,
}
;
// WEBCOMPONENT APPEARANCE
component
.
styles
=
atomico
.
css
`
:host {
font-size: 30px;
}
`
;
customElements
.
define
(
"my-component"
,
atomico
.
c
(
component
)
)
;
}
Insert cell
Insert cell
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.
Try it for free
Learn more
Fork
View
Export
Listed in...
Tips and Utilities
Andrew Wooldridge
Working Libraries
Andrew Wooldridge
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
atomico
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
component
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML