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

R. S. Doiel, rsdoiel@caltech.edu

Caltech Library, Digital Library Development

TBD

Welcome to “A recipe for applications”

Welcome everyone,

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

This workshop is focused on enhancing our application using Web Components.

What we’ll learn

What are Web Components?
Why use Web Components?
Anatomy of Web Components
Using Web Components

What we’ll do

Setup up a new static content directory for update our recipes_api.yaml
Create our first web component, “<hello-clock></hello-clock>”
Develop an A to Z web component, “<a-to-z-list></a-to-z-list>” (for listing our recipes)
Use the <csv-textarea></csv-textarea> from CL-web-components for our ingredient lists

Workshop: “A recipe for applications”

Follow along at https://caltechlibrary.github.io/t2t3_dataset_web_apps/presentation2.html
Download the presentation zip, https://github.com/caltechlibrary/t2t3_dataset_web_apps/releases
Make suggestions for improving the workshop at https://github.com/caltechlibrary/t2t3_dataset_web_apps/issues

Getting started, Part II

You’ll need the following from Part I

Terminal application
Text Editor
Web Browser
Dataset >= 2.3.0 (or latest release)
cURL or irm
The YAML, HTML and JavaScript you developed from Part I

Part 2.1: Setting up

Next steps

Save the old the htdocs directory under htdocs1
Save the old recipes_api.yaml as recipes_api1.yaml

Part 2.1: Copying htdocs and recipes_api.yaml

On macOS, Linux and Windows using WSL

cp -fR htdocs htdocs1
cp recipes_api.yaml recipes_api1.yaml

On Windows in PowerShell

copy -Recurse htdocs htdocs1
copy recipes_api.yaml recipes_api1.yaml

HOME WORK: Make recipes_api1.yaml work. Change the the htdocs attribute to point to htdocs1 directory. Compare version 1 with the results of the workshop. Discuss amoung friends.

Part 2.1: Starting up our web service

The web service should work last session,
We’ll be building on that browser side
- Ready to dive into Web Components?

datasetd recipes_api.yaml

Part 2.2: The “What” of Web Components

Web Components are a W3C standard to allowing you to extend HTML
- (Web Components inherit, include accessibility features)
A Web Component encapsulates the HTML, CSS and JavaScript use to create a new HTML Element
- (They encourage sensible code re-use)
Web Components are re-usable blocks of structure, function and presentation

Part 2.2: The “Why” of Web Components

Web components provide a sustainable way to extend HTML to fit our needs
They simplify use because they are expressed as HTML elements
Web components cleanly encapsulate HTML, CSS and JavaScript
- Their impact is constrained
- They are compatible with progressive enhancement techniques
- They can normalize user experience as a part of a design system

Part 2.2: The Anatomy of a Web Component

A component is implemented as a JavaScript class
- The class extends an existing HTML element (inheriting its features)
The class contains a connectedCallback() method
The component is “registered” using the customElements.define() method
- Example: customElements.define( 'hello-clock', HelloClock );

Part 2.2: The “Hello Clock” Web Component

Let’s create a web component called “hello-clock” (“htdocs/modules/hello-clock.js”)
“hello-clock” will extends “HTML element”
It will display a hello message and the time

<hello-clock>Hi There!</hello-clock>

This will display something like, “Hi There! 09:27:23 GMT-0700 (Pacific Daylight Time)”.

Part 2.2: “hello-clock.js” defines the web component

Create htdocs/modules/hello-clock.js

// Define our new element as a class
class HelloClock extends HTMLElement {
  // Hook used by browser to instantiate the element in the page
  connectedCallback() {
    // Get the current time as an object
    const d = new Date();
    // Update the inner text to include our time string
    this.textContent = `${this.textContent} ${d.toTimeString()}`.trim();
  }
}
// This is how the browsers learns to use the new HTML element.
customElements.define( 'hello-clock', HelloClock );

Part 2.2: Now lets create an HTML Page using “Hello Clock”

htdocs/hello-clock.html

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Hello Clock Example</title>
        <link rel="style" href="css/style.css">
        <script type="module" src="modules/hello-clock.js"></script>
    </head>
    <body>
        <h1>Hello Clock Example</h1>
        <hello-clock>Hi there!</hello-clock>
    </body>
