Tales from Webdev Past - Clearfix × Floats × Cufon × Guestbooks × PNG Fix × More!

to Syntax. This is a podcast with the tastiest web development treats.

Today, we are going down memory lane Hey. To talk about tales from web dev past. So we're gonna talk about all of the hot tech in web development that we had to use, and that is, like, totally obsoleted or killed off or not as popular anymore.

Because Scott and I have been developers for, what, like, 15 years, something like that. Very long time. Probably longer than that at this point.

Actually, I have Wes Bos.

I have been at wiki websites for 20 years. Yeah. Exact and then I have the number of milliseconds I've been mating making websites for, and it's accounting. Have you been mating websites as well? Is that is that kind of thing? Not been mating websites. No. That's, no. I have not. When I asked on Twitter, like, what were the things, from a long, long I'm like, what were the things from, like, 10, 15 years ago? And then I realized that some of this this stuff is way older than 10 years old. 10 years ago Wes 2010. Yeah. I feel like that was just yesterday. Anyways, we are sponsored by Sanity, which is a structured content CMS. And Sanity, which does all of your error and exception tracking in your application.

We'll talk about them partway through the episode. How are you doing today, Scott?

I'm doing good.

Just, you know, just hanging out, doing the same thing as normal, going a little bit crazy. I have a, a code released today. I'm pushing a new version of Level Up Up, so that's inherently stressful.

Oh, yeah. Series released today, so that's also stressful. And we're recording a couple episodes of Syntax.

So, my I got a full plate. I got a a big old heaping plate. Wes Bos just did some barbecue. He he said, how much you want? I said, give it all. Give me it all. Give me everything you got here. So I got a a big old plate of, barbecue chicken here. But yeah. No. All around, I'm feeling pretty good. How about you?

I'm doing pretty good. I'm finally back from a cottage, which we were up there for pretty much 6 months. Came back once or twice to pick some stuff up, but, we're back in downtown Hamilton, which is is the exact opposite of being in a woods, and, very happy to have amenities again. There was not not a lot of stores up there, and I hadn't had, like, sushi or kimchi or anything

delicious in 6 months, which is funny. Yeah. That is funny. Like, some of our favorite places are starting to the ones that have, like, really died down are starting to come back to the point where you can go get curbside or whatever.

So, you know, just the other day, Voodoo Doughnuts finally we we got, like, a Voodoo Doughnuts, like, walking distance from our house, and it was, you know, only open for, like, a month before COVID hit. And then they closed it down just because they didn't need the operating costs, and they just opened it. And it was, like, the 1st day it was open. We're like, alright. I I know they're over they're overhyped and whatever, but they are very delicious.

So we've been

gorging out on some voodoo Sanity now that they're open again. A bunch of restaurants around here are starting up what are called ghost kitchens. Have you ever heard of that? No.

So, like, instead of just, like, being, like, a bar or or, like, a, like, a pretty popular sit down restaurant that, like, never did takeout, and their takeout was kinda hurting because it's not really that. But they a lot of them just opened up, like, secondary businesses that were only on Uber Eats and SkipTheDishes and all these, like, delivery apps, but they would just, like, create an entirely new, like, pizza place or fried chicken place. And, like, it would still be made in the kitchen of the restaurant, but they would just focus on, like, doing one thing and being, like, kind of this specialty fried chicken place. And, apparently, it's doing pretty well for them. Hopefully, keep them afloat until they can open up again. Oh, totally. Right? That's the that's the goal. Everybody's gotta find some way to make it happen, and, hopefully, yeah, they'll help them. Kinda interesting. I I think we'll see a lot more of that where there's these like, there's no storefronts to these these

businesses that you order from on Uber Eats. It's just a it's some commercial kitchen somewhere that has nice branding. Yeah. Yeah. Walk over. Pop it in. Alright. Let's get into this episode here. We're talking about tales from web dev past.

Now the first and maybe one of the the most biggest things that was involved in code we wrote every single day, all day, every day Wes doing first layouts and tables and then layouts with floats.

And the tables yes. Table layouts were older than float based layouts. Remember when you used to throw everything in a table? That was the whole thing. Tables upon tables upon tables. If you look at HTML email today, that's

sort of what all the layouts were like. Yeah. Just lots of nested tables inside of each other, and it's extremely frustrating if you were to ever forget a closing.

Miss a call span. Table markup themselves is already confusing by itself.

ESLint them 6 or 7 levels steep is a world of hurt. It's a world of hurt.

If you've ever done HTML emails, you probably know what that pain feels like. It's not great. But then came along float based layouts, and float based layouts were primarily using something like the the float property.

So I don't know if it was exclusively intended for just floating images.

Was that do you know if that was the exclusive intention of floats in general Wes to float an image to either side and let text wrap around it?

Not just images, but, like, it it was meant to take inline block elements and have text

wrap around it. So whether that's a div with, like, a a little did you know tip or something like that off to the right or to the left or whether that's most likely an image where you have text sort of wrap around it. That was the original use case for it. Yeah. So that was really the whole thing. And all of a sudden, somebody said, hey. You know what? If we just take a DIV and we put a float on it, well, then you can accomplish this kind of layout where you have the modern 2 column layout Wes you had a sidebar that was, I don't know, like 27% of the total width or 33% of the total width or whatever golden ratio somebody wanted to make up to say that would work out perfectly. You'd have the sidebar of a specific.

