test markdown

#Open Data / Creative Coding Demo

This page demonstrates the new LabMaker conte# Open Data / Creative Coding Demo

This page demonstrates the new LabMaker content blocks for technical documentation, project pages, and creative coding tutorials.

#1. Toggle / Details

Useful for optional explanations, technical notes, FAQ, or advanced sections.

fetch("https://api.thingspeak.com/channels/3448221/feeds/last.json")
  .then(response => response.json())
  .then(data => console.log(data));

#2. Embed

Useful for YouTube, ThingSpeak, Figma, Maps, p5.js sketches, or interactive projects.

#YouTube

#Interactive Project

#3. Bookmark Card

Use this instead of a normal hyperlink when you want to highlight an external resource.

#4. Video

Upload the video first in:

MEDIA → Add article files

Then insert it like this:

You can also use an external video URL:

#5. Audio

Useful for field recordings, sound art documentation, interviews, or environmental recordings.

#6. PDF Viewer

Useful for papers, catalogues, technical drawings, schematics, or documentation.

Another example:

#7. Two Columns

Useful when two concepts need to be shown side-by-side.

#8. Three Columns

#9. Grid

Grid works well for components, project systems, teams, technologies, or categories.

#10. Grid with Images

#11. Highlight + Columns

#12. Technical Documentation Layout

#02 / API

const url =
  "https://api.thingspeak.com/channels/3448221/feeds/last.json";

#03 / OUTPUT

Use the data in:

• JavaScript
• p5.js
• Python
• Processing

:::

#13. Tutorial Example

#Step 1 — Get the data

const channel = 3448221;

fetch(
  `https://api.thingspeak.com/channels/${channel}/feeds/last.json`
)
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

{
  "field1": "28.4",
  "field2": "71.2",
  "field3": "345"
}

#Step 2 — Visualize

#Step 3 — Explore the source

#14. Media Documentation

#Field Audio

:::

#15. Research Material

#Supporting Resource

:::

#16. Divider

Use:

to visually separate major sections.

If you are inside :::columns or :::grid, use:

when you need a normal visual divider inside one cell, because --- is used to separate columns.

#End

fetch("https://api.thingspeak.com/channels/3448221/feeds/last.json")
  .then(response => response.json())
  .then(data => console.log(data));

#2. Embed

Useful for YouTube, ThingSpeak, Figma, Maps, p5.js sketches, or interactive projects.

#YouTube

#Interactive Project

#3. Bookmark Card

Use this instead of a normal hyperlink when you want to highlight an external resource.

#4. Video

Upload the video first in:

MEDIA → Add article files

Then insert it like this:

You can also use an external video URL:

#5. Audio

Useful for field recordings, sound art documentation, interviews, or environmental recordings.

#6. PDF Viewer

Useful for papers, catalogues, technical drawings, schematics, or documentation.

Another example:

#7. Two Columns

Useful when two concepts need to be shown side-by-side.

#8. Three Columns

#9. Grid

Grid works well for components, project systems, teams, technologies, or categories.

#10. Grid with Images

#11. Highlight + Columns

#12. Technical Documentation Layout

#02 / API

const url =
  "https://api.thingspeak.com/channels/3448221/feeds/last.json";

#03 / OUTPUT

Use the data in:

• JavaScript
• p5.js
• Python
• Processing

:::

#13. Tutorial Example

#Step 1 — Get the data

const channel = 3448221;

fetch(
  `https://api.thingspeak.com/channels/${channel}/feeds/last.json`
)
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

{
  "field1": "28.4",
  "field2": "71.2",
  "field3": "345"
}

#Step 2 — Visualize

#Step 3 — Explore the source

#14. Media Documentation

#Field Audio

:::

#15. Research Material

#Supporting Resource

:::

#16. Divider

Use:

to visually separate major sections.

If you are inside :::columns or :::grid, use:

when you need a normal visual divider inside one cell, because --- is used to separate columns.

#End