</html>

Part 2.2: Fire up our web service and test “Hello Clock”

Point your web browser at http://localhost:8001/hello-clock.html
Open your developer tools and reload the page
Notice the logs provided by Dataset Web Service

Part 2.2: Congratulations

You’ve built your first Web Component!!!!

Let’s take a quick break and stretch before moving forward

Part 2.3: Building an A to Z list web component

Q: What does the A to Z list web component do?

A: Wraps a standard UL list providing A to Z navigation.

Part 2.3: Building an A to Z list web component

Create an HTML file for testing, htdocs/a-to-z-list.html
Create our Web Component, htdocs/modules/a-to-z-list.js

macOS and Linux:

touch htdocs/a-to-z-list.html htdocs/modules/a-to-z-list.js

Windows:

New-Item -Path htdocs/a-to-z-list.html ; New-Item htdocs/modules/a-to-z-list.js

Part 2.3: Building an A to Z list web component

Here’s the HTML we’ll use for our test page, a-to-z-list.html.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>A to Z List Clock Example</title>
        <link rel="style" href="css/style.css">
        <script type="module" src="modules/a-to-z-list.js"></script>
    </head>
    <body>
        <h1>A to Z List Example</h1>

        <a-to-z-list>
            <ul>
                <li>Alex</li> <li>Betty</li> <li>Connor</li> <li>David</li>
                <li>Edwina</li> <li>Fiona</li> <li>George</li> <li>Harry</li>
                <li>Ishmael</li> <li>Leonardo</li> <li>Millie</li> <li>Nellie</li>
                <li>Ollie</li> <li>Petra</li> <li>Quincy</li> <li>Rowino</li> <li>Selvina</li>
                <li>Terry</li> <li>Ulma</li> <li>Victorio</li> <li>Willamina</li> <li>Xavier</li>
                <li>Zoran</li>
            </ul>
        </a-to-z-list>
    </body>
</html>

Part 2.3: Building an A to Z list web component

(source a-to-z-list_v0.js)

Start out with a minimal Class definition and customElement definition

export class AToZList extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
  }
}
customElements.define('a-to-z-list', AToZList);

NOTE: the constructor and that the web component does do any thing yet. Open the web page.

Part 2.3: Introducing Shadow DOM

(source a-to-z-list_v1.js)

You can build your web component in the Shadow DOM that way you can sprinkle it into your document as needed. We need to include that in our constructor.

export class AToZList extends HTMLElement {
  constructor() {
    super();
    // This next line engages the Shadow DOM
    this.attachShadow({ mode: 'open' });
  }
  connectedCallback() {
  }
}
customElements.define('a-to-z-list', AToZList);

Reload you web page, what does does it look like?

Part 2.3: What do we want the callback to do?

(source a-to-z-list_v2.js)

We use the connectedCallback() method to to call a render method. This is what makes our Shadow DOM take control.

export class AToZList extends HTMLElement {
  constructor() { super(); this.attachShadow({ mode: 'open' }); }

  connectedCallback() { this.render(); }

