Exploring Exciting Frontend New Features (October)

Introduction

In the fast-evolving world of web development, staying updated with the latest trends and innovations is crucial. In this blog post, we'll take a concise yet insightful journey through the frontend landscape, highlighting some of the newest features in three key areas of frontend development: HTML, CSS, and JavaScript. You won't want to miss what's in store for the future of frontend development. Let's dive in!

JavaScript: A new method to validate URLs

After years of development, JavaScript now offers a convenient and efficient method for validating URLs. Introducing the canParse method in the URL interface, which enables you to easily check the validity of URLs. Here's how you can use it:

URL.canParse('https://www.fakurian.vercel.com'); // true
URL.canParse('www.fakurian.vercel.com'); // false

But there's more to it! This method also comes with a second parameter, allowing you to validate relative URLs in combination with a base URL. Consider this example:

URL.canParse('/blog', 'https://www.fakurian.vercel.com'); // true
URL.canParse(':blog', 'https://www.fakurian.vercel.com'); // true
URL.canParse('/blog'); // false

However, it's essential to note that as of the time of writing this post, this method may not be supported across all web browsers. To check the compatibility and explore more examples, you can visit here.

As a frontend developer, I've often encountered challenges when dealing with UI components like popovers, tooltips, menus, and more. To ensure their correct and seamless functionality, I've frequently relied on third-party libraries. However, the landscape is changing, and we now have access to a native HTML popover API. Isn't that cool?

This new API empowers us to effortlessly create these UI elements while harnessing the full capabilities of the browser itself. Some of the advantages include:

Layered Display: Popovers automatically appear in a separate layer above other elements, eliminating the need for complex z-index workarounds.
Default Focus: When a popover is opened, the next tab key press automatically directs focus inside the popover, enhancing accessibility.
Keyboard Binding: The popover API includes keyboard bindings, allowing users to close popovers by pressing the "Esc" key.
Light Dismiss Functionality: Users can conveniently dismiss a popover by clicking outside of it, and focus returning to the main page.

These enhancements streamline UI component development and elevate the user experience, all while leveraging the native capabilities of web browsers. It's an exciting development for frontend development!

Now, let's dive into an example to see how we can add a popover to our code. To achieve this, we simply need three steps: the popover attribute on the container element, an id, and the popovertarget attribute pointing to that id. It's that straightforward, and there's no need for any JavaScript. Plus, it's highly customizable with our own styles.

<button popovertarget="my-popover">Open Popover</button>
 
<div id="my-popover" popover>
  <p>I am a popover</p>
</div>

The popover attribute can take one of three values: "auto," "default," or "manual." Auto-popovers can be dismissed with a simple click outside the popover, a feature known as "light dismiss," and typically only one can be displayed at a time. On the other hand, manual popovers require manual dismissal and come in handy for scenarios involving nested popovers like menus.

It's worth noting that while this feature offers great benefits, it may not be supported by all web browsers. For more examples and detailed information, you can check here.

CSS: New properties for animations (entry and exit)

Chrome has introduced four new CSS properties to facilitate smooth entry and exit animations:

display
transition-behavior
@starting-style
overlay

Display for Content Visibility

One notable feature is the ability to use display within keyframes to control content visibility. This feature is particularly useful for eliminating the space that elements occupy on the page. Let's delve into an example to see how it works:
```
.target {
  animation: fade-out 0.5s forwards;
}
 
@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}
```
Here, after half a second, the opacity will transition to zero, and display will be set to none. The forwards keyword ensures that we remain in the end state of the animation.
Transition-Behavior

The second new feature is transition-behavior, which accepts two possible values: 'normal' and 'allow-discrete'. To understand this new feature, let's examine the following example:
```
.target {
  transition:
    opacity 0.25s,
    display 0.25s;
  transition-behavior: allow-discrete;
}
```
In this example, we use transition-behavior set to 'allow-discrete'. This means that in the first 0.25 seconds, the opacity will transition from 1 to zero, and in the subsequent 0.25 seconds, the display property will transition from 'block' to 'none'. It achieves a similar effect to the previous example but employs different techniques.

Note: If we want to explicitly set the transition-behavior, it should come after the transitions. We can use a shorter syntax like this:
```
transition:
  opacity 0.25s,
  display 0.25s allow-discrete;
```
@Starting-Style for Entry State

So far, we've discussed two properties that are suitable for the exiting state. However, @starting-style is designed for the entry state. With this feature, the browser can determine the style of an element before it opens.
```
@starting-style {
  .target {
    opacity: 0;
    height: 0;
  }
}
```
This new feature is especially useful when working with dialogs and popovers (as explained earlier), allowing you to style them before they open. It can be applied like this for dialogs and popovers.
```
/* Dialog */
@starting-style {
    dialog[open] {
    // your opening styles
    }
}
/* popover */
.my-popover {
    &:popover-open {
    @starting-style {
        // your opening styles
    }
    }
}
```
Overlay for Dialogs

Lastly, there's the overlay property. This is particularly useful for dialogs when we have an overlay effect that darkens the layer beneath. Without an overlay, the transition may not apply smoothly when the dialog disappears. However, by adding this property to the transition list, we can ensure that the overlay also undergoes smooth animations.
```
[open] {
  transition:
    opacity 1s,
    display 1s,
    overlay 1s;
}
```
Note: We can create all of these styles using other approaches as well, but here we simply want to introduce these new properties. If you're interested, you can explore them further. You can test them in Chrome 117. For more detailed examples, you can refer to this link.

Exploring Exciting Frontend New Features (October)

Introduction

JavaScript: A new method to validate URLs

HTML: Popover API

CSS: New properties for animations (entry and exit)