30:[{"id":"c329e2ff065f43eca3900487d458c62cee4072e808fd0e74bf80f29c6624f7dcb81d4dfe2e0fc8e727871fd1ff7848b66161894b3a35e3e834b181bbe49bedca","href":"https://static.observableusercontent.com/files/c329e2ff065f43eca3900487d458c62cee4072e808fd0e74bf80f29c6624f7dcb81d4dfe2e0fc8e727871fd1ff7848b66161894b3a35e3e834b181bbe49bedca","name":"image.png","type":"image/png","lastModified":1589563167040.486,"size":5783}] 2e:{"title":"Utilities","cells":[{"id":0,"value":"md`# Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"imp(\"titleCell\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"function titleCell({ title, subTitle }) {\n return html`

${title}

${subTitle}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"titleCell({\n title: \"Title\",\n subTitle: \"Subtitle which is longer than the title\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"imp(\"lang\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"function lang({ language = \"js\", code }) {\n return md`~~~${language}\n${code}\n~~~`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`${note(md`**Syntax Highlighting**\n${lang({\n language: \"js\",\n code: 'import {lang} from \"@jzhang/utilities\"'\n})}\n${lang({ language: \"python\", code: \"import pdb; pdb.set_trace()\" })}\n${lang({ language: \"sql\", code: \"select * from table\" })}\n`)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"imp(\"toRoundedDecimal\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function toRoundedDecimal(value, precision = 2) {\n return parseFloat(value.toFixed(precision));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"toRoundedDecimal(1.25234923423)","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"imp(\"img\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"function img({ source, width = 500 }) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"img({ source: await FileAttachment(\"image.png\").url(), width: 400 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"imp([\"imgWithWidth\", \" viewof w\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"function imgWithWidth(source) {\n return img({ source, width: w });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof w = slider({\n min: 200,\n max: 800,\n step: 1,\n value: 500,\n title: \"Image Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"imgWithWidth(await FileAttachment(\"image.png\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"imp(\"label\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"function label({ text, color = \"orange\" }) {\n return html`\n

\n ${text}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"label({ text: \"This is a styled banner, useful for labels\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"imp([\"labelWithPicker\", \" viewof colorPicker\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"function labelWithPicker(text) {\n return label({ text, color: colorPicker });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof colorPicker = _color(\"#465d70\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"labelWithPicker(\n \"This is a styled banner, with a color picker to help select the border color\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"imp(\"note\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"function note(text, color = \"#f4f4f4e0\") {\n return html`\n

\n${text}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"note(\n md`This a background element, useful for notes. It looks best when it contains a full body of text with multiple sections.\n\n#### Section 1\n* Bullet 1\n* Bullet 2`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"function imp(name, with_ = null) {\n if (with_ === null)\n return lang({\n code: `import \\{${name}\\} from \\\"@jzhang/utilities\\\"`\n });\n else if (Array.isArray(name)) {\n return lang({\n code: `import \\{${name.join(\", \")}\\} from \\\"@jzhang/utilities\\\"`\n });\n } else {\n const { value, as } = with_;\n return lang({\n code: `import {${name}} with {${value} as ${as}} from \"@jzhang/utilities\"`\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"import { colorPicker as _color } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}