Even a simple password can add a basic layer of protection if full security isn't a priority, making this method an easy yet effective way to prevent accidental exposure of sensitive information.

If you want to encrypt you .env files with a password with the crypto module built in to node then use this script and follow this process.

postinstall.js

const crypto = require('node:crypto');
const fs = require('node:fs');
const readline = require('node:readline');

// Check if running in production based on CONTEXT or VERCEL_ENV
if (
  process.env.VERCEL_ENV?.toLowerCase() === 'production' ||
  process.env.CONTEXT?.toLowerCase() === 'production'
) {
  console.log(
    'Production environment detected. Skipping encryption/decryption.'
  )
  process.exit(0) // Exit the script without running any further
}

// Continue with the rest of your script if not in production
console.log(
  'Not in production environment. Proceeding with encryption/decryption.'
)

console.log('process.env')
console.log(process.env)

// Helper function to prompt for a password
function promptPassword(question) {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    terminal: true
  });

  return new Promise((resolve) => {
    rl.question(question, (password) => {
      rl.close();
      resolve(password);
    });
  });
}

// Function to encrypt the .env file
async function encryptFile(password) {
  const envContent = fs.readFileSync('.env', 'utf8');
  const iv = crypto.randomBytes(16);
  const key = crypto.scryptSync(password, 'salt', 32);
  const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
  let encrypted = cipher.update(envContent, 'utf8', 'hex');
  encrypted += cipher.final('hex');

  const encryptedContent = `${iv.toString('hex')}:${encrypted}`;
  fs.writeFileSync('.env.enc', encryptedContent);
  console.log('.env file encrypted and saved to .env.enc');
}

// Function to decrypt the .env.enc file
async function decryptFile(password) {
  const encryptedContent = fs.readFileSync('.env.enc', 'utf8');
  const [ivHex, encryptedData] = encryptedContent.split(':');
  const key = crypto.scryptSync(password, 'salt', 32);
  const decipher = crypto.createDecipheriv('aes-256-cbc', key, Buffer.from(ivHex, 'hex'));

  let decrypted = decipher.update(encryptedData, 'hex', 'utf8');
  decrypted += decipher.final('utf8');
  fs.writeFileSync('.env', decrypted);
  console.log('.env file restored from .env.enc');
}

// Main logic to check file existence and perform encryption/decryption
(async () => {
  const envExists = fs.existsSync('.env');
  const envEncExists = fs.existsSync('.env.enc');

  if (envExists && !envEncExists) {
    // If .env exists but .env.enc does not, encrypt .env
    console.log('.env exists but .env.enc does not. Encrypting .env...');
    const password = await promptPassword('Enter password to encrypt .env: ');
    await encryptFile(password);
  } else if (envEncExists && !envExists) {
    // If .env.enc exists but .env does not, decrypt .env.enc
    console.log('.env.enc exists but .env does not. Decrypting .env.enc...');
    const password = await promptPassword('Enter password to decrypt .env.enc: ');
    try {
      await decryptFile(password);
    } catch (error) {
      console.error('Decryption failed. Please check the password and try again.');
    }
  } else {
    console.log('No action needed. Either both or neither .env/.env.enc files exist.');
  }
})();

you would then modify the package.json file to include 1 line

"scripts": {
    "build": "hugo && node postinstall.js",
    "dev": "npm run server",
    "server": "node postinstall.js && hugo server",
    "postinstall": "node postinstall.js"
  }

now you can check in your code with your private information encrypted.

How it works

This postinstall.js script helps keep sensitive information in your project safe by automatically encrypting and decrypting environment variables stored in a .env file.

Here’s How It Works:

1. Encryption and Decryption in One Place: The script has both functions needed to protect your .env file — it can either turn it into a secure, unreadable file called .env.enc (encryption) or turn .env.enc back into a readable .env file (decryption).

2. Automatic Checks:

   • If it finds only .env, it knows you need to encrypt it and will prompt you for a password. This password "locks" the file so others can’t easily read it.

   • If it finds only .env.enc, it knows you want to decrypt it and will prompt for the password again to "unlock" it.

3. Password Prompt: The script asks for a password whenever it encrypts or decrypts, so you keep control over your sensitive information.

4. Integrated into Your Project: By adding this to your project’s postinstall script, it will run automatically after installing packages. This way, your environment files stay safe without extra manual steps.

In short, the script handles everything you need to protect your environment variables with simple commands and prompts!

By implementing this method, developers can enhance the security of their environment variables, safeguarding sensitive information throughout the development cycle.

In CSS, fonts are categorized into five distinct families:

1. Serif fonts: These fonts are characterized by tiny strokes at the terminations of each letter. They exude a feeling of sophistication and classic elegance.

2. Sans-serif fonts: Noted for their smooth lines without the additional strokes, these fonts give off a contemporary and minimalist vibe.

3. Monospace fonts: In this font family, every letter has a consistent fixed width, offering a structured and machine-like aesthetic.

4. Cursive fonts: These fonts are designed to resemble fluid human handwriting, giving a personal touch.

5. Fantasy fonts: As the name suggests, these are ornamental and whimsical fonts that add a playful element to the design.

