Tales from Web Dev Past - Part 2

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 and Wes Bos. Welcome to Syntax. This is the podcast that has the development treats that are the tastiest. We measure them all, every podcast out there, and we have the tastiest web development treats.

So thank you for tuning in today. We've got a part 2 of our tales from WebDev Pass. People love the the last one that we did. Basically, just talking about tech that was so hot 10, 15 years ago and and why we had it and and what we had to do and and what we have now instead of it and sort of why it got killed off or died or or became less popular.

With me, as always, is mister Scott Tolinski. How are you doing today, Scott?

Hey, yo. I'm doing good. Just just hanging out, trying to record my next course. I'm rerecording my, React beginners course, which was just I mean, the course wasn't wasn't old, but it it was, you know, built to be classes first and all this stuff. And there's been so many changes in React, so I'm rerecording it to be hooks first, but I'm also relooking at, like, the types of things I'm teaching and the order and everything like that. And I'm very Awesome. I'm very into it. Yeah. Just having a good time having a good time recording, which is way Wes wanna be, you Node. That's funny. I'm looking at I'm re redoing my React for being in this course right now as well or not now, but it's coming up.

It's almost Scott to be rerecorded.

And I'm like, I don't want to Obviously, it's going to be hooks ESLint classes first, but I also need to keep a lot of that class stuff in. Not a lot of it, but enough that you can teach people classes because. Right. I went into an app that was next year's and it was version 2. And I think the most recent version is 8. And I could not, for the life of me, figure find any docs on for 2 point o. And I I had no idea how to use the thing. So I had to update the entire thing. And I was like, oh, man. Like, this is probably what people run into all the time Wes the thing has been sitting for a year and a half, and all of a sudden, none of the docs, none of the tutorials cover any of this stuff. And you don't really know what these life cycle methods are. So that that stuff's kind of important, especially in in real world where stuff's not updated every 3 minutes.

The good news for me is that, like, because my course platform allows for it, I can just keep the old one. So Oh, yeah. The old one is classes first. And what I can say is, hey. If you wanna learn classes, just go watch this other one. It's the same stuff just with classes.

Beautiful. So today, we are sponsored by 2 awesome companies. First 1 is Sanity, which is a structured content CMS. And second 1 is Prismic, which is a headless CSS, kinda in the same space. We will note that. Certainly, I'd wanna check them both out, and we'll talk about them partway through the episode.

Cool. Web dev passed. These are a lot of fun things. This and, in fact, this first one, which is iframes, iframe still exist, obviously, and we still use them to embed things. But if you run around at this time, you really don't know just how everywhere iframes were, and iframing your own stuff in your own site was just so common. It Wes, like, the technique, especially for head, headers and sidebars.

You'd have a sidebar navigation that was an iframe or a top that was an iframe, and it was your navigation or your Wes ring or something like that, I use this technique Wes, like, absolutely Wes. I love this technique.

Yeah. If you've never built an entire website in iframes, the way that it worked is that you had like like Scott said, you had a header dot HTML. You had a sidebar dot HTML, and then every single page that you had didn't include a header or sidebar. It just included the actual content for that, and you would just iframe it in. And then when you click together your website, it's very funny. It's very much like components today. You give a a name to your your, like, content.

Then when you click on a link, you give it a target so that when you click on the link, the target you know, like, target equals underscore blank or whatever. People think that's the only thing. You can set a target to be any any name of any iframe, and it will not open in the current iframe. It will open in another iframe on the page that matches that name, which was which is unbelievable. And I still remember learning PHP for the 1st time, and somebody showed me the, like, include header dot HTML. And I was blown away

that you could include it because what we did before then is if you didn't use iframes, you just copy paste it the HTML over and over again. That was a whole thing. You had, like, 6 pages. You had a header. You made a change to the header. You selected the header. You copied and paste in all the other pages, and then sometimes you forgot, and then the header was wrong on 1 page or, you know.

The bummer of that is that there was no, like, URLs.

Well, you I guess you could have have URLs, but the way that most people used it is they just had, like, a .com, and they just dynamically switched out the content of the content iframe, which is funny because it was, like, the original no reload.

But you know what? People didn't think about at the time. Nobody thought of and nobody needed to think about was SEO because Google wasn't around. So there wasn't this algorithm, and everybody relied on keywords for your search. And even then, I don't like, beyond, like, in in the personal personal capacity, I don't know how much, like, thought was ever put into, oh, people Scott find this thing because people didn't find these things through Google. They found them through Webberings or related links or whatever. So it was, it was a different world with Iframes.

Next up, we have here is, JavaScript image hovers. So before we had CSS hover states and I guess even I don't even know when we got CSS hover states, but when you had Dreamweaver, you'd have this underscore image hover where you would hover over, like, a link, and that link would not be text. It would be like about Scott GIF, and then you would hover over top of it. And it would literally replace the source of that image with, like, if you like, about underscore hov Scott GIF. Yes. And that would be like like you some people do this manually, but mostly Wes would happen is you would design it in Photoshop.

