10 Hidden Browser Features Your AI Doesn’t Know About
WDWeb Dev Simplified@WebDevSimplified · 1.8M subscribers
- Views
- 26.5K
- 26,501
- Outlier
- ×0.6
- Median 47.5K
- Length
- 14:59
- Published
- Aug 18
- Tuesday
- Comments
- 74
- 1.3K likes
Script
How it's written
- Words
- 3,696
- Words a minute
- 246
- Reading time
- 16 min
- Segments
- 11
The hook
0:00–0:25It is nearly impossible to keep up with all the changes in the browser. So, in this video, I have six different examples showcasing 10 different browser features, some new, some old, but I guarantee you know less than half of these and probably even less than that. We have simple things such as how to lazy load images in the browser that you probably are already aware of, and then we have much more complex things such as CSS environment variables. These ones I'm using are specifically for handling foldable devices, but there are many more. And also, we're going to be
Structure
It is nearly impossible to keep up with all the changes in the browser. So, in this video, I have six different examples showcasing 10 different browser features, some new, some old, but I guarantee you know less than half of these and probably even less than that. We have simple things such as how to lazy load images in the browser that you probably are already aware of, and then we have much more complex things such as CSS environment variables. These ones I'm using are specifically for handling foldable devices, but there are many more. And also, we're going to be talking about how to set up locks in the browser, and this is an incredibly underrated feature that you must understand to write high-quality applications. Welcome back to WebDevSimplified. My name is Kyle, and my job is to simplify the web for you. And instead of making you wait until the last one to see the coolest feature, I'm just going to start with what I think is the coolest feature, and that is locks built into the browser. Now, to show you what these locks do, you can see I have these locks they're called checkout lock. You can change this name, but as long as you have something with the exact same lock name, you're able to essentially lock down a function and only allow one single thing to execute that function at a time. Imagine you have a checkout page, and you want to click the checkout button, and it takes a while to process and you know, do your order. And maybe you accidentally click that checkout button twice, or you click it in an entirely separate tab. This is going to make sure it locks it down and only allows one of those to go through. You can see I have two different tabs both with this checkout lock, and if I try to create an exclusive request, we're going to go over here and click on that, you can see I'm now exclusively holding that lock for these 10 seconds. And if I try to access it over here, you can see it sets it up as a pending request. And once those 10 seconds finish and this other one is done, now you can see my
Watch from 0:00next request executes. This is great if you just want to queue up a bunch of things to be able to execute one after another, but never have them occur at the same time. You can also come in here. I can just mark this if available checkbox, and now if I exclusively lock this down and I try to access it on the other page, it's going to attempt to get that lock, but you can see it'll say unavailable and it just quits out. This is great in that checkout use case where if I accidentally click checkout twice or in two different tabs, it'll only ever let one of those requests to go through. You can also even create shared locks. This is useful if you want multiple things to be able to edit at the exact same time. So, if I create a shared lock, you can see both of these are executing at the same time. There are no issues at all, and that works perfectly fine. You can also even steal a lock. For example, here, let's say that I create an exclusive lock. We'll change it down to 5 seconds. I can come over here and click steal, and now it's going to steal that lock over to this user. You can see it's held over here while it's idle over here, essentially ripping away whatever they were doing inside that other execution. You can also make these abortable. For example, I can create an exclusive lock, and if I'm done with it, I can click cancel, and that immediately cancels out of that. Now, there's a ton of you can do with this. I'm sure your mind is already reeling with all the different possibilities, but I want to show you how this is implemented cuz it's incredibly easy to use. Pretty much all of the JavaScript for this entire feature comes from navigator.locks.request. So, let's just dive into what that function looks like cuz that does everything that we want to do.
Watch from 1:31We'll say navigator.locks, and we want to make a request. The first thing you must pass in is a name. This is the name of the lock, and as long as you're trying to access the exact same lock, that's what allows you to prevent people from doing this. So, you just give it a specific name. We'll just call this lock. The next thing that you pass in here is going to be either options or a function. Usually, you're going to have some options. And then, we're going to have a function after that, just like that. That's going to take in all of our lock information. So, let's take a look at what different options we have. So, let's take a look at our options, and you can see we have the if available option, the steal option. Those are just those checkboxes I already showed you. Set them to true or false based on what you actually want to do. Then, we have signal. If you pass along an abort controller, this abort controller, well, you can just create one from scratch here. We'll say const controller equals new abort controller. I can pass that in, and then if I want to abort this, I can just say controller.abort, and that's going to cancel out of that entire function. So, that's how that works if you want to essentially cancel your lock early. And then, finally, we have that mode that I talked about, and that is either exclusive or shared. And that's how it maps up to all those buttons in the UI that I showed you. Exclusive again, make sure that you can never have two things executing the same code at the same time, and shared allows them to actually be shared between each other. So, you can pass along whatever modes and options you want, and then inside of here is where you actually have access to that lock information. For example, you get the mode and the name of the lock, but that part's not too important.
Watch from 2:49This is just where you run down that code that is going to be exclusive to whatever you want to do. Now, one important thing to note is if you pass along if available inside this function and set it to true, it'll actually still run the code inside of here. So, you first want to check to see if you don't have a lock, and then you can do whatever you want. Just return out of here, essentially saying don't execute this code if there's no lock. This is going to always be called, it'll just only be called with the lock if you actually have the lock. Now, this is an asynchronous function, so we'll just make sure we await this, and that's pretty much all you need to do inside your code for the actual requesting of a lock. Now, another great thing that you can do is you can also query all your available locks. So, you can just say locks.query, and that's what I'm doing up here. I'm getting all of my locks, and then I'm checking which ones are being held and which ones are being pending. So, held are currently running locks, and pending are people that are in line waiting to actually become the next one in the lock. So, this lets you execute queues and everything like that super easily, and this is a super underrated API in my opinion since it makes working in the web so much easier since often times this is stuff you manually handle yourself, and it there's already a built-in way to do that. Also, this is widely been available in all browsers for the last three or four years, so it's something you don't have to worry about browser syntax or can I use because it's just in every single browser. Honestly, discovering this feature was what prompted me to create this entire video. Now, these next three are super simple and mostly geared towards mobile, but the share option is also incredibly useful. The share option, when you click on this, it's a built-in browser feature that just opens whatever the native share feature is on your actual platform. So, on the web it's going to open something like this,
Watch from 4:10which is not super useful, but if you use it on mobile, it opens up that native share pop-up that you're used to in pretty much any type of sharing related application. So, you don't need a native app to do this. You can do this directly in the web. And the great thing is the code for this is dead simple. If we just look for that share button, all we have to do is call navigator.share and pass it along whatever information we want, and that opens that pop-up up for you automatically. This is actually something I have on my blog for every article. You can see this button right here. This is that share feature, and it implements all of the information for the title, the link, the URL, everything for the image of my blog. It all shows up right there, and I can share it in any application I want. But for the most part, this is really useful when you're working inside of a mobile application cuz that mobile share is really, really useful. Now, this next option is the ability to vibrate a device directly from the browser. Obviously, if I click on this on the desktop, it doesn't work. But if I do this on my phone, it will work. For example, if I just click on that vibrate button, you can hear. It is vibrating. If I chose the long option, I can make it longer. I can also use the double option. As you can hear, that creates those vibrations. And again, this is something that's super easy to do inside your code. You can see right here. For vibrate, we just take vibrate, and we pass it along essentially an option that is either going to be a single duration for how long we want it to vibrate, or an array of options for how long we want all of our different vibrates to be.
Watch from 5:41Super, super simple. And to make this code even easier to read, I'll just get rid of all this, and I'll just replace it with, for example, 100, 200. And now you're going to vibrate for 100 ms and then 200 ms. Now, this next one is also great for phones, and that is the keep screen awake here. That's essentially a wake lock. And when this is enabled, it'll prevent the screen from actually sleeping. This is something I used very recently in an application I just built for managing certain things. I needed to be able to enter data in my phone, but I needed to enter that data over a long period of time. So, to prevent my phone from actually locking itself, I just added this to the page that enters the data, and it'll lock your screen. And then when you're off that page, it'll release that lock, so your screen can actually lock itself. Now again, the code for this is super straightforward. To set this up, all we need to do is call navigator.wakelock.request and then we pass in the screen right here and it's going to say we want to request the ability to prevent you from locking the screen. And then, whenever you're done with that, all you do is you just take this wake lock and you call the release function. And all that's going to do is it's going to release the lock that we just created. This right here essentially prevents the screen from locking and then this code right here allows that screen to become locked again. We also have the ability to add certain event listeners, for example, when this is removed by other things such as other tabs or so on. So, it makes it really easy for it to make sure it can sync up its state. Now, the share and wake lock APIs are 100% available in every browser, but this vibrate API is only available in chromium-based browsers, so you can't use it in Firefox or Safari. Now, let's jump to another relatively simple one. This is one you actually probably already know and that is the ability to do a color picker directly inside the browser. For example, I can click right here, select
Watch from 7:02whatever color I want, close off of it and that's going to be a color that I can select and use it as an input anywhere. Also, the ability to copy and paste things directly in the browser. I can just click this copy button and it adds whatever that is to my clipboard and now I can paste that down. If I change the color to something else, click copy, now I can paste down that new value. All of this is again incredibly easy to implement. If we take a look at the code here for copy, copy is super simple. We just say navigator.clipboard.writetext and whatever text we want to write and that's going to copy that text to our clipboard. Super straightforward. Now, when it comes to the HTML input, all we have to do is set the type of any input to color and that's automatically going to create that color picker you see with the browser defaults for whatever design that browser has chosen for the color picker. Now, the next thing I want to talk about is going to be CSS environment variables. And this isn't custom properties or things like that. This is environment variables built into the browser that let you essentially read things from the user agent style sheet. So, this particular one is around how you handle devices that have multiple screens. In our case, a foldable device. This is a foldable device that has right here a section in the center where you can't actually see things cuz that's where the fold for the device is. We then have the left side panel and the right side panel and the ability to flip this as well. So, I have the top panel and the bottom panel. And you'll notice I have this orange box that always is going to show up in the left or top panel depending on what orientation I'm on and it's also going to work perfectly fine when I don't have my device with the folded mode. So, whether it's open or closed, it's always going to be in the correct position on my screen. And this will work with all devices. You can see this device has a
Watch from 8:33large section in the middle where it can't actually see anything. That's being properly handled. While some devices don't really have a large section. You can see this one doesn't really have any middle dividing section. And again, it works just fine no matter what orientation or if I'm folded or not. And this is all incredibly easy to implement inside a CSS. So, we can use a function called ENV in CSS and inside this function, I can pass various different things such as in our case, we're asking it for the viewport segment width or height in this particular case or the top or the left. And then we pass it along the X and Y coordinates for the screen we want. So, in this case, I want the left most and the top most screen every single time. So, it's always giving me this top left screen. If I were to say that I wanted the right screen, well, I could change this to one and I could change this to one, change the position as well to one and one. And now you can see I have now moved this over to the right hand side of my foldable device. And that's because I'm just saying give me the right side screen. Now, the way this environment variable works, this environment function, is the first value you pass it is whatever the environment thing you want to get is and the second value is a fallback. Very similar to how custom properties work, but instead of defining your own properties, these are ones that are built into the browser. Now, this viewport segment is great for when you have devices with multiple different segments like foldable devices, but you can do lots of other things as well. Some of the more common values that you may see are the safe area inset on the top, right, bottom, and left. This essentially allows you to say, "Hey, what is the actual visible space on my screen?" A lot of times like different mobile browsers will have different like URL bars and things that
Watch from 10:05hide and show themselves and this is just going to show you what the actual visible area on the screen is taking into account all those extra things that can show up. We also have this safe area max version as well. This essentially gives you the maximum amount of visible space when all those dynamic things like keyboards are completely hidden from it. And then we have our title bar area. This is great if you're working with a progressive web app. They have a title bar at the very top when you what that app is from. tells you what space that title bar takes up. We then have variables specifically for the keyboard size. So if you want to figure out how big the keyboard is that shows up on the screen, that's going to be using this particular keyboard inset variables. And then finally, we have that viewport one that I talked about which is what I demoed inside this example. Now this isn't something you're going to be using all the time, but it's great in these very niche scenarios especially around mostly mobile applications. But when it comes to progressive web apps, this is specifically for desktop devices. Now let's jump ahead to an incredibly simple and easy one and that is just picture in picture. You can see I can now open up this video anywhere, resize it whatever I want, picture in picture. And whenever I'm done with it, I can just click close and brings the video back to where it was before. All 100% entirely built into the browser and doing this is super simple. You can see if we look at the JavaScript code for this, I just have the ability to video.requestPictureInPicture.
Watch from 11:35So any video element has this function and it's going to essentially start my picture in picture feed. And then I have the ability to essentially end that by saying document.exitPictureInPicture. And I also have the ability to determine if I have an element currently using the picture in picture feature. So this allows me to enable it and disable it by just requesting it and exiting out of it. There's even various different event listeners as you can see here for when I enter and exit out of those different picture in picture modes. And then there's some fallback stuff that we can pretty much ignore. Just focus on this request picture in picture cuz that is the main feature we're talking about. Now unfortunately, this picture in picture mode is not supported in Firefox yet. it's only in Chromium and Safari based browsers. So, that is something to take into account, but the environment variables we just talked about, those are available in all browsers and have also been around for many, many years and is another thing that prompted me to create this video. Now, the next thing I want to talk about is lazy loading images and also some smooth scrolling stuff. So, when I reload this page, you can see, let's just clear out of this, you can see on the console it's loading up a couple different images. Looks like we have about three different images being loaded. But, as I scroll down this page, you can see more and more images are being loaded as they get close to being in the browser viewport. And this is all built into lazy loading in the browser. Also, we have the ability to smoothly scroll. So, when I click on this scroll button, you can see it smoothly scrolls me to that location or if I click back to top, it again smoothly scrolls me to those locations.
Watch from 12:51These are two features built into the browser that are also incredibly easy to implement. For lazy loading images, you won't believe how easy this is. All you have to do is take your image and add the loading equals lazy attribute to it. That's all it takes to automatically have lazy loaded images inside your application. And to have that smooth scroll, that is also incredibly easy. It's just a single line of CSS. You just say scroll behavior smooth on your HTML element and now all of your scrolling is going to be smooth instead of that jarring version. For example, if I remove this, you can see it just instantly jumps me to my location, while with that there, it's giving me that nice smooth scroll. Let me know down in the comments how many of these features you actually know and have used. And if you want to see more cutting-edge JavaScript, HTML, and CSS features, I'm going to link some videos right over here for you to check out. With that said, thank you very much for watching and have a good day.
Watch from 14:12Full transcript
- 0:00
It is nearly impossible to keep up with all the changes in the browser. So, in this video, I have six different examples showcasing 10 different browser features, some new, some old, but I guarantee you know less than half of these and probably even less than that. We have simple things such as how to lazy load images in the browser that you probably are already aware of, and then we have much more complex things such as CSS environment variables. These ones
- 0:20
I'm using are specifically for handling foldable devices, but there are many more. And also, we're going to be talking about how to set up locks in the browser, and this is an incredibly underrated feature that you must understand to write high-quality applications. Welcome back to WebDevSimplified. My name is Kyle, and my job is to simplify the web for you. And instead of making
- 0:40
you wait until the last one to see the coolest feature, I'm just going to start with what I think is the coolest feature, and that is locks built into the browser. Now, to show you what these locks do, you can see I have these locks they're called checkout lock. You can change this name, but as long as you have something with the exact same lock name, you're able to essentially lock down a function and only allow one single thing to execute that function at a time. Imagine you have a checkout
- 1:01
page, and you want to click the checkout button, and it takes a while to process and you know, do your order. And maybe you accidentally click that checkout button twice, or you click it in an entirely separate tab. This is going to make sure it locks it down and only allows one of those to go through. You can see I have two different tabs both with this checkout lock, and if I try to create an exclusive request, we're going to go over here and click on that, you can see I'm now exclusively holding that
- 1:22
lock for these 10 seconds. And if I try to access it over here, you can see it sets it up as a pending request. And once those 10 seconds finish and this other one is done, now you can see my next request executes. This is great if you just want to queue up a bunch of things to be able to execute one after another, but never have them occur at the same time. You can also come in here. I can just mark this if available checkbox, and now if I exclusively lock
- 1:44
this down and I try to access it on the other page, it's going to attempt to get that lock, but you can see it'll say unavailable and it just quits out. This is great in that checkout use case where if I accidentally click checkout twice or in two different tabs, it'll only ever let one of those requests to go through. You can also even create shared locks. This is useful if you want multiple things to be able to edit at the exact same time. So, if I create a shared lock, you can see both of these
- 2:05
are executing at the same time. There are no issues at all, and that works perfectly fine. You can also even steal a lock. For example, here, let's say that I create an exclusive lock. We'll change it down to 5 seconds. I can come over here and click steal, and now it's going to steal that lock over to this user. You can see it's held over here while it's idle over here, essentially ripping away whatever they were doing inside that other execution. You can
- 2:25
also make these abortable. For example, I can create an exclusive lock, and if I'm done with it, I can click cancel, and that immediately cancels out of that. Now, there's a ton of you can do with this. I'm sure your mind is already reeling with all the different possibilities, but I want to show you how this is implemented cuz it's incredibly easy to use. Pretty much all of the JavaScript for this entire feature comes from navigator.locks.request. So, let's just dive into what that
- 2:46
function looks like cuz that does everything that we want to do. We'll say navigator.locks, and we want to make a request. The first thing you must pass in is a name. This is the name of the lock, and as long as you're trying to access the exact same lock, that's what allows you to prevent people from doing this. So, you just give it a specific name. We'll just call this lock. The next thing that you pass in here is going to be either options or a
- 3:06
function. Usually, you're going to have some options. And then, we're going to have a function after that, just like that. That's going to take in all of our lock information. So, let's take a look at what different options we have. So, let's take a look at our options, and you can see we have the if available option, the steal option. Those are just those checkboxes I already showed you. Set them to true or false based on what you actually want to do. Then, we have signal. If you pass
- 3:28
along an abort controller, this abort controller, well, you can just create one from scratch here. We'll say const controller equals new abort controller. I can pass that in, and then if I want to abort this, I can just say controller.abort, and that's going to cancel out of that entire function. So, that's how that works if you want to essentially cancel your lock early. And then, finally, we have that mode that I
- 3:48
talked about, and that is either exclusive or shared. And that's how it maps up to all those buttons in the UI that I showed you. Exclusive again, make sure that you can never have two things executing the same code at the same time, and shared allows them to actually be shared between each other. So, you can pass along whatever modes and options you want, and then inside of here is where you actually have access to that lock information. For example, you get the mode and the name of the
- 4:09
lock, but that part's not too important. This is just where you run down that code that is going to be exclusive to whatever you want to do. Now, one important thing to note is if you pass along if available inside this function and set it to true, it'll actually still run the code inside of here. So, you first want to check to see if you don't have a lock, and then you can do whatever you want. Just return out of here, essentially saying don't execute
- 4:29
this code if there's no lock. This is going to always be called, it'll just only be called with the lock if you actually have the lock. Now, this is an asynchronous function, so we'll just make sure we await this, and that's pretty much all you need to do inside your code for the actual requesting of a lock. Now, another great thing that you can do is you can also query all your available locks. So, you can just say locks.query, and that's what I'm doing
- 4:50
up here. I'm getting all of my locks, and then I'm checking which ones are being held and which ones are being pending. So, held are currently running locks, and pending are people that are in line waiting to actually become the next one in the lock. So, this lets you execute queues and everything like that super easily, and this is a super underrated API in my opinion since it makes working in the web so much easier since often times this is stuff you
- 5:10
manually handle yourself, and it there's already a built-in way to do that. Also, this is widely been available in all browsers for the last three or four years, so it's something you don't have to worry about browser syntax or can I use because it's just in every single browser. Honestly, discovering this feature was what prompted me to create this entire video. Now, these next three are super simple and mostly geared towards mobile, but the share option is
- 5:31
also incredibly useful. The share option, when you click on this, it's a built-in browser feature that just opens whatever the native share feature is on your actual platform. So, on the web it's going to open something like this, which is not super useful, but if you use it on mobile, it opens up that native share pop-up that you're used to in pretty much any type of sharing related application. So, you don't need a native app to do this. You can do this
- 5:52
directly in the web. And the great thing is the code for this is dead simple. If we just look for that share button, all we have to do is call navigator.share and pass it along whatever information we want, and that opens that pop-up up for you automatically. This is actually something I have on my blog for every article. You can see this button right here. This is that share feature, and it implements all of the information for the title, the link, the URL, everything
- 6:13
for the image of my blog. It all shows up right there, and I can share it in any application I want. But for the most part, this is really useful when you're working inside of a mobile application cuz that mobile share is really, really useful. Now, this next option is the ability to vibrate a device directly from the browser. Obviously, if I click on this on the desktop, it doesn't work. But if I do this on my phone, it will work. For example, if I just click on
- 6:33
that vibrate button, you can hear. It is vibrating. If I chose the long option, I can make it longer. I can also use the double option. As you can hear, that creates those vibrations. And again, this is something that's super easy to do inside your code. You can see right here. For vibrate, we just take vibrate, and we
- 6:53
pass it along essentially an option that is either going to be a single duration for how long we want it to vibrate, or an array of options for how long we want all of our different vibrates to be. Super, super simple. And to make this code even easier to read, I'll just get rid of all this, and I'll just replace it with, for example, 100, 200. And now you're going to vibrate for 100 ms and then 200 ms. Now, this next one is also great for phones, and that is the keep
- 7:15
screen awake here. That's essentially a wake lock. And when this is enabled, it'll prevent the screen from actually sleeping. This is something I used very recently in an application I just built for managing certain things. I needed to be able to enter data in my phone, but I needed to enter that data over a long period of time. So, to prevent my phone from actually locking itself, I just added this to the page that enters the data, and it'll lock your screen. And
- 7:35
then when you're off that page, it'll release that lock, so your screen can actually lock itself. Now again, the code for this is super straightforward. To set this up, all we need to do is call navigator.wakelock.request and then we pass in the screen right here and it's going to say we want to request the ability to prevent you from locking the screen. And then, whenever you're done with that, all you do is you just take this wake lock and you call
- 7:56
the release function. And all that's going to do is it's going to release the lock that we just created. This right here essentially prevents the screen from locking and then this code right here allows that screen to become locked again. We also have the ability to add certain event listeners, for example, when this is removed by other things such as other tabs or so on. So, it makes it really easy for it to make sure it can sync up its state. Now, the share and wake lock APIs are 100% available in
- 8:18
every browser, but this vibrate API is only available in chromium-based browsers, so you can't use it in Firefox or Safari. Now, let's jump to another relatively simple one. This is one you actually probably already know and that is the ability to do a color picker directly inside the browser. For example, I can click right here, select whatever color I want, close off of it and that's going to be a color that I can select and use it as an input
- 8:38
anywhere. Also, the ability to copy and paste things directly in the browser. I can just click this copy button and it adds whatever that is to my clipboard and now I can paste that down. If I change the color to something else, click copy, now I can paste down that new value. All of this is again incredibly easy to implement. If we take a look at the code here for copy, copy is super simple. We just say navigator.clipboard.writetext
- 8:58
and whatever text we want to write and that's going to copy that text to our clipboard. Super straightforward. Now, when it comes to the HTML input, all we have to do is set the type of any input to color and that's automatically going to create that color picker you see with the browser defaults for whatever design that browser has chosen for the color picker. Now, the next thing I want to talk about is going to be CSS environment variables. And this isn't
- 9:19
custom properties or things like that. This is environment variables built into the browser that let you essentially read things from the user agent style sheet. So, this particular one is around how you handle devices that have multiple screens. In our case, a foldable device. This is a foldable device that has right here a section in the center where you can't actually see things cuz that's where the fold for the
- 9:40
device is. We then have the left side panel and the right side panel and the ability to flip this as well. So, I have the top panel and the bottom panel. And you'll notice I have this orange box that always is going to show up in the left or top panel depending on what orientation I'm on and it's also going to work perfectly fine when I don't have my device with the folded mode. So, whether it's open or closed, it's always going to be in the correct position on
- 10:02
my screen. And this will work with all devices. You can see this device has a large section in the middle where it can't actually see anything. That's being properly handled. While some devices don't really have a large section. You can see this one doesn't really have any middle dividing section. And again, it works just fine no matter what orientation or if I'm folded or not. And this is all incredibly easy to implement inside a CSS. So, we can use a
- 10:22
function called ENV in CSS and inside this function, I can pass various different things such as in our case, we're asking it for the viewport segment width or height in this particular case or the top or the left. And then we pass it along the X and Y coordinates for the screen we want. So, in this case, I want the left most and the top most screen every single time. So, it's always giving me
- 10:43
this top left screen. If I were to say that I wanted the right screen, well, I could change this to one and I could change this to one, change the position as well to one and one. And now you can see I have now moved this over to the right hand side of my foldable device. And that's because I'm just saying give me the right side screen. Now, the way this environment variable works, this environment function, is the first value
- 11:04
you pass it is whatever the environment thing you want to get is and the second value is a fallback. Very similar to how custom properties work, but instead of defining your own properties, these are ones that are built into the browser. Now, this viewport segment is great for when you have devices with multiple different segments like foldable devices, but you can do lots of other things as well. Some of the more common values that you may see are the safe area inset on the top, right, bottom,
- 11:26
and left. This essentially allows you to say, "Hey, what is the actual visible space on my screen?" A lot of times like different mobile browsers will have different like URL bars and things that hide and show themselves and this is just going to show you what the actual visible area on the screen is taking into account all those extra things that can show up. We also have this safe area max version as well. This essentially
- 11:47
gives you the maximum amount of visible space when all those dynamic things like keyboards are completely hidden from it. And then we have our title bar area. This is great if you're working with a progressive web app. They have a title bar at the very top when you what that app is from. tells you what space that title bar takes up. We then have variables specifically for the keyboard size. So if you want to figure out how
- 12:07
big the keyboard is that shows up on the screen, that's going to be using this particular keyboard inset variables. And then finally, we have that viewport one that I talked about which is what I demoed inside this example. Now this isn't something you're going to be using all the time, but it's great in these very niche scenarios especially around mostly mobile applications. But when it comes to progressive web apps, this is
- 12:27
specifically for desktop devices. Now let's jump ahead to an incredibly simple and easy one and that is just picture in picture. You can see I can now open up this video anywhere, resize it whatever I want, picture in picture. And whenever I'm done with it, I can just click close and brings the video back to where it was before. All 100% entirely built into the browser and doing this is super simple. You can see if we look at the JavaScript code for this, I just have
- 12:49
the ability to video.requestPictureInPicture. So any video element has this function and it's going to essentially start my picture in picture feed. And then I have the ability to essentially end that by saying document.exitPictureInPicture. And I also have the ability to determine if I have an element currently using the picture in picture feature. So this allows me to enable it and disable it by just requesting it and exiting out of
- 13:11
it. There's even various different event listeners as you can see here for when I enter and exit out of those different picture in picture modes. And then there's some fallback stuff that we can pretty much ignore. Just focus on this request picture in picture cuz that is the main feature we're talking about. Now unfortunately, this picture in picture mode is not supported in Firefox yet. it's only in Chromium and Safari based browsers. So, that is something to take into account, but the environment
- 13:32
variables we just talked about, those are available in all browsers and have also been around for many, many years and is another thing that prompted me to create this video. Now, the next thing I want to talk about is lazy loading images and also some smooth scrolling stuff. So, when I reload this page, you can see, let's just clear out of this, you can see on the console it's loading up a couple different images. Looks like we have about three different images being loaded. But, as I scroll down this
- 13:54
page, you can see more and more images are being loaded as they get close to being in the browser viewport. And this is all built into lazy loading in the browser. Also, we have the ability to smoothly scroll. So, when I click on this scroll button, you can see it smoothly scrolls me to that location or if I click back to top, it again smoothly scrolls me to those locations. These are two features built into the browser that are also incredibly easy to
- 14:15
implement. For lazy loading images, you won't believe how easy this is. All you have to do is take your image and add the loading equals lazy attribute to it. That's all it takes to automatically have lazy loaded images inside your application. And to have that smooth scroll, that is also incredibly easy. It's just a single line of CSS. You just say scroll behavior smooth on your HTML element and now all of your scrolling is
- 14:36
going to be smooth instead of that jarring version. For example, if I remove this, you can see it just instantly jumps me to my location, while with that there, it's giving me that nice smooth scroll. Let me know down in the comments how many of these features you actually know and have used. And if you want to see more cutting-edge JavaScript, HTML, and CSS features, I'm going to link some videos right over here for you to check out. With that
- 14:56
said, thank you very much for watching and have a good day.
Description
The browser is constantly releasing new features, but your AI doesn’t even know they exist. Your browser even has old features your AI refuses to use. In this video I will be showing you 10 amazing browser features (some old and some new), that will drastically improve the quality of your code.
📚 Materials/References:
Full Lazy Load Images Video: • How To Load Images Like A Pro
Lazy Load Images Article: https://blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:47 - #1 - Browser Locks
05:26 - #2 - Browser Share
06:23 - #3 - Vibrate API
07:12 - #4 - Screen Wake API
08:24 - #5 - #6 - Color Picker and Clipboard API
09:15 - #7 - CSS Env Variables
12:29 - #8 - Picture In Picture
13:39 - #9 - #10 - Lazy Load Images & Smooth Scroll
#BrowserFeatures #WDS #JavaScript
More from Web Dev Simplified
×2244:57The Best Local Agentic Coding Workflow (Complete Guide)
Web Dev Simplified1.1M views
×9.72:10Please… I Need Your Help
Web Dev Simplified459K views
×6.91:15:25The Ultimate MCP Crash Course - Build From Scratch
Web Dev Simplified327K views
×4.925:15I Will Never Use Prettier or ESLint Again
Web Dev Simplified231K views