Usually, serif fonts are preferred for prominent text such as headlines, due to their distinctiveness. On the other hand, sans-serif fonts are often chosen for the bulk of website content because they are simpler and easier on the eyes for reading. When showcasing computer code, monospace fonts are the go-to choice because of their consistent character width.

A font stack or font stacking is a list of fonts in the CSS font-family declaration. The fonts are listed in order of preference that you would like them to appear in case of a problem, such as a font not loading.

Here's an example:

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

In the above example:

1. The browser will first try to use "Helvetica Neue".

2. If "Helvetica Neue" is not available, it will try to use "Helvetica".

3. If "Helvetica" is not available either, it will try "Arial".

4. If none of the above fonts are available, it will default to the generic sans-serif font available on the system.

Font stacking ensures that the webpage appears as consistent as possible across different devices and browsers by providing fallback options.

Font Pairing

Font pairing is the strategy of merging two or more fonts in a design for harmony and readability. Often, contrasting fonts, such as a serif for headings (H1-H6) and a more legible sans-serif for body text, are chosen to distinguish different textual elements effectively. This is more art and can take some experimenting but think serif for the heading and sans-serif for normal text.

Leading, Kerning and Tracking

The term "leading" in typography is pronounced like "ledding" (rhymes with "wedding"). It originates from the days of hand-typesetting when strips of lead were placed between lines of type to increase the vertical distance between them, hence increasing the line spacing. The use of these lead strips allowed typographers to adjust the visual space between lines of text, making it easier to read and more aesthetically pleasing.

In modern typography, especially in digital design, "leading" refers to the distance between the baselines of consecutive lines of text. Even though we no longer use physical strips of lead in typesetting, the term has persisted and is now used to describe line spacing in both print and digital media. Adjusting the leading is crucial for ensuring readability and achieving the desired visual effect in textual content.

Quick Definitions

1. Leading: Refers to the vertical spacing between lines of text.

2. Kerning: Adjusts the space between specific letter pairs to improve visual appeal.

3. Tracking: Modifies the uniform spacing between all characters in a block of text.

Relevant CSS Property for leading: line-height

body {
  font-size: 18px;
  line-height: 1.5;  /* 1.5 times the font size */
}

This means the space from one baseline to the next will be 1.5 times the size of the current font. While you can use rems and pixels as a unit for line-height, it best to keep in unitless.

Kerning vs Tracking

According to Adobe

Kerning is the process of adding or subtracting space between specific pairs of characters. Tracking is the process of loosening or tightening a block of text.

Looking more into this around the Internet, it seems most people get both terms confused and use them interchangeably perhaps in part because with CSS we have limited control of the space between characters.

The letter-spacing css property

• Description: letter-spacing specifies the spacing between individual characters in text.

• Example:

    h1 {
      letter-spacing: 2px;
    }
  

  This will add a spacing of 2 pixels between each character in <h1> elements.

Quick Summary CSS Spacing Adjustments

In conclusion, there are two primary methods to modify character spacing:

1. Adjust the horizontal spacing between characters with the letter-spacing property.

2. Modify the vertical spacing between lines using the line-height property.

Quiz on Kerning, Tracking and Leading

Web Safe Fonts vs. Web Fonts: Understanding the Distinction

Arial, Verdana, Georgia, Times New Roman, and Courier are all examples of "web safe fonts". These fonts are pre-installed on almost every computer, device, and operating system.

Going by a slightly different name; Web fonts are hosted online and are downloaded by your browser when displaying a webpage. Web fonts, are either uploaded to your site for self-hosting or you could rely on a third-party services such as Google Fonts or Adobe Fonts.

Web font example - Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Use the Font in Your CSS:

• Now, in your CSS, you can specify "Roboto" as the font-family for any element.

body {
    font-family: 'Roboto', sans-serif;
}

The result is that when someone visits your website, their browser will download the "Roboto" font from Google Fonts and display the text in that font. This ensures that even if the visitor doesn't have "Roboto" installed on their machine, they'll still see the text in the desired font.

CSS commands for common text formatting

Bolding, italizicing, and underling are the three most common ways to manipulate text on the web. Here is a quick run down of how these operation work in CSS.

1. Bold:

   • CSS Property: font-weight

   • Values:

     • normal: Default weight (often equivalent to 400).

     • bold: Bold weight (often equivalent to 700).

     • Numeric values ranging from 100 (thinnest) to 900 (thickest). Not every font will have all weights, but commonly used weights include 300 (light), 400 (regular/normal), 500 (medium), 700 (bold), and 900 (extra bold).

   • Example:

       p.light-text {
           font-weight: 300;
       }
       p.bold-text {
           font-weight: 700;
       }
     

     The first rule will render the text in <p class="light-text"> with a light weight, and the second rule will render the text in <p class="bold-text"> as bold.

2. Italic:

   • CSS Property: font-style

   • Value: italic

   • Example:

       p {
           font-style: italic;
       }
     

     This will make the text inside the <p> element italicized.

3. Underline:

   • CSS Property: text-decoration

   • Value: underline

   • Example:

       p {
           text-decoration: underline;
       }
     

     This will underline the text inside the <p> element.

