Tales from Web Dev Past - Part 2

styled? Is that what you're talking about here? I'm talking about before we even had CSS, Who can can come on and and give us like, the people that run what's that ESLint,

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, in in the class.

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 the webringcool.net,

Yep. Yep. Yep. Lastly, this is the last 1 on our list here. This is Node star runner, which

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

does emails

my sister's friends had a Scott everybody had a LiveJournal, we had just a 1 pixel by 1 pixel

and, you could click on it. You could interact with them.

plus years, is that

nepotism? I was like, oh, this is like Wes dev nepotism. Burp Bos bringing

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 this theme back in the day for Drupal called Omega.

that you would

browsers.

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

and I went with some random like, I had a Geocities website, but I went with 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 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, 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 And then along with that Just fix it. Targeting

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.

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.

Yeah. HTML emails, man. That is a

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

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,

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

So Before your dad invented CSS?

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.

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

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

you would code it to your client's computer as the same thing just because they're both related to old IE.

know about Spacer GIFs, unless you've been a web developer for 20

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,

My dad did not make that'd be awesome if he did. But I Node I don't have any can you imagine, underscore image hover where you would hover over, like, a link, and that link would not be text. It would be like

and it's above the fold that FYI Firefox came out with their own Node tools, and Firebug Wes, and blog posts,

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

at that time, everybody had

Email on Sanity is one of them. Super expensive. Litmus

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

So if you wanted a space What you would do is server generated images, your front end, and we we do it 2 2 ways, actually. We do it once. We pull it all into, 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.

Node this. The above the fold thing is not 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 I think Wes one of Node I don't know if that was it.

a company. But they would run your emails

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.

his son to be a web dev master.

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, Maybe you just put it all over this JS, like, under construction.

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.

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.

really good resource that you could link people to and be like, Look, don't don't worry it was just iframed in, so none of them were ever cached. But that was my very first, like, hand coded website.

you probably,

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, I use this technique

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

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.

Yeah.

Yeah. But we all we all all firebug.

some JavaScript

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

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

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

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 GIF in there, especially when you did table layout in in emails.

people started getting creative with their techniques. Yeah.

and then, eventually,

Unreal that you can make patterns with gradients.

all of the JavaScript needed for having how and somebody showed me the, like, include header dot HTML. And I was blown away progressive images, Scott CSS, serverless functions. All of that stuff includes

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.

into rest. Yeah.

like, inspect element before that.

this has been around for a long time, subtle patterns.com.

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.

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

Steve Schoegar's hero patterns because he gives you the SVG, and you can go and modify the colors of that pattern.

and you just hoped IE professionally 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.

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

Chrome DevTools came out with their own Vercel,

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.

dev tools, Firebug, into your website, and then it would just run.

And then Firebug eventually got integrated into Firefox.

repeating gradients. So if you wanted a background image

give the pixel values of where links were.

was not a thing anymore. Yeah. Mhmm. Totally.

Yes. And that was my, like, my go to. And then,

So if you wanted a circle link, combos of every single like, three No. No. Fixed or contained.

like, just an actual image that you would has a list of all of them, and they're

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

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,

This we talked about this with the transparent 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.

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.

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.

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 We're even talking about spacer gifts.

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.

generated from image, 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 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, that no one would ever make a div higher than 2,000 pixels. Yes.

IE6 didn't have transparent GIFs,

alpha whatever.

the the gradient text. It would also give you the, like, just do it in CSS or maybe Canvas,

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.

and that's it. And it HTML email has always lagged behind free servers,

I'm gonna loop the next 2 in

to do things that were part of CSS 3 and backport them to hits hover states and I guess even I don't even know when we got CSS hover states, but

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 OG dev tools. These were extensions.

from that site because I think they even I think they even taught us how to use that that site in

one in the last Node. It's very similar to that Wes or your your website, and then you would just add a scroll to the content area.

IE 6, 7, 8, 9, which was key when 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

construction Node GIF

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

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

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

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,

on there because it's like that's just like what you did anytime anything was under development whatsoever.

and CSS py

sort of took CSS 3 features border radius, box shadow, linear gradients, Subtle patterns. Yep. Still around. Like, I tweeted it out the other day, and the original creator of it said, like, oh, my baby.

mostly pull it all into Gatsby. But then also Wes want like the data to be real time, 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.

Ergo Chair 2. So it's a desk chair So you probably used it

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.

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 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 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 next is above the old, which is this one drives me crazy. Still good because you you occasionally

to learn to build and style websites with Gatsby, 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.

And in it, we use the Sanity

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 Actually, I'm gonna I'm gonna loop 2 things together, image maps and, like, background gradients. So image maps were, 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 Headrest.

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

and it's the Autonomous position

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.

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

way more than anything else.

Sanity dot I o is

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

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 it entirely in

c.

there's, like, entertainment a bookmarklet

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.

And then we pull all that data into

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.

Head on over to syntax.fm Yeah. That was very good.

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.

super cool. B

I have since my tailbone injury,

React. You learn basically, it's like a sort of a was the place where you would go to get all of your headlines and everything, built it in, like, a Vector. Some sort of vector, and then they don't ship the SVG file. That's why I like,

Shameless plugs, I am,

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, It's still a awesome resource. It's most of them are still let me see. The most of them are still PNGs,

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

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

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,

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

It was very, very cool.

on the Internet, and it's it's almost like a movie. And it, like, it was super high quality.

It's 15, a 17, or a 19 inch monitor.

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

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

we've got toppings, and then pizzas have many toppings.

wanting to make stuff on the Internet because it was one of the first times that you saw, like, oh, like,

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.

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

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 had a computer teacher in high school that we would he would play 1 every single class,

