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

and it says, copyright 2012, a Paul Irish and Jonathan Neal joint. They used the thing 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,

Vercel.

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,

they would give you

wrap around it?

on these things. Oh. And the frustrating thing about Allen keys is that

Pretty

So if you had a a HTC 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

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.

and then you would code the CSS

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

Yeah. It's it's because they interesting things from from times past

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

and it would convert that to I believe it was to a Flash specific 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 then layouts with floats.

they are very slow

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.

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%, 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, there is a lot of Allen

previous animation course with Framer Motion. So it's very cool. We do all sorts of practical examples. It is nonstop

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

And 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? a decent portion of your web development time within CSS was figuring out 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.

that would you would just overlap and then absolute position

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

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.

at the time. That's like I I think, like, at least for me, a lot of people started in Dreamweaver,

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 if I were to use them elsewhere that they would be just totally as effective. It's funny. We use these for family

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.

I think Comic Sans was not web safe, but it was installed on every 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 and then they switched over to TextMate.

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

people found out well, they didn't find out. ESLint intended use Wes that you could use overflow Alright. Next Node is going to be 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

just like a third party app that ran on your computer. It was just embedded of being in a woods, proposal that never went through, but IE implemented it anyway.

Awesome. Let's get into some sick picks. I got a a good sick pick for you today. Sorry. What?

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

back then, you're probably finding this web font classes on the HTML, which was from what was the Adobe

What was the, like, public

and all of the elements inside that container are floated,

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, 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, CMS back in the day. Oh, yeah. That is not

And the left hand side would be there's no storefronts to these these you can certainly wreck it. But if you know what you're doing and you're careful, having font display?

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.

and that you can do that now with with Grid and Flexbox.

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 explained.

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, the modern web JS we know it has just been built in

Now the first and maybe one of the the most biggest

and creates an element doing this over? Working locally.

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

and you have these, you can became a small engines mechanic.

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 when I even applied for a flash job in Tokyo that I luckily did not get.

and then you edit and save a file, and then the text editor would automatically just upload that file to FTP.

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.

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 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 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.

and then you have to go back and refresh. And now we have, like, hot reloading, and you just instantly see it.

people cry about accessibility.

I did quite a bit of full flash site work.

That's like a a funny thing is that

the center

this is gonna sound crazy to some people. I just use PNGs.

file,

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 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.

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.

But my my portfolio was all done in flash.

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

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, 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 Node, that was a good old times. Good times.

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,

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, PHP, MySQL,

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

a a div where you wanted to put a custom border around it

Not just images, but, like, it it was meant to take

even in Dreamweaver so Dreamweaver's internal browser, whatever it may have been, 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,

Like, that that was the entire book. It's like, here's here's all these different really cool CSS Zen Gardens, What was that called? Oh, the It's still a thing, obviously. Still a thing.

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.

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.

into your

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.

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,

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.

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,

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 maybe for, I don't know, people who don't know this. So Flash was never part of the web. It was always then you would JS you better hope you have a backup dash 1 folder. Otherwise, you were pooched Oh, I just remember

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.

some interesting things. I had, like,

They're working on Coda 2, like, 5 years old.

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.

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? 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.

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 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 you can npm install the CMS. You can go ahead and use it. You can

you were really pretty limited at that time in choosing your fonts. It was like, okay. Which of these 3

So we would have these 2 things, and but if you would float them both left, So I did that myself,

a video game, like, select screen where you could, like, pick

pick yourself up a set.

Peace. Peace.

There there's less than 20 website fonts. So

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.

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 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 look not not good design wise, but, like, actually

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.

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

You know, everybody made their own 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.

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.

which was some sort of,

we used to do, like, your header, 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.

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.

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.

a bunch of HTML. It would be the same HTML for everybody,

interesting or useful techniques. It required techniques that were just based baked into Hit counters, 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 for a full archive of all of our shows, and don't

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 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?

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 Yeah. And,

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

is most of your content, and then top right bottom left is your corners,

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

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.

Dreamweaver. Back when it was Macromedia Dreamweaver, So we've been

like, an entire thing of text. And if you wanted that, you don't necessarily know But that was surprisingly a very popular way to work where it would just upload it. And if you accidentally deleted some code, assets, more API requests, more bandwidth.

