new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

web-components-tutorial

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Web Components tutorial overview and structure

The Carbon Design System provides a Web Components tutorial for creating Vanilla JS/HTML apps using Carbon web components. The tutorial is structured in five steps: Step 1 covers installing Carbon and creating a web app with the UI shell component; Step 2 covers building pages with the grid and various components; Step 3 covers using APIs to populate the data table with an external data source; Step 4 covers extending Carbon by creating custom components; Step 5 covers building and hosting the app in a production environment.

Web Components definition and benefits

Web components are native custom components based on standards that can be used in any modern browser with any JavaScript library or framework just like plain HTML elements.

Web components tutorial prerequisites

The tutorial requires knowledge of HTML, SCSS (CSS preprocessor), ECMAScript (JavaScript), GitHub, and Pnpm for dependency management. Pnpm should be installed prior to starting the tutorial as it is the default package manager used with create-vite.

Web components tutorial audience

The tutorial is intended for people with all amounts of web development experience. Developers who want to skip the tutorial and jump straight to code can go to the developers getting started page instead.

GitHub API data fetching with Octokit Core

To fetch repository data from GitHub's GraphQL API in a Carbon tutorial web components project, import Octokit and instantiate it: `import { Octokit } from '@octokit/core'; const octokitClient = new Octokit({});`. Then use the request method to fetch organization repositories: `const res = await octokitClient.request('GET /orgs/{org}/repos', { org: 'carbon-design-system', per_page: 75, sort: 'updated', direction: 'desc' });`

Fetching and mapping repository data

When fetching GitHub repository data with a 200 status response, map the results to extract specific fields for display: name from row.name, created date from new Date(row.created_at).toLocaleDateString(), updated date from new Date(row.updated_at).toLocaleDateString(), open issues from row.open_issues_count, stars from row.stargazers_count, and links from row.html_url and row.homepage.

Replacing skeleton with template content

To transition from a skeleton loading state to rendered data, use document.querySelector to locate the skeleton element and the template element, then call replaceWith(template.content.cloneNode(true)) to replace the skeleton with the cloned template content.

Inserting Carbon Web Components as innerHTML

Carbon Web Components can be inserted into the DOM as innerHTML using a string, just like standard HTML tags. For example, link components can be inserted using template literals: `keyEl.innerHTML = '<cds-link href="${url}">Label</cds-link>';`

Defer pagination event listeners with setTimeout

When setting up event listeners for pagination components, wrap the addEventListener calls in a setTimeout with at least 10ms delay to ensure the DOM has been updated before the listeners are attached.

Give your agent this brain