 It was my 40th birthday early this month, my wife surprised me with the present of going to Hamburg to see the band Gorillaz, which is awesome. So this next talk CSS I'm just going to be bouncing around because I've just come back from that. Because I like to find out about stuff in advance, I'm going via Istanbul Airport, so let's check out the website for Istanbul Airport. How bad could it be? There's no question you want to ask. The answer is, yeah, Istanbul, Istanbul. What I found is basically a perfectly preserved website from about 15 years ago. So the reason I'm actually talking about this tonight is because I've not seen a thing like this for a very long time, and it had me thinking about some of the vintage techniques. Notice how long it's taking to load as well, and you can see a lot as it's actually loading here. Notice how you've got the backgrounds aren't actually in here yet. It'll get there maybe eventually, maybe. This site weighs in at about four meg. The back end to it is, it's actually built off SharePoint, so already if you're familiar with that, you'd be crying tears of just sadness or rage or both if you've had any experience with SharePoint. It's an older version of SharePoint as well. The back end is ASP.NET 2, which is from about 2007. Something like that. .NET 1 came out in 2003 or 2003, I think. .NET 2 was around then, so it's pretty old. This is actually a responsive site as well, which is amazing. I'm really pity the developers behind it. We're still waiting for it to load, which is why it doesn't quite look right at the moment. So that's the back end. Why does that justify the front end that's going on here? Back in the mid-2000s, you didn't have shortcuts for designing anything. You had to do things the hard way. CSS support was negligible across browsers. You couldn't do things like gradients. This gradient here is actually an image. This was a technique of the time where if you wanted anything that looked interesting, you needed to load custom images. The image editors at the time, Fireworks, MacroMedia's old thing, which turned into Adobe and got killed before Sketch was a product, they enabled you to take things and slice them and put them straight into this. A lot of those image editors are still built in that same mindset of how you put sites together. They haven't really worked out what CSS is yet. If we were building this now, this would just be a really simple CSS gradient. But again, there was no such thing back in 2017 for the Istanbul Airport development team. You can also see a lot of the design intent. Everything's got a gradient on it. If you're familiar with the first iPhones up to a version five or six, I think, everything was really embossed that had to look like a physical thing. Everything needs to jump out of the screen at once. We've gone back from that to flat design and now we're somewhere in the middle right now. But flat was the antidote to this. The images probably won't load here. This is also typical of things that happened in 2007-ish because, again, a four meg site built back then, bandwidth wasn't so great. I think there is something like over 100 images on this one page. Just trying to do so many things that you couldn't do reliably in CSS. I say that, but if you knew your CSS at the time, you could do it anyway because you know what you're doing. But this was trying to pull this off was cutting edge at the time. So that's not going to launch. You can see what fails when these things fail. I've got really hard to read text because I'm relying on a background image. The good technique at the time because you couldn't rely on gradients appearing is you could set a solid background image of something that's close to what the gradient is going to be and that would prevent this kind of thing from happening. Before we get into some more bits, I'll talk more about the architecture. ASP.net is a server architecture. So what's that relevant? What relevance is that to the front end? Ah, has it killed my battery? Not yet. What happens, these days you have single page applications where you have the server that sends a whole lot of JavaScript to the client, which then calls APIs and basically most of the logic is on the client. You have server architecture where server renders something, sends it to the client, lightweight hopefully except if it's got ads and there's a ton of JavaScript, but the idea is you're not sending as much every time. So there are two architectures. This method is somewhere in between and my theory is the people at Microsoft who started writing .net had not really that great a familiarity with the web and wanted to try to break it similar to what we saw with trying to break autofill. So things like the back button, they had to work around so the back button wouldn't work because you don't want people to hit back in a browser. There are lots of hacks and things like that, this disabled basic browser behavior which is terrible, but this is what .net was all about at the time. From my own experience writing in .net I basically threw most of the framework around and ended up writing my own things to make it work properly, but this is not the case for these guys which is why it's such a good example of what not to do. I mean trying to pull this off now would be hard, but back then this is a pretty default kind of thing. So what .net does is it has all the server side architecture typically written in C sharp sends things to the client with lots of heavy JavaScript as well and this is why this thing weighs four meg because it's got about a meg of JavaScript, a couple of meg of images, a whole ton of CSS that's compiled from the server, but you have none of the advantages of a single page application in that every time you do something you have to hit the server again and the engineers at Microsoft were close to what they needed to do for single page architecture or single page applications in that they wouldn't even rely on a simple thing like an anchor because you know an anchor has only been in HTML forever so they had their own custom versions of what an anchor is or a button click or anything else like that and that was in the form of a do post back. So every single interactive element when you click on it you're not actually firing an event you're firing a custom Microsoft event which then hits the server and does something after that. So they left no stone untouched and completely gutting and ruining the browser, absolutely incredible. This doesn't look like it's going to get any better, let's just zoom in a bit more and I'll see if I can, here we go. So the images are taking a while to load, the problem is you've got lots of different images, browsers are very conservative about the way they load things, you don't want to load everything at once if you don't have to. So what happens is as soon as you invoke that code the browser does a whole lot of requests to the server to try to get those assets. So what we saw there in that delay for the background images to appear was the server sending about five or six different image requests trying to get the backgrounds. This is obviously not a great experience. You could fix it two different ways, one is having CSS so at least you've got some solid backgrounds but since this was built in the Microsoft.net mentality basically they took Windows development and said we'll do exactly the same thing on the web because what difference is there? So that's one method you could use CSS but no, it's not to that. The other method is you could actually case your images before you need them and this is probably the better method, you'd do both anyway, the good way is you'd use the CSS for solid backgrounds and you'd preload your images as well. Now these days you've got preload and prefetch and all sorts of things which are meant to speed up websites, there was no such thing in 2007. What you could do instead is actually use a JavaScript call to just ping the images as you go. So the header of the page because we didn't know about performance much, you'd hit the images one at a time until everyone is cached in the browser. When we did know about performance we moved the JavaScript down the bottom instead. So let's go a bit further. Every single state, every single interaction that you do in CSS and don't think about these days was done the hard way but here we go. So now I've got it cached, it's fast although the browser is probably struggling anyway because it's doing stuff it doesn't know how to. To make things more difficult, every single one of these menu items seems to oh no I've clicked on something, that's all right I've got about three months. Oh god. Most of this is cached at this point and it's still taking forever to load. The reason for that is this browser is absolutely straining. I'm using Firefox developer edition, this is the new like really fast Firefox engine and it's still struggling with this thing which is just incredible. And imagine this in 2007 when Firefox come out. It would have been a much earlier version of Firefox. It was back when we didn't get a new version every few weeks. Machines struggled on these and think at the same time the iPhone was introduced around the time of this technique. Trying to load that on an underpowered iPhone it just wasn't good. See these are actual image, so these are probably just bold, there's nothing going on. So there's genuine CSS at work here. Let's see if I can, oh there we go. One of the other things that browsers did at the time is they would cache an awful lot more than they do now. Browsers have got a lot more conservative because loading the same thing every time is not so great because this site loads so many images. It's actually pushing itself outside the comfortable browser cache. So that means every time you navigate to another page it's actually like the cache is pretty empty or at least a lot of the assets are out of there because there's just so much that's throwing in there. None of these images are compressed in any way either. This was a bad technique at the time but image compression was hard work. You had to use multiple methods to get a JPEG optimized for example. If you started in Photoshop you'd save as a JPEG then you'd run it through about three or four utilities and then you'd get an image out at the other end that actually resembles something you want to use. Same thing with pings, actually there was a different process if you had a ping or a GIF. It was really complex. So things are a lot easier now where you've got lots of things like Webpack that just take care of it before you don't have to think. This area you didn't and this site shows the consequences of what would happen if you didn't do that. Siri is probably going to go away Siri. So we should see the same bad hover effect again. There we go. We've got rendering problems that you can see here. This is cut off because you're actually using layers of images on top of each other. Like if you're familiar with the way the DOM works it's all nested. The nesting here because there is so much HTML going on is really complex for the browser to render. So you'd get rendering problems like this all the time. This is great. Unreachable code after a turn statement. We're also seeing rounded corners here. You couldn't do rounded corners in 2007. So you had to use images even when CSS was around. Like roundedness is not something people do very much because we're all flat and square and everything these days. Seems to be the nature of the web. Someone comes up with an idea. They can't do it with the current techniques. So they have a horrible way of doing it and then wait for the browsers to implement it. By the time the browsers come up with the implementation we don't want it anymore. It's really nasty. So what you would do to have rounded corners, there were two different techniques. One was to have a rounded bit on this end, then the middle, then the rounded bit on the other. That was the best way of doing it because you've got the smallest possible images. And you could use a one pixel thing in here because it's the same one pixel all the way across. They've done it the bad way where they've got one image for this thing and it's also fixed. So if this extends beyond that width, like if you go with something that's longer than here, you'll see a gap because that's just not designed to cater for that. Oh, you might repeat it. No. If it repeats then you actually repeat from here. Yeah. So that's even worse. So that's our background image here. If we have a look at the HTML, look how much is going on on this. Oh my God. I don't really know in styles. Yeah. But the server does it for you, so it's all okay. So as much as we're looking at this, so there's your span, there's not a span. There's a div that must be part of the hover or the drop menu, I guess. The index one probably. Yeah. So somewhere here, we've probably got the, but it's just not loaded properly. So something's gone wrong. The margin left looks weird. It's an underscore margin that you zoom in. You must zoom in a bit, that's why you've got the progress. Browser zoom in that era was a problem. They're usually pretty good now. If we zoom out, we'll try it and see what happens. No, it's not making any difference. Yeah, it's just a rendering problem. It's possible that the image hasn't loaded from the server. Again, when you hammer the server too much. What's that? Is it because of the display now? Well, this is the other thing as well, it's about to get to. Like we use CSS for state, hover, focus, et cetera. What if you didn't have CSS? What if you've never heard of CSS? What if you thought, what's, why bother with CSS? You'd use JavaScript for all of this. And if you use bad JavaScript, you get conflicts where things don't load properly. Yeah. So at least they've got the list item on this. So we're using an on mouse over and it's an inline on mouse over. This is just awesome. I see there we go. And you can see, it might be a bit difficult to see. You can see there's a pixel out on the right, like rounded bit. Another classic telltale sign of bad web development from the era. The other thing we're seeing here as well is that you have this background here. What they've done is they've used, I'll just go in and inspect it again. There's my image. Okay. What am I actually trying to do to the background here? Am I trying to darken it? Or am I trying to put a new color in there altogether? If all I'm trying to do is darken it, you can use, and you don't have CSS, you can use an alpha ping with just a gradient on there with black to white or black to transparent. And you can just put a darkened on there instead. Even with CSS before you could do gradients, that was the better way of doing it. Of course, we're seeing all the bad techniques here. So this is the bad way of doing it where you have another completely distinctive image. The advantage of using a black to transparent gradient is that you could apply it anywhere. So anywhere where you want to darken with that gradient, you could do exactly the same thing. Since there's already a gradient on here, maybe you'd want something else there. The box shadow and everything wasn't something possible in CSS, so maybe you want something else for that. But you wouldn't have to work that hard, at least not as hard as we have here. So you could potentially deliver a site like this under 100K or 4Meg, depends which one you prefer. How are we going for time? We're running time. Okay, I'm not gonna spend too much longer on this because it's torturous. There is flash somewhere on this site as well, just to add to the kick in the pants the thing generally delivers. Okay, what we're seeing here, containers weren't very flexible. And then you could do it where the content shrinks up there, but then the evil boss man comes along and says like, well, why does that one that high? And this one, the other height, when every screen is the same height. So the method is you have a fixed height, like pixel height on the container and irrespective of anything else that goes on, you end up with the same. So let's inspect that and we'll have a look at how that works. Oh, we've got a clear fix on here. So they've even used min height. So that's a little bit more progressive than some of these were. It was really common in this era that you'd have like literally fixed height because min height is something that's relatively new as well. I say relative like within the last 10 years. So this is again, vintage web design lesson. If anyone uses any of these lessons you've learned here, then I'll come and find you and personally stop you. Human purposes only. So basically you'd set your height and that would be your height. If it breaks it, then you'd push the thing out. And one of the other reasons for doing this, all satisfying the boss man is if you have a look at the background, you can see this overall gradients here. So if I zoom up, the way that you did that, again, you've got no CSS or you didn't know about CSS because you like writing Windows applications. You'd have an image that's actually that tall or as long as you can possibly imagine the thing to be. And that's what you'd set your background image to be. You imagine a site that can scroll page on page on page. You could generate an image that would be that tall. And I've seen those horrors before. So it's a background image, so it doesn't impact on the height. If you didn't know how to write your code properly, you'd still have a fixed height anyway because what's responsive mean? So let's see how there's a form. One of the classic features of, I say feature, but bad features of .NET, like early.NET is everything was in the form, the entire page is a form. And that was the roundabout way of trying to capture any event and hijack it and make it bad. If you're using React or something like that and you see that you have your main on the outside, it's kind of like that, but without any logic behind it. I just saw a class ping. That's really impressive. I don't know if I can actually reach this element well. There's a height 100%. That's great. Ah, tables. Wow. And this is a telltale sign of where it's built. This is MSO content table, Microsoft Office. So someone started in Word and exported to create this. No human hands touched this code. I'm still not reached. I love all these comments in here as if someone would actually want to maintain it. This was the best practices. Sorry to say again. That was the best practices. What's that? The commenting section. Yeah, that was a thing at one point, yeah. You didn't necessarily have template engines. There were a lot of static sites that were just static sites. Come on, background image. You've got to be there somewhere. I'm so fine there, so I think I'm just gonna... Ah, there we go. All right. Ah, so this is a one by 1,000. So at least this is only one pixel across. That's good. But it's one by 1,000 pixels down and that's your background because again, gradients existed but these people didn't know about them. There's another one on here. Oh, that's meant to be in the background but it's not loading. Because they've overridden it, this is actually loading in the background anyway. So how big is this? That's a 70K JPEG that's loading in the background that you don't even see because performance. All right, I'm gonna leave it there but feel free to go to the Istanbul website and see what it was like back in the day. I mean, if you know anything about me, I've been building these things better than that, hopefully, since 98. So by the time this stuff came around, I already had a good idea of what to do and I inherited sites like this. It's really quite amazing what you can learn about code. Basically you end up stripping out almost everything, get down to the words and then rebuild it from scratch. And that was, for me, 2007 spent a lot of time doing that kind of thing. All right, any questions? Anyone want chocolate? Is everyone just lost in the horror? Yes? So it looks like a decent site. Is it really a decent site? Decent, how decent? It looks graphically okay for a two zero in the same site. Yeah. But the problems with it is it's really heavy as much as anything. If that was your intent for the design, fair enough. But you'd use, all of this would basically be in CSS. You would not be doing all the image slicing and everything. It was a lot of work to try to produce something like this. And it's very extensive to browse this website. Yeah, that's why I'm glad on the Wi-Fi and not tethering. Next page is like Alice 1, 2, 3 and V. I might see if I can switch it to, I think it's actually sniffing the browser to see what it's meant to be. Does anyone remember how to switch the navigator in Fifox? All right, I need to use... Oh, do you have to go in the mobile mode or something? Yeah. There's some right-click then. But I'm still not because it's actually sniffing the device. Try this, I think. Yeah. Does it work? No. It might be here. It's nice to select it in one field. No, that's... No, that's... I've got no throttling and it's... It's synthesizers. Yeah. Let's try that. Oh, no, that's not going to help me. If Fifox doesn't have it, I know Pro has it. If Fifox has had it since the 90s. Ha ha ha. On that scale. It's around somewhere. But basically, this is another bad thing. Before responsive design, you treated devices separately. So they're way of handling a mobile thing. So someone said, we need mobiles. Oh, great. They actually sniff the browser. So all the same code loads, but it renders an entirely separate view on your phone. So you've still got your four-meg of desktop beauty, but you get that as well. I think it's interesting how big the end of it is. Oh, it's massive, isn't it? It's made of two parts. Yeah, none of this is actually loading properly at any point because there are meant to be things at the top. I think there's extra stuff that's meant to be up there as well. Every time I load the page in a different browser, I see something different. It's pretty awesome. There's one better, like there's a lot over this one. But I think... Probably a carousel that didn't look correct me. Yeah. It seems to me like an answer. No, it's meant to be part of the site, I think. Oh, no, that is an ad. It's an ad, right? So here I am at an airport site trying to find out what my transit's going to be like. And they're trying to tell me about Grab. Did you find out what you were looking for? Did you get a better life? What I was looking for was an airport map because I've got a pretty short transit and I wanted to make sure I could get my way around there to get a souvenir from my son, basically. So I did eventually find the PDF documents. That's got the map of the airport. I think it said interactive, but it's a PDF. I don't know if opening is interactive or not. Anyone else want to know about how bad things were back in the day? How do you share points? No, you just need to use your... You should be handing out chocolates. Where do you start? If you think about, like, a CMS. So I have content I want to share. Or share, wow. Holy, I can't even remember the early CMSs. It's, to some extent, it's an extension of Office. But it's, like, taking Office and putting it on the web with all the bad things that come with it. So SharePoint is meant to be a Microsoft CMS. It was designed for internal use only. But you can make it public-facing if you want to. But you don't want to. Internally, it's... I've done a lot of work with CMSs and all that kind of thing. A lot of enterprise-level stuff. People pick SharePoint because, like, boss-man at bank because they have read about Microsoft or someone turned up and had a great presentation. It's awful, absolutely awful. If you worked on WordPress, like, learning how to do WordPress themes can be a little bit challenging because you have to learn all the terminology and everything. But at least you can modify it. With SharePoint, like, you might be able to change the color to green instead of orange. But you're still stuck with whatever generation of SharePoint's idea of design is. If you want to go away from that, then you have to rewrite so much from scratch. So it's great. Actually, it's average when it's out of the box. If you want to change it, then it's horrendous. I have spent lots of my career working around SharePoint. I don't put it on my CV because I never want to work on it. What's the difference between SharePoint and Frontpage? Frontpage was an editor. Where SharePoint's an actual site. It tells you a lot that this is usually free for enterprise. It's Microsoft that's like, this is free with everything else that you're already paying for your licensing, just to try to lure people into the ecosystem. It has improved drastically from this era. But it's still way behind anything else. Most of the selling point is they give it to you because you've already got an office license. If you see SharePoint anywhere, run. Squarespace done wrong. There's nothing good about it. The best implementation I've worked on with SharePoint is where we had a SharePoint back-end. So the people updating the content used SharePoint and we had a completely custom front-end. Because that was recent enough that you could actually use an API to communicate with the SharePoint database. We still had to do a lot of work to massage that data out because SharePoint is nasty. But at least we had a proper front-end to it. And it was fast. Even the new SharePoint, Microsoft have improved a lot for their approach to the web. Certainly from this era. But it's still pretty nasty. They still don't really seem to get it. I've said lots of bad things about Microsoft over the years because of things like this. Anyone else? Alright, shall we do our wrap-up stuff?