THE LAOB hello world

31:Tb52,md`Welcome. You are already in Observable and you are viewing a notebook. Each cell of the notebook is composed of Javascript. This is executed as soon you finish editing it and/or whenever the cell is referenced by another cell in the notebook, reactively. Here’s ObservableHQ’s [first-taste introduction](/@observablehq/a-taste-of-observable). You don’t need to install anything, but you will need a free Observable account to create your own notebooks and preserve any of your edits. Any notebook cell is immediately editable in your browser. The cells and linked cells that we code here can generate more or less anything that will render in a browser. Observable’s Javascript gives you a few extra built-in functions, in particular: * \`html\` – which will render, as html, anything following it that is enclosed in the same backticks that enclose Javascript [\`template literals\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), and * \`md\` – which will render as [Markdown](https://www.markdownguide.org/), and provides the most convenient in-notebook-cell-editor for documentation and/or explanatory, expository text. This cell is itself composed in Markdown, defined by \`md\` and enclosed in backticks. Try editing this cell to see what we mean. (Click in the area to its left.) If you register your edit by running the cell (click top-right blue icon, click outside, or Shift-Enter) you have already created your own disposable copy or \`fork\` of the notebook which you could preserve in your own account and keep playing with, without affecting this notebook as composed and published by ${LAOB}. Feel free. The \`html\` function also gives you CSS in that a cell with something like this inside it html\`\` will be applied to the notebook which is, of course, also web page. So you have immediate, editable, live-code access to * HTML (and Markdown), * Javascript, and * CSS – our contemporary web technologies – without any fuss. (A notebook using Markdown is, basically, an instantly published, no-server blog.) Javascript implies, of course, that we can create things that are animated and may respond, programmatically, to reader input and other events. But, especially from the ${LAOB} point of view, there’s more. Notebook cells can be readily embedded into very simple websites. For our *Hello World* example we will make a cell that generates alternative versions of a short couplet. This cell is embedded in the \`index.html\` file of a subfolder at \`thelaob.com\` (which, as it happens, is served from \`github.io\`). Following the link to https://thelaob.com/helloworld you will find a very simple website which is doing what our *Hello World* cell is doing (although without all of this notebook’s CSS). In fact the website is *driven* by the cell live.`32:T53b,Hello_World = { let couplet = ""; let couplend = "world beyond thoughts are endless
but drink death before wine to the last"; let toggle = true; while (true) { yield Promises.tick(2000).then(() => { if (toggle) couplet = "don’t think. "; else couplet = "hello! "; couplet += couplend; toggle = !toggle; return html`

${couplet}

`; }); } } // /* And here is the entire text of the index.html file, most of it generated by Observable's embed facilities: THE LAOB hello world

Credit: LAOB GETTING STARTED by THE LAOB

*/33:T48d,md`### SO ... As we’ve proposed and ... *as we invite you to do :* 1. Create a notebook that describes, explains, and/or generates a work of language art. 2. Offer it to the ${LAOB}. Once accepted for publication ... and/or if you’d like help with finishing your notebook share it with @shadoof or one of the executive editors for direct collaborative editing. To do this: 1. (Re)publish the notebook. 2. Click the notebook’s ‘...’ menu. 1. Scroll to the bottom and click ‘Switch to Next’. 4. Click the notebook’s ‘...’ menu again. 5. Select ‘Share’. 6. When the dialog opens, type ‘shadoof’ into the appropriate field, select Cayley and then click ‘Confirm Changes’. 3. When ready, we’ll then make a forked copy of the notebook and will configure selected cells such that they can be embedded in a webapp which is, effectively, *the work itself*, the work to be experienced and read. 4. We create a properly credited entry in a contents page on the ${LAOB} website which links to the work itself and also to the notebook, which may serve as both exposition and engine. 5. And that is, basically, that. ---`34:[] 2f:{"title":"GETTING STARTED","cells":[{"id":0,"value":"md`# GETTING STARTED\n## with ${LAOB} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"import { laob_notebook_css } from \"@laob/imports\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"import { LAOB } from \"@laob/laob\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"laob_notebook_css","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}