Guten talk.

CSS cough.

All right, I I learned that in the taxi ride this morning, so that's all I know.

But welcome, everybody from lunch.

Who's still coming back from lunch.

This talk is called Lets Web Dev like it's 1999.

So actually, have ah question for everyone here.

Um, can you raise your hand?

If you were doing Web development back in 1999?

Raise your hand if you're doing it back then.

Okay?

All right.

A small handful, actually.

Okay, so it's good.

So, hoping to share a little bit about my development story and kind of walk us down memory lane, those of us who were doing it back then.

But for most of you here, I guess it'll be, you know, a history lesson for all of you about what we had to do back then.

So kind of sit back and take it in.

And hopefully we'll learn some new things along the way as well.

And we can appreciate kind of where we are based upon where we've come from.

So the slides that I have for the talk they're available online.

So I have a link at the bottom of my slides there, you could follow.

Or if you go to my Twitter profile at Ben EVP, I've tweeted out a link to the slides as well.

Okay, so now if I could get everyone to stand up, I'm going to get everyone to stand up.

Okay, so we just had lunch, and it's going to start digesting, and you're gonna feel this urge to fall asleep during my talk, okay?

And I don't want you to do that.

Okay?

So what we're gonna do together is we're going to do 10 squats.

Yeah, We're gonna do 10 squats all together in unison.

Okay?

And I want you to count it out with me.

And if you don't want to, or if you can't, you don't have to.

You can just do your arms, but kind of join along with me.

OK, so here we go.

Ready?

One?

Yeah.

Thio Three looking great for five.

Halfway there.

Six.

Keep going.

Seven year.

You're feeling it now.

89 and 10.

Wonderful job, everyone.

Great job.

Great.

Oh, right.

So just a little bit about myself.

Like I said, my name has been a legba.

Do I'm a Christian, a husband and a father.

This is a picture of my family.

We live in the San Francisco Bay area.

That's my wife, Rashida.

We've been married for almost nine years.

Now we have three kids.

Oh, yeah.

You can give her a clap.

Yep.

I'll let her know.

I let her know.

Also, we have three kids.

My oldest daughter sees five going on 5.5.

Simone, she's at the bottom there.

And then our middle daughter.

She's 2.5 Avery and then our youngest son.

He is 4.5 months old, so he was just born in January.

So I'm a principal front and engineer at EVENTBRITE, and I work on a newly developed team called Our Data and Recommendations.

Teamwork kind of focused on providing insights to event craters like the organizer's that created this conference, given them insights to help them be even more successful, sell more tickets and things like that.

I'm also a huge basketball, an MBA fan.

Yes, n ba so that I'm missing the n b A finals that just started yesterday, last night.

So I know who won and everything like that.

I'm gonna miss on Sunday, But I think this is Yeah, this was a better idea to come here and share with you all.

So I'm not sad or anything like that.

I'm happy to be here, so I'll let you know.

But I don't want to talk about me now.

I want to talk about me.

20 years ago, okay?

And it started off.

I learned my first programming language basic in the summer of 1998 when I was going into high school.

And I use basic the programming language to start programming or building APS for my tea I 83 calculator.

When I was in high school for my I started building math programs mainly, and I would create programs.

Thio What?

I said, I I checked my homework and I checked the answers to my test with the acts that I would build.

So I will build ah, slope calculator or whatever.

I was doing algebra geometry.

Just plug in the numbers and it would give me the answer and I would verify what I did.

So I figured if I was able to build the app, it wasn't cheating.

At least that's what I told myself.

So then I wanted to find a way to teach others how they could build their APS program as well, because people were asking me how they could do that.

So naturally, I created a website.

Uh, and I had to go to the Wayback machine actually to find it.

Um, it isn't.

It is very beautiful, as you can see here.

Totally a designer.

It was called Basic Guru online because apparently I was a guru at the age of 14 or 15 or whatever, and it's hosted on Geo Cities for any of you all from back then.

Geo cities like the service.

There was also Angel, Fire and Tripod.

But like Geo cities, it was like the main one.

I'm talking like early 2000.

So it was a full Web application, but basic guru online and I updated it basically, by pushing static files static html CSS files like directly to their servers with FTP, just like from my computer to their servers and, um and they handled all the back in and such So looking at the top, I definitely made the logo and, um, Microsoft paint using ah, clip art from Power point and I, I used comic sans because comic sans, like, just come out that time and it was super duper popular.

Then everything was in comic sans.

And then, uh, in the middle there I had my trusty hit counter that everyone had on their sites back then as well.

Apparently it was broken now but had, you know, tens of thousands of hits since August 2 2000 and then on the right.

For some reason, I thought it was a good idea to show the current date for some reason that that was a good idea.

But it still works like 20 years later.

Like this is the reason why Java script is backwards compatible so that someone 20 years later, their website could still work, which is awesome.

And then at the bottom of the middle of all this text that you have to read, I mentioned that a Well, a well browser is the preferred browser to view the site.

But it should be okay.

And in an explorer and Netscape Navigator, Okay, this is how old it was.

Best viewed an 800 by 600 resolution.

