6 New Syntax Changes in Web Development
Tags: webdev, beginners, javascript, css
Published: 2023-08-20 11:53:41

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.
```html
<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,
```css
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:
```css
 .some-element{
 transform:scale(1.1), translateX(20px), rotate(45deg)
 }
```

But now, we have Individual Transform Properties so it looks like this
```css
.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:
```css
.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:

```js
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
```js
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
```js
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
```javascript
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