for the CMS,

golden ratio somebody wanted to make up to say that would work out perfectly. You'd have the sidebar of a specific.

depending on

where your errors and bugs are happening and came from. So our sponsor you'd get white screens, and FrontPage got killed by Adobe buying Macromedia. Adobe about Macromedia.

the color of the background

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.

for a 2 light set, 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.

and then it would go through all of your page. And anywhere that you used

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 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.

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,

where if you like, imagine a button with round corners on either end and a and a gradient in the background.

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.

the Flash version of that. And it actually worked is a structured content CMS. It's really cool because 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

you today, if you put up a guestbook, it would be filled with people, you know, posting racist

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

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 ESLint them 6 or 7 levels steep is a world of hurt. It's a world of hurt.

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 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, like, the de facto way of doing it. But for a long time,

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

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.

how they did it, how they were able to accomplish some of this stuff. Because before CSS guarded,

is called Sanity.

there's probably people listening to this podcast who were,

and here is

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 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,

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.

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.

sitting down, like, every Friday night for dinner and replacements.

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

the entire

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 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,

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.

CSS itself. So I think that's probably why it doesn't exist anymore.

Along with TextMate,

2011 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 delicious in 6 months, which is funny. Yeah. That is funny. Like, some of our favorite places are starting to 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

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, So true. Wes was very tough.

3 years or 4 years for it to, like, 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 Sanity, which is a structured content CMS. And Sanity, which does all of your error and exception tracking in your application.

forget a closing.

But I thought that was pretty funny. Yeah. The coolest thing about CSS Zen Garden for me was being able to see,

There's some VML thing in IE would make it transparent and make it show through,

type deck type Node. TypeScript. Typekit.

I don't know if you did, so I'll let you speak on those. But I use primarily

I never really coded a bunch of of Flash websites myself. I I and repeating background images. And, luckily, that thing is not Next, we have just, like, text editors in general. So TextMate was the big one

finally, this thing exists in a way for the web that people are going to use it. And,

And you would have all kinds of different websites.

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

setup to be a little bit,

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.

dash old, published dash dash old old, published dash,

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, inline block elements and have text

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.

without having to make a custom sized button for every single thing. And it would just the idea is that,

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.

And that was very, very hard to do because you would also combine that with a table, 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,

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

like, special destroy

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%

the container doesn't know about its its height because there are no actual bolts

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

you were not able to use anything past and you would slice it into 2 pieces.

or or really anything like like a pretty popular thing on banned websites would put a be to put a grunge border around

furniture with these because you shouldn't, for my drill and impact driver, and you can certainly

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

Verdana, 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 shamelessly plug my upcoming course. It probably won't be out by the time you listen to this, but might be master gats .com.

Sanity.io soft metal, and they'll just wreck easily. Yeah. Cheap. But for the case of this JS that

practicality in that course. So check those out at level up tutorials.com.

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

And, also, out this month is animating

Allen key bits usually, people don't have both metric and imperial

was with floats. I mean, just think about how crazy it is,

So, like, instead of just, like, being,

things that was involved in code we wrote every single day, all day, every day Wes doing first layouts and tables

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

sick.

an element that was not floated at the very end of it,

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,

Flash websites Wes were super popular back in the day.

let alone

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

and what this would be is they were actually Flash Yeah. It's it's I'm just looking. They have a stats of it it hit its peak so get ready for that.

seamless cutover very happy to have amenities again. There was not not a lot of stores up there, Yeah. Absolutely.

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,

Nowadays,

like, if you put together IKEA furniture, 10 years old. 10 years ago Wes 2010. Yeah. I feel like that was just yesterday. Anyways, we are sponsored by

Head on over to syntax.fm You couldn't use transparency in images.

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,

in in actual Android development. Because I remember I had to do quite a bit of that to do

So true.

And, this was largely killed off by a couple of things. Flash sites were the way to give you these really dynamic interesting

But, like, maybe we should just say, like, Flash was never

the logo flowed to the left, the navigation float to the right, you know, those kind of things inside of a container. And then

all the sizes of proper Allen