And there's definitely stuff like maybe your blog archive within the sidebar. And that's still a very common layout today. Don't get me wrong. But Mhmm. The way to accomplish it or anything was with floats. I mean, just think about how crazy it is, that we used to do, like, your header, the logo flowed to the left, the navigation float to the right, you know, those kind of things inside of a container. And then because of this, you had to implement, which is one of the next things on our list, which is Clearfix.

Did you wanna talk about what Clearfix is and why we needed it?

Yeah. Just because when you have a container and all of the elements inside that container are floated, the container doesn't know about its its height because there are no actual non floated elements inside of it. And because of that, that that entire container would just collapse. So if you've got, like, a wrapper and you've got a sidebar and you got your content, and those 2 things are 20%, 80%, both floated left so that they go snug up right beside each other, let alone this is, like, not even on our ESLint, but remember when we had to add up percentages? And then you also could you you would have to use margin and padding, and you have to add that up to the Oh, yeah. Entire width of it, so it would add up perfectly. That was before box sizing border box.

So we would have these 2 things, and but if you would float them both left, the wrapper would collapse on itself, and then the content that came after the wrapper, like the footer, would just go, like, underneath all of your content. So what you had to do is to put, like, an element that was not floated at the very end of it, and we it was commonly done by just saying Scott clearfix. You would add a class of clearfix onto your elements, and what that would do is it would usually use a a CSS pseudo after element.

And that would just add a block element at the end, and it would make sure it snaps down to its its rightful height. Yeah. And there was also

people found out well, they didn't find out. ESLint intended use Wes that you could use overflow hidden on a container to clear fixes as well. There was a whole lot of different several different clear fix until, like, the clear fix, which was what you're talking about, the just class of clear fix. That was, like, the eventual like, the de facto way of doing it. But for a long time, a decent portion of your web development time within CSS was figuring out where the flow issues were with your floats, what was flowing out of document, what was actually a part of the document.

I remember that being a very difficult concept to teach. I would have to do do a lot of background dev coloring. This was killed by Flexbox first and foremost, and then later on, double killed by the addition of CSS Grid giving us tools that are actually meant to build complex layouts and make it way, way better and easier than floats, and we don't have to deal with things like a clear fix to clear the floats.

Alright. Next Node is going to be loading screens. Hey. You remember loading screens? I know we used to have a loading screen specifically on our Flash website when I did a a band. It was like, you Node, it it had the percentage and everything. It had progress bar and all that stuff.

Click to enter. Click to enter. Yes. What was really popular was having, like like, a buttons. You could, like, enter the Flash site or enter the the, like, low bandwidth site or the HTML site. Like, you would you would purposely have 2 websites depending on your user if they were on, like, a or, like, a dial up site, I think they called that at some ESLint, because it was like you're you couldn't handle it.

To download. Yeah. Something like that.

Click to enter. So funny. And then someone figured out that you could, oh, you could just enter. Right. Well, that was like You didn't have to click enter. They were called splash screens, which are very common in mobile app development Node while things are loading. It's just like a loading screen or whatever, and you still see them on top. But there was like a for people who don't know, there was a literal trend for a while where it was just a, like, a solid full screen page, and it'd be like, welcome to Scott's site. Click to enter. And you had to click, and then it took you to the index page, which is really kind of ridiculous. I don't know why it really came about in the like, I don't know if it was, like, video games or what the influence there was, but I remember for a little while, splash screens were the thing. You had to have a splash screen until somebody said, wait a second.

Why are we making our users click? I think there's maybe some data that came out around, like, people leaving your site when they get to a splash screen or something. So yeah. I remember record labels and bands would have, like, 7 or 8 click to enters. Yeah. They would, like, wanna, like, slam you with all this, like, new stuff that came out. Yep. It's just hilarious. I never see a click to enter anymore except for beer

and cannabis websites in Canada on that. Yes. Yarn you 19? Are you 18? Yes. Of course, I am, obviously.

Hit counters, this was a big Node, and you largely saw these in let's just say, sometimes they were on fire or sometimes they look like an odometer, but they would let you know just how many people had been to this web page.

That way, if you stumble upon somebody's page in a WebRing and it it been, like, visited by, like, Wes people, you were like, well, I don't know about this site. I don't know if this information is any good or not, but then if you hit some that had thousands, you'd be like, alright. This this one's popping. Right? Like, Maddox Scott x mission or one of those would be popping. Maddox.

Forgot about that. I actually coded a hit counter, and I did it with serverless functions.

And what Wes the Amazon database? Deno Dynamo? Denammo? Dynamo. Dynamo. Dynamo. Why do I always say it wrong? Dynamo.

Yeah. And we I coded 1 up. You can go to Wes Bos or sorry. Github.comforward/westbossforward/hitdashcounter, and you can see the oldest part of the web, which is hit counters, and the newest part of the web, which is serverless functions come together. Collision course.

