Show source after output

[devsnek]

This site is rather unique in that it shows the output of a code block before the code block rather than after. I am obviously not sure of the exact reasons this design was chosen, but what I can say is that it very often confuses me. Would it be possible to add a preference to swap the order of these?

[jashkenas]

Although I’m certainly sorry that you find the the notebook cell ordering to be confusing, I don’t think it’s very likely that we’ll decide to add a preference to toggle the order.

Often, notebooks are written with references to view the code “as seen below”, or have cells intentionally pinned or unpinned to fit certain outputs together within a single screen, or to allow the output of two cells to lie adjacent to one another.

With a preference set, either you would be constantly swapping back and forth between different orderings as you browsed other peoples’ notebooks … or you would be viewing them laid out not as their authors intended — neither of which would be very satisfactory.

[bgchen]

Here are some older related threads:

Observable notebooks originally showed the code before the output, however, this led to issues with the output jumping away when the source was opened:

Improvement idea: edit cells with pop-up, overlay editor

Consider an alternative way of editing cells. The way things jump around on the screen when you click on the right side to edit a cell is disorienting. Consider e.g. a pop-up editor so that the content I’m editing doesn’t move on the screen. The simplest option is how editing in this forum (Discourse) works i.e. the editor opens at the very bottom. Another example is what Gmail does when you click ‘Compose’. The editor opens as overlay, existing content on the page A more sophisticated woul…

Eventually, the site was switched to the current ordering:

New Notebook Cell Toggle UI (Feedback Wanted!)

Dear Observers, We’re beta-testing a new UI for toggling cells open and closed, and pinning and un-pinning them. The change: Reverses the current internal ordering of a cell, so that now the cell’s display lies above the cell’s definition. This should make things feel less jumpy as you toggle a single cell open and closed. Adds a toggle caret, which also replaces the current asterisk for anonymous cells. It looks like this: [image] If you’d like to try it out, open your JS Developer Cons…

[jrus]

I also would prefer to have code then output, because I am coming from a frame of reference of the command line, REPLs, and other Notebook environments, where output follows code. Someone coming from Excel might have a different take.

Which works better depends a bit on what kind of document you are creating for what kind of reader. For something like a blog post or academic paper with inline interactive bits, often much of the markup and code (e.g. for rendering a diagram or mathematical formula) should be hidden by default for the sake of keeping a narrative flowing along. If you have a cell with code hidden and you try to toggle the code view open and shut, it turns out to be quite annoying to have the rendered output jump up and down the page. So there’s a trade-off.

I don’t think this ordering is going to change, so I recommend trying to get used to it. It might slightly change what kind of documents you make / how you present them, but the platform is still pretty great irrespective of this ordering question, and I think it’s generally possible to produce notebooks where the flow is not too confusing for readers or authors.

[bgchen]

Just for the heck of it, I’ve added functionality to my notebook “Exporting notebooks with their source” which lets you export your notebooks with the cell sources attached before their outputs if you wish. See the update in the “Export tool” section.