25:["$","title",null,{"children":"Web Dev Basics | Deepak Ramarao | Observable"}] 49:[{"id":"992ecc9050c985da3823ea4c0efaa5fbfe80f7d797145a785457b76ac454d9a6b66df0490d6ca2fd113c7431d40939ef32d59e970a9f75f59d3198f2e17a9a17","href":"https://static.observableusercontent.com/files/992ecc9050c985da3823ea4c0efaa5fbfe80f7d797145a785457b76ac454d9a6b66df0490d6ca2fd113c7431d40939ef32d59e970a9f75f59d3198f2e17a9a17","name":"INXD2023 - Interactive - Project-2.csv","type":"text/csv","lastModified":1721979771266.621,"size":2447}] 29:{"id":"f9b44eeedb05bb61","slug":null,"title":"Web Dev Basics","thumbnail":"e077b0536488af5887bece6122e79001618c61ab1b7f35a2d065160d771d521f","access_level":"public","create_time":"$D2024-07-25T10:14:42.719Z","update_time":"$D2024-07-29T10:02:32.752Z","view_time":null,"first_public_time":"$D2024-07-25T10:14:42.719Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6cc1490ae3be512e","login":"dpuk","name":"Deepak Ramarao","avatar_url":"https://avatars-next.observableusercontent.com/eba64240b9740e2b1bd2077716ac1c042a5e60bf5dc4a3ad8cf0ba265ad16c64","tier":"starter_2024","bio":"","following":false},"version":98,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fba3f9893a17120","login":"dpuk","name":"Deepak Ramarao","avatar_url":"https://avatars-next.observableusercontent.com/eba64240b9740e2b1bd2077716ac1c042a5e60bf5dc4a3ad8cf0ba265ad16c64","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"5fba3f9893a17120","login":"dpuk","name":"Deepak Ramarao","avatar_url":"https://avatars-next.observableusercontent.com/eba64240b9740e2b1bd2077716ac1c042a5e60bf5dc4a3ad8cf0ba265ad16c64","tier":null,"role":"editor"},{"type":"team","id":"6cc1490ae3be512e","login":"dpuk","name":"Deepak Ramarao","avatar_url":"https://avatars-next.observableusercontent.com/eba64240b9740e2b1bd2077716ac1c042a5e60bf5dc4a3ad8cf0ba265ad16c64","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Web Dev Basics","cells":[{"id":0,"value":"# Web Dev Basics\n\nLet's start by making a card","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"\n\n

\n $\"Card$ \n

Phones

Phone Explorer

An interactive buying guide and explorer to get the best phone for you.

\n Project\n Process\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## Abstract the card component\n\n1. Single\n - title\n - topic\n - imageLink\n - description\n - processLink\n - projectLink\n\n2. Template","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"single = ({\n title: \"Antarctica's Aliens\",\n topic: \"Invasive Species\", \n imageLink: \"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/FMIB_50749_Subalpine_Meadow%2C_with_Dunthonia_antarctica_in_Foreground%2C_and_wind-swept_rata%2C_above_Camp_Cove%2C_Auckland_Island%3B_Adams_Island.jpeg/640px-FMIB_50749_Subalpine_Meadow%2C_with_Dunthonia_antarctica_in_Foreground%2C_and_wind-swept_rata%2C_above_Camp_Cove%2C_Auckland_Island%3B_Adams_Island.jpeg\",\n description: \"Mapping the impact of invasive species in Antarctica\",\n processLink: \"https://nidpuk.notion.site/Info-Vis-3-4a081d13bd314686a2b9f23af39f87f0?pvs=4\",\n projectLink: \"https://d-puk.github.io/antarctica-aliens/\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"template = html`

\n $\"Card$ \n

${single.topic}

${single.title}

${single.description}

\n Project\n Process\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## Data binding","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"numbers = [1, 2, 3, 4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"square = (x) => x * x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function sentence(word) {\n return `hello ${word} \\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"sentence(\"world\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"words = [\"world\", \"universe\", \"planets\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"words.map((x) => sentence(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"htl.html`\n

Three sentences should appear below this

${words.map((x) => sentence(x))}

hello ${word}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"htl.html`\n

\n ${words.map((x) => sentencehtml(x))}\n \n

\n $\"Card$ \n

${data.topic}

${data.title}

${data.description}

\n Project\n Process\n

c\n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"htl.html`${card(single)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"projects = await FileAttachment(\"INXD2023 - Interactive - Project-2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"projects","database":"$undefined"},{"id":83,"value":"htl.html`\n

\n ${projects.map((x) => card(x))}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function circleCard(data) {\n return svg`\n \n ${data.id}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null