When using numeric values for font-weight, it's important to ensure that the specific font you're using supports the desired weight. Some fonts might only offer a limited range of weights.

<strong> and <em> HTML tags explained

In the early days of web design, visual formatting was often mixed with content. Tags like (for bold) and (for italic) were used. However, as the web evolved, there was a shift towards separating content from its presentation. This led to the development of tags that conveyed the semantic meaning or intent behind the formatting, rather than just the visual style.

<strong> vs. <b>

The <strong> tag was introduced to emphasize the importance of a piece of text, not just to make it bold. While visually, it often appears similar to the <b> tag (bold), the semantic meaning is different. implies that the enclosed text has strong importance within its context.

<em> vs. <i>

Similarly, the <em> tag was designed to indicate emphasis, whereas the <i> tag was purely for italicizing text. The <em> tag conveys that the text should be emphasized in its context, often making it stand out for emphasis.

Text Formatting with text-transform

The text-transform property allows us to adjust the casing of our text:

• For UPPERCASE:

    text-transform: uppercase;
  

• To Capitalize Initial Letters:

    text-transform: capitalize;
  

Why opt for text-transform instead of editing the HTML directly? By using CSS, we maintain the original text casing. Should we decide to revert from ALL CAPS in the future, we'd face a tedious task if we modified the HTML—having to edit each occurrence. With CSS, a single declaration change does the trick!

Adjusting Text Alignment with text-align

How do we handle the alignment of our text?

The text-align property lets us set horizontal positioning for characters. Here's how it's implemented in CSS:

p.left {
  text-align: left;
}
p.right {
  text-align: right;
}
p.center {
  text-align: center;
}

Using this CSS, the alignment of paragraphs in HTML would be:

<p class="left">
  This paragraph defaults to "left" alignment.
</p>
<p class="right">
  Contrarily, this one shifts to the right, reversing the default.
</p>
<p class="center">
  And this centers the content.
</p>

Although text-align can be used for aligning elements like images, it's typically best suited for text. For aligning non-text elements, other CSS techniques are more appropriate.

Final Test on text-transform, text-align and semantics meanings

Relevant Links

• Game to learn about Kerning - https://type.method.ac/#

• Abode on Kerning and Tracking - https://helpx.adobe.com/indesign/using/kerning-tracking.html

• https://fonts.google.com/ (Web Fonts)

• Absolute Lengths - where the units are fixed

  • px for pixels ( Note: pixels are relative to the viewing device. )

  • cm for centimeters

• Relative Lengths - where units are expressed relative to another length property.

  • em - relative to the font-size of the element itself

  • rem - relative to the root element.

  • vw - relative to 1% of width of viewport ( browser window size )

  • vh - relative to 1% of height of viewport (browser window size)

  • vmin - relative to 1% of the smaller of the viewport's width and height. Look at both the width and the height and use whichever is shorter.

vmin In More Detail

vmin is a unit in CSS that is used to specify a size in terms of the viewport dimensions. It represents the smaller of vw (viewport width) and vh (viewport height).

Here's how it works:

• 1 vmin is equivalent to 1% of the smaller of the viewport's width and height.

For example, if the viewport (browser window) is 800px wide and 600px tall, then:

• 1 vw (1% of viewport width) = 8px

• 1 vh (1% of viewport height) = 6px

In this case, 1vmin would be equal to 6px since it's the smaller value between vw and vh.

Practical Examples

1. Text resizing based on viewport: If you want text to resize based on the viewport dimensions but you always want to use the smaller value, you can use vmin.

    h1 {
        font-size: 10vmin;  /* The font size will be 10% of the smaller viewport dimension */
    }
   

   So, if your viewport was 1000px by 700px, the font size would be 70px (since 700px is the smaller dimension and 10% of 700 is 70).

2. Creating a responsive square: If you want to create a square that maintains its shape (equal width and height) while resizing based on the viewport dimensions, you can use vmin for both width and height.

    .responsive-square {
        width: 50vmin;
        height: 50vmin;
        background-color: #ff5733;
    }
   

   In a 1200px by 800px viewport, the square would be 400px by 400px.

3. Responsive background icon: If you have a background icon and you want it to resize with the viewport, but never get too big relative to the screen size, you can use vmin:

    .icon-background {
        background: url('icon.png') no-repeat center/20vmin;
    }
   

   Here, the background icon size will be 20% of the smaller viewport dimension.

In general, vmin is useful in responsive designs where you want to ensure that elements resize proportionally to the smallest viewport dimension. Caveat: it's important to be cautious as using vmin extensively might lead to design issues on extreme aspect ratios (very wide or very tall viewports).

Rem vs Em Units

Both rem and em are relative font-size units in CSS. Here's a brief overview of each:

1. em:

   • The value of 1em is equal to the font-size of the element on which it's used.

   • If you use em on nested elements, it can compound, as em will be relative to the font-size of its direct parent.

Example:

    div {
        font-size: 16px; 
    }

    span {
        font-size: 2em;  /* This will be 32px, as it's 2 times the font-size of its parent (div) */
    }