Yes. We also, along the same line, had guestbooks. Yeah. Guestbooks were really fun. Guestbooks were super fun. We I think we should add that back.

That was really fun. I we don't have to describe what they were. With with guest books, I think people might be a little bit more malicious now than they were in the past. Like, in in the past, I don't remember getting that much I mean, there was maybe some spam, but I don't remember getting that much, like, spam or or things you had to moderate. Like, you today, if you put up a guestbook, it would be filled with people, you know, posting racist things or, you know, being jerks to everybody else.

Nowadays, it would not work that. But I remember our band had a guest book on our our band's website, and that Wes, like, the message board for our high school. People, like, actually like, they were using our guest book to chat to each other instead of, like, a pre chat. I mean, ICQ existed at that time, but, like, it was so funny that, like, people would actually utilize that to, you know, communicate.

So true.

Next up, we have just, in general, Flash websites Wes were super popular back in the day.

I never really coded a bunch of of Flash websites myself. I I changed a few here or there, and I definitely had it. And I was more of a Iframes guide. Were you into Flash? Yeah. I was into Flash. I I did a lot of Flash, our brand's website, because, I mean,

we didn't just have our stuff on MySpace. And to do audio on the web at that given point in time, it was, like, Flash or bust. So, like, you Node to do Flash audio.

So we were like, oh, man. It would be cool if the song started playing right when you loaded the site and the text flew in. Flash players.

Oh, well, we did it more of, like, the entire site was built in Flash Wes Oh, yeah. Because it we wanted to do animations.

We wanted to do some interesting things. I had, like, a video game, like, select screen where you could, like, pick the band member to click to go to their page, and it was really cool. We we did a lot of Flash stuff like that. And I, honestly, I did Flash all the way up until 2011 when I even applied for a flash job in Tokyo that I luckily did not get.

But my my portfolio was all done in flash.

I did quite a bit of full flash site work.

And, this was largely killed off by a couple of things. Flash sites were the way to give you these really dynamic interesting experiences that you couldn't get on the web even for a long time after Flash sites died. But at some point, Steve Jobs said, hey. Flash Flash, you know, it opens up some security holes. It's maybe not necessarily the best experience at all time. And, you Node, we don't want those on our our Apple phones. So Steve Jobs put laid down the ban hammer and flash on the Apple phone, and, oh, that basically killed Flash, which is unfortunate in some ways. Wanna I don't wanna be too fond about Flash because it certainly was a nightmare in some regards, especially performance and security issues. Flash definitely had its pitfalls. But I will say that I owned Android phones for for many years that ran Flash video players Node problem. And it was always a blessing, especially when you're trying to watch maybe live sports or something like that. You're trying to watch something in a Flash player, and that always was nice when there was a video player on your phone in the browser. You clicked it, and it just worked. And I always hated that about the iPad or the iPhone at the time. This Flash video player doesn't work. Why doesn't it work? Well, what's the better option? Maybe nothing right now. But Yeah. Eventually, HTML 5 video came along and made that work. I remember even, like, YouTube was in Flash for a long time, you know, the video player itself, not YouTube itself. But the YouTube video player was in Flash, and it worked fine on my Android phone. I could go to YouTube's website and and watch a video. And I remember that being a a big reason why I chose Android initially over Bos is that and copy and paste. They those those are the 2 things I didn't have that Android had that I I really wanted. But for the most part, Flash is is gone, and, I don't really miss it at all. So now that we have HTML 5 video and better ways of doing all this stuff, Flash It it took a long time. We we got, like, HTML 5 audio and video, and it it probably took, like, a good

3 years or 4 years for it to, like, totally be replaced. I remember, like, tons of websites were just dragging their feet on replacing their players with whatever, and it just wouldn't work. Or, like, oh, it was really popular at the time. It's like restaurant menus were all in Flash. Yep. And you couldn't couldn't you couldn't look it up on your phone You couldn't. Which was really no. I couldn't. I I had, actually, I had I had a Android phone way back then.

But, like, maybe we should just say, like, Flash was never maybe for, I don't know, people who don't know this. So Flash was never part of the web. It was always just like a third party app that ran on your computer. It was just embedded into your embedded into a website. So every time that you ran Flash, it was actually running an app on your computer, and that's why it had to be, like, installed on your computer every single time. And half the time, it didn't work. Silverlight was the same thing. Say, you remember Silverlight? Oh, man. That was a mistake I did there. Forever.

It was like he it's like, you know, this thing that Apple's trying to kill off? Let's just make another one of them, and that, like, everyone's gonna roll their eyes every time they see that you must use silver light.

Oh, I just remember sitting down, like, every Friday night for dinner and

It's actually amazing that Netflix survived after their usage of Silverlight.

Yeah. It's it's because they we didn't have DRM in HTML five video. Absolutely. And then, finally, they added it, which was most people didn't want that, but

