title: "Cutting Through JavaScript RegEx 🍕" subtitle: "🚫🍍 /[^pineapple]/" slug: cutting-through-javascript-regex tags: javascript, regex, tutorial cover: domain: publishAs:

It's been a while since my last post. I've gotten back into doing coding challenges recently and although I'm not an expert on regular expressions by any means, I assumed that everyone knew about them. I've been hosting sessions every night on Discord where people meet up to do coding challenges live and much to my surprise many people had little to no experience with them.

I get it, regular expressions look intimidating at first glance. They look like someone smashed their keyboard and called it code. But once you understand the syntax, they're actually pretty logical and useful.

So what are regular expressions? They're a way to define patterns in text. You can use them to search for specific sequences of characters, validate input, or transform strings based on rules you define. Regular expressions exist in many programming languages, but we're going to focus on how they work in JavaScript.

In the real world, developers use regex for things like validating email addresses and passwords, finding and replacing text in documents, parsing large amounts of data, and cleaning up user input before it hits your database. I would have been at my wits' end without regular expressions while parsing data in YP Scraper and the built-in scraper for DevLeads.

The key to understanding regular expressions is recognizing that they're all about patterns. Once you know how to describe the pattern you're looking for, the rest falls into place. In this post, I'm going to walk you through how to build those patterns using the most common syntax and features you'll actually use. Ready? Let's go.

Creating Regular Expressions

A regular expression in JavaScript is created using forward slashes with your pattern in between. It looks like this: /pattern/. You can also create one using the RegExp constructor like new RegExp('pattern'), which is useful when you need to build a pattern dynamically. For example, if you're getting a search term from user input or an API response and need to create a regex from that returned value, the constructor lets you pass in variables. For most cases, though, you'll use the literal notation with slashes because it's cleaner and easier to read.

Literal Patterns

The simplest pattern you can match is literal text. If you want to find the word "pizza" in a string, your regex is just /pizza/. It matches exactly what you write. So /sauce/ matches "sauce", /SAUCE/ matches "SAUCE", and so on. This works great when you know exactly what you're looking for, but things get more interesting when you need flexibility.

The OR Operator

That's where the OR operator comes in. The pipe symbol | lets you match one pattern or another. So /thin-crust|deep-dish/ will match either "thin-crust" or "deep-dish" in your string. You can chain as many options as you need, like /mozzarella|provolone|parmesan|ricotta/ to match any of those cheeses. This is handy when you have a few specific variations you want to catch.

Character Classes

Character classes give you even more flexibility. When you put characters inside square brackets like [aeiou], it matches any single character from that set. So /[aeiou]/ matches any vowel, and /[0-9]/ matches any single digit. You can also use ranges with a hyphen. /[a-z]/ matches any lowercase letter, /[A-Z]/ matches any uppercase letter, and /[0-9]/ matches any digit from zero to nine. You can combine ranges too, like /[a-zA-Z0-9]/ to match any letter regardless of case.

Negative Character Classes

You can invert a character class by putting an up-caret ^ right after the opening bracket. So [^aeiou] matches any character except vowels. Notice that the up-caret here means "NOT" because it's inside the brackets. This is important because the same ^ symbol means something completely different when it's outside brackets, which we'll get to in a bit. So [^0-9] matches any character that isn't a digit, and [^.,!?] matches any character that isn't common punctuation.

Escape Sequences

Escape sequences are shorthand for common character classes. Instead of writing [0-9] every time you want to match a digit, you can use \d. Instead of [a-zA-Z0-9_] for all word (alphanumeric characters plus the underscore '_'), you use \w. And \s matches any whitespace character like spaces, tabs, carriage returns, or newlines. Each of these has an inverse too. \D matches anything that's not a digit, \W matches anything that's not a word character, and \S matches anything that's not whitespace. There are individual ones like \n for newlines, \t for tabs, and \r for carriage returns, but the digit, word, and whitespace shortcuts are the ones you'll reach for most often.

Quantifiers

Quantifiers let you specify how many times a pattern should repeat. The asterisk * matches zero or more occurrences, so /o*/ matches zero or more o's in "book". The plus sign + matches one or more, so /o+/ requires at least one o. The question mark ? makes something optional by matching zero or one occurrence. You can also be specific with curly braces. /\d{3}/ matches exactly three digits (like an area code), /\d{2,4}/ matches between two and four digits, and /\d{2,}/ matches two or more digits. These quantifiers apply to whatever comes immediately before them, whether that's a single character, a character class, or a group.

By default, quantifiers are greedy. They match as much as possible. If you have the string "<span>Large $18</span><span>Medium $14</span>" and use the pattern /<span>.*<\/span>/, it matches the entire string from the first opening tag to the last closing tag, not just the first span. This happens because .* grabs everything it can. You can make a quantifier lazy by adding a question mark after it. So /<span>.*?<\/span>/ matches as little as possible, stopping at the first closing tag it finds. The lazy version matches "<span>Large $18</span>" and then "<span>Medium $14</span>" separately instead of treating them as one big match.

const greedy = /<span>.*<\/span>/;
const lazy = /<span>.*?<\/span>/;
const menu = "<span>Large $18</span><span>Medium $14</span>";

menu.match(greedy); // ["<span>Large $18</span><span>Medium $14</span>"]
menu.match(lazy); // ["<span>Large $18</span>"]

Anchors

Anchors let you match positions in a string rather than characters. The up-caret ^ matches the start of a string, and the bling symbol $ matches the end. So /^Large/ only matches "Large" if it's at the beginning of the string, and /pizza$/ only matches "pizza" if it's at the end. You can combine them like /^Special: .+ pizza$/ to match lines that start with "Special:" and end with "pizza". Remember, this up-caret is outside the brackets, so it means "start of string" here, not "NOT" like it does inside character classes.

Capture Groups

Parentheses create capture groups, which do two things. First, they let you group parts of your pattern together so you can apply quantifiers to the whole group. Second, they capture the matched text so you can reference it later. So /(yum)+/ matches "yum", "yumyum", "yumyumyum" and so on. We'll see how to use these captured groups with methods like replace() later on.

You can also reference captured groups within the regex itself using backreferences. The syntax \1 refers to the first capture group, \2 to the second, and so on. This is useful when you need to match repeated patterns.

const pattern = /(\w+)\s+\1/;
pattern.test("pizza pizza"); // true
pattern.test("pizza pasta"); // false

You can also name your capture groups using the syntax (?<name>pattern). This makes your regex more readable and lets you reference groups by name instead of by number. For back references with named groups, use \k<name>.

const datePattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

Sometimes you want the grouping but don't need to capture the text. That's where non-capturing groups come in. You write them as (?:pattern). So (?:https?) groups the pattern for optional matching but doesn't save the match for later use.

Lookaheads and Lookbehinds

Lookaheads and lookbehinds let you match a pattern only if it's followed or preceded by another pattern, without including that other pattern in the match.

A positive lookahead (?=pattern) checks that what comes next matches the pattern. So /\d+(?=oz)/ matches a digit only if it's followed by "oz", but the "oz" itself isn't part of the match.

A negative lookahead (?!pattern) does the opposite, matching only if what comes next doesn't match the pattern. Lookbehinds work the same way but check what comes before.

A positive lookbehind (?<=pattern) matches only if preceded by the pattern, and a negative lookbehind (?<!pattern) matches only if not preceded by it. These are useful when you need to match something based on context without consuming the surrounding characters.

Flags

Flags modify how the entire regex behaves. You add them after the closing slash. The g flag stands for global and makes the pattern match all occurrences in a string instead of stopping after the first one.

The i flag makes the match case-insensitive, so /pizza/i matches "pizza", "Pizza", "PIZZA", and any other variation.

The m flag is for multiline mode, which changes how the ^ and $ anchors work. Instead of matching only the start and end of the entire string, they match the start and end of each line. So /^Special:/m will match "Special:" at the beginning of any line in a multiline string, not just the very first line.

The s flag enables dotAll mode, which makes the dot . match newline characters in addition to everything else. Normally . matches any character except newlines, so /First.*Second/ wouldn't match across lines. With the s flag, /First.*Second/s will match even if "First" and "Second" are on different lines.

You can combine flags like /pattern/gims to use multiple at once.

Using Regular Expressions with JavaScript Methods

Now that we understand how to build patterns, let's look at how to actually use them with JavaScript methods.

RegExp.prototype.test()

The test() method checks if a pattern exists in a string and returns true or false. It takes a string as its argument and belongs to the regex itself, not the string. Here's how it works:

const pattern = /\d+/;
pattern.test("16 inch pizza"); // true
pattern.test("Large pizza"); // false

This is straightforward when you're just checking for a match, but there's a gotcha you need to know about. If you use the g flag with test(), the regex object maintains state between calls. It keeps track of where it left off using an internal lastIndex property on the regex itself.

const pattern = /\d+/g;
pattern.test("Deliver to 123 Main St Apt 4"); // true
console.log(pattern.lastIndex); // 14
pattern.test("Deliver to 123 Main St Apt 4"); // true
console.log(pattern.lastIndex); // 28
pattern.test("Deliver to 123 Main St Apt 4"); // false
console.log(pattern.lastIndex); // 0 (wraps back to start)