You would use I think it was ImageReady. Was that what it was? ImageReady would export all of the the hover styles for you. So it would happen automatically where you'd have a ESLint. Like, you'd slice up your website, You pop an iframe into where you wanted the text to go, and then all of your entire navigation was and I actually did.

If you just go to my YouTube channel, I did. I found a website that was still generated from image, from Dreamweaver, like, 20 years ago. And I like and now that I know JavaScript, I took the whole thing apart and looked at the code behind how the image hover worked. And it was kinda fun because it's, like, looking at this nostalgic JavaScript that was magic to me, and now I actually know JavaScript. And I was, like, oh, it's just replacing the source. And it was, like, caching them in in an object, so it's pretty neat.

Yeah. I have all of my old work, so I, like, really I I should go pass through some of that stuff. I'm sure it's amazing in terms of, like, what it's doing and how bad the code is and whatever. But I got I got to get on I got to get on that and check some of that out. And and along the same lines, and I know you talked a little bit about this, but that the one of the main techniques for designing and building websites was to design the entire thing in Photoshop. Right? You design the entire thing, drop shadows, sidebars, effects, whatever in Photoshop.

Then you'd use the slice tool, which Scott out to anyone still using using the slice tool because everything's so vector based right now. But you'd use the slice tool to segment up your website into different sections, then you'd export all of the images. You'd put them in a folder, and you'd fire up the background image on all of those images so that your website actually looked cool rather than just being basic shapes and colors, because that was the only way to get drop shadows or textures or any of that stuff. So you would just slice like crazy. And I remember throwing, like, just hundreds of images, just sliced up background images, whatever. And that was just the technique. That's just what people did. Next one we have here is CSS pie.

This we talked about this with the transparent one in the last Node. It's very similar to that Wes IE6 didn't have transparent GIFs, and CSS py sort of took CSS 3 features border radius, box shadow, linear gradients, and that's it. And it used this, like, weird, Internet Explorer specific language called Bos t c files, very similar to JavaScript, and it would literally, like, kind of just polyfill them in. IE was, like, way ahead of its time. It was not standard or anything like that, but it it allowed us to do things that were part of CSS 3 and backport them to IE 6, 7, 8, 9, which was key when

some of the CSS three stuff was started to come out. I never use CSS pnpm. It's a admission of mine. Never used it. I remember the site. I looked at it. I don't remember I don't remember the rest. Use there was, like, a CSS gradient website that would generate

the the gradient text. It would also give you the, like, IE specific alpha whatever.

So you probably used it in a roundabout way, but CSS pie sort of just put it all into 1 little library.

Yeah. On 1 little thing. Next Node is this is funny because, you have another one here, but I'm gonna skip skip forward. Go for it. It's animated GIFs of people in construction.

What was that site that had all of the animated GIFs? There was 1 site that had 1,000 and thousands and thousands of animated GIFs, And I used to love that. There would be like the little 3 d people that were just like poorly 3 d animated and you'd be chopping away or with a jackhammer construction.

Maybe you just put it all over this JS, like, under construction.

And it's Sanity, I, one of my libraries that I was writing, the Fresh forms library. I wrote a a forms library for React, and it's definitely usable. But when it was, like, super experimental still in the early sign, I couldn't find any of those GIFs. So I I just on the GitHub page wrote construction Node GIF on there because it's like that's just like what you did anytime anything was under development whatsoever.

You put a little construction guy on there and JS usually this really great three d. I wish I could remember what that site Wes, but there was

schmorky.com, I think Wes one of Node I don't know if that was it.

But, yeah, there was tons of them at the time.

Yeah. There when I was in high school, I took a web development class, which is funny to think about. There was my it wasn't my introduction to HTML, but it was like, here's the HTML basics, and that's what they taught you, how to make an HTML page and link and whatever. And so I I, like, filled my site with animated GIFs from that site because I think they even I think they even taught us how to use that that site in in in the class.

I'm gonna loop the next 2 in as the same thing just because they're both related to old IE.

Oh, god. The first one is the Zoom property, where you just have Zoom 1 on a lot of your stuff. You have no idea what that was for. I didn't even know what it was for until I looked into it Node. And it's when you have floats and and layouts. Sometimes IE would just choke, and and the whole layout would be all goofed up. So, by putting Zoom 1 on that stuff, it would just magically fix it in IE.

Yes.

And then along with that Just fix it. Targeting IE and IE 6 in CSS.

If you put a star in front of your, like and 1 in front of your properties, like color or anything, it would target IE 6 and IE 7. Or if you put an underscore in front of one of your properties, it would only target IE 6. I use that a lot because I would do the whole website and then crack it open in IE six, and then you just go around adding additional properties just for IE six with the underscore in front of it.

I was so unaware of browser compatibility stuff at that era, like, when I first started. I designed and built things for, hilariously enough, like IE 7 oblivious that it would look terrible on IE 6. And then somebody is like, yo, I opened up your website. It looks really bad. It's like, what are you talking about? And it looks great.

