12 ms·

Observable’s Not JavaScript

283 points by escot 7y ago

kreetx 7y ago
The title is a bit click-baity since I don't think anyone would think Observable would run javascript as if it were in editable <script> tags in a html document. But this is what most of the points try to explain: that there is a framework around the js it runs (so errors don't leak to other blocks (cells)), some types of imports are not supported since they are not needed, etc. Not saying Observable isn't great, just pointing out that it is javascript - other languages have playgrounds as well.
- mattigames 7y ago
  JavaScript is the runtime executing it yes... but if you write C code and transpile it using Wasm you are confusing people if you say that what you wrote initially is not C code; so for the sake of comprehension (what language was created for) it is indeed "not JavaScript" but a new word we can agree to use to make it clear what plataform we are talking about: Observable.
jacobolus 7y ago
Observable is great, and I hope more people learn about it and try it out, but I am afraid that outside of the audience of people who already have worked with it a bit, both the title and content of this particular notebook are going to be a bit misleading and out of context. The intended audience isn’t really people new to the platform. One of the most important things about Observable is that it is mostly just javascript.
- jdlshore 7y ago
  This is the first I've heard of Observable and I loved this. It was a great introduction for me--practical and immediately obvious.
  - jacobolus 7y ago
    Here are a small handful of my favorite notebooks, chosen for variety of style/theme/author, and in no particular order: https://observablehq.com/@freedmand/sounds https://observablehq.com/@freedmand/sounds https://observablehq.com/@freedmand/sounds-2 https://observablehq.com/@freedmand/sounds-2 https://observablehq.com/@benmaier/a-visually-more-appealing-fisheye-function https://observablehq.com/@benmaier/a-visually-more-appealing... https://observablehq.com/@veltman/centerline-labeling https://observablehq.com/@veltman/centerline-labeling https://observablehq.com/@pstuffa/making-maps-with-nyc-open-data https://observablehq.com/@pstuffa/making-maps-with-nyc-open-... https://observablehq.com/@mootari/getting-artsy-with-lloyd https://observablehq.com/@mootari/getting-artsy-with-lloyd https://observablehq.com/@visnup/cheat https://observablehq.com/@visnup/cheat https://observablehq.com/@bps10/sensations-from-single-cones https://observablehq.com/@bps10/sensations-from-single-cones https://observablehq.com/@gre/introduction-to-functional-rendering-paradigm https://observablehq.com/@gre/introduction-to-functional-ren... https://observablehq.com/@redblobgames/delaunator https://observablehq.com/@redblobgames/delaunator https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexgrid https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexg... https://observablehq.com/@lemonnish/rotating-geometry https://observablehq.com/@lemonnish/rotating-geometry https://observablehq.com/@stwind/how-raymarching-works https://observablehq.com/@stwind/how-raymarching-works https://observablehq.com/@fil/modified-stereographic-projections https://observablehq.com/@fil/modified-stereographic-project... https://observablehq.com/@mbostock/tissots-indicatrices-on-a-spherical-fibonacci-lattice https://observablehq.com/@mbostock/tissots-indicatrices-on-a... https://observablehq.com/@mbostock/manipulating-flat-arrays https://observablehq.com/@mbostock/manipulating-flat-arrays
    - fnord77 7y ago
      On the iphone, safari tries to open these links in mail. Unescaped @ symbols are invalid for URL paths. What does it say about a company who can't even get URLs right?
      - charrondev 7y ago
        They open fine on my iPhone for what it’s worth. iOS 12.
- breck 7y ago
  I loved the title. Because indeed, I personally thought that Observable was mostly just Javascript. But now I understand it a lot more and more importantly have an idea now of where they are going with it. I love JupyterLab, but I think long-term it is boxed in by its design of being Python/R in the browser. Observable is breaking from Javascript more than I thought, which will allow it to do really cool things and hit an audience that doesn't necessarily care that it's not quite Javascript.
  - jadbox 7y ago
    I kinda want Observable to be it's own language that can compile to JS... not saying it would be a good general purpose lang by any means, but it would be interesting to experiment with a 'first-class observable' language.
    - breck 7y ago
      I agree. I also would bet this is where they will go.
    - jashkenas 7y ago
      And it kinda is. We provide a parser¹ and a runtime², and you can download a copy of any notebook compiled to a JavaScript module: https://observablehq.com/@observablehq/downloading-and-embedding-notebooks https://observablehq.com/@observablehq/downloading-and-embed... That said, we’re explicitly designing for the reactivity of the notebook environment. Working on fundamentally reactive code in a traditional text editor is ... alright, I guess. You’re still stuck reloading the whole enchilada any time you make a change. It’s nowhere near as exciting as working on reactive code in an editor that understands and respects the reactivity, and can keep your program running and re-evaluating as you tweak it! That said, if you're interested something less notebook-y, check out what Rich Harris is doing with Svelte 3. It's totally a not-so-distant cousin. 1. https://github.com/observablehq/parser https://github.com/observablehq/parser 2. https://github.com/observablehq/runtime https://github.com/observablehq/runtime
      - jadbox 7y ago
- deleted 7y ago
  [deleted]
colemannugent 7y ago
I really wish tools like this or Jupyter Notebooks were around when I first started studying CS in school. Mixing notes and code is such an interesting use-case.
- WaxProlix 7y ago
  I see it as sort of an extension of Knuth's 'literate programming' concept [1], which has existed in some form or another in many languages. Haskell has .lhs ('literate haskell') files where comments are the default and to have the compiler actually pay attention to a line you need to specifically preface it. Nice in the modern age to have the addition of graphs, charts, etc, without having to resort to TeX or ps or something. 1 https://en.wikipedia.org/wiki/Literate_programming https://en.wikipedia.org/wiki/Literate_programming