and we were just saying, like, Bernating Yeah. So shout us out if you know somebody you would have to do, like, a 1 pixel wide gradient by, like, 2,000 pixels high, in an email for the longest time, you had to add a Spacer Oh, maybe we should try and get Bert Bos on the podcast.

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

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

all the people.

I'm going to,

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.

a chair. So I got this for free full disclosure

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.

Yeah.

which is Sanity,

s. Yeah. Like,

Homestar Runner played a huge part in me No. It had a lot to do with Internet culture. And I think IE specific

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.

unlike one of our sponsors, which doesn't make me go crazy. It brings me Sanity, and I'm talking about Sanity dot

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.

Be very into that.

I did it, like, once with the serverless hit counter example that I did I have more different s. It didn't have that much to do with web development.

Yeah. Yeah. Because you would like, what would you do now is you probably

classic tag hall of fame, y o 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.

marquee tag I I I remember Wes, like, our designers,

horizontal line like a marquee. And,

and, like, glossy buttons. I I definitely use those. Another design trend was flaming text. So the website flamingtext.com 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.

gradient, glossied out. You got a little light sheen on there. They look like they were ESLint,

because that would be really cool. Oh, yeah.

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

really, really, really just the marquee tag. For those of you don't know, it basically made text

what it would do is it would

where It's almost Scott to be rerecorded.

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

hits a point like hits a URL like

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.

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

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

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.

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,

I experimented heavily with animated GIFs. When I was a teen,

So I think Webbrings need need to have a comeback.

go along

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.

I mean, that was probably in some of those, like, a list of Yarn articles about, like I remember the golden grid,

that there is IE problems. Then another thing is funny that, around the same regard,

Only that's, like, my first experience with understanding

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

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.

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.

Next, we have Sanity maps. Yeah. They were super popular. So if you've had, like, a bunch of buttons or something like that, 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.

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

Shout out to Wes,

that you clicked, and it would overlay

Yes.

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

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

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.

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.

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

buy it now custom button that couldn't be done in CSS.

With 9 sixty, it came with a PDF. I think Yes. That was you you ESLint it out. I thought I made that up,

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.

Yeah. That that was the best when when we could do that. Because in JavaScript I think, to create, like, a to actually create the website. And then I remember learning HTML, and I hosted it myself And what that arbitrary JavaScript would do is it would inject Squid Fingers was the website that had those repeating patterns.

I don't know why.

especially for head,

which is a structured content CMS. And second 1 is Prismic,

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

and sidebars.

Cool. Web dev passed. These are a lot of fun things. This and, in fact, this first one, which is iframes,

You'd have a sidebar navigation 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,

the technique, It's like,

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 Another one would be glossy buttons definitely had their day, and they still do you still see glossy buttons. There's, new skewer, morphisms,

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.

your own stuff in your own site was just so common. It Wes, like,

Wes They were just spaced, and the only reason I think people 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? you would export all of those to individual PNGs. And Jake Archibald made this website called Sprite Cow,

Hey, yo. I'm doing good. Just just hanging out, trying to record my next course. I'm rerecording 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

And I'm like, I don't want to Obviously, it's going to be hooks ESLint classes first, but I also need to

Beautiful. So today, we are sponsored by 2 awesome companies. First 1 is Sanity,

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

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.

The good news for me is that, like, 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.

With me, as always, is mister Scott Tolinski. How are you doing today, Scott? 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.

tech that was so hot schmorky.com,

keep a lot of that class stuff in. Not a lot of it, but enough that you can teach people He's only 56 years old. He's younger than my dad.

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.

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.

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.

when you had Dreamweaver,

because Google wasn't around. So there wasn't this algorithm, and everybody relied on keywords I would love to find my old Zynga and my old live journal because I'm sure they are so embarrassing.

You would use I think it was ImageReady. Was that what it was? and they have a hilarious before then, like, a lot of people didn't even have, like, image editing software or No. Batch workflow. You got 50, 60 images.

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.

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.

But you know what? People didn't think about at the time. Nobody thought of and nobody needed to think about was SEO

you'd have this that basically the way that it works is you log in,

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 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 If you just go to my YouTube channel, I did. I found a website that was still headless CMS, 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 it was transparent, and you would just stretch it with the width and height attribute to give yourself the space that you needed.

Scott and me against each other as team view versus team react.

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, I really like that. And,

It's a headless CMS Oh, god. The first one is the Zoom property,

Okay. Let's talk about WebRings. So WebRings,

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.

Prismic,

Node.

You know what else is unreal, Scott? Oh, We'll have to update that.

gonna wanna go to this websiteforward/syntax,

You got a good transition? Okay. Well, we're okay. We're talking about geometric patterns, and the sponsor is

there there Wes such a good transition.

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

that explains it. It gives you a bunch of starters, and then it also Chrome, and it's so smooth on Chrome. And it's 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 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

This point, maybe I should be team Svelte.

sort of pits

Ioforward/you're Yep. Firebug we had no console log, and we had no,

you know.

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

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, used this, like, weird,

like, absolutely Wes. I love this technique.

and then every single page that you had didn't include a header or sidebar. It just included the actual content 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, content of the content iframe, which is funny because it was, like, the original no reload.

that was an iframe or a top that was an iframe, and it was your navigation or your Wes ring or something like that,

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

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.

from Peace. Peace.

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

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

Yeah. So I think I remember some they removed it from the browser, and then somebody, like, reimplemented

because it was it was such a old feature. And I'm just looking at it on Firefox and on

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

just fine.

They removed it which drives me crazy because clearly whoever made this pattern and IE 6 in CSS.

You could call them extensions. They were sort of weird because

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

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

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

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, and their menu was responsive.

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 What was that site that had all of the animated GIFs? There was 1 site that had 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

high res displays 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