Only that's, like, my first experience with understanding that there is IE problems. Then another thing is funny that, around the same regard, like, image sizes. Like, I was not aware of image sizes being a thing. And and so I used to load up these huge image sizes. And I had a friend of my brother my brother's a couple years older than me. I had a friend of my brother who who had a little bit understanding about this. He's like, Yo, here's what you got to do. You go to Dreamweaver, you click on the image and then you click optimize. Do you remember that button? Yeah. Yeah. Hey. Like, it re it just remade the image so that it was the actual size you were using rather than the thousands of pixel version that you were loading up unknowingly.

Yeah. That that was the best when when we could do that. Because before then, like, a lot of people didn't even have, like, image editing software or No. Batch workflow. You got 50, 60 images.

Luckily, like, my digital camera at the time, I would put pictures of my friends on on my website.

The images were so small coming off the digital camera that it it never mattered.

What else do we have here? Just layout trend trends in general. Like, do you remember websites? You Wes used to be, like, 800 by 600. Like, you would specify the height of your image or your your website, and then you would just add a scroll to the content area.

I don't know why.

I also didn't scroll before then. Iframes, man. Iframes. It's just we just threw everything at iframes, at least, scrolled.

I remember, like, when grid systems got hot. Yeah. 9 60 GS was the one.

I mean, that was probably in some of those, like, a list of Yarn articles about, like I remember the golden grid, I, 9 60 g s, the 12 call grids. There were so many, and then it went got crazy, and there was, like, 24 call grids.

Shout out to this theme back in the day for Drupal called Omega.

This is built primarily on the grid system, and it was really nice to use in that in that kind of CMS environment. So shout out to Omega. That was one of my favorite themes back in the Drupal days. But this, 9 60 grid, this was such a thing even to the point where one of my first money making ideas was like, oh, here's here's my money making idea. I'm gonna make a notepad paper that's just the 9 60 grid. But, like, sure enough, like, that already existed. So, like, I, like, came up with that. I was like, oh, this is gonna be so good because then you can sketch a site on the 9 60 grid. Yeah. That was the thing.

With 9 sixty, it came with a PDF. I think Yes. That was you you ESLint it out. I thought I made that up, and I did not. The 9 60 grid was 960 pixels wide, and it was, what, like, 8 columns 12. With 12 columns with some grid with some gap in between there. 20 p x in between each Node. And there Wes some, like, magic math where you could do

combos of every single like, three 3 3 columns. Node, that would be 9 to 4 3 columns or 3 4 columns, and everything added up. And there was this bookmarklet that you clicked, and it would overlay these red bars on top of your website. And you would just look at these websites, and there would be no text or images or anything that would be outside of in the gutters of this thing. And you're just like, oh, I remember that. That was so good.

Yeah. That was very good.

I really like that. And, I I I remember Wes, like, our designers, like, when they when they got a hold of the 9 60 grid, we're just, like, just throw it all on the grid and never think about it. And this was before responsive, so it did it wasn't responsive. It didn't have. And once these things turned responsive, that was, like, the big big deal. I remember the very first responsive site our agency did. It was for a local restaurant, and their menu was responsive.

And I remember just, like, being in awe of the work that my my coworker did, just being like, dang. This is good. This is really cool.

Next, we have Sanity maps. Yeah. They were super popular. So if you've had, like, a bunch of buttons or something like that, and those buttons like like, the the big one was you'd have, like, a Twitter button. Node icons? Icons. That's what I'm looking for. Twitter icon, Facebook icon, buy it now custom button that couldn't be done in CSS.

What you would do is you would export all of those to individual PNGs. And Jake Archibald made this website called Sprite Cow, And you would just drag and drop all of your images up to Sprite Cow, and it would kick out, which JS crazy to me, like, to think, like, all of the work that went into Sprite Cow all those years ago, like, that was cutting edge tech. And it would kick out, like, an image. So good. And then it would give you all the CSS classes. And the idea was that you would put a background position on each of your icons, and it would perfectly line up with where the icon was on the thing. The what sort of killed that was high res displays because you couldn't take an icon and double it up or or have it, and it would just be pixelated on these high res. Yep. His iPhone, I think, was the first one that did that. You know what actually killed it first? What?

Well well, that killed it, but the technique that we used was icon fonts. Oh, yeah. Like, font awesome. I forgot about that. Yeah. Font awesome showed up, and all of a sudden, it's like, you can just use a font and get access to tons of icons, and then you don't have to deal with images. You don't have to deal with Sprite Cow, which by all means, love Sprite Cow. But you didn't have to deal with any of that stuff, and you just got an icon font. And and I remember, specifically it was working at 1 job and the designer gave me this design, and it was these crappy CSS pixelated icons. And I was just thinking, like, you have got to be kidding me. Like, there are icon fonts, and these are gonna look terrible JS I replaced all the icons. And then he got mad at me, and I had to go in and be like, listen. Like, you don't know what this is. Like, you have you you're you're checked out. You're just tossing in generic work every day. So, like Yeah. You gotta you gotta get with it. And, the icon fonts killed it, and then Wes icons killed icon fonts. So, here we are with SVG icons, and I'm all about it. Next up is Firebug and Firebug Lite. So Firebug and Firebug Lite were the OG dev tools. These were extensions.