1. rem:

   • Stands for "Root em".

   • The value of 1rem is always equal to the font-size of the root element, usually the <html> element.

   • It doesn't compound the way em does, because it always refers to the root element's font size, not any parent element.

Example:

    html {
        font-size: 16px;
    }

    div {
        font-size: 2rem;  /* This will always be 32px regardless of its parent's font-size, because it's based on the root font-size */
    }

Which is preferred and why?

Both units have their places in design and development, but rem has become more popular for a few reasons:

1. Consistency: As rem is always relative to the root element's font size, it offers a consistent and predictable scaling across the website. With em, it's easy to accidentally compound sizes in nested elements, leading to unexpected results.

2. Ease of Global Resizing: By changing the font-size on the root element, you can easily scale the entire website's sizing (when rem units are used), which can be handy for theming or accessibility features.

3. Clarity: When other developers inspect or collaborate on the code, using rem offers clarity as they can always refer to the root's font-size to understand the unit's actual pixel value.

However, em is still valuable in certain scenarios:

1. Component-Level Scaling: If you're creating a reusable component (like a widget or a module) and you want its inner elements to scale based on the component's base size, em is very handy. Adjusting the component's font-size will proportionally scale all its inner elements set with em units.

2. Vertical Rhythm and Typography: em can be useful for maintaining vertical rhythm in typography or setting spacing related directly to font size, like margins or paddings.

In conclusion, while both rem and em have their use cases, most developers prefer rem for general layout and component sizing because of its consistency and predictability. However, its good to know the ins and outs of both rem and em.

Percentage Unit in CSS

In CSS, the percentage (%) unit is a relative unit that represents a portion of a particular reference value. The meaning of the percentage value and its reference point can vary depending on the property with which it's used.

Here's how the percentage unit is commonly interpreted with various CSS properties:

1. Width & Height:

   • The percentage value is relative to the width or height of the parent element.

       .container {
           width: 300px;
           height: 200px;
       }
     
       .child {
           width: 50%;  /* This will be 150px */
           height: 50%; /* This will be 100px */
       }
     

2. Padding & Margin:

   • For padding-top, padding-bottom, margin-top, and margin-bottom: The percentage is relative to the width of the containing element.

   • For padding-left, padding-right, margin-left, and margin-right: The percentage is also relative to the width of the containing element.

     This behavior might seem counterintuitive, especially for top and bottom paddings/margins, but it ensures consistent spacing in responsive designs.

       .container {
           width: 300px;
       }
     
       .child {
           padding-top: 10%;  /* This will be 30px */
       }
     

3. Font-Size:

   • The percentage value is relative to the parent element's font size.

       .parent {
           font-size: 16px;
       }
     
       .child {
           font-size: 150%;  /* This will be 24px (150% of 16px) */
       }
     

4. Line-Height:

   • When used with line-height, the percentage is relative to the current element's font size.

       p {
           font-size: 16px;
           line-height: 150%;  /* This will be 24px (150% of 16px) */
       }
     

5. Background Position:

   • Specifies the position of a background image. A value of 0% aligns the top or left side of the image with the corresponding top or left side of the container. 100% aligns the bottom or right side of the image with the corresponding bottom or right side of the container.

   • See more detail here --> https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

6. Others:

   • Percentage values in other properties, such as background-size or transform, have their specific reference points, and you'd need to refer to the respective property definition to understand the behavior.

Advantages of using percentages:

1. Responsiveness: Percentage units are inherently responsive. They adapt based on the size of their reference, which often is a parent or containing element.

2. Fluid Layouts: They're essential for creating fluid grid systems, especially before the widespread use of CSS Grid and Flexbox.

3. Scalability: Makes it easier to scale elements uniformly, like in zooming or theming scenarios.

When designing with percentages, it's crucial to understand the context and the reference point from which the percentage derives its actual computed value.

Helpful links

• https://gist.github.com/basham/2175a16ab7c60ce8e001 ( CSS Units Best Practices)

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-position (Background Position)

1. Named Colors: CSS includes a predefined set of named colors, like red, blue, yellow, etc. There are approximately 140 standard color names.

   • Here are the colors sorted by their names: https://www.w3schools.com/colors/colors_names.asp

   • The popular CSS library Tailwind also includes its own set of named colors listed here: https://v2.tailwindcss.com/docs/customizing-colors

2. Hexadecimal (Hex) Notation: Colors can be defined using a # followed by a 6-digit hexadecimal value. For example: #FF0000 is red. Shortened 3-digit hex codes can also be used, such as #F00 for red or #FFF for white.

3. RGB: Stands for Red, Green, and Blue. Colors can be defined using the rgb() function, for instance: rgb(255,0,0) is red and rgb(255,255,255) is white

   • RGB notation is decimal notation as compared to Hexadecimal notation

   • 255 decimal is equivalent to FF Hexadecimal

4. RGBA: The 'A' stands for Alpha (opacity). The rgba() function lets you specify colors with opacity. For instance: rgba(255,0,0,0.5) is semi-transparent red.

