Omega male. Poor man’s renaissance man.
idea` #### What if we kept track of ideas inline?
I don't know about you, but when I'm working with data, new questions come up as I'm solving old ones. I always have a piece of paper on my desk to write down what I want to do next. It can get a little bit unruley, and I can lose my train of thought. I want a way to bookmark questions, future thoughts, and reminders, right in the documents I'm working with. It's sort of like a meta channel baked right into the doc.
could be neat pattern`
problem`#### Uh oh, I don't know what to do about...
Let's be honest: problems happen. Sometimes it's nice to have a place to bookmark a tricky issue you're diagnosing, or a problem with underlying data.`
problem.closed`#### Thank goodness we also solve problems
Once the issue is resolved, append \`.closed\` to the template literal. That will mark the issue as resolved. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ornare leo. Suspendisse convallis leo at nibh fermentum tincidunt vel sit amet libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque augue quam, convallis nec eros eu, sagittis lacinia nulla. Cras congue magna quis posuere tristique. In at lectus arcu. Curabitur quis sollicitudin augue, vel porta purus. Morbi orci turpis, pharetra a laoreet sed, scelerisque quis dui. Proin viverra rutrum posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent ut est arcu. Suspendisse potenti. Sed dignissim massa eget mauris consequat bibendum.`
conclusion`#### This can be a really nice way to express semantic notes inside a notebook with close proximity to data.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque augue quam, convallis nec eros eu, sagittis lacinia nulla. Cras congue magna quis posuere tristique. In at lectus arcu. Curabitur quis sollicitudin augue, vel porta purus. Morbi orci turpis, pharetra a laoreet sed, scelerisque quis dui. Proin viverra rutrum posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent ut est arcu. Suspendisse potenti. Sed dignissim massa eget mauris consequat bibendum.`
question`#### Hmm, I wonder what would happen if we looked at it sideways
Sometimes you have half finished thoughts that need to find a home. It can be very powerful to colocate your questions with your analysis. It's like writing in the margin of a piece of paper!`
openThoughts()
openThoughts("conclusion")
idea = makeApi("idea", {
symbol: "💡",
border: 'rgba(251, 243, 219, 0.5)',
background: 'rgba(251, 243, 219, 0.44)',
fade: 'rgba(251, 243, 219, 1)'
})
question`## [Meta] Should ${html`<code>makeApi()</code>`} take raw style definitions or a javascript object?
The former would easily allow for adding arbitrary styles as required for a given note type, but the styles then have to be passed in as a big string which can't be manipulated; the latter is currently used, but how easily can it be expanded to handle arbitrary styles? (And should it be?)
`
problem`## [Meta] inline code does not work well
Currently,
1. it is awkward to include, and
2. ~~it does~~ code blocks do not inherit the other text's smaller font size (which is ~~inherited from button, presumably~~ now included in the base styles)
For example, here is some ${html`<code>inline_code()</code>`}, and here is some
~~~js
function more_code(){
// in a block
}~~~`
makeApi = (className, classStyles) => {
const defaultContext = { state: "open" };
styles_singleton.addThoughtClass(className, classStyles)
function fn(strings, ...expressions) {
const context = this || defaultContext;
return html`<div class="${styles_singleton.base_classes['thought-wrapper']}">
<button class="${className} ${styles_singleton.base_classes['thought']} ${context.state}">
<span>${md(strings, ...expressions)}</span>
</button>
</div>`;
}
fn.closed = fn.bind({ state: "closed" });
return fn;
}
question = makeApi("question", {
symbol: "🤔",
border: 'rgba(221, 237, 234, 0.5)',
background: 'rgba(221, 237, 234, 0.3)',
fade: 'rgba(221, 237, 234, 1)'
})
problem = makeApi("problem", {
symbol: "🚨",
border: 'rgba(251, 228, 228, 0.5)',
background: 'rgba(251, 228, 228, 0.3)',
fade: 'rgba(251, 228, 228, 1)'
})
conclusion = makeApi("conclusion", {
symbol: "✅",
border: 'transparent',
background: 'rgba(233, 229, 227, 0.3)',
fade: 'rgba(233, 229, 227, 1)',
})
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.