You could call them extensions. They were sort of weird because I don't understand the were they installed as normal extensions? Because I don't remember that browser extensions even existed. I don't I don't even know know it was a bookmarklet, which

a bookmarklet was some JavaScript that you dragged into your your bar. And Wes you click it, the browser thought it was a URL, and it would just run some arbitrary JavaScript, which is a huge security issue.

And what that arbitrary JavaScript would do is it would inject all of the JavaScript needed for having dev tools, Firebug, into your website, and then it would just run.

Well, no. Why not? It was, like, the way of debugging. I mean, it was the way of debugging at the time. You you didn't have the the normal dev tools that you were used to, and and now I remember, like, people talking about Firebug, and I'm just being like, well, I can just, you know, save a file, refresh, and see if it worked. So that's good enough for me. Yeah. But that was, like, really the alternative. Yeah.

Yep. Firebug we had no console log, and we had no, like, inspect element before that.

And then Firebug eventually got integrated into Firefox.

Chrome DevTools came out with their own Vercel, and then, eventually, Firefox came out with their own Node tools, and Firebug Wes, into rest. Yeah.

Yeah. But we all we all all firebug.

I still remember that icon. I can see it. I can see it in my mind. So good. Next up Wes have here is image maps.

Actually, I'm gonna I'm gonna loop 2 things together, image maps and, like, background gradients. So image maps were, like, just an actual image that you would give the pixel values of where links were.

So if you wanted a circle link, you couldn't do that unless you were to use an image map. You'd overlay it on top of it, and you would specify links to it. I think we might have even covered that one in the last episode. Yeah. We might have. The the Space Jam website? Yes. Yes. Very famous for that. Unreal. So and I think these are one of the Wes. Are 2 unrelated, I think. Okay. Well, we'll talk about the other one, which Wes just, like, repeating gradients. So if you wanted a background image on anything, you would have to do, like, a 1 pixel wide gradient by, like, 2,000 pixels high, and you just hoped that no one would ever make a div higher than 2,000 pixels. Yes.

Otherwise, it would it would start to repeat, or you would you would see it because we didn't have I don't think we had, like, background position No. No. Fixed or contained.

What's the No. No. Node. Those are totally much later. Yeah. No. Contain and cover, I remember when containing cover dropped because those were big deals.

Like 4 I don't know, 6 years ago.

Yeah. Yeah. And, I mean, this was super useful technique because, you know, you make 1 Vercel, whatever. And I was always really impressed to make a 1 pixel or even like like you said, a 1 pixel wide and whatever 200 tall. There's also the opposite of that where you do 1 pixel tall and a 1000000000 wide and then repeat that up and down, and then you can get gradients that way too. But there's also the the idea of having background images being such a huge thing because there's no real way to to get a lot of separation of or interesting design without background images. So people did a lot of background, a lot of background position fixed because that that definitely existed. Containing cover did not, but fixed it. You could have a fixed background. I remember the 1st time that there was, like that I use personally an image that you could repeat x and y. You could repeat x and y or just repeat 1 or the other. But when it actually made it seamless rather than, like, for a long time, people were just using these textures that had, like, no seamless transition between them. And then when they would repeat, you would see the actual horizontal and vertical line or ESLint. So it's like these, like, square repeated squares repeatedly in the background of the image. That was like people started getting creative with their techniques. Yeah.

Squid Fingers was the website that had those repeating patterns.

Yes. And that was my, like, my go to. And then, this has been around for a long time, subtle patterns.com.

Subtle patterns. Yep. Still around. Like, I tweeted it out the other day, and the original creator of it said, like, oh, my baby.

It's it was bought by Toptal, but they're still adding new patterns. Subtle patterns is still in my bookmarks. I I just typed pnpm s, and it was like, subtle patterns?

It's still a awesome resource. It's most of them are still let me see. The most of them are still PNGs, which bums me out. Let me open it up. I really relied on that site. That's for sure. I just downloaded the latest one. Wes. And there's still PNGs, which drives me crazy because clearly whoever made this pattern built it in, like, a Vector. Some sort of vector, and then they don't ship the SVG file. That's why I like, Steve Schoegar's hero patterns because he gives you the SVG, and you can go and modify the colors of that pattern.

And a lot of them could be CSS today. You know? Yeah. You're right, actually, because Lea Varouf came came out swinging with the CSS patterns website. Oh, yeah. Oh, yeah.

Unreal that you can make patterns with gradients.

You know what else is unreal, Scott? Oh,

there there Wes such a good transition.

You got a good transition? Okay. Well, we're okay. We're talking about geometric patterns, and the sponsor is Prismic, which you that's like prisms. There's, like, such a good connection there. I don't have a good transition ready, but I feel like it was sit it was sitting right there, like, it was sitting there, and you went with unreal.

True. That's all my only transition is you know what else is blank? Yeah. That is. Yeah. It is. Okay. So let's talk about our sponsor today, which is Prismic available at Prismic IO.