- jacobolus 7y ago
  Knuth has been doing literate programming for 35+ years https://en.wikipedia.org/wiki/Literate_programming https://en.wikipedia.org/wiki/Literate_programming I have really enjoyed Observable as a literate programming platform though. Being able to mix text, diagrams, data tables, multimedia output, interactive inputs, easily modified subroutine implementations, imports of external data and subroutine libraries, ... makes for a very expressive and reader-friendly (albeit with a bit of reading learning curve) platform for writing interactive documents and for doing research. For example, here’s a recent relatively literate-programming style notebook of mine (this one was mostly done in an afternoon for fun as a way of procrastinating from other work, not as a research project), https://observablehq.com/@jrus/munsell-spin https://observablehq.com/@jrus/munsell-spin It’s very low-friction to set up a new notebook and just start writing, or to open an existing draft notebook and work on it. I have found this to be extremely helpful in the past year or two trying to work during my 2-year-old’s nap time. Pen and paper and Observable notebooks are the two most important tools of my recent research efforts.
  - colemannugent 7y ago
    >Knuth has been doing literate programming for 35 years I shouldn't be surprised, that man had a lot going on. Just TeX and Big-O notation alone would be enough to permanently enshrine him in the CS heap of fame, but the hits don't stop there! Kinda funny how much just one guy could affect research.
whymsicalburito 7y ago
This product is very confusing. What is a "magic notebook" and why do I need one? I wish companies like these would just explain their product in simple language like a normal person.
- jacobolus 7y ago
  You might enjoy one of these as a starting place: https://observablehq.com/@observablehq/five-minute-introduction https://observablehq.com/@observablehq/five-minute-introduct... https://observablehq.com/@observablehq/introduction-to-notebooks https://observablehq.com/@observablehq/introduction-to-noteb... https://observablehq.com/@observablehq/why-observable https://observablehq.com/@observablehq/why-observable
  - whymsicalburito 7y ago
    Thanks, those are good articles :) This is what should be on the homepage!
amirathi 7y ago
Just checked out live commenting feature on Observable [1], the ability to send code suggestions and preview + merge suggestion with 1-click looks amazing. I built a tool [2] for Jupyter notebook code reviews which has commenting feature for GitHub pull requests (regular text comments). It would be great to have actual code edits/suggestions as review comments. [1] https://observablehq.com/@observablehq/suggestions-and-comments https://observablehq.com/@observablehq/suggestions-and-comme... [2] https://www.reviewnb.com/ https://www.reviewnb.com/
lwb 7y ago
Am I right in thinking that this is mostly interesting for statistics-adjacent fields? I imagine someone using this mostly to embed charts and graphs alongside code a la Jupyter Notebooks. What would be fascinating to me is if these tools made it significantly easier to make "Explorable Explanations" (nicky case, bret victor). I love the Raft visualization (https://raft.github.io/ https://raft.github.io/) and would be ecstatic to see more stuff like that surfacing around, making it easier to grok sophisticated distributed systems. Next logical step would be to actually control said systems from the visualization itself.
- jacobolus 7y ago
  (a) This tool does make it significantly easier to make explorable explanations, and in particular facilitates sharing / re-using code and ideas. (b) This tool is useful in a wide variety of fields that are not statistics- or data-visualization-adjacent. Personally I find it to be the best (most reader friendly) available platform for most types of code documentation and learning materials, as long as the code involved happens to be Javascript. I would also love to see more research papers published as notebooks.
- catacombs 7y ago
  > Am I right in thinking that this is mostly interesting for statistics-adjacent fields? Eh. Not entirely right. Many journalists, specifically those who work with data analysis and visualization, use Observable notebooks in their reporting. Other groups also use the notebooks for documentation purposes.
- mathisonian 7y ago
  You might be interested in Idyll [1], a project that I started as part of my research at UW. One of the explicit goals is to make it easier to create explorable explanations. [1] - https://idyll-lang.org/ https://idyll-lang.org/
- jashkenas 7y ago
  In that case, you may be interested in checking out some of the fancy explorable explanations folks have been publishing: https://observablehq.com/collection/@observablehq/explorables https://observablehq.com/collection/@observablehq/explorable... Here’s a sequence of sound wave primers by Dylan Freedman: https://observablehq.com/@freedmand/sounds https://observablehq.com/@freedmand/sounds Mike wrote an exploration of the Lotka-Volterra equations for simulating the dynamics of populations of predators and prey: https://observablehq.com/@mbostock/predator-and-prey https://observablehq.com/@mbostock/predator-and-prey Or something physical, like Jacob Rus figuring out how a chunk of metal from a machinist’s workshop can scribe out a perfect sine curve: https://observablehq.com/@jrus/sinebar https://observablehq.com/@jrus/sinebar Or something fun, with Krist Wongsuphasawat’s tapioca pearl to tea level Boba Calculator: https://observablehq.com/@kristw/boba-science https://observablehq.com/@kristw/boba-science Or my personal favorite (although I can't view it in Chrome), Toph Tucker’s poignant reverie on correlation, eugenics, and the morality of applying statistics to human affairs: https://observablehq.com/@tophtucker/inferring-chart-type-from-autocorrelation-and-other-evils https://observablehq.com/@tophtucker/inferring-chart-type-fr...
catacombs 7y ago
While this is great, I'm still waiting for Observable to include a Vim-like editing environment in the cells. Working in Emacs and Vim all day, I can't tell you how immensely annoying it is to switch between mouse and keyboard when editing code blocks.
- mbostock 7y ago
  We did just launch a big improvement to keyboard controls this week that mirrors vim’s “Normal Mode”: https://observablehq.com/@observablehq/cell-shortcuts https://observablehq.com/@observablehq/cell-shortcuts
  - catacombs 7y ago
    I saw that. What I'm talking about is editing code with Vim-like keys INSIDE the cells. An implementation of the Ace Editor[1] or something similar would be amazing. [1] https://ace.c9.io/ https://ace.c9.io/
    - mbostock 7y ago
      Got it. We use CodeMirror and are considering the vim bindings, but it’d probably be something we launch at the same time as user-configurable key bindings. https://codemirror.net/demo/vim.html https://codemirror.net/demo/vim.html
      - catacombs 7y ago
        I'm happy to hear there is some consideration. I'll be the first, as a user, to say YES to this implementation. That'll encourage me to use Observable more.
XCSme 7y ago
Click-bait title, it's not what you think, not about RxJS Observable, but some company/product.
stared 7y ago
As much I try to like this project, still, something feels clunky. I am an avid user of Jupyter Notebooks for prototyping and code sharing in data science / deep learning. Fir JavaScript (and D3.js in particular), still - I don't have a default go-to solutig. Gist -> blocks? GitHub and and a standalone page? JSFiddle or CodePen? Observable? (I would love to be convinced to one or the other approach.) My main concerns with observable are: 1. Unlike Jupyter notebook, the code is non-linear. Very often it refers to some pieces. 2. It takes some clicking to reveal the code. (Also, maybe a Jupyter habits, but I am used to results below code.) 3. I am still not sure what is the full syntax besides JavaScript and Markdown. 4. I am not sure if it is easy (or possible) to backup / self-host the code. (Pretty much a requirement to make sure a project won't disappear in a few years.) BTW: Once I gave Obserbavle a try, https://observablehq.com/@stared/tree-of-reddit-sex-life https://observablehq.com/@stared/tree-of-reddit-sex-life (and it got really popular here: https://news.ycombinator.com/item?id=19640562 https://news.ycombinator.com/item?id=19640562).
- tolmasky 7y ago
  Have you had a chance to try our project, https://runkit.com https://runkit.com? The two projects intersect a bit, but given your specific concerns it may be more along the lines of what you're looking for: 1. Specifically, we have gone through great pain-staking measures to make it just JavaScript and linear (while avoiding some of the pitfalls of Jupiter notebooks, like "losing state in cells"). You can read more about this specific issue here: https://blog.runkit.com/2015/09/10/time-traveling-in-node-js-notebooks/ https://blog.runkit.com/2015/09/10/time-traveling-in-node-js... 2. We are also huge believers in being able to own your code -- as such, every notebook has a download button that downloads a package with the entire dependency tree in a lock file so you can get exactly equivalent behavior. Again, this is only possible since we've started with the premise that RunKit notebooks just are Node modules. 3. Since it is just Node, every single module just works, including binary ones. In fact, every package on npm is built in -- no install, just require it.