you you kinda have to have it. Otherwise, people aren't gonna use it. Especially for media. Anybody's worked in any sort of licensing or media space knows that that stuff is expensive. I mean, wow. Licensing media or if any regards, especially once you get into actual major motion pictures, is bananas. So, yes, they are going to protect it with DRM even if you believe the web should be open and free, which, you know, Wes, you do show a component. But, like, yes, the the movie producers are not gonna sign on to any web technology that does not allow them to protect their their property. No kidding. Okay. So next 1 is going to be how we did fonts pre, everything. So you youngsters have it easy nowadays. You get your font face, and at the very least, your biggest trouble is trying to figure out if the local which font the if the actual app on face is loaded or if the local font loaded or what. And now we have dev tools that even solve that for us. For for a long time, that was the biggest or, I mean, nowadays, that's the biggest pain. Before, there we jumped through a lot of hoops to do some fonts. Now I did not use 2 of these.

I don't know if you did, so I'll let you speak on those. But I use primarily this is gonna sound crazy to some people. I just use PNGs.

Anytime I wanted a custom font, I used a PNG with an alt tag. Hey.

PNG. Throw some box shadow on there, then now you get access to all the fonts you'd never had. It's like you open up Photoshop. You design the thing in PNG.

You export it with a little bit of transparency.

Just slap it on their NERRS image, and I actually cringe when I think about how hefty those sites were. I didn't even think about it just because it was like, oh, I want this font. Load it up. Load it up as an image. Ping. Wow. There it is. Yeah. I I did that a lot, and I I don't ever remember once hearing

people cry about accessibility.

And now you you tweet people just ignorant. If you tweet a sentence of text as a screenshot, you've 400 people saying it's not accessible. So, accessibility is is one thing that has has come a long way Come so far. In that, but the ones that I used was Qifon and Siffer, and what this would be is they were actually Flash replacements.

Was it Flash replacements?

1 of them was was Flash, and I think one of them I thought Kufan Kufan was Flash, but I don't I don't Node. I'm not positive because I didn't use any of them.

Yeah. It's it's I'm just looking. They have a stats of it it hit its peak partway through 2011 was was when it was pretty popular. Basically, what it was is that you would take your your your font face, and it would convert that to I believe it was to a Flash file, and then it would go through all of your page. And anywhere that you used an image or anywhere that you use, like, an h one or h two or whatever it is that you were selecting, it would go out and replace those with the Flash version of that. And it actually worked really, really well. And that was huge because you were not able to use anything past Wes safe fonts for years for the entire web before that. And all of a sudden, you're like, how is somebody just using this font that's custom and it's not an image? It it was it was so cool. Dude, so Wes safe fonts.

Let's see. I have them pulled up here. Can you list 8 Wes safe fonts?

Verdana, Vercel.

2. K.

Courier?

3.

I don't know. That's I that's the only 3 I know. Verdana, Ariel, and courier. And so it's funny because my go to was always Georgia. So Georgia was one of the ones that I yeah. I I really leaned hard on Georgia.

Ariel, obviously, you couldn't even use Helvetica, really. Helvetica was only in the fallback because only Mac users had it.

I don't even know if there are yeah. There there's probably only let's see. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11.

There there's less than 20 website fonts. So you were really pretty limited at that time in choosing your fonts. It was like, okay. Which of these 3 sans serif fonts are you gonna go with? I Wes I'll go with this one. I I I don't know. It was actually it's so funny. When I worked at the University of Michigan, they actually had Georgia in part of their official branding in the hospital. So I was like, yes. I can use a a Bos that's actually real to their branding.

Was was Comic Sanity? I think Comic Sans was not web safe, but it was installed on every Windows computer.

W three schools. Comic Sans was one of the web safe ones.

Node, that was a good old times. Good times.

There was also WebSafe colors at some point. Yeah. I don't I I don't remember when that was, but I don't remember having to deal with that too much. One thing that somebody I asked on Twitter, like, what were the things? And one of the things that were super hot 10, 15 years ago were custom CMSs.

You know, everybody made their own PHP, MySQL,

CMS back in the day. Oh, yeah. That is not

much of a thing anymore. Obviously, people still can make a custom CMS, but one of the this is me transitioning to an ad. One of the popular CMSs that you can use is called Sanity.

Sanity.io is a structured content CMS. It's really cool because you can npm install the CMS. You can go ahead and use it. You can create your own back end. They give you this thing called Sanity Studio, which is the actual CMS itself, and it communicates with Sanity via their APIs. But if you want to create your own custom React components for the CMS, you can still use Sanity, but you can you can create your own custom React components and and even still host it on Sanity Studio, which is pretty nifty. So you have control over the back end of your CMS, control over your front end, but you're still using this awesome service that comes along with everything you'd know and expect from a CMS. So if you wanna check it out for your next project, go to sanity.i0forward/syntax.

That's gonna get you double the free usage tier that gives you more assets, more API requests, more bandwidth.

It's pretty sick. Check it out. Send it. Io.

Pretty sick.

Cool. So let's get into the next one, which is this is kind of a joke because this wasn't an official topic. Like, this wasn't an official thing, but the what I called it was folder based version control Wes you hear folders would be like, old.

What was the, like, public dash old, published dash dash old old, published dash, February 2010, you Node. Public final ten. Public final ten. One of my one of my go to techniques, which I'm sure you've done before as well JS is, like, on your FTP, you're about to upload a new version of the public folder. What do you do before you do that? Well, you duplicate the old one and then overwrite the one that was there. So you duplicate it, you rename it, and then you overwrite the one that was there. And that's how you deploy the website, ladies and gentlemen. That was that was, like, the original

