If you're a web developer, buckle up because the web platform has landed some game-changing new features that will alter the way we build websites forever. Let's dive into these incredible new additions!
1. Native HTML Dialog
Gone are the days of building modals from scratch with full screen backdrops and hacked together JavaScript to show and hide elements. Now we have native HTML dialogs, fully supported on all major browsers. Just reference its ID and run showModal() method.
1/21
Native support for modal windows.
<dialog id="d">
...
<button onclick="d.showModal()">Open Dialog</button>16:27 PM - 01 Jun 2023
2. Popovers Are Coming
Native popovers provide attributes like popoverTarget and popover, allowing you to show and hide content without any JavaScript or tricky CSS that uses focus within.
2/21
Native support for Popovers
<button popovertarget="poppinoff">Open</button>
<div id="poppinoff" popover>
<p>The feature be poppin</p>
</div>16:27 PM - 01 Jun 2023
3. Web GPU: A Game Changer for Graphics & Games
Web GPU is essentially WebGL's successor, enabling browsers and web apps to take advantage of GPUs for faster graphics rendering in libraries like Babylon.js, Three.js, as well as TensorFlow.js for machine learning models training.
4. Container Queries: Responsive Websites Made Easier
With container queries, developers can now apply different styles based on nearest ancestor containers instead of just viewport size - making responsive design more intuitive than ever before.
4/21
Container queries. Finally we can get rid of javascript for this.
`@container` (min-width: 700px;)16:28 PM - 01 Jun 2023
5.Color Mix: Mixing Colors Natively in CSS
The color mix function allows mixing colors natively in CSS by specifying two colors arguments along with desired color space creating interesting gradient effects across multiple elements.
5/21
Color-mix in CSS.
Really useful for gradients and shades16:28 PM - 01 Jun 2023
6.CSS Nesting
CSS nesting improves code readability by allowing styles to be nested inside parent selectors just like Kangaroos in pouches - no more duplicated class names!
6/21
CSS nesting.
bye bye SASS and all the others.
Pure css can do it.
Maybe it can win back over Tailwind CSS now?16:28 PM - 01 Jun 2023
7.Experience Chromatic Fonts
Color fonts (or chromatic fonts) let you customize entire color palettes using multiple colors per glyph offering endless possibilities such as gradients and even 3D effects.
8.Performance Boost with Web Vitals Plugin
The new Web Vitals plugin for Chrome console logs performance metrics pinpointing issues like layout shifts and problematic elements to optimize your website.
9.JavaScript Features: Array At & Deep Copy
Array at method simplifies getting array items using negative indices (e.g., -1 for last item). The structured clone function enables deep copying of objects, making transferring data between them much easier.
10. More Awesome Web Features
- Transform Stream Interface: Pipe one fetch call into another
- Import Maps: Declare multiple JavaScript modules at once
- CSS Individual Transform Properties: Modify scale, translation, and rotation easily
- Trigonometric Functions in CSS: Sine, cosine, tangent for circular designs
- CSS Initial Letter Property: Magazine-style first letters in articles
- Focus Visible & Alert Property: Improved accessibility options
- View Transitions API & Animation Timeline (experimental): Better animations between web pages based on scroll position
Congratulations! You've just learned about 21 new features on the web. If you knew every single one of them already, go ahead and redeem your free "web development job" certificate during your next interview! Thanks for reading and stay tuned for more exciting updates.
*full list
Rememer this day: June 1, 2023.
The web's been reinvented with 21 new features, as @fireship_dev says.
I've spent 5400 seconds to break it down into individual video posts for each feature,
to let you boost your daily productivity by a whopping 100 milliseconds! 😉16:27 PM - 01 Jun 2023
20 databases to pick in 2023 - simplified
SQL, NoSql, and 5 DB types you'll never need
I built a todo app using 9 different languages
Top comments (13)
credits to twitter.com/fireship_dev
um dialogs don't work by default. In chrome i get an Uncaught TypeErrorL d1.showmodal is not a function at HTMLButtonElement.onclick. Similar error in Firefox...
any ideas? Didn't see it in the experiemental list.
This worked for me in Chrome, it's show() and not showDialog()
myDialog.show()One more note, apparently the ID appears in global scope as soon as you add it to the document. So be careful about what the ID is - not sure how this jives with anything else in a lexical scope.
The dom ready listener may not be necessary but:
oh… .show works… I was using a .showmodal() for some reason
thanks
Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.
If you choose to do so, you also have the option to add a canonical URL directly to your post.
I dont have other version of this post. This is the only version. I put twitter embeds for the videos , so that viewers could watch videos. And actually they can watch videos right here.
Hi,
I didn't know how to embed the videos other than with twitter posts.
What's the best way to do it so it plays here?
You forgot about the upcoming features
Css style queries
Scroll-driven animations
Css anchoring api
working on a new article to include these
my next article dev.to/johnrushx/i-built-the-same-...