It's a headless CMS that basically the way that it works is you log in, you create your entire back end. You don't have to write any code to get it up and running. You just create your types, you create your fields, you create relationships between them. It handles images and image resizing all for you. Talk about earlier, we're talking about resizing images. It works seamlessly inside of Prismic. And then you can have your your users, your clients, yourself log in, add all of your content. And then on the other end, you, the developer, gets an API REST API or a GraphQL API, most likely, or Gatsby plug in that will consume all of that data and throw it into your Gatsby GraphQL API.

It's awesome. So next time you need to build a website and you need some sort of headless CMS, check out prismic.

Ioforward/you're gonna wanna go to this websiteforward/syntax, and they have a hilarious landing page that explains it. It gives you a bunch of starters, and then it also sort of pits Scott and me against each other as team view versus team react.

It's great. It's really funny. Prismic dot I o forward slash syntax. Thanks so much to Prismic for sponsoring.

This point, maybe I should be team Svelte.

Node.

We'll have to update that.

Okay. Let's talk about WebRings. So WebRings, despite their name, is not any sort of like a circular ring, although it is kind of in theory or concept, WebRings essentially are your links that you would have to sites that you would want to connect to each other. So you would say, WebRing, these are, like, basically my suggested sites that you visit, or a WebRing itself JS, like, sort of a grouping of sites that are all banded together in a ring to share each other's content in a way that's like, oh, you wanna learn more about web development? Well, here's the ultimate web development web ring, where you can click through several different sites that will teach you all these different things about about web development, all owned by different people,

sort of the original MySpace top 8 if you think about it. Yeah. I I always think about WebRings because I think that would be such a easy like, talk about, using a headless CMS. I think it'd be such a a fun project where you use one of these headless CMS to just input a bunch of URLs, or you could even you could even use, like, GitHub Deno. And then you write like some sort of serverless function that would consume all of those. And then whenever somebody hits hits a point like hits a URL like the webringcool.net, what it would do is it would take the like referrer and just refer you to the next person in the list or, like, take a random website and refer you to them.

So I think Webbrings need need to have a comeback.

I really liked Webbrings. I, I remember, like, my memory of WebRings is is, like, all about, like, gaming sites. Right? You go to gaming sites, and you'd be like, oh, I need the Ogre Battle 64 walkthroughs.

And you click on it, and you click on another one and learn learn more about it. This is, like, one of my favorite things.

Another one would be glossy buttons definitely had their day, and they still do you still see glossy buttons. There's, new skewer, morphisms, buttons coming around that are are are very glossy, and the the glossy buttons were primarily like a thing even before Bootstrap came out with their gradient buttons. Glossy buttons were straight up image buttons, gradient, glossied out. You got a little light sheen on there. They look like they were ESLint,

and, like, glossy buttons. I I definitely use those. Another design trend was flaming text. So the website flamingtext.com was the place where you would go to get all of your headlines and everything, which I still don't know. Like like, how did they do that all that that time ago? Like, if you were to ask me to make server generated images, I did it, like, once with the serverless hit counter example that I did with some some Npm package, but, like, how did they dynamically make flaming text on demand? That would be a great deep dive because that seems like that would be a real difficult challenge,

to do so back then. I mean, even now, I don't even know what I'd reach for now. I mean, there's a lot of image processing stuff, but I don't know what I would reach for first.

Yeah. Yeah. Because you would like, what would you do now is you probably just do it in CSS or maybe Canvas, generated on the fly. But, like, what were they doing? Like, if anyone knows, maybe someone can, like, deep dive who made flaming texts and how do we get them on the podcast because that would be really cool. Oh, yeah.

Be very into that.

Yeah. Who made all those construction gifts? Who made this stuff? That's true. Just exist. Right? Like, we all laugh about it, but, like, that, I couldn't do that today. And, like, the tools 25 years ago were were totally different.

I experimented heavily with animated GIFs. When I was a teen, I you know, AOL, remember Instant Messenger? How you have those little animated little, like, they could only be, like, 20 frames or something, a little animated GIF of the little AOL guy doing something. I used to make those and share them on one of those AOL GIF Scott sites that where people could download Node, and they'd be like, I had 1 or somebody jumping off a diving board, and that was like the whole thing, the little AOL logo. I I used to love experimenting with that stuff, but you drew each frame frame by frame, and it was very difficult. So Oh, yeah. It was it was not a lot of fun. Next one is is a classic, and this JS, like, sort of like, if there is a web dev classic tag hall of fame, marquee tag really, really, really just the marquee tag. For those of you don't know, it basically made text go along horizontal line like a marquee. And, man, this is a classic tag. Everybody use this thing. It was not a joke back in the day as people laugh about it now. It was the type of thing that you would see literally everywhere. It was like, attention. There's some stuff here along with the blink blink tag.

Yeah. It was it was pretty cool that you could control it, how fast it went, how big it went.

They removed it from Chrome or something like that. But I'm just looking at an example right now, and it works just fine.

