2e:null 2f:["$","title",null,{"children":"How to crash Observable | Toph Tucker | Observable"}] 34:T749,{ const states = [ [`{}`, "undefined"], [ `{ w }`, "RuntimeError: w is not defined" ], [ `{ wh }`, "RuntimeError: wh is not defined" ], [ `{ whi }`, "RuntimeError: whi is not defined" ], [ `{ whil }`, "RuntimeError: whil is not defined" ], [ `{ while }`, "SyntaxError: Unexpected token" ], [ `{ while () }`, "SyntaxError: Unexpected token" ], [ `{ while (t) }`, "SyntaxError: Unexpected token" ], [ `{ while (tr) }`, "SyntaxError: Unexpected token" ], [ `{ while (tru) }`, "SyntaxError: Unexpected token" ], [ `{ while (true) }`, "SyntaxError: Unexpected token" ], [ `{ while (true) {} }`, "HANG!" ], [ `{ while (true) { y } }`, "RuntimeError: y is not defined" ], [ `{ while (true) { yi } }`, "RuntimeError: yi is not defined" ], [ `{ while (true) { yie } }`, "RuntimeError: yie is not defined" ], [ `{ while (true) { yiel } }`, "RuntimeError: yiel is not defined" ], [ `{ while (true) { yield } }`, "undefined" ] ]; const format = value => value.includes("Error") ? html`${value}` : value === "HANG!" ? html`${value}` : md`~~~js ${value} ~~~`; return html` ${states.map( ([code, value]) => html`` )}

${md`~~~js ${code} ~~~`}

${format(value)}

`; }35:[{"id":"0d0cfe91367f20e9c55da61fb806d7b3c29675fa9f33efba343c10fd4dedb3c14ad3f03af7921802b371d9ff93ba4a9ca9f92632b7cec304d31d8a1cbcd101f8","href":"https://static.observableusercontent.com/files/0d0cfe91367f20e9c55da61fb806d7b3c29675fa9f33efba343c10fd4dedb3c14ad3f03af7921802b371d9ff93ba4a9ca9f92632b7cec304d31d8a1cbcd101f8","name":"image.png","type":"image/png","lastModified":1674688804103.571,"size":471066}] 32:{"id":"9d965e948fc3a394","slug":"how-to-crash-observable","title":"How to crash Observable","thumbnail":"3a2a64e37eb36d059b37a4d45db54d2ec13c641521b716d36793378a3daa2a86","access_level":"public","create_time":"$D2020-01-30T19:25:21.322Z","update_time":"$D2023-01-25T23:23:38.311Z","view_time":null,"first_public_time":"$D2020-05-05T18:04:24.246Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":358,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"How to crash Observable","cells":[{"id":0,"value":"md`# How to crash Observable`\n// 2020-05-22: see also https://blog.repl.it/infinite-loops","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`This infinite loop will crash Observable in every open tab if you highlight it, un-comment it (Cmd-/), and run it (Shift-Enter):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// {\n// while (true) {\n// // nothing\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`And this infinite loop will not:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n while (true) {\n yield;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`The \\`yield\\` statement makes it a special kind of function called a [generator](https://observablehq.com/@observablehq/introduction-to-generators). In typical JavaScript, it is denoted with an asterisk, as in \\`function*() { … }\\`; [on Observable](https://observablehq.com/@observablehq/observables-not-javascript), it is implicit. Instead of \\`return\\`ing a single value, a generator will \\`yield\\` a value every time it is called, which Observable does automatically sixty times a second. \n\nThis one yields the current time:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"{\n while (true) {\n yield new Date();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`This one counts:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"{\n let i = 0;\n while (true) {\n yield i++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`For me, learning generators at the same time as learning Observable, it has been tricky to remember when it crashes and when it doesn’t, and that has sometimes scared me away from writing generators at all. It gets less scary as I better understand when it will happen.\n\nAn infinite loop can’t finish. If other stuff has to wait for it, then nothing else will ever happen. That is what we see as a crash. But an infinite loop that does something on every step, _and then lets everything else do its thing_, is fine. It will never get to the last step, but it does not need to. The problem with infinity is just if you try to wait until you get to the end of it. Normal functions do; generators don’t. They \\`yield\\` with grace.\n\nThis code, a normal function with a \\`return\\` statement inside what _would be_ an infinite loop if the \\`return\\` statement didn’t pull you out, also works just fine:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"{\n while (true) {\n return new Date();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`The difference is that I can’t think of why you would ever write it, though maybe you can. The \\`while\\` loop will only run once, so why is it there? I would probably just write \\`return new Date()\\`! \n\nSure, you might have \\`while\\` loops with things that sometimes evaluate to \\`true\\`, and sometimes don’t, and you might _accidentally_ end up in an infinite loop, if it turns out it never becomes \\`false\\`. But, when writing a traditional function, even though you _can_ break out of it, you would never literally write \\`while (true)\\`, which is _neccessarily_, just looking at it, an infinite loop.\n\nBut with generators, you might! On Observable, \\`while (true)\\` is a handy way to say “just keep updating this forever.” Maybe it’s a clock, like above; maybe it’s [a looping animation](https://observablehq.com/@mbostock/animation-loops) that you want to run for as long as the page is open.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"{\n const height = 20;\n const context = DOM.context2d(width, height);\n while (true) {\n const x = ((Math.sin(Date.now() / 1000) + 1) / 2) * (width - height);\n context.clearRect(0, 0, width, height);\n context.fillRect(x, 0, height, height);\n yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`Usually, while writing code on Observable, you can run it at any point (Shift-Enter) and the worst that could happen is you get an error on that cell (and its dependents), and you can undo it or fix it or keep writing code to get out of it.\n\nHowever, while writing generators, i.e. cells that \\`yield\\` values instead of \\`return\\`ing them, you may actually _want_ to write an infinite loop, maybe for the first time since you learned to code, touched the hot stove, developed the gut instinct to stay away.\n\nAnd so there is one point during the natural writing process — like, after you write the \\`while\\` loop, but before you write the \\`yield\\` statement you intend to write — when prematurely running the cell will crash every open Observable page.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`It is OK. Scroll back up and do it now. Wait several seconds. A “Notebook not responding” message will appear at the bottom of the screen. Click “Safe mode”. Fix the loop. Add a \\`yield\\` statement, maybe one that depends on time, or increments a counter. Click “Exit”. Relish the thrill that you are entrusted to write code that can sting, that you were made free to fall. Go home, hug your loved ones, call an old friend, write someone a letter.\n\nTake care!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"---\n_Update, January 25, 2023:_ Observable no longer displays the “Notebook not responding” pop-up. Instead, you have to kill the browser process yourself:\n\n- Chrome: ⋮ → More Tools → Task Manager, look for observablehq\n- Safari: macOS Activity Monitor → Filter for observablehq\n\nWhen you come back to Observable, if you re-open the notebook, it’ll just crash again. Instead, open it in Safe Mode: \n\n- From a notebook listing: ⋯ → View → View in Safe Mode\n- Given a URL: append “/safe” to the end of the notebook URL, like https://observablehq.com/@tophtucker/how-to-crash-observable/safe\n\nRemove the infinite loop and exit Safe Mode. Yes, this is annoying.\n\n

\n \n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"