So then further on, uh, on the right again.

I have this Internet poll about connection speed, Internet connection, speed.

I wish I had the results of what they were, but, you know, dial up was a thing back then.

And then at the bottom was this bottom frame.

And it was this fixed height bottom, uh, footer, I guess so.

The main window with scroll.

And then it would just be fixed at the bottom on.

I'll talk a little bit more about how that all worked.

So but surprisingly, in all this, I never used a scrolling Marquis or a blink tag or anything like that.

I'm pretty impressed with my younger self.

So just for fun, this is what yahoo looked like at the time.

And if you look, if you could look at the very bottom it says powered by compact, which was funny.

And then this is also amazon dot com a cz Well, and if you look at the bottom, it says Microsoft, X p is now shipping.

Yes.

Okay, so but before CSS three and before flex box, we needed ways.

Toe toe, lay out our pages.

Okay.

And many times we would have some kind of navigation that we wanted fixed.

Either it's a fixed header at the top or you have your left knave.

Or in my case, I thought it was a good to have Ah, bottom now fixed at the bottom.

We needed ways to be able to build that.

Now you may be thinking that I'm talking about tables, right table, Best layout.

But no, I'm talking about something that comes even before table based layouts.

And I'm talking about frame set.

Yeah, all these old people like Whoa!

Frame said, I remember frame sets.

Yes, OK, so for those of you, I'll did it to what frame sets are in a little bit.

But, um, take a look at this HTML code that I have here like it's in all caps.

Like back then, we decided we wanted to scream every time you're writing our code, right?

And we had attributes like margin height and frame border like we're not even quoting.

Those were just putting the numbers right after the equal sign and like, take a look at the frame tags like they're not even self closing like, I don't know how the browser figured that out like that's amazing.

The Web was just crazy back then, but so this is the layout that we're actually building right now.

It's kind of this contrived example that I want to show.

So once again we have a frame at the top and that's fixed.

And then we have three frames beneath it, and the one on the left is, uh is framed, too.

And that's fixed.

The one on the right is framed for that's fixed and then in the middle frame.

Three.

Just has.

It could be variable with depending on the size of your window.

It's okay, Let's go back to the coat now.

So starting off, we have this frame okay and frames actually pointed to specific HTML pages like you would actually have ah html document called header dot html or knave dot html, et cetera, et cetera.

And then the frame set itself allows you to align things either by rose or by columns, and they could even be nested so you can have a frame set inside of a frame set and take a look at this Asterix.

You know, syntax here, which basically says that the column in this case will take up the remainder of the space which is actually pretty fancy for 20 years ago, right?

That it could just be fluid that way.

And, of course, there's visual styling that's mixed up in the markup, Um, as well.

So frames by default had borders around them so you could add frame bordered zero to turn off the frames that way.

But if you left on the borders, the border, the borders could be dragged and resized.

So you could turn off that attribute with no resize attributes there to prevent re sizing.

And then last but not least, we have this this name attributes.

They're like, What exactly is the name attributes for?

It's pointing to content again with no quotes.

It's pointed at the content, So let me explain how that works.

So in addition to, you know, wanting this grid like Leo, we also didn't want to refresh the entire page every time we navigated around right?

So we knew the header was going to stay fixed.

We knew that now, when the left was going to stay fixed so inside of the knave, we were able to say when I click on something that the content would actually change.

So we're all we're probably all used to saying, you know, target equals underscore Blank, open up a new window like the only time we ever use the target attributes.

Well, there's actually other reasons to use the target attributes.

There were other reasons to use the target attributes, and that was the target other frames in order to update their content.

So in this case, when you click on the link, the main content would update with whatever link we had.

And also, for some reason, the allies weren't closed in either.

Maybe that's something we did or something I did, I don't know, but ah, ally tags were just open.

And, um, by the way frame set was deprecate id and html five.

So it's not something we can use any more, but all the browser still seem toe support it.

So I guess you could go off in and go old school now, But, um, if you've been able, if you've been keeping up with everything going on in CSS land, right, what I just described sounds very similar to see S s cred, which Rachel showed us earlier, and we could basically accomplish the same thing with frame sets.

as we can with CSS grid with this coat here.

So I'm not gonna go through the code.

That's not really the purpose of this, but, you know, notice how the main tag is actually above the knave tag.

So that's for S E o purposes, of course, so that the main content, which is more important, can show up first.

But then the grid layout allows us to put things wherever we want, whether it's small screen, large screen so that he could display the way that we like it.

Okay, But you know what?

CSS Grid.

It's way, way, way too modern for us.

So let's go.

Let's go back two decades again.

Okay, so let's say we have this schedule, right?

That's the schedule for the CSS cont.

U um 2019 schedule today and like all we want to do is just indent the name of the speaker 40 pixels in from the left, so naturally well, we would use some CSS selector like margin left 40 pixels or patting left 40 pixels or whatever the case may be.

We have so much at CSS at our disposal to be able to make it happen so it's simple enough, right?

Or maybe would use bootstrap grid system and we would burn a left column or something sophisticated like that, but we would leverage CSS.