I have an iPhone and the free Scriptable app. Write a Scriptable widget for my home screen that shows the garden club's next shift with open spots, from our API at https://garden-signups.example.workers.dev/shifts, which returns an array of shifts with date, task, start, capacity and spotsFilled. What should I know about Scriptable that's different from the JavaScript I've written so far?send

Good project! Before the code, here's what's different about Scriptable compared to what you've used so far:

What's new here: - Scriptable is its own JavaScript environment on iOS — no document, window, fetch... but it has its own built-in objects for things like widgets, files, and network requests. - Instead of fetch(), Scriptable has a Request object: new Request(url), then await request.loadJSON(). - To make a home screen widget, you build a ListWidget object, add text/spacer elements to it, then call Script.setWidget(widget) and Script.complete(). - config.runsInApp is a Scriptable-provided boolean that's true when you tap the script inside the app (for testing) and false when iOS runs it as an actual widget. - iOS — not your script — decides when to refresh a widget. You can suggest a refresh time with widget.refreshAfterDate, but you can't force continuous updates. - I'm not fully certain how reliably Intl.DateTimeFormat behaves in Scriptable's JS engine — I believe it works, since it's documented in the Scriptable community, but if the date/time text looks wrong on your phone, that's the first thing to check. - I don't know the exact format of your date and start fields (like "2024-06-01" and "09:00", or something else). The code below assumes 24-hour "HH:MM" text combined with an ISO date — check your API's actual response and adjust if needed.

Who sees this: a home screen widget only shows on your own iPhone, to whoever is holding/unlocking your phone. It calls your own API, which returns shift data (no personal names, based on what you described), so that's fine to display.

// Scriptable widget: next garden club shift with open spots

const API_URL = "https://garden-signups.example.workers.dev/shifts"

const widget = new ListWidget()
widget.backgroundColor = new Color("#f0f5ec")

try {
  // Ask the API for the shift list
  const request = new Request(API_URL)
  const shifts = await request.loadJSON()

  const now = new Date()

  // Turn each shift's date + start time into one real Date,
  // and work out how many spots are still open
  const upcomingOpenShifts = shifts
    .map(shift => {
      const shiftStart = new Date(`${shift.date}T${shift.start}`)
      const spotsOpen = shift.capacity - shift.spotsFilled
      return { ...shift, shiftStart, spotsOpen }
    })
    .filter(shift => shift.shiftStart > now && shift.spotsOpen > 0)
    .sort((a, b) => a.shiftStart - b.shiftStart)

  console.log(`fetched ${shifts.length} shifts, ${upcomingOpenShifts.length} upcoming with open spots`)

  const next = upcomingOpenShifts[0]

  if (next === undefined) {
    const text = widget.addText("No open shifts")
    text.font = Font.mediumSystemFont(14)
  } else {
    const title = widget.addText(next.task)
    title.font = Font.boldSystemFont(16)

    widget.addSpacer(4)

    const dateFormatter = new Intl.DateTimeFormat("en-US", {
      weekday: "long",
      month: "short",
      day: "numeric"
    })
    const dateText = widget.addText(dateFormatter.format(next.shiftStart))
    dateText.font = Font.systemFont(14)

    const timeFormatter = new Intl.DateTimeFormat("en-US", {
      hour: "numeric",
      minute: "2-digit"
    })
    const timeText = widget.addText(timeFormatter.format(next.shiftStart))
    timeText.font = Font.systemFont(14)

    widget.addSpacer(4)

    const spotsWord = next.spotsOpen === 1 ? "spot" : "spots"
    const spotsText = widget.addText(`${next.spotsOpen} ${spotsWord} open`)
    spotsText.font = Font.mediumSystemFont(14)
    spotsText.textColor = new Color("#2e7d32")
  }

  // Ask iOS to check again in 30 minutes
  widget.refreshAfterDate = new Date(Date.now() + 30 * 60 * 1000)

} catch (error) {
  // If the fetch fails, show that on the widget instead of a blank one
  const errorText = widget.addText("Couldn't load shifts")
  errorText.font = Font.mediumSystemFont(14)
  console.log(error)
}

Script.setWidget(widget)
Script.complete()

// Preview the widget when running the script inside the app
if (config.runsInApp) {
  widget.presentSmall()
}

How each part works, briefly: - try/catch — if the network call fails, the widget still shows something readable instead of crashing. - .map() adds computed fields (shiftStart, spotsOpen) to each shift. - .filter() keeps only shifts that are still in the future and have room. - .sort() puts the soonest shift first, so [0] is the next one. - console.log counts — only visible when you run the script manually in the app (tap it), not when it runs silently as a widget.

To test and install: 1. Open Scriptable, create a new script, paste this in, and tap the play button (▶) — it should show a small preview. 2. Check the log for the counts, to confirm it fetched real data. 3. Go to your home screen, long-press an empty spot, tap the +, search for Scriptable, choose a small widget size, add it. 4. Long-press the new widget, choose Edit Widget, and set Script to this script's name.

