14 Awesome New Features in Web Development

The Native HTML Dialog

First on our list is the native HTML dialog. A feature that was introduced a year ago, and is now fully supported on all major browsers.

Creating a modal from scratch has typically been a cumbersome task. The process usually involves creating a full-screen backdrop, a window on top of that, and using JavaScript to control the visibility of these elements. This conventional approach always felt more complex than it should be. But, the introduction of the native HTML dialog has been a game-changer in how we build modals.

<dialog> is a standard HTML element that can be easily identified by its ID. It comes with a few built-in JavaScript methods to manage its visibility. For instance, to display the modal, we can execute the showModal() method, and voila! It magically appears on the user interface, complete with a backdrop.

<dialog id="dialog1"> <p>My simple dialog</p>
</dialog>

<button onclick="dialog1.showModal()">Open Dialog</button>

Closing the modal has been simplified too. It can be achieved by either submitting a form contained within it, using a method of dialog, or calling its close() method on another event. This drastically simplifies the management of modals.

<dialog id="dialog1"> 
  <form method="dialog">
    <p>My simple dialog</p>
    <button>Close</button>
  </form>

  <button onclick="dialog1.close()">Close Dialog</button>
</dialog>

<button onclick="dialog1.showModal()">Open Dialog</button>

The backdrop, interestingly, has its pseudo-element that can be styled with CSS, offering the potential for aesthetically pleasing modals.

dialog::backdrop {
  background-color: gray;
}

We can also animate the dialog element using straightforward CSS transitions. This capability allows for more dynamic, engaging user interfaces, and simplifies the web developer’s task.

dialog {
  opacity: 0;
  scale: 0;
  transition: all 1.5s;
}

dialog[open] {
  opacity: 1;
  scale: 1.5;
}

The Popover Feature

Building popovers can be a hassle. However, the advent of native popovers will significantly ease the process. This experimental feature enables you to display and hide content without writing any JavaScript or complex CSS using attributes like popovertarget and popover.

These attributes allow you to show and hide content without the need to write any JavaScript or CSS. To get this working, just match the element ID to the popovertarget:

<button popovertarget="experimental">Open</button>
<div id="experimental" popover>
  Ima popover
</div>

Negative Indices with array.at( )

Let’s delve into some new JavaScript features, starting with the introduction of array.at(). You might find it peculiar that in JavaScript, you need to calculate the index of the last element in an array by subtracting one from the array length. However, this changes with the advent of array.at().

The at() method allows us to access array elements using negative indices. For example, you can now use array.at(-1) to retrieve the last element, or array.at(-2) to access the second-to-last element. This feature brings JavaScript more in line with other programming languages and enhances code readability and simplicity.

Deep Copy of Objects with structuredClone()

In JavaScript, objects are passed by reference. So, if you assign an object to a new variable, both variables will reference the same original object. If you modify a property on the new variable, it will also affect the original object because they share the same object reference.

In the past, developers typically used Object.assign() or the spread syntax ({...}) to create a new object. However, these methods only perform a shallow copy. This means that if the object contains nested objects, those nested objects will still maintain references to their original objects.

To overcome this limitation, developers have resorted to using JSON.stringify() to convert the object into a string and then JSON.parse() to parse it back into an object. But it is a cumbersome and inefficient solution.

Fortunately, there is now a global function called structuredClone() that can clone an object, creating a new reference. This function simplifies the process of transferring data from one object to another, eliminating the need for convoluted workarounds.

Import Maps

Import maps are a feature in JavaScript that enables you to import multiple JavaScript modules at once in a more organized and convenient manner. An import map is defined inside a <script> tag with the type attribute set to "importmap".

The content of the script is a JSON object that specifies the mapping of module identifiers to corresponding URLs. In the following example, the "imports" object lists the modules that are being imported – "module1" and "module2".

<script type="importmap">
  {
    "imports": {
      "module1": "https://example.com/module1.js",
      "module2": "./example/module2.js"
    }
  }
</script>

Web GPU: Powering Graphics on the Web

One of the most significant features to look out for is Web GPU. This feature holds immense importance as it serves as the successor to WebGL. With Web GPU, browsers and web applications can harness the power of GPUs.