- shezi 7y ago
  I haven't tried it myself, but there is a Javascript kernel for jupyter[1]. In fact, there is a huge number of kernels for jupyter now[2]. [1] https://github.com/n-riesco/ijavascript https://github.com/n-riesco/ijavascript [2] https://github.com/jupyter/jupyter/wiki/Jupyter-kernels https://github.com/jupyter/jupyter/wiki/Jupyter-kernels
akhilcacharya 7y ago
This is insanely cool - I didn't know an implicit DAG notebook was on the market already.
- VectorLock 7y ago
  Is it acyclic? Can you make cycles of cell changes?
  - akhilcacharya 7y ago
    I would hope it is...
  - mbostock 7y ago
    By default it is acyclic: any circular definitions will thrown an error. (I added an example to the notebook.) But you can opt-in to circular relationships using mutables or side-effects.
SquareWheel 7y ago
This blog is very frustrating to read. When I try and select text to mark my place, it starts editing markdown instead.
- jacobolus 7y ago
  Can you elaborate? If you click (without dragging) in the left margin next to a cell output, it will show the source for that cell. If you just drag over some text, it should select just fine.
- xeromal 7y ago
  Trello is the same way. I hate it.
- AgentME 7y ago
  I notice whenever I highlight a paragraph, clicking the paragraph again doesn't de-select it, unlike every other program and webpage. I have to click outside of the paragraph to unhighlight it. As a compulsive highlighter who often double-clicks and then clicks paragraphs to highlight them and then unhighlight them, this is so bothering to me. (Also, if I click on a code snippet, a highlight appears to the left of it, and then gets left behind and doesn't reset when I click outside of the code snippet!) It feels like I've picked up an object and it was sticky and got residue left behind on my hands each time I interact with it. Sure, I could just stop repeatedly touching the object so much, but I fidget with what I'm holding. An object that's not fidgetable like every other of its kind is unnecessarily hostile. I'm baffled that a webpage went through extra work to make highlighting act differently and infuriatingly. Highly related xkcd: https://xkcd.com/1271/ https://xkcd.com/1271/, and highly related alt-text: "And if clicking on any word pops up a site-search for articles about that word, I will close all windows in a panic and never come back."
  - trnglina 7y ago
    Interestingly enough, from my quick tests, the highlighting behaviour works as normal in Firefox, but not in Chrome.
anderspitman 7y ago
I somehow didn't realize the article itself was a notebook until I got to the bottom. I can't decide whether that's a good thing or a bad thing, and whether it says more about me or observable. The whole thing is way impressive though.
- kragen 7y ago
  I figured out it was a notebook when it just showed a blank page in the first two browsers I tried to read it in.
mattlondon 7y ago
I thought they were talking about Observables as in the Reactive Observables (1) from RxJS (2) et al. Unfortunate naming! No doubt SEO will be super difficult for them considering how much "javascript" && "observable" keyword stuff there is out there already. 1 - https://en.wikipedia.org/wiki/Reactive_programming https://en.wikipedia.org/wiki/Reactive_programming 2 - https://rxjs.dev/guide/observable https://rxjs.dev/guide/observable
- theoh 7y ago
  I don't know the Observable folks personally, but I've been watching what they post on Twitter. It's not snobbery to say that the level of polish and sophistication present in what they put out (in terms of the reactive architecture and the graphic side of it) is second to none. Their product has got so much class that the idea that they would spend time on SEO is kind of incongruous, right?
  - asutekku 7y ago
    The polish of the product sadly doesn’t matter if no one knows about it. SEO is the necessary evil.