5. HSL: Stands for Hue, Saturation, and Lightness. An example is hsl(0, 100%, 50%) which represents red.

   1. The HSL color model, which stands for Hue, Saturation, and Lightness, provides a more intuitive way to represent and manipulate colors compared to the RGB model. In HSL, 'Hue' determines the type of color and is represented as an angle from 0° to 360°, where common values like 0° signify red, 120° for green, and 240° for blue. 'Saturation' defines the intensity or purity of that hue, with values ranging from 0% (a shade of gray) to 100% (the fullest color). Lastly, 'Lightness' describes the brightness of the color, where 0% is black, 100% is white, and 50% exhibits the most authentic hue. Together, these three components allow for an intuitive understanding of color.

6. HSLA: Similar to HSL but with an Alpha (opacity) channel, for example: hsla(0, 100%, 50%, 0.5)

The Color Wheel

The concept of the color wheel dates back to Sir Isaac Newton's experiments in 1666. Using a prism, he discovered that white light disperses into various colors of the visible spectrum. To illustrate this, he arranged these colors in a circular manner, laying the foundation for the modern color wheel. Over the centuries, artists have adapted this concept to better understand color mixing, defining primary colors, from which all other shades could be derived, and secondary colors, the result of blending two primaries. For example, mixing red and blue gives the color purple.

HSL Model of Understanding Color

Going back to the HSL model we can think of Hue as a circular color wheel:

• Red sits at 0° (or 360°, as it's a circle).

• Green is at 120°.

• Blue is at 240°.

Saturation tells us how vibrant or muted the color is, with 0% being gray and 100% being the most vibrant.

Finally, Lightness adjusts the shade from black (0%) to the true hue (50%) to white (100%). So, by playing with HSL values, you can pinpoint any color you want on this wheel.

Given this information on HSL and remembering mixing red and blue make purple. We can intuitively guess that purple would be between 240 and 360 degrees on the Hue color wheel. However, the exact hue value can vary depending on the specific shade of purple you're referring to, as "purple" can encompass a range from a more bluish-violet to a reddish-magenta.

Visual Color Picker

W3schools website has a nice chart for easily picking out colors as well as translating colors between the various syntaxes. Take a look at it and play around.

https://www.w3schools.com/colors/colors_picker.asp?colorhex=34568B

Top 7 usages of the keyword color in CSS

The keyword color in CSS is primarily used to define text color, but its influence doesn't stop there. Here are the top 7 usages of the keyword color in CSS:

1. Text Color:

   • The color property is used to define the color of text. For instance:

       p {
         color: blue;
       }
     

This would set the color of the text inside all <p> elements to blue.

1. Background Color:

   • The background-color property is used to define the color of the background. For instance:

       p {
         background-color: green;
       }
     

This would set the background color of the text inside all <p> elements to green.

1. Border Color:

   • The border-color property is used to define the color of a border. For instance:

       p {
         border-color: green;
       }
     

This would set the background color of the text inside all <p> elements to green.

1. currentColor:

   • currentColor is a special keyword in CSS that represents the computed value of the color property for a given element. This can be used with other properties to maintain consistency. For example:

       button {
         color: red;
         border: 2px solid currentColor;
       }
     

Here, the border of the button will be the same color as the text (red).

1. SVG Styling:

   • SVG (Scalable Vector Graphics) often uses the color property to influence certain parts of its styling. For example, the fill and stroke properties in SVG can inherit the color set by the color property:

       svg {
         color: green;
       }
     
       path {
         fill: currentColor;
       }
     

This would set the fill color of the SVG path elements to green.

1. List Marker Color:

   • The color property can influence the color of list markers (bullets or numbers) in unordered and ordered lists.

       ul {
         color: purple;
       }
     

This would set the color of the list markers in an unordered list to purple.

1. Pseudo-elements:

   • The color property can also be applied to pseudo-elements like ::before and ::after, influencing the color of content generated by these pseudo-elements.

       div::before {
         content: "★";
         color: gold;
       }
     

This would prepend a gold star symbol to the content of a <div>.

While the primary usage of the color property is for text styling, its influence extends to various other areas, making it an integral part of CSS.

CSS Variables and Colors

With the advent of CSS custom properties, it's now possible to define color variables for reuse throughout your stylesheets. For example: --main-bg-color: #FF5733; and then use var(--main-bg-color) to apply it.

Color Functions, SASS and LESS

CSS has introduced color-modifying functions like lighten(), darken(), and saturate() but currently, these are mostly used with CSS preprocessors like SASS or LESS. However, in the future expect to see more direct color manipulation within CSS itself with CSS Color Module Level 4. Info here --> https://www.w3.org/TR/css-color-4/

Dark Mode, CSS color and more

Adapting your website's colors for dark mode involves responding to a user's system preference with the prefers-color-scheme media query in CSS. Here's a brief explanation:

1. Detecting Dark Mode: Use the prefers-color-scheme media query to detect if a user has chosen a dark or light interface theme in their system settings.

    /* Light mode styles (default) */
    body {
        background-color: white;
        color: black;
    }
   
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }
   

