alright gutentag CSS cough alright 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 let's webdev like it's 1999 so
I actually have a question for everyone
here 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 that's good so I'm 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 I'll kind of sit back and take
it in and hopefully I will 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 been MVP I've tweeted out a
link to the slides as well okay so now
if I can get everyone to stand up I want
to get everyone to stand up okay so we
just had lunch and it's gonna 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
gonna 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 okay
so here we go ready 1 yeah
three looking great for five halfway
there six keep going seven yeah you're
feeling it now
eight nine and ten wonderful job
everyone a great job great job
[Applause]
all right so just a little bit about
myself like I said my name is Ben a leg
Badu 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'll let her know
awesome we have three kids
my oldest daughter she's five going on
five and a half Simone she's at the
bottom there and then our middle
daughter she's two and a half
Avery and then our youngest son he is
four and a half months old so he was
just born in January so I'm a principal
front-end engineer at Eventbrite and I
work on a newly developed team called
our data and recommendations team we're
kind of focused on providing insights to
event creators like the organizers that
created this conference giving them
insights to help them be even more
successful sell more tickets and things
like that I'm also a huge basketball and
NBA fan yes NBA so now I'm missing the
NBA 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 also I'm not sad or anything
like that I'm happy to be here I'm gonna
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 apps for my
ti-83 calculator when I was in high
school for my I started building math
programs mainly and I would create
programs to what I said I I checked my
homework and I check the answers to my
tests with my apps that I would build so
I'll build a slope calculator or
whatever I was doing an 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 apps
program as well because people were
asking me how they could do that
so naturally I created a website and I
have to go to the wayback machine
actually to find it it isn't it is very
beautiful as you can see here I'm
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 is
like the service there was also angel
fire and tripod but like geo cities was
like the main one I'm 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 and they handle all the backend and
such so looking at the top I definitely
made the logo in Microsoft Paint
using a clipart from PowerPoint and I
used Comic Sans because Comic Sans so
like just come out that time and it was
super duper popular then everything was
in Comic Sans and then in the middle
there I have my you know trusty hit
counter that everyone had on their sites
back then as well
apparently it was broken now but I 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
though that was a good idea but it still
works like 20 years later like this is
the reason why javascript is backwards
compatible so that's someone 20 years
later their website could still work
which is awesome and then at the bottom
in the middle of all this text that you
have to read I mentioned that a well the
AOL 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
and 800 by 600 resolution so then
further on 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 footer I guess so the main window
would scroll and then it would just be
fixed at the bottom and I'll talk a
little bit more about how that all
worked so but surprisingly and all this
I never used a scrolling marquee 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
can look at the very bottom it says
powered by Compaq which was funny and
then this is also amazon.com as well and
if you look at the bottom it says
Microsoft XP is now shipping yes okay
so but before css3 and before flexbox we
needed ways to layout 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 nav or in my case I
thought it was a good to have a bottom
nav fixed at the bottom
and we needed ways to be able to build
that now you may be thinking that I'm
talking about tables right a table best
layout but no I'm talking about
something that comes even before a table
based layouts and I'm talking about
frame set yeah all these old people like
whoa frames said I remember frame sets
yes okay so for those of you I'll get
into what frame sets are in a little bit
but 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 we were writing our code
right and we had attributes like margin
height and frame border like we're not
even quoting those we're just putting
the numbers right after the equals 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 it is frame - and that's
fixed the one on the right is frame four
that's fixed and then in the middle
frame three just has it can be variable
width depending on the size of your
window it's okay let's go back to the
code now so starting off we have this
frame okay and the frames actually
pointed to specific HTML pages like you
would actually have a HTML document
called header h2 ml or Navi HTML etc etc
and then the frame set itself allows you
to align things either by rows or by
columns and they can even be nested so
you can have a frame set inside of a
frame set and take a look at this
asterisk 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 as
well so frames by default had borders
around them so you could add frame
border 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 the no resize attribute
there to prevent resizing and and then
last but not least we have this
this name attribute they're like what
exactly is the name attribute for it's
pointing to content again with with no
quotes it's pointing to content so let
me explain how that worked so in
addition to you know wanting this
grid-like layout we also didn't want to
refresh the entire page every time we
navigate it around right so we knew the
header was gonna stay fixed we knew the
nav on the left was gonna stay fixed so
inside of the nav we were able to say
when I click on something that the
content would actually change so we're
always all used to saying you know
target equals underscore blank to open
up a new window unless the only time we
ever use the target attribute well
there's actually other reasons to use
the target attribute or lease there
there were other reasons to use the
target attribute 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 then either maybe that's
something we did or something I did I
don't know but Li tags were just open
and by the way frame set was deprecated
in html5 so it's not something we can
use anymore but all the browser still
seem to support it so I guess you could
go off in and go old-school now but 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 CSS grid which Rachel showed
us earlier and we can basically
accomplish the same thing with frame
sets as we can with CSS grid with this
code here so I'm not going to go through
the code that's not really the purpose
of this but you know notice how the the
main tag is actually above the nav tag
so that's for SEO 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 it can
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 to decades
again okay so let's say we have this
schedule right that's the schedule for
the CSS coffee you to 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 we would
use some CSS selector like margin left
40 pixels or padding 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 we would use bootstrap of 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
browsers where your sites gonna be well
you would use a 1x1 gif and also known
as a spacer gif
yes and I say gif not Jeff okay so if
you say jiff too bad but what it was it
was like it was this hundred percent
transparent see-through image okay and
it was teeny in size because it is
actually 1x1 pixels and we used it to
create our pixel perfect spacing and our
pixel perfect layouts before CSS existed
so it could work in the horizontal or
vertical direction you would just take
the
give it a whiff or give it a height or
give it both and you're able to space
things and give things margins and
padding's and separate things however
you wanted and we used them like all
over the place all over the place and
again a responsive design wasn't a thing
at this time so we were just designing
for like one screen width or whatever so
we didn't have to worry about mobile so
we would just use 1x1 pixels everywhere
and for this you know maybe you could
throw a whole bunch of non-breaking
spaces as well which I totally did
number of times as well
but for this specific case you know
spacing with non-breaking spaces
depending on the font 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 2000s
great we have some CSS we can use it
you've got HTML and we have CSS this is
gonna be awesome so what could we do so
no longer did we have to put text or
link or background colors on the body
tag anymore or no longer do we have to
use the font tag for styling everything
like the font tag is like obsolete it's
not deprecated it's just like gone from
the browser's now and I definitely use
the font tag like everywhere I want it
to style something I want to make
something red font tag I wanted to make
something bigger font tag I wanted to
make something have a background font
tag everywhere everywhere everywhere
font tags didn't use spans always font
tags so we do have to 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 for 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 so I could make the default
link color like different and without an
underline 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
add an underline like look how dynamic
that is 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 at the beginning CSS was
only just for taking the styling out of
the markup we didn't have all of the
fancy transitions and flexbox and all
the different properties that we have
now to create you know sophisticated
dynamic layouts all we had was just a
separation of styles so be able to mess
with links was like the coolest thing
that I could do at that time ok 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
JavaScript right and do CSS nsj right
and I'm not trying to get in the middle
of that war on stage for sure 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 rendering or even to know what
classes was actually being applied like
if I wrote a 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 and to see kind of what the bounding
boxes were it was basically like console
dot log of CSS at that time and of
course in order to do this right I'd
have to make the change in my editor
probably notepad 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 up my hair wish
stackoverflow 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 2000s and it completely
changed the game like this was right
around when I started developing like
full-time
having Firebug and I don't know how many
people have heard of it but it was an
extension of Firefox initially before it
became embedded in the browser and it
got me to actually move from Internet
Explorer over to Firefox 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 were able to debug and see
things happen in such real time that
enabled us to do bigger and better
things
so huge Aang and Jason they kind of
showed us all the benefits of dev tools
right earlier today that have even
allowed us to go even further than that
and now Firefox lets you inspect the
grid that we're writing and the Flex box
that's there or a firefox allows us to
inspect the fonts like all of these are
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 to
ensure that we're not shipping broken
code because in the past like I said we
had our desktop computer you made the
changes and then you just FTP that you
just put it
the server right and we basically were
working directly on the server and would
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 vs code that make
writing code so much easier because it
has a tell isense and it can warn you
for typos and selectors all these
extensions that make a coding easier and
we have github which is like table
sticks now like having via github but we
didn't have version control back then or
at least only the big companies had
version control and imagine like two
people trying to work on the same
project FTP and Co just directly onto a
site like it's just madness how we were
able to make all that stuff run and then
there's of course there's gulp right and
I've labeled us to write build scripts
to transform our SAS and to minified
optimize 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 as small as possible because
we didn't have other things like
minifiers to to change our CSS I had a
friend
actually who was working at AOL at the
same time and they weren't allowed to
write any comments and any of their CSS
and any of their JavaScript 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
git commits and they could run tests and
even deploy automatically to production
and we have services like net laugh I
that even allow us to preview our PRS
now even before they're merged so we can
see what this CSS has done we can see
what the JavaScript is done even before
it lands and even before we merge it in
so um quick question actually before I
finish 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 a good a number of
people here 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 now I'm definitely my whole
career and my whole life has been
changed because of that fact right but
it's great that those of you who are
just starting are here 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 impostor
syndrome where they feel like they don't
belong because now the bar for what's
minimally valuable to be a real
developer is higher and higher and
higher you have to know all these
different tools in order to to build
websites and 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 and your
impostor syndrome can actually get even
worse right and 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 learn the way that
they learn right they have to go through
the hardships that they went through
they have to know how the old code
worked before the new code works right
and you know what I just don't believe
that that's the way that it should be
right we should I want to 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 than
you're not subpar there are many
different ways to learn you can start by
building an app and then learn how the
details work like I know many people who
come from boot camps who've only got
learned
taken schooling for three months or six
months we're able to do amazing amazing
work more than people
who
had a traditional degree okay so even if
you just graduated yesterday right you
can 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 twenty 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 thank the organizers of CSS
coffee you for inviting me to come and
speak and putting on such like a
welcoming and inclusive conference like
there's closed 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
to thank them for putting on the
conference we give them a round of
applause thank you so much thank you
thank you and thank you all everyone as
well I hope you enjoy kind of the ride
on this wayback machine
hopefully it gives all of us an
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 our browser just
imagine having to write framesets all
the time and then it'll make you feel a
lot better okay so if you have any
questions for me just feel free to reach
me out on Twitter at Ben nvp and I'm
happy to chat with you thank you very
much
[Applause]
[Music]