`<dialog>`

In the year of writing this, I wouldn't say the <dialog> element is the brand new shiny thing out for the web. Nevertheless, I wanted to write about it, and and bring more attention to it. If you write a lot of frontend code and are constantly trying to build the perfect modal or alert, this new element is a life changer.

Part of what made building a custom modal so tricky, was nailing down all the correct CSS and accompanying JavaScript bits. JavaScript is still required here, but the CSS plays a much simpler role.

There's two different options when creating a <dialog> element. Modal <dialog> elements, and non-modal <dialog> elements.