2. CSS Variables for Flexibility: To make switching between color schemes smoother and more manageable, consider using CSS custom properties (variables).

    /* Define default (light mode) colors */
    :root {
        --background-color: white;
        --text-color: black;
    }
   
    /* Override for dark mode */
    @media (prefers-color-scheme: dark) {
        :root {
            --background-color: black;
            --text-color: white;
        }
    }
   
    body {
        background-color: var(--background-color);
        color: var(--text-color);
    }
   

3. Additional Considerations for dark mode:

   • When designing for dark mode, it's not just about inverting colors. It's essential to ensure that colors maintain proper contrast for readability.

   • Consider other elements like images, borders, and shadows. They might also need adjustments for dark mode to ensure a harmonious appearance.

   • Some websites provide a toggle button for users to switch between light and dark modes manually, overriding the system preference. Implementing this requires a bit of JavaScript along with CSS.

With these basics, you can start adapting your website to be more user-friendly in both light and dark environments.

The Tailwind CSS Frameworks & Dark Mode:

Modern CSS frameworks, such as the popular Tailwind CSS, have significantly simplified the process of implementing dark mode. Tailwind, for instance, provides utility classes that can be easily toggled based on user preferences without writing custom media queries. By configuring your Tailwind setup and adding a simple dark variant, you can prepend your utility classes with dark: to style elements specifically for dark mode. This streamlined approach not only reduces the amount of custom CSS required but also ensures a more consistent and maintainable codebase.

nav {
  /* Here we have an element selector - making text blue in
    this section */
   color: blue;
}

#standout {
    /* here we have an ID selector making the element 
    tagged with the id of standout  have a dotted red border */
    border: 1px dotted red;
}

.pink {
     /* here we have a class selector making all elements
     with class="pink" have a pink background */
    background-color: pink;
}

CSS combinator selectors help us to specify the exact element we would like to select based on the specific relationship between each selector. The term "combinator" refers to the character we use to combine CSS selectors. A few examples are in order.

Note: there are four different combinators in CSS as of this writing.

• descendant selector (space)

• child selector (>)

• adjacent sibling selector (+)

• general sibling selector (~)

nav p { background-color: green; }
/* descendant selector (space)   target all elements that are
descendants of a specified element. all p tags found in a nav*/

/* child selector  (>)   target all elements that are the 
 children of a specified element.    */
nav > p { background-color: purple;}

/* Adjacent sibling selector (+) target all elements 
immediately following another element.
Siblings have the same parent element  */ 
nav + p { background-color: red;}

/* General sibling selector (~) target all elements that 
share the same parent and come after the first specified element
*/
nav  ~ p {
  background-color: yellow;
}

4 Types of CSS Combinators

• Descendant Combinator (space)

  • Definition and Symbol Representation: A descendant combinator, represented by a space, selects all elements that are descendants of a specified element.

  • Example of Usage: div p { color: red; } — This rule selects all <p> elements inside <div> elements and colors them red.

  • Practical Applications and Scenarios: Use this when you want to target elements nested at any level within another element.

• Child Combinator (>)

  • Definition and Symbol Representation: A child combinator, symbolized by >, selects all elements that are the direct children of a specified element.

  • Example of Usage: div > p { font-weight: bold; } — This rule targets only the <p> elements that are direct children of <div> elements, making their text bold.

  • Practical Applications and Scenarios: Ideal for when you want to affect only the immediate child elements and not elements nested further.

• Adjacent Sibling Combinator (+)

  1. Definition and Symbol Representation: This combinator, indicated by +, targets an element that is directly after (and at the same level as) the first specified element.

  2. Example of Usage: h2 + p { margin-top: 20px; } — This gives a top margin to a <p> element that directly follows an <h2> element.

  3. Practical Applications and Scenarios: Useful when you want to style an element based on its preceding sibling, such as adding spacing or modifying typography.

• General Sibling Combinator (~)

  1. Definition and Symbol Representation: Represented by ~, this combinator targets all elements that share the same parent and that come after the first specified element.

  2. Example of Usage: h2 ~ p { text-indent: 50px; } — This indents all <p> elements that follow an <h2> under the same parent.

  3. Practical Applications and Scenarios: When you have multiple siblings and you wish to style all those that follow a specific element.

CSS Combinator Considerations and Tips

• You are not limited to using a single combinator. They can be chained together for a more detailed selection. For example, div + p > span selects a <span> inside a <p> that directly follows a <div>.

• Keep specificity in mind: More specific selectors have higher priority. Ensure your styles don't get overridden unintentionally. This ties into the next tip. Most likely you will want to keep combinators simple.

• Keep It Simple and Avoid overusing or overcomplicating selectors: Simplify for maintainability and better performance.

Resources for CSS Combinators

• https://www.w3schools.com/css/css_combinators.asp

• https://www.scaler.com/topics/css/css-combinators/

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

Top ten most popular pseudo-classes and what they do

1. : hover

   • Applies styles when the mouse pointer is over an element.

   • Useful for creating interactive and responsive hover effects.

   • Example: https://codepen.io/fieldsmarshall/pen/zYyaPXK

2. : active

   • Applies styles to an element when it's being actively clicked or selected.

   • Often used to give visual feedback when a user clicks a button or link.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezXKV

