Tech Lead at Taktile.
Formerly Firebase, Google
AWS HTTP Status DashboardIntegration Test DurationIntegration Test FlakinessAWS S3 API StarterAWS EC2 API StarterVisualizing Open-Source Code, Contributions & CommunitiesMost Popular Programming Languages, 2004–2021Database Outage PlotDataViz Dashboards for DevelopersVideo - How Data Visualization Affects Developer Practices“Yes And”: Collaboration for software developersHierarchical edge bundling IINotebook visualizerZoomable sunburstMobile App Breaches, Data Leaks, and Malware TimelineMobile Games Data VisualizationHow to make a Twitter BlueSky BotSoundcloud Reactive Audio Visualizer Music Video Generator3D apps overviewQuery, Process and Visualize Data Stream via a Functional Pipeline approachBright Sky (Better Weather App)How to build a Teachable Machine with TensorFlow.jsRidiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and Stripe
Chat application with Firebase on Observable (Twitch)
import { firebase, listen, viewof user } with {
firebaseConfig
} from '@tomlarkworthy/firebase'
// Copy and paste the config object from the Firebase project settings for a web application
firebaseConfig = ({
apiKey: "AIzaSyBN4bxw6d0cM0CGPNzRrkRlBqwFQnPLdN4",
authDomain: "larkworthy-dfb11.firebaseapp.com",
databaseURL:
"https://larkworthy-dfb11-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "larkworthy-dfb11",
storageBucket: "larkworthy-dfb11.appspot.com",
messagingSenderId: "786910701676",
appId: "1:786910701676:web:8d7dd002acf3b78c74d049",
uiConfig: {
// https://github.com/firebase/firebaseui-web#configuration
signInOptions: ["google.com", "anonymous"]
// tosUrl: '<your-tos-url>', // Terms of service url.
// privacyPolicyUrl: '<your-privacy-policy-url>', // Privacy policy url.
}
})
md`Its useful to assign SDK services to variable so autocomplete works`
firestore = firebase.firestore()
firestore
firestore.doc("messages/5h126rZvETtk4U010ueQ").set({
by: user.uid,
msg: "Hello"
})
(await firestore.doc("messages/5h126rZvETtk4U010ueQ").get()).data()
(await firestore.collection("messages").get()).docs.map(d => d.data())
listen(firestore.collection("messages").limit(2))
import { reconcile } from '@tomlarkworthy/reconcile-nanomorph'
messages = listen(
firestore
.collection("messages")
.orderBy("t")
.limitToLast(20)
)
messagesWithURL = promiseRecursive(
messages.map(row => ({
...row,
...(row.path && { url: storage.ref(row.path).getDownloadURL() })
}))
)
// Thanks you trincot!
// https://stackoverflow.com/a/44072329/862295
// A wonderful peice of code contralises all promises in a nexted object to the root.
function promiseRecursive(obj) {
const getPromises = obj =>
Object.keys(obj).reduce(
(acc, key) =>
Object(obj[key]) !== obj[key]
? acc
: acc.concat(
typeof obj[key].then === "function"
? [[obj, key]]
: getPromises(obj[key])
),
[]
);
const all = getPromises(obj);
return Promise.all(all.map(([obj, key]) => obj[key])).then(
responses => (
all.forEach(([obj, key], i) => (obj[key] = responses[i])), obj
)
);
}
ui = {
return reconcile(
this,
html`<table>
${messagesWithURL.map(row =>
row.url
? html`<tr><td width="100px">${row.by}</td><td><img width="400px" src=${row.url}></img></td></tr>`
: html`<tr><td width="100px">${row.by}</td><td>${row.msg}</td></tr>`
)}
</table>
<input onkeypress=${evt => {
mutable msgEvt = evt;
}}><br>
<input type="file" onchange=${evt => {
mutable fileEvt = evt;
}}>
`
);
}
mutable msgEvt = undefined
msgEvt.key
proccessMessage = {
if (msgEvt.key == "Enter") {
firestore.collection("messages").add({
by: user.uid,
msg: msgEvt.target.value,
t: firebase.firebase_.firestore.FieldValue.serverTimestamp()
});
}
}
msgEvt.target.value
mutable fileEvt = undefined
storage = firebase.storage()
sRef = storage.ref(`/examples/chat/${randomId()}`)
processFiles = {
const file = fileEvt.target.files[0];
const sRef = storage.ref(`/examples/chat/${randomId()}`);
const result = await sRef.put(file);
const path = result.ref.fullPath;
firestore.collection("messages").add({
by: user.uid,
path: path,
t: firebase.firebase_.firestore.FieldValue.serverTimestamp()
});
}
viewof user
user.uid
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.