  render() {
    const template = document.createElement('template');
    template.innerHTML = `<style>
        /* Basic styles */
        menu { list-style-type: none; padding: 0; }
      </style>
      <menu id="menu"></menu>
      <div id="list-container">This is where our A to List will go</div>`;

    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
customElements.define('a-to-z-list', AToZList);

What happened in our web page?

Part 2.3: Basic Structure of our component using Shadow DOM

(source a-to-z-list_v2.js)

export class AToZList extends HTMLElement {
  constructor() { super(); this.attachShadow({ mode: 'open' }); }

  connectedCallback() { this.render(); }

  render() {
    const template = document.createElement('template');
    template.innerHTML = `<style>
        /* Basic styles */
        menu { list-style-type: none; padding: 0; }
      </style>
      <menu id="menu"></menu>
      <div id="list-container"></div>`;

    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
customElements.define('a-to-z-list', AToZList);

Part 2.3: Display Items

(source a-to-z-list_v3.js)

Objective: Display the list items in the component without any categorization.

  render() {
    const template = document.createElement('template');
    template.innerHTML = `<style>
        /* Basic styles */
        menu { list-style-type: none; padding: 0; }
      </style>
      <menu id="menu"></menu>
      <div id="list-container"></div>`;

    this.shadowRoot.appendChild(template.content.cloneNode(true));

    const listContainer = this.shadowRoot.querySelector('#list-container');
    const ulElement = this.querySelector('ul');

    if (ulElement) {
      listContainer.appendChild(ulElement.cloneNode(true));
    }
  }

What happened in our web page?

Part 2.3: Categorize Items by Letter

(source a-to-z-list_v4.js)

Objective: Organize items by their starting letter.

render() {
  const template = document.createElement('template');
  template.innerHTML = `<style>
      /* Basic styles */
      menu { list-style-type: none; padding: 0; }
      .letter-section { list-style-type: none; }
    </style>
    <menu id="menu"></menu>
    <div id="list-container"></div>`;

  this.shadowRoot.appendChild(template.content.cloneNode(true));

  const listContainer = this.shadowRoot.querySelector('#list-container');
  const ulElement = this.querySelector('ul');

  if (!ulElement) return;

  const items = Array.from(ulElement.querySelectorAll('li'));
  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const sections = {};

  items.forEach(item => {
    const firstLetter = item.textContent.trim()[0].toUpperCase();
    if (!sections[firstLetter]) sections[firstLetter] = [];
    sections[firstLetter].push(item);
  });
  Object.keys(sections).forEach(letter => {
    // NOTE: Menu setup will go here
    const section = document.createElement('ul');
    section.classList.add('letter-section');
    section.id = `section-${letter}`;

    sections[letter].forEach(item => {
      section.appendChild(item.cloneNode(true));
    });

    listContainer.appendChild(section);
  });
}

Part 2.3: Add Navigation Menu

(source a-to-z-list_v5.js)

Objective: Add a navigation menu to jump to sections by letter.

render() {
  // Previous code remains the same until the sections loop but we
  // need to grab the menu element in the template.
  const menu = this.shadowRoot.querySelector('#menu');

  Object.keys(sections).forEach(letter => {
    const menuItem = document.createElement('li');
    const menuLink = document.createElement('a');
    menuLink.href = `#section-${letter}`;
    menuLink.textContent = letter;
    menuItem.appendChild(menuLink);
    menu.appendChild(menuItem);

    // Rest of the section linking code goes here
  });
}

Part 2.3: Complete our section linking

(source a-to-z-list_v6.js)

  // Section linking inside the `Object.keys(sections).forEach(letter => {` loop
  const section = document.createElement('ul');
      section.classList.add('letter-section');
      section.id = `section-${letter}`;

      sections[letter].forEach(item => {
        section.appendChild(item.cloneNode(true));
      });

      listContainer.appendChild(section);
  });

Part 2.3: Add Back to Menu Link

(source a-to-z-list_v6.js)

Objective: Implement “Back to Menu” link.

render() {
  // This code goes below the `Object.keys(section).foreach( ...` loop

  const backToMenuLink = this.shadowRoot.querySelector('.back-to-menu');
  if (backToMenuLink) {
    backToMenuLink.addEventListener('click', (event) => {
      event.preventDefault();
      this.scrollToSection(menu);
    });
  }

  // Add event listeners to menu links for smooth scrolling
  const menuLinks = this.shadowRoot.querySelectorAll('menu li a');
  menuLinks.forEach(link => {
    link.addEventListener('click', (event) => {
      event.preventDefault();
      const targetSection = this.shadowRoot.querySelector(link.getAttribute('href'));
      this.scrollToSection(targetSection);
    });
  }); 
}

Part 2.3: Improve Scrolling

(source a-to-z-list_v6.js)

Objective: Implement smooth scrolling by providing a new method

// This is a new method, it can go after the render method in our class
scrollToSection(section) {
  const yOffset = -100;
  const y = section.getBoundingClientRect().top + window.pageYOffset + yOffset;

  window.scrollTo({ top: y, behavior: 'smooth' });
}

Part 2.3: Styling

(source a-to-z-list_v7.js)

Objective: Add final styling and conditional rendering based on attributes.

render() {
  const template = document.createElement('template');
  template.innerHTML = `
    <style>
      menu { list-style-type: none; padding: 0; }
      menu li { display: inline; margin-right: 10px; }
      .letter-section { list-style-type: none; }
      .letter-section li { text-decoration: none; font-weight: none; }
      .back-to-menu { display: block; margin-top: 20px; }
    </style>
    <menu id="menu"></menu>
    <div id="list-container"></div>
    ${this.hasAttribute('long') ? '<a class="back-to-menu" href="#menu">Back to Menu</a>' : ''}
  `;

  // Rest of the render method remains the same
}

Part 2.3: A final working A to Z list

(source a-to-z-list.js)

/**
 * a-to-z-list.js, this wraps a standard UL list providing A to Z navigation list
 */
export class AToZList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        menu { list-style-type: none; padding: 0; }
        menu li { display: inline; margin-right: 10px; }
        .letter-section { list-style-type: none; }
        .letter-section li { text-decoration: none; font-weight: normal; }
        .back-to-menu { display: block; margin-top: 20px; }
      </style>
      <menu id="menu"></menu>
      <div id="list-container"></div>
      ${this.hasAttribute('long') ? '<a class="back-to-menu" href="#menu">Back to Menu</a>' : ''}
    `;

    this.shadowRoot.appendChild(template.content.cloneNode(true));

    const listContainer = this.shadowRoot.querySelector('#list-container');
    const menu = this.shadowRoot.querySelector('#menu');

    const ulElement = this.querySelector('ul');
    if (!ulElement) return;

    const items = Array.from(ulElement.querySelectorAll('li'));
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const sections = {};

    items.forEach(item => {
      const firstLetter = item.textContent.trim()[0].toUpperCase();
      if (!sections[firstLetter]) {
        sections[firstLetter] = [];
      }
      sections[firstLetter].push(item);
    });

    alphabet.split('').forEach(letter => {
      if (sections[letter]) {
        const menuItem = document.createElement('li');
        const menuLink = document.createElement('a');
        menuLink.href = `#section-${letter}`;
        menuLink.textContent = letter;
        menuLink.addEventListener('click', (event) => {
          event.preventDefault();
          const targetSection = this.shadowRoot.querySelector(`#section-${letter}`);
          this.scrollToSection(targetSection);
        });
        menuItem.appendChild(menuLink);
        menu.appendChild(menuItem);

        const section = document.createElement('ul');
        section.classList.add('letter-section');
        section.id = `section-${letter}`;
        const sectionHeading = document.createElement('li');
        const sectionHeadingLink = document.createElement('a');
        sectionHeadingLink.href = `#menu`;
        sectionHeadingLink.textContent = letter;
        sectionHeadingLink.addEventListener('click', (event) => {
          event.preventDefault();
          this.scrollToSection(menu);
        });
        sectionHeading.appendChild(sectionHeadingLink);
        section.appendChild(sectionHeading);

        sections[letter].forEach(item => {
          const clonedItem = item.cloneNode(true);
          section.appendChild(clonedItem);
        });
        listContainer.appendChild(section);
      }
    });

    const backToMenuLink = this.shadowRoot.querySelector('.back-to-menu');
    if (backToMenuLink) {
      backToMenuLink.addEventListener('click', (event) => {
        event.preventDefault();
        this.scrollToSection(menu);
      });
    }
  }

  scrollToSection(section) {
    const yOffset = -100;
    const y = section.getBoundingClientRect().top + window.pageYOffset + yOffset;

    window.scrollTo({
      top: y,
      behavior: 'smooth'
    });
  }
}

