 Hello my friend and friends and guess what the state of html survey is out. That's right. There is a new state of survey. You might have seen me go through the state of css in the past. So now it is the state of html, which is a new survey that they've put out this year. And you might be saying it's html. What is there to know or learn or whatever about it? It's the simplest of all of them. But I only glanced at the first page, which is about form elements. And I actually saw a few things in there that I never even knew were a thing. So let's jump on over and check it out and look at the nice logo that they've created for this. It looks fantastic. As you'd expect. And just really fast, Lea Veru did do a lot of work on this survey. So a big thank you to Lea and of course Sasha, who's the driving force behind creating the state of surveys every year. And anyone else, you know, there's always a few other people that help with things along the way as well. So anyone who's put the time into this. Thank you guys. So I'm not going to show you guys all of the survey that I go through here, just because there'll be parts that are, you know, it's there are things that are very simple. But we'll sort of take a look at the quick bits. And then I'm just going to edit this down to be the highlights of the stuff I don't know about. But I'd really encourage you to also take this survey because the more people who take it, the more meaningful the results are. And these results aren't just for us to like geek out over, which I do enjoy doing. But it also the browsers actually use it to show or to know what people are interested in. So yeah, I'd really encourage you to come and do them. And there's this nice reading list feature that is sort of hidden behind my head. But if you come across something, you can add it to your reading list. And it's actually going to provide a list of links at the end when you finish to all of the stuff that you've added. So if there's new things you come across that you've never heard of before, it makes it really easy for you to learn new things and just like have that list of stuff that you want to sort of dive into a little bit. And this first one here, we have a data list, which I've used, I think I have a video on this that I took a look at. And it sort of lets it's like autocomplete without having to have any JavaScript because you provide options. And it's kind of cool. So this one I've definitely, oh, they added something new with interested. And I want to use again or a native experience. So that's kind of awesome. This is new to this one. And I like that because we're showing interest or like this used to be a separate part of the survey sort of. So this I have used. And I want to use it again so that you don't have to, I guess, select that, but I'm going to do that. And I think, yeah, we can leave comments now as well. So if you want to write something, I don't know what comment I would leave on it, but if we want to write a comment, you can. So I'm going to edit this down as I go through this and just give you my highlights. But again, I really encourage you to do this as well. All right. So here is the show picker, which I have not used. I don't write as much JavaScript as other people. So maybe you've used this one. I've definitely used inputs that have pickers. So like a color picker or other things where, especially if you do type is, is it color, I think, on the input or whatever it is for the color picker, it's nice and easy, and it gives you the thing and you click on it. But you can also have the button that links to. So we have the date input looking at the ID here. So clicking that button will also open that, which is just super easy to do. So I've never heard of it, but I'm definitely interested in that one. And you know what? I'm going to add that to my reading list. I like adding these things to my reading list because it gives me sort of a list of stuff to make content on in the future. All right. So select list is another one here that I've heard of it. And I'm definitely interested in it, but I'm stopping on it because this is one that I think everybody should be really excited about. And if you know your regular select one without the list there, we just have a select with options in it. So it's our drop down. And everybody gets very frustrated with it because there's no way of styling it. And then you have to create, you know, you have a designer or you're you have something to create that means a custom drop down. And then you actually have to recreate the entire thing and doing that in an accessible way is a nightmare. And so now they're actually creating a new element. It used to be called the selected menu. And now it's a select list, which I much prefer. I never liked the name select menu. So I'm happy they changed it. And oh, look, no browser support. So there are highlighting that. Now, I'm pretty sure it's behind a flag in Chrome, I'm guessing. I think it was Dave Rupert and Chris Coyer, maybe built something together with it and did a quick video on it, where Dave was showing it off. I believe how it worked. I could be wrong on that, but it's not supported in any like production browsers. So I sort of like that they do this, because sometimes I think in the results, people have said they use things that they couldn't really have used yet, or they might have mixed it up with something else. So they're just like, you might have used this if you're doing experimental stuff, but here Pauli fills transpilers and other tools. So it is possible you used it, but they're putting a bit of a warning. Yeah, everyone wants a styleable list. We're not getting they're not making the original select styleable, but they're making a new element that works just like the select, but that also opens up the door of styling things. And that means they're slowly going to be opening up this idea of styling form elements, which I know everybody is very excited for and has been probably the one thing that is like the most requested feature by like as a whole is being able to custom style form elements. I think it's just for backward compatibility that they're not making the select styleable. They're we're getting a new element for it, but that's fine. I'm really excited for this to actually become standardized and and the browsers to support it. It's going to be great. And you know, I'll add that to my reading list just so I can know where the state of it is. Content editable plain. Oh, I did not know you could do that, but I'm definitely interested. I know content editable means like if I made this paragraph content editable, I could just come in here and type and change it. But I didn't know that you can make it plain text only. Hmm. That's interesting. Kind of cool. Nice. All right, we're on to the next section now, which is interactivity. I didn't show on the last question of the forms one, there is a pain points one, I put a couple things in there, but I didn't want to share that because I don't want people doing the survey just writing what I wrote along the way. So I want to make sure, you know, you're forming your own opinions on these things. For dialogue boxes, I've definitely used dialogue. I've done video on it. Dialogue is awesome. It's great to have something built into HTML like this now. It's basically a way of doing like modals that is native to HTML. See dismissible alerts, sub windows, interactive, you know, it's great. And I'm really happy that we have it exclusive accordion using details in summary, which is grouping them by the name. And I was like, I've never heard of this before. And there's currently no browser support. So I'm going to say I'm interested and I'd like to know just how this handles from an accessibility point of view, because that was always the issue with using details in summary as accordions is just there was some missing functionality with them for when it came to dealing with it. So I'm curious about how this would actually address that. And I'm going to add that to my reading list. Because I definitely didn't know that was on the table of something to come. So a little follow up there, super interested and pop over planning a video on this, but I haven't used it yet. If you don't know about it, definitely check out pop over, you know, overlays pop ups menus, it sort of, I think explains itself, but this is one of those things that again, we've had to have these really custom solutions a lot of the time. And it was always a little bit annoying and hard. And this is going to make our life a lot easier, which is great. All right, we're on to the content section now, just so you know, if you haven't used lazy loading it, definitely, you know, you have an image you had loading equals lazy and it just works. You can do it on iFrames. I don't know if the iFrame support is perfect yet, but it's one of those things that even if it's not supported by a browser, it doesn't change anything. It just doesn't, it doesn't work. But the element will still load in just this, this attribute does nothing. So it's really one of the easiest progressive enhancements you can ever do. And yeah, super, super easy if you want to lazy load stuff in, you know what I never heard of blocking. I usually we do the opposite. We don't want things to block rendering until it's loaded. So yeah, I don't know. I guess I just never needed something like that. Maybe I have no idea if it's been around for a while or not. I'm going to add it to my, I want it in my reading list. Yeah, there we go. It's in my reading list. Blocking equal render. Yeah, I'd like to, if you know why we'd want to use something like that, leave a comment and I can think of a few things off the top of my head. But if you have a good use case for that, leave a comment. Let me know what it is. I've definitely have not used models for AR, VR or 3D. And obviously, we don't have any browser support. I haven't even heard of that actually. So I am interested in it though, and we'll add that to my reading list. That sounds like it's kind of cool that we're bringing that world into websites, which is kind of interesting to think about. Other tools and features. I've used Astro and would definitely use it again. My personal site is using 11T. I would use it again. Astro I'm using for other sites that I'm currently working on. Gatsby I sort of played with, but I'm not going to count it because it was just to see what it was all about. Hugo I've never used. I know it though. Jekyll. So I've used Jekyll. I wouldn't use it again now. 11T is basically like the newer version of Jekyll in a way. Not quite, but sort of like the next stage along. It wasn't a negative experience using Jekyll. I just wouldn't use it again. So I don't, I'll just leave it I guess with neither of those selected. Again next day, because I've played with it a bit like Gatsby, but I've never done anything serious with it. So I don't really count that as using it next. I haven't used. There we go. Oh, old school elements and blasts from the past. Nice. I have used. I have used. I have used. I have used. Next idea. I don't recognize that. I've used Blink is index. I haven't or some of these I might have used like Applet too. Maybe I did and I just don't remember because it was a long time ago. The problem with being old is you forget some of these things, but definitely these are the ones I remember very much. Yeah, so nice. I like that little section blast from the past. Anyone who doesn't know of some of these, first of all, don't use any of those please. But you know, if you have, if you come across them now, I still see people throwing center sometimes randomly on stuff. Please don't do that. All right, for this usage section, again, I'm not going to go through this because I don't want to influence people's answers on these. So I'll do it just not, you know, I'm not going to record my own answers on here and show it to you guys. So I'll edit that part out and I'll see you when I get to the next section. All right, we're down at the end of the survey now, which is the about you section. I'm not going to go through it with you. But obviously, I always get questions about why they want this information. It's just for, you know, first of all, you don't have to answer any of the questions that are here, but it just helps build a little bit of a picture to know a little bit about who's actually answering the survey because the results do tend to skew a little bit towards, you know, white males generally. Most people I think it's the US is the large majority followed by a bit of Europe. And then so it's sort of there is under representation from certain groups within the survey who are filling out the survey. But by giving this information, then we know where the representation is coming from. And it just helps us build a better picture of like, okay, this information is valid. But for these, you know, this part of the world or for these demographics, and you know, so again, you don't have to answer any of these parts that you don't feel comfortable answering. But you know, it just does help build a bit of a better picture to understand how meaningful the results are. And if there are any biases, what they might actually be. And they were, I got a feature, I got 700 points. I've used 67. And I've heard of six more. That's not, you know, on the CSS survey, my score was a lot higher. So a lot of the time people that followed this when I do that one, it shows that, you know, they're all like, Oh, he knows a lot more than I do. But obviously, I don't because look at that. So, you know, let me know how you did on this one. Leave a comment down below. There's going to be a lot of people probably who get higher scores than me. And then as I said, the cool thing, you can look at all these links and all the different information we can get. And then you can even have entered email and they'll send the reading list to your email address. So that's really cool. And just to finish this off, a really big thank you to Sasha and Leia for putting the hard work in this and anyone else who was involved in putting the survey together. And I really look forward to seeing the results of it. And if you haven't seen it, the state of CSS results are actually already out now. The survey was done a little while ago. And there were some really surprising results in there specifically related to tailwind that really surprised me. So if you'd like to see that video where I explore the results a little bit, it is right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome Johnny, Tim, Simon, Michael and Andrew, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.