21 Awesome Web Features you’re not using yet

if you're a web developer be prepared to have your mind blown did you know it takes longer to say www than it does to just say world wide web and that one little change could add hundreds of milliseconds to your productivity had I known that 15 years ago I'd probably have my own space exploration Company by now but instead I'm still just building crappy websites speaking of which while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence the web platform has landed some game-changing new features that you probably haven't heard of yet and will change the way we build websites forever and that's not even hyperbole the first feature on this list is huge the native HTML dialogue I first mentioned this feature about a year ago but now it's fully supported on all major browsers and what it does is make it way easier to build your own modal Windows normally to build a modal from scratch you need a full screen backdrop then a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements it's always felt way harder than it should be but now we have the dialogue which is just a regular HTML element that you can reference by its ID and has a few built-in JavaScript methods to show and hide it for example to show them modal we can run the show modal method and it magically appears in the UI with a backdrop the backdrop itself has its own pseudo element that can be styled with CSS we can then close the modal by either submitting a form inside of it with a method of dialog or by calling its close method on some other event this makes life so much easier because you can animate it using simple CSS Transitions and speaking of making your life easier today's sponsor is clerk who provides the most beautiful user authentication solution I've ever seen by dropping a few components into your favorite full stack framework you get a professional UI that can handle a variety of different sign-in methods like passwords magic links social sign-on and multi-factor off once signed in developers can easily access the current user from both front end and back-end environments in addition clerk provides the UI for users to customize their own data and handles Advanced security requirements like session management per device features that could take weeks to roll out on your own and the UI is fully customizable I had a lot of fun switching from retro to neo-brutalism these components can be dropped into any react framework and play well with popular back ends like Firebase and has a free tier up to 5000 users give it a try with the link below native modal windows are great but another feature that's annoying to implement is the popover luckily native popovers are also coming to the web as of today this feature is experimental so you'll need to enable it with a flag but basically it provides a couple of attributes like pop over Target and popover which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses Focus within just match the element ID to the popover Target and you're done that'll be a nice quality of life Improvement but the next feature web GPU is easily the most important feature on this list even if you never use it it's basically the successor to webgl allowing browsers and web applications to take advantage of gpus it is under an experimental flag today but many libraries like babylonjs fully supported already and support for 3js is underway and that means 3D graphics and games are about to get way faster on the web I'm using it right now with Babylon JS and as you can see the web GPU version is far more Majestic and not just that but libraries like tensorflow.js support it which means develop will be able to build web apps where end users can train machine learning models without the need to download a bunch of python libraries or use a notebook in the cloud that's pretty cool but for most web developers the biggest challenge is writing good CSS next on the list we have container queries to build responsive websites developers often use media queries where you apply different styles to an element based on the size of the viewport the problem is that in many cases you're not worried about the viewport but you're worried about the parent container of an element and that's always been really hard to deal with until now with container queries you first create a containment context with a container type property then from there you can use the container app rule which can apply different styles based on the nearest ancestor container in addition there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS in the past you might run into situations where you have to actually get the bounding box from JavaScript then solve some crazy differential equations you get the div in the right place and you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML another cool CSS feature you might not know about is color mix I've used tools like SAS to mix colors in the past but now we can do it natively in CSS it's a function that takes two color arguments and mixes them in a specified color space like in this example if we mix red and blue in an RGB color space we get purple as a result that's not very useful on its own but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs over multiple elements but speaking of features from SAS another huge one is CSS nesting I can't believe it's taken this long but it's almost fully supported in all modern browsers it's purely an ergonomic feature that allows you to write Styles in a far more concise and readable Way by nesting them inside a parent just like a kangaroo in a pouch which eliminates tons of duplicated class names from your code but another very interesting new feature is color fonts also known as chromatic fonts that use multiple colors inside of a single glyph this opens up a whole new world of possibilities because now you can customize the entire color palette of a font and create some crazy effects like 3D gradients what's cool about this is that they're still interpreted as regular fonts in the browser whereas previously stuff like this would only be possible with your own custom vector graphics there are only a few color fonts at the moment but it will be interesting to see what else comes out in the future but the next thing I want to look at is performance and the new web vitals plugin for Chrome you can measure the performance of any website by running a lighthouse report but the process is kind of slow and cumbersome this plugin will console log performance metrics as you use a website and it can pinpoint performance issues like layout shift and point you to the exact element that's causing the problem there's a ton of things to consider when it comes to Performance and I have a full video on that topic on my second Channel if you want to learn more but now it's time to talk about some new JavaScript features like array at if you come from a language like python or most other languages for that matter you might find it absurd that to get the last element in a JavaScript array you have to take the array length and subtract one you can't just use negative one or last until now because at makes this code obsolete now we can just say at negative one to get the last element or second to last with negative two that's pretty cool but deep copy is even more useful one thing you'll eventually have to do is copy an object in JavaScript objects are passed by reference which means if you assign one to a new variable you're still going to reference the same original object if you modify a property on B it will also modify the property on a because they're the same object reference now most of the time we use object assign or the spread syntax to create a new object but the problem here is that it only does a shallow copy and that means if an object has any nested objects on it those nested objects will still maintain the reference to their original object but in many cases that's not what you want and what developers have been doing for years is using Json stringify to turn the object into a string and then Json parse to parse it back into an object that's a completely ridiculous hack that creates a new object reference in memory but I'm happy to report that life doesn't have to be this way there's now a global function called structured clone that can clone an object into a new reference making it way easier to transfer data from one object to another and that gives us 10 awesome new web features to take advantage of but wait there's more like the transform stream interface that allows you to pipe one fetch call into another or how about import maps that allow you to declare a bunch of JavaScript modules all at once and I didn't even mention that there's a tc39 proposal that will allow you to import Json directly into a Javascript file in the future oh and let's not forget that we also now have individual CSS transform properties allowing you to modify scale translation and rotation more easily and we have new trigonomic functions in CSS like sine cosine and tangent which is incredibly useful if you have circles in your design we also now have a CSS initial letter property which you might use to make the first letter in an article bigger just like in a magazine I should also probably mention new viewport units designed specifically for mobile that can take into account if toolbars are opened or not Also let's not forget Focus visible which is a more accessibility friendly way to handle focus and form inputs and buttons speaking of focus there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on that one's kind of boring but a way more exciting experimental technology is the view transitions API which allows developers to create animations between web pages you make websites behave more like mobile apps that keep the user in context and finally we have animation timeline as of today it's experimental but it gives you the ability to control animations based on the scroll position in the browser a feature that everybody does but always feels way more complicated than it should be and with that we've looked at 21 new features on the web if you knew every single one of them congratulations you just won the grand prize one free web development job redeemable at the company of your choosing just present this certificate during your interview and they should let you write in no questions asked thanks for watching and I will see you in the next one

Channel: Fireship

Views: 897,685

Keywords: webdev, app development, lesson, tutorial

Id: q1fsBWLpYW4

Length: 8min 30sec (510 seconds)

Published: Tue May 30 2023