Although it is currently available under an experimental flag, numerous libraries like Babylon.js have already extended full support for it. Moreover, support for three.js is also in progress. The implications of this advancement are quite remarkable—3D graphics and games on the web are about to witness a significant boost in performance.

What’s even more exciting is that libraries such as TensorFlow.js also provide support for Web GPU. This means that developers will have the ability to create web applications where end users can train machine learning models without the need to download multiple Python libraries.

CSS Nesting

A significant new CSS feature is nesting, which has finally gained extensive support in modern browsers. Nesting enables you to write styles in a more concise and readable manner by nesting them within a parent. This approach eliminates the need for duplicated class names in your code.

.container {
  .inner {
    max-width: 90%;
    
    h2 {
      font-size: 1.5rem;
    }
  }
}

With CSS nesting, you can easily organize your styles by placing child selectors within the scope of their parent selectors. This hierarchical structure enhances code clarity and reduces redundancy.

Improving Responsiveness: Container Queries

Traditionally, developers have relied on media queries to apply different styles to elements based on viewport size. However, the problem arises when you need to consider the parent container of an element rather than the viewport itself.

With container queries, you can create a containment context by specifying a container-type property. This establishes the context within which you can utilize the @container rule. This rule enables you to apply different styles based on the nearest ancestor container.

.main {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .inner {
    flex-direction: column;
  }
}

Additionally, several new units, such as container query width and height, have been introduced. These units allow you to directly compute the appropriate size of the children within the CSS itself:

• cqw: 1% of a query container’s width
• cqh: 1% of a query container’s height
• cqi: 1% of a query container’s inline size
• cqb: 1% of a query container’s block size
• cqmin: The smaller value of cqi or cqb
• cqmax: The larger value of cqi or cqb

CSS color mix

In the past, combining colors was possible using tools like SaaS, but now we have native support for color mixing directly in CSS. This feature is implemented as a function that takes two color arguments and blends them within a specified color space. For example, when we mix the colors yellow and blue within the RGB color space, the result is green.

.container {
  background-color: color-mix(in srgb, yellow, blue);
}

On its own, this might not seem particularly useful. However, it can become valuable when creating effects like gradients that span multiple elements. For instance, using color mix to blend blue and white in a list of items, resulting in a gradient effect.

Chromatic Fonts: A Splash of Color

Another fascinating new feature to explore is color fonts, also known as chromatic fonts. These fonts utilize multiple colors within a single glyph, introducing a whole new realm of creative possibilities. With color fonts, you now have the ability to customize the entire color palette of a font and craft stunning effects like 3D gradients.

What makes color fonts even more impressive is that they are still interpreted as regular fonts by browsers. In the past, achieving similar effects would require custom vector graphics. However, with color fonts, you can seamlessly incorporate vibrant and multicolored typography into your web designs.

Although there are currently only a few color fonts available, it’s intriguing to consider what future developments may bring.

Individual CSS Transform Properties

The introduction of individual CSS transform properties allows you to easily modify translation, rotation, and scale. This translates into a more responsive, dynamic, and interactive design that can captivate your audience.

.container {
  translate: 40% 0;
  rotate: 50deg;
  scale: 2;
}

Trigonometric Functions in CSS

For those who love geometric patterns, you will be pleased with the new trigonometric functions in CSS. You can now use sine, cosine, and tangent functions directly in your CSS code. These functions are incredibly useful when designing circular patterns or implementing any design that involves curves and angles.

.design {
  translate: 
    calc(cos(30deg) * 10px)
    calc(sin(30deg) * 10px * -1);
}

CSS Initial Letter Property

The new CSS initial letter property lets you mimic the layout of a magazine article. It allows you to make the first letter in an article bigger, adding a touch of elegance and sophistication to your blog posts or articles.

.article {
  initial-letter: 3 2;
}

Web Vitals Plugin: Performance Monitoring

Finally, let’s shift our focus to performance and the introduction of the new Web Vitals plugin for Chrome. While you can measure the performance of any website by running a Lighthouse report, the process can be slow and cumbersome. However, with the Web Vitals plugin, you can now monitor performance metrics directly in the browser console as you navigate through a website.

This plugin is incredibly useful as it not only provides real-time performance insights but also pinpoints specific issues that may affect the user experience. For instance, it can identify problems such as layout shifts and highlight the exact element responsible for the issue.