customElements.define('a-to-z-list', AToZList);

Part 2.3: You’ve created two web components

The trivial hello-clock
The more complex a-to-z-list

Congratulations! Time to update our application.

Part 2.4: Using our A to Z list

Modify is htdocs/index.html
Wrap the ul list with our <a-to-z-list></a-to-z-list>
Add our component module <script type="model" src="modules/a-to-z-list.js"></script>
Test, what happens on page reload?

Part 2.4: Integrating the A to Z list

The web component internals are opaque to the outside elements
our index_recipes.js functions don’t see the internal UL list now
What do we do?

Part 2.4, Approaches

Pre-render the UL list (add middleware)
Merge the index_recipes into the web component module
Modify the web component, Modify index_recipes so they play nice

Part 2.4, Which approach?

Context, re-use and complexity are our constraints
- Is this problem a “common case”? Is there an easy solution?
- Is an increase in complexity worth supporting the common case?
- Do we drop the common case for unique element and build in a index_recipes function?

Before picking a path review our existing codebase against our constraints

Part 2.4: Think about the innerHTML, look at `index_recipes.js`

listRecipes(): Gets the outer element, retrieves data and then invokes populateUL()
populateUL(): Populates the UL lists with the data

Are either easy to adapt to our component?

Part 2.4: Review `listRecipes()`