One thing to double check yourself: the exact text format of date and start from your API, so the new Date(...) line parses correctly — want to paste me a sample shift object so I can confirm the parsing is right?

I'd like to write a Figma plugin that makes a name badge for each of our 12 garden club volunteers: a rectangle with their first and last name on it, laid out in a grid on the current page. The names can be in an array in the plugin's code for now. What do I need to know about Figma plugins, and what would the code look like?send

Figma plugins are a new platform for you, so here's what you need to know before we write code.

What a Figma plugin is

• A plugin is a folder with at least two files: manifest.json (tells Figma the plugin's name and which file to run) and code.js (your actual JavaScript).
• Your code runs in a special sandbox inside Figma. Like Node has no document or window, this sandbox has no browser DOM either — instead it has a global object called figma that you use to read and create things on the canvas.
• There's no import/export or bundler in the basic setup — it's a plain script, like the Apps Script editor.
• Figma can scaffold the files for you: in the Figma desktop app, go to Plugins menu > Development > New Plugin, pick a blank template. This generates a working manifest.json with the id field already filled in correctly — I'd let Figma do that instead of typing one by hand, since I'm not fully sure of every field it expects.
• To run it after editing code.js: right-click the canvas > Plugins > Development > [your plugin name].
• There's a developer console for it too (Plugins > Development > Show/Open Console), similar to the browser dev tools you already use.
• Nothing here is published anywhere — it only affects the Figma file you're working in, on your own account, and everything it does can be undone with Ctrl+Z, so there's not much risk in just running it and checking the result.

Figma-specific things the code will use (new to you)

• figma.createRectangle() and figma.createText() — create shape and text nodes.
• Colors are objects like { r: 0.9, g: 0.95, b: 0.9 } with each channel from 0 to 1, not 0–255.
• Before setting text, you must await figma.loadFontAsync({ family, style }) — Figma loads fonts lazily, so it makes you ask first.
• figma.currentPage.appendChild(node) adds a node to the page — similar idea to appendChild() in the DOM, which you've already used.
• figma.closePlugin() ends the plugin run.

The code

// The volunteers' names, as an array of objects
const volunteers = [
  { first: "Ava", last: "Nguyen" },
  { first: "Ben", last: "Ortiz" },
  { first: "Carla", last: "Diaz" },
  { first: "Dan", last: "Kim" },
  { first: "Ella", last: "Brown" },
  { first: "Finn", last: "Walsh" },
  { first: "Gia", last: "Patel" },
  { first: "Hugo", last: "Lopez" },
  { first: "Ivy", last: "Chen" },
  { first: "Jax", last: "Reed" },
  { first: "Kira", last: "Moss" },
  { first: "Leo", last: "Grant" }
]

// Grid layout settings
const COLUMNS = 4
const BADGE_WIDTH = 200
const BADGE_HEIGHT = 100
const GAP = 20

async function makeBadges() {
  // Fonts must be loaded before we can set text on a node
  await figma.loadFontAsync({ family: "Inter", style: "Regular" })

  for (let i = 0; i < volunteers.length; i++) {
    const volunteer = volunteers[i]

    // Turn the index into a row and column position
    const column = i % COLUMNS
    const row = Math.floor(i / COLUMNS)

    // The rectangle background
    const rect = figma.createRectangle()
    rect.resize(BADGE_WIDTH, BADGE_HEIGHT)
    rect.x = column * (BADGE_WIDTH + GAP)
    rect.y = row * (BADGE_HEIGHT + GAP)
    rect.fills = [{ type: "SOLID", color: { r: 0.9, g: 0.95, b: 0.9 } }]

    // The name, placed on top of the rectangle
    const text = figma.createText()
    text.characters = `${volunteer.first} ${volunteer.last}`
    text.x = rect.x + 10
    text.y = rect.y + BADGE_HEIGHT / 2 - 8

    figma.currentPage.appendChild(rect)
    figma.currentPage.appendChild(text)
  }

  figma.closePlugin("Badges created")
}

makeBadges()

What each part does: - volunteers is your data — an array of objects, same shape you've used for sheet rows. - The for loop runs once per volunteer. i % COLUMNS and Math.floor(i / COLUMNS) turn a single index (0 to 11) into a row and column, so badges wrap into a new row every 4 across. - Each loop creates a rectangle, positions it with x/y, and colors it, then creates a text node with the person's name and places it over the rectangle. - appendChild adds both nodes to the current page — text is appended after the rectangle, so it sits visually on top. - makeBadges() is async because loading the font requires await; the function runs once when the plugin starts.

To try it

1. Create the plugin folder through Figma's New Plugin flow so manifest.json is set up correctly, and paste this into the generated code.js (replacing the boilerplate).
2. Open a Figma file, run the plugin from Plugins > Development.
3. Check the current page — you should see 12 badges in a 4-column grid. If something looks wrong, Ctrl+Z undoes it, and the plugin's console will show errors.

Want me to extend this to read the names from a Google Sheet instead of the hardcoded array, once this version works?