Each call picks up where the previous one left off. This can cause unexpected results if you're testing the same regex against different strings or reusing a regex object. If you need to reset it, set lastIndex back to zero manually.

RegExp.prototype.exec()

The exec() method searches for a match and returns detailed information about it, including capture groups. It's called on a regex and takes a string as its argument. Like test(), it belongs to the regex object.

const pattern = /(pepperoni|mushrooms|sausage|olives|peppers)/;
const result = pattern.exec("I want mushrooms on my pizza");
console.log(result);
// ["mushrooms", "mushrooms", index: 7, input: "I want mushrooms on my pizza"]

When you have multiple capture groups, they're all included in the result array:

const pattern = /(large|medium|small)-(pepperoni|mushrooms|sausage)/;
const result = pattern.exec("Order: large-pepperoni");
console.log(result);
// ["large-pepperoni", "large", "pepperoni", index: 7, input: "Order: large-pepperoni"]

With named capture groups, the matched groups are accessible through the groups property:

const pattern = /\$(?<discount>\d+) off (?<size>large|medium|small)/;
const result = pattern.exec("Save $5 off large pizzas");
console.log(result.groups);
// { discount: "5", size: "large" }

Like test(), if you use the g flag with exec(), it maintains state and returns subsequent matches on repeated calls:

const pattern = /\d+/g;
pattern.exec("2 large 3 medium"); // ["2", index: 0, ...]
console.log(pattern.lastIndex); // 1
pattern.exec("2 large 3 medium"); // ["3", index: 8, ...]
console.log(pattern.lastIndex); // 9
pattern.exec("2 large 3 medium"); // null
console.log(pattern.lastIndex); // 0

String.prototype.match()

The match() method searches a string for a pattern and returns information about the matches. It's called on a string and takes a regex as its argument. Without the g flag, it returns an array with the first match, any capture groups, the index, and the input string.

const pattern = /(\d+)\s+(cups?|tsp|tbsp|oz)/;
const result = "Mix 2 cups flour with other ingredients".match(pattern);
console.log(result);
// ["2 cups", "2", "cups", index: 4, input: "Mix 2 cups flour with other ingredients", groups: undefined]

With the g flag, it returns an array of all matches but doesn't include capture groups or other details.

const pattern = /\d+/g;
const result = "Small $12, Medium $16, Large $20, XL $24".match(pattern);
console.log(result); // ["12", "16", "20", "24"]

If you need both global matching and capture groups, use matchAll() instead.

String.prototype.matchAll()

The matchAll() method returns a Regular Expression String Iterator of all matches with their capture groups. It requires the g flag on the regex. This is useful when you need detailed information about every match. To use array methods like .map(), .filter(), .forEach() directly, you can convert it to an array using Array.from() or spread syntax.

const pattern = /(\w+):\s*(\d+)\s*oz/g;
const text = "Mozzarella: 8 oz, Parmesan: 2 oz, Provolone: 4 oz";
const matches = [...text.matchAll(pattern)];

matches.forEach((match) => {
  console.log(`Full match: ${match[0]}`);
  console.log(`Cheese: ${match[1]}`);
  console.log(`Amount: ${match[2]}`);
  console.log(`Index: ${match.index}`);
});

With named capture groups, you can access them through the groups property.

const pattern = /(?<cheese>\w+):\s*(?<amount>\d+)\s*oz/g;
const text = "Mozzarella: 8 oz, Parmesan: 2 oz, Provolone: 4 oz";
const matches = [...text.matchAll(pattern)];

matches.forEach((match) => {
  console.log(`${match.groups.cheese}: ${match.groups.amount}`);
});
// "Mozzarella: 8"
// "Parmesan: 2"
// "Provolone: 4"

String.prototype.search()

The search() method returns the index of the first match or -1 if there's no match. It's called on a string and takes a regex as its argument. The g flag doesn't affect this method since it only returns the first match's position.

const pattern = /stuffed/;
const result = "Hand-tossed with a stuffed crust edge".search(pattern);
console.log(result); // 23

This is useful when you just need to know where something is without caring about what was matched or any capture groups.

String.prototype.replace() and String.prototype.replaceAll()

The replace() method searches for a pattern and replaces it with a new string. It's called on a string and takes two arguments: the regex pattern and the replacement. Without the g flag, it only replaces the first match.

const pattern = /pepperoni/;
const result = "Add peppers, extra cheese, double pepperoni".replace(
  pattern,
  "sausage",
);
console.log(result); // "Add peppers, extra cheese, double sausage"

With the g flag, it replaces all matches.

const pattern = /medium/g;
const result = "Table 5 ordered medium, Table 8 wants medium too".replace(
  pattern,
  "large",
);
console.log(result); // "Table 5 ordered large, Table 8 wants large too"

You can reference capture groups in the replacement string using dollar signs. $1 refers to the first capture group, $2 to the second, and so on.

const pattern = /(\d+)\s+(pizzas?|salads?)/g;
const result = "Need 3 pizzas and 2 salads".replace(pattern, "$2: $1");
console.log(result); // "Need pizzas: 3 and salads: 2"

With named capture groups, you use $<name> syntax.

const pattern = /(?<quantity>\d+)\s+(?<item>pizzas?|salads?)/g;
const result = "Need 3 pizzas and 2 salads".replace(
  pattern,
  "$<item>: $<quantity>",
);
console.log(result); // "Need pizzas: 3 and salads: 2"

The second argument can also be a callback function that gets called for each match. The function receives the full match, any capture groups, the index, and the full string. Whatever you return becomes the replacement.

const pattern = /\d+/g;
const discount = 0.25; // 25% off
const result = "Pepperoni $18, Veggie $16, Supreme $22".replace(
  pattern,
  (match) => {
    return parseInt(match) * (1 - discount).toFixed(2);
  },
);
console.log(result); // "Pepperoni $13.50, Veggie $12.00, Supreme $16.50"

The replaceAll() method works the same way but requires the g flag if you're using a regex. It's there for consistency with the string version of replaceAll().

const pattern = /\[PENDING\]/g;
const result = "Order 1: [PENDING], Order 2: [PENDING]".replaceAll(
  pattern,
  "READY",
);
console.log(result); // "Order 1: READY, Order 2: READY"

String.prototype.split()

The split() method divides a string into an array based on a pattern. It's called on a string and takes a regex as its argument. This is where using regex as a delimiter really shines.

const pattern = /\s+/;
const result = "pepperoni    mushrooms   olives  peppers   sausage".split(
  pattern,
);
console.log(result); // ["pepperoni", "mushrooms", "olives", "peppers", "sausage"]

Without regex, you'd have to split on a single space and deal with the empty strings from multiple spaces. With regex, you can match any amount of whitespace at once.

You can also split on multiple different delimiters.

const pattern = /[\/\-]/;
const result = "large-pepperoni/medium-veggie/small-cheese".split(pattern);
console.log(result); // ["large", "pepperoni", "medium", "veggie", "small", "cheese"]

You can also use lookaheads and lookbehinds to split at specific positions without consuming any characters:

const pattern = /(?<=[a-z])(?=[A-Z])/;
const result = "largePepperonimediumVeggiesmallCheese".split(pattern);
console.log(result); // ["large", "Pepperoni", "medium", "Veggie", "small", "Cheese"]

Going Further

This guide covers the most commonly used regex features and methods in JavaScript, but there's a lot more to explore. If you want to dive deeper into regular expressions, the MDN documentation is an excellent resource with comprehensive coverage of all the features and edge cases.

Thanks For Stopping By!

Before we wrap up, here's something to decode:

const decodeThis =
  "7nks s$ mu2h f$r r#@d%ng! 8$p# &$u #nj$&#d l#@rn%ng @b$ut r#g#x @nd @ll th#s# p$w#rful m#th$ds. St@& 2##s#&!";