seamless cutover

was the rename of the fold over. The rename All you have to do is just rename the folder, and everything would work. That is something that we did, you know, in professional work. That that's just not hobby work. That's what that's what people did. I mean, sure enough, the big guns still had whether JS was SVN a thing? SVN? That the Yep. Yeah. SVN. That's the one that, WordPress uses that one. Subversion, it's called. Yeah. And Git really wasn't a thing. And when Git came out, real software people were like, finally, this thing exists in a way for the web that people are going to use it. And, those of us who were normal web developers and webmasters were all like, I don't understand this. Like, I don't get why like, do you remember Chris Chris Coir had that whole series? It's like me learning Git. And that that was, like, the way I first learned Git where he was just like, I don't know Node, so I'm gonna just, like, have some videos or lessons that's, like, me struggling to learn Git or whatever. And and that was, like, blew it open to me. It's like, oh, yeah. The the people who are actually using this stuff warp pros. You know, the people who you'd consider pros were they're having to learn at the same time. But, this was killed. The the folder based version control was killed by actual version control and Git and GitHub and all those wonderful things that we use today along with this next one, which Wes also killed by Git JS well as many other things, which would be FTP, which granted FTP JS a technology is not is not gone anywhere, but FTP as a means of deploying your websites and the total the primary way. Was this ever a thing that you did? Because we did this. Was it Sublime? Even text me had this, where you'd rig up your your code to be connected directly via FTP or SFTP, and then you edit and save a file, and then the text editor would automatically just upload that file to FTP.

Therefore, if you broke anything, you'd get white screens,

all sorts of stuff. Yeah. I I did, like, a probably a couple Yarn of that. I can't even believe that I did that. Like, nobody had local development set up, especially for WordPress. They would just Oh, whoop. Log in. And this is this is why people could not move off of Node forever because they were so dependent on the save and upload process. Imagine how slow that was. You edit a CSS file, you save it in the uploads, and then you have to go back and refresh. And now we have, like, hot reloading, and you just instantly see it.

But that was surprisingly a very popular way to work where it would just upload it. And if you accidentally deleted some code, then you would JS you better hope you have a backup dash 1 folder. Otherwise, you were pooched from working off the live version of it. And then when people I I at least for me, I saw a lot of people move away from it when they moved to Sublime Text. Yes. There certainly was plug ins for it, but it didn't come out of the Bos, and it wasn't so married to it. And then people said, oh, okay. Well, how are other people doing this over? Working locally.

Yeah. It was called Sublime. SFTP. FTP? SFTP. Yeah. That was it. Yep. Yep. No. No. You're you're very right. I think local development I remember when people were like they're they would call it, like, cowboy coding or something. You're you're editing files live on the server. Why don't you work on this locally? And I remember at the time, it was just even after I had my 1st dev job just being like, that seems like it would be so much harder to to maintain 2 versions of the files. Maintaining 2 versions of the same files.

Like, kid, like, that's hilarious to think of Node, but I was like, I gotta have a look thaw and the production on that seems kinda weird. But now it's just it's so ridiculous to think of that was even a thing. Totally. Next one we have, this is a bit of a throwback, JS CSS Zen Garden. The idea of CSS Zen Garden was

they would give you a bunch of HTML. It would be the same HTML for everybody, and then you would code the CSS for that specific HTML.

And you would have all kinds of different websites.

They would look different. They'd have different backgrounds, different fonts, and it was just a perfect showcase for the power of Vercel.

And this whole idea of separation of concerns Wes you have valid HTML markup and on one hand, and then you have CSS that lays it out and designs the thing based on on however you want it. Unfortunately, what a lot of people would do is they would absolute position everything because the one thing you couldn't do in CSS at the time was reorder content, and that you can do that now with with Grid and Flexbox.

But I thought that was pretty funny. Yeah. The coolest thing about CSS Zen Garden for me was being able to see, like, the amount of things people could do with it. Because before I really got I actually had a book. I'm trying to think of what its name was, but I got it in, like, clearance somewhere. And it really like, all it was was different CSS Zen Gardens explained.

Like, that that was the entire book. It's like, here's here's all these different really cool CSS Zen Gardens, and here is how they did it, how they were able to accomplish some of this stuff. Because before CSS guarded, really for me, I had done things in a very ugly way. It looked very, like, very early Wes, like, very early web until CSS Zen Garden to me. CSS Zen Garden is what took my websites away from being early web to being, like, actually look not not good design wise, but, like, actually look somewhat Node interesting than just really, really archaic stuff. CSS Zen Garden was awesome, and it was most likely killed just by CSS getting easier because, like, when CSS got easier and you got access to doing more and interesting things, well, all of a sudden, completely transforming this HTML doesn't seem like that crazy of a thing anymore because it didn't require interesting or useful techniques. It required techniques that were just based baked into CSS itself. So I think that's probably why it doesn't exist anymore.

You you still see things that are, like, similar to it, but not really.

It does still exist, and a lot of stuff is absolutely positioned.

