21 Mind-Blowing Web Features You Probably Haven't Heard Of
Tags: webdev, javascript, css, news
Published: 2023-06-03 22:43:50

> Hi, I'm John, Multi Startup Builder.
> I enjoy both coding and marketing.
> See all my 20 products here
> → [johnrush.me](https://johnrush.me/)
> → [my BIO ](https://twitter.com/johnrushx/bio)
> → [Say Hi to me On Twitter](https://twitter.com/johnrushx)
> → [Try my website builder](https://unicornplatform.com/)

---

If you're a web developer, buckle up because the web platform has landed some game-changing new features that will alter the way we build websites forever. Let's dive into these incredible new additions!

## 1. Native HTML Dialog

Gone are the days of building modals from scratch with full screen backdrops and hacked together JavaScript to show and hide elements. Now we have native HTML dialogs, fully supported on all major browsers. Just reference its ID and run `showModal()` method.

{% twitter 1664307813999341568 %} 

## 2. Popovers Are Coming

Native popovers provide attributes like `popoverTarget` and `popover`, allowing you to show and hide content without any JavaScript or tricky CSS that uses focus within.

{% twitter 1664307817426165760 %} 

## 3. Web GPU: A Game Changer for Graphics & Games

Web GPU is essentially WebGL's successor, enabling browsers and web apps to take advantage of GPUs for faster graphics rendering in libraries like Babylon.js, Three.js, as well as TensorFlow.js for machine learning models training.

{% twitter 1664307820844523525 %} 

## 4. Container Queries: Responsive Websites Made Easier
With container queries, developers can now apply different styles based on nearest ancestor containers instead of just viewport size - making responsive design more intuitive than ever before.

{% twitter 1664307825831473152 %} 
 
## 5.Color Mix: Mixing Colors Natively in CSS
The color mix function allows mixing colors natively in CSS by specifying two colors arguments along with desired color space creating interesting gradient effects across multiple elements.

{% twitter 1664307830533373961 %} 
  
## 6.CSS Nesting
  
CSS nesting improves code readability by allowing styles to be nested inside parent selectors just like Kangaroos in pouches - no more duplicated class names!

{% twitter 1664307833716736005 %} 
  
## 7.Experience Chromatic Fonts
   
Color fonts (or chromatic fonts) let you customize entire color palettes using multiple colors per glyph offering endless possibilities such as gradients and even 3D effects.

{% twitter 1664307837172957205 %} 
    
## 8.Performance Boost with Web Vitals Plugin
   
The new Web Vitals plugin for Chrome console logs performance metrics pinpointing issues like layout shifts and problematic elements to optimize your website.
    
## 9.JavaScript Features: Array At & Deep Copy
   
Array at method simplifies getting array items using negative indices (e.g., -1 for last item). The structured clone function enables deep copying of objects, making transferring data between them much easier.

## 10. More Awesome Web Features

- Transform Stream Interface: Pipe one fetch call into another
- Import Maps: Declare multiple JavaScript modules at once
- CSS Individual Transform Properties: Modify scale, translation, and rotation easily
- Trigonometric Functions in CSS: Sine, cosine, tangent for circular designs
- CSS Initial Letter Property: Magazine-style first letters in articles
- Focus Visible & Alert Property: Improved accessibility options
- View Transitions API & Animation Timeline (experimental): Better animations between web pages based on scroll position 

Congratulations! You've just learned about 21 new features on the web. If you knew every single one of them already, go ahead and redeem your free "web development job" certificate during your next interview! Thanks for reading and stay tuned for more exciting updates.

*full list
{% twitter 1664307811939958785 %} 

[20 databases to pick in 2023 - simplified](https://dev.to/johnrushx/20-databases-to-pick-in-2023-simplified-1n0n)

[SQL, NoSql, and 5 DB types you'll never need](https://dev.to/johnrushx/sql-nosql-and-5-db-types-youll-never-need-3h85)

[I built a todo app using 9 different languages
](https://dev.to/johnrushx/i-built-a-todo-list-using-9-different-languages-51f7)

[I built the same app 6 times! Which JS Framework is best?
](https://dev.to/johnrushx/i-built-the-same-app-6-times-which-js-framework-is-best-2iff)

[All 20 JavaScript concept you'll ever need
](https://dev.to/johnrushx/all-20-javascript-concept-youll-ever-need-2i2o)

---
> Hi, I'm John, Multi Startup Builder.
> I enjoy both coding and marketing.
> See all my 20 products here
> → [johnrush.me](https://johnrush.me/)
> → [my BIO ](https://twitter.com/johnrushx/bio)
> → [Say Hi to me On Twitter](https://twitter.com/johnrushx)
> → [Try my website builder](https://unicornplatform.com/)