of the total width or whatever the ones that have, like, really died down are starting to come back to the point where you can go get curbside or whatever.

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.

I like, this summer, I 10 Yarn, or 12 years. It's it's pretty incredible

Therefore, 3.

process. Imagine how slow that was. You edit a CSS file, you save it in the uploads, To download. Yeah. Something like that.

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.

Yeah. Yeah. So this was done by, oh, it's dude, that is this is actually freaky.

Classic a e. Yeah. It looks like it's just a JavaScript file that loops over the image

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

of the thing that JS it is on. And I don't really know how that worked, but,

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 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

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, 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.

embedded into a website. So every time that you ran Flash, it was actually running an app on your computer, Next up, we have just, in general,

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.

So what you would do is you would take your your button design, 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 a couple of pixels over top of it. And and the idea is is that you could have dynamically sized buttons and we it was commonly done by just saying Scott clearfix. You would add a class of clearfix 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 really, really well. And that was huge because memory lane Hey. To talk about Not been mating websites. No. That's,

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

react with Framer Motion two. It's the follow-up to the, critically acclaimed, CSS 3, please

Yeah. And we I coded 1 up. You can go to Wes Bos or sorry. Github.comforward/westbossforward/hitdashcounter,

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

Yeah. Just Dynamo. Dynamo. Dynamo. Why do I always say it wrong? Dynamo.

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

Windows computer.

I think I worked on, like, 4 or 5. And one thing that I noticed is that 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.

it's got all those,

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

you can still use Sanity,

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

And what Wes the Amazon database?

it's fantastic. So head on over to century.i0.

Was it Flash replacements? It's pretty sick. Check it out. Send it. Io.

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.

That's gonna get you double the free usage tier that gives you more via their APIs. But if you want to create your own custom React components

Trying to find out

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,

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

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 You you still see things that are, like, similar to it, but not really.

Was was Comic Sanity? I guess just by, oh, it was a VML.

Deno Dynamo? Denammo? 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, Wes safe fonts

where the flow issues were with your floats, what was flowing out of document, what was actually a part of the document.

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, 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,

Definitely

that because of this, you had to implement, which is one of the next things on our list, which is Clearfix.

it didn't require 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.

We wanted to do

and you can see file,

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?

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 a right image because when you have a container whatever was behind it. So it it looks like it's just 200 lines of JavaScript, 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.

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.

to

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.

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.

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

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? 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.

for that specific HTML.

Is that sliding doors? No. Okay. No. That's that was a good guess. But sliding doors was a technique for buttons,

things or, you know, being jerks to everybody else.

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

Noah also was tough, Scott? this is, like, not even on our ESLint, but remember when we had to add up percentages? And then you also

Cool. I am going to plug

to see that that was I guess that is a long time, but for years for the entire web before that. And all of a sudden, you're like, how is somebody

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, 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.

code to be connected directly via FTP or SFTP, Why does this look so weird in my browser? These images look very odd. And I say,

both floated left so that they go snug up right beside each other,

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

create your own

of straddled the line between a a true visual editor like FrontPage and and Dreamweaver,

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.

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

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

10 years ago that this was a thing. Like,

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

your rounded corners, your gradient, and it would be, like, 2,000 pixels long. And then you would have

2. K.

if you broke anything,

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.

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

You export it with a little bit of transparency.

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

that had cool backgrounds and and borders and all that stuff,

I'm doing good.

a code released today. I'm pushing a new version of Level Up Up, so that's inherently stressful.

we're back in downtown Hamilton, which is is the exact opposite

Just, you know, just hanging out, doing the same thing as normal, going a little bit crazy. I have a,

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? of the total width or 33%

and I hadn't had, like, sushi or kimchi or anything

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

and, onto your elements, and what that would do is it would usually use a a CSS pseudo after element.

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.

tales from web dev past. So we're gonna talk about all of the 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.

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

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Tolinski

hot And, also,

and Wes Bos. Welcome

tech in web development that we had to use, and that is, like, totally 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.

Today, we are going down I'm going to

Actually, I have to turn. Right? back end. They give you this thing called Sanity Studio, which is the actual CMS itself, and it communicates with Sanity

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 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 Courier?

Wes Bos.