Yeah. And, it's got all those, web font classes on the HTML, which was from what was the Adobe font display?

What was that called? Oh, the It's still a thing, obviously. Still a thing.

That Wes, like, an early font replacement. That was the first one type TypeScript type deck type Node. TypeScript. Typekit.

That was the one. Yeah. That was big where you could pay for fonts and just, like, load them. It didn't used to be owned by Adobe either. When it first came out, it was its own thing. Yeah. I remember that's when I learned the 1 pixel highlight trick where if you had a button and you put, like, a 1 pixel line of CSS like a border top of whatever that background color of just slightly lighter, then it looked like it gave it this embossing, and then maybe you throw a little gradient on there. And then you can piece about that. Really emboss buttons. I was all about that too, and Typekit was a really excellent CSS. I remember diving into that CSS and being, like, Wes, this is my jam.

Next, we have just, like, text editors in general. So TextMate was the big one at the time. That's like I I think, like, at least for me, a lot of people started in Dreamweaver, and then they switched over to TextMate.

Along with TextMate, there was Coda, which is still has a very loyal following.

They're working on Coda 2, and Node plus plus. I think they still have a pretty loyal following, but it's not nearly what it is for something like a Sublime Text, and then now what is Versus Code. Yeah. And even in Node different category, you mentioned

Dreamweaver. Back when it was Macromedia Dreamweaver, is when I first started using it, and then there was also Adobe had their own called Go Live, and then there was Microsoft FrontPage. And those were the the 3 sort of visual editors that were were were king. And Coda really sort of straddled the line between a a true visual editor like FrontPage and and Dreamweaver, and it still gave you a bunch of the tech stuff, but, like, some hand holdy stuff for, like, neat like, instead of having the right CSS hexes, they gave you, you know, the ability to quickly pick a color or something like that. I did go Dreamweaver to TextMate. I skipped over Coda and then went from TextMate to Sublime and then to Versus Node So this was largely killed by, editors getting a lot better, and FrontPage got killed by Adobe buying Macromedia. Adobe about Macromedia.

They're not front page. Go live. Go live was Adobe's version of essentially Dreamweaver before Dreamweaver. It, like, tried to simplify a lot of things. Either way, Adobe bought Macromedia, and then Dreamweaver became their product. And they kept them both side by side for a little while, and it's really unfortunate that my my college curriculum web development course Wes, like, basically, here's how to use Adobe go live. That's what the course was. It wasn't about HTML. It wasn't about anything else. It was like, here's how to use Adobe Go Live, which, of course, became obsolete, like, 1 year later. So this is definitely something that's been killed off by modern tooling. Now the next one is going to be sliding doors. Now I don't actually is sliding doors I'm gonna take a guess on this. Is that where you had a horizontal layout Wes they were sort of, like, sideways accordions that opened?

Is that sliding doors? No. Okay. No. That's that was a good guess. But sliding doors was a technique for buttons, where if you like, imagine a button with round corners on either end and a and a gradient in the background.

You couldn't do border radius. You couldn't do gradients. You couldn't do any sort of custom buttons with CSS.

So what you would do is you would take your your button design, and you would slice it into 2 pieces.

And the left hand side would be your rounded corners, your gradient, and it would be, like, 2,000 pixels long. And then you would have a right image that would you would just overlap and then absolute position a couple of pixels over top of it. And and the idea is is that you could have dynamically sized buttons that had cool backgrounds and and borders and all that stuff, without having to make a custom sized button for every single thing. And it would just the idea is that, the left is super long, and the right is just the end cap, and the end cap would just overlap the edge of it so it looks like a dynamically sized button. Just Google sliding door CSS

to visually see it. We did that all the time. That was definitely a because, I mean, if you want a fancy button, there's no other way to do it. Yeah. I mean, there was, like, a lot of techniques there around around those types of things. Alright.

Next Node would be the PNG fix. Now the PNG fix, I don't know technically how it worked. But back in the days of, I believe, IE 6, Wes and I kinda chatted about this before.

You couldn't use transparency in images.

That's like a a funny thing is that even in Dreamweaver so Dreamweaver's internal browser, whatever it may have been, allowed you to do transparency in images. And the browser that I was using at home, whether it's Firefox or whatever at the time, allowed you to see transparency in images.

But I was working on some sites, and I had people saying, hey.

Why does this look so weird in my browser? These images look very odd. And I say, I don't know anything about that. It looks fine for me. That was my probably the first instance of it looks fine for me in my entire web development career was finding out that Internet Explorer 6 did not have transparency on images. Because all of a sudden, people were like, these images look like crap. And I'd just be like, it doesn't. It looks fine. It looks fine to be. So on Safari, whatever, it looks fine.

And it it took a little while before I figured it out. So you could not do image transparency. To do transparent images, you Node to have a 1 pixel by 1 pixel transparent GIF.

Do you know how this actually worked in practice, Wes?

I'm just I just looked it up because I was like, now that I actually understand web development, I bet I could figure it out. So it was a a HTC file, which was some sort of, like, special IE specific proposal that never went through, but IE implemented it anyway.