- jashkenas 7y ago
  Your comment made me curious about our current SEO rankings, so I used a VPN and fresh incognito windows in a browser I never use (Safari) to Google for "observable" from Silicon Valley, New York City and Madrid. ObservableHQ.com is in the top spot in Silicon Valley and NYC, and a few spots down the first page in Madrid, after Angular Observables and RXJS Observables. So it looks like we’re doing pretty alright so far.
  - graphememes 7y ago
    That's for users who have never searched for anything regarding observables and clicked links which will tailor their ranking algorithm. Not sure how much optimization for "pure" ranking we should do nowadays.
its_the_future 7y ago
IMHO call it something other Observable? Observables in JavaScript and development are something else, only reason I clicked the headline is due to the confusion, and I'm slighly upset and baseline hostile to the product. This hostility is probably because I suspect the confusing name is intentionally confusing.
- daotoad 7y ago
  No need to assume malice, other human foibles like attribution bias and hubris nicely explain the horrific idea of calling your language/tool/project 'Observable'. I, for one, am irritated by the name and hope they either change it or that the project fades. Things are confusing enough without this kind of nonsense. Yes, I get that each cell in a spreadsheet is observing its neigbors. Yes, it's nice that you can "observe" your code auto updating. Yes it's nice that people are trying to improve upon spreadsheets as a programming model. Don't be purposely obtuse right out of the gate by naming your project after a widely used pattern, tool or technique. Call it Cells or Panopticon or something. Please. In other news, check out my new web framework, called MVC.
  - jacobolus 7y ago
    Is this really that common a term in computer programming? I can’t say I see it used with any regularity. Maybe it’s a common term in some specific programming subcultures? Apparently it’s a deprecated Java class, https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/Observable.html https://docs.oracle.com/en/java/javase/11/docs/api/java.base... and something in RxJS (which I had never heard of before doing a web search just now) https://www.learnrxjs.io/concepts/rxjs-primer.html https://www.learnrxjs.io/concepts/rxjs-primer.html The term “observable” used as a noun in a programming context seems to me very clunky and vague. YMMV. I am much more familiar with the term “observable” in physics. https://en.wikipedia.org/wiki/Observable https://en.wikipedia.org/wiki/Observable
    - Procrastes 7y ago
      The Java class and many other occurrences grew out of the name of the Observer/Observable design pattern[1] in the "Gang of Four" "Design Patterns" book.[2] 1. https://en.wikipedia.org/wiki/Observer_pattern https://en.wikipedia.org/wiki/Observer_pattern 2. https://en.wikipedia.org/wiki/Design_Patterns https://en.wikipedia.org/wiki/Design_Patterns
IggleSniggle 7y ago
I thought this would be referring to the Observable ie Observer/Subscriber pattern as a primitive in JavaScript, of which RxJS (Reactive Extensions) is the best known implementation followed closely by MobX. I like this project quite a bit, but it is unfortunately named. It feels kinda like naming your project "Array map for JavaScript."
- TeMPOraL 7y ago
  Come on, RxJS stole that (and "reactive") terms from prior work, which was arguably more interesting for anyone except web developers. So we can keep passing the blame about who steals SEO from who...
  - IggleSniggle 7y ago
    To be clear, I was only quoting RxJS as the most popular implementation in js for the Observable primitive. This has nothing to do with the Observable primitive. My complaint isn’t that this steals SEO, it’s that this becomes less searchable because any search for “Observable JavaScript” is going to turn up RxJS/MobX or one of the other libraries that implement Observable primitive types. Edit: with regard to ReactiveX...well yeah. But it’s nice that it’s implemented in so many languages! (Not just RxJS) http://reactivex.io/languages.html http://reactivex.io/languages.html
- sethf 7y ago
  My exact reaction - and the reason I clicked through, though I must say I was pleasantly surprised it was this, and not JavaScript Observables. May have to make the switch from Notion https://www.notion.so/ https://www.notion.so/
ran3824692 7y ago
I get blank page without running javascript. Not observable.
- forgotmypw 7y ago
  Ditto.
- gloflo 7y ago
  It is a project about highly interactive content on the web. That does require JavaScript.
aerovistae 7y ago
You know what would be nice, in a scifi universe? Being able to hover over HN links and get a short context for the topic. E.g. "Observable is a <something something> used for <something something>. Since the language used in its <something something> appears similar to JavaScript, they put together a blog post clarifying the differences." It would be great if the HN submissions form had a field you could optionally fill out with such a text. Because if you can't tell from my example above, I have no idea what this is.
artursapek 7y ago
This is off-topic, but Observable's layout code seems to have some kind of rounding issue. The farther I scroll down the page, the more the sections overlap: https://i.imgur.com/zuYh3j4.png https://i.imgur.com/zuYh3j4.png It's a very gradual progression into that. Running Chrome Version 71.0.3578.98 (Official Build) (64-bit) on Ubuntu 18.04.
simonw 7y ago
Observable is SUCH a clever piece of software design. Every time I read more about how it works I learn something new and interesting.
- ww520 7y ago
  JsLive or JsLiveDoc.
emilfihlman 7y ago
The site CSS is broken: https://emil.fi/m/2019-06-15_13-17-36_siU3iwbN.png https://emil.fi/m/2019-06-15_13-17-36_siU3iwbN.png
nicwolff 7y ago
The demo notebook at https://observablehq.com/demo https://observablehq.com/demo works on Safari 11.1.2 but at this link I just see a JSON object starting `{"@context": "http:\/\/schema.org", "@type": "Article",...`.