3. : focus

   • Applies styles to an element that currently has a keyboard focus.

   • Commonly used for styling form elements like input fields when they are selected or focused.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezXWV

4. :nth-child(n)

   • Selects elements based on their position within a parent element.

   • Allows for targeting specific child elements in a list or group.

   • Could use "even" or "odd" to select only even or odd items in an unordered list

   • Example: https://codepen.io/fieldsmarshall/pen/RwEJxoe

5. :not(selector)

   • Selects elements that do not match a specified selector.

   • Useful for applying styles to elements that meet certain criteria while excluding others.

   • Example : https://codepen.io/fieldsmarshall/pen/qBLKpmx

6. :first-child

   • Targets the first child element of its parent.

   • Helpful for styling the first item in a list or a specific element at the beginning of a container.

7. :last-child

   • Targets the last child element of its parent.

   • Useful for styling the last item in a list or a specific element at the end of a container.

8. :nth-of-type(n)

   • Selects elements based on their position within their parent element, considering only elements of the same type.

   • Allows for more precise targeting of specific child elements.

9. :checked

   • Applies styles to radio buttons or checkboxes that are checked.

   • Enables customization of the appearance of selected options in forms.

10. :enabled and :disabled

    • :enabled selects form elements that are currently interactive or enabled for user input.

    • :disabled select form elements that are currently inactive or disabled.

    • Useful for changing the appearance of form fields based on their state.

Reminder: These pseudo-classes offer a way to apply styles to elements based on their state, position, or relationship to other elements, enhancing the styling and behavior of web pages.

Pseudo-Classes vs Pseudo-elements

• Pseudo-elements are like pseudo-classes except they don't target a specific state instead they target a sub-element.

• Pseudo-elements use a double colon

• Pseudo-elements can inject content and style that content ( before and after pseudo-elements)

• There are only 6 pseudo-elements versus around 30 pseudo-classes

All Pseudo-Elements and their common usage

1. ::before

   • Allows you to insert content before the content of the selected element.

   • Commonly used for decorative elements or icons before the text.

   • Can be used for background image overlays

   • Example: https://codepen.io/fieldsmarshall/pen/poqKpQR

2. ::after

   • Similar to ::before, but it inserts content after the content of the selected element.

   • Often used for adding additional content or icons after text.

   • Example: https://codepen.io/fieldsmarshall/pen/YzdvYbM

3. ::first-line

   • Targets the first line of text within a block-level element.

   • Useful for applying styles like font size or color to the initial line of text in a paragraph.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezyGb

4. ::first-letter

   • Targets the first letter of the text within a block-level element.

   • Often used for creating drop caps or applying unique styles to the first letter of a paragraph.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezyGb

5. ::selection

   • Selects and styles the portion of text that a user highlights with their cursor.

   • Useful for customizing the appearance of selected text on a webpage.

   • Example: https://codepen.io/fieldsmarshall/pen/dywKdGE

6. ::placeholder

   • Applies styles to the placeholder text inside an input or textarea element.

   • Useful for changing the color, font, or other properties of the input field's placeholder text.

   • Example: https://codepen.io/fieldsmarshall/pen/dywKdGE

Debugging Pseudo Elements and Pseudo-Classes with Chrome and Firefox

Debugging CSS pseudo-classes and pseudo-elements can be tricky unless you use DevTools on Chrome or Firefox.

Google Chrome, DevTools and Pseudo Classes

1. Open DevTools:

   • Right-click on an element on a page, and select 'Inspect' or press Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac) to open the DevTools.

2. Select an element:

   • Click on the 'Select an element' icon or press Ctrl + Shift + C (Windows/Linux) or Cmd + Shift + C (Mac) to activate the element selection mode, then click on the element you are interested in on the page.

3. Inspect Pseudo-classes:

   • In the "Elements" panel, you can find the "Styles" tab on the right side.

   • Here, you will find a :hov button, clicking this button will allow you to toggle various pseudo-classes like :hover, :active, :focus, etc.

4. Inspect Pseudo-elements:

   • In the same "Styles" tab, you can scroll down to find the pseudo-elements ::before and ::after.

   • Here you can see the styles applied to these pseudo-elements and edit them to see changes in real time.

Tailwind, Bootstrap, pseudo-classes and pseudo-elements

Tailwind makes using pseudo-classes and pseudo-elements easy whereas Bootstrap does pretty much nothing in this regard.

Tailwind and pseudo-classes

Tailwind provides explicit control over pseudo-classes directly within your markup. By using utility classes, developers can apply styles for different states like :hover, :focus, :active, etc., directly to the elements. This explicit control makes it clear at a glance what styles are being applied and under which circumstances.

<!-- Tailwind CSS -->
<button class="hover:bg-blue-500 focus:outline-none">Click me</button>

Above we have an example where hovering will make the background blue and focusing (clicking on the button) will remove the outline.

Tailwind includes modifiers for just about everything you’ll ever need, including:

• Pseudo-classes, like :hover, :focus, :first-child, and :required

• Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection

Special Links for pseudo-classes and pseudo-elements

• W3 Schools links

  • pseudo-classes

  • pseudo-elements

