--- title: Back in my day... date: 2024-04-16T05:30:00-04:00 author: Sean Smith canonical_url: "https://website101podcast.com/episodes/season-07/episode-6/back-in-my-day/" section: Podcast --- <!\[CDATA\[YII-BLOCK-BODY-BEGIN\]\]>[Skip to main content](#main-content)Season 07 Episode 6 – Apr 16, 2024 44:40 [Show Notes](#show-notes) ## Back in my day...  0:00 0:00 1.0x 0.75x1.0x1.25x1.5x2x [](//dts.podtrac.com/redirect.mp3/website101podcast.com/uploads/mp3/season-07/S07-E06-Days-of-Yore.mp3) In this episode we reminisce about how things used to be done and how much web development has changed in the last 25 years. From under construction gifs to the rise and fall of jQuery we cover it all. ### Show Notes - [Geocities](https://en.wikipedia.org/wiki/GeoCities) - [Table based layouts](https://thehistoryoftheweb.com/tables-layout-absurd/) - [Float based layouts](https://www.w3schools.com/css/css_float_examples.asp) - [Clearfix](https://www.w3schools.com/howto/howto_css_clearfix.asp) ```plaintext .clearfix::after { content: ""; clear: both; display: table; } ``` - Equal Height columns - [Matchmedia.js](https://gist.github.com/uggedal/747277) - [Conditional comments](https://en.wikipedia.org/wiki/Conditional_comment) ```plaintext ``` - star selector hack [('star plus html) css hack](https://www.dynamicsitesolutions.com/css/filters/star-plus-html/). - [Microsoft Kicks Off Campaign to Kill Internet Explorer 6](https://www.wired.com/2011/03/microsoft-kicks-off-campaign-to-kill-internet-explorer-6/) - [Microsoft anti-trust lawsuit](https://en.wikipedia.org/wiki/United_States_v._Microsoft_Corp.) - Image Ready - slicing design - WYSISWYG (drag and drop) html editors - Macromedia Dreamweaver - Microsoft Front Page - Adobe Go Live - [Adaptive Design](https://en.wikipedia.org/wiki/Adaptive_web_design) (not responsive design) - Fluid Layout ([CSS tricks article](https://css-tricks.com/the-perfect-fluid-width-layout/)) - [Rounded corners with sliding doors](https://alistapart.com/article/slidingdoors/) - [Image Sprites](https://css-tricks.com/css-sprites/) - [Cufon Fonts](https://css-tricks.com/snippets/html/cufon-101/) - Navigation tabs - [CSS Zen Garden](https://csszengarden.com/) - Blink, Marquee (blink no longer works despite what Sean said in the show. However, the marquee tag does work) - [Sean's Boilerplate](https://website101podcast.com/episodes/season-07/episode-4/motivation-burnout-and-imposter-syndrome-with-kevin-nicholson/) (Season 7 Episode 5) - Animated gifs - [Under construction animated gif](https://giphy.com/explore/under-construction) - [1TB archive of Geocities](https://www.furtherfield.org/the-impulse-of-the-geocities-archive-one-terabyte-of-kilobyte-age/) (article) - [Web rings](https://en.wikipedia.org/wiki/Webring) - Javascript - [jQuery ](https://jquery.com/) - [Mootools](https://mootools.net/) Powered Transcript Accuracy of transcript is dependant on AI technology. **\[00:00\]** **Sean:** Hello, I'm Sean Smith, your co-host and with me as always are Amanda Lutz and Mike Mella. And that makes this the website 101 Podcast, the podcast for people who want to learn more about building and managing websites. In today's episode, we're going to ride the way back machine and think about all kinds of technology from days of old, things that if you're new to web development, you might only hear about experience web developers will shudder in fear as they remember and think about all the hassles and trouble that they had to deal with to fix these issues. Mike, Amanda, welcome to today's episode. How are you feeling? I'm feeling very well. I'm so excited. Excellent. Yeah. Excellent. Ready to jump in our time machine and go back to like 1990s. Let's do it. Yes. All right. So in the 90s, I know that Amanda had taken some web development stuff and she had been involved in that, and Mike has mentioned in earlier episodes that he was doing professional web development in 2001, is that right, Mike? Yeah, somewhere there, yeah. And for me, I was, I didn't even own a computer, but I had a website. That's weird. Yeah. I used the office computer and zero cities to make my website. **\[01:35\]** **Mike:** And just before we get into this any further, all this stuff you just mentioned is in our three episodes where we introduce ourselves on the show. We each did an episode about ourselves, so maybe we'll put that in the show. **\[01:46\]** **Amanda:** Yes, we interviewed each other. **\[01:48\]** **Sean:** Yeah. Yeah, it's kind of a, meet your co-host episode. **\[01:51\]** **Amanda:** Right, right. So I do want to say that with all of these items that are about to send shivers down, experienced developers back and maybe give noobs a little bit of a sense of, oh, thank God, I didn't have to deal with that. This is just a random list of both design concepts that we came up with, plus code garbage panels that we remember having to use. Yeah. But I also wanna point out right here at the very beginning, yes, we're gonna be complaining, yes, how much of a pain in the butt was that. But also, it was a simpler time. It was, we didn't have multiple layers of pre-compilers and post-compilers and minifiers and image processors. And if any one of these had a dependency that was out of date or not updated properly, then you had to wait weeks after you contacted that module author for them to finally get time to get back to you. So I mean, it was both the best of times. It was the worst of times. **\[03:00\]** **Mike:** Absolutely. **\[03:01\]** **Sean:** Yeah. And you could say the same thing for the present because we've got things a lot easier than you did in the past. For example, try centering something before 2015. For example, centering or horizontal centering. OK, text-aligned centering, you could do that. But vertical centering. Oh my god. **\[03:23\]** **Amanda:** Yeah, that was not fun. Yeah, that was fun. So the very first thing I want to talk about on our multilist that we've got, do you remember way back in the day, if you wanted to do any type of fancy layout that maybe had like a sidebar and then also the content, it was probably easiest to use tables. These days tables are used, you know, just for a tabular data. That's really what you should only use tables for, but I can remember back in the day the entire page was a table where you would have to do like a call span across all of them for the header and then you would have like the whatever. And then like within the table cell of the content, maybe you would have like a sub tables that would like to lay out the content in a pretty way. Oh, not nested tables. It was such a mess. Yeah. It's slightly improved when **\[04:22\]** **Sean:** to get that same sidebar layout. You switch to floats, but floats can with their own hassle as well. you need to do, there's a hack that you do need to do in CSS called the clearfix that would allow you to end the float and start the next row. **\[04:38\]** **Amanda:** Yeah, because what happens when you have two items beside each other that are floating, then the container that's holding on to them doesn't have a height, so if you try to, because the items are floating, sort of floating like helium balloons, so there's nothing to anchor the height of that containing element, so So if you tried to put like a background image on or even a background color and it was like you, so you had to do these, which means that there would be like a little bit of extra white space at the bottom because the, I believe that the clear fix hack was just doing like a content table or content, it was dot, but like font size was zero or something like that. It was really weird. **\[05:19\]** **Sean:** You know what? I'll include the clear fix hack in the show notes. I'll just put a little bit of code in the show notes and we can display that there. This reminded me of another issue that you had with floats was equal height columns. The solution now is really easy with Flex and Grid. But back in the day, you had to use JavaScript. There was no other way to do it. And I used this script called matchmedia.js. and I know that because I recently used it again on a legacy site that is still using floated content. Wow. I needed to update something with that. I was like, it took me a while to like stretch my memory to remember what it was and it's still available. I downloaded this match media.js and I used it. Why wouldn't you just write a little bit of JavaScript? Because this is easier than me writing JavaScript and it's that's no fun that's no fun that's true I guess that's true I got to I got to pre-reminous before the show that is a good **\[06:28\]** **Mike:** point well listen before since we're on the topic of hacks a little bit you know centering things and clear fix and floats and stuff that you had to do to get certain things to work I want to talk about conditional comments do you guys **\[06:41\]** **Amanda:** remember conditional comments. I can remember complaining a long time about IE6. So maybe I know what you were about to talk about, but I just have it in my head as some different term. **\[06:52\]** **Mike:** Yeah, but yeah, go. All right. Currently, Microsoft's browser is edge. But before that, they had internet explorer. It was only retired very recently. It went to version 9. 11. 11. Well, back in the day, they had something called IE6, Internet Explorer 6, it was their first big browser, and the problem was when they released it, which was, this is not coming from my top of my head, I did a little bit of research to remind myself, they released IE6 in 2001, but CSS2, the spec for CSS2, had been recommended for three years before that. It was in 98, they recommended everyone should use CSS2, but IE6 did not adopt anything from CS. Well, not much. It didn't have support for. **\[07:43\]** **Sean:** It was all proprietary. **\[07:44\]** **Mike:** Yeah, it was all proprietary stuff. Didn't have support for the position property, position absolute, position relative. Didn't support Zindex, didn't support child selectors, a whole bunch of stuff, it just didn't support it because they were like, hey, let's do it the Microsoft way. and they had their own weird stuff. So people like us had to basically design sites and build them and then make sort of another version for IE6. **\[08:12\]** **Sean:** In the show notes, I'll include that conditional so people who are unfamiliar with it can see what we're had to do. Yeah, basically what Mike is saying is you'd use this conditional to call in another CSS style or a different JavaScript file that would do what you need for. And this was used in IE6 and IE7. **\[08:32\]** **Mike:** Different CSS file. **\[08:33\]** **Sean:** You would use JavaScript as well, if I remember correctly. But IE6 and IE7 had these. And I think it was IE9 or IE10 that Microsoft removed those conditional common ability because they got non-board with all the modern CSS at that time. **\[08:52\]** **Mike:** Yeah, so the idea was that IE would see those calls to a CSS file, wrapped in a comment, and it would respect them. It would pull that thing in. But every other browser, **\[09:07\]** **Amanda:** right, I do remember what you're talking about now. **\[09:09\]** **Mike:** Yeah, it was wrapped in these comments, so it would just think it's a comment and ignore it. So it was a way that you would sort of supplement your styles for i.e. browsers by adding that and it would add all this other stuff. It was a nightmare. **\[09:22\]** **Amanda:** I do remember though, there was also a hack that you could add into just your standard style sheet that maybe it was like an underscore as part of either the selector or the property, and then that was another IE6 hack. **\[09:38\]** **Mike:** That's right. There were hacks right within CSS that star selector hack. I don't know if that was anything to do with this, maybe I'm misremembering that, but yeah, there was a bunch of things that only IE would respect and you'd have to kind of add two versions of the rule. **\[09:51\]** **Sean:** We're all trying to remember stuff from like 19, 25 years ago. This is, there's been so many advancements in CSS and JavaScript since then that if you're new to the field, you have no idea what we missed. **\[10:09\]** **Amanda:** Okay, but hold on though, slow your roll. I worked on a project just a couple of years ago and it was for a bank working on some internet thing for a bank, and it involved a lot of JavaScript, and we had to be careful with the JavaScript we were writing. We couldn't use the JavaScript arrow functions because the stuff we were working on had to be compatible for IE11, even though it was about to be retired within the next year, because banks aren't there. It's a bank. They're not the greatest employers, and so some of their employees are like on these old machines using old technology, old browsers. So everything that we wrote, it had to be compatible going back like, you know, all of the current, yay, all of the chrome and the Firefox and everything. And then also IE11. Yeah. And it was just like, wow, like there was some stuff that I had forgotten about. There's still a lot of corporate adoption **\[11:11\]** **Mike:** for really old browsers and that kind of thing. I can remember having to do stuff for that not even that long. Well, you just give an example. Yeah, well, banks and insurance companies. **\[11:22\]** **Amanda:** Yeah. And I always mention this to my students. It's like those industries for sure because some other customers are grandmas up in the Northwest territories who are working on some like little. Their monitor is very tiny and their browser window is whatever was installed when they got the machine. And because of random clicking on things, half of their monitor screen is like taken up with like all of these additional toolbars. Remember toolbars that used to be added to your browser window all the time. So yeah, so online banking, anything insurance companies, they need to make sure that everything is backwards compatible like three major versions. **\[12:01\]** **Sean:** A lot of educational institutions were behind even so much as like five or six years ago they were **\[12:08\]** **Mike:** held back at least from what I remember. I can tell you from experience that sometimes it's it's because these organizations actually get a lot of funding from companies like Microsoft and part of the mandate is build stuff for this browser. This is the official browser you're supporting, so sometimes there's like that kind of hurdle **\[12:28\]** **Sean:** you have to. Yeah, that's especially true for up until IE10 when a lot of the modern CSS stuff was not supported in IE, but then Microsoft's committed to following the CSS spec and things have improved dramatically. And then they dropped IE 11 in favor of Microsoft Edge. And now sometimes Microsoft is ahead of game. They've got stuff before the other browsers do. So it's all really, modern life is so much more consistent and easy to get the new futures. **\[13:01\]** **Mike:** There was a point when Microsoft was actually telling people to stop using IE 6. It's going back to IE 6. They actually had a press release saying, please stop using that browser that we made. So it's a big change. **\[13:15\]** **Sean:** It's speaking of slagging on Microsoft. Do you guys remember when they were sued? Because they have compatibility or support something **\[13:25\]** **Mike:** or other, they lost this big lawsuit in the States. What do you call that when they have action thing? No, what do you call it when it's like they have a monopoly on something? **\[13:37\]** **Sean:** I'm a monopoly. **\[13:38\]** **Mike:** No, but there's a term I'm thinking of. **\[13:41\]** **Sean:** Yeah, it's okay, I'm an author. **\[13:44\]** **Mike:** There's like an antitrust, maybe antitrust. **\[13:47\]** **Sean:** Yeah, it was an antitrust, antitrust. **\[13:49\]** **Mike:** Yes, I do remember that. Well, listen, I wanna get back briefly to the table-based layouts we talked about earlier. **\[13:58\]** **Sean:** Back to 2001, okay. Earlier. **\[14:01\]** **Mike:** Yeah, the way, I don't know if you guys remember making those layouts, so someone listening, if they know how to make tables, where you have columns and rows and data, are probably thinking how in the hell would you build a website like that? Well, I'll tell you how. This is how I did it and a lot of people. You would make your design in Photoshop and Photoshop had this tool called ImageReady and it was a button in Photoshop. You just push the button and your whole website design would be opened up in this different tool called ImageReady and there was a sort of like Photoshop as well, but it had a tool included in it called the slice tool. And you could literally draw lines all over your thing and it would tell, it would basically be slicing it up. It cuts it up like a knife and then you could export it as a bunch of different images in a table-based layout and then you'd swap out the one that has the content for a real content and so on. And that's how we made table-based design back in the day. You guys remember using image ready? you guys do that? **\[15:03\]** **Amanda:** No, I just wrote code. **\[15:04\]** **Sean:** Yeah, but the key is that you would export with Photoshop and image ready, but then you would have to open it up in a gooey, wizzy, wig, kind of editor-like dreamweaver, Microsoft front page, and then go live. Adobe. That was Adobe. That was Adobe Go Live. And you create your tables in there And put your images as inside each cell that needed it. **\[15:36\]** **Mike:** Yeah, it was you'd like have a navigation menu at the top and you'd have all these different items. And you would draw a box around every navigation item. And then it would turn that into a table with like seven columns in it or whatever. It was so stupid. **\[15:53\]** **Amanda:** Yeah. That's it. I think I used Dreamweaver for like half of a project. And when I saw how much extra crap empty dives and spans for no reason that it was adding in there and I like I got angry at Dreamweaver and I kept using it but I kept using it as a text editor so I mean I like since the beginning I have been against like I've been against wicks even though even though it's very **\[16:23\]** **Sean:** popular now. Yeah well back in the day I had a pirated copy of Dreamweaver and Photoshop and and I used that for my my first couple of websites that I built. I knew nothing about code had known desire to learn code but once I did it is like oh my god this is so much better to actually hand code it you have so much more control yeah and a better understanding of it once you know the fundamentals you can know your site and find and make changes really so much easier than using some any sort of drag and drop interface. I do want to jump back for a little bit. **\[17:01\]** **Amanda:** Okay, sure. And changing topics. We're going to be doing that a lot I think. Probably, yeah. So it's very possible that when Mike was talking about Photoshop and image ready and how you could just export it into like this this big table that would be like the whole entire webpage and hooray, that's it. It's possible that there is a listener out there that's thinking to themselves, but what about mobile? Dear friend, this was before mobile devices. **\[17:27\]** **Sean:** Yeah, but first I phone came out in 2008, right? 2007, or 2007. So yeah, I was doing stuff before **\[17:35\]** **Amanda:** mobile devices and even like the original like the like the first blackberries that had internet access with that WAP browser that was, it was, it had no styling abilities at all. And then even when we got a little more advanced and a lot of people started carrying around mobile devices that also had web browsers, we didn't have responsive design but we had adaptive design where there would be two completely different sets of CSS files and two completely different sets of HTML files, one for the desktop, and one for mobile. And oftentimes, you would have an M subdomain, M.M. the domain name.com. **\[18:15\]** **Sean:** And there would be like, I remember doing that. **\[18:18\]** **Amanda:** JavaScript to check to see what the operating system was, and therefore, if it was the mobile device, JavaScript would redirect it to the M.M. So a lot of these design concepts and exporting tools that we were talking about, they could be used back in the day because again web development was easier because you only had to worry about a desktop but it was also just this extra code that was just always there and around. It was crazy. Would you believe I actually had a client site that **\[18:51\]** **Sean:** was doing that in 2013? Only 11, only 11 years ago. Their desktop site was super, super advanced and really cool and the mobile site was simple because mobile was a lot smaller so that was the premise behind it. But it's not even all that long ago that I had to do that. I'm noticing it's the opposite **\[19:12\]** **Amanda:** these days. There are a lot of times where a company, for example an insurance company, they have an awesome app that you can download to use for like submitting claims and stuff like that and it's like great it's so easy it's awesome. And then one day I was like sitting here at my desk And it was like, all right, I need to submit that claim. And I just went to the website. And it looked like it hadn't been updated for about 15 years. It wasn't laid out the same. It wasn't designed the same or styled the same. A completely different user experience. It was awful. I couldn't find anything. And I talked to somebody who worked at that insurance company. And they're like, yeah, we've really been focusing on the app. And the app is great. And everybody likes it. But nobody's been updating the website. **\[19:56\]** **Sean:** And it's like, well, how? Honestly, I'm not surprised because most of the time people use their phone. Even me, I prefer to do stuff with some things on the desktop. But sometimes I just don't want to get up and move to my desk. I'll just sit there and suffer with my phone and my terrible eyes. **\[20:13\]** **Amanda:** But I was sitting at my desk in the middle of something else. It was like, oh yeah, I should do this. So instead of like getting up and turning my chair, 45 degrees to reach for my phone, I just wanted to keep using the browser window I was already in. and it was like, wow, what an awful experience. **\[20:28\]** **Sean:** It is so funny that things have flipped like that. Yeah, yeah, I left. **\[20:34\]** **Mike:** So there was a, we had notes about the show here today and Amanda, you were talking about that, those mobile sites being the earlier version of this, but I don't think it is earlier than what I'm referring to, which is fluid layouts. I don't know if you guys remember fluid layouts. What I mean by that is back way back before mobile existed, there was a trend, it was only to try to accommodate different sizes of computer monitors. And all it was basically was table-based design, but all the tables were percentages. Everything was a percent. **\[21:13\]** **Sean:** So it would sort of like... I think I remember that. **\[21:15\]** **Mike:** It would stretch and expand to whatever. And of course, it was really restrictive because your design had to be super simple. if it has like images as backgrounds or whatever, it's never gonna work because we didn't have object cover back then and stuff like that. **\[21:27\]** **Amanda:** Yeah, I remember like 800 pixels was the standard for a very long time. Right, that's right. **\[21:35\]** **Sean:** Yeah, yeah, yeah, 800 or 960 things like that, yeah. **\[21:39\]** **Amanda:** Well, 960 still use because it's like tablets and stuff, right? But yeah, I can definitely remember like typing up tables and being like with 800 pixels and. Yeah, that's what it was. **\[21:51\]** **Mike:** I think I still have templates of old sites that I built, built that I've opened them up on my browser now, and it's like this tiny little tile in the center of the screen, because it was 640 by 800 or something. **\[22:02\]** **Sean:** Yeah, so let's think about big advances in design, early big advances in design, like the ability to have rounded corners. Now you would just use border radius and CSS. Back in the day, you had to use, I think it was called sliding corners, was the hack where you would use images in each corner of your div, and position them absolutely, and then they would move depending on the width of that. **\[22:33\]** **Amanda:** You could do that, or if you're still doing the table layouts, you would do a table where the top row would have the corner image, a solid color, and then the corner image, and then And the second row would be like, you know, the solid color for the border and then the content in the middle and the solid color for the border. And then you'd have the third row that would have like the corner images and yeah, I remember doing that. **\[22:56\]** **Sean:** So much more work, so much more markup to do just to get border radius, which we can now do just border radius, 100% 10 pixels, whatever you want. It's like one line of CSS. **\[23:10\]** **Mike:** Yeah. thing I used to use image ready for. You basically have in your design having done it in Photoshop or something, you would make an image of a rounded corner and then you'd slice that up with the tool. So you have about a 10 square pixel cell that contains an image of a rounded corner and you do that for each corner and like you said Amanda it would expand the middle row to accommodate **\[23:33\]** **Amanda:** the content. Do you know what I just remembered? There was for a while where because our designs had all all of these crappy little tiny 10x10 pixel images to be used for corners and repeating backgrounds and stuff. Remember, what were they called, sprites? Sprites, yes. Because it was faster to load. Instead of loading 50 different 10x10 pixel images, you would put all of these 10x10 pixel images on one file, on one giant gif, or JPEG, or whatever. And then the CSS would just have to load this one file. Yeah. This one image, and it has, like, position. **\[24:13\]** **Mike:** Absolutely. **\[24:14\]** **Amanda:** Oh, god. Pop it left. Pop it left. **\[24:17\]** **Mike:** Do you remember doing that? All the time. Yeah. **\[24:20\]** **Amanda:** It was like a grid of. **\[24:21\]** **Mike:** That just hit me now. A grid of icons. **\[24:23\]** **Sean:** Yeah. Yeah. I remember using an early version of my build process that would take all the individual image files and combine them into the sprite and spit out the CSS that I needed for each **\[24:35\]** **Mike:** of them. Yeah. It was to reduce the number of HTTP calls or whatever. **\[24:41\]** **Sean:** It was an optimization technique. **\[24:44\]** **Mike:** Yeah, but it was really, we don't have to worry about it now because this, well, whatever, everything's faster and nobody cares. **\[24:51\]** **Sean:** Everybody's using SVG icons in any case. **\[24:53\]** **Amanda:** Well, yeah, and nobody's on dial-up anymore. Well, unless you're... Grandma in Northwest Territories. **\[25:01\]** **Sean:** Yeah. **\[25:01\]** **Mike:** Hey, Mike here. If you like the website 101 Podcasts, you should know that we do a live show on YouTube. It's every first and third Wednesday of the month. It's at 11.30 a.m. Eastern time and it's called Lunch Bites. **\[25:20\]** **Sean:** Check it out. So another really big advancement in design early on was at one point, you could only use system fonts. So, your font stack would have things like Ariel, Helvetica for the Mac and then it **\[25:36\]** **Amanda:** would go Sanserif. If you had access to the file system on your server, I think you could also, you could, from pretty, pretty early, you could put some two type fonts, but it was only two type fonts and there weren't a lot of options and it didn't always work with different operating systems and yeah. **\[25:52\]** **Sean:** But the big key, and I remember doing this early, early on in, especially in the first WordPress, first and only WordPress website that I built, is I used this technology called Kufon. And Kufon was a flash embed that you could use custom fonts and you would go to this website and you would upload your font and it would spit out a file that you could include. It was the only way to have really cool fonts but it was really finicky to work with and and this is before we had Adobe TypeScript or Google Fonts or any sort of these online services where you can use whatever font that you can dream of. **\[26:40\]** **Amanda:** Yeah, I see I could be, I'm probably mistaken, I'm not 100% sure, but I do remember that when you used coupon, like the user could still select the text. So if you, they recommended that you stick to only using it for headings or whatever. So it must have, like, it was a much better option than just having, like, images. So I'm wondering if it was accessible. **\[27:04\]** **Sean:** It might have been early accessible, but accessibility wasn't even a spec in your grandfather's eye at that point. **\[27:11\]** **Amanda:** I'm sure accessibility was around a lot before any of us were really thinking about it. Because in the beginning, when web pages were just text, a couple of images, they were very, very accessible sites. because the markup for it would have just been like, each one's. **\[27:27\]** **Sean:** Yeah, one of the same accessibility wasn't a thing is, nobody was aware of it, or it wasn't a thing that we did in web development. **\[27:35\]** **Amanda:** It wasn't a thing that we did purposely in web development, but I can, if you think what was that movie, Hackers? Jean Hackman was in it, and Dan Acroid, and there was a blind guy, and he would have the Braille screen reader. And so I mean, I think it's been, I'm sure that sites weren't written with accessibility in mind. You're right about that. But my guess is that using Kufon was more accessible because it was regular markup, and all of the text was still selectable. **\[28:10\]** **Mike:** I want to talk about something that I remember from a design perspective. So there used to be this big trend caught on where your navigation menu, this was before, skew morphic design or around that time, when people wanted to have things that looked realistic on their webpage, so they would think that their navigation menu should look like tabs of folders in a vanilla, like with vanilla folders in a filing cabinet that stick up, you know? So I remember designing it so that it actually looked like that and if you clicked on one, it would sort of come to the front And that kind of thing. Sean's showing us as Manila folders. That's exactly what I'm talking about. **\[28:52\]** **Amanda:** Dear podcast listener, go to our YouTube channel to see Sean's demonstration. **\[28:57\]** **Sean:** Right, right. **\[28:58\]** **Amanda:** All right, I'm giving you an opportunity **\[28:59\]** **Sean:** to make a video clip. **\[29:00\]** **Amanda:** Thanks. Sorry, Mike, go on. I remember that. Now that you were talking about it, Mike. **\[29:05\]** **Mike:** As recently as two weeks ago, I had a client refer to the navigation items in the menu as tabs. And that's where I'm getting out here is that people still call navigation menu items, tabs. It happens all the time in my career anyway. **\[29:21\]** **Amanda:** Really? Oh yeah. Sorry, what generation do you think that they were? Were they our age? And so maybe they were used to it, or were they younger? **\[29:31\]** **Mike:** No, I don't think it. I know what I'm thinking of recently. That person is younger than I am, and she still said it. I think it's just people adopted over time because they hear it. It's not because they've experienced what I'm talking about with the design thing. I just think it's something that's stuck. That's where it came from. If you ever hear someone refer to your navigation items, which look nothing like tabs now usually, as tabs, it's because they used to look like tabs as a big design trend. And that's what it comes from. **\[29:59\]** **Sean:** For me, I think of tabs as those things that use for hiding content, similar to an accordion, but instead of sliding up and down, it just flips the content. **\[30:11\]** **Mike:** Now, that would be a tab, I guess, technically, right? It looks like a tab. **\[30:15\]** **Amanda:** These days, yeah. But no, I know what Mike's talking about, where it's like visually, it looked like. Yeah. Oh yeah, I totally know what he's talking about. I can remember the designer one time wanted me to design one, where it was like the one that was active would actually overlap, the one that was beside it. And so this like active, so in the code for the main nav, I would have to be like the link and then a spacer and a link and the spacer, and then depending on which one was active, it would switch out the background image to show if it was like, you know, overlapping the next tab or whatever, what a mess. Yes, it was very difficult. **\[30:53\]** **Mike:** Bring it to the front, yeah, when they cut that. **\[30:56\]** **Sean:** Thanks for bringing up that trigger for me, Mike. So I feel like we've kind of gotten to the point where now CSS has started to mature and we're like mid 2000s, 2005, 2006. And this is around the time that CSN ZenGarden came out. Yeah. I don't know if I remember what that is. I love that, say. What they did is they made us a website. The markup was standard and publicly available. And you could submit a CSS file that would completely change the layout. And so there was dozens or even hundreds of different CSS layouts for this single markup file. And it was just a way to illustrate why you should be using CSS. It was such a cool site. **\[31:47\]** **Mike:** They had a drop down and you could select any of the submitted CSS files and it would redesign the site you're looking at their site to accommodate this CSS file that people have submitted and change the design radically. It was really, really cool. I used to spend hours going through that and just look at how people build stuff, and really cool. **\[32:07\]** **Sean:** I would visit a location, and I would say it's hardcore into it, as Mike, despite my enthusiasm when I introduced it. But yeah, it was a really cool site. **\[32:16\]** **Mike:** Yeah, it was great. I think it's still online, but I don't know if it's active anymore. Maybe if it is, if we can find it, we'll put it in the show notes. **\[32:22\]** **Amanda:** I wanna talk about some like OG HTML tags that no longer exist. Blink. **\[32:33\]** **Mike:** The Blink tag. **\[32:33\]** **Sean:** I want to correct you, it does exist, just nobody uses it. **\[32:37\]** **Amanda:** Just nobody uses it. And Markey, Markey, and it was just like the text. So for any listener who doesn't know, the Blink tag would do exactly what you think it does. You would have the open Blink tag and a little bit of content and the closing Blink tag. And it would just go display, hide, display, hide, display, hide. For that's it. That's all it did. And the marquee, the marquee tag. I had it on my very first HTML web page that I made. **\[33:10\]** **Mike:** Was it the words click here? Was that wrapped in the blank tag? **\[33:13\]** **Amanda:** No, I think it was a great big welcome. Oh, yeah. Yep. And then the marquee tag was just, it was kind of cool. The text would, like a marquee on Broadway, the text would just scroll across the page. And so it would appear at one end and disappear at the other. And like I've seen, I've seen JavaScript libraries that are dedicated to doing this now. And it was like, oh, back in the day, it was just. **\[33:40\]** **Sean:** Yeah, I wonder if you could nest the link inside a marquee tag or the marquee inside a blank tag. Would a blank and marquee at the same time? My guess is yes. **\[33:49\]** **Mike:** I just wondering if it would work. I think you got to put that in your boilerplate, Sean, put that in. Oh, yes, that's a long way. **\[33:57\]** **Sean:** Well, I'll add that into my boilerplate. Speaking of my boilerplate, which was our previous episode And in that episode, I said I was going to upgrade the boilerplate to see a craft five. It is now upgraded and ready to roll back to our opposite impressive wow self promotion **\[34:12\]** **Amanda:** much. **\[34:13\]** **Sean:** Hey, I am a shill for myself. **\[34:17\]** **Amanda:** Yeah, you got to be. **\[34:21\]** **Mike:** So do you guys remember all the animated gifts, I mean, now animated gifts are, I get, what are the, they're like Mimi things now that people use them for memes. I don't know. **\[34:31\]** **Amanda:** Yeah, yeah, well, and so yeah, so now they're more like short little even like up to Five to ten second video clips. Oh, right. That's true. That's right **\[34:40\]** **Mike:** Poor quality, but yeah, people would put those on their website like all these looping animated gifts of various things And I remember a very popular thing to do was to have your logo of your website Spin 3d a spinning logo. Yeah 3d. Yeah, I remember there's often flames involved and stuff like that **\[34:58\]** **Amanda:** Do you remember under construction coming soon and everyone would have like the whole construction worker motif on this on this landing page? **\[35:09\]** **Mike:** Oh yeah, that was great. **\[35:11\]** **Sean:** All of these things were particularly prevalent on geocities, angel fire and those other kind of early build it yourself website networks. it's kind of like wicks or you know do your own but it was free and just covered with bad design and god-awful animated gifts everywhere yeah there there is a torrent that has backed up almost a terabyte of geocities oh cool sites nice I haven't I have never downloaded it because it's massive but you can Google or maybe I'll find it and put a link into the show notes you can get a historical backup of all the Geo City sites that were still up when it was shut down a few **\[36:05\]** **Mike:** years ago. Wow. I did have a Geo City site and an angel fire site I believe. I have no idea what they were built. I think everybody had a Geo City site here was around at that time. You know what? **\[36:16\]** **Amanda:** I don't think I did. No. I know I did. Because I actually had my own domain name. **\[36:21\]** **Sean:** back in the day. I was living overseas at the time and it was a really easy way to share stuff with my friends and family back in Canada and just pictures or little messages and so that's what I used it for. Yeah cool. Sean you wrote **\[36:42\]** **Mike:** here under Geo City's web rings. Tell us about web rings. What is that? Oh you Don't you guys don't remember what I do remember what it is, but I'm allowing you to tell the story **\[36:53\]** **Sean:** All right, so a web ring was this it was kind of like a community aspect for geocities or angel fire and each of those Networks had their own various web rings and you would join the web ring and At the bottom of your page in your footer, it would say web ring name and there would be a previous and a next button And it would take you to the previous or the next site in the ring, and it was supposed to generate traffic. And it would be like hitting a completely random site. So my site might be all about how much I love foosball. And the next site would be all about home repair. **\[37:35\]** **Mike:** Completely unrelated. Yeah, it was almost like they misunderstood the concept of the internet and how things are linked together. Oh, let's have this thing at the bottom of the page in the footer where you can just get to another random site that was made like it makes no sense at all **\[37:49\]** **Sean:** I don't know that it was misunderstanding it because everybody was trying to figure it out at the same time It was just an early attempt at it. Right. I suppose. Yeah. Like this is back in the 90s before this is before every house How to a computer let alone everybody having a phone in your pocket. Yeah **\[38:08\]** **Mike:** Amanda, you like JavaScript? Yes. **\[38:14\]** **Amanda:** We're best friends. **\[38:15\]** **Mike:** Yeah. Do you remember when JavaScript sucked and didn't really have anything good to offer? And just let you make like a pop-up alert that said, you know, alert, confirm, that's it. Yeah. **\[38:30\]** **Amanda:** Yeah. Yeah. JavaScript has come like a crazy long way since the beginning of the internet. But I mean, when I was new to web development and I was focused more on just the front-end stuff, like just the HTML, learning the CSS, I'm sure like every developer out there, JavaScript was a little bit intimidating to me. So when I first heard about JQuery, yes, I jumped on the JQuery bandwagon, I thought it was great. It's going to make everything easier, even though I already had like code understanding fundamentals in my back pocket, yeah, JQuery made it easier. What some listener may not realize is that before JQuery, there were other libraries. There were others. JQuery was not the first and so they have been coming and going. There's the one that one that JQuery won the internet, so they did because they teamed up with Bootstrap or because Bootstrap adopted them to be part of their front end. **\[39:34\]** **Sean:** Well, it's not cool to use jQuery anymore. It's still out there. It is. They had a recent link. They had a recent link. Very recently. And there's so many legacy sites, jQuery does a lot of good stuff, but I mean, if you're building a new site, I wouldn't recommend it, but I wouldn't say that you're a bad developer for using it. **\[39:52\]** **Amanda:** I don't know. I think that deciding if you're going to use jQuery depends on how much would you use it. download the entire jQuery library just to do a hamburger menu, weak sauce, you know, like just write a little bit of JavaScript. But if it's like very complicated, very interactive, doing a lot of user-driven things, then yeah maybe jQuery is the way to go. **\[40:18\]** **Sean:** Another one reason you might want to use it is because you're doing something like Amanda did earlier and have to support old technology, and jQuery lets you do a lot of cool things easily that you couldn't do until recently with the knowledge JavaScript. Well, it just, it wasn't. Recently, I mean, the next five or six years. **\[40:38\]** **Amanda:** It wasn't as easy, you know, like you had to, you had to know the limitations of JavaScript and really like dig deep to get into it, and then especially for things like jQuery is is going to handle all of the extreme weird cases, all of the different browser versions. And the most important part is that it's going to sort of fail gracefully if it runs into any issues, as opposed to just being like a big JavaScript error that's just going to stop all the rest of the script. So for our maybe more mature developers out there, let's list a couple of pre-JQuery libraries to see if it brings back any, any fun memories. Sean, go. **\[41:22\]** **Mike:** Mutuals. I used Mutuals for a while. I remember one time I heard on some podcast, Andrew Welch saying he has never heard of Mutuals because he wasn't developed at all yet. I'm pretty sure he said that. Andrew, if you're listening, please correct me if I'm not right, but... Shots fired, how do you respond? I was like, wow, I feel good that I know it. **\[41:46\]** **Sean:** Mootools and Andrew Welch doesn't I know yeah, I personally have never used Mootools but I was aware of it and when I got into learning JavaScript I just chose jQuery because I think jQuery at that point was more popular than Mootools even though Mootools had come out first yeah I remember Mootools was **\[42:06\]** **Amanda:** that's what happens something comes out Keep cutting up my gun, sorry. We're talking about each other. But that's the episode. We're all, we're all, we're all, you guys are talking and make us jumble, going. That's what happens. That's what happens. You should have seen America's angry face. I just shushed you all. So, JavaScript library will be released, and everybody starts using it and everybody likes it, and then just like content management systems, and just like anything, somebody else is going to think that they've got a better idea. a better way of doing the same thing, ours is gonna be more popular and whether through marketing or partnership or because it is actually better, it can eventually become the industry standard. So that's what happened with prototype, that's what happened with MoodTools. It's not quite what happened with JQuery, but. **\[43:00\]** **Sean:** But, you know, modern approaches to JavaScript frameworks like Angular, then it was React. React's still really big view. All their alternatives are their view. And then more recently, Alpine. Not saying view or Alpine are taking over, but it's kind of just the evolution. Things are coming out and they gain popularity or lose popularity. Yeah, yeah, Edson Flows, right? So, I feel like we've basically covered everything and it's been a really long episode. So, you know what? I think it's time for us to hop aboard **\[43:38\]** **Amanda:** Starship Enterprise and ask Scottie to slingshot us around the Sun back to 2024. The website 101 Podcast is hosted by me, Amanda Loots. You can also find me online at AmandaLoots.com. **\[44:04\]** **Sean:** Recording from a Secret Lair while plotting world domination, I am Sean Smith your co-host. **\[44:10\]** **Mike:** One of your hosts today was me, Mike Mella. Find me online at belikewater.ca or on socials **\[44:16\]** **Sean:** at Mike Mella. Hello and welcome to their website 101 Podcasts, they're podcast two, fuck it. **\[44:33\]** **Mike:** Take two. Seven years. **\[44:36\]** **Amanda:** Thank you very much. Close Transcript Have a question for Sean, Mike, and Amanda? [Send us an email](/contact). [![Listen on Google Play Music](/assets/images/google_podcasts_badge@2x.png)](https://www.google.com/podcasts?feed=aHR0cHM6Ly93ZWJzaXRlMTAxcG9kY2FzdC5jb20vZmVlZC5yc3M%3D)[![itunes badge](/assets/images/itunes-badge.png)](https://itunes.apple.com/ca/podcast/website-101-podcast/id1449510012)[![itunes badge](/assets/images/spotify-logo.png)](https://open.spotify.com/show/3rmSM1R9t6q1U8DmYWJRSO?si=NrYPMgDaRV6Dd56PjEaPow)### Season 07 - 1 [ When to Say No](https://website101podcast.com/episodes/season-07/episode-1/when-to-say-no/) - 2 [ How can I communicate better with clients?](https://website101podcast.com/episodes/season-07/episode-2/how-can-i-communicate-better-with-clients/) - 3 [ What to do when work is slow - with Mitchell Kimbrough](https://website101podcast.com/episodes/season-07/episode-3/what-to-do-when-work-is-slow-with-mitchell-kimbrough/) - 4 [ Motivation, Burnout, and Imposter Syndrome, with Kevin Nicholson.](https://website101podcast.com/episodes/season-07/episode-4/motivation-burnout-and-imposter-syndrome-with-kevin-nicholson/) - 5 [ How to spin up a website quickly using a boilerplate](https://website101podcast.com/episodes/season-07/episode-5/how-to-spin-up-a-website-quickly-using-a-boilerplate/) - 6 [ Back in my day...](https://website101podcast.com/episodes/season-07/episode-6/back-in-my-day/) - 7 [ How to submit a support request with Ben Croker](https://website101podcast.com/episodes/season-07/episode-7/how-to-submit-a-good-support-request-with-ben-croker/) - 8 [ Online Learning and Keeping up with Technology with Ryan Irelan](https://website101podcast.com/episodes/season-07/episode-8/online-learning-and-keeping-up-with-technology-with-ryan-irelan/) - 9 [ Unlock your ADHD superpowers with Chris Ferdinandi](https://website101podcast.com/episodes/season-07/episode-9/unlock-your-adhd-superpowers-with-chris-ferdinandi/) - 10 [ Rebroadcast: 11 Things to avoid doing on your website](https://website101podcast.com/episodes/season-07/episode-10/rebroadcast-11-things-to-avoid-doing-on-your-website/) - 11 [ Raw and Unedited](https://website101podcast.com/episodes/season-07/episode-11/raw-and-unedited/) - Bonus[ The Joy of Self-Taught Coding](https://website101podcast.com/episodes/season-07/episode-/the-joy-of-self-taught-coding/) ### All Seasons - [Season 01](https://website101podcast.com/season/01/) - [Season 02](https://website101podcast.com/season/02/) - [Season 03](https://website101podcast.com/season/03/) - [Season 04](https://website101podcast.com/season/04/) - [Season 05](https://website101podcast.com/season/05/) - [Season 06](https://website101podcast.com/season/06/) - [Season 07](https://website101podcast.com/season/07/) - [Season 08](https://website101podcast.com/season/08/) - [Season 09](https://website101podcast.com/season/09/) <!\[CDATA\[YII-BLOCK-BODY-END\]\]>