283 points by escot 7y ago

The title is a bit click-baity since I don't think anyone would think Observable would run javascript as if it were in editable <script> tags in a html document. But this is what most of the points try to explain: that there is a framework around the js it runs (so errors don't leak to other blocks (cells)), some types of imports are not supported since they are not needed, etc. Not saying Observable isn't great, just pointing out that it is javascript - other languages have playgrounds as well.

mattigames 7y ago
JavaScript is the runtime executing it yes... but if you write C code and transpile it using Wasm you are confusing people if you say that what you wrote initially is not C code; so for the sake of comprehension (what language was created for) it is indeed "not JavaScript" but a new word we can agree to use to make it clear what plataform we are talking about: Observable.

jacobolus 7y ago

Observable is great, and I hope more people learn about it and try it out, but I am afraid that outside of the audience of people who already have worked with it a bit, both the title and content of this particular notebook are going to be a bit misleading and out of context. The intended audience isn’t really people new to the platform. One of the most important things about Observable is that it is mostly just javascript.

jdlshore 7y ago
This is the first I've heard of Observable and I loved this. It was a great introduction for me--practical and immediately obvious.
- jacobolus 7y ago
  Here are a small handful of my favorite notebooks, chosen for variety of style/theme/author, and in no particular order: https://observablehq.com/@freedmand/sounds https://observablehq.com/@freedmand/sounds https://observablehq.com/@freedmand/sounds-2 https://observablehq.com/@freedmand/sounds-2 https://observablehq.com/@benmaier/a-visually-more-appealing-fisheye-function https://observablehq.com/@benmaier/a-visually-more-appealing... https://observablehq.com/@veltman/centerline-labeling https://observablehq.com/@veltman/centerline-labeling https://observablehq.com/@pstuffa/making-maps-with-nyc-open-data https://observablehq.com/@pstuffa/making-maps-with-nyc-open-... https://observablehq.com/@mootari/getting-artsy-with-lloyd https://observablehq.com/@mootari/getting-artsy-with-lloyd https://observablehq.com/@visnup/cheat https://observablehq.com/@visnup/cheat https://observablehq.com/@bps10/sensations-from-single-cones https://observablehq.com/@bps10/sensations-from-single-cones https://observablehq.com/@gre/introduction-to-functional-rendering-paradigm https://observablehq.com/@gre/introduction-to-functional-ren... https://observablehq.com/@redblobgames/delaunator https://observablehq.com/@redblobgames/delaunator https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexgrid https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexg... https://observablehq.com/@lemonnish/rotating-geometry https://observablehq.com/@lemonnish/rotating-geometry https://observablehq.com/@stwind/how-raymarching-works https://observablehq.com/@stwind/how-raymarching-works https://observablehq.com/@fil/modified-stereographic-projections https://observablehq.com/@fil/modified-stereographic-project... https://observablehq.com/@mbostock/tissots-indicatrices-on-a-spherical-fibonacci-lattice https://observablehq.com/@mbostock/tissots-indicatrices-on-a... https://observablehq.com/@mbostock/manipulating-flat-arrays https://observablehq.com/@mbostock/manipulating-flat-arrays
  - fnord77 7y ago
    On the iphone, safari tries to open these links in mail. Unescaped @ symbols are invalid for URL paths. What does it say about a company who can't even get URLs right?
    - charrondev 7y ago
      They open fine on my iPhone for what it’s worth. iOS 12.
breck 7y ago
I loved the title. Because indeed, I personally thought that Observable was mostly just Javascript. But now I understand it a lot more and more importantly have an idea now of where they are going with it. I love JupyterLab, but I think long-term it is boxed in by its design of being Python/R in the browser. Observable is breaking from Javascript more than I thought, which will allow it to do really cool things and hit an audience that doesn't necessarily care that it's not quite Javascript.
- jadbox 7y ago
  I kinda want Observable to be it's own language that can compile to JS... not saying it would be a good general purpose lang by any means, but it would be interesting to experiment with a 'first-class observable' language.
  - breck 7y ago
    I agree. I also would bet this is where they will go.
  - jashkenas 7y ago
    And it kinda is. We provide a parser¹ and a runtime², and you can download a copy of any notebook compiled to a JavaScript module: https://observablehq.com/@observablehq/downloading-and-embedding-notebooks https://observablehq.com/@observablehq/downloading-and-embed... That said, we’re explicitly designing for the reactivity of the notebook environment. Working on fundamentally reactive code in a traditional text editor is ... alright, I guess. You’re still stuck reloading the whole enchilada any time you make a change. It’s nowhere near as exciting as working on reactive code in an editor that understands and respects the reactivity, and can keep your program running and re-evaluating as you tweak it! That said, if you're interested something less notebook-y, check out what Rich Harris is doing with Svelte 3. It's totally a not-so-distant cousin. 1. https://github.com/observablehq/parser https://github.com/observablehq/parser 2. https://github.com/observablehq/runtime https://github.com/observablehq/runtime
    - jadbox 7y ago
deleted 7y ago
[deleted]

colemannugent 7y ago

I really wish tools like this or Jupyter Notebooks were around when I first started studying CS in school. Mixing notes and code is such an interesting use-case.