It could get the handle for the <a-to-z-list></a-to-z-list>
listRecipes() triggers retrieving the data
It invokes populateUL() which populates that innerHTML!

We can keep our component general with by adapting how listRecipes() works

Part 2.4: Taking advantage of inheriting HTML element

(source index_recipes_v2.js)

async function listRecipes() {
 const aToZList = document.querySelector('a-to-z-list');
 console.log(aToZList);
 const ul = document.createElement('ul');
 const data = await getRecipes();
 populateUL(ul, data);
 aToZList.innerHTML = ul.outerHTML;
 // NOTE: we need to trigger aToZList render method still.
 // Feel ugly?
 aToZList.render()
}

What does the updates look like?

Part 2.4: Problems?

Is ordering is weird? Why?
Do we always have to called aToZList.render() to update?

Part 2.4: Ordering problem

Get rid of dummy text “Recipe name goes here”

Part 2.4: Adding an event handler to our component

Which event is triggered with the line aToZList.innerHTML = ul.outerHTML?

Update our component to use a mutation observer
Remove our render call from index_recipes.js.

(source a-to-z-list_v8.js) (source index_recipes_v3.js)

Part 2.4: Lessons learned

Remember that our web components, inherit from HTML, we can treat them like HTML elements
Display elements can mutate, we should support mutation even when implementing display only components
- The JavaScript defining a web component extends HTML, that should be the focus
- The page level JavaScript is about adding behaviors at the page level
- Balance the areas of responsibilities

Part 2.5: Introducing CSV Textarea Web Component, `<csv-textarea></csv-textarea>`

What does <csv-textarea></csv-textara> do?
- Typing in comma separated values is cumbersome, can me improve that?
- The web component presents a table view based on the CSV content in the wrapped textarea
- If the web browser has JavaScript disabled the textarea still works for typing in comma delimited data

Part 2.5: Using the CSV Textarea Web Component, `<csv-textarea></csv-textarea>`

Next steps

Go to CL-web-components

csv-textarea.js

Copy the component into your modules directory
Update your HTML markup
Update utils.js by adding a saveRecipe function
Test

Part 2.5: Retrieving csv-textarae.js

On macOS or Linux.

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

On Windows

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

Part 2.5: Using the CSV Textarea Web Component, `<csv-textarea></csv-textarea>`

What happens when I press “save” button?

Does the submit process need change?
What are the options?
- submit as a URL encoded document?
- submit as JSON encoded document?

Part 2.5: 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.5: Fixing web form submission

We need an event listener to trigger it
- Which element?
- What event?

Part 2.5: Update the HEAD of edit_replace.html

Include our web component module in the head.

  <head>
    <title>A recipe collection</title>
    <link rel="style" href="css/style.css">
    <script type="module" src="modules/csv-textarea.js"></script>
    <script type="module" src="modules/edit_recipe.js"></script>
  </head>

Part 2.5: Update the HTML for edit_recipe.html

Wrap our ingredients textarea in a csv-textarea.

  <csv-textarea 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>
  </csv-textarea>

Part 2.5: Update the HTML for edit_recipe.html

Add the following at the bottom of the page before the </body>.

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

Part 2.5: Test updates

What issues do you find?
How could we improve this?

Part 3: Exploring further, browser side

The traditional division of responsibilities in the browser is
- HTML for structured data markup
- CSS for visual design and layout
- JavaScript to orchestrate behaviors

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

Our application pushed processing browser side
- When is this a good idea?
- When is this an bad idea?
Could our web app be used to render a static public site?
- How would that be done?
What if the web service needs to be public facing?

Part 3: What I’ve learned

Build with the grain of the web
- Building blocks are HTML, CSS, JavaScript, Web Components and HTTP protocol
Take advantage of localhost
Target production by building in layers
- access control: front end web service (Apache+Shibboleth, NginX+Shibboleth)
- data validation: middle ware (localhost: Go, TypeScript or Python)
- object storage: Dataset (localhost)

