Developer Guide

Tabs

https://cs4321.github.io/week6/time-management

https://cs4321.github.io/week7/networking

Time Management

The Eisenhower Matrix helps prioritise tasks by urgency and importance. Not everything urgent is important; not everything important is urgent.

The matrix divides tasks into four quadrants:

Do: Urgent and important. Deadlines, critical bugs. Handle immediately.
Decide: Not urgent but important. Planning, learning, refactoring. Schedule time for these.
Delegate: Urgent but not important. Pass to someone else if possible.
Delete: Don't do it. Neither urgent nor important. Busywork, distractions. Drop entirely.

%%{init: { 'theme': 'neutral' } }%%
quadrantChart
  x-axis High Urgency --> Low Urgency
  y-axis Low Importance --> High Importance
  quadrant-1 Decide
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete
  Critical bug fix: [0.15, 0.85]
  Project planning: [0.8, 0.8]
  Urgent email: [0.2, 0.75]
  Code refactoring: [0.75, 0.7]
  Updating internal wiki: [0.2, 0.25]
  Busywork: [0.8, 0.2]

Putting things to-do on a list frees your mind. But always question what is worth doing first.

HTTP Request-Response

Web interactions involve a client sending a request to a server, which may query a data source to return a structured response. Understanding this cycle is fundamental to building reliable web software.

The Client sends a GET /api/data request to the Server.
The Server validates the request token with the Auth service.
Once authorized, the Server queries the Database using a SQL SELECT statement.
The Database returns the matching rows to the Server.
The Server formats the data as JSON.
The Server replies to the Client with 200 OK and the JSON payload.

%%{init: { 'theme': 'neutral' } }%%
sequenceDiagram
  Client->>Server: GET /api/data
  Server->>Auth: Validate token
  Auth-->>Server: 200 Authorized
  Server->>Database: SELECT * FROM records
  Database-->>Server: rows[]
  Server->>Server: Format as JSON
  Server-->>Client: 200 OK, JSON payload

A 404 response means the resource was not found. A 500 response indicates a server-side error. Always handle both in your client code.

Not preloaded option (Default Panel Behavior)

Example Usage - Preloaded

CODE:

<cv-tabgroup group-id="fruit">
  <cv-tab tab-id="apple" header="Apple">
  
**Apple Information**

Apples are crisp, sweet fruits that come in many varieties. They are rich in fiber and vitamin C.

<box type="important" icon=":apple:">
    An apple a day keeps the doctor away!
</box>

  </cv-tab>
  <cv-tab tab-id="orange" header="Orange">
  
**Orange Information**

Oranges are citrus fruits known for their high vitamin C content and refreshing juice.

<box type="warning" icon=":orange:">
    The color orange was named after the fruit, not the other way around
</box>

  </cv-tab>
  <cv-tab tab-id="pear" header="Pear">
  
**Pear Information**

Pears are sweet, bell-shaped fruits with a soft texture when ripe. They're high in fiber and antioxidants.

<box type="success" icon=":pear:">
    Pears do not ripen on the tree; they ripen from the inside out after being picked. 
</box>

  </cv-tab>
</cv-tabgroup>

<cv-tabgroup group-id="fruit">
  <cv-tab tab-id="apple">
  <cv-tab-header>

:fa-solid-heart: Apple Types
</cv-tab-header>
<cv-tab-body>

Apple types include **Granny Smith** and the **Cosmic Crisp**.
</cv-tab-body>
</cv-tab>
<cv-tab tab-id="orange">
<cv-tab-header>

:fa-solid-circle: Orange Types
</cv-tab-header>
<cv-tab-body>

Orange types include the **Blood orange** and **Valencia orange**.
</cv-tab-body>
</cv-tab>
<cv-tab tab-id="pear">
<cv-tab-header>

:fa-solid-leaf: Pear Types
</cv-tab-header>
<cv-tab-body>
</cv-tabgroup>

OUTPUT:

Apple Information

Apples are crisp, sweet fruits that come in many varieties. They are rich in fiber and vitamin C.

🍎

An apple a day keeps the doctor away!

Orange Information

Oranges are citrus fruits known for their high vitamin C content and refreshing juice.

🍊

The color orange was named after the fruit, not the other way around

Pear Information

Pears are sweet, bell-shaped fruits with a soft texture when ripe. They're high in fiber and antioxidants.

🍐

Pears do not ripen on the tree; they ripen from the inside out after being picked.

Apple Types

Apple types include Granny Smith and the Cosmic Crisp.

Orange Types

Orange types include the Blood orange and Valencia orange.

Pear Types

Fruits Tabs

Apple Information

Apples are crisp, sweet fruits that come in many varieties. They are rich in fiber and vitamin C.

The standard Lorem Ipsum passage, used since the 1500s. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

🍎

An apple a day keeps the doctor away!

Orange Information

Oranges are citrus fruits known for their high vitamin C content and refreshing juice.

🍊

The color orange was named after the fruit, not the other way around

Pear Information

Pears are sweet, bell-shaped fruits with a soft texture when ripe. They're high in fiber and antioxidants.

🍐

Pears do not ripen on the tree; they ripen from the inside out after being picked.

Apple Types

Apple types include Granny Smith and the Cosmic Crisp.

Orange Types

Orange types include the Blood orange and Valencia orange.

Pear Types

Pear types include the Asian pear and the European pear

Color Schemes

The redesigned TabGroup and Tab use generic colors (currentColor, transparent, and opacity) and no longer hardcode white backgrounds. This allows the tabs to adapt perfectly to differently colored parent containers.

Red Background Test

Testing on a light red background.

Notice how the active tab has no white background block, and the text color inherits naturally!

Dark Navy Background Test

Testing on a dark navy background.

The generic border fallback `rgba(128,128,128,0.3)` and text inheritance keeps this legible.

Green Background Test

Testing on a light green background.

Tabs blend seamlessly into entirely different sections without needing specific `--cv-*` overwrites.