WaxProlix 7y ago
I see it as sort of an extension of Knuth's 'literate programming' concept [1], which has existed in some form or another in many languages. Haskell has .lhs ('literate haskell') files where comments are the default and to have the compiler actually pay attention to a line you need to specifically preface it. Nice in the modern age to have the addition of graphs, charts, etc, without having to resort to TeX or ps or something. 1 https://en.wikipedia.org/wiki/Literate_programming https://en.wikipedia.org/wiki/Literate_programming
jacobolus 7y ago
Knuth has been doing literate programming for 35+ years https://en.wikipedia.org/wiki/Literate_programming https://en.wikipedia.org/wiki/Literate_programming I have really enjoyed Observable as a literate programming platform though. Being able to mix text, diagrams, data tables, multimedia output, interactive inputs, easily modified subroutine implementations, imports of external data and subroutine libraries, ... makes for a very expressive and reader-friendly (albeit with a bit of reading learning curve) platform for writing interactive documents and for doing research. For example, here’s a recent relatively literate-programming style notebook of mine (this one was mostly done in an afternoon for fun as a way of procrastinating from other work, not as a research project), https://observablehq.com/@jrus/munsell-spin https://observablehq.com/@jrus/munsell-spin It’s very low-friction to set up a new notebook and just start writing, or to open an existing draft notebook and work on it. I have found this to be extremely helpful in the past year or two trying to work during my 2-year-old’s nap time. Pen and paper and Observable notebooks are the two most important tools of my recent research efforts.
- colemannugent 7y ago
  >Knuth has been doing literate programming for 35 years I shouldn't be surprised, that man had a lot going on. Just TeX and Big-O notation alone would be enough to permanently enshrine him in the CS heap of fame, but the hits don't stop there! Kinda funny how much just one guy could affect research.

whymsicalburito 7y ago

This product is very confusing. What is a "magic notebook" and why do I need one? I wish companies like these would just explain their product in simple language like a normal person.

jacobolus 7y ago
You might enjoy one of these as a starting place: https://observablehq.com/@observablehq/five-minute-introduction https://observablehq.com/@observablehq/five-minute-introduct... https://observablehq.com/@observablehq/introduction-to-notebooks https://observablehq.com/@observablehq/introduction-to-noteb... https://observablehq.com/@observablehq/why-observable https://observablehq.com/@observablehq/why-observable
- whymsicalburito 7y ago
  Thanks, those are good articles :) This is what should be on the homepage!

amirathi 7y ago

Just checked out live commenting feature on Observable [1], the ability to send code suggestions and preview + merge suggestion with 1-click looks amazing. I built a tool [2] for Jupyter notebook code reviews which has commenting feature for GitHub pull requests (regular text comments). It would be great to have actual code edits/suggestions as review comments. [1] https://observablehq.com/@observablehq/suggestions-and-comments https://observablehq.com/@observablehq/suggestions-and-comme... [2] https://www.reviewnb.com/ https://www.reviewnb.com/

lwb 7y ago

Am I right in thinking that this is mostly interesting for statistics-adjacent fields? I imagine someone using this mostly to embed charts and graphs alongside code a la Jupyter Notebooks. What would be fascinating to me is if these tools made it significantly easier to make "Explorable Explanations" (nicky case, bret victor). I love the Raft visualization (https://raft.github.io/ https://raft.github.io/) and would be ecstatic to see more stuff like that surfacing around, making it easier to grok sophisticated distributed systems. Next logical step would be to actually control said systems from the visualization itself.

jacobolus 7y ago
(a) This tool does make it significantly easier to make explorable explanations, and in particular facilitates sharing / re-using code and ideas. (b) This tool is useful in a wide variety of fields that are not statistics- or data-visualization-adjacent. Personally I find it to be the best (most reader friendly) available platform for most types of code documentation and learning materials, as long as the code involved happens to be Javascript. I would also love to see more research papers published as notebooks.
catacombs 7y ago
> Am I right in thinking that this is mostly interesting for statistics-adjacent fields? Eh. Not entirely right. Many journalists, specifically those who work with data analysis and visualization, use Observable notebooks in their reporting. Other groups also use the notebooks for documentation purposes.
mathisonian 7y ago
You might be interested in Idyll [1], a project that I started as part of my research at UW. One of the explicit goals is to make it easier to create explorable explanations. [1] - https://idyll-lang.org/ https://idyll-lang.org/
jashkenas 7y ago
In that case, you may be interested in checking out some of the fancy explorable explanations folks have been publishing: https://observablehq.com/collection/@observablehq/explorables https://observablehq.com/collection/@observablehq/explorable... Here’s a sequence of sound wave primers by Dylan Freedman: https://observablehq.com/@freedmand/sounds https://observablehq.com/@freedmand/sounds Mike wrote an exploration of the Lotka-Volterra equations for simulating the dynamics of populations of predators and prey: https://observablehq.com/@mbostock/predator-and-prey https://observablehq.com/@mbostock/predator-and-prey Or something physical, like Jacob Rus figuring out how a chunk of metal from a machinist’s workshop can scribe out a perfect sine curve: https://observablehq.com/@jrus/sinebar https://observablehq.com/@jrus/sinebar Or something fun, with Krist Wongsuphasawat’s tapioca pearl to tea level Boba Calculator: https://observablehq.com/@kristw/boba-science https://observablehq.com/@kristw/boba-science Or my personal favorite (although I can't view it in Chrome), Toph Tucker’s poignant reverie on correlation, eugenics, and the morality of applying statistics to human affairs: https://observablehq.com/@tophtucker/inferring-chart-type-from-autocorrelation-and-other-evils https://observablehq.com/@tophtucker/inferring-chart-type-fr...

catacombs 7y ago

While this is great, I'm still waiting for Observable to include a Vim-like editing environment in the cells. Working in Emacs and Vim all day, I can't tell you how immensely annoying it is to switch between mouse and keyboard when editing code blocks.

mbostock 7y ago
We did just launch a big improvement to keyboard controls this week that mirrors vim’s “Normal Mode”: https://observablehq.com/@observablehq/cell-shortcuts https://observablehq.com/@observablehq/cell-shortcuts
- catacombs 7y ago
  I saw that. What I'm talking about is editing code with Vim-like keys INSIDE the cells. An implementation of the Ace Editor[1] or something similar would be amazing. [1] https://ace.c9.io/ https://ace.c9.io/
  - mbostock 7y ago
    Got it. We use CodeMirror and are considering the vim bindings, but it’d probably be something we launch at the same time as user-configurable key bindings. https://codemirror.net/demo/vim.html https://codemirror.net/demo/vim.html
    - catacombs 7y ago
      I'm happy to hear there is some consideration. I'll be the first, as a user, to say YES to this implementation. That'll encourage me to use Observable more.

XCSme 7y ago

Click-bait title, it's not what you think, not about RxJS Observable, but some company/product.

stared 7y ago

As much I try to like this project, still, something feels clunky. I am an avid user of Jupyter Notebooks for prototyping and code sharing in data science / deep learning. Fir JavaScript (and D3.js in particular), still - I don't have a default go-to solutig. Gist -> blocks? GitHub and and a standalone page? JSFiddle or CodePen? Observable? (I would love to be convinced to one or the other approach.) My main concerns with observable are: 1. Unlike Jupyter notebook, the code is non-linear. Very often it refers to some pieces. 2. It takes some clicking to reveal the code. (Also, maybe a Jupyter habits, but I am used to results below code.) 3. I am still not sure what is the full syntax besides JavaScript and Markdown. 4. I am not sure if it is easy (or possible) to backup / self-host the code. (Pretty much a requirement to make sure a project won't disappear in a few years.) BTW: Once I gave Obserbavle a try, https://observablehq.com/@stared/tree-of-reddit-sex-life https://observablehq.com/@stared/tree-of-reddit-sex-life (and it got really popular here: https://news.ycombinator.com/item?id=19640562 https://news.ycombinator.com/item?id=19640562).