Reference: Dataset

Reference: CL-web-components

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

Getting help with CL-web-components, https://github.com/caltechlibrary/CL-web-components/issues.

Reference: Web Components

Reference: Programming Languages

HTML5, structured content
CSS, layout and style
JavaScript, behaviors and web components
SQL and SQLite
- SQLite Tutorial
- Or typing into your favorite LLM, but be prepared to validate the recommendations
MDN

Reference: Data formats

Thank you for listening

View presentations:
- https://caltechlibrary.github.io/t2t3_dataset_web_apps/presentation1.html
- https://caltechlibrary.github.io/t2t3_dataset_web_apps/presentation2.html
View the repository: https://github.com/caltechlibrary/t2t3_dataset_web_apps
Comment on this presentation: https://github.com/caltechlibrary/t2t3_dataset_web_apps/issues
Author: R. S. Doiel, mailto:rsdoiel@caltech.edu

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

Welcome to “A recipe for applications”

What we’ll learn

What we’ll do

Workshop: “A recipe for applications”

Getting started, Part II

You’ll need the following from Part I

Part 2.1: Setting up

Next steps

Part 2.1: Copying htdocs and recipes_api.yaml

Part 2.1: Starting up our web service

Part 2.2: The “What” of Web Components

Part 2.2: The “Why” of Web Components

Part 2.2: The Anatomy of a Web Component

Part 2.2: The “Hello Clock” Web Component

Part 2.2: “hello-clock.js” defines the web component

Part 2.2: Now lets create an HTML Page using “Hello Clock”

Part 2.2: Fire up our web service and test “Hello Clock”

Part 2.2: Congratulations

You’ve built your first Web Component!!!!

Part 2.3: Building an A to Z list web component

Part 2.3: Building an A to Z list web component

Part 2.3: Building an A to Z list web component

Part 2.3: Building an A to Z list web component

Part 2.3: Introducing Shadow DOM

Part 2.3: What do we want the callback to do?

Part 2.3: Basic Structure of our component using Shadow DOM

Part 2.3: Display Items

Part 2.3: Categorize Items by Letter

Part 2.3: Add Navigation Menu

Part 2.3: Complete our section linking

Part 2.3: Add Back to Menu Link

Part 2.3: Improve Scrolling

Part 2.3: Styling

Part 2.3: A final working A to Z list

Part 2.3: You’ve created two web components

Part 2.4: Using our A to Z list

Part 2.4: Integrating the A to Z list

Part 2.4, Approaches

Part 2.4, Which approach?

Part 2.4: Think about the innerHTML, look at index_recipes.js

Part 2.4: Review listRecipes()

Part 2.4: Taking advantage of inheriting HTML element

Part 2.4: Problems?

Part 2.4: Ordering problem

Part 2.4: Adding an event handler to our component

Part 2.4: Lessons learned

Part 2.5: Introducing CSV Textarea Web Component, <csv-textarea></csv-textarea>

Part 2.5: Using the CSV Textarea Web Component, <csv-textarea></csv-textarea>

Part 2.5: Retrieving csv-textarae.js

Part 2.5: Using the CSV Textarea Web Component, <csv-textarea></csv-textarea>

Part 2.5: Fixing web form submission

Part 2.5: Fixing web form submission

Part 2.5: Update the HEAD of edit_replace.html

Part 2.5: Update the HTML for edit_recipe.html

Part 2.5: Update the HTML for edit_recipe.html

Part 2.5: Test updates

Part 3: Exploring further, browser side

Part 3: Exploring further, server side

Part 3: What I’ve learned

Reference: Dataset

Reference: CL-web-components

Reference: Web Components

Reference: Programming Languages

Reference: Data formats

Thank you for listening

Part 2.4: Think about the innerHTML, look at `index_recipes.js`

Part 2.4: Review `listRecipes()`

Part 2.5: Introducing CSV Textarea Web Component, `<csv-textarea></csv-textarea>`

Part 2.5: Using the CSV Textarea Web Component, `<csv-textarea></csv-textarea>`

Part 2.5: Using the CSV Textarea Web Component, `<csv-textarea></csv-textarea>`