console.log(
  decodeThis.replace(
    /[@#$%&2789]/g,
    (x) =>
      ({
        "@": "a",
        "#": "e",
        $: "o",
        "%": "i",
        "&": "y",
        2: "c",
        7: "Tha",
        8: "H",
        9: "",
      })[x],
  ),
);
// "Thanks so much for reading! Hope you enjoyed learning about regex and all these powerful methods. Stay cheesy!"

What Are Web Components?

Web Components allow you create reusable custom elements that work across any framework or no framework at all. Instead of reinventing your pizza oven each time you want to make a pizza, you build it once and use it everywhere!

Web Components use three core technologies:

1. Custom Elements API - Lets you define your own HTML tags

2. Shadow DOM - Creates an isolated DOM tree for your element

3. HTML Templates - Defines reusable markup templates

Today, we'll focus on creating a pizza component that shows off these key concepts with a delicious visual example.

Why Detroit-Style Pizza?

Detroit-style pizza is the perfect metaphor for Web Components:

• It has a distinctive rectangular shape (like our component's structure)

• Features edge-to-edge cheese with caramelized edges (like our component's encapsulation)

• Can be customized with various toppings (custom attributes), showing component configurability

• Has its own unique style that stands out from other pizza types (like web components stand out from other UI approaches)

Plus, I'm on a pizza theme with my blog posts, so why stop now (I’m in too deep)?

Let's Build Our Web Component!

We're going to create a simple <detroit-pizza> element that can be configured with HTML attributes. The special feature? Our pizza starts as a plain cheese pizza, with three optional additions you can enable with attributes:

1. Pepperoni (red)

2. Racing stripe sauce (deep red)

3. Fresh basil leaves (green)

Here's the full code:

/*
  Detroit-style pizza web component
*/

class DetroitPizza extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 400px;
        }

        .pizza {
          width: 400px;
          height: 225px;
          background: #e8c38d;
          border: 8px solid #c49c67;
          border-radius: 4px;
          position: relative;
          box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }


        .cheese {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 5px solid #b26b14;
          background: linear-gradient(45deg, #fddb6d, #fee9a0);
        }

        .sauce {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
        }

        /* three horizontal sauce stripes */
        .sauce.racing-stripes::before,
        .sauce.racing-stripes::after,
        .sauce.racing-stripes .middle-stripe {
          content: '';
          position: absolute;
          height: 12%;
          left: 5%;
          right: 5%;
          border-radius: 20px;
          background: #990000;
          box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }

        .sauce.racing-stripes::before {
          top: 13%; 
        }

        .sauce.racing-stripes::after {
          bottom: 13%;
        }

        .sauce.racing-stripes .middle-stripe {
          top: 50%;
          transform: translateY(-50%);
        }

        /* toppings */
        .toppings {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1; 
        }

        .toppings.has-pepperoni {
          background-image: 
            radial-gradient(#d92e0e 8px, transparent 9px);
          background-size: 35px 35px;
          background-position: 8px 8px;
          background-position: 8px 8px;
          padding: 3px;
          box-sizing: border-box;
        }

        .basil-leaf {
          position: absolute;
          width: 20px;
          height: 30px;
          background: #386c0b;
          border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
          z-index: 5; 
          transform: rotate(15deg);
          box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .basil-leaf:nth-child(1) { top: 15%; left: 20%; transform: rotate(32deg); }
        .basil-leaf:nth-child(2) { top: 65%; left: 30%; transform: rotate(-20deg); }
        .basil-leaf:nth-child(3) { top: 25%; left: 75%; transform: rotate(10deg); }
        .basil-leaf:nth-child(4) { top: 70%; left: 80%; transform: rotate(-35deg); }
        .basil-leaf:nth-child(5) { top: 40%; left: 60%; transform: rotate(27deg); }
        .basil-leaf:nth-child(6) { top: 75%; left: 45%; transform: rotate(15deg); }
        .basil-leaf:nth-child(7) { top: 45%; left: 15%; transform: rotate(-12deg); }
        .basil-leaf:nth-child(8) { top: 30%; left: 40%; transform: rotate(22deg); }

        .basil-leaf::after {
          content: '';
          position: absolute;
          top: 30%;
          left: 20%;
          width: 30%;
          height: 15%;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          transform: rotate(-10deg);
        }
      </style>

      <div class="pizza">
        <div class="cheese"></div>
        <div class="toppings"></div>
        <div class="sauce">
          <div class="middle-stripe"></div>
        </div>
        <div class="basil-container"></div>
      </div>
    `;

    this.toppingsEl = this.shadowRoot.querySelector('.toppings');
    this.sauceEl = this.shadowRoot.querySelector('.sauce');
    this.basilContainer = this.shadowRoot.querySelector('.basil-container');
  }

  static get observedAttributes() {
    return ['pepperoni', 'racing-stripes', 'basil'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'pepperoni') {
      const hasPepperoni = newValue === 'true';
      if (hasPepperoni) {
        this.toppingsEl.classList.add('has-pepperoni');
      } else {
        this.toppingsEl.classList.remove('has-pepperoni');
      }
    }

    if (name === 'racing-stripes') {
      const hasStripes = newValue === 'true';
      if (hasStripes) {
        this.sauceEl.classList.add('racing-stripes');
      } else {
        this.sauceEl.classList.remove('racing-stripes');
      }
    }

    if (name === 'basil') {
      const hasBasil = newValue === 'true';
      if (hasBasil) {
        this.addBasilLeaves();
      } else {
        this.basilContainer.innerHTML = '';
      }
    }
  }


  addBasilLeaves() {
    this.basilContainer.innerHTML = '';
    for (let i = 1; i <= 8; i++) {
      const leaf = document.createElement('div');
      leaf.className = 'basil-leaf';
      this.basilContainer.appendChild(leaf);
    }
  }

  connectedCallback() {
    if (!this.hasAttribute('pepperoni')) {
      this.setAttribute('pepperoni', 'false');
    }

    if (!this.hasAttribute('racing-stripes')) {
      this.setAttribute('racing-stripes', 'false');
    }

    if (!this.hasAttribute('basil')) {
      this.setAttribute('basil', 'false');
    }
  }
}

customElements.define('detroit-pizza', DetroitPizza);

Breaking Down the Recipe: Key Parts Explained

Let's explore each part of our component:

1. The Base: Extending HTMLElement

class DetroitPizza extends HTMLElement {
  constructor() {
    super();

Our component extends the built-in HTMLElement class to get all the standard HTML element behavior. The super() call initializes the base class.

2. The Secret Sauce: Shadow DOM

this.attachShadow({ mode: 'open' });

Shadow DOM creates a separate DOM tree for our component, keeping styles and structure encapsulated. Nothing leaks out, and outside styles don't mess up our pizza's appearance.

3. The Recipe: Styling and Structure

• A golden-brown crust

• A warm yellow cheese

• Deep red sauce stripes (#990000)

• Bright red pepperoni (#d92e0e)

• Rich green basil leaves

4. The Opt-In Toppings: Strict Attribute Handling

attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'pepperoni') {
    const hasPepperoni = newValue === 'true';
    // ...
  }
}

We only add toppings when their respective attribute is exactly "true". Any other value keeps those features turned off. The basil leaves are nicely spread across the pizza at various angles for a natural look.

5. Default Plain Cheese: Initial Setup

connectedCallback() {
  // All features off by default, enable with explicit "true"
  if (!this.hasAttribute('pepperoni')) {
    this.setAttribute('pepperoni', 'false');
  }

  // Same for other attributes...
}

When our component is added to the page, this method ensures it starts as a plain cheese pizza by setting attributes to "false" by default. Users must explicitly opt-in to get additional toppings.

Using Our Pizza Component

To use this component, include the JavaScript code and add the tag to your HTML. All features are off by default, so if you want them, you must explicitly enable them:

<!DOCTYPE html>
<html>
<head>
  <title>Detroit Pizza Demo</title>
  <script src="https://rawcdn.githack.com/DevManSam777/detroit-style-web-component/eea750ab212f4cc794e27ec87928d20a17b89afc/detroit-pizza.js"></script>
</head>
<body>
  <h1>Detroit-Style Pizzas</h1>

  <!-- Plain cheese pizza (default) -->
  <h2>Plain Cheese</h2>
  <detroit-pizza></detroit-pizza>

  <!-- Pizza with pepperoni only -->
  <h2>With Pepperoni</h2>
  <detroit-pizza pepperoni="true"></detroit-pizza>

  <!-- Pizza with racing stripes only -->
  <h2>With Racing Stripes</h2>
  <detroit-pizza racing-stripes="true"></detroit-pizza>

  <!-- Pizza with basil only -->
  <h2>With Fresh Basil</h2>
  <detroit-pizza basil="true"></detroit-pizza>

  <!-- The works - everything enabled -->
  <h2>The Works</h2>
  <detroit-pizza pepperoni="true" racing-stripes="true" basil="true"></detroit-pizza>
</body>
</html>

The Special Sauce: Why Web Components Are Awesome

Web Components have several key advantages:

1. Framework-agnostic - They work in vanilla JavaScript or any framework

2. Encapsulated styling - CSS stays contained within the component

3. Declarative API - Configure through readable HTML attributes

4. Opt-in complexity - Start simple, add features only when needed

5. Future-proof - Built on web standards with long-term browser support

When to Use Web Components

Web Components are particularly valuable for:

• Creating design system elements that need to work consistently across projects

• Building UI widgets with clean, attribute-based APIs

• Developing embeddable content for third-party sites

• Creating progressive enhancements for existing applications

Final Slice: What We've Learned

In this tutorial, we've built a Detroit-style pizza web component that demonstrates several key principles:

• Creating custom HTML elements

• Using Shadow DOM for style encapsulation

• Styling with pure CSS (no external images needed!)

• Implementing opt-in features with strict attribute checking

The ability to start with a simple base and explicitly opt-in to additional features is a powerful pattern in web development. It follows the principle of progressive enhancement. We start with the essentials and let users add complexity only when needed.

Next time you're building a UI component, consider if the Web Components approach might be right for your project. They offer a great combination of encapsulation, reusability, and framework independence.

Are you using Web Components in your projects? Have you tried the opt-in approach to features? Drop a comment below and let me know!

Want to try it out?

Add this script element to the head section of your html page:

<script src="https://rawcdn.githack.com/DevManSam777/detroit-style-web-component/eea750ab212f4cc794e27ec87928d20a17b89afc/detroit-pizza.js"></script>

And add the component anywhere within your html body:

<detroit-pizza pepperoni="true" racing-stripes="true" basil="true"></detroit-pizza>

Until next time, happy coding and happy pizza-making!

P.S. Follow me on bsky for more web development recipes with a dash of pizza-themed fun!

The Three Crust Options of .replace()

Just like how you can choose different types of pizza crust (thin, deep dish, or stuffed?), JavaScript gives us three different ways to use .replace():

// Plain Cheese: Simple String Replace
// "Pepperoni Pizza" - Simple direct replacement
"Pineapple Pizza".replace("Pineapple", "Pepperoni");  


// Supreme: RegEx Replace with case-insensitive flag 
// "Pepperoni pizza" - The 'i' flag ignores case differences
"pINeApPlE pizza".replace(/pineapple/i, "Pepperoni");  


// Stuffed Crust: Callback Function Replace with calculation
// "Pizza with 5 toppings" - Converts to number, adds 2, then back to string
"Pizza with 3 toppings".replace(/\d+/, (match) => {
  return Number(match) + 2;  
});

HOT TIP: There's an important limitation to know about .replace() that might save you debugging time:

// This works - regex pattern with callback function
"Pizza Time".replace(/Time/, () => "Party");

// This causes TypeError - string pattern doesn't support callbacks
"Pizza Time".replace("Time", () => "Party");

Extra Toppings: Callback Parameters

When you use a callback function with .replace(), JavaScript delivers four standard parameters:

"Extra cheesy pizza $12.99".replace(/\$(\d+\.\d+)/, function(match, group, offset, originalString) {
  console.log("Full match:", match);           // "$12.99" - the entire text matched by the regex
  console.log("Captured group:", group);       // "12.99" - just the digits captured in parentheses
  console.log("Found at position:", offset);   // 18 - the character position where match starts
  console.log("Original order:", originalString); // "Extra cheesy pizza $12.99" - the complete string

  // Apply a 25% discount to the captured price
  return "$" + (Number(group) * 0.75).toFixed(2);
});
// "Extra cheesy pizza $9.74"

Let's break down each parameter:

First, the match parameter gives you the entire substring that matched your regex pattern, similar to grabbing a whole slice of pizza.

Next, the group parameter contains any content captured in parentheses from your regex, kind of like isolating just the different types of toppings on your slice. If your regex has multiple capturing groups, you'll get additional parameters (group1, group2, group3...).

The offset parameter tells you the position where the match was found, sort of like knowing exactly which slice in the box has your favorite topping.

Finally, the originalString parameter gives you the complete string you're performing the replacement on, just like when the delivery person hands you your entire order.

Regular Expression Basics

Regular expressions are like the pizza topping counter of JavaScript, overwhelming at first glance, but you can make some cool things happen when you learn about each ingredient.

Character Classes (The Basic Ingredients)

\d - Any digit (0-9)         // Like counting pizza slices
\D - NOT a digit             // Everything except the slice numbers

\w - Any word character       // The letters in P-I-Z-Z-A
\W - NOT a word character     // Everything that's not in P-I-Z-Z-A

\s - Any whitespace          // The space between pizza and perfection
\S - NOT whitespace          // Everything except those spaces

.  - Any character           // Whatever you want on your pizza

Quantifiers (How Much of Each Topping?)

*  - 0 or more              // Can match empty string or repeated characters
+  - 1 or more              // Requires at least one occurrence
?  - 0 or 1 (optional)      // Makes the previous element optional
{3} - Exactly 3             // Matches exactly 3 occurrences
{2,4} - Between 2 and 4     // Matches between 2-4 occurrences, inclusive

Anchors (Where on the Pizza?)

^  - Start of string         // Ensures pattern starts at beginning
$  - End of string           // Ensures pattern goes to the very end
\b - Word boundary           // Matches position between word/non-word character

Capturing Groups: Separating Your Pizza Slices

Parentheses in regex help you grab exactly which slice you want:

const pizzaOrder = "I want a large pepperoni pizza with extra cheese";
const size = pizzaOrder.match(/a (small|medium|large) \w+ pizza/)[1];
// The [1] gets just the captured group - "large"
console.log(`Size ordered: ${size}`);  // "large"

When you use parentheses () in a regular expression, you create "capture groups" that store matched portions separately. The .match() method returns an array where index [0] contains the entire match, while subsequent indexes [1], [2], etc. contain just the text matched by each set of parentheses. This lets you extract specific pieces (like "large") from a longer string without having to process the entire matched text.

Think of it as ordering a whole pizza but only wanting a particular slice - the capture group gives you just the part you need!

Beyond Basic Groups: Lookaheads, Lookbehinds, and Non-Capturing Groups

While capturing groups are powerful, sometimes you need more advanced techniques to handle complex patterns without cluttering your results.

Non-Capturing Groups: Grouping Without Storing

Non-capturing groups let you use parentheses for alternation or applying quantifiers without storing the matched content:

// Regular capturing group
const order = "Order #12345".match(/(Order #)(\d+)/);
console.log(order);  
// ["Order #12345", "Order #", "12345"]

// Non-capturing group for the prefix
const orderNonCapture = "Order #12345".match(/(?:Order #)(\d+)/);
console.log(orderNonCapture);  
// ["Order #12345", "12345"] - Only the order number is captured

Non-capturing groups use the syntax (?:pattern) and are especially useful when you need to group elements for matching purposes but don't need to reference that specific match later.

Lookaheads: Checking What Follows

Lookaheads check what follows a pattern without including it in the match:

// Extract prices only when followed by "discount"
const menuText = "Margherita $10.99 standard, Pepperoni $14.99 discount";

// Positive lookahead - match prices that are followed by "discount"
const discountPrices = menuText.match(/\$\d+\.\d+(?= discount)/g);
console.log(discountPrices);  // ["$14.99"]

// Negative lookahead - match prices NOT followed by "discount"
const regularPrices = menuText.match(/\$\d+\.\d+(?! discount)/g);
console.log(regularPrices);  // ["$10.99"]

Lookaheads are particularly useful for validation patterns or when you need to match text only in specific contexts.

Lookbehinds: Checking What Precedes

Lookbehinds check what comes before your pattern:

const ingredients = "tomato sauce, mozzarella cheese, fresh basil, extra oregano";

// Positive lookbehind - match ingredients preceded by "extra"
const extraIngredients = ingredients.match(/(?<=extra )\w+/g);
console.log(extraIngredients);  // ["oregano"]

// Negative lookbehind - match ingredients NOT preceded by "fresh" or "extra"
const standardIngredients = ingredients.match(/(?<!fresh |extra )\w+(?= \w+,|$)/g);
console.log(standardIngredients);  // ["sauce", "cheese"]

Lookbehinds let you match based on what came before without including those preceding characters in your match.

Practical Example: Advanced Text Parsing

Let's see how these techniques can work together:

const customerReviews = `
ID: 1001 - Rating: 5 stars - "Best pizza in town! The crust was perfect."
ID: 1002 - Rating: 3 stars - "Delivery was slow but food was good."
ID: 1003 - Rating: 4 stars - "Great value for money. Will order again."
`;

// Extract only positive reviews (4-5 stars) with their IDs
function extractPositiveReviews(text) {
  // Break down the pattern:
  // (?<=ID: )(\d+)        - Lookbehind for "ID: " and capture the ID number
  // .+?Rating: [45]       - Match text up to ratings of 4 or 5
  // (?=.+?".+?")          - Lookahead to ensure there's a review in quotes
  const pattern = /(?<=ID: )(\d+)(.+?Rating: [45])(?=.+?"(.+?)")/g;

  const matches = [];
  let match;

  while ((match = pattern.exec(text)) !== null) {
    const reviewText = text.slice(match.index).match(/"(.+?)"/)[1];
    matches.push({
      id: match[1],
      rating: match[2].match(/(\d+)/)[0],
      review: reviewText
    });
  }

  return matches;
}

console.log(extractPositiveReviews(customerReviews));
// [
//   { id: "1001", rating: "5", review: "Best pizza in town! The crust was perfect." },
//   { id: "1003", rating: "4", review: "Great value for money. Will order again." }
// ]

This example demonstrates how non-capturing groups, lookaheads, and lookbehinds can work together to extract precise information from complex text patterns. By using these advanced techniques, you can create more efficient and readable regular expressions that focus on extracting exactly the data you need.

Let's Cook Up Some More Examples!

Example 1: The Pizza Order Number Incrementer

When your 99th pizza order becomes your 100th (this is a variation of the codewars kata I recently completed that inspired this blog post):

function incrementString(string) {
  return string.replace(/(\d*)$/, match => {
    // If no digits found at the end, add "1"
    if (match === "") return "1";

    // Store the original length to preserve leading zeros
    const length = match.length;

    // Convert to number, add 1, then back to string with padding
    return (Number(match) + 1).toString().padStart(length, "0");
  });
}

incrementString("Pizza");     // "Pizza1"
incrementString("Order #23"); // "Order #24"
incrementString("Receipt #099"); // "Receipt #100" - keeps leading zeros!

Example 2: Pizza Recipe Parser

Extract ingredients from recipe text:

function parseIngredients(recipe) {
  const ingredients = [];
  // This regex captures: amount, unit, and ingredient name
  const regex = /(\d+(?:\.\d+)?) (cups?|tablespoons?|teaspoons?) of ([^,\.]+)/g;

  let match;
  // Loop through all matches in the text
  while ((match = regex.exec(recipe)) !== null) {
    ingredients.push({
      amount: parseFloat(match[1]),  // Convert amount to number
      unit: match[2],                // Get the unit (cup, tablespoon, etc)
      ingredient: match[3].trim()    // Get just the ingredient name, trimmed
    });
  }

  return ingredients;
}

const pizzaSauce = "Mix 2 cups of crushed tomatoes, 1.5 tablespoons of olive oil, 2 teaspoons of oregano.";
console.log(parseIngredients(pizzaSauce));
// [{amount: 2, unit: "cups", ingredient: "crushed tomatoes"}, ...]

Example 3: Pizza Special Formatter

Format your specials menu with visual styling:

function formatSpecials(menu) {
  // Convert prices to styled spans
  menu = menu.replace(/\$(\d+\.\d+)/g, function(match, price, offset, originalString) {
    console.log(`Found price ${price} at position ${offset} in "${originalString}"`);
    return '<span class="price">$' + price + '</span>';
  });

  // Make pizza names bold
  menu = menu.replace(/([A-Za-z]+ Pizza)/gi, '<strong>$1</strong>');

  // Add pizza emoji to beginning of each line using multiline flag (m)
  menu = menu.replace(/^(.+)$/gm, '🍕 $1');

  return menu;
}

const specials = "Margherita Pizza $12.99\nPepperoni Pizza $14.99";
console.log(formatSpecials(specials));
// "🍕 <strong>Margherita Pizza</strong> <span class="price">$12.99</span>
// 🍕 <strong>Pepperoni Pizza</strong> <span class="price">$14.99</span>"

The Secret Menu: Common RegEx Patterns

Just like my secret pizza menu items, here are some regex patterns only the regulars know about:

// Extract all prices from a menu
const prices = "Margherita: $12.99, Pepperoni: $14.99".match(/\$\d+\.\d+/g);
// ["$12.99", "$14.99"] - the 'g' flag gets all matches!

// Split a pizza order at commas (keeping the commas)
const toppings = "Pepperoni, Mushrooms, Extra Cheese".split(/(?<=,) /);
// Uses a positive lookbehind (?<=,) to keep the commas in the result

// Validate a pizza delivery email
const isValidEmail = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test("order@pizzaplace.com");
// Returns true if the email format is valid

// Turn #hashtags into links with full callback parameter usage
const withLinks = "Love this #pizza and #code combo!".replace(/#(\w+)/g, 
  function(match, tag, offset, originalString) {
    console.log(`Found ${match} with tag ${tag} at position ${offset}`);
    console.log(`Original string: "${originalString}"`);
    return '<a href="tag/' + tag + '">' + match + '</a>';
  }
);
// Shows how all callback parameters can provide useful context

The Perfect Recipe: Putting It All Together

Just like how my perfect pizza has the exact right ratio of sauce to cheese to toppings, your RegEx skills need balance too. Let's create the ultimate pizza order parser:

function parsePizzaOrder(orderText) {
  // Extract customer name - the 'm' flag enables multi-line mode
  const nameMatch = orderText.match(/^Name: (.+)$/m);
  const name = nameMatch ? nameMatch[1] : "Anonymous";

  // Extract pizza size with case-insensitive flag
  const sizeMatch = orderText.match(/Size: (Small|Medium|Large)/i);
  const size = sizeMatch ? sizeMatch[1] : "Medium";  // Default size if not specified

  // Extract all toppings from a single line
  const toppingsMatch = orderText.match(/Toppings: (.+)$/m);
  const toppings = toppingsMatch 
    ? toppingsMatch[1].split(/,\s*/).map(t => t.trim())  // Split by comma and clean up
    : ["Cheese"];  // Default topping

  // Calculate price based on size and number of toppings
  let basePrice = 0;
  let totalPrice = 0;

  // Using replace with callback function parameters for price calculation
  orderText.replace(/Size: (Small|Medium|Large)/i, function(match, sizeGroup, offset, original) {
    console.log(`Found size "${sizeGroup}" at position ${offset}`);
    basePrice = sizeGroup.toLowerCase() === "small" ? 8 : 
               sizeGroup.toLowerCase() === "medium" ? 10 : 12;

    const toppingPrice = Math.max(0, toppings.length - 1) * 2;  // First topping free!
    totalPrice = basePrice + toppingPrice;

    return match; // Keep the original text (we're just using replace for the callback)
  });

  // If no size was found, set default prices
  if (basePrice === 0) {
    basePrice = 10; // Default Medium price
    const toppingPrice = Math.max(0, toppings.length - 1) * 2;
    totalPrice = basePrice + toppingPrice;
  }

  return {
    customer: name,
    order: { size, toppings },
    price: `$${totalPrice.toFixed(2)}`
  };
}

const order = `
Name: Samir
Size: Large
Toppings: Pepperoni, Mushrooms, Bell Peppers
`;

console.log(parsePizzaOrder(order));
// {
//   customer: "Samir",
//   order: {
//     size: "Large",
//     toppings: ["Pepperoni", "Mushrooms", "Bell Peppers"]
//   },
//   price: "$16.00"
// }

Wrapping It Up: The Pizza Box of Knowledge

And there you have it, folks! We've sliced through JavaScript's .replace() method and regular expressions like a pizza cutter through a perfectly baked pie. Remember:

• .replace() comes in three flavors: simple strings, regex patterns, and callback functions

• Callbacks get four bonus parameters. First is match (the full text matched by your regex). Next comes group(s) (the content captured in parentheses). Third is offset (the position where the match was found). Finally, originalString gives you the complete string you're working with.

• Regular expressions are weird looking but super powerful - just like experimenting with unique pizza combinations

• Capturing groups let you grab specific pieces of your text - just like picking out your favorite ingredients

Practice makes perfect, whether it's kneading dough or writing regex.

Are you team regex or team "just use string methods"? And what's your favorite pizza topping combination? Drop a comment!

P.S. Follow me on BlueSky, or check out my previous post about HTML lists and CSS styling - I even give out my secret pizza low-carb pizza recipe!

A Slice of Semantic HTML

Before we dive into our recipe, let's talk about semantic HTML for a hot second. You know how a pizza has distinct layers - the crust, sauce, and toppings? Well, semantic HTML is kind of like that. Instead of just throwing everything into <div> tags (which would be like putting all your toppings in a blender... yuck!), we use specific tags that actually describe what our content is.

<!-- Not semantic (the pizza blender approach) -->
<div class="recipe">
    <div class="recipe-title">Low-Carb Pizza</div>
    <div class="recipe-list">...</div>
</div>

<!-- Semantic (the properly layered pizza approach) -->
<article class="recipe">
    <h1>Low-Carb Pizza</h1>
    <section class="ingredients">...</section>
</article>

We've got awesome semantic tags like <article>, <section>, <nav>, <header>, <footer>, and even <aside> (for those side orders of garlic knots, obviously). But you know what's missing? <pizza>! I mean, seriously W3C, how is this not a standard HTML element yet?

<!-- In my dreams... -->
<pizza>
    <crust>Low-carb mozzarella</crust>
    <sauce>Crushed tomatoes</sauce>
    <toppings>
        <topping>More mozzarella</topping>
        <!-- Because there's no such thing as too much cheese -->
    </toppings>
</pizza>

Until my petition for pizza-semantic-tags gets approved (don't hold your breath), we'll stick with the current semantic elements for our recipe. They help screen readers understand our content better, improve SEO, and keep our code as organized as a well-managed pizzeria!

Why Lists?

Lists are everywhere on the web - navigation menus, recipe ingredients, step-by-step tutorials (like this one!), and pretty much anywhere you need to organize information. But here's the thing: they're not just about slapping some bullet points on your content. With the right HTML structure and some CSS magic, you can create lists that are both functional and fabulous!

The Basic Ingredients

Just like our pizza recipe needs specific ingredients, HTML lists come with their own essential elements. Let's break them down:

<!-- Unordered list (ul) - for ingredients -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Ordered list (ol) - for steps -->
<ol>
    <li>Step 1</li>
    <li>Step 2</li>
</ol>

Think of <ul> as your pizza toppings (they can go in any order) and <ol> as your recipe steps (order matters!). The <li> elements are like your individual ingredients - they're what make up the list.

Let's Make Some Pizza!

Now, let's put these lists to work with our actual recipe. First, our ingredients:

<div class="recipe-card">
         <h2>🍕 Low-Carb
            <span class="image-text">P</span> /*see my post on text-gradients and text background images to learn how to apply this effect*/
            <span class="image-text">I</span>
            <span class="image-text">Z</span>
            <span class="image-text">Z</span>
            <span class="image-text">A</span>
            Recipe 🍕
        </h2>

        <div class="section">
            <h3>Ingredients</h3>
            <ul class="ingredients-list">
                <li> 4 cups low moisture mozzarella cheese
                    <ul>
                        <li>2½ cups mozzarella cheese (for crust)
                        </li>
                        <li>1½ cups mozzarella cheese (for topping)</li>
                    </ul>
                </li>
                <li>2 oz cream cheese</li>
                <li>1 egg</li>
                <li>½ tablespoon baking powder</li>
                <li>½ teaspoon xanthan gum</li>
                <li>1 teaspoon Italian seasoning</li>
                <li>1 teaspoon garlic powder</li>

                <li>3/4 cup crushed tomatoes</li>
                <li>2 tablespoons olive oil</li>
            </ul>
        </div>

        <div class="section">
            <h3>Equipment Needed</h3>
            <ul class="equipment-list">
                <li>Heavy bottom pan</li>
                <li>Parchment paper</li>
                <li>Microwave-safe bowl</li>
            </ul>
        </div>

Let's style our lists with some pizzazz!

h2, h3 {
    color: #2d3748;
    margin: 1.5rem 0 1rem;
    text-align: center;
}

h2 {
    font-size: 2rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.section {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
.recipe-card {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.ingredients-list li {
    padding: 0.5rem 0;
    padding-left: 2rem;
    position: relative;
    transition: transform 0.2s ease;  /* Smooth hover effect */
}

.ingredients-list li:hover {
    transform: translateX(10px);  /* Slide effect on hover */
}

Want to make your lists more appetizing? Instead of boring bullet points, you can use any emoji as a list marker! First, remove the default bullets with list-style: none, then use the ::before pseudo-element to add your custom marker. The content property is where the magic happens - you can use a pizza emoji (or any other emoji) to spice up your lists. Just make sure to add a bit of margin to keep things nicely spaced out!

.ingredients-list {
 list-style: none; /* Remove default bullets */
}

.ingredients-list li::before {
 content: "🍕"; /* Pizza emoji as marker */
 margin-right: 8px; /* Space between emoji and text */
 display: inline-block;
}

Now for the complete cooking instructions. Check out how we can style ordered lists differently:

<ol class="instructions">
    <li>Preheat oven to 375°F (190°C)</li>
    <li>Combine 2½ cups mozzarella with cream cheese in a microwave-safe bowl</li>
    <li>Heat in 30-second intervals, stirring between each interval, until fully melted</li>
    <li>Add all dry ingredients and mix until fully incorporated</li>
    <li>Mix in the egg</li>
    <li>Oil two 18x18 pieces of parchment paper</li>
    <li>Place dough ball between the oiled parchment papers</li>
    <li>Use a rolling pin to roll dough as round and thin as possible</li>
    <li>Roll edges up to form crust shape</li>
    <li>Place in preheated pan with parchment paper under the crust</li>
    <li>Bake for 12 minutes or until slightly browned</li>
    <li>Remove from oven and add crushed tomatoes and cheese</li>
    <li>Increase oven temperature to 400°F (200°C)</li>
    <li>Bake for additional 10-12 minutes until cheese is melted and bubbling</li>
    <li>Let rest for 5 minutes before cutting</li>
</ol>

.instructions {
    counter-reset: step;  /* Creates custom counter */
    list-style: none;
    padding-left: 0;
}

.instructions li {
    position: relative;
    padding: 1rem 0 1rem 3rem;
    margin-bottom: 0.5rem;
}

.instructions li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: #ff6b6b;  /* Pizza sauce red! */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

You can absolutely omit the CSS styling, including the pseudo-elements like ::before and counters, and your ordered and unordered lists will still function perfectly. The HTML provides the structure and content of the lists, while the CSS simply enhances their visual appearance.

Pro Tips!

Let's use a nested list to share some important notes about our pizza:

<ul class="pro-tips">
    <li>Reheating instructions:
        <ul>
            <li>Reheat in oven at 400°F (200°C) for 10-12 minutes</li>
            <li>Do NOT use microwave - trust me on this one! 🙅‍♂️</li>
        </ul>
    </li>
    <li>Customization options:
        <ul>
            <li>Try different cheese blends for the topping</li>
            <li>Add your favorite low-carb toppings</li>
            <li>Experiment with different herbs in the crust</li>
        </ul>
    </li>
</ul>

.pro-tips {
    background-color: #fffaf0;
    border-left: 4px solid #ed8936;
    padding: 1.5rem;
    margin-top: 2rem;
    border-radius: 8px;
}

.pro-tips > li {
    list-style: none;
    margin-bottom: 1rem;
    font-weight: bold;
}

.pro-tips ul {
    margin-top: 0.5rem;
    margin-left: 1.5rem;
    font-weight: normal;
}

.pro-tips ul li {
    margin: 0.5rem 0;
    list-style: disc;
}

Making It Mobile-Friendly

Just like our pizza needs to fit in different pans, our lists need to work on different screen sizes. Here's how to make them responsive:

@media (max-width: 768px) {
    .recipe-card {
        margin: 1rem;
        padding: 1rem;
    }

    .instructions li {
        padding-left: 2.5rem;  /* Smaller padding on mobile */
    }

    .instructions li::before {
        width: 1.5rem;  /* Smaller numbers on mobile */
        height: 1.5rem;
        font-size: 0.9rem;
    }

    .pro-tips ul {
        padding-left: 1rem;  /* Less indentation for nested lists */
    }
}

Wrapping Up

And there you have it, folks! Not only do you now know how to create and style HTML lists like a pro, but you've also got a killer gluten-free, low-carb pizza recipe to try out. The best part? Just like how we can nest lists inside other lists, you can stack these pizza slices right into your meal prep routine!

Remember, whether you're coding or cooking, it's all about experimenting and finding what works best for you. Drop a comment below if you try either the HTML tricks or the pizza recipe - I'd love to hear how it turned out!

P.S. Want more pizza-themed web dev tutorials? Connect with me on BlueSky, or check out my other posts right here!

Don't forget to check out my previous post about text gradients and text background images

The Dallas Mavericks just traded away Luka Dončić. Let that sink in.

They traded a 25-year-old who's already made All-NBA five times - the only player under 30 to accomplish this. They traded away a player who just dropped 73 points against Atlanta last month. They traded away a generational talent who averages 28.6 points per game - third in NBA history behind only Jordan and Chamberlain, who led the Mavs to the NBA Finals last season, and the Western Conference Finals in 2023.

And while Anthony Davis is an undeniably elite defensive anchor, who is currently averaging 25.7 points and 11.9 rebounds, changing countless shots at the rim, and who also has a championship pedigree, this trade is still baffling. The silver lining for Davis is that he finally gets his wish to play primarily at power forward, with both Daniel Gafford and Dereck Lively to handle center duties. It's a setup that could maximize AD's versatility while reducing the physical toll on his body, which is something he's long advocated for during his time with the Lakers.

Look, if Luka enjoys an extra slice of pizza now and then, so what? That's hardly a reason to trade away a top-3 NBA player who's only 25. It's not some career-ending disability. It's a minor detail that could easily be addressed with proper conditioning, and habit building. The Mavericks essentially traded away the whole pizzeria because they were worried about the chef having a few extra slices. They just swapped their entire pizzeria for a slice of A.D.

This earth-shattering deal is stunning, not just for its impact, but for how secretly it was negotiated. In today's NBA, even the smallest trade rumors leak instantly. Yet, this blockbuster remained completely under wraps. There were no cryptic tweets from insiders, no "sources say" articles. In a league where Woj (we miss ya, Woj!) and now Shams, who broke the news, typically get the scoop before the teams themselves, this silence is remarkable. It speaks volumes about the discretion and commitment of both front offices.

An Extra Large Pizza Was Just Delivered to LA

Rob Pelinka's masterful maneuvering here cannot be understated. While LeBron James remains one of the league's elite players, the Lakers' GM has secured not just their future, but their present. This isn't just planning for tomorrow, it's intriguing today. The prospect of LeBron and Luka sharing the court is enough to give Western Conference coaches nightmares. Sure, they still need a big, but come on, Luka FREAKING Dončić and King James?! You can find a center. You can’t find another Luka. Well done, Rob.

This is the kind of trade that gets people fired. The Lakers didn't just win this trade, they committed highway robbery. Any team in the NBA would have made this trade in the Lakers' position. You get a young superstar who could be the face of your franchise for the next decade? It's a no-brainer.

What's wild is Nico Harrison's explanation about "getting ahead of a tumultuous summer" regarding Luka's potential supermax extension. That's not strategy, that's panic. You don't trade away a player of Luka's caliber because you're worried about future negotiations. Even with Davis's defensive brilliance and perfect fit next to Kyrie, this is still Luka Dončić, a once-in-a-generation talent, and Anthony Davis’s injury history, along with the fact that he turns 32 next month is leaving many of the Mavericks faithful scratching their heads at the franchise-altering move.

The Lakers just got their next franchise cornerstone, while the Mavericks will be explaining this one for years to come. As Kevin Durant put it: "Insane. It's crazy. Crazy. Damn, would of never thought Luka Doncic would get traded."

Crazy indeed, KD. Crazy indeed.

What a wild trade... what do you think? Leave a comment with your thoughts, or connect with me on BlueSky.

Thanks for stopping by.

React Three Fiber is a React renderer for Three.js, which lets us use JSX to build 3D scenes declaratively. It makes Three.js easier to use in React projects.

One of the key techniques we'll be using throughout this example is the combination of Framer Motion and React Three Fiber. Framer Motion is a powerful animation library that brings fluid motion and gestures to React applications. Think of React Three Fiber as the dough that makes our 3D effect possible, and Framer Motion as the toppings that make it delicious... I mean, animated! (Can you tell I'm still thinking about that pizza text effect?)

Before We Start

You'll want to be familiar with:

• React basics (components, hooks)

• JavaScript fundamentals

• A code editor (VS Code recommended)

Let's dive into making our very own animated 3D pizza!

The Basic Setup

First, we need our ingredients (dependencies):

npx create-react-app pizza-3d-demo
cd pizza-3d-demo
npm install three @react-three/fiber @react-three/drei framer-motion

Before I forget, I want to give credit where credit is due. The amazing pizza 3D model we'll be using is: Pepperoni pizza by Poly by Google [CC-BY] (https://creativecommons.org/licenses/by/3.0/) via Poly Pizza (https://poly.pizza/m/9IWGn64Fnqo)

The Magic Component

We're going to create a component that loads and animates our 3D pizza model:

import { useGLTF } from '@react-three/drei';
import { motion } from 'framer-motion-3d';
import { useEffect } from 'react';

export function Pizza3D() {
  const pizza = useGLTF('/models/pepperoni_pizza.glb');

  useEffect(() => {
    return () => {
      if (pizza) pizza.scene.dispose();
    };
  }, [pizza]);

  return (
    <motion.group
      initial={{ 
        scale: 0, 
        rotateX: -50,
        x: 0,
        y: 200, 
      }}
      animate={{
        scale: 1,
        rotateX: 0,
        x: 0,
        y: 0,
        transition: {
          type: "spring",
          stiffness: 100, 
          damping: 8,    
          mass: 1,       
        }
      }}
      whileHover={{
        scale: 1.1,
        rotateX: 0.2,
        rotateZ: 0.2,
        y: 1.5,
        transition: {
          type: "tween",
          duration: 0.2
        }
      }}
    >
      <primitive 
        object={pizza.scene} 
        scale={1.5}
        position={[0, 0, 0]}
      />
    </motion.group>
  );
}

Just like how we used background-clip: text to create a mask for our text effects, here we're using motion.group to create a container for our 3D animations. It’s like a pizza box that we use to move our pizza around.

The useEffect hook is here for clean up. It makes sure we properly dispose of the 3D pizza model when we’re done with it. It’s kind of like taking out the trash after a pizza party. Without this, we could potentially have memory leaks, which nobody wants.

Setting the Stage

Now, let's create the perfect environment for our pizza to perform. Just like setting up the perfect shot for your Instagram food pics, we need to create the right environment for our 3D pizza to shine. The Canvas component acts as our viewfinder, while Stage handles all the fancy lighting setup.

import { Canvas } from '@react-three/fiber';
import { OrbitControls, PresentationControls, Stage } from '@react-three/drei';
import { Pizza3D } from './Pizza3D';

export function Scene() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas>
        <Stage 
          environment="city" 
          intensity={0.6}
          preset="rembrandt"
          adjustCamera={1.2}
        >
          <PresentationControls
            speed={1.5}
            global
            zoom={0.7}
            polar={[-0.1, Math.PI / 4]}
          >
            <Pizza3D />
          </PresentationControls>
        </Stage>
        <OrbitControls enableZoom={false} />
      </Canvas>
    </div>
  );
}

The Stage component is doing all the heavy lifting behind the scenes here:

• That environment="city" prop adds a nice lighting effect

• intensity={0.6} keeps that lighting subtle and not too harsh

• preset="rembrandt" adds some classic artistic shadowing

• adjustCamera={1.2} makes sure our pizza is perfectly framed in view

I also wrapped our pizza in PresentationControls to give it that smooth, responsive feel when users interact with it. You can think of it as a turntable that lets us show the pizza from all of its cheesy angles. The props here control exactly how it moves:

• speed={1.5} gives it a smooth movement speed

• zoom={0.7} keeps us at the perfect distance to see all those toppings

• polar={[-0.1, Math.PI / 4]} makes sure users can't rotate it at weird angles

And finally, I added OrbitControls with enableZoom={false} to keep folks from getting too close to those crispy pepperonis!

The Animation Magic

Just like how we used keyframes for our neon text effect, we're using Framer Motion's animation properties to bring our pizza to life. But instead of just changing colors, we're creating a dramatic entrance in 3D space.

The entrance animation has our pizza making a grand entrance:

• Starts floating high above (y: 200)

• Has a slight tilt (rotateX: -50)

• Falls gracefully with spring physics

And when you hover, the pizza does a little happy dance:

• Lifts up slightly (y: 1.5)

• Grows a bit (scale: 1.1)

• Tilts playfully (rotateX: 0.2, rotateZ: 0.2)

We've also added a sliding title animation for extra pizzazz, because who doesn't love a dramatic entrance? The title starts completely off-screen to the left (-100vw) and slides into the middle of the viewport (-50vw):

<motion.h1
  className="title"
  initial={{ x: '-100vw' }}
  animate={{ x: '-50vw' }}
  transition={{
    type: 'spring',
    stiffness: 100,
    damping: 25,
    duration: 3,
  }}
>
  THREE.js and Framer-Motion <br />
  <span className="image-text">P</span>
  <span className="image-text">I</span>
  <span className="image-text">Z</span>
  <span className="image-text">Z</span>
  <span className="image-text">A</span> Demo
</motion.h1>

Each letter of "PIZZA" gets its own span with the image-text class which we can then style separately (more on that here). And just like our pizza animation, we're using spring physics for that bouncy, playful feel. The stiffness and damping values give it just the right amount of bounce without going overboard!

Cowabunga, Dude!

Key Insights

The 3D transformation trick: Just like how making text transparent was crucial for our gradient effects, using motion.group is essential for 3D animations. It creates a container that can be animated in 3D space without affecting the model itself.

• Physics-Based Animation: The combination of spring physics (stiffness: 100, damping: 8) with added mass creates a satisfyingly bouncy entrance that makes the pizza feel alive and playful.

• Lighting and Environment: The Stage component is like a photo studio. It provides perfect lighting to make the pizza look delicious from every angle. The environment="city" prop gives nice reflective highlights.

• Interactive Considerations: Remember how pseudo-elements were used for text shadows? Here, PresentationControls handle user interaction. It ensures the pizza rotates smoothly and naturally.

Making It Responsive

Just like our text effects, we want this to work everywhere:

.scene-container {
  width: 100vw;
  height: clamp(300px, 100vh, 800px);
}

Let's See What You Create!

Now it's your turn! Try playing with different:

• Animation timings

• Spring physics settings

• Camera angles

• Lighting setups

Drop a comment below with your creations! You can also connect with me up on BlueSky, or on my website, devmansam.net, if you come up with something cool!

Thanks for stopping by.

Key Tips for Those New to 3D:

• Keep your models lightweight

• Test on mobile devices

• Use Suspense for loading states

• Remember to clean up your models with useEffect

• For more on Framer-Motion visit motion.dev

• Documentation for React Three Fiber can be found here

Want to learn how to create that pizza-filled text effect I mentioned at the start? Check out my previous blog post where I show you how to make it step by step!

Happy coding (and don't forget to grab a real slice of pizza when you’re done)!

Standing firm on my rates, despite the internal pressure, felt a bit like enjoying a slice of cold pizza, technically satisfying, but lacking the same instant gratification of that glorious, hot, melty, ooey-gooey, extra-cheesy, goodness that a signed contract brings.

Why share this? Because it happens and because managing stress is just as important as managing projects. There's a constant balance between taking opportunities and maintaining healthy boundaries, and it's something we need to talk about more openly in our community.

To me, the value I place on myself and my work is more important than a quick financial gain, especially while working with a stress-inducing, expedited timeline. While financial security is important, I feel that undervaluing my skills can have detrimental effects on my self-esteem and long-term career prospects. It can lead to self-doubt, limit my earning potential, and potentially trap me in less fulfilling career paths. By valuing myself and charging accordingly, I am investing in my long-term success, as well as my own well-being and self-image.

I want to discuss something crucial in the dev community: protecting our mental health while gaining experience as paid professionals. Between client deadlines, continuous learning, and the pressure to perform, it can be challenging to maintain balance. Good practices can make a difference. I myself am admittedly, as they say, still learning on the job, but I am also focused on improving daily by learning to manage my work-life balance more effectively.

Before taking on any project, we should consider several key factors. We need to ensure we have the systems in place to effectively manage the workload, including sufficient buffer time for unexpected challenges. We should also evaluate how the project will impact our ability to maintain a healthy routine and ensure the project timeline allows for proper planning and execution.

Writing proposals is part of the business. It's about being clear about what value we can provide. And SPOILER ALERT, proposals are sometimes declined. That's okay - it's simply part of the process. Not every opportunity is going to work out, and that's actually healthy. It means we are setting clear boundaries about our worth and our ability to deliver quality work within the requested timeline. These boundaries also ensure that we are able to provide a high-value product and exceed customer expectations.

The freelance journey often involves learning about sustainable practices. This can mean blocking out focused work time, reaching out to other developers for advice, maintaining regular hours, and sometimes declining rush requests that would compromise production quality, or our own well-being.

Sustainability requires establishing clear boundaries around work hours, staying organized with regular planning sessions, connecting with other developers for support, and ensuring there's time for both focused work and proper breaks. As freelancers, we should also leave room in our budgets to bring other developers on when we need help. We should NOT be afraid to ask for assistance when we need it. These aren't just nice-to-haves, they're essential for long-term success.

It's worth considering that project deadlines and client pressure aren't the only challenges we face. Imposter syndrome, the competitive landscape, and the constantly evolving industry all play a role in our stress levels.

We can experiment with different techniques to improve focus and manage stress. Meditation has been particularly helpful for me lately. I'm currently on a 5-day meditation streak, which feels like a major win for my mental health.

Finding a balance between prioritizing our well-being and ensuring our financial stability is crucial. Valuing ourselves and our mental health is not a luxury, but a necessity for long-term success in this field. I’m ok with eating cold-pizza sometimes. This is a marathon, not a race, and this marathon has no finish line. We’re in this for the long-haul, so let’s value our community, ourselves, our bodies, our heath, our skills, and our time. Balance is key.

I don't have all the answers, and I would love to learn from others in this community. Drop a comment below if this resonates with you, or connect with me on Bluesky.

cover photo from: https://images.pexels.com/photos/9353454/pexels-photo-9353454.jpeg?auto=compress&cs=tinysrgb&w=400

One of the key techniques we'll be using throughout these examples is the combination of background-clip: text and color: transparent. This is the magic that lets us fill our text with gradients, images, and animations. When we set color: transparent, we're essentially making the text invisible. Then, by setting background-clip: text, we're telling CSS to only show the background within the shape of our text characters.

Think of it like a cookie cutter. The text is the cookie cutter shape, and the background is the dough we can see through that shape. The chocolate chips are up to you and your imagination!

The Rainbow Gradient

Let’s start with a simple but striking rainbow gradient effect:

.gradient-text {
    background: linear-gradient(45deg, 
        #ff0000,
        #ff8700,
        #ffd300,
        #00ff00,
        #0094ff,
        #6b00ff
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Bagel Fat One", sans-serif;
    font-size: 10rem;
    background-size: contain;
}

[Rainbow Gradient]

The Metallic Gold Effect

Here's where things get interesting. We can create a realistic metallic gold effect using a carefully crafted gradient and some depth:

.depth-text {
    position: relative;
    background: linear-gradient(45deg,
        #462523 0%,
        #cb9b51 22%, 
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Monoton", sans-serif;
    font-size: 10rem;
}

.depth-text::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: rgba(26, 26, 26, 0.8);
    text-shadow: 
        2px 2px 3px rgba(0, 0, 0, 0.2),
        4px 4px 6px rgba(0, 0, 0, 0.3),
        6px 6px 12px rgba(0, 0, 0, 0.2);
}

Adding a text-shadow directly to text with background-clip: text can be a bit of a disaster. The shadow color will basically flood the text, completely covering it up. To avoid this messy situation, we need to use a pseudo-element like ::before or ::after. This lets us apply the text-shadow to the element containing the text, keeping the shadow separate and looking sharp.

In your HTML, you'll need:

<div class="depth-text" data-text="GOLD">GOLD</div>

[Gold Gradient]

Image-Filled Text

Now, here's where you can really start to use your imagination. You can use actual images as text fill. Think about that for a second - your text can be filled with textures, patterns, or even photos. I chose to use an ooey gooey pizza as my background, because, well, who doesn’t like pizza?!

(I wrapped each individual letter in a span element with the image-text class this time)

    .image-text {
        background: url('./pizza.png');
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-family: "Nosifer", sans-serif;
        font-size: 10rem;
        background-size: cover;
    }

[Pizza Background]

Animated Neon Effect

Want something more dynamic? Check out this flickering neon effect:

.neon-pulse {
    position: relative;
    background: linear-gradient(90deg,
        #39ff14,
        #d4ff00,
        #fee715,
        #d4ff00,
        #39ff14
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Train One", sans-serif;
    font-size: 10rem;
    animation: neon-flicker 1.5s infinite;
    text-shadow: 
        0 0 10px rgba(57, 255, 20, 0.7),
        0 0 20px rgba(212, 255, 0, 0.5),
        0 0 30px rgba(254, 231, 21, 0.3);
}

@keyframes neon-flicker {
    0%, 100% { 
        opacity: 1;
        text-shadow: 
            0 0 10px rgba(57, 255, 20, 0.7),
            0 0 20px rgba(212, 255, 0, 0.5),
            0 0 30px rgba(254, 231, 21, 0.3);
    }
    10% {
        opacity: 0.9;
        text-shadow: none;
    }
    10.1% {
        opacity: 1;
        text-shadow: 
            0 0 10px rgba(57, 255, 20, 0.7),
            0 0 20px rgba(212, 255, 0, 0.5),
            0 0 30px rgba(254, 231, 21, 0.3);
    }
    20% { opacity: 0.8; }
    30% { opacity: 1; }
    30.1% { opacity: 0.95; }
    30.5% { opacity: 1; }
    85% { opacity: 1; }
    85.1% { opacity: 0.8; }
    85.2% { opacity: 1; }
}

[Neon Pulse]

Holographic Wave Effect

Here's a smooth, wave-like holographic effect:

.holo-text {
    background: linear-gradient(90deg,
        #003973 0%,
        #0085c7 20%,
        #00d4ff 40%,
        #4dd0e1 60%,
        #0085c7 80%,
        #003973 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Aladin", sans-serif;
    font-size: 10rem;
    animation: wave 4s linear infinite;
}

@keyframes wave {
    to { background-position: 200% center; }
}

[Holographic Wave Effect]

Sunset Gradient Effect

Finally, here's a beautiful sunset-inspired gradient:

.sunset-text {
    background: linear-gradient(180deg,
        #ffef00 0%,
        #ffd700 15%,
        #ffa500 30%,
        #ff8c00 45%,
        #ff6b6b 60%,
        #ff4500 75%,
        #4b0082 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Climate Crisis", sans-serif;
    font-size: 10rem;
}

[Sunset Gradient]

Key Insights

1. The text transparency trick: Setting color: transparent is crucial but can be confusing at first. You might wonder "why make the text invisible?" But this is exactly what allows our backgrounds to show through. Without this step, the text color would sit on top of our beautiful gradients and images.

2. Background clipping: The background-clip: text property (and its webkit prefix version) is what creates the "mask" effect. It tells the browser "only show the background where there are text characters." This is different from a regular background that would fill the whole container. This relationship between transparent text and background clipping is what makes everything come together.

3. Layering and depth considerations:

   • Positioning and z-index: Use position: relative when working with pseudo-elements, and pay attention to your z-index values. The main text element should have a higher z-index than any shadows or effects created with pseudo-elements (that's why we used z-index: -1 on the ::before element in our gold effect). This layering ensures our effects appear in the correct order and don't accidentally cover up our main text.

   • Text shadow pitfalls: When applying background-clip: text, directly adding a text-shadow can lead to unexpected color flooding. To avoid this, use a pseudo-element (like ::before or ::after) and apply the text-shadow to that element. This keeps the shadow effect separate and prevents the text from being obscured.

   • Text matching is critical: When using the depth effect, the data-text attribute must match your text verbatim.

4. Animation considerations: For animated effects, experiment with different durations and timing functions. This becomes especially important when creating effects like our neon flicker or holographic wave, where the timing can make or break the visual impact.

Making It Responsive

All these effects work with responsive units. Just adjust the font-size using viewport units or clamp():

.responsive-effect {
    font-size: clamp(2rem, 10vw, 10rem);
}

The Complete HTML

Here's the complete HTML structure you'll need:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Aladin&family=Bagel+Fat+One&family=Climate+Crisis&family=Moirai+One&family=Monoton&family=Nosifer&family=Train+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Text Effects Demo</title>
</head>
<body>
    <div class="gradient-text">RAINBOW</div>

    <div class="depth-text" data-text="GOLD">GOLD</div>

    <div>
        <span class="image-text">P</span>
        <span class="image-text">I</span>
        <span class="image-text">Z</span>
        <span class="image-text">Z</span>
        <span class="image-text">A</span>
    </div>

    <div class="neon-pulse">NEON</div>

    <div class="holo-text">OCEAN</div>

    <div class="sunset-text">SUNSET</div>
</body>
</html>

Let's See What You Create!

Now it's your turn! Try combining these effects or creating your own variations. Here are some ideas to get you started:

• Mix different gradient angles

• Try different animation timing patterns

• Experiment with various font combinations

• Create theme-specific gradients

Drop a comment below with your creations! You can also connect on BlueSky, or on my website, devmansam.net, if you come up with something cool!

Thanks for stopping by.

P.S. All of the typefaces used are available free of charge at https://fonts.google.com .