tolmasky 7y ago
Have you had a chance to try our project, https://runkit.com https://runkit.com? The two projects intersect a bit, but given your specific concerns it may be more along the lines of what you're looking for: 1. Specifically, we have gone through great pain-staking measures to make it just JavaScript and linear (while avoiding some of the pitfalls of Jupiter notebooks, like "losing state in cells"). You can read more about this specific issue here: https://blog.runkit.com/2015/09/10/time-traveling-in-node-js-notebooks/ https://blog.runkit.com/2015/09/10/time-traveling-in-node-js... 2. We are also huge believers in being able to own your code -- as such, every notebook has a download button that downloads a package with the entire dependency tree in a lock file so you can get exactly equivalent behavior. Again, this is only possible since we've started with the premise that RunKit notebooks just are Node modules. 3. Since it is just Node, every single module just works, including binary ones. In fact, every package on npm is built in -- no install, just require it.
shezi 7y ago
I haven't tried it myself, but there is a Javascript kernel for jupyter[1]. In fact, there is a huge number of kernels for jupyter now[2]. [1] https://github.com/n-riesco/ijavascript https://github.com/n-riesco/ijavascript [2] https://github.com/jupyter/jupyter/wiki/Jupyter-kernels https://github.com/jupyter/jupyter/wiki/Jupyter-kernels

akhilcacharya 7y ago

This is insanely cool - I didn't know an implicit DAG notebook was on the market already.

VectorLock 7y ago
Is it acyclic? Can you make cycles of cell changes?
- akhilcacharya 7y ago
  I would hope it is...
- mbostock 7y ago
  By default it is acyclic: any circular definitions will thrown an error. (I added an example to the notebook.) But you can opt-in to circular relationships using mutables or side-effects.

SquareWheel 7y ago

This blog is very frustrating to read. When I try and select text to mark my place, it starts editing markdown instead.

jacobolus 7y ago
Can you elaborate? If you click (without dragging) in the left margin next to a cell output, it will show the source for that cell. If you just drag over some text, it should select just fine.
xeromal 7y ago
Trello is the same way. I hate it.
AgentME 7y ago
I notice whenever I highlight a paragraph, clicking the paragraph again doesn't de-select it, unlike every other program and webpage. I have to click outside of the paragraph to unhighlight it. As a compulsive highlighter who often double-clicks and then clicks paragraphs to highlight them and then unhighlight them, this is so bothering to me. (Also, if I click on a code snippet, a highlight appears to the left of it, and then gets left behind and doesn't reset when I click outside of the code snippet!) It feels like I've picked up an object and it was sticky and got residue left behind on my hands each time I interact with it. Sure, I could just stop repeatedly touching the object so much, but I fidget with what I'm holding. An object that's not fidgetable like every other of its kind is unnecessarily hostile. I'm baffled that a webpage went through extra work to make highlighting act differently and infuriatingly. Highly related xkcd: https://xkcd.com/1271/ https://xkcd.com/1271/, and highly related alt-text: "And if clicking on any word pops up a site-search for articles about that word, I will close all windows in a panic and never come back."
- trnglina 7y ago
  Interestingly enough, from my quick tests, the highlighting behaviour works as normal in Firefox, but not in Chrome.

anderspitman 7y ago

I somehow didn't realize the article itself was a notebook until I got to the bottom. I can't decide whether that's a good thing or a bad thing, and whether it says more about me or observable. The whole thing is way impressive though.

kragen 7y ago
I figured out it was a notebook when it just showed a blank page in the first two browsers I tried to read it in.

mattlondon 7y ago

I thought they were talking about Observables as in the Reactive Observables (1) from RxJS (2) et al. Unfortunate naming! No doubt SEO will be super difficult for them considering how much "javascript" && "observable" keyword stuff there is out there already. 1 - https://en.wikipedia.org/wiki/Reactive_programming https://en.wikipedia.org/wiki/Reactive_programming 2 - https://rxjs.dev/guide/observable https://rxjs.dev/guide/observable