Classic a e. Yeah. It looks like it's just a JavaScript file that loops over the image and creates an element and sets it to be the color of the background of the thing that JS it is on. And I don't really know how that worked, but, I guess just by, oh, it was a VML.

There's some VML thing in IE would make it transparent and make it show through, whatever was behind it. So it it looks like it's just 200 lines of JavaScript, which I totally understand now. I could probably sit down and and totally get how this works. But at the time, it was just magic where you just throw this HTC in there, and your images would be transparent.

It it felt like magic. All I knew was that, like, the 1st time I I figured it out, it was it was pretty awesome. So, big fan of that technique in the time. This one is kinda like the sliding doors technique. It's called the 9 panel layout.

So if you had a a div where you wanted to put a custom border around it or or really anything like like a pretty popular thing on banned websites would put a be to put a grunge border around the entire like, an entire thing of text. And if you wanted that, you don't necessarily know the width or the height of that thing. You probably knew the width of it because everything was fixed with, but the height of it would be dependent on how much content was written.

And the the thing that you would do is you would do you would make a 9 panel square. So if you if you think of a square, the center is most of your content, and then top right bottom left is your corners, and then the piece in the middle is where your actual content would go. And you'd have repeating backgrounds on all of those except for the the top right, bottom left corners. Those would be your actual border corners.

And that was very, very hard to do because you would also combine that with a table, and repeating background images. And, luckily, that thing is not we just have CSS now. We don't have to worry about any of that. Yeah. In Android, that was called the 9 patch, like,

in in actual Android development. Because I remember I had to do quite a bit of that to do rounded borders and stuff in Android development when I did some level of tutorials videos on that. Next up is going to be CSS 3, please.

CSS 3, please was this really awesome site that came out at the time when CSS 3 was just starting to take off. And this was a Paul Irish joint. Right? Yeah. Yeah. So this was done by, oh, it's dude, that is this is actually freaky.

I said the the Paul Irish joint just like, you you know, going like a Spike Lee thing. And then I I kid you Scott. I meant css3please.com, and it says, copyright 2012, a Paul Irish and Jonathan Neal joint. They used the thing that I I don't think I've ever said that before, and I just said it. So this thing is it's it was so cool because, man, we had all these vendor prefixes. Right when CSS 3 came out, it was like you couldn't just do a box shadow. You had to do a hyphen webkit box shadow, whatever. You had to do all these things.

And each time you wanted to do it, you had to have all the prefixes. Well, there's no auto prefix or to just add them for you. There was there was no there was, like, no real good way of doing this, especially if you weren't using things like Sass at the time. So right at this time, mad. Here's what here's what you would do. You would say, I want a box shadow. You would go to css3please.com.

You would edit the line of snippet they have for box shadow, then you would copy and paste all of the Chrome extensions with comments, letting your other developers know which browsers those comment or those things are supporting, and then you paste it into your site.

Wow. I cannot imagine working like this, but I did. I did it every day. Man, that just seems like so extraneous. Yeah. So wait. Shout out to Paul Irish, Jonathan Neill for that. That was a classic. It was only

10 years ago that this was a thing. Like, the modern web JS we know it has just been built in 10 Yarn, or 12 years. It's it's pretty incredible to see that that was I guess that is a long time, but there's probably people listening to this podcast who were, like, 5 years old.

Right. Then you're just gonna get off my lawn episode.

Yeah. Absolutely.

Alright. So Scott and I are just looking at the list here, and there's probably 20 more things that we have. So we're going to pause it here and pick it up on the next show. And we've got a whole bunch of interesting things from from times past as to how we used to do things. And hopefully, you're finding even if you weren't a developer back then, you're probably finding this

interesting about how we did it in the olden days. I think it also provides some context too, you know, some context to where these solutions are and why people are so happy to have the solutions we have nowadays. It lets people know that, hey.

Well, we couldn't be building these really complex things because you just even just simply getting a border radius on something was a complex endeavor. So

So true. Wes was very tough.

Noah also was tough, Scott?

Trying to find out where your errors and bugs are happening and came from. So our sponsor our sponsor our sponsor this week is Sentry. That's great. Wes is wearing a Sentry T shirt today. I'm so hyped about that because it's a really nice shirt. So Sanity at Sentry dot I o is the place to track all of your errors and exceptions. Let me tell you, Sentry has a lot of these really great features from being able to tag each of your releases. So let's say, hey. I fixed this bug. I can say, you know what? I fixed this bug. I know I fixed this bug. I'm really good at coding. I type the right words. The words fix the bug, and then I deployed it. And then you could click Wes. I fixed that. And then all of a sudden, you get an email from Sanity saying, hey.

Yeah. This bug that you marked JS being fixed in version 10.5, well, it's still there in 10.6. So you need to get back to work, son.

So that is what Century does for me, and I absolutely love it. Century is like a pal that has always got your back. And then, you know, whenever you made some mistakes in your code and you weren't there to see it, it's fantastic. So head on over to century.i0.

Use the coupon code tasty treat, all lowercase, alt Node word, get 2 months for free. It's a tool that you are going to want to use because I want to use it, and I've been using it for years, and I still want to use it. So that's the sign of a good tool. So thank you so much to Century for sponsoring.

