What's new in Web Dev this month?

Hello Devs 👋

I hope everyone's doing great. The landscape of web development is constantly evolving, bringing new tools and features that enhance the capabilities of developers and the experiences of users. Recently, JavaScript has introduced several powerful methods for working with Set objects, now supported across all major browsers. These new methods simplify common operations such as intersections, unions, and differences, making Set manipulations more efficient and intuitive. Meanwhile, advancements in CSS have expanded gradient colour interpolation options, and experimental features in browsers like Chrome Canary are pushing the boundaries with built-in AI capabilities. Additionally, the approval of ECMAScript 2024 has introduced innovative ways to handle promises, marking another significant step forward in JavaScript development. In this article, we will explore these exciting updates and what they mean for developers.

1. New SET methods are widely available

Set objects in JavaScript now come with a lot of useful methods that are supported in all major browsers

Sure, here are the completed examples for each method:

intersection()

The intersection method returns a new set containing the elements that are present in both sets.

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const intersectionSet = setA.intersection(setB);
// Set {2, 4, 6}
console.log(intersectionSet);

union()

The union method returns a new set containing all elements from both sets, without duplicates.

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const unionSet = setA.union(setB);
// Set {1, 2, 3, 4, 5, 6, 8, 10}
console.log(unionSet);

difference()

The difference method returns a new set containing the elements that are present in the first set but not in the second set.

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const differenceSet = setA.difference(setB);
// Set {1, 3, 5}
console.log(differenceSet);

isSupersetOf()

The isSupersetOf method returns a boolean indicating whether the first set is a superset of the second set.

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6]);

const isSuperset = setA.isSupersetOf(setB);
// true
console.log(isSuperset);

isDisjointFrom()

The isDisjointFrom method returns a boolean indicating whether the two sets are disjoint (i.e., have no elements in common).

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([7, 8, 9, 10]);

const isDisjoint = setA.isDisjointFrom(setB);
// true
console.log(isDisjoint);

symmetricDifference()

The symmetricDifference method returns a new set containing the elements that are present in either of the sets but not in both.

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const symmetricDifferenceSet = setA.symmetricDifference(setB);
// Set {1, 3, 5, 8, 10}
console.log(symmetricDifferenceSet);

isSubsetOf()

The isSubsetOf method returns a boolean indicating whether the first set is a subset of the second set.

const setA = new Set([2, 4, 6]);
const setB = new Set([1, 2, 3, 4, 5, 6, 8, 10]);

const isSubset = setA.isSubsetOf(setB);
// true
console.log(isSubset);

With these methods, you can perform various set operations conveniently in JavaScript.

2. Color Interpolation for gradients landed in Firefox

Firefox is the last of the browsers to fully support the feature, where you can interpolate a colour in CSS Gradients in different spaces, other than just traditional RGB.

//before
.item {
     background: linear-gradient(to right, red, blue);
}

//now
.item {
     background: linear-gradient(in hst to right, red, blue);
}

3. Built-in AI in your browser?

Google Chrome is experimenting with a new web API that aims to bring a language model accessible through JavaScript on the browser. This API has been shipped to Chrome Canary build.

// Assume inputText is a string containing the text you want to prompt the AI with.
const inputText = "What is the capital of France?";

async function useAI() {
    try {
        // Create a text session with the AI
        const session = await window.ai.createTextSession();

        // Get a streaming response from the AI
        const result = session.promptStreaming(inputText);

        // Initialize an empty string to collect the response
        let aiResponse = "";

        // Iterate over the streamed chunks of the result
        for await (const chunk of result) {
            // Append each chunk to the response
            aiResponse += chunk;
            // Optionally, you can log each chunk as it is received
            console.log(chunk);
        }

        // Log the complete response
        console.log("AI Response:", aiResponse);
    } catch (error) {
        console.error("Error using AI:", error);
    }
}

// Call the function to use the AI
useAI();

This example does the following:

• Input Text: Specifies the input text for the AI model.
• AI Session Creation: Uses window.ai.createTextSession() to create a session with the AI model.
• Prompt Streaming: Sends the input text to the AI model and starts receiving the response in chunks using session.promptStreaming(inputText).
• Collect Response: Iterates over the streamed chunks, collecting them into a single response string.
• Log Response: Logs each chunk as it is received and the complete response after all chunks are received.
• Error Handling: Includes a try-catch block to handle any potential errors during the process.

*Tip: * Ensure you have the latest version of Chrome Canary and that any necessary experimental flags or permissions are enabled to use this new API.

4. ECMAScript2024 has been approved!

Some new features have been approved as a part of the formal JavaScript specification by ECMS General Assemble - including a new way to declare promises

const { promise, resolve, reject } = Promise.withResolvers()

As the web development landscape continues to advance, staying updated with the latest features and tools is essential for developers. The new Set methods in JavaScript provide powerful and intuitive ways to handle set operations, enhancing code efficiency and readability. CSS improvements, such as color interpolation for gradients, offer more creative control for designers. The experimental AI integration in Chrome Canary opens new possibilities for interactive web applications. Lastly, ECMAScript 2024's approval introduces promising enhancements, particularly in how promises are managed. Embracing these innovations will not only streamline development workflows but also enable the creation of more dynamic and responsive web applications. As we look forward to future advancements, these updates represent significant steps toward a more powerful and versatile web development environment.

Happy Coding 👋