Season 07 Episode 6
– Apr 16, 2024
44:40
Show Notes
Back in my day...
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
- Table based layouts
- Float based layouts
.clearfix::after { content: ""; clear: both; display: table; }
- Equal Height columns
<!--[if lt IE 7]> Your code for IE 7 only <![endif]-->
- star selector hack ('star plus html) css hack.
- Microsoft Kicks Off Campaign to Kill Internet Explorer 6
- Microsoft anti-trust lawsuit
- Image Ready - slicing design
- WYSISWYG (drag and drop) html editors
- Macromedia Dreamweaver
- Microsoft Front Page
- Adobe Go Live
- Adaptive Design (not responsive design)
- Fluid Layout (CSS tricks article)
- Rounded corners with sliding doors
- Image Sprites
- Cufon Fonts
- Navigation tabs
- CSS Zen Garden
- Blink, Marquee (blink no longer works despite what Sean said in the show. However, the marquee tag does work)
- Sean's Boilerplate (Season 7 Episode 5)
- Animated gifs
- 1TB archive of Geocities (article)
- Web rings
- Javascript
Accuracy of transcript is dependant on AI technology.
Hello, I'm Sean Smith, your cohost, and with me is always Amanda Lutz and Mike Miller, 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. Ready to jump in our time machine and go back to like 1990s? Let's do it. Yes. Alright, 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 2000. I think so. 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 geocities to make my website. 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.
maybe we'll put that in the show. Yeah, we interviewed each other. Yeah, yeah, it's kind of a Meet Your Co-host episode. Right, right. Yes. 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 pails that we remember having to use. Yeah, yeah.
But I also want to point out right here at the very beginning, yes, we're going to be complaining, yes, how much of a pain in the butt was that? But also, it was a simpler time. We didn't have multiple layers of pre-compilers and post-compilers and minifiers and image
processors. 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 the best of times, it was the worst of times. Absolutely. 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.
Intervalhoals centering or horizontal centering. Okay, yeah, text align center. You could do that. Yeah, vertical centering. Oh my God, that was not fun. Yeah, that's right. So the very first thing I want to talk about on our multi-list 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. Yes. So these days tables are used, you know, just for a tabular data.
Yeah, 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 with like to lay out the content in a pretty way. Oh, I got nested tables.
It was such a mess. Yeah. It's slightly improved when to get that same sidebar layout, you switch. to floats, but floats can with their own hassle as well. Yeah. You need to do there's a hack that you do need to do in CSS called the
prefix that would allow you to end the float and start the next row. Yeah. Cause what happens when you have two items beside each other that are floating, then the container that's holding onto them doesn't have a height.
So if you tried to cause the items are floating, you're sort of floating like helium balloons. So there's nothing to anchor the height of that containing element. 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 Clearfix 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. You know what I'll include the Clearfix hack in the show notes I'll just put a little bit of code in the show notes and we can display that there Another this reminded me of another issue that you had with 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. Yeah. 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. And 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 matchmedia.js and used it. Why? You just write a little bit of JavaScript. Because this is easier than me writing JavaScript. And that's no fun. That's no fun fixing things in JavaScript.
That's no fun. That's true. I guess that's true. All right. I got to pre-reminutes before the show. That is a good point. Well, listen, since we're on the topic of hacks a little bit, 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? remember conditional comments. Oh for I can remember complaining a long time about IE6. So maybe I know what you're about to talk about, but I just have it in my head is some different
term. 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 that went to version, what, 9? 11. 11. Oh, okay. There you go. 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 it. Everyone should use CSS2, but IE6 did not adopt anything from CSS.
Well, not much. It didn't have support for... It was all proprietary. Yeah, it was all proprietary stuff. Didn't have support for the position property. Position app. absolute position relative. Didn't support Z index, didn't support child selectors. A
whole bunch of stuff that 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.
For IE only in the show notes, I'll include that conditional so people can, people who are unfamiliar with it can see what we had to do. And 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. Different CSS file. 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 comment ability because they got on board with all the modern CSS at that time. Yeah, so the idea was that IE would see those calls to CSS. file, wrapped in a comment, and it would respect them. It would pull that thing in.
Oh. But every other browser. Right. I do remember what you're talking about now. 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 IE browsers by
adding that and it would add all this other stuff. Yeah. It was a nightmare. I do remember, though, there was also a hack that you could add into just like your standard style sheet that maybe it was like an underscore.
score as part of either the selector or the property. And then that was like, that was another IE6 hack. 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. We're all trying to remember stuff from like 19,
20 years ago, years ago. Like, 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 this is. Okay, okay, but hold on though.
Slow your roll. I worked on a project just a couple years ago, and it was for a bank, working on some internet thing for a bank. And it had 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 IE 11, even though it was about to be retired within the next year. Because... banks are, 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 IE 11. 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 for really old browsers and that kind of thing. I can remember. you're having to do stuff for that, not even that long ago.
And well, you just give an example. You have very recent. Well, banks and insurance companies. And I always mention this to my students. It's like those industries for sure, because some of their customers are
grammars up in the Northwest territories, who are working on some 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 taken up with all of these additional toolboxes. 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. A lot of educational institutions were behind even so much as like five or six years ago they were held back at least from what I remember. I can tell you from experience that sometimes it's because the 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 you have to.
Yeah, that's especially true for up until IE 10 when a lot of the modern CSS stuff was not supported in IE. But then Microsoft 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 the game. They've got stuff before the other browsers do. So it's all really modern modern life is so much more consistent and. easy to get the new features. There was a point when Microsoft was actually
telling people to stop using IE6. It's going back to IE6. They actually had a press release saying, please stop using that browser that we made. So it was a big change. Speaking of slagging on Microsoft,
do you guys remember when they were sued because of compatibility or support something or other? They lost this big lawsuit. In the States. What do you call that when they had? Class action thing.
Class, no, what do you call it when it's like they have a monopoly? on something. I'm an optimally. No, but there's a turnaround thinking of. Yeah, it's okay. I'm an optimally. There's like an antitrust maybe antitrust. Yeah, it was an antitrust antitrust. Yes. There
you go. Yeah, I do remember that. Well, listen, I want to get back briefly to the table-based layouts we talked about earlier. Back to 2001. Okay. Earlier. Yeah, the way I don't know if you guys remember making those layouts. So someone listened.
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. 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 it was 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 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 tape. base layout and then you'd swap out the one that has the content for real content
and so on and that's how we made table-based design back in the day. You guys remember using image ready? Do you guys do that? No I just wrote code. Yeah but but the key is that you would export with Photoshop and image ready but then
you would have to open it up in a GUI, WYSIWYG kind of editor like Dreamweaver, Microsoft front page and then Go Live Adobe. Adobe. Adobe Go Live. Adobe Go Live. And you create your tables in there and put your images as inside each cell that needed it.
Yeah. 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. Yeah. That was fun. I think I used Dreamweaver for like half of a project. And when I saw how much extra crap Empty divs 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 like since the beginning I have been against like I've been against wicks Even though even though it's very popular now. Yeah
Well back in the day I had a pirated copy of Dreamweaver and Photoshop and and I use that for my my first couple of websites that I built. I knew nothing about code, had no desire to learn code. But
once I did, it's 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. Okay, sure. 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 web page 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. Yeah. This was... The first iPhone came out in 2008 right? 2007 or 2007. So yeah I was doing stuff before mobile devices and even like the
original like the like the first blackberries that had internet access with that WAP browser. 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 like an M sub domain. And M dot the domain name dot com. And there would be like- Oh, God, I remember doing that. 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.s. 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 was doing that in 2013. Oh no. 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.
That was the premise behind it. But it's not even all that long ago though. I had to do that. I'm noticing it's the opposite 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 submitting claims. 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. And it's like, wow. Honestly, I'm not, I'm not surprised because most of the time people
use their phone, even me. I prefer to do stuff, 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 in my terrible eyes.
But I was sitting at my desk in the middle of something else and 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. It is so funny that things have flipped like that. Yeah, I left. So. There was a, we have notes about the show here today and Amanda, you were talking about,
you know, 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. So it would sort of like, it would stretch and expand or whatever. And of course it was really restrictive
because your design had to be super simple. If it has like images. backgrounds or whatever, it's never gonna work because it didn't because we didn't have object cover back then and stuff like that. Yeah, I remember I remember like
800 pixels was the standard for a very long time. Right, that's right. Yeah, yeah, yeah. 800 or 960 things like that. Yeah. Well 960 is still used 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. 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. 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 the. 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 the second row would be like, 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 the corner images. Yeah, I remember doing that. So much more work. 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. Yeah, this is another 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 let's... like you said, Amanda, it would expand the middle row
to accommodate the content. Do you know what I just remembered? If there was for a while, we're because our designs had all of these like crappy little tiny 10 by 10 pixel images to be used for like corners and you know,
repeating backgrounds and stuff. Remember, what were they called sprites? Sprites, yes. Because it was faster to load. Instead of loading like 50 different 10 by 10 pixel images, you would put all of these 10 by 10 pixel images on.
one file on like one giant GIF or JPEG or whatever, and then you would just, the CSS would just have to load this one file. Yeah. This one image. And then you'd have to like position it. Absolutely.
Oh, God. Pop and love. Do you remember doing that? All the time. Yeah, it was like a grid of. That just hit me now. Grid of icons. 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 of them. Yeah. So the point here, wasn't it? It was to reduce the number. of HTTP calls or whatever. Server hits, yeah.
Yeah, it was an optimization technique. Yeah, it was really, we don't have to worry about it now because this, well, whatever, everything's faster and nobody cares. Everybody's using SVG icons in any case.
Well, yeah, and nobody's on dial up anymore. Well, unless you're grandma in Northwest Territories. Yeah. Hey, Mike here. If you like the website 101 podcast, 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. 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 would go sans serif. 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. But the big key, and I remember doing this early, early on, especially in the first WordPress, first and only WordPress website that I built,
is I used this technology called Kufan. Oh yeah. And Kufan was a flash embed that you could use custom fonts and you'd go to this website and go 10000 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 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.
Yeah, 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, like they recommended that you stick to only using it for headings or whatever.
So it must, like it was a much better option than just having like images. So I'm wondering if it was accessible. It might have been really accessible, but accessibility wasn't even a spec in your grandfather's eye at that point.
You know what? I'm sure accessibility was around a lot before any of us were really thinking about it. Because I think 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. Yeah, what I'm saying accessibility wasn't a thing is nobody was aware of it or it wasn't a thing that we did in web development. It wasn't a thing that we did purposely in web development, but like I can, if you think
what was that movie, Hackers? Mm-hmm. Gene Hackman was in it and Dan Aykroyd, and there was a, there was the blind guy and he like would have the Braille screen reader. And so I mean, I think it's been, I maybe I'm sure that sites weren't written with accessibility
in my. You're right about that. But my guess is that using Kufan was more accessible because it was regular markup. And all of the text was still selectable. I want to talk about something that I remember
from a design perspective. So there used to be this big trend that caught on where your navigation menu, this was before skeuomorphic design or around that time. When people wanted to have things that looked realistic
on their web page. So they would think that their navigation menu should look like tabs of folders in a monilo-folders in a filing cabinet that stick up. 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. Dear podcast listener, go to our YouTube channel to see Sean's demonstration.
Right. I'm giving you an opportunity to make a video clip. Thanks. Sorry, sorry, Mike. Go on. I remember that now that you were talking about it, Mike. As recently as two weeks ago, I had a client refer to the navigation items in the menu
as tabs. And that's what I'm getting at here is that people still call navigation menu items, tabs. It happens all the time in my career anyway. Really? Oh yeah. 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? No, I don't think, 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 up. 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. Now, that would be a tab, I guess, technically, right? It looks like a tab. 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 when... wanted me to design one where it was like the one that was active Would actually like overlap the one that was like beside it and so this like active
If like so in the code for the main nav I would have to be like the link and then and then a spacer and a link in 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 Mess yes, it was very difficult bring it to the front. Yeah, when they 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 Zen Garden came out. Yeah. I don't know if I remember what that is. I love that site. What they did is they made us a website and 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. 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 built stuff. I would visit an occasion and I was at a high current to it as Mike, despite my enthusiasm when I introduced it. But yeah, it was a really cool site.
Yeah, it was great. I think it's still online, but I don't know if it's active anymore. If it is, if we can find it, we'll put it in the show notes. I want to talk about... some like OG HTML tags that no longer exist.
Blink. The Blink tag. I wanna correct you, it does exist. Just nobody uses it. Just nobody uses it. And Marquee. Yes. Marquee, and it would 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 the little bit of content and the closing Blink tag. And it would just. go display, hide display, hide display, hide.
Like for that's it. That's all it did. Very annoying. And the marquee tag, I had it on my very first HTML web page that I made. Was it the words click here? Was that wrapped in the blank tag? No, I think it was like 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 like 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 yeah it was just yeah I wonder if you could nest the blink inside a marquee tag or the marquee inside a blink tag would a blink and marquee at the same time I guess is
yes I just wondering if it would work I think you should you got to put that in your boilerplate John yes I will add that into my boilerplate speaking in 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 is now upgraded and ready to roll. Back to our episode. Impressive. Wow, self-promotion much? Hey, I am a shill for myself. Yeah, yeah, you gotta be.
So do you guys remember all the animated gifts? I mean, now animated gifts are, what are the, are they like meme-y things now? Do people use them for memes? I don't know. Yeah, it's more of a meme, yeah.
Well, and so yeah, so now they're more like short little, even like up to five to 10 second video clips almost. Right, that's true, that's right. 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 yeah this is going to be a do you remember
do you remember uh under construction coming soon and everyone would have like a little construction worker motif yeah on this on this landing page oh yeah that was very fun these uh 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 it your own, but it was free and just covered with bad design and God awful animated gifts everywhere.
Yep. 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 GeoCities sites that were still up when it was shut down. years ago. Yeah. Wow. I did have a Geo City site and an Angel Fire site, I believe. I have no idea what they were about. I think everybody
had a Geo City site here was around at that time. You know what? I don't think I did. No. I know I did. Because I actually had my own domain name. Well, wow. 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 it's just pictures or little messages and so that's what I used it for. Yeah, cool. Sean, you wrote 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 it is, but I'm allowing you to tell the story All right, so a web ring was this it was kind of like a community aspect for GeoCities or angel fire and 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 my site might be all about how much I love foosball and the next site would be all about
home repair. Yeah completely unrelated. Yeah, it was almost like they misunderstood the concept of the internet and how things are linked together and they thought 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. 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. This is before every house had a computer, let alone everybody having a phone in their pocket. Yeah. Amanda, you like JavaScript? Yes, we're best friends.
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, a confirm that's it. Yeah, yeah, that was about it. 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 code understanding fundamentals in my back pocket, 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 jQuery won the internet.
They did because they teamed up with Bootstrap, or because Bootstrap adopted them to be part of their front end. Well, it's not cool to use jQuery anymore. It's still out there. It is. And they released a new version recently.
Very recently. And there's so many legacy sites. jQuery does a lot of good stuff. But 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.
Oh, no. I think that deciding if you're going to use jQuery depends on how much would you use it. If you're going to download the entire jQuery library, just to do a hamburger menu, weak sauce. 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 maybe jQuery is the way to go and 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 thing a lot of cool things easily That you couldn't do until recently with Vanilla JavaScript well, it just it wasn't I mean the next five five or six years It wasn't as easy, you know, like you had to
you had to know the limitations of JavaScript and really dig deep to get into it. And then especially with things like jQuery 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 let's
Let's list a couple of pre-JQuery libraries to see if it brings back any fond memories. Sean, go. Mootools. I used Mootools for a while. I remember one time I heard on some podcast Andrew Welch saying he has never heard of
Mootools because he wasn't developing that much. I'm pretty sure he said that. Andrew, if you're listening, please correct me if I'm not right. Andrew, shots fired. How do you respond? I was like, wow, I feel good that I know Mootools and Andrew Welch doesn't.
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 Mood Tools, even though
Mood Tools had come out first. Yeah, I remember Mood Tools was something. Well, that's what happens. Something comes out. I keep cutting you off, Mike. I'm sorry. We're talking all over each other all through this episode.
But that's real. I'll just say that. I'm just going to be randomly talking and make this jumble. Go ahead. Shh. That's what happens. You should have seen a man who's angry. I just shushed you all.
So a JavaScript library will be released and everybody starts using it and everybody likes it. And then just like content management systems and just like other, 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 going to be more popular and whether through marketing or partnership or because it is actually better, it can eventually become like the industry standard. So that's what happened with prototype. That's what happened with mood tools.
It's not quite what happened with jQuery, but you know, modern approaches to JavaScript. framework is like Angular, then it was React. React is still really big. All their alternatives are their view. And then more recently, Alpine, not saying view or Alpine are taking over,
but you know, 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 this has been a really long episode.
So you know what? I think it's time for us to hop aboard the Starship Enterprise and ask Scotty to slingshot us around the sun back to 2024. The website 101 podcast is hosted by me, Amanda Lutz. You can also find me online at amandalutz.com.
Recording from a secret lair while plotting world domination, I'm Sean Smith, your co-host. One of your hosts today was me, Mike Mela. Find me online at belikewater.ca or on socials at like Mela. Hello and welcome to the website 101 podcast or podcast to
Have a question for Sean, Mike, and Amanda? Send us an email.
Season 07
- 1 When to Say No
- 2 How can I communicate better with clients?
- 3 What to do when work is slow - with Mitchell Kimbrough
- 4 Motivation, Burnout, and Imposter Syndrome, with Kevin Nicholson.
- 5 How to spin up a website quickly using a boilerplate
- 6 Back in my day...
- 7 How to submit a support request with Ben Croker
- 8 Online Learning and Keeping up with Technology with Ryan Irelan
- 9 Unlock your ADHD superpowers with Chris Ferdinandi
- 10 Rebroadcast: 11 Things to avoid doing on your website
- 11 Raw and Unedited
- Bonus The Joy of Self-Taught Coding