28:null 29:["$","title",null,{"children":"Changelog 2018-03-02 | Dennis Heihoff | Observable"}] 2e:T625,md`## Refined layout To make editing less jumpy ⚡️, we’ve reversed the order of each cell’s source code and output (display): the code now appears *below* the output, rather than above, so that the output remains fixed when showing or hiding the code. We’ve also refined the appearance slightly, tweaking colors and enlarging hit targets. The old pin icon is dead! Long live the new caret and pin . If the new order feels weird, give yourself a little time to adjust, and [let us know what you think](https://talk.observablehq.com/t/new-notebook-cell-toggle-ui-feedback-wanted/379). We found it helpful to update a few of our notebooks to improve readability in this layout. `2f:[] 2c:{"id":"52d89ba077daa9e0","slug":"changelog-2018-03-02","title":"Changelog 2018-03-02","thumbnail":"8753bc4b6b8ffb43c02730a0f0573de30133510293ad0229fb765f9ca05b3660","access_level":"public","create_time":"$D2018-03-04T22:37:45.687Z","update_time":"$D2018-03-04T22:42:34.920Z","view_time":null,"first_public_time":"$D2018-03-04T22:46:09.678Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"481998eabc291405","login":"den1k","name":"Dennis Heihoff","avatar_url":"https://avatars-next.observableusercontent.com/01c7b59b479200282bdc5770f3256e566b4c5ece8d31a0f959215f2d70f5d18d","tier":"starter_2024"},"version":579,"publish_version":579,"role":null,"authored":false,"authors":[{"type":"individual","id":"7f26a66ad2574ea9","login":"den1k","name":"Dennis Heihoff","avatar_url":"https://avatars-next.observableusercontent.com/01c7b59b479200282bdc5770f3256e566b4c5ece8d31a0f959215f2d70f5d18d","tier":null}],"members":[{"type":"individual","id":"7f26a66ad2574ea9","login":"den1k","name":"Dennis Heihoff","avatar_url":"https://avatars-next.observableusercontent.com/01c7b59b479200282bdc5770f3256e566b4c5ece8d31a0f959215f2d70f5d18d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Changelog 2018-03-02","cells":[{"id":0,"value":"md`# Changelog 2018-03-02\n\nWelcome to the second installment of the [Observable Changelog](https://beta.observablehq.com/collection/changelog)! We have some exciting improvements for you this week. As always, please send us your feedback and suggestions via [the forum](https://talk.observablehq.com/), [Twitter](https://twitter.com/observablehq), [notebooks](https://beta.observablehq.com/recent), or [email](mailto:support@observablehq.com).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Code completion\n\nYou can now hit Tab ⇥ to see suggested completions of a variable or property name in the editor. If there’s exactly one match, the name will be autocompleted. If there are more than one, keep typing or use the arrow keys ↑ or ↓ to navigate the popup menu, and hit Tab ⇥ or click to complete. (Escape ⎋ closes the menu.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"data = [{name: \"Apple\", color: \"Red\", character: \"🍎\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"data[0].c // Place the caret after the c, then hit Tab ⇥.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`The completer uses both static *and* dynamic analysis to find suggestions. It understands locals, globals, named and imported cells, [standard library](https://beta.observablehq.com/@mbostock/standard-library) methods, JavaScript builtins, and more. It can even complete properties of objects and numerically-indexed arrays—try editing the code above! For more on this feature, and to give feedback, see [our forum post](https://talk.observablehq.com/t/new-feature-code-completion-shipped/385).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"anchors = md`\n## Anchorsssss\n\nYou can now share links to individual cells in a notebook. This is particularly useful if you have a long notebook—say an API reference—and you want to point someone at a specific section. Simply add #*name* to the URL, where *name* is the name of the cell. For example, here’s a link to this cell:\n\nhttps://beta.observablehq.com/@mbostock/changelog-2018-03-02#anchors\n\nIf you’d rather copy-and-paste, you can also find these links by clicking the hash next to a named cell on a published notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Mutable operator\n\nObservable favors a “pure” style of programming where a cell returns an immutable value derived solely from the other cells it references. For example, a [line chart](https://beta.observablehq.com/@mbostock/d3-line-chart) cell might reference a *data* cell whose value is an array of objects; if the *data* changes, the line chart automatically updates.\n\nSometimes, though, this strict approach is limiting. What if you have state that is affected by multiple cells, jointly owned by the program and the user? The “pure” approach pushes you towards monolithic cells, side-effects and [other antipatterns](https://beta.observablehq.com/@tmcw/observable-anti-patterns-and-code-smells) which increase the complexity of your notebook.\n\nNow there’s an alternative: the \\`mutable\\` operator. If a cell is \\`mutable\\`, you can assign its value from another cell, and any referencing cell will react accordingly. Below, two buttons increment and decrement a value *x*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"mutable x = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`Here are ${x} bananas: ${new Array(x).fill(\"🍌\")}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n const form = html``;\n form.onsubmit = () => false;\n form.inc.onclick = () => { ++mutable x; };\n form.dec.onclick = () => { if (mutable x > 0) --mutable x; };\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`The \\`mutable\\` operator offers increased control over reactivity and simpler program structure for a variety of applications; see the [introduction to mutable state](https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state) and [Breakout! screencast](https://www.youtube.com/watch?v=Aznz6oLbuFQ) for more. Many thanks to [Kelley van Evert](https://beta.observablehq.com/@kelleyvanevert) for starting [the discussion](https://talk.observablehq.com/t/designated-input-vs-normal-output-computed-variables/258) that led to this feature! 🙏`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`## Nested templates\n\nInspired by [lit-html](https://github.com/PolymerLabs/lit-html), our [md](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#md), [html](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#html) and [svg](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#svg) template literals now let you embed arbitrary DOM elements and arrays in expressions. This makes it easy to compose templates with multiple languages, such as embedding TeX within Markdown:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`I like Markdown for prose, but ${tex`\\KaTeX`} for math.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"md`You can even generate dynamic content, such a canvas sparkline, and embed it in markdown. Embedded array expressions also simplify the construction of DOM elements derived from data, similar to JSX. For example, rather than needing D3’s data-join, you can use *array*.map:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"md`See the [introduction to HTML](https://beta.observablehq.com/@mbostock/introduction-to-html) for more examples.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`## TeX, now with less backslash\n\nDouble backslashes are no longer required for [tex](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#tex) and [tex.block](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#tex_block); thanks to [String.raw](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw), you can now use single backslashes, just like normal TeX. For your convenience, we’ve automatically rewritten tex template literals in existing notebooks to remove extra backslashes. Let us know if anything is amiss!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"tex`\n\\Delta E^*_{00} = \\sqrt{\n \\Big(\\frac{\\Delta L'}{k_LS_L}\\Big)^2 +\n \\Big(\\frac{\\Delta C'}{k_CS_C}\\Big)^2 +\n \\Big(\\frac{\\Delta H'}{k_HS_H}\\Big)^2 +\n R_T\n \\frac{\\Delta C'}{k_CS_C}\n \\frac{\\Delta H'}{k_HS_H}\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Bidirectional text\n\nObservable has improved support for right-to-left scripts: each cell sets the [\\`dir\\` attribute](https://www.w3.org/International/questions/qa-html-dir) to “auto” so that the script direction can be inferred automatically. The Arabic text below, for example, should appear right-to-left.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`Thanks to [Nick Doiron](https://twitter.com/mapmeld/status/967634520295071744) for this suggestion.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`That’s all for today. Thanks for reading!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"