Yeah. So I think I remember some they removed it from the browser, and then somebody, like, reimplemented it entirely in in JavaScript because it was it was such a old feature. And I'm just looking at it on Firefox and on Chrome, and it's so smooth on Chrome. And it's so it's the same, like, jerky, like, 6 frames per second that you get used to get on Marquee. So that's actually kind of interesting. Look up Marquee tag on Chrome and and on Firefox and see how readable it is on Chrome.

Man. I missed the marquee tag. Next 1 is going to be spacer GIFs. Now I didn't oh, you talking about, like, core horizontal or, like, little, look, horizontal rules that were, like, better

styled? Is that what you're talking about here? I'm talking about before we even had CSS, we had just a 1 pixel by 1 pixel GIF that you would it was transparent, and you would just stretch it with the width and height attribute to give yourself the space that you needed.

So Before your dad invented CSS?

Yeah. Before my dad invented CSS. It's a funny story. For those who don't know, Scott thought that my dad invented CSS because the guy who made

CSS is, like, Bert Boss. He's like that. Same last name? It's the same last name. I was I was like the joke that that was my dad. Like, and he believed it for, like, 6 months. I brought it up. Yeah. I legit thought that was your dad. I thought that was your dad. And I was thinking like, oh, yeah. You you got what what is that called? Where you, nepotism? I was like, oh, this is like Wes dev nepotism. Burp Bos bringing his son to be a web dev master.

My dad did not make that'd be awesome if he did. But I Node I don't have any can you imagine,

like, oh, this guy's selling a CSS course because his dad made CSS. Oh my god. That's a that's I mean, yes. That is very funny, and it is very funny that I thought that.

Oh, maybe we should try and get Bert Bos on the podcast.

He's only 56 years old. He's younger than my dad.

We're even talking about spacer gifts.

They were just spaced, and the only reason I think people know about Spacer GIFs, unless you've been a web developer for 20 plus years, is that HTML email has always lagged behind browsers.

So if you wanted a space in an email for the longest time, you had to add a Spacer GIF in there, especially when you did table layout in in emails.

Yeah. HTML emails, man. That is a

Scott my favorite. That's that's another I think we we did a podcast on HTML emails, but, like, maybe we should get somebody on who does emails professionally

now. Like, where is it at right now? What can you do? Yeah. What's the responsive? What's the thing? Like, I I just let Mailchimp do it all for me. So I'm really interested in in what the status of that is. That's a great idea for a guest.

Yeah. So shout us out if you know somebody Yeah.

Who can can come on and and give us like, the people that run what's that ESLint,

email testing There's so many of them. Form.

Email on Sanity is one of them. Super expensive. Litmus Litmus is like the email it's like the browser ESLint, but for email. See, I use Email on Acid, or I used to, which is a crazy name for a company. But they would run your emails

through hundreds of different providers and then tell you where there was issues. Yeah. That's the one I used. Oh, man. I'll have to check that one out. It's been probably 3 or 4 years since I've written a custom

email layout. I did like, I still use the same one I wrote 3 or 4 years ago. Yeah. I I just dived ESLint slightly, and it was just deleting things. I was like, why do I need this? Get rid of it. Get rid of it. You know? Okay. Next step is Angelfire or Geocities, which is the way that you hosted a website for free online. It basically was just like, click a button, sign up for the service, get a website.

It was so cool. I personally used Angelfire. I did not use GeoCities, and I believe that I had a bit of, like, a Angelfire is the ESLint GeoCity sucks kind of attitude for no reason. Like, I I had no reason to say that because I think they're probably very similar. But they offered, like, really neat functionality, like click Node click copy and paste, and you could get the matrix code on your site. Or ladybugs, you want ladybugs crawling on your site? Just copy and paste this JavaScript. Now you got bugs on your site.

Oh, man. I remember that. I remember putting Node on my website, and I like, I think back to them. Like, how did that I think they were Java applets. They might have been Java applets. Yeah, I thought it was JavaScript, but it might have been Java applets. Yeah, I think it was Java applet because I remember it like taking a second. Like, I had also had a clock that ticked and it was like a like a like actual face clock. And I'm I'm thinking about that now. I'm like, well, I actually have that in one of my courses, but

that wasn't easy. Yeah. Then it probably would have been a job offer. Wes just Scott and paste it. Put it in there. These were free, servers to host your stuff on, and it was just so cool and so easy and very like, this is where Webbering's lived. They lived on Angelfire and GeoCities.

Forget creating a an account and spinning up your own server or whatever. That didn't exist. There was there was no cloud. This was the cloud. Next up is Zango and LiveJournal. Did you use either of these? Because I had both of them.

I remember my sister's friends had a Scott everybody had a LiveJournal, and I went with some random like, I had a Geocities website, but I went with free servers, I think, to create, like, a to actually create the website. And then I remember learning HTML, and I hosted it myself and used a Scott t k domain name. It was like a it was like Wes Bos. T k. And I'm really bummed that it was Scott. I don't know where that website Wes. And the Scott t k was never it was just iframed in, so none of them were ever cached. But that was my very first, like, hand coded website.