theoh 7y ago
I don't know the Observable folks personally, but I've been watching what they post on Twitter. It's not snobbery to say that the level of polish and sophistication present in what they put out (in terms of the reactive architecture and the graphic side of it) is second to none. Their product has got so much class that the idea that they would spend time on SEO is kind of incongruous, right?
- asutekku 7y ago
  The polish of the product sadly doesn’t matter if no one knows about it. SEO is the necessary evil.
jashkenas 7y ago
Your comment made me curious about our current SEO rankings, so I used a VPN and fresh incognito windows in a browser I never use (Safari) to Google for "observable" from Silicon Valley, New York City and Madrid. ObservableHQ.com is in the top spot in Silicon Valley and NYC, and a few spots down the first page in Madrid, after Angular Observables and RXJS Observables. So it looks like we’re doing pretty alright so far.
- graphememes 7y ago
  That's for users who have never searched for anything regarding observables and clicked links which will tailor their ranking algorithm. Not sure how much optimization for "pure" ranking we should do nowadays.

its_the_future 7y ago

IMHO call it something other Observable? Observables in JavaScript and development are something else, only reason I clicked the headline is due to the confusion, and I'm slighly upset and baseline hostile to the product. This hostility is probably because I suspect the confusing name is intentionally confusing.

daotoad 7y ago
No need to assume malice, other human foibles like attribution bias and hubris nicely explain the horrific idea of calling your language/tool/project 'Observable'. I, for one, am irritated by the name and hope they either change it or that the project fades. Things are confusing enough without this kind of nonsense. Yes, I get that each cell in a spreadsheet is observing its neigbors. Yes, it's nice that you can "observe" your code auto updating. Yes it's nice that people are trying to improve upon spreadsheets as a programming model. Don't be purposely obtuse right out of the gate by naming your project after a widely used pattern, tool or technique. Call it Cells or Panopticon or something. Please. In other news, check out my new web framework, called MVC.
- jacobolus 7y ago
  Is this really that common a term in computer programming? I can’t say I see it used with any regularity. Maybe it’s a common term in some specific programming subcultures? Apparently it’s a deprecated Java class, https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/Observable.html https://docs.oracle.com/en/java/javase/11/docs/api/java.base... and something in RxJS (which I had never heard of before doing a web search just now) https://www.learnrxjs.io/concepts/rxjs-primer.html https://www.learnrxjs.io/concepts/rxjs-primer.html The term “observable” used as a noun in a programming context seems to me very clunky and vague. YMMV. I am much more familiar with the term “observable” in physics. https://en.wikipedia.org/wiki/Observable https://en.wikipedia.org/wiki/Observable
  - Procrastes 7y ago
    The Java class and many other occurrences grew out of the name of the Observer/Observable design pattern[1] in the "Gang of Four" "Design Patterns" book.[2] 1. https://en.wikipedia.org/wiki/Observer_pattern https://en.wikipedia.org/wiki/Observer_pattern 2. https://en.wikipedia.org/wiki/Design_Patterns https://en.wikipedia.org/wiki/Design_Patterns

IggleSniggle 7y ago

I thought this would be referring to the Observable ie Observer/Subscriber pattern as a primitive in JavaScript, of which RxJS (Reactive Extensions) is the best known implementation followed closely by MobX. I like this project quite a bit, but it is unfortunately named. It feels kinda like naming your project "Array map for JavaScript."

TeMPOraL 7y ago
Come on, RxJS stole that (and "reactive") terms from prior work, which was arguably more interesting for anyone except web developers. So we can keep passing the blame about who steals SEO from who...
- IggleSniggle 7y ago
  To be clear, I was only quoting RxJS as the most popular implementation in js for the Observable primitive. This has nothing to do with the Observable primitive. My complaint isn’t that this steals SEO, it’s that this becomes less searchable because any search for “Observable JavaScript” is going to turn up RxJS/MobX or one of the other libraries that implement Observable primitive types. Edit: with regard to ReactiveX...well yeah. But it’s nice that it’s implemented in so many languages! (Not just RxJS) http://reactivex.io/languages.html http://reactivex.io/languages.html
sethf 7y ago
My exact reaction - and the reason I clicked through, though I must say I was pleasantly surprised it was this, and not JavaScript Observables. May have to make the switch from Notion https://www.notion.so/ https://www.notion.so/

ran3824692 7y ago

I get blank page without running javascript. Not observable.

forgotmypw 7y ago
Ditto.
gloflo 7y ago
It is a project about highly interactive content on the web. That does require JavaScript.

aerovistae 7y ago

You know what would be nice, in a scifi universe? Being able to hover over HN links and get a short context for the topic. E.g. "Observable is a <something something> used for <something something>. Since the language used in its <something something> appears similar to JavaScript, they put together a blog post clarifying the differences." It would be great if the HN submissions form had a field you could optionally fill out with such a text. Because if you can't tell from my example above, I have no idea what this is.

artursapek 7y ago

This is off-topic, but Observable's layout code seems to have some kind of rounding issue. The farther I scroll down the page, the more the sections overlap: https://i.imgur.com/zuYh3j4.png https://i.imgur.com/zuYh3j4.png It's a very gradual progression into that. Running Chrome Version 71.0.3578.98 (Official Build) (64-bit) on Ubuntu 18.04.

simonw 7y ago

Observable is SUCH a clever piece of software design. Every time I read more about how it works I learn something new and interesting.

ww520 7y ago
JsLive or JsLiveDoc.

emilfihlman 7y ago

The site CSS is broken: https://emil.fi/m/2019-06-15_13-17-36_siU3iwbN.png https://emil.fi/m/2019-06-15_13-17-36_siU3iwbN.png

nicwolff 7y ago

The demo notebook at https://observablehq.com/demo https://observablehq.com/demo works on Safari 11.1.2 but at this link I just see a JSON object starting `{"@context": "http:\/\/schema.org", "@type": "Article",...`.