5 Cool Web Features You’re Not Using Yet
5 Awesome web features I Bet you’ve never heard of: Easy and Mind-numbing
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: 👇
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: 👇
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: 👇
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: 👇
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: 👇
But now, thanks to JavaScript, which added this method, it is extremely easy for us to get any element of an array we need: 👇
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: 👇
You need to try the new CSS property initial-letter .
And here is how you can do that by you own: 👇
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.
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. 🚀
