 Hi everyone. My name is William and I'm going to be talking about putting measurement converters on the web. So why did I make the converters? Some reasons are that a designer asked me about what pixels to M's was how to convert from pixels to M's and I wasn't sure and I'm a web developer so I thought it would be good to find out how to convert pixels to M's. And it's more reliable to build your own converters. For example, kilometers are not yards and that's a website, that's a real website. You say the internet's not entirely reliable? Well, it just came up when I searched. One of the first things I did was to go on Google to find out how to convert pixels to M's. Here's one example of a website I found. I wasn't sure what a base pixel size was so that didn't help me. Here's another example. I wasn't sure what a default pixel size was so this also didn't help me. There were lots of tables as well and complicated converters. In the end I made this. I thought it might be helpful for learning and I wanted to practice front end development. Something I wanted to do was to make the input boxes except only numbers but E appeared. I was testing the numbers type and that happened. So apparently these characters are numbers. The solution was to make an input type equal text. But I thought that my converter didn't look so nice so I added new features. I also realized that the font size in M's for the child element is relative to the font size in pixels of the parent element. And this is how you convert from pixels to M's, I think. I made this just to check all the texts are, they're all 2 Ems. Here's the new user interface. There are SVG buttons, animations and I use Flexbox. One of the most interesting things that I used was SVG clip path. The clip path property. I used Clippy to help with these to get clip paths. There are still many improvements that I want to make to the website. Here's the browser compatibility. You can look at the code and you can view the site. It's online. That's the end. Do you know why E and E are numbers? I think it's to the power of. I think that's why it's like that. And the other thing is why convert pixels into M's? I'm not sure, but I was just It seems to be a problem that many people have with so many converters being around. Obviously. Which is strange. Thank you, strange. Like for me, when I go to websites, the hardest problem that I have is usually when to use M's and when to use pixels. I mean, usually if a form is rather straightforward. But sometimes I find myself using margins in M's and addings in M's too. If I feel like that the amount of space around text, for example, should be relevant to the text size. So you use pixels sometimes and M sometimes? Yeah. That's always the hardest question for me is when to use what? My answer is for everything use M's or M's. But for those small things where you have to use pixels, you use pixels. Like for example, one or two pixel borders, you use pixels because you can't afford to have sub-pixels. When you use M's or M's, you can't go into sub-pixels. Right. And the good thing about Rams and M's is that they can't go into sub-pixels. Can you actually set anything in sub-pixels? You can do quite something in pixels, technically. When older CSS things like pixels were absolute on the screen, around IE7 they changed to sub-pixels and virtual pixels. Because in the old days, increases had a size and nothing else would change. So if you got an image that looks 50 pixels wide, it would stay the same size. So they changed out the pixels in our mode and they've also captivated down to be sub-pixels. A sort of thing that's a question between they actually showing how they encapsulate stuff in browsers. They all basically have a sub-pixel measurement as their base. Gator uses 60 pixels. So one pixel is 60 years. Grom I think uses something else, like 65 or something. Microsoft uses 100. But they all basically have a base measurement. So sub-pixels are ashamed of what they do actually being such. So another question that I was talking to you, why not points? I remember back in the days, everything was points. And it was like you measure the font in points, not in pixels. And like now it's all empty. Yeah, we've kind of gone, because they end up going around originally. And then it's a type of graphic measure just like the point is, and it's relevant in certain circumstances. They're everything going in. Now everything's kind of going back towards pixels to each step. So the question was more, what's the point of using the energy pixels are very relevant. And so before, when you've got something as relevant, so if you go above and the panic around it is going to be in relation to the type size, then you enter exactly what you need to have. If you're measuring like the layout of something on the screen, then pixels are probably what you want. And how about red, when we want red? Red is nice. If you really want red is group M basically. So if you group sliders to 16, then it's exactly 16. If you use it, I can't remember why. Usually if you can't figure out why the hell one M just thought the fault was there. Then you use red. One thing that is very useful for is that you've got a base grid there. If you want that to vary based on the group of sliders, which is something you probably want, then switching it to red could be useful. But since pixels are variable now it's not so important anymore. I think M is useful for visualizing all your measurements in terms of a ratio to a single base size. So it helps you to think of one measurement as, you know, this is twice the usual measurement. I say this 32 pixels doesn't tell you whether it's twice or one half times or one times the usual default size. I think it's actually a rare use case for M in that sense, because when you really want to have, let's say you think of the website as a bunch of different components, when you really want to have like one component inherit the font size from the base component, right, because it would be a use case where you feel like if the base size is 16 pixels then this component needs to be two times that in terms of standard font. But when is that not to be the case? Actually I think RAM should be more useful than M's most of the time. I don't know if that's any clear. Well, for example the button. If you've got a button, then the padding inside the button is relative to the font size. And if that's the case, you can compare the base button styles once. And then if I've got a big button over here, I'll just have the font size and the rest of it takes care of itself. So in that case, using the M's is really relevant. And the RAM is not sorry. But if you want all your buttons to be the same size, and you're somewhere in some piece of text that has been scaled for some reason, then you won't get back to the default size thing. Yes, and that's the general reason for that. It's when you want that reference button to be the same size. You still have to figure out why, but it does come up. It's good to know that it exists. Well, that's the thing. I recommend nautical miles. Here into fractions or something.