Future of AI and Programming: Hans discussed the future of AI and programming, emphasizing the importance of communication and storytelling. He predicted significant changes in computing, operating systems, and software, with a focus on natural interfaces and human creativity.

Microsoft Teams Copilot summarizing Hans Scharler’s Talk about the Future of AI and Programming

Here are my predictions… and caveats.

How to Use CSS Custom Properties

Using CSS variables starts with defining them. This is usually done within the :root pseudo-class, meaning the variables are available globally across your HTML document.

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
}

Here, --primary-color and --secondary-color are custom properties holding color values that you can use throughout your CSS. Once defined, you can use these variables anywhere in your stylesheets by referencing them with the var() function.

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

If you are not catching it… Your style code only needs to reference the color variables, and you only have to change the color values in one place!

What are all of the CSS Variables? What are the limitations?

CSS variables can hold almost any value you typically write directly into your CSS rules. This flexibility allows for powerful theming and reusability across your stylesheets. The primary limitation is that CSS variables cannot store CSS selectors or entire CSS rules; they are meant for values only.

Color Values

• Hexadecimal (e.g., #ff6347)
• RGB (e.g., rgb(255, 99, 71))
• RGBA (e.g., rgba(255, 99, 71, 0.5))
• HSL (e.g., hsl(9, 100%, 64%))
• HSLA (e.g., hsla(9, 100%, 64%, 0.5))
• Named colors (e.g., red, blue)

Dimension Values

• Length (e.g., 10px, 2em, 5vh)
• Percentage (e.g., 50%)
• Viewport-based lengths (e.g., vh, vw, vmin, vmax)

Font and Text Values

• Font sizes (e.g., 16px, 1.5rem)
• Font families (e.g., "Times New Roman", Arial)
• Text shadows (e.g., 1px 1px 2px black)
• Font weights (e.g., bold, 700)

Timing Values

• Duration (e.g., 0.3s, 200ms)
• Timing functions (e.g., ease-in, linear)

URLs and Image Values

• Image URLs (e.g., url('path/to/image.jpg'))
• Gradients (e.g., linear-gradient(to right, red, blue))

Miscellaneous and Custom Values

• Border details (e.g., 1px solid black)
• Box shadows (e.g., 10px 10px 5px grey)
• Transformations (e.g., rotate(45deg), scale(1.2))
• Transitions (e.g., all 0.3s ease)
• Grid template areas (e.g., 'header header header')
• Arbitrary numbers (e.g., 300, 0.5), often used in calculations or for defining custom scales
• Custom values of any combination of strings or values (e.g., --custom-shadow: 2px 2px 5px rgba(0,0,0,0.5);)

When to Use CSS Custom Properties

Theming: CSS variables make theming a website incredibly straightforward. You can change your site’s theme by altering the values of your variables.

:root {
    --primary-color: #333;
    --background-color: #fff;
}

[data-theme="dark"] {
    --primary-color: #ccc;
    --background-color: #222;
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
}

Responsive Design: You can use CSS variables to streamline responsive designs. For example, you can define font sizes that change with the viewport size.

:root {
    --base-font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --base-font-size: 14px;
    }
}

body {
    font-size: var(--base-font-size);
}

I’m “with it”.

Discovering CSS variables has opened up a new dimension in CSS for me and is helping me keep up with the times.

Please share what you learn as you learn it. We are in this together.

Live Server is a Visual Studio Code extension that allows developers to run a local development server directly from the editor. It provides a quick and easy way to preview HTML, CSS, and JavaScript files in the browser with live-reloading capabilities. When you change your code, the browser automatically updates without needing to refresh manually. This makes it ideal for fast development and debugging. It also works well with single-page applications and supports multiple file types. With just a right-click on an HTML file and selecting “Open with Live Server,” you can immediately launch a server and start developing.

Live Server Extension in Visual Studio Code Step-by-Step

Step 1: Install the Live Server Extension

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking the Extensions icon on the left sidebar (or press Ctrl+Shift+X).
3. In the search bar, type “Live Server.”
4. Click on the Live Server extension (by Ritwick Dey) and then click the Install button.

Step 2: Open Your HTML File

1. After installing the Live Server extension, open the HTML file you want to run.
2. Right-click on the HTML file in the editor or in the file explorer.

Step 3: Start Live Server

1. Choose the option Open with Live Server from the right-click context menu. This will start a local development server and open your HTML file in your default web browser.
2. The server will automatically update whenever you make changes to the HTML, CSS, or JavaScript files, making debugging easier.

Step 4: Debugging HTML with Developer Tools

1. Once the HTML file is running in the browser, open the browser’s developer tools (press F12 or Ctrl+Shift+I in most browsers).
2. Use the Elements, Console, and Network tabs to debug your HTML, CSS, and JavaScript in real-time.

Step 5: Additional Debugging Options for JavaScript

If you need to debug JavaScript in VS Code, you can also attach a debugger. Here’s how:

1. Install the Debugger for Chrome/Edge Extension (Optional):
   • Install the Debugger for Chrome or Debugger for Edge extension from the VS Code extensions marketplace.
   • This allows you to attach a VS Code debugger to the browser session for step-through debugging.
2. Set Up a Launch Configuration:
   • Go to the Run and Debug view (on the left sidebar or press Ctrl+Shift+D).
   • Click on create a launch.json file.
   • Select Chrome (or Edge) as the environment.
   • A launch.json configuration file will be created, which allows you to configure your debugging session.
   • Set up the URL to point to the Live Server URL (e.g., http://127.0.0.1:5500/index.html).