Web Development has seen some interesting changes lately. HTML, CSS, and Javascript have gotten some nice updates and that's exactly what we are going to talk about in this article.
A New HTML Tag
Making Modals and pop-ups hasn't always been an easy thing to do. First, you will have a backdrop then the modal, and some hacked-up javascript and CSS. I'm happy to tell us that this new HTML makes the modal way easier. It is called the <dialog> tag and as the name suggests it is used for making dialogs.
<dialog open>
<!---The open Attribute make it show by default
otherwise it is hidden --->
<h1>Hey Guys</h1>
<form method='dialog'>
<!-- We can now use a special method of dialog to close the modal-->
<button type='submit' class='btn' >Close the Modal</button>
</form>
</dialog>
<button class='btn' >I am Just a Random button</button>
CSS Nesting
If you have ever used sass/scss before you will know that nesting CSS properties is such a powerful tool. Nesting allows you to style related properties e.g let's say we want to style the button with a class of '.btn' and it should only apply to the button inside the <dialog> . Well can nest it like so,
dialog {
color:red;
.btn{
padding:10px;
color:red;
}
}
/* Now this will only style the button inside the dialog,
is the syntax not just clean */
Individual Transform Properties
Back in the day transform used to look like this:
.some-element{
transform:scale(1.1), translateX(20px), rotate(45deg)
}
But now, we have Individual Transform Properties so it looks like this
.some-element{
scale:1.1;
translateX:20px;
rotate:45deg;
}
Color Mixing
It is possible to now mix two colors in CSS, using a new function. Let's say we want to mix red and yellow it goes like this:
.some-element{
color:color-mix(in srgb, red, yellow);
/*The Color Will Be Orange 🍊*/
}
Javascript Changes
New Array Method
Getting the last element in the array has been somehow weird. Let me explain, let's say we have an array like so:
const arr = ['red','blue','green']
/*To get the first element we say*/
console.log(arr[0])
/*But to Get the Last we can't say just -1 we use: */
console.log(arr[arr.length -1]]
Isn't it somehow weird right? So with the new array method, it looks like this
const arr = ['red','blue','green']
/*First element*/
console.log(arr.at(0))
/*Last Element*/
console.log(arr.at(-1))
/* it allows us to use -1 */
New Immutablity Function
const arr = ['red','blue','green']
const copy = arr
What is the problem with this code? The problem is that if you change the `arr` you will also change the copy as well, so it is not really a copy but a reference. To fix this you use structuredClone
const arr = ['red','blue','green']
const copy = structuredClone(arr)
Now, this creates a real copy, and changing it does not alter the original array.