📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
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, Embla Carousel!Hello, core-js!Protip: Load and Style and Image in MarkdownWeb Component TestProtip: 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
Hello, Supabase!
<div id="container">
<div class='section'>
<form id='sign-up'>
<h3>Sign Up</h3>
<label>Email</label><input type='email' name='email' />
<label>Password</label><input type='password' name='password' />
<input type='submit'>
</form>
</div>
<div class='section'>
<form id='log-in'>
<h3>Log In</h3>
<label>Email</label><input type='email' name='email' />
<label>Password</label><input type='password' name='password' />
<input type='submit'>
</form>
</div>
<div class='section'>
<form id='validate'>
<h3>Access Token</h3>
<input readonly=readonly type='text' id='access-token' /> <small>Default expiry is 60 minutes</small>
<h3>Refresh Token</h3>
<input readonly=readonly type='text' id='refresh-token' /> <small>Supabase-js will use this to automatically fetch a new accessToken for you every 60 mins whilst the client is running</small>
</form>
</div>
<div class='section'>
<h3>Fetch User Details</h3>
<button id='user-button'>Fetch</button>
</div>
<div class='section'>
<h3>Logout</h3>
<button id='logout-button'>Logout</button>
</div>
</div>
<style>
body #container {
/* margin: 0; */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgb(250, 217, 246);
}
label {
margin: 0.5em;
}
.section {
margin: 1em;
}
</style>
SUPABASE_URL = "https://pxaruzggofkfcakgilvs.supabase.co"
supabase = SupaBase.createClient(SUPABASE_URL, Secret("SUPABASE_ACCESS_KEY"))
window.userToken = null
{
console.log("run")
var signUpForm = document.querySelector('#sign-up')
signUpForm.onsubmit = signUpSubmitted.bind(signUpForm)
var logInForm = document.querySelector('#log-in')
logInForm.onsubmit = logInSubmitted.bind(logInForm)
var userDetailsButton = document.querySelector('#user-button')
userDetailsButton.onclick = fetchUserDetails.bind(userDetailsButton)
var logoutButton = document.querySelector('#logout-button')
logoutButton.onclick = logoutSubmitted.bind(logoutButton)
}
signUpSubmitted = (event) => {
event.preventDefault()
const email = event.target[0].value
const password = event.target[1].value
supabase.auth
.signUp({ email, password })
.then((response) => {
response.error ? console.log(response.error.message) : setToken(response)
})
.catch((err) => {
console.log(err)
})
}
logInSubmitted = (event) => {
event.preventDefault()
const email = event.target[0].value
const password = event.target[1].value
supabase.auth
.signIn({ email, password })
.then((response) => {
response.error ? console.log(response.error.message) : setToken(response)
})
.catch((err) => {
console.log(err.response.text)
})
}
fetchUserDetails = () => {
console.log(JSON.stringify(supabase.auth.user()))
}
logoutSubmitted = (event) => {
event.preventDefault()
supabase.auth
.signOut()
.then((_response) => {
document.querySelector('#access-token').value = ''
document.querySelector('#refresh-token').value = ''
console.log('Logout successful')
})
.catch((err) => {
console.log(err.response.text)
})
}
function setToken(response) {
if (response.user.confirmation_sent_at && !response?.session?.access_token) {
console.log('Confirmation Email Sent')
} else {
document.querySelector('#access-token').value = response.session.access_token
document.querySelector('#refresh-token').value = response.session.refresh_token
console.log('Logged in as ' + response.user.email)
}
}
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.