• Helpful YouTube videos

  • https://www.youtube.com/watch?v=FMu2cKWD90g

  • https://www.youtube.com/watch?v=kpXKwDGtjGE

• Tailwind

  • https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes

  • https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-elements

• Code Pen Examples

  • https://codepen.io/collection/RzrQba

As expressed in the pseudo-code below we have a default green background which becomes red at the larger screen width

background-color: green;
if (screen is bigger than 1024 pixels)  
    then with CSS make the background-color: red

Now that you get the idea here we have some sample CSS code that uses a media query code:

body {
    background-color: green;
}

@media (min-width: 800px){
    body {
        background-color: red
    }
}

Media queries can be used to check many things including but not limited to

• viewport width

• viewport height

• type of media device - is it a printer or is it a screen - for example

Mobile first and media queries

Mobile first is the idea/design that suggests we prioritize designing for mobile devices. This is a popular concept used by both Tailwind CSS and Bootstrap ( the two most popular CSS frameworks in 2023). To keep your media queries in line with this paradigm, simply use the min-width directive and only use the min-width directive. See the example below

body {
    /* default green background */
    background-color: green;
}
/* red background 600px and up */
@media(min-width:600px) {
    body { 
        background-color: red;
    }
}
/* purple background 800px and up */
@media(min-width:800px){
    body { 
        background-color: purple;
    }
}

Once the browser reaches a width of 800px all three CSS rules will apply but because of the order only the last rule (background color: purple) will be active.

Observe this concept in action here: https://codepen.io/fieldsmarshall/pen/ExGLWGe

Hiding Content with Media Queries

Another common use of media queries is to hide content using the display:none CSS directive.

Dark mode using media queries

Media queries are a powerful tool in CSS for applying styles based on certain conditions. One application is to detect whether a user has set their preferences to dark mode on their device or browser, and then apply a corresponding dark theme to your webpage. The prefers-color-scheme media feature is used for this purpose. Below are a few quick examples:

1. Detection of Color Scheme Preference:

   • Best Practice Use the prefers-color-scheme media feature in a media query to check if the user has a preference for a dark or light color scheme.

    @media (prefers-color-scheme: dark) {
        /* styles for dark mode */
    }
    @media (prefers-color-scheme: light) {
        /* styles for light mode */
    }

1. Define Dark and Light Mode Styles:

   • Within the curly braces { } of each media query, define the styles that should be applied for dark mode and light mode respectively. This could be as simple as setting different background and text colors, or more complex styling adjustments.

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #121212;
            color: white;
        }
    }
    @media (prefers-color-scheme: light) {
        body {
            background-color: white;
            color: black;
        }
    }

1. Fallback Styles:

   • It’s also a good practice to define a default set of styles outside of the media queries, to act as a fallback in case the prefers-color-scheme media feature is not supported or if the user has not set a preference.

    body {
        background-color: white;
        color: black;
    }

With these steps, you can set up basic detection of dark mode preferences using media queries, and provide a more comfortable viewing experience for your users. As you get more comfortable with media queries, you can explore more complex styling adjustments to better accommodate dark mode preferences.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Testing Media Queries Programmatically

Testing media queries programmatically can be done in several ways depending on the environment and the tools at your disposal. Here are some common methods used to test media queries programmatically:

1. JavaScript:

   • You can use the window.matchMedia() method in JavaScript to test whether a particular media query matches the current state of the document.

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

    if (mediaQuery.matches) {
      // Media query matches
      console.log('User prefers dark mode');
    } else {
      // Media query does not match
      console.log('User does not prefer dark mode or preference is unknown');
    }

    // You can also add an event listener to respond to changes
    mediaQuery.addEventListener('change', (event) => {
      if (event.matches) {
        // The media query now matches
        console.log('User prefers dark mode');
      } else {
        // The media query no longer matches
        console.log('User does not prefer dark mode or preference is unknown');
      }
    });

1. Automated Testing with a Framework:

   • If you are using an automated testing framework like Jest, you might leverage a library such as jest-matchmedia-mock to mock and test media queries.

    import MatchMediaMock from 'jest-matchmedia-mock';

    let matchMedia;

    beforeEach(() => {
      matchMedia = new MatchMediaMock();
    });

    // ...

    test('matches dark mode media query', () => {
      matchMedia.useMediaQuery('(prefers-color-scheme: dark)');
      // Now, your test environment behaves as if the media query matches
      // ...
    });

1. CSS Testing Libraries:

   • Libraries such as "CSSOM" or "jsdom" can be used to simulate a DOM environment and inspect computed styles as a result of media queries. You can then write assertions based on the computed styles to verify the effect of your media queries.

    const { JSDOM } = require('jsdom');

    const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, {
      pretendToBeVisual: true,
      media: '(prefers-color-scheme: dark)',
    });

    // Now you can inspect computed styles as a result of your media queries

These are some of the methods you can use to test media queries programmatically either in the browser or in an automated testing environment. Each method has its own set of considerations, so choose the one that fits your needs and the technologies you are working with.

In the end, the best resource for learning about media queries would be the mozilla documentation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries or https://www.w3schools.com/css/css3_mediaqueries.asp