Man, I would love to find my old Zynga and my old live journal because I'm sure they are so embarrassing.

I'm sure they Yarn super embarrassing. I would like man, I I fear for the kids who have Facebook today and all that stuff because I put probably, like, the most Deno stuff on there all the time. Oh, yeah. Probably very embarrassing, and I wish that kind of stuff existed. I wish I would have, like, found some sort of a log to keep that. But, yeah, I had a live journal and saying that those were those were both very next is above the old, which is this one drives me crazy. Still good because you you occasionally you get the designer who's just coming out of the cave in 2020, and they're like, we got a couple of content above the fold.

It's like, where is the fold anymore? So 600 p x. So the fold, for those who you don't know, is a concept that comes from a newspaper. When you fold the newspaper, there is a fold, and everything on top of the fold is the stuff that people see first. So the concept above the fold came from newspapers, and so they were thinking everything on the site before you scroll is called above the scroll or above the fold. So you gotta shove as much important stuff in there as possible above the fold. If you got one line of text or a button that's peeking below the fold, your users will never know it's there. They're not gonna find it. It's gone. It's lost. Like, Node knows. Then all of a sudden, somebody Bos like, wait a second. Everybody knows to scroll websites. And 2, everybody's fold is different. So, this is the dumbest concept in in Wes whatever. So, yeah, above the fold went the way of the the Deno for most people, hopefully. The above the fold was tough for me because about 10 years ago, people started rallying against the whole idea of the Fold because,

at that time, everybody had you probably, 15, a 17, or a 19 inch monitor.

And a lot of the times, they were all the same resolution, so it didn't even matter at the end of the day. And the fold was generally you would code it to your client's computer because you wanted it to look good on their computer. And you'd have to tell them, like, look, not everybody has the same monitor and we're starting to get these mobile devices as Wes. And you don't have to to really worry about it. Blackberry. Yeah, there were some really good websites and blog posts, and it's above the fold that FYI has a list of all of them, and they're really good resource that you could link people to and be like, Look, don't don't worry Node this. The above the fold thing is not not a thing anymore. Yeah. Mhmm. Totally.

Yep. Yep. Yep. Lastly, this is the last 1 on our list here. This is Node star runner, which I personally was late to home star runner. My my brother was on it. My my friends are on it, and I, like, didn't get it. But then I saw the truck door thing. Node star runner was flash based. Right? It was flash animations, and, you could click on it. You could interact with them.

It was very, very cool.

They were funny. They did it. They had all this stuff, and everybody you knew at Node point was quoting a Trogdor thing and that the, the all of them, the Homestar Runner thing. So some people got very into it. I was never super duper into it, but I was definitely into it.

I had a computer teacher in high school that we would he would play 1 every single class, and we were just saying, like, Bernating all the people.

And, like, I you know what? 20 years later, I still know probably know all the words to that song. 1st, you draw an s, then you draw another

s. Yeah. Like,

I have more different s. It didn't have that much to do with web development.

No. It had a lot to do with Internet culture. And I think Homestar Runner played a huge part in me wanting to make stuff on the Internet because it was one of the first times that you saw, like, oh, like, there's, like, entertainment on the Internet, and it's it's almost like a movie. And it, like, it was super high quality.

So that was that was big in my past. Yeah. Definitely. And me too, because I got a pretty heavy into Flash stuff. So, like, for me, I saw that Flash, and I was like, I gotta learn how to do this. It's animation. It's very cool. And, I was working in Flash, so I I was always in awe of the the technical aspect of it. It definitely made me go crazy, unlike one of our sponsors, which doesn't make me go crazy. It brings me Sanity, and I'm talking about Sanity dot Sanity dot I o is super cool. B y o c.

I was thinking you'd bring your own content to the content manager. But do you wanna talk about Sanity? We usually switch off on the ad, but you just did a big course using Sanity. So you're you're, like, in it. Yeah. I've I've been in it for the last couple of months. So I just actually, I launched it, like, 3 hours ago, my Master Gatsby course.

And in it, we use the Sanity CMS to be our headless CMS. And what that means is that we go into Sanity. We create all of our content types. In our case, it's Slice Masters, which is people content type. We Scott pizzas, we've got toppings, and then pizzas have many toppings.

And then we pull all that data into your front end, and we we do it 2 2 ways, actually. We do it once. We pull it all into, mostly pull it all into Gatsby. But then also Wes want like the data to be real time, which in terms of Gatsby, you have to rebuild the site every single time you want the data to change. So what we did is we just went straight to the Sanity GraphQL API and pulled the data in client side. It was really good, really enjoyable to to work with. I always say it's, like, the perfect mix of, like, easy to get up and running, but, also, like, it's got the it's got what you need for when you're you're 2 years into a project and you need something really custom.

It's not just this very simple CMS. It it gets pretty deep. So check it out, sanity.ioforward/syntax.

You're gonna get double the free usage tier if you check it out there. Thanks so much to Sanity for sponsoring.

