5 Cool Web Features You’re Not Using Yet

5 Awesome web features I Bet you’ve never heard of: Easy and Mind-numbing

Halim Shams
5 min readJun 1, 2023
An Article by — Halim Shams

I don’t know why I hadn’t noticed these features earlier; perhaps nobody knew these incredible and simple features existed, or maybe they knew but didn’t want to teach others due to jealousy. Whatever it was, just let go. Now I’m here to disclose those easy and surprising features, and in return, if you smash that FOLLOW button, that will be like adding sprinkles to the ice cream sundae!

I can’t wait to unroll the list of these incredible features, so let’s begin with the first one…

1. <dialog>

I know this is your first time seeing this tag in HTML and you’ve never used it before. This is a native HTML dialog that is supported by all major browsers.

The <dialog> tag makes it way easier to make your own modal window. Making modal windows was one of the toughest tasks to develop for our web projects, and it needed lots of JavaScript code to implement. Besides that, there were loads of bugs popping up when making the modal window, but it’s exceedingly smooth by using this tag.

Here is how you can use it: 👇

HTML dialog tag usage

result:

HTML dialog result

One thing to consider is that if you want to use CSS to make it stand out a bit and add some transitions, you can definitely do that.

Exclusive for My Blog Readers!

Are you always on the lookout for the latest tips and tricks in web development? Look no further! Sign up for my weekly newsletter, where I share short trending articles about web development tips and FREE tools and resources that are currently trending. Plus, I’ll throw in some exclusive content that you won’t find anywhere else! Subscribe now and join the community of web developers who are always one step ahead.

Get ahead in web development with our weekly newsletter. Join now!

2. The Popover

Native modal windows are great, but we need some extra glow to add to our website. You may have experienced the popover effect on many websites, which shows a label or window of content when you click a button.

It makes it easy to show and hide content by clicking a button without writing any JavaScript or fancy CSS code.

Here is what I meant by that: 👇

HTML popover feature

This feature isn’t yet supported by browsers, but soon it will. As this feature is experimental, you need to download the beta version of a browser and enable the “Experimental flag” to see the results.

Here is how you can create a popover: 👇

How to create popover using HTML

Just match the idof your popoverto popovertarget.

3. color-mix()

This one doesn’t belong in HTML. color-mix() is a new feature in CSS that mixes two given colors. This function takes two color arguments and mixes them in a specified colorspace (srgb).

Here is an example: 👇

CSS color-mix property

4. Array.at()

Array.at() is a new JavaScript method that allows you to get any element from an array. Until now, getting the last element from an array was ridiculously confusing in JavaScript, while in other languages like Python, Dart, or any other programming language, it’s like a walk in the park to get the last element of an array.

Here’s how it looks to get the last element of an array in JavaScript VS other programming languages: 👇

Before array.at() method

But now, thanks to JavaScript, which added this method, it is extremely easy for us to get any element of an array we need: 👇

New JavaScript Array.at() method

At the example code above we get the last element of array, but if change the -1 to -2 you’ll get the second last and so on…

5. Initial letter

Again, another new CSS property that makes your coding easier than before. As the name suggests, initial-letter selects the first letter of an element and makes it bigger, just like in magazines and some news blogs.

To make your website content like this, where the first letter is bigger and takes more space than any other letter: 👇

CSS initial-letter

You need to try the new CSS property initial-letter .

And here is how you can do that by you own: 👇

How to use initial-letter CSS property

initial-letterpermits a number that indicates the number of lines you want to occupy; negative numbers are not allowed, though.

This was all the new web features I’ve collected and stay toned for more new features like these which are on way to come. I hope you liked this article and don’t forget to share it with the community of web developers so they don’t miss these awesome new features.

Following costs nothing!

And yeah! Following me is like discovering the secret ingredient that takes your understanding to the next level! 💛

Don’t forget to subscribe to my newsletter (Exclusive Newsletter Just for My Blog Readers): 👇

— You can follow me on Twitter as well, where I’ll share short and incredible stuffs out there, so don’t miss those. 🚀

Buy me a Coffee

--

--

Halim Shams

I Write about Web Development and All the Related Content 🚀 I'm a Self-Taught Full-Stack Developer 💛