A recipe for applications: Dataset & Web Components (Part 3)

R. S. Doiel,

Caltech Library, Digital Library Development

TBD

Welcome to “A recipe for applications”

Welcome everyone,

This presentation builds on what we built in the Part 2.

This workshop is focused on enhancing our application with Web Components from CL-web-components.

What we’ll learn

What we’ll do

Workshop: “A recipe for applications”

Getting started, Part III

You’ll need the following from Part II

Starting up our web service

datasetd recipes_api.yaml

Part 1.1: CL-Web-Components

https://github.com/caltechlibrary/CL-Web-Components

Part 1.2: Textarea CSV

Part 1.3: How to using Textarea CSV

See https://caltechlibrary.github.io/CL-Web-compenents/textarea-csv.html

Part 1.4: Using Textarea CSV in our web form

Next steps

  1. Retrieve textarea-csv.js
  2. Copy the component into your modules directory
  3. Update your HTML markup
  4. Update utils.js by adding a saveRecipe function
  5. Test

Part 1.5: Retrieving textarea-csv.js

On macOS or Linux.

curl -L -o htdocs/modules/textarea-csv.js \
  https://raw.githubusercontent.com/caltechlibrary/CL-web-components/refs/heads/main/textarea-csv.js

On Windows

irm `
  https://raw.githubusercontent.com/caltechlibrary/CL-web-components/refs/heads/main/textarea-csv.js `
  -Outfile ./htdocs/modules/textarea-csv.js

Part 1.6: Move into our modules directory

On macOS or Linux.

mv textarea-csv.js htdocs/modules

On Windows

move textarea-csv.js htdocs/modules

Part 1.7: Update your HTML markup

Wrap our ingredients textarea in a textarea-csv.

  <textarea-csv id="ingredients" name="ingredients"          
    title="ingredient,units (CSV data)" placeholder="flour,2 cups"
    cols="60"rows="10" 
    column-headings="Ingredients,Units" debug="true">
    <textarea id="ingredients" name="ingredients"
      title="ingredient,units (CSV data)" placeholder="flour,2 cups"
      cols="60"rows="10">
    </textarea>
  </textarea-csv>

Part 2.1: Textarea CSV and Web Forms

What happens when I press “save” button in the web form?

Part 2.2: Textarea CSV and Web Forms

We’re missing the script element that imports our component.

Include this in the head element of the page.

<script type="module" src="modules/textarea-csv.js" defer></script>

Try submitting the form again. What happens?

Part 2.3: Fixing web form submission

Part 2.3: Fixing web form submission

The utils.js needs asaveRecipe function.

macOS and Linux

curl -L -o htdocs/modules/utils.js \
  https://raw.githubusercontent.com/caltechlibrary/t2t3_dataset_web_apps/refs/heads/main/htdocs2/modules/utils.js

Windows

irm `
  https://raw.githubusercontent.com/caltechlibrary/t2t3_dataset_web_apps/refs/heads/main/htdocs2/modules/utils.js `
  -Output htdocs/modules/utils.js

Part 2.3: Fixing web form submission

Add the following at the page before the to process the submission.

<script type="module" defer>
  import { saveRecipe } from './modules/utils.js';
  const form = document.addEventListener('submit', saveRecipe);
</script>

Part 2.4: Test updates

Part 3: Exploring further, browser side

Do web components contradict the division of responsibilities?

Is it OK to require JavaScript in a web page?

Is progressive enhancement still relevant in 2025?

Part 3: Exploring further, server side

Part 3: What I’ve learned

Reference: Dataset

Reference: CL-web-components

textarea-csv
Wraps a textarea element and presents a editable table of cells
ul-a-to-z-list
Wraps a UL list and creates an A to Z list
table-sortable
Wraps an HTML table making it sort-able and filterable on a column

Reference: Web Components

Reference: Programming Languages

Reference: Data formats

Thank you for listening