Frontend News #18: Self-Destructing CSS, Throttle Specific Requests In Chrome DevTools

Do you know what a self-destructing CSS pattern is and why you should use it in your web components? Do you know how to throttle specific requests in Chrome Developer Tools? And do you know how to download SVGs from a specific web page effortlessly? Find out all about this and more in the next few minutes. This episode is sponsored by Cloudways. More on their fantastic offer in a bit. First up, Scott Jehl explains why you should be using self-destructuring CSS in your web components. As Scott explains, a pattern that is often used in web components is this one, where you actually hide all components that have not been defined. That's why this pattern is common; before the component is visualized, we don't want to show it; we want to show it in its complete state. So before it's defined, we hide all components. But this is an anti-pattern because, for example, if JavaScript for one reason or another doesn't execute, then you end up with a state where users don't see absolutely anything in regards to your web components. The better option when JavaScript is not initialized would be to show the HTML contents of this web component, even if its functionality, that is defined in JavaScript, will not be working. This is the pattern that Scott recommends for your web components. Instead of this, you want to use this. Essentially, this tells the browser to hide web components before they're defined, but after two seconds, regardless of what the state of JavaScript is, we want to show this component. That's how you can be certain that if JavaScript fails for one reason or another, your web components will still be at least in a somewhat usable, visible, accessible state. So, if you have been using `: not(: defined)` pattern in your web components, stop doing it. Instead, use the self-destructing CSS pattern. You probably know that Cloudways is one of the best hosting options out there. And this week, they are actually running a Cyber Monday supersale. They didn't ask me to say supersale here, but it really is a supersale. You're going to get 50% off for three months on any of their plans. And their plans are fantastic. Not only do you get 50% off on all of their plans, but you also get 50 free migrations. This is perfect for spinning up new client sites, staging environments, and moving legacy projects or your side projects to a better hosting provider. Don't miss this opportunity and jump on this deal today. You'll definitely be happy that you did. Thanks so much to Cloudways for sponsoring. Next up, Matt Zeunert showcases a new feature in Chrome Developer Tools that will be really handy when it comes to performance debugging. This is the ability to throttle specific requests in the Chrome Developer Tools. In the network tab, you can throttle the entire page, as you probably know, but sometimes you want to throttle just specific requests. For example, to see a specific loading state of your page. This is really easy to do with Chrome's new feature to throttle specific requests. This feature is only available in Chrome Canary and only if you enable it specifically with a flag. I will open `chrome::/flags`. I will search for “individual request throttling. ” Here it is. I will set this to Enabled, relaunch Chrome. And now that it’s enabled, I can jump back to my page, open Developer Tools. In the network tab, I can select any resource, and I can throttle that resource specifically. Let's throttle the logo of this page, for example. I'm going to right-click here, go to the menu “Throttle Requests”, and I will set “Throttle Request URL”. Here in the sidebar, I will set the throttle to 3G. So now, if I refresh the page, you see that the page is loaded, but as my logo has been throttled, it takes a little bit more time for it to appear. So this new feature in Chrome Developer Tools will help you debug individual requests more easily. Next up, Roman Komarov shares something that you have been thinking, but you probably were afraid to say it, and I'm in the same camp as well. When people are talking about variables in CSS, they are usually talking about Custom Properties because, technically, that is the correct name. But just as well, saying CSS variables is not that wrong. CSS Custom Properties are defined in the official module called “CSS Custom Properties for Cascading Variables”. So calling them CSS variables is not that far-fetched from the actual technical official name. So this is just a quick reminder that if you are talking about CSS variables, feel free to call them CSS variables. There is absolutely nothing wrong with that, and the specific name “variable” corresponds to the functionality of CSS custom properties or CSS variables, to call it that way. Next up, I want to showcase a fantastic browser extension by Ross Moody, SVG Gobbler. I've been using this extension for a while now, and I really love it. It enables you to manage

vector images on any web page. Specifically, it allows you to easily download SVG images that are found on any page. I already have the extension installed. I will open the context menu on the page with a right-click, and I will select “Search page for SVGs. ” This will open the custom interface of SVG Gobbler that will show me all images, all SVG images on the page. So I can select any of those images, view the source code, copy the original, or simply download it, as most of the time I have been using this particular extension. It's a really handy and a really practical way to download SVG files from any website. Last up, Una Kravets showcases the new custom select. I'll open the dropdown here, and you can see it's really beautifully designed. But the thing is, behind the scenes, this is an actual select element. I can open Developer Tools and show you exactly that this is a select, or in the code… I will expand the HTML field here so I can show you that this indeed is a native select element. Inside of that select element, there is a custom button element and a number of options. Those options are, of course, the ones that you see right here on the page. JavaScript is empty exactly as you expect because this is a native HTML element. And I'm going to open CSS as well to show you how you can actually style it. You need to set `appearance` to `base-select` and then you can, of course, customize all content within that particular HTML element. The browser support for this is not ideal at the moment. It's only supported in Chrome and Edge, but hopefully, other browsers will implement this amazing feature quite soon. Until then, you want to try it out, play with it, and see what all is possible with pure native HTML and CSS. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different customizable select element. Or rather, in the next video.