 Okay, cool. So for those that haven't heard of JSX Graph, which is probably most of you, here's an example of one of the screens. It's good for drawing graphs, obviously, mathematical graphs. And you can also do geometries like circles and squares and triangles and stuff like that. So I was developing in this fair bit 10 years ago. And I'm not doing it so much anymore, because it was a bit too slow and clunky. But anyway, the developers of JSX Graph wrote to me a while back and said, we're having a conference, and would you give a talk? And I said, you're all right. So one of the things that drives me nuts is the number of times I see pages using JSX Graph and you're not mobile friendly. So I suggested that for the talk and they said, yeah, go ahead. And I thought you guys might be interested in it as well. So this can be like five minutes or 25 minutes, whatever. So if you're getting sick of it, just let me know. I'll happily stop. Anyway, so why? Well, most of the time developers use large screen monitors, particularly lecturers, when they're developing stuff for students. And often students require laptops to view that content. However, all students walk around with phones, and phone sales have been greater than laptops for the last four years at least. And so why not develop for phones as well? So, yeah, as I said, most JSX Graph pages are not responsive. They're not phone friendly. Now, the group I'm talking to is going to be mostly not CSS literate. I gather because they only ever use JavaScript type solution. So that's why I'm giving them this talk. So some of this will be simple. Some of it gets a bit carried away. So just to give you an idea of how it works, what you do is you create a div like this and give it some ID. Then in JavaScript, you create the board using this sort of syntax. And you say to them, in here, you put things like I want, I want axes, and I want to draw this graph, and I want to do this circle or whatever it actions that you want. Now, that div currently it's going to have full available width, but no height. And if you try and run this, you're going to get nothing because the thing hasn't got any height. So you have to actually be able to give it some sort of height so that you can see the graph. Now, how do we set the height of an empty div? And I might just add before I go any further here, I'm very happy to hear of other suggestions. These are things that I found work. You might have other things that you've got to suggest for me that would be better than what I've got. Very happy to hear it. Anyway, our task is to set the height of the empty div and to maintain the width to height ratio. So if we want two to one or whatever, we want to maintain that ratio when we change the size of the screen or go from portrait to landscape and that kind of thing. Now, typically this is what happens and actually the developers themselves use this kind of thing. They set up style, it goes width something and height something. And then as you can imagine, once we get to do this on a phone, oops, say something about this wide, then it's pretty sucky because you miss out. So either the student has to scroll to the right to see what else is going on. 90% of the time, people don't scroll to the right, they just think that's all there is to see. And it's not very satisfactory. So if you're on a large screen or you move to landscape, it's okay. But fortunately, it's a disaster. So let's give you an idea of some of the things you can do. You set up geometric do-dads like this and get it to work. So of course, we're not going to do it like that. We're going to do now mobile friendly and it's not. Why? No, there we go. I must have done a change. Okay, so what happens now is we maintain this ratio of three to one, I believe, no matter what size we do. And it's obviously responsive, whatever. Now a few things that I want to point out. You'll notice that there's a slight gap after I do a resize before it actually snaps into the right size. That's because I'm doing a delay. So it's not too CPU intensive and all sorts of bad stuff happens. And also another thing that I'll point out is that we can move around the graph. So sometimes we can, if we need to, we can move around like this. Maybe we've moved this thing over here and we want to see what's going on up here, this kind of thing. So that will be relevant in a minute. Okay, so I go back to my slides. Now we need to allow for the phone height. We need to allow for portrait. We need to allow for horizontal landscape. We need to allow for change of orientation and resize. Both my wife and my daughter do not have their phone set so that it automatically goes to horizontal. I actually do because a whole lot of times I'm looking at sites and they're just terrible in a portrait mode. I have to go to horizontal to actually try and cope with the thing. So I do it a fair bit but what we're trying to allow for is even on load in various screen sizes. Now another thing that really bugged me is that scrolling can also trigger a resize and I finally figured out what to do with that. And also we need to allow space around the div for scroll by your finger. As I just pointed out a minute ago, you can actually scroll the graph. So if you actually fill the screen with the graph, then the user is stuck. You can't scroll up or down to get away from the graph. Even if you reload, you're still stuck because you're going to go back to the same place. So probably the only thing you can do is actually close down that tab, open the new tab and load the page again. So we don't want to be too big while we're doing this. Okay, so what do we do? Of course we developed the mobile first, something that most of the developers I see in this area do not do. We don't set the width and height using JavaScript. I'll tell you a story. When I first started doing this, I actually I did a JavaScript solution. I did eventually get it to work and it was painful. I did that because I know that most of the people running these doing this development are happy to set it up in JavaScript and I thought, okay, I'll do that. But it was painful. And I had this little voice in my ear and it was squeegeeing voice going, you know, I hate JavaScript, we should do everything in CSS. So I said, all right, okay, we need to do this as a CSS solution. So that's what I'm going to do. So the width is easy. The width of the div is 100% as we learned in the last talk. And if we want to set some sort of maximum width, we simply wrap our div in a wrapper. And we set the style of the wrapper as maximum width 500. And center it with margin zero auto or similar. So fair enough. Now for the for the juice of today's talk, we set the height of the div using the intrinsic ratios approach. And when I found this, I thought this was very useful. Setting the height to zero and a padding bottom of 10%. If we do that, we'll get a div which is the height is one 10th, the available width. Now I got caught with what I just said, it's one 10th of the available width. It's not one 10th of the screen or one 10th of something that you think it is. It's actually of the available width. So here's an example using that. The height of it is one 10th of the width of my div. Okay, so what we do on resize, JSX graph has got a resize container thing. And it looks like this. Essentially, this is the resize container thing. We give it the new width and the new height so that we set this after we've done a resize. So we get the width and the height using get bounding client rectangle width and height like this. And a really annoying thing is the JSX graph. It will actually set the width and the height as a style if you don't have one. So here's my nice little CSS solution. It goes ahead and puts in a goddamn JavaScript style start width and height. So you've got to get rid of that so that the whole method works. When I'm giving this talk tomorrow night to the developers, I'll be a little bit more kind, but a bit more gentle. So summary of what I just said, we unset the current width and height. We get the div width and height which we set by CSS using those various things that I just showed you and we change the board dimensions using resize container. So each time we do a resize, we run the following. Now one of the biggest challenges was actually square case. This was fine. I thought this would be easy, but it actually wasn't that easy. And so I go back to like this. And if I use any kind of phone, maybe using iPhone like this, they should be exactly the same of course if I go side by side. So it's happily allowing for the screen. So what I'm allowing for here is the screen height as well as the amount of screen width that I've got and keeping the whole thing square. And I kept thinking this should be fairly easy, but it really was a bit fiddly trying to get that to actually work. One thing I wanted to show you is that this worked for any size and when Apple Watch is actually available to show HTML, I'm ready. So we can have ridiculously small or ridiculously big. Okay, so we go back to to the slides. So what I just showed you, I also wrapped it in a div. And so it's like this, the height for the wrapping div is 100 vmin, which the last talk just talked about. And I'm subtracting 3.5 m to allow for the heading that I had on the page. And the inner box is actually I set the width. Now, when I first did this, I thought, okay, I should be able to set the height and width on the outer box and then do whatever for the inner boxes, but that didn't work. And then the class div square is what I was talking about before, having height of zero and padding bottom 100% like this. So like this. So vmin is the minimum of browser height and browser width. And that's what I'm making use of. So I talked before about throttling the resize event. Any kind of change in the like causing reflows and redraws of the whole screen is actually very CPU intensive. And if you've got other animations and things going on, things slow down big time. So a good way to go is to throttle that off. Here's my resize throttler. I think I've got here, no, I haven't. Sorry. But anyway, we use a resize throttle. I didn't want to get too technical here. And all it does is it just fires the resize event every half a second or so. And then in the resize throttle function, we call this board resize container that I've just talked about. Okay, so let's look at some example pages. This one here comes from the website that I developed and sold earlier this year. The new owner just puts ads everywhere and I hate it with a passion. But anyway, here is desktop type view. And when I go to mobile view, we've got our JSX grats thingy. You'll see a whole pile of errors occur. That's coming from the board itself. It's got an issue which they have subsequently fixed. So this is actually, here's a little bit of mathematics for those of you who want it. Some of you get turned on. So great. But this is one of the most popular pages actually on the site. So it actually will convert polar to rectangular. It will convert back in the other direction as well. And it will also explain what that means. So if I want to do say a radius of 20, I can do that. And an angle of say 50 degrees and then convert it. The graph updates and the values in all of this update. And if that's too painful to put in those as text inputs, you can, that's the error. That's why there's a complaint. So like that. Now the next example, this was actually last night. One of the first presenters last night was actually some lady from China. And she talked about this game of life, which is a cellular or martyrdom, if you've heard of it. And this was her site. And I was looking at it on my phone and I went to her site while she was talking. And it says, please use your iPad or desktop to browse this website. And I'm thinking, no. So you've seen me do this before. I always think if I can do a better job while I try and do it. So I had to go myself. Here is her page but done so that it is mobile friendly. And so I haven't done the auto resize for this, but I just wanted to show her that it is actually possible to do. If you've never seen this before, it's actually quite interesting. What these things represent is animals or some sort of live creatures and they evolve over time. And if they are next to like these two, if they're next to one other one, they're okay. But if they're next to three other creatures, one of them will die because it's too crowded. If they're lonely by themselves out here, they will also die. So at the time we can see what happens to this community. So it's splitting up and it eventually evolves into, I think it's four that end up up at the top. So that was that was the example that we saw last night. Okay. And then my final thing is all the stuff that I just said, I created a page for them. And so here it is with more details of what I just said. And I can show them that indeed it works on a even a tiny little iPhone and the graphs and stuff all work nicely. Now I just want to talk about this this scrolling issue on many phones when you scroll up, there is no URL bar, address bar, but when you scroll down, it appears. Now that actually turns out to be a resize and that was driving me nuts. My boards were all each time I scroll, the boards would all mess up and resize and fiddle around things became unstable. And so what I do now is I actually set up a scrolling and just listen for the scroll event. And if it is scrolling, we don't go through any of the resize event. So it does a resize only if you actually do a resize the page, not scroll like that. So here are some of these same examples. This one actually this one actually shows something as well. The original example for this had the slider at the top and the text the moving text at the bottom. This text if you can't read it just says the value of s is 0.66 the value of the slider. And the point that I make is if you've got sliders and things you want to make sure that people can actually see what they're supposed to see. So the original is like this the slider was on top and the text was moving. And of course when your fingers in the way on a phone you can't see what's going on. So I try to make that point to them. And these are these very some examples that I just talked about. Here's a hyperbole that you can do. It's quite a neat little application. And then I just invite them to make use of the page if they wish. So basically that's it from me.