Cool. So, well, that is the Node, and, thank you for taking this warp down memory lane with us. I think this was like oh, man. I love this stuff. You could tell I absolutely love this stuff. Now we're getting into a section of stuff that we do love too, which is sick picks. This is the the part where we pick the sickest things that we like, and I am going to come at you with another podcast. I got lots of podcasts. This podcast is for those of you who are interested in learning a little bit about the Rust programming language. Now this podcast is not currently running, but there are a 103 episodes. It's called new Rust Station, and it's been going on for a long time. It's not currently running, but I started at the very beginning, and I thought it was very fantastic. You can breathe breathe through these if you're learning Rust. So if you're the type of person who wants to learn a language like Rust, check out new Rust station. Again, it's not currently active. It's finished. The podcast is complete. But what it is is it's somebody who comes from other programming languages learning Rust and then writing an episode about the basic fundamentals of it as they learn it. So you can, like, really get those wheels turning moments in your in your brain. And and if you're learning along and and thinking about the things that this person's thinking with, I just think it's a fantastic podcast. So new Rust Station is a a great pick if you are looking to learn a new language, something like Rust.

I'm going to, sick pic slash sick review, a chair. So I got this for free full disclosure and it's the Autonomous AI Ergo Chair 2. So it's a desk chair that is extremely comfortable. So you probably know I have both at my cottage in here. I've got, Herman Miller Aeron, and that's, like, in my opinion, probably the best chair you can get. But I kinda hate mine.

Yeah.

Oh. Which one do you have again? I have the Aeron.

I have since my tailbone injury, this the Aeron has been, like, a listen. I like, since the tailbone I fractured my tailbone if you don't know. Since the tailbone injury, I can tell you which seats are very comfortable. Because I sit on 1 seat, and I can tell you instantly if it's if it's good or Scott, and this thing kills my tailbone way more than anything else.

Oh, man. So maybe I should get one of these autonomous ones. Yeah. Well, I'll I'll tell you what I like about it. It is super solid because, like I know. Like, they said, okay. Wes, we're gonna send you a chair. I'm like, alright. Is it gonna be, like, a just like a Staples chair that's, like, super rickety? It's, like, made out of aluminum in most of the places. It's super solid. You could probably throw the roller blade wheels on it if you want it as well. It's nice mesh, has a headrest on it.

Headrest.

The support and everything, super comfy. Really like it. The things I don't like about it is only 2 things.

As one, I'm used to the Aeron having mesh on my butt as well as the back.

And this has a big, big cushion, which you might like, Scott, actually.

Yeah. And I find it's the cushion gets a little hot compared to the actual mesh of the Aeron. The other thing I don't like is the the actual chair Bos Wes everything screws into is plywood, which I don't know if that will will last, like, 20 years or whatever, but I I've never heard of anyone's anyone's actually breaking. And I I asked on Twitter as well. So it's, like, much cheaper, probably a 3rd or 4th of the cost of an Aeron, and it seems to be a, like, a a pretty decent chair. I sat in it for a month or so just to give it the give it all of the the tests and whatnot. I am back to my my Aeron, just because I love it, and it's it's my favorite chair ever. But if you are looking for a decent chair, check it out. It's called the Ergo Chair 2. Cool. Maybe I'll check that out.

Shameless plugs, I am, I got a course on React animation with Framer Motion that just came out, and it is very cool. We talk a lot about gesture based stuff. We're doing draggable drawers, very, like, native feeling things. And, because it's Framer Motion, it's all pretty slick. We talk about abstracting your animations into reusable animation components. So you can just drop in a fade component, and it just hashtag just works. So, check it out at level up tutorials.comforward/pro.

I'm going to shamelessly plug my master slash pro.

I'm going to shamelessly plug my master Gatsby course, which is out. I launched it this morning a couple hours ago. Super stoked. Thank you. It's available at mastergatsby.com.

It's to learn to build and style websites with Gatsby, React. You learn basically, it's like a sort of a tip to tail. What do you say that? What do you say that? What are you saying? Yeah. I think that's the thing. It's like a hog. Like yeah. Yeah. Yeah. Nose to tail. Nose to tail. That's what I want. Yeah. Yeah. Nose to tail. Yeah. Nose to tail That makes more sense. Explanation of building a modern website. So it uses Gatsby, React, GraphQL, headless CMS, which is Sanity, progressive images, Scott CSS, serverless functions. All of that stuff includes all of the CSS because a lot of people are like, Hey, Wes, we want you want it. We want to see how you actually style it too. And a lot of my other courses, they don't include that because it would take forever.

But in this course, I made room for and I made the design like simple enough that we could do it in the course, but not simple enough that it's just really basic. So check it out. Master Gatsby.com.

A lot of people already signed up for it. I'm hearing some I had a bunch of people go through it in the last week or so just to make sure all the rough edges were were edited out and whatnot. So they're really enjoying it. Use coupon code syntax for $10 off. And by the time you hear this, they will still be on the launch price. So combine those together for master savings.

Love it. Love it. Love it. Love it. That's it for today. 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 forget to subscribe in your podcast player or drop a review if you like this show.