6 New Syntax Changes in Web Development

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 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 . 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.

Conclusion

That was the various new changes that you should be aware of. If you enjoyed this article consider supporting me on https://www.buymeacoffee.com/alex03 otherwise make sure to like and drop a follow