Awesome. Let's get into some sick picks. I got a a good sick pick for you today. Sorry. What? I like, this summer, I became a small engines mechanic.

I I've noticed. Worked on all kinds of yeah. I worked on all kinds of really fun stuff. I got old Sea Doo that I've been fixing up, and I think I worked on, like, 4 or 5. And one thing that I noticed is that there is a lot of Allen bolts on these things. Oh. And the frustrating thing about Allen keys is that they are very slow to to turn. Right? And, also, usually, people don't have both metric and imperial Allen keys, so they use the closest one, and then they end up stripping out the inside of the Allen key because a lot of Allen key stuff is like aluminum.

So I did that myself, and I I was finally like, I have I have all the the proper Allen keys, but it's really slow. So I finally got, Allen key bits for my drill and impact driver, and you can certainly destroy furniture with these because you shouldn't, like, if you put together IKEA furniture, and you have these, you can you can certainly wreck it. But if you know what you're doing and you're careful, having all the sizes of proper Allen keys for your drill is key. And I was just like, why did I not have this before? It was, like, $15 for a set of every single one ever, and now I can can move much quicker. So, I've been I've been on, like, a serious tool kick for the last couple Yarn of just finding, like, the proper tools for for doing the job, and this is definitely one of them that I I wish I had got it earlier. So I'll put a link to to the one I got specifically, and I think that it doesn't matter all that much. They say they're super Yarn, but the thing I got them on Amazon. The thing you have to worry about sometimes with Amazon tools is that they're very soft metal, and they'll just wreck easily. Yeah. Cheap. But for the case of this JS that you you kinda want your bolts and your your things to be the same hardness. Otherwise, you're gonna strip them out if you go too quick. So with that sort of caveat, be careful.

Definitely pick yourself up a set.

Cool. I am going to sick pick something for those of us who have been working from home and maybe you want to step up your lighting game or your just your your home studio in general, a lot of people are getting into these types of things where it's like actually being on camera or Twitch streaming or whatever. And one of the things that can really take your setup to be a little bit, less amateurish is a good lighting setup. Yeah. Sure. You want a better webcam, but a better webcam and crappy light is still not going to look great. So, I am going to sick pick these LED lights that I got. It's a $130 for a 2 light set, which is really, really reasonable for studio lamps, especially considering these studio lamps will blow your face off. They're so bright if you want them to be. So I I love these little lamps. There is just a panel of LEDs. It's very cool. It gives you, gels to change the color. You just plug them in. There's big tall stands. I set them up on the side of my desk. And let me tell you, even on the lowest bright brightness settings, these things still totally fill my space. I'd imagine, if I were to use them elsewhere that they would be just totally as effective. It's funny. We use these for family pictures and stuff. Let's say Wes we're gonna be doing a family portrait in the living room. I'm not just bringing in my camera and my tripod. I'm hustling these lights in here, and I'm gonna get a a nice full light light lighting setup. So these are really fantastic lights. I am the type of person who had originally bought these giant light boxes in the past.

So I've had, like, several iterations of, like, lighting setups, and nothing has been cheaper, easier, better, faster than LED lights. And these LED lights are definitely at the point where, like, the technology has gotten there. I think the only only place that they could go from here is to be cheaper. But these ones have barn doors. They're really nice. They don't get hot. You might not have been in this world, but I used to have to do lighting setups, and it'd be for different rock musicians. Right? X, y, and z would come into the studio. I would have to do the entire setup. I Scott for this magazine, Guitar World. So let's say Trey Anastasio, the guitarist of fish, he comes in. Right? He's a big rock star. He's sitting down. And then, like, while I'm setting up the audio, I'm setting up the the backdrop. I'm setting up the camera. I also have to set up the lighting, and you had these, like, super powerful lamps that have these things called barn doors, these big metal barn doors, which all of the lights should have. And the barn doors would get so Scott, it would burn your entire finger off if you were to touch it. So you had to use, like, a burn handle and, like, whack it to kinda get in the right spot and just, like, tap it a little bit. So that used to be a thing thing in the past now. These things stay super cool. So big fan of these lights. Check it out if you are into needing any sort of lighting setup. These have been my go to's of choice. Shameless plugs, Wes. You got anything to plug.

I'm going to shamelessly plug my upcoming course. It probably won't be out by the time you listen to this, but might be master gats .com.

It's going to be my course on mastering Gatsby. We use Sanity as a CMS on the back end. Lots of CSS little tricks that they're gonna learn along the way. Custom React Hook JS gonna be a good one, so get ready for that.

Cool. I am going to plug my latest 2 courses. I just did a course on Rec three d using Rec 3 Fiber in JavaScript. Talk all about things like the new Stripe website, maybe Transmit's website, things like that that are utilizing three d on the Wes. This is something that you're gonna see happening more and more often. So you wanna check out my course on leveluptutorials.comforward/pro.

And, also, out this month is animating react with Framer Motion two. It's the follow-up to the, critically acclaimed, previous animation course with Framer Motion. So it's very cool. We do all sorts of practical examples. It is nonstop practicality in that course. So check those out at level up tutorials.com.

Awesome. Thanks so much for tuning in, and we will catch you on Monday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't