Placeholder Image

字幕列表 影片播放

  • All right.

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

  • But what do you do?

  • What do you use when CSS doesn't exist yet?

  • Or at the very least, you're not sure that CSS is going to exist in all the brows is where your sight's gonna be.

  • Well, you would use a one by one gift.

  • No, Also known as a spacer gift.

  • Yes.

  • And I say gift, not Jeff.

  • Okay, so if you say Jeff too bad.

  • Um, but what it was, it was like it was this 100% transparent, see through image, okay?

  • And it was tenian size because it was actually one by one pixels.

  • And we used it to create our pixel perfect spacing on our pixel perfect layouts before CSS existed so it could work in the horizontal or vertical direction.

  • You would just take the image, give it with, or give it a height, or given both and you're able to space things and give things, margins and pad ings and separate things However you wanted and we used them like all over the place all over the place and again.

  • Responsive design wasn't a thing at this time.

  • So we were just designing for, like, one screen with or whatever.

  • So we didn't have to worry about mobile.

  • So you would just use one by one, pixels everywhere.

  • And, um, for this, you know, maybe you could throw a whole bunch of non braking spaces as well, which I totally did a number of times a CZ Well, but for this specific case, you know, spacing without breaking spaces, depending on the front and the font size.

  • So things may not line up exactly how you would want to use them.

  • So spacer gifts were definitely at our disposal.

  • Okay?

  • And then CSS became a thing, which was great.

  • So we're talking early two thousands.

  • Great.

  • We have some CSS.

  • We can use it.

  • You've got html and we have C s s.

  • This is gonna be awesome.

  • So what could we do?

  • So no longer did we have to put text or link or back around colors on the body tag anymore.

  • No longer do we have to use the font tag for styling.

  • Everything like the phone tag is like obsolete It's not deprecate.

  • It is just, like gone from the browsers now.

  • And I definitely use the font tag like everywhere.

  • I wanted to style something.

  • I want to make something red.

  • Font tag.

  • I wanted to make something bigger.

  • Font tag.

  • I wanted to make something.

  • I have a background font.

  • Tak, everywhere, everywhere, everywhere.

  • Font tags Didn't use spans.

  • Always fun tags.

  • So we don't do that anymore.

  • We were still using tables, obviously for layouts, of course.

  • But no longer did we have to have the styling for the table in the markup anymore.

  • We could put it in a separate file because we had CSS.

  • However, you know what?

  • We ended up using CSS the most four.

  • Or at least what?

  • I ended up using CSS the most for in the beginning.

  • It was to screw with links, okay, And the default link styling s so I could make the default link color like, different and without an underlying like what?

  • And like visited links.

  • Of course, we're different.

  • They're always purple for some reason.

  • So I could make them the same color now and undo that.

  • And the best part was is that when I hovered over the link.

  • I could change the color and then added, Underline like, Look how dynamic that ISS like you guys are looking at me now like, what's the big deal?

  • But, man, 20 years ago, being able to do that like being able to add that dynamism was amazing.

  • Because in the beginning CSS was only just for taking the styling out of the markup.

  • We didn't have all of the fancy transitions and flex box and all the different properties that we have now to create, you know, sophisticated, dynamic layouts.

  • All we had was just a separation of style.

  • So be able to mess with links was like the coolest thing that I could do at that time.

  • Okay, so then moving on, there's this.

  • There's this camp of people, right?

  • Who believe that CSS is so easy.

  • Right, so, so easy.

  • Then there's this other camp over here that believes that CSS is, like so hard that we should just move all of our styling into Java script, right?

  • And do si assess and Js right?

  • And I'm not trying to get in the middle of that war, uh, onstage for sure.

  • Uh, but 20 years ago, debugging styling was actually a pain.

  • It was really difficult.

  • And because there was no easy way to know what the browser was a rendering or even to know what classes was actually being applied like about Rhoda CSS class.

  • Is it actually targeting this Dom element or a specificity?

  • Rules colliding or what's going on?

  • And it was compounding, compounded by the fact that the sizing of elements the layout of elements, the Z index issues like I didn't know what was going on so would always throw on dummy colors or add dummy border colors just to see what was going on in the markup and to see kind of what the bounding boxes were.

  • It was basically like consul dot log of CSS at that time.

  • And, of course, in order to do this right, I have to make the change and my editor probably no pad.

  • Make the change in my editor, save it, reload the browser, see the results, pull out my hair because I had hair back, then pull out my hair, which stack overflow existed and then change something and try to see again, right.

  • And that was the iterative loop that we had back then And then firebug came along and, like, mid to thousands, and it completely changed the game.

  • Like, um, this was right around when I started developing, like, full time, Um, having fire, but and I don't know how many people have heard of it, but it was an extension of fire.

  • Fox initially before it became embedded in the browser.

  • And it got me to actually move from Internet Explorer over to fire fox.

  • At the time.

  • This was before chrome existed, and I could actually, like, see the CSS in the browser and make changes to it.

  • I could debug the JavaScript in the browser like completely, completely revolutionary.

  • And I think it actually paved the way for all of the amazing kind of Web 2.0, Ajax style applications that came afterwards because we're able to debug and see things happen in such real time that enabled us to do bigger and better things.

  • So huge.

  • Ing and Jason, that kind of showed us, uh, all the benefits of deaf tools right earlier today that have even allowed us to go even further than that.

  • Now Firefox lets you inspect the grid that we're writing and the flex box that's there or Firefox allows us tow inspect the fonts like all of these air Just kind of mind blowing.

  • We didn't have any of those things back then.

  • And these days we have so much tooling Dev tooling to make our lives even easier right toe ensure that we're not shipping broken code.

  • Because in the past, like I said, we had our desktop computer.

  • He made the changes and then you just ftp that you just put it on the server, right?

  • And we were basically or working directly on the server And what always break all sorts of things, like one dangling comma would just completely destroy the site.

  • But now our code goes like on this incredible journey before it even gets to production, right?

  • Like we have editors like V s code that make writing code so much easier because it has a tell a sense it can warn you for typos and selectors, all these extensions that make a coating easier and we have get home, which is like table sticks now, like having um ah, via, uh, good hub.

  • But we didn't have version control back then released on Lee.

  • The big companies had version control and imagine, like two people tryingto work on the same project FTP and coaches directly onto a site like Just Madness.

  • How we were able to make all that stuff run.

  • And then there's, of course, there's gulp right and enable us to write build scripts to transform our sass and two men ified optimized CSS like I remember having to write terse CSS with, like, no spaces all on one line in order to make sure that my CSS was a small as possible because we didn't have other things like modifiers, toe change, R R C S s.

  • I had a friend, actually who was working at a well at the same time, and they weren't allowed to write any comments in any of their CSS and any of their Java script because it would make the CSS even bigger, like nothing.

  • Just write the code.

  • And then we've got Travis.

  • Of course, that gives continuous integration environment so we can automatically kick off, builds with get commits and they run tests and even deploy automatically to production.

  • And we have service is like nettle.

  • If I that even allow us to preview RP ours now, even before their merge so we can see what the CSS has done.

  • We can see what the Java script is done even before it lands and even before we merge it in.

  • So, um, quick question.

  • Actually, before I finished another question, how many people here have been in the industry been developing for two years or less?

  • Can you raise your hand for two years or less?

  • Okay, Yeah, we got to get a number of people here.

  • Um, that's awesome.

  • Like I was.

  • I was very fortunate to be exposed to software development Like when I was 15 years old.

  • Like That's definitely my whole career.

  • My whole life has been changed because of that fact, right?

  • But it's great that those of you who are just starting our here, um and you're here wanting to learn, because early on conferences like these were few and far between, but most new developers they have You know what's called imposter syndrome where they feel like they don't belong, because now the bar for what's minimally viable to be ah reald developer is higher and higher and higher.

  • You have to know all these different tools in orderto build websites.

  • It's easy for folks just getting started to not feel like they belong.

  • And then you can come to a conference like this and hear about even more things that you don't know if your imposter syndrome can actually get even worse, right?

  • And then you have people who've been in the industry for a while now who have successfully made it through the gate, right?

  • They made it through the gate.

  • They know how to do software development.

  • And now they're they're blocking the gate, being gatekeepers, preventing other people from going in Unless they learned the way that they learn.

  • Right.

  • They had to go through the hardships that they went through, where they have to know how the old cold work before the new code works.

  • Right?

  • And, um, you know what?

  • I don't believe that that's the way that it should be, Right.

  • We should, um I would encourage you those who are just getting started that don't stress about it, right?

  • Just learn what you want to learn.

  • Enjoy it like you're not less.

  • Then you're not subpar.

  • There are many different ways to learn you could start by building an app and then learn how the details work.

  • Like I know, many people will come from boot camps.

  • You've only got learned taken schooling for three months or six months were able to do amazing amazing work more than people who have had a traditional degree.

  • Okay, So even if you just graduated yesterday, right, you could be an integral part of this community.

  • I want to encourage you that, like you can be as integral as somebody who's been doing it for 20 years.

  • Plus So to sum it up, you've got this.

  • Okay, so that's it.

  • Just wanted to wrap it up.

  • I wanted to think the organizer's of CSF's coffee you for inviting me to come and speak and putting on such like a welcoming an inclusive conference like there's close captioning here.

  • For those folks who need it, there's childcare for folks who need it like it's amazing.

  • So I want to take time for all of us.

  • Thio.

  • Thank them for putting on the conference.

  • We give him a round of applause.

  • Thank you so much.

  • Thank you.

  • Thank you.

  • And thank you all.

  • Everyone is well.

  • I hope you enjoy the kind of the ride on this way back machine.

  • Um, hopefully gives all of us and appreciation for how far we've come.

  • How bad it was.

  • I guess in the beginning.

  • And the next time you want to complain about not having something in a browser, just imagine having the right frame sense all the time and, you know, make you feel a lot better.

  • Okay, so if you have any questions for me, just feel free to reach me out on Twitter.

  • Been N v p.

  • And I'm happy to chat with you.

  • Thank you very much.

All right.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

讓我們像1999年一樣進行web開發吧!由Ben Ilegbodu | CSSconf EU 2019撰寫。 (Let’s web dev like it’s 1999! by Ben Ilegbodu | CSSconf EU 2019)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字