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.