all right hello world this is cs50 on
twitch my name is Colton Ogden and today
we're joined for the first time by Aaron
Carville
Aaron why don't you uh give us all
introduction yeah so my name is Aaron
I've been working for cs50 for about
three years now
mainly it's sort of working with high
school teachers and our outreach efforts
to sort of bring this curriculum to a
high school class cs50 ap it's called
right yes so it maps to the AP computer
science principles course for high
schoolers nice nice working alongside uh
Doug and Greg and some other folks on
team and today and you've used so I
should say we're talking today going
back to the front end stuff so I
typically am on here we cover stuff from
scratch build applications build games
all kinds of stuff but we've been
transitioning a little bit into web
development and last web dev stream that
I did was a CSS stream and we covered
some of the basics of that but you know
a lot of the time we don't necessarily
write CSS from scratch or at least it
can be kind of painful to do so as we
saw even in the last stream but we're
gonna be taking a look today at a really
cool framework called bootstrap and some
folks in the stream might be familiar
with it you you've used bootstrap before
is it used at all by chance for any of
the C's 58p stuff like the websites we
don't explicitly call it out but we
definitely reference it for teachers who
are a little bit more comfortable in
that area just so that they can provide
that for their students okay cool cool
yeah it's a super cool framework and if
folks have not used a framework yet this
will be their first exposure perhaps to
one I want to just shout out everyone in
the chat who was here in advance we saw
a few people Sabella carriers and the
bill X Akash Tripathi Kaiser twitch
crazy flock whip streak and Nate was a
little bit confused as to why one of his
messages had been blocked he said m'kay
in caps to answer your question I think
its the twitch bot and it caught the
fact that you were using capitalized
letters and I thought you were yelling
or something that's pretty funny
so the twitch bot is very yeah it seems
sensitive to certain rhetoric I guess or
Foe rhetoric anyway Budda nag saying
they're having the buffering issue is
that on twitch or is that on another web
if it's on twitch I know that twitch
doesn't do live encoding to a lower
format so check out our YouTube channel
check out Facebook if you're having
rendering issues
I'll meet Shores plugging the bootstrap
link we have a few messages from him as
well so know these enjoy ready made up
2006 lots of awesome people in the chat
here's some new people and some old
people I'm going to no no Yelling's are
the adamantine yeah no I guess if you
want to yell I'll approve your message
after the fact that our twitch bot will
ban you or not ban you but ban your
message which is kinda hilarious I'm
going to transition my computer over to
or my transition the OBS view over to my
laptop so we can see sort of what we
have going on here so this here if you
go to get bootstrap comm which I'll make
sure kindly plugged in the chat you'll
get the documentation the home page for
the bootstrap framework and bootstrap is
really cool it allows us to do a lot of
awesome stuff without having to
necessarily write it from scratch it's
kind of like a buffet for CSS it's kind
of how I like to think about it we'll
take it we'll take a dive into all the
different components and layout system
and all that sort of fun stuff I want to
apologize to the folks on the stream
here who tried to catch the couple of
the streams earlier this week the crypto
stream and the solitary stream so I was
sick for the solitaire stream and then
the crypto stream we were having
technical difficulties has been a little
bit of a messy week I apologize for that
but we should be going strongly after
today hopefully at least into the near
indefinite future paltin 1987 says hello
Ogden helped Alton thank you so much for
joining us
kai is a twitch will this be on YouTube
afterwards yes it will be on YouTube
afterwards yeah sure actually it might
script the chat though actually so I
just go to youtube.com slash cs50 and
that will take you to our YouTube
channel where you can see not only this
but a lots of other video series we've
done including David's lectures on cs50
at Harvard the cs50 course and I
actually have to let David know that we
are streaming right now so that he pops
into the chat hello streaming now so
maybe we'll see maybe we'll see David J
Malan making it
in the chat here very shortly cool
so bootstrap if you go to get bootstrap
comm you'll be taken to this
nice-looking URL and actually the pieces
that we see here are representative kind
of of the bootstrap aesthetic you know
the typical like navbar on top of the
page like minimalist kind of less is
more
yeah yeah exactly and one of the things
a very common way at least that I know
that a website is using bootstrap is
seeing a navbar kind of like this with
the flat color is a ssin and like the
left on the right side sort of stacked
nav links we'll take a look at actually
how to implement this and we'll include
this in a I think a web page we'll end
up making from scratch a little bit
later once we've covered the basics of
bootstrap just to kind of tie everything
together and I thought that it would be
kind of fun to do a pokemon theme yeah
we might do it an Elfie theme in the
future so Aaron a dog named Alfie who
comes into the stand to the ISO comes
into the store comes into is there is
there an easy link I can I can grab it
on
is it on here do they have Instagram on
on the web browser yeah yes slash Elfi
and the city like that yep okay awesome
so here we go so here's if you wanna
Aaron's a lovely dog Elfie we were
going to make potentially a sort of I
guess a Pokemon info Pokemon we're gonna
make her one of those okay a little bit
yeah she's adorable and there's her as a
puppy she actually where it used to wear
a diaper actually yes thank you but yeah
that's Alfie so shut us to Elfie thanks
987 as the dog emoji in there which is
nice so get bootstrap calm we'll take
you to the website now if you want to
actually use bootstrap and all of its
components and all of its awesome
features and it has both a CSS side and
a JavaScript side we'll be covering the
CSS I today the JavaScript side may be
the future what we do may be a more
dynamic website after we do it like a
JavaScript 96 tutorial I think we've got
2 Charizard there in the chat nice
perfect actually we're gonna need six
Pokemon
Danks 987 I would like to hear about
foundation framework as well if possible
general info
I actually have a news foundation a lot
and I was I was going to say two of the
other frameworks that people might be
interested in that I've seen you might
know more of them
yeah our foundation which is this one
which looks pretty similar this isn't a
very great illustration but you know
kind of looks like this pretty pretty
basic a lot of UI elements kind of this
top navbar as well there's this
framework which is kind of them and
bootstrap have sort of been synonymous
at least the last few years and there's
also one called semantic UI whoops not
semantic you Oh semantic UI which this
one is actually really cool I like this
one a lot I haven't used a lot but the
components and the way that they style
the like this the way that the CSS is
named is really cool like you can see
here there you you have the option
actually run it so it shows you what it
looks like beforehand and then you've
hit run code you'll see that it gives
you this really nice sort of almost like
youtube tag component here there's
little ways to animate stuff nice and
cute like that there's a lot of really
cool components I like semantic UI a lot
and I think it's really readable um so
it might actually do a tutorial a
semantic UI in the future yeah I never
really use it but it looks looks pretty
cool with all the different animations
and stuff yeah
akaash says thanks : to make me fall in
love with game development version of
cars thank you very much for tuning in a
glad that that has inspired you a little
bit but yeah foundation semantic UI
bootstrap these are all CSS frameworks
that meant to sort of get you like for
the name bootstrap bootstrap you up from
nothing into something that looks
somewhat serviceable without too much
effort and if you know the raw CSS you
can kind of customize this your liking
and if you're more like me and you're
not super great at CSS you can sort of
pick and choose the pieces that you want
on a buffet of sorts which is kind of
how I like to think about bootstrap and
these other CSS frameworks especially
when we start looking at all the
different components and I Colton
mentioned it's very customizable so
instead of just linking it as a
bootstrap link in your HTML you could
actually download the entire thing and
sort of customize things there too if
you're even more comfy nice yeah exactly
exactly and a ton of people use
bootstrap all over the place to stack
overflow is just ripe with like if
you're looking to get a specific look or
a specific component to function the way
that you want stack overflow is your
best friend
honestly I use it all the time I'm
thinking to hide you to introduce water
any tips when ice your promising a joke
there but definitely grab some water if
you're thirsty water and sleep says nate
ice oh and we actually have 23 written
in the chat bar on accent it was okay
cool
so get boost rep calm that's the page
you're gonna go to I think I've said
that like four times the hell yeah I
apologize once you actually get there
you can go to hit this download button
right here nice and middle of the page
and they actually let you do a couple of
different ways so a common way that
you'll get these and other resources
like jQuery which is another popular
JavaScript library is you'll rely on
other people in the world hosting the
library on a server somewhere on a CDN
content delivery network and you can
actually embed the CSS and JavaScript
it looks like the dependencies excuse me
here within a there's a little bar
that's kind of screwing up how it looks
because it's so small but there's a
couple of links here so if I copy these
true true true you can do that too I'm
gonna open up vs code and get release
notes here and a styles that CSS index I
think that was from potentially the
other day when or the other CSS stream
I'm gonna open up this bootstrap folder
going to just maximize it going to
create a new file index.html and in here
I'm gonna do the old classic HTML sort
of what's it called starting point with
which FES code gives you but you can
just press down and hit tab it'll do
that and then you can just sort of copy
right in here those links that I got
from the bootstrap page so there's a
link and a script tag so the link is a
stylesheet reference so that's actually
grabbing the CSS and then the script is
actually grabbing bootstraps JavaScript
and there's a couple of dependencies
depending on what widgets you want to
use popper slim and popper which are two
different of the two libraries used for
some of those components within
bootstrap you can actually
conditionally input those depending on
whether your website uses those
components yeah because I know some of
them use popper and most of them don't
actually only a couple of the yeah which
is nice they don't they they tell you to
in the in the documentation really nice
and upfront like oh this is a JavaScript
component gonna grab some water thanks
it says to our power awesome okay cool
so that's how you would get it if you
were using the CDN links notice that
these are referencing URLs that are not
obviously on my local machine like this
is bootstrap cbn.com
both of these are stack bathtub
bootstrap cbn.com so they're hosted
online for us some other
yeah yeah absolutely
and then if you want if you want to
actually host this on your server or on
your local machine you don't want to
fetch the URL every single time you have
the option of doing that by actually
grabbing the download here if I were to
click this download button it'll
download the bootstrap four point three
point one this is the current version
we're on bootstrap for there was
bootstrap 3 which was used for a long
time and then they changed to four they
added flexbox a bunch of other stuff so
there are some changes that are breaking
that you have to be aware of and I
actually found out some of those last
night related to table alignment I also
want to shout out mat Cucuy kaiba Cyril
Nikki oh oh 211 and crumb co6 for the
follows so I were gonna say something oh
yeah I was gonna say that just be sure
that when you're searching stuff in
Stack Overflow that you're referencing
the right version of bootstrap so the
check for here good point yeah cuz you
don't want to you don't want to be
trying to use bootstrap 3 because they
literally added flexbox to everything in
bootstrap 4 and so a lot of bootstrap 3
was based on floats which to this day I
still don't quite understand 100%
perfectly but flexbox is a lot more
flexible of a system than using floats
and clear fixes so I would say probably
for the better that they changed it yeah
I'm not sure if you would get like some
deprecation error I didn't get a
deprecation error when I got well
actually I didn't check the console well
it's the CSS thing so maybe maybe
there's a JavaScript hook but I did get
weird behavior and weird like um sort of
borders and stuff like that so
Luigi Morelli TW for the first time hi
folks finally here so show us - Luigi
Morelli who has been on the Facebook the
C city Facebook for many years now since
I started
actually in 2013 yeah 13 2014 we met him
oh yes we did yeah we did briefly yeah I
remember that it was a like a I think
you had 2 years ago 2 or 3 years ago I
do remember that yeah very brief
exchange unfortunately but it was it was
nice to meet in person finally what is
better using the CDN or a local copy
blue strap a question from Rizwan on
youtube like any question its yeah it's
a very subjective it's nice I think to
shift the burden of network request from
your server to someone else's server I
think in almost all cases so I would say
probably the CDN honestly and the like
most browsers will just cache the CSS
and JavaScript from a web page anyway so
it's not like you're necessarily
shifting a tremendous load onto the CDN
I mean at scale you are yes because
millions of people will be downloading
that file but they won't be downloading
it repeatedly typically they'll be
cashing it in their browser so I would
say probably using the CDN link makes
the most sense to me especially for the
scope of most projects yeah I think
that's just a typical case right yeah
but I don't think ultimately matters
tremendously you will be serving that
CSS and H and JavaScript every time
somebody makes a request to your server
if you're hosting it yourself in
production so just be mindful of that um
KooKoo everyone's chatting at louisia
nice that's awesome all right cool so
when you download the bootstrap folder
you'll see that you get the CSS and the
JavaScript has two separate subfolders
of that zip we're not going to be using
the JavaScript today at all or is gonna
be looking at the CSS and there's
multiple different versions of bootstrap
and in particular the one that we'll be
using is bootstrap either Boosh about
CSS or bootstrap mint CSS bootstrap
reboot and grid I'm not 100% sure what
they do and what those do I haven't
looked at didn't look that up and
advanced approach to this but with
Google we can probably find out
bootstrap grid they always use the grid
system yeah I'm not entirely sure what
the difference is with the bootstrap
grid
try reboot yeah let's look up looks like
a bootstrap reboot and see what that
does
I wonder if that's like a like a retro
bootstrap like it has the float instead
of the oh no it's different reboot a
collection of element specific CSS
changes in a single file kickstart
boostrap provide an elegant consistent
and simple baseline to build upon that's
a very big just like a subset let me see
what do we have here oh you know what I
think that's I think it is I think it's
grid and reboot are like taking out
chunks of bootstrap rather than the
whole framework altogether and if we
looked at the sizes of these 65 for
boost up grid and 192 for bootstrap so
yeah it's that's probably what it is
they're just sub components of the whole
framework oh yeah so maybe you don't
want to like you some of the like pretty
buttons of CSS and you just be able to
have access to those 12 columns that
we'll talk about later in bootstrap
that you probably just want to use grid
instead of the entire CSS and one thing
to be mindful of too if you're hosting
it on your own platform or even just
deferring it to bootstrap CDN is it'll
ship with a bootstrap dot CSS just a
regular dot CSS and the bootstrap top
min dot CSS in this case there's not a
tremendous actual difference in the size
but typically what this will do is
shrink down the code substantially and I
think this applies more to JavaScript if
we were to look at but bootstrap J's
forces bootstrap got Minjae s yeah you
can see mu charge is factors down almost
by almost to a third of its size and
what this does is it effectively just
condenses everything down obscures all
the variables it eliminates all the
white space and just makes it as compact
as possible so that you're serving
fifty-two kilobit kilobytes instead of
132 kilobytes yeah so one of them is
obviously more readable but obviously
the computer doesn't need to be able to
read it the same way that we do so that
minified version is definitely saved
yeah base yeah and a CDN checked with
hash I'm assuming probably I'm not a
hundred percent sure actually I haven't
looked too much into that I know that
for our own CDN we typically hash
everything I would hope that bootstrap
does that as well but I'm not a hundred
percent sure but yeah that's the
difference between min and regular CSS
and Java
and it's important to probably
distribute your min versions in
production and to use the regular
versions if you want to debug dive into
the code manipulate things yourself kind
of overwrite variables and tweak the CSS
but typically you would also do that in
your own separate file so that you're
not changing your bootstrap file you're
kind of layering on top of it adding
your own styles at CSS or main dot CSS
just the nature of CSS right the point
that it's cascading yep the you can sort
of apply changes and overwrite changes
and then have those sort of proliferate
throughout your code base which is
really cool remotes in hello remote can
you cover what SAS mix-ins are from
bootstrap at some point in this James is
adamantine that's a little bit beyond my
scope I have knowledge I think at this
point I was reading about it a little
bit I don't know if you're too familiar
with it I've read the documentation they
do a really good job of sort of covering
all that in the different subsections to
be honest I'm not actually super great
with SAS either I've used SAS a little
bit but I'm not a SAS expert Brian knows
much more about SAS but I'm not sure if
he has the time in the next week or two
to do a stream on that but I can ask him
maybe if we want to do a separate stream
on making a project that uses SAS
mix-ins but that's more on the
development side I think if you were to
actually start developing bootstrap or
customizing it and you have SAS
experience beyond my particular
expertise though but this is bootstrap
once you have it set up we can actually
test it to make sure that we have it
working if I were to create a container
this would be class equals container
whoops
doing everything live so I might threw
up one or two things and I'll say this
is cs50 on fish we'll see if this works
so right now I'm fetching the JavaScript
and the CSS I'm just gonna fetch the CSS
for now and do you actually want to
comment that out really quick just to
show people what it would look like if
we didn't have yeah I'll do that and
also 2m Cloppenburg spoiler there's an
integrity hash here integrity sha so it
looks to me like that is in fact done
David J Malan hey all thanks for tuning
in today so nice he has indeed tuned in
cool so let's do that instead exactly so
I'm going to just do
it's really typed - well the ESCO tries
to be helpful but sometimes it's not
incredibly helpful so this is this class
isn't gonna mean anything actually but
let me go ahead and run this so it's in
my folder here if I run this it's a very
vanilla sort of you know we've seen this
many times already
until we screw up we won't learn
synthetic night I appreciate the support
Oh
borer Jaques you're nice good to see you
Bjorn I think this is is this your first
time being on the stream because if so
welcome thank you for tuning in so if
you've taken cs50 this might look
something similar to like your hello
world page just oh yeah FF yeah yeah no
zero CSS nothing at all not even boot
not even our own custom CSS not even
bootstraps yet but as soon as we take
away the comments and recall those are
how you do HTML comments with a sort of
less than exclamation point - - we have
this class equals container which isn't
terribly useful but h1s have a default
styling so if we were to refresh this we
do indeed see that our page now has this
different font things are kind of
shifted over a little bit because it's
in a container the container hasn't been
center-aligned yet so I believe if I
just do text center like that and
refresh we do indeed see that we have a
centered container in our web page and
this is just one of the nice things
bootstrap gives you for free a very easy
way to Center text and other containers
in your web page bjorn says watch the
recording in the past well thank you
very much for tuning in appreciate
having you with us thanks 987 says cool
awesome so that's how you know that you
have bootstrap installed just as a
sanity check we haven't done anything
terribly fancy yet we will be making a
slightly more complicated web page a
little bit later but before we do that
we're probably gonna cover what a lot of
the components are and explore just how
awesome the actual bootstrap
documentation is because I think the
bootstrap Doc's are really good yeah one
of my favorite parts of bootstrap
actually so reboot
I'm not we're not gonna read a lot of
this stuff kind of in too much detail
we're gonna be looking at kind of the
visual more the visual stuff because
bootstrap Doc's do a really great job of
showing you what everything looks like
and you can look and at a glance
determine
what you might want to include in your
webpage sort of like I said buffet style
take the bits and pieces that are
pertinent to what you're trying to
accomplish and then if you're curious
about how it works if you're curious
about the styles that actual specific
details you can dive into the text and
read all this information like for
example it says all heading elements eg
h1 and P are reset to have their margin
top removed which is cool so things
aren't quite as spaced apart yeah yeah
margin bottoms are there they do have a
bit of margin bottom so everything is
kind of the space at least on the bottom
edge of it and paragraphs have a little
bit of extra margin to make for more
spacing yeah say your if you're curious
about any of those details you can read
about them if not you can sort of look
and say okay this is what h1 h2 h3 s
look like these are what lists look like
you know they've been nice and styled
it's pretty cool yeah these are all just
you know your normal HTML elements that
this is sort of like costume that
bootstrap is putting on it yeah exactly
and I mean this goes kind of to
demonstrate just how important a good
font choice is right and not not to say
that necessarily the bootstrap font is
the grep the greatest fun are the best
font and actually you can get a little
bit fatigued looking at the same blue
chiffon over and over again and you can
kind of recognize bootstrap applications
at a glance but I'll take this any day I
think over raw HTML and you can easily
kind of toss in your own font family
wherever wherever pertinent one day my
love says it would be interesting to
watch a full stack application with
authentication users and such I agree
and actually Nick and I might do a we
were talking about this maybe doing like
draw a stack out of a hat like draw a
random framework out of a hat yeah
please turn on the Drake hotline bling'
so and Schanker 23 says I think we would
get blacklisted for doing that so
otherwise I would be happy to do so
yeah I think we might do something like
that we might do it like a like a random
framework out of a hat like I don't know
have like react and then angular view
whatever other sort of spa frameworks
there are with like foundation semantic
UI bootstrap and then we might do some
like crazy back-end stuff like maybe
even like closure which is a language
I'm wanting to learn but maybe even some
like Flash Jango rails yeah exactly
and then Nick and I just sort of like
struggle and power through all day of
laravel yeah if we want to really hurt
ourselves yeah dad I know David enjoys
there though
Colton I'm hoping I'm pronouncing that
correctly and Schanker 23 thank you very
much for the follows Jango full sex is
jail 97 yeah that'd be pretty cool I
know Bryan knows Django
so actually he'd be well-equipped to do
a django string our original AP cs50
website was in jail okay do you have do
you have jingle experience I do not Ryan
actually built that oh okay
interesting yeah that'd be pretty cool
actually probably to find behavior since
that'd be so cool I like that probably
defined behavior hello from Andy I've
been following David Malin for more than
six to seven years and I love the cs50
online courses all the time helps a lot
in my job awesome Kumar thank you very
much for tuning in and for sticking
around why don't you answer that
question of all I do some audio
troubleshooting really quick so dangling
flaps are sort of both web applications
that sir you're gonna have to bail me
out a little bit
what does the poise the question sorry
Django flask Django and flask so flask
is a micro framework so it's a little
bit smaller and as fewer like built-in
stuff Django has like a built in ORM and
like a bunch of other crazy stuff yeah
to accomplish the same thing you can use
a lot of them with flasks you have to
import more Mike if you want to do
database they have you have to import
like side plugins whereas Django con
comes with all that stuff
Django I believe has admin views sort of
built in which is really cool there's a
lot of there's a lot of stuff that
Django sort of has built in like old
lino like it's like a kitchen sink web
development framework I think that's the
right term and then flask is more like I
want to be as minimal as possible and
just they just get exactly the pieces I
need and like import like the sub
bottles that I need okay so one sort of
gives you a bunch and you know you pick
that versus one having very little and
you having to sort of build on to that
what exactly exactly yeah if you want to
keep reading the chat - I'm gonna take a
yeah we have a Facebook audio issue
apparently both twitch and YouTube cats
on stream I've seen some twitch right
here actually Colton and I were just
talking about that before the stream
started that that would be a cool twitch
bot - right would be combining all the
comments from the various places that we
stream - what are your views on angular
vs. react I've only really had
experience with react
Colton do have any experience of angular
I used it very briefly it's interesting
and that it does a lot of like HTML
attributes to accomplish the stuff that
react does I like the way that react
lets you sort of right in JSX the raw
HTML style personally but I know that
angular has been regaining traction
recently so I'm not entirely sure if
maybe it's changed a lot since the last
iteration I looked at I think I was
looking at I think I did angular 1 and
then they came out with angular 2 and I
did not keep up with the differences
there yeah and that's sort of the
problem with a lot of these frameworks
just once you sort of get accustomed to
writing at one way than they like update
in a bunch of the things that maybe you
like sort of got deprecated or they've
changed the syntax on you and now some
of your stuff is broken
I know Jango recently or not recently
but within the last name you once a few
years released some update that broke
our ap website so we had to go in and
fix that oh yeah yeah
it can be pretty crazy angular 7 isn't
trend they've come out with six versions
since then yeah you've really I did I
did not remember much about about
angular can boost shot be used if I need
to create a webpage from a design file
which was created by designer or
bootstrap
can be applied for some general websites
thanks 987 if you're referring to like
Photoshop like a PSD then it's a pretty
manual process unless somebody's written
a utility to sort of convert that into
CSS which a thing there are some of
those of with varying sophistication I
think in general from what I've read and
Reese
because I haven't done a lot in that
space I think typically designer is HTML
design CSS designers will hand convert
what they see and import you know using
the images and stuff that's in the PSD
but the layouts themselves will be
largely those will be largely hand
imported or hand tweaked so it seems
we're having that seems like one of the
audio channels is I'm not sure if you're
familiar so Ian Sexton and Tara
Cavanaugh ladies and gentlemen sorry we
have a facebook audio channel issue on
the side so we're just trying to debug
it real quick so so it goes in okay so
this we can meet your microphone is it -
it's missing the coz on here you can
actually see it it looks like there's
only one audio channel typically there's
two I think so apologies everybody view
is populist is out of manting yeah view
is definitely gaining traction - we
actually used a view for I think it's
cs50 this last year we used to view as
part of the last it might have been that
or it might have been a different class
it was teaching I'm not too familiar
with it though to be quite honest with
you
Falasca is lower level than Django and
programming language spirit if it helps
yeah that's kind of yeah that's that's
kind of apt they're both fairly abstract
but yeah I see I definitely see what
Babcock is going with that
Django does a lot more for you but it
also has kind of a some people are
saying that it's opinionated and they
yeah it does do it does expect
everything to sort of be in the right
spot actually some people are shutting
out says hi Ian says that McKnight Ian
says hello how about semantics you I
find it far easier and I please and then
boost reps is m4n JHU yeah we actually
touched on that very briefly at the
beginning of the stream I like semantic
UI a lot but I haven't learned it yet
but it is one of the things that I want
to learn and we can probably expect a
stream on it in the near future but
currently I can't speak too much on the
actual use of it there is a slice tool
in Photoshop but the problem is the
slice tool uses HTML tables this was in
Photoshop cs6 version yeah I'm not sure
Indra I do not do much of that at all
actually ReactOS a lot of issues
libraries angular is a lot better
tomorrow mahindra interesting yeah I
need to spend a little bit more time in
that space sort of working on it and
thank you surah J Pandey for they follow
bellick curiousness hello Ian
and in BAM ignite says hello to the
other person that joined Terry Cavanagh
Tara still here where'd she go
alright she bounced okay so yeah that's
problems being sort of sorted out but
yeah we were talking earlier about the I
guess this is this first reboot page and
the reboot page I think is kind of
describing how bootstrap changes the way
things look sort of at large not really
the components but like the spacing the
fonts the way things like lists are
rendered things like tables even actual
tables are companies coming in like just
the elements of bootstrap that doesn't
include like including the classes and
yeah things that are sort of hidden that
you just get for free by importing
bootstrap yeah
react all the way he says m4 njh yeah
we're gonna have a very opinionated chat
here as you start diving into the world
of web development
sergeant Pandey I think I said thank you
for the follow it's a Korean name and I
cannot read that I apologize but thank
you very much for the follow on shoe one
I feel we're in Japanese I have a chance
but in Korea and I have not learned
Korean yet on shoe one thank you very
much for the follow as well a little bit
Spanish yeah I could I could read the
Japanese it couldn't necessarily promise
that I'd know what it says but I could I
could potentially read it oh shoot Babic
nicest I love the media course lectures
on Mondays by Ian and Dan nice in says
hello again alright so we were talking
about earlier so we looked at headings
we looked at list this is what lists
look like now they look a lot nicer than
they did before they have the numbers
look kind of nice the dots look nice
it's not like as blocky as you know
old-school looking as the other lists
were that's true - it looks like a lot
of the things have a little bit of left
margin even
actually notice this actually says this
resets it to marginal f20 container
itself oh you're right you're right
you're right
same here Kush oh one Akash oh one has
been looking at the media courses is it
is it good yeah awesome I appreciate
thanks so much I appreciate it thank you
yeah
sorry we've been doing a lot of
upgrading of our system here and so a
couple of the things are moving in and
out wires are changing
we had a very horrible audio issues last
time because there was a frequency issue
and this is all sort of a result of that
like we've been upgrading because kind
of because of that but yeah we've been
we've been upgrading so we asked some
tonically approaching stabilization
Frederick there were teacher set has
followed so thank you very much and then
cousin Carl Duckworth says thank you
guys for all you do I've been following
cs50 for five years I'm loving the
twitch streams that's awesome thank you
so much for for tuning in for so long
yeah thank you very much okay so here's
what pretext looks like we won't be
really looking at pretext but you know
just mono spaced if you're trying to
like you know have JavaScript or
whatever in your actual literal page and
have it render like source code you can
use a pre tag tables this is what tables
look like they have you know kind of the
same as they look in regular HTML but
we're gonna look at tables in a little
bit you get a lot of really cool styling
for free with the bootstrap tables geeky
Chen draw we your chin drawl thank you
very much for the follow-up that was a
little bit painful I said that a little
bit poorly and this is what forums look
like so clearly these all look a lot
nicer we didn't have a ton of time to
dig into forms in my HTML stream just
because we ran short on time but things
like text fields dropdowns checkboxes
radio buttons those text areas with a
vertical height instead of just
horizontal width yeah and once we get
more into the components we'll see how
this a little bit more pretty because
right now this is still sort of
reminiscent of what it looks like in
HTML yeah yeah no it's definitely still
it needs some work
yeah for sure clearly the the big thing
that I'm noticing is mainly just the
font but cuz I think even this box here
kind of is the same it might be the same
but yeah we do get a much more pleasing
more modern look
two things for free which is really
great
c'mon hey Joe thank you very much to
follow and one Moo did thank you very
much for the follow and Maybelle says
thank you everyone for the answers I did
a bit of flask and thinking about
picking up Jango is it hard so is this
social shake I don't think anything is
super hard I think the hard part is like
kind of just diving in and just learning
things consistently most of the
frameworks I would say at least in my
experience it's pretty easy but it's
really just learning the way they expect
you to put things in the right places
yeah and I would say that you know
documentation for a bunch of these tools
has just gotten so much better in the
past few years that it really isn't that
difficult to you know google something
and find the documentation for it
directly and not even having to go to
stack overflow
yeah these types are so good but let's
not let's not go too crazy yeah but yeah
no I mean it is the documentation is
great like looking at booth chef
documentation we haven't even gotten to
the components yet and we will look at
many of the components but boo strip is
such a tremendous job is such a pivotal
aspect I think of what makes a framework
makes or breaks a framework or a tool is
having this really nice documentation
but yeah back to the question that the
the soul shake asked I don't think it is
going to be hard to learn the stuff
necessarily but I think if you're just
going to potentially get overwhelmed by
how many different things there are so
it's important I think had taken baby
steps and learn the framework a bit by
bit I dove into Jango many years ago to
build a simple application and I
remember there being just lots of
sections to learn if you want an
encompassing view of the framework if
you want a small sort of subset view of
the framework you can certainly learn
separate modules you don't need to
necessarily learn the admin system for
example to build a simple website or a
blog or whatnot unless your blog has an
admin page where you want to edit blogs
or whatever but you know just learn it
piece by piece
build pages like that's where you learn
the most is actually making stuff and
that's why I like us implementing things
from scratch on stream because I think
we get a chance to learn together and to
sort of get feedback from one another
yeah
not really helpful to just see a
finished product sometimes like the
error messages that you get are very
helpful in sort of getting people
started with okay I have this big long
thing how do I even interpret this yeah
exactly
agreed I hate coming necessarily to this
with a pre-baked cake so to speak just
because I feel like the folks watching
might not get that same experience they
might not get the debugging experience I
myself learn better when I can do it
live and we get feedback back and forth
so I think that's just an important part
of it you're gonna have to get your
hands dirty so to speak and actually
make some webpages yeah and it
definitely shows people some good
practices for how to go about solving
these problems that will definitely come
up when you try and build your own yeah
so excellent question I would say
anybody who's wondering and is a little
bit afraid just dive in and just figure
it out as you go you will surprise
yourself with how effective I think you
end up actually getting yeah and one
sort of strategy that I do when I'm
learning a new tool is I just make sure
that I just do a little bit and then get
it to work yeah instead of like trying
to write this big long page and then oh
now I have no idea where the error is
yeah yeah exactly
how can I get better at JavaScript I
know the basics same exact thing just
make more webpages look at tutorials you
can go on there's YouTube videos that
you could surely watch that cover all of
this the syntax do exercises I think
Brian plug project Euler and another
stream which is just a web page that
lets you solve problems but ultimately
finding a problem that you want to solve
in a webpage some sort of dynamism in
the world of JavaScript and excuse me
actually executing it that's how you're
gonna get better at JavaScript learning
bit by bit you know asking questions
working on projects with other people
finishing projects that's ultimately how
the path is it's not a clean path all
the time and it takes a long time but
you will get there whoops d23 says what
I've heard about Django is that it's
opinionated yeah this is the kind of
common theme amongst all the big
frameworks like Django and rails I'd
love to see a C++ best
jaehun hey 7 so you see people suppose
the best practices I am a little out of
touch with C++ I programmed in a lot
many years ago I don't know if I'm
equipped to do a best practices stream
on it but maybe most definitely not but
I have used it because it is popular
when you're sort of coding for hardware
yeah definitely is yeah we might do
something like that or at least a small
stream on it you can assist you in
values the to submit buttons and handle
them appropriately at the server side Oh
Nikhil asked a question okay no but will
happen if we have to submit buttons in a
single form I think when you click one
submit button you'll just trigger the
form right both of the buttons will
probably trigger the form I'm not 100%
sure because it's a question or it's a
thing that I don't usually worry about
but you can program the buttons to have
different JavaScript effects and if you
override default or prevent default with
JavaScript which is what prevents it
from submitting the form you can
actually make those buttons do
client-side behavior or do Ajax requests
to your server and basically accomplish
whatever you want so I would say looking
to prevent default for sort of that
behavior yeah let's do that
and then to m4n Jay whose point there is
a 30 day challenge by West's boss heard
good things about it I'm yet to do it
JavaScript 30 com so yeah check that out
I haven't actually looked at that but
that sounds pretty good how to optimize
Luiz asking how to optimize your
bootstrap work after you've patched up
all the pieces you need into your
project is there a sequence of
operations to follow when you debug
under bootstrap I don't know if there's
a specific sort of paradigm for doing it
versus any other front front-end
development I will say that bootstrap is
a little bit more mobile first based so
there are sort of practices that
bootstrap is sort of idealizing when
people use it which is that it is built
for mobile and then here's how you adapt
it to web yeah that's true and that's
actually one of the core sort of tenets
of bootstrap I think is that it should
work well everything
work well on mobile devices and it's
actually completely built around that
idea so we'll actually explore that in a
little bit can do a stream on linked
lists in C that is my current hang-up in
cs50 on EDX for a data structures like a
stream more generally that could
actually be pretty good well we'll think
about that yeah zero seven one five
eight five thank you for the suggestion
we'll take a look at that kill Co says
hello from India I learned simple
suppose years ago I can't remember
anything like data structures and
everything yeah I'm the same way kill
stealer it's something that any gift to
sort of be deep into that ecosystem to
to really have at the front of your mind
but yeah anyways we're getting a little
off track we still have a website to
make and some widgets to look at so
we're gonna do it we're gonna go ahead
and take a look back at that oh this is
cool so you can actually use the address
element and you get sort of this default
styling for all the pieces of the
address element this being a semantic
HTML element which you didn't have a
tremendous amount of time to look at in
our HTML stream but html5 adds a lot of
really cool flexible HTML elements and
the ability to even make your own
elements with JavaScript so definitely
check that out and we might do a more
advanced HTML CSS stream that covers
that yeah I didn't html5 also add a
video tag because it previously did not
yep yeah it ended a lot of those kinds
of stuff it's really cool
canvases videos now as I think we're in
HTML 4 I mean the workaround before was
just at an iframe and yeah embed the
video the iframe yeah and actually a lot
of services still do that like Facebook
will let you give you videos but they'll
be in iframes
well that's because certain browsers
don't really handle html5 all that well
right yeah
well I think it also for security
purposes - I need photo generic memory
to be like Mike from suits this is kill
so at 1080 I haven't watched suits but I
think that would be pretty helpful in
the context of programming for sure are
just learning anything
Rizwan Oxana thank you very much for the
follow so you can see there's block
quotes there's inline elements here
which would be this thing right here
which has the little question mark on it
which you can hover over summaries
hidden attributes these sorts of things
are used a lot for forms when you want
to submit forms or to have certain
verification than your
site but yeah this is covering I think
how the default styling is in bootstrap
the reboot section typography kind of
goes into that as well and again we
shouldn't spend too much time on it but
you can see this is what H tags look
like they also sew bootstrap does a
weird thing where it has the tag itself
and then also the class oh yes it does
and actually this that's what this
example is right here so that you don't
have to necessarily use the H tags but
you can still get the same size for the
font and this is important I think
actually because Tom ballot or was here
he did a stream with us on accessibility
and in certain using certain devices
it'll expect only one h1 tag for example
it'll look for the h1 tag it'll parse
the page and if it sees the h1 tag it
will bring that to the attention of
maybe somebody who's blind and if there
are multiple h1 tags that can cause
confusion for some people this was
something that I wasn't familiar with
until that stream when he was here
because he's done a lot of in that space
and this lets you get around that idea
of there being multiple h1 s because you
can just apply this h1 style to a P tag
and now that P tag looks just like an h1
but it's not the the screenreader is not
gonna look at that and say oh that's an
h1 tag like you should be focusing your
attention on that so it's not you could
do that sort of without bootstrap right
applying the same styles that you would
have to your h1
to a P tag but that gets a little messy
because you don't want all of your P
tags to look like that so you need to
create another class anyway yeah it's a
nice little utility and you get h1
through h6 which is pretty cool here is
a display heading which is pretty cool
let me see so it takes in an h3 and then
within the h3 you can actually specify
it it's with this hiss here this faded
text you can say you can put a small tag
in there give it the text and muted
attribute which gives it this lighter
color and then you can sort of have this
sub h3 it's pretty cool there's a lot of
things like this this is actually one of
my favorites will actually be using this
that display headings for the really
powerful big heading that you want
bigger than an h1 you just give it
display one display to display 3 display
4 and actually I think display 4 is even
larger than h1 up here yeah it is
different font to notice that has a
thinner font weight we're just going to
cool
so it actually as a stylistic decision
they ended up making it look a little
bit different 2g Demark GD harmik says
hi and heart approach this hello from
India hello heart approach and GD harmik
and also GT harmik thank you very much
for the follow and Rizwan oughta if I
apologize if I missed that follow so
here's some leads which is what this
looks like so just basically a more
accentuated paragraph in line text
elements lots of these sorts of things
you know we could spend all day probably
going through the documentation looking
at all these different things I think we
should probably for the sake of time
maybe start looking at the more
interesting components because that's I
think where we can derive a lot more
modern look to our webpage you know we
can actually make it look as if it's a
web app and then this is really just a
static yeah and to do that we go down
all the way here and also well one thing
we should do because I do want to make a
Pokemon sort of like view like this is
our Pokemon list and we're gonna use a
table for that so there's a table
section here in the documentation and if
we look we can see that bootstrap makes
our tables look really nice so this is
way better looking than any of the
tables you get by default in HTML yeah
if we if we did the same comparison that
we did with the cs50 on twitch HTML just
without and with bootstrap yeah it'd be
game-changing yeah actually be curious
we might we won't have time to even do
that so I think I have it here in my
where did we do it I think it was web
HTML and then it was the index.html I'm
not 100% sure let's open it up and
confirm no no it's not
we don't have it still up and running I
don't think unfortunately if we did I
would convert it and fortunately we
don't probably don't have time where is
the UH in Pokemon Kaiser to H Pokemon
that was referring to Oh like Pokemon
Pokemon Pokemon Pokemon I'm gonna be
self-conscious I like the way excuse me
I like the way you named me I canceled
my trip because of the YouTube live
notification the CCT is teaching BS
awesome well we're teaching BS let's
just make it clear
but yes Thank You Rizwan for tuning in
and you know kind of being here instead
of going on your trip we did shanky 31
12 thank you very much for the phone
like that name by the way we'll
definitely give a try to HTML again in
my vacation seems interesting so skills
to attend a tea if you want a really fun
way to do HTML do with bootstrap because
it all looks really good without you
know looking like it's from like 1985
right now I should I don't even know if
HTML was around nineteen but it's
probably was do you don't make is there
any other technology than bootstrap
about a few other frameworks at the
beginning of this dream so yeah there
are you can either go back to the
beginning of the stream or look up
foundation and semantic UI and there
might be other ones I'm actually not
sure what skeleton is another one
skeleton play use skeleton CSS
responsive CSS boilerplate yeah this
looks like another framework yeah it
looks pretty cool yeah I like that it's
got a little grid system very similar
it's a twelve column just like bootstrap
is so that's pretty cool yeah skeleton
semantic UI foundation bootstrap they're
all kind of the same idea give me some
free CSS that looks good so I don't have
to write it myself what a time to tune
in just talking BSI releases Andre yeah
you know this is a typical day in the
chat you know a typical day on Twitch
there are many I only remember semantic
UI right now react James the bootstrap
setup is that what I add is what I've
tried so far ten times it kills the
whole thing like the motivation managing
JSX coat with react bootstrap a little
stream on that by say city I think can
help the set up yeah that's interesting
I could see that causing issues because
you have to have your classes you have
to have the right classes in your react
components
I'd have to dive into react a little bit
more and then use just that library I
think to really give a thorough
treatment to it and not make a fool of
myself which I arguably do every time I
do these streams anyway but yeah that's
a good idea we'll take a look at that
maybe in the future and then Luigi by
the way Andre Luigi's are the chats
definitely say hi to Luigi he's got that
there he'll bleed you nice to see you in
here can move ahead with the bootstrap
please as Babic yes yes we shouldn't we
should indeed do that so we have tables
here which are very nicely styled
relative to what the HTML tables look
like but what I like is that you can
actually dark-themed them for free
just like just by adding this class
table dark and actually for what we're
gonna build up this webpage anyway so I
might as well just include it so I'm
gonna say table class equals table which
I think you need to do by default in
order for it to actually register and
then I'm gonna go over here Teahen which
is the classic and then T body and we
did this all on the stream last time so
th we'll do how do I want our Pokemon
table to look because we're gonna build
this up into our Pokemon table then
we're gonna link to it from another page
summary tacking columns here yeah so I
guess this will be Nate will do name may
be type sure will do type oh this will
be a great way to use will see this like
badges colored badges and they'll have
an image of course and then health
because I want to do health and I want
to do X P and actually we might be able
to integrate both of those on top of
each other using progress bars and the
bootstrap progress bars are really cool
we'll see those so we'll go ahead and
we'll do that and then we'll say the
first we'll just do one entry for now
and that'll be actually in the chat what
pokemon is gonna be our first pokemon
this is important this is very important
your team at our first pokemon those
chars are they already happy em that's
true that's true we did do that we did
do that when somebody says turn Mandor -
and someone actually asked a question
eight 1980 was maze team L was born okay
Jo I actually thought it was 1976 or
something when ARPANET was pretty early
I thought they had come up with the
first spec for HTML I'm not a hard
percent sure oh material you why Brandon
David was saying is another framework
hey gold are you taking up requests of
JavaScript it's about objects and the
problem is that the code is hard to wrap
my mind around says Ashfaq we're not
doing JavaScript today but we will be
doing a JavaScript one in the near
future so we'll take a look at that is
he missing subclasses for table on
purpose as injury--oh sure that was
hidden comment I'm not a hundred percent
sure what you mean but yes if you're
talking about table dark we haven't
necessarily gotten around for round to
that yet but yes that is naturally where
we're going to be going so TD so I
thought Charmander
so Charmander will be the name we'll
have the type is gonna be fire and we're
actually gonna make this a badge
this is gonna look super cool later but
we'll worry about that when we get to it
the image is we're gonna worry about
that in just a second the health is
going to be we'll say 34 now but we're
actually to make that a progress bar and
the XP is going to be 50 and that is
gonna be a progress bar as well and it
realize actually they should have a
level so we'll make that we'll do that
as well and do that
cool oh wait Oh everything give me a
sign a level or oh yes yes I just wrote
level whoops
level five because that's when you get
it in the game it starts off at level
five
oh yeah yeah so this this table should
by default now look okay right it looks
like this and it looks pretty good
already much better than it would have
looked if we were to take away the CSS
and we can demonstrate this if I were to
take away these right here and just have
my regular table you can see that it
looks pretty terrible we still are
getting the bootstrap fonts and all that
stuff because we're importing bootstrap
and bootstrap is sort of overwriting a
lot of the default styling but if we
merely comment that out just like that
and do that and then refresh the page we
can see it looks pretty crappy it's the
regular times new roman' or whatever
font that is and not very good styling
and spacing and all that stuff now I'm
gonna put bootstrap back in I'm gonna
riad the table and tables are dark and
notice that I'm spacing out both of
those because you can actually assign
multiple classes to the same element
using a space between the classes I
wonder is there a max for how many
classes an element can have I don't know
if there is actually so they can look
this out add a bunch to different
elements but I wonder if at some point
that breaks so this is the famous stack
overflow
I don't think there's a limit a quick
google search yielded this and so if we
go over to here max row number of
supported classes per element 32 or
something well over 2,000
so if you're using 2,000 classes on a
given element shame on you but it looks
like feasibly there is no real I guess
realistic limit there is a technical
limit surely with anything in computer
science or as a technical limit but it
looks like 2,000 classes where well I
mean it says well over 2,000 classes so
that could be any number but it's a lot
yeah and I mean that's just an example
of sort of when you would take into
account how can I better design this
right if at that point that's just
ridiculous to have that long of a yeah
that's like an entire webpage worth of
just classes in the industry so the only
job says Erin Carvalho is such a common
name in Brazil nice even Aaron - that's
interesting
bambina is Erin from Brazil sorry I
missed earlier parts joined late no I'm
actually from Hawaii and I am NOT
resilient at all interesting visit but
is Carvalho not Brazilian Portuguese
Portuguese right and then Portuguese
settled in Brazil
yeah and therefore okay yeah I got it
what if there is a model named Aaron
Carvalho from Brazil nice and that's how
that sort of got oh that makes sense
that would make sense okay what if I'm
storing my database as CSS classes the
tips I would say very I would like to
look at that they'd be very interesting
but also shame on you yeah all right so
let's go ahead and restore what we had
so refresh we have a very beautifully
centered table am I going to shift this
over a little bit so you can see it very
beautifully centered using the column
system in bootstrap so bootstrap view
has a grid system a column system where
there are 12 columns and things sort of
get divided up amongst those 12 columns
and you can use classes to specify how
many columns a given element should take
up if you don't specify it'll just
automatically divide it up for you
basically and the nice thing about
bootstrap is we're talking about you
know it's mobile first you can set
different column sizes depending on how
big the screen is exactly yeah yeah yeah
let's see what this looks like if we
just keep Sri stop resizing it so you
can see that it's actually doing that
it's actually making the columns go from
medium to large to larger depending on
how small we've made
our website gives you a lot of
responsiveness sort of for free yeah up
to a certain point it looks like it kind
of stops up here and then it enforces a
minimum browser size but up until that
point you can see that it you know has
breakpoints these are media query
breakpoints which is done in CSS that
tells the browser tells the Tasya tells
the HTML elements and the CSS to reef
reorient themselves depending on what
the media query returns for the width or
height of the web browser so are you
guys in cs50 ever going to do a lecture
about freelancing that's something that
interests me the most about programming
actually I think Nick would be very well
equipped to do a stream on that because
he does do some freelancing so the only
job we'll ask him to do a little bit of
a mystery moment maybe someone Sayid Oh
Wi-Fi pellicle and Aaron how are you
doing I'm doing fantastic
yeah doing great you know just getting
on this stream for the first time yeah
yeah shouts Aaron for joining us for the
first time on stream hopefully get her
into star in her own stream at some
point I mean I'll be here I'll be I'll
be here to help that'll fit to lead a
stream but here's our table so we have a
dark table the dark-themed table if we
wanted to replace that with table light
we can do that like that and you can see
that a table has a default light theme
it looks a little bit different if I
were to go if I were to write table
bordered here and refresh the page is
that the right maybe just border yeah
did I screw that up yeah I'm I need to
go back to documentation first of all
I'm to go back to table dark and then
table bordered there we go
I think table bordered might have to
come after the theme but you can see it
might be a little bit hard to see but
there's actually a very light sort of
gray yeah great border around every
single element so this is cool this
makes a nice and readable and actually
is it table hover that does it so you
can actually you can actually add the
table hover element or class to a table
row and that will let me hover over that
and give it a nice little light color
which is really cool yeah and if we add
a few more Pokemon which put Pokemon now
you're just gonna poke em on
let's do it let's go ahead and do that
let's actually duplicate this a few
times I'm going to add two more rows
that was terribly centered there let's
do that do that boom and boom so I mean
I think it I think if we're gonna do try
minor we should do squirtle and
Bulbasaur as well right and I think
they're technically out of order I think
goes Bulbasaur squirtle Charmander
I think it's Bulbasaur squirtle tremor
yeah that sounds right um I used to have
like a binder of all of the pokemon
cards oh me too
I'm like you had to order them because
that was the only way that some of those
actually fetch a tremendous price at
this point I think yeah like those shiny
Charizard I think I saw some of them one
of those we have like 200 bucks or
something or even maybe more than that
that's crazy I think that was like every
kid's dream back in then back in my day
back in your day because I think we were
roughly around the same time when
Pokemon was a really famous yeah the
card version of it yeah it was pretty
great and blue in and red and yellow and
sort of the Gameboy stuff yeah yeah
Oscar em thank you very much for the
follow and CK 298 as well and then oscar
m says hello there
so hello good to have you with us today
so now we have a table without any
images and i thought what would be cool
is just to make this look a little bit
nicer there's a webpage called Bulba
pedia which isn't that great
oh this might be the wrong one Bulba
pedia it's not only it's both Peeta calm
so boba pedia leave it looks like it's
trying to yeah located a bubble garden
net so don't go too vocal PDM that looks
like it's a bad website go to bola PDF
babu garden n and then what we're gonna
do is I'm actually going to look up all
of these Pokemon so Charmander for
example if they go all the way down and
so this is a great website by the way in
the vein of good documentation this is a
very well documented Pokemon website all
the way at the very bottom there you can
get sprite images for all of the Pokemon
and all of their games and some of them
are even animated oh they're so cute
yeah aren't they adorable so here I'm
gonna get the one from Pokemon black so
if you click on it here you'll get taken
to the web page and you can just right
click on the image
and do a copy image dress and then what
I can do now back in my webpage I can go
over to Charmander in the image section
I can just put an image in their source
equals and then the link off of mobile
Gardens CDN notice that they themselves
have a CDN where they keep all of their
Pokemon it looks like they're numbered
by their actual place in the Pokedex
number four that doesn't seem right
actually should be one two three
it's stream less it's the Bulbasaur all
the way up to view sort and then
Charmander Charmeleon oh sorry oh right
yeah well okay Bulbasaur Ivysaur
Venusaur so that means squirtle goes
third then yeah oh okay
interesting I don't know testing our
knowledge yeah this really is a test
Pikachu should be there it deserves we
all started from it what is Pokemon says
whoops u23 ooh
nip chick wit but whip chick is ten
years old oh I don't I don't necessarily
blame him for not knowing what pokemon
is unless that was troll is there no
like modern like oh yeah there's a new
stuff yeah because I let's go for swish
yeah yeah yeah even someone go yeah
exactly
let's see if this works so I'm gonna
refresh the page back over here yeah
quota sort of doing what what we're
talking about earlier when you're trying
to learn something new right just
putting something in and testing it yeah
adding a whole bunch of stuff we're kind
of going one step at a time and we can
see that it kind of screwed up our sort
of the centering of our elements though
which I'm not a huge fan of the nice
thing that we can do though is there's a
class called my auto I believe that will
let us fix that if I go over to the
actual cell and I do class equals my or
actually I need to do it on all of these
so if I do that boom boom boom boom boom
class equals my auto and what this does
is it's margin on the y-axis auto
so it'll space everything out
automatically this should work maybe not
it might need D flex on the table so
let's verify that D flex
nope that's not it I did this yesterday
I figured this out because this was a
kind of a pain in terms of actually
getting it to work okay so these there
might have been one missing class I
don't remember and this is kind of where
you have to use Stack Overflow
documentation read back to the docs
because it's infeasible that you're
going to remember every single class
every single thing especially
implementing everything from scratch so
if I do table vertical-align bootstrap
for bootstrap for specifically because
they changed everything it's no longer
it is no longer float aligned is flexbox
everything is flexbox container D flex
so doesn't the app enough right that
wasn't for a table so for a table
everything is kind of different
unless it's D flex on the container
itself which would kind of make sense I
guess the table is inside that but now
that doesn't look like that fixed it and
actually I think all containers are addy
flex might know they're not D flex by
default something is D flat D flex by
default I'm not really 100% sure I did I
do remember that all of these do need my
auto if we want this to look nice and
vertically centered with the images and
the text together there are other ways
to do it too it might have been T body
no oh this is horrible we might we might
skip that part of it and just go with
the this for the sake of time just cuz I
think we might run out of time if we
spend too much time a lot of stuff but
there is a way to do it I had it
yesterday I don't remember it offhand if
anybody knows it in the chat plug it but
and what my does JL 97 is this margin Y
but it only works with in certain
contexts and motto no it needs to be my
or MX M Auto will do both axes which I
think mine might be okay but
that's it yeah they didn't change it in
this sense geez what was it I'm trying
to remember I found it I'm like I really
want to figure that out actually
Oh a vertical line in blue strap table
this is it needs to be push f4 align
middle I did it with with my though a
line little a line modal doesn't
actually work Google oh right yeah it's
in search yeah so table a line table
sell my auto whoops bootstrap
I love beyblade more than Pokemon though
Oh interest hey blade I actually haven't
I haven't dived I haven't looked too
much at beyblade my brother and I
actually used to have beyblades there
those little like tops
they're like motorized tops that would
like spin and they have a little like
blades on up so they hit each other and
collide different ways I remember it was
very like popular when I was a kid like
some of the some of the people in my
class would be into beyblade or whatever
but I fell like it last a year and then
everyone went back to Pokemon and back
to the yu-gi-oh is also really really
popular yeah geez whoa why am i starving
to find what this was this is the this
is the flipside of not coming with pre
baked cakes is you kind of have to
figure out things on the fly sometimes
yeah we can't just say now let's turn to
this other cake that I've made in
advance yeah exactly
oh I think I think it's because these
need to have the class row that's why I
think I screwed that up
oh let's confirm and then these all get
class is equal to call I think as well
maybe
that might be wrong
you just wrote ro again hmm that's wrong
Oh whoopsie Ashby columns live coding
and then these should be my auto and
then also call this might be horrible by
the way this might actually break it
yeah this broke I think Kyle doesn't
need to be there because colonists for
bootstrap columns like the 1 through 12
yeah
damn I'm trying to remember what it was
literally did this yesterday bro bro bro
yeah that's not it
oh but I had the D flex thing up here oh
shoot okay and rare Eddie five says a
line middle yeah
Colton and erection just talking about
oh yeah so if we do that so we can act
we can't actually do that so if I if I
were to do this and do a line middle and
then if I were to come down here so I
did this yesterday this might work if I
screwed something up yesterday when I
was testing out by the way this is a
nice feature that I love about vs code
the ability to have multiple cursors so
now I can do something like that oh I
need to do class equals align the middle
yeah whoops and I knew that yeah yeah
and I think Adam also has something
similar with I believe it's oh that
didn't work okay so okay so in my
testing yesterday I must have had
something screwed up a line middle was
not working but now it seems to be
working so awesome Thank You Indra ready
for that that was a weird I'm not sure
why that wasn't working yesterday when I
tried it cuz I was wondering I was like
people are saying this should be this
easy to do it but it wasn't working and
I was like okay this must be some weird
thing yeah yeah exactly I probably
should start eating eating some moments
anyways now we have a Center Grove I'm
very happy so that's actually that
actually makes me very happy because
yesterday I was trying to do a line
middle as a test and it wasn't working
and I was racking my brain trying to
figure out why and my auto was solving
it and I was like okay so and it was
some other person that wrote written
about it I was like this can't be this
complicated to get vertical alignment in
your columns in bootstrap like this has
to be some weird bug but everything will
look like it was in the right place d
flex is display flex it's shorthand for
that it's a class in bootstrap that
turns a container into a flexbox
container essentially and flexbox is a
css3 fairly recent sort of system for
aligning boxes flexibly hence the name
flex box it allows you to vertically and
horizontally sort of align things in
Nice rows and columns that's pretty nice
system but not everything in bootstrap
is flex enabled by default but you can
allow for it does that feature work in
sublime - right with multiple cursors it
does a balloon I believe that was the
first editor I think I ever used that
had multiple cursors
most editors do that now yeah but I
think yeah and most of them definitely
do now yeah sublime I think was my at
least my first introduction to it and I
was like oh this is such a cool feature
I can't believe I've been living my life
without this yeah I don't think I need
these my autos anymore in here
I think we can get and one of the things
I like about Adam is that if you do
multiple cursors in Adam it'll find
it'll look at the stuff previous to
where your cursor is now and like go to
the next element so if you have a whole
bunch of tables you can like select
multiple cursors right where all of your
tables start yeah that way
ya know it's super great it's super
awesome and I and someone actually asked
me to start using Emmet I think it was
which is the little system for where you
can write basically like if I were to do
L I dot hello times 3 that actually
turns into 3 allies with the class hello
yeah so I started I don't know who it
was I recommended that I start doing
that whoever it was I've started I
started doing it a little bit last night
so thank you very much whoever or
whoever it was that said that or
suggested that twitch says that's why I
love Adam I love that I think that's
what I use
yeah Adams awesome so we were gonna get
we were gonna get squirtle and Bulbasaur
pictures actually cuz we wanted to
complete this table yeah so let's go
ahead and get you it looks like some of
the views are from the battle mode and
pokemon blue and red and yellow yeah the
classics yeah those were those were so
amazing when they first came out I
remember those so vividly but that was
back in the day when the screens weren't
backlit so you had to oh that was
terrible
yeah you need a little clip on light for
it to play your game boy those are the
dark ages literally oh we are so close
just need Bulbasaur now and let's go all
the way down to the bottom of the page
and grab Bulbasaur
yeah but the pokemon black and white
sprites are the best ending for this use
case because they have they're small but
they have the animation and they're just
slap a little image in there like that
and they're Jeff's you said these are
actually animated pings she didn't
realize pings
PNG files could be animated it's a last
night when I was sort of working through
this but yeah turns out
can be animated so it's pretty sick
because the common use case for P&G is
just to have that transparent background
that you see yeah well you don't see
this transfer yeah so this is our table
view of our Pokemon are sort of our
collection and if we wanted we could oh
you know what somebody didn't want
Pikachu we got to do Pikachu as well so
one last one well do Pikachu and then
that will be all we can really see in
the view so let's go ahead and just make
sure all of this looks accurate be good
no that doesn't look that great Pikachu
level 5 that's gonna be electric it's
going to have all the same stats and
then let's go up here you can chew and
then grab you from ours here one might
say I choose yeah I choose you actually
if somebody in the chat chose Pikachu I
forgot who it was their way up yeah yeah
Babic says tal about pings yeah me too
it's cool I honestly like because I
don't really like just that much it's a
weird file format I would much rather
use PNG files animated PNG files because
you don't get that weird compression
artifact ting as well but you know yeah
all right so now we have a pretty fully
fledged little polka come on yeah as you
could we could say this is like maybe my
active party because eventually we do
want to have health bars and XP bars so
I think we'll end up actually doing that
and resizing the table as needed but one
of the first things I think we should do
is to start maybe looking at some of the
components actually diving back into
bootstrap now that we've used the table
we've made it look okay dive back into
the bush pep talks look at some
components figure out what we can take
and put into our page here and then come
back here and finish it up the only
problem with animated pngs is a lot of
programs that render images don't
support it like this court oh shoot that
sucks yeah disco I love discord I'm
surprised they don't support it though
to be honest cause discord is such a
nice app does it support ships even
though support ships I think yeah
fascinating flexbox comes built in with
react.js I use it while messing with
reactive blue strapped into okay
interesting
yeah how about using IntelliJ IDEA
products like webstorm for this actually
being a native mobile app developer say
you know ideas run in blood just asking
yeah I don't know I'm personally not a
fan of using web IDs but I could see
them being pretty useful I have to I
have to mess with it a little bit more i
downloaded webstorm one time a long time
ago and tinker with it but didn't really
spend a lot of time on it yeah I mean my
biggest sort of qualms with with IDE is
just that they're so heavy they're a lot
of clunkiness that you don't necessarily
always need yeah I always found myself
gravitating towards steel high
development even when I was you doing
Java stuff and using like NetBeans or
IntelliJ I would end up actually going I
would figure out what it was automating
and then go into like vs code or Adam or
whatever and then just use that with my
command prompt and only do all the stuff
at the command line and I ended up
finding that it was a more pleasurable
environment for me I think I've grown
too used to that as opposed to an IDE
but I used I keys for years so I totally
understand if somebody wants to use an
IDE and they're great for like debugging
and code completion and profiling and
all those sorts of things so depends on
your use case
what's Colton's discord ID I'm whip
streak 23 3701 I don't remember its
koltunov Skippy but I forget the number
okay like tag numbers right yeah I can
tell you right now I can tell you right
now everybody feel free to add me on
discord what typically use your discord
for I Chatham play games right now I'm
playing a little bit of Minecraft
hmmm let me see my discord handle is
koltunov Skippy nine five one seven so
let me up know what your tools do jail
97 agreed agreed
ships have been animated forever pings
are lossless JPEG is a lossy correct
this court plays it the first time it's
loaded but then the second time it only
displays the first frame I think it's
something with the way they store them
or send them to the client there's some
services that do that with chips to an
extent
they'll play it once and then just show
you the first frame so I'm not sure
exactly how years love yeah I guess
that's up to the renderer embedded
within the application it'll have some
buggy code or whatever so the chat the
chat just disappeared because we bound C
to the to the chat macro but that's okay
is that even how you spell it is yeah
number nine five one seven yeah back to
the main screen so here we go let's call
hit what yeah
all is good so yeah feel free if you
want to play something or whatever I
don't I don't play a lot of different
things at the moment but you know we do
stuff okay cool
so back to bootstrap we covered tables
we looked at table dark which we looked
at actually table you can actually
specify the table header make it a
little bit different if it wanted to
which is the difference I just got a
friend request so that's awesome
striped rows oh that was another thing I
wanted to do you can actually say title
table striped so if I were to go over
here and so you can see why mm classes
maybe maybe this maybe it is feasible so
now I did table striped up got another
friend request so here we go we have the
not only the tables are striped now to
make them a little bit easier to read
but I can hover over them and actually
still get a different color even over
the striped rows which is cool so it
looks very great I mean to some people
that might sort of be a design decision
right because maybe it is a little
confusing when you're hovering over a
dark road it's next to light row so it's
harder to see agreed hundred-percent it
is definitely a design decision an
aesthetic decision you might think that
looks better without stripes I might
think that looks better with stripes and
that's you know somebody's got to make
that decision at some point it's not
necessarily an objectively good thing
yeah but I personally like I don't know
how you feel about it but I like it with
the light theme not sold on dark well
it's objectively good with the dark
theme so you're gonna Adams kidding
actually we should see what it looks
like with the light theme table light
and the nice thing is I get all that
other functionality all I have to do is
just change the light to dark back and
forth and they're both interchangeable
they both look
right off the gate right so now we have
the dark we have the striped look and
the hover effects but the everything is
light all together but I honestly like
the dark thing I am I honestly am run it
in a run in dark mode colons are joined
the cs50 discord server actually that's
a good point it probably should do that
we do and I forgot to join it a plan to
do it a long time ago niche never did
yeah so a table striped which is pretty
cool it even shows you what it looks
like with the dark mode which is pretty
cool bordered you can add which we did
huh verbal Rose which we did table hover
pretty cool clear this is all still in
my memory from last night as I was
putting this together you can compress
the table which is interesting um
although this won't work terribly well
with the images that we've imported yeah
but if you're looking for a very simple
convinced table without all the Mart
with all the padding basically then you
can definitely do that I've gotten so
many friend requests over here on the
screen yes I agree I okay my atom is in
dark mode in my cs50 ID is in dark mode
I agree yeah nobody wants to nobody
wants to code in a light theme editor I
mean come on but we can quit we can clip
this yes let's clip that I'm just saying
that preferably some webpages look
better we can objectively made me say
come to the dark side yeah cool okay so
we have our table right the table
section we haven't even gotten to the
component section this is just like kind
of one of the things you get with import
in the library without even using you
know the new stuff that you get but you
can actually get a lot of new stuff and
if we look here if you click on the
components section of the documentation
we go way down here and we cover a whole
bunch of different cool components that
you get for free that you just get to
add into your into your page now you
have to use HTML tags with specific
style specific classes to achieve this
you don't get like new tags that allow
you to do this but it effectively
accomplishes the same thing and some of
them require certain like nesting
patterns yes
like we saw a table like you have
different classes are associated with
like rows or data items in the table so
you have to be careful on where you can
apply a certain class yeah yeah 100
percent down with the white mode and up
with the dark I'm clearly getting
overruled here yeah that's okay okay so
well we'll just go kind of go through
some of these at a high level and then
we'll import a few of these modules into
our table just to demonstrate how they
might be used in this context but we can
see here these are alerts so these are
pretty cool
alerts our serves like flash messages
you know you can imagine you have a
website where the user law doesn't log
in correctly or they maybe they enter
wrong information or correct information
and they should be given a flash message
like this with an alert that just has a
red background or a yellow background or
a green background to signify you know
success failure warning etc yeah and if
you use the cs50 IDE it sort of mimics
that message at the top if you need to
update says hey they make sure you type
in update 50 in the terminal because
your workspace is out of date yeah
exactly we can see here that we have all
these divs and just by giving it the
class alert it becomes an alert and then
the specific color you can say alert
light dark info warning danger and it
maps to all of these in order right so
it's this HTML here is the exact same
thing as this just written out for you
so you can pick and choose and this is
the sort of you know buffet pick and
choose the items you want this is the
way bootstrap has laid out their website
so that you can do this sort of thing
now this these alerts I don't think
we'll actually need to use in this
particular example but it's something
that we could use if we wanted to in
links you can actually give links a
specific color and a bold font if
they're in the context of an alert which
is pretty handy if you want an alert to
have maybe a large heading you can give
a class alert heading to a h4 or
something within an alert and that gives
it the same styling as everything else
that is that it gets the grain
colorization along with the paragraph
text and you can also add an H our that
HR also gets the green styling if it's
within an alert class that HR sort of
referring to that line that separates
the two
this horizontal rule as it's called
which allows you to separate things and
there's a lot of stuff you can do with
JavaScript to toggle on and off the
alerts depending on certain criteria if
you want maybe a front-end client-side
validation page you can do that with
JavaScript
now we're not covering JavaScript today
we'll do that in another in another
stream but the nice thing about
bootstrap is it lays all of the
JavaScript and CSS stuff all together
for you seen it's very upfront about
what you need JavaScript for so right
here it's telling us hey if you want to
implement these certain features you're
gonna need the JavaScript yeah it tells
you an able dismissal of an alert via
JavaScript and it literally just gives
you the JavaScript there and to my
knowledge bootstrap actually comes with
jQuery so if you import the JavaScript
from bootstrap you get access to this
dollar sign this dollar sign is
shorthand for the jQuery function which
we'll cover in another stream as well
try me tell you I think plugin for more
cute themes and the editors though
interesting I hope that I've heard that
I am not 100% sure what that is and
somebody wants the high contrast dark
deep ocean as well I I don't do a lot of
exploration of themes I know I used to
be kind of interested in that but yeah I
typically tend to stay stare at a screen
for hours yes I'm a big fan of vs codes
but actually I think this one is the
native one I think I have a different
one in my other installation actually so
I don't actually really like this one
because of the as like too much Brown
text for my liking I forget what the
other color is that I use I'm a huge fan
of mono Kai
yeah Monica is good that's like the
default one for like sublime text which
is pretty good I don't remember what the
vs code was that I had the other one but
anyway unimportant so over to badges and
actually badges are pretty cool badges
allow you and you might have seen this
in certain contexts maybe on an email
client or maybe if you're looking at how
many messages you might have in facebook
or something until you have you the
number of messages on the right for
example of someone's name like this is
where you would see a badge being used
to good effect and clearly it works
resize ibly depending on what heading
it's embedded in because it's actually
embedded within a heading you can see
here use a span which is an inline
element
remember and you give it the class badge
and then you can give it the class badge
secondary and depending on which h1 or
h2 or h3 it's actually embedded inside
of and I don't know if this applies to
that that classes themselves the h 1 h 2
h 2 classes I'm not sure if it'll
actually factor that in they'll be
pretty cool if it did yeah but depending
on which H 1 H 2 H 3 you have it inside
of it'll resize the badge accordingly so
you don't have to worry too much about
that you can see here here's an example
of where you might see it in a
notifications pay and notifications
panel or something yeah that looks like
it's it's a badge within a button yeah
yep in this case it's just embedded
within a button and actually this one
demonstrates that you can have light
badges in addition to dark badges which
are the regular and then default styling
for default a star yeah in this case as
it should be no but here's here this is
a cool thing and actually this is what I
thought would be really cool to have is
the type for the Pokemon yeah you can
have a colored badge of different
varieties and really what they are are
semantic badges so primary secondary
success danger warning but we can use
those in a sort of new different way
right we can say maybe if I want primary
to actually be water and I want warning
to be electric I want danger to be fire
I want success to be grass right so I
can I can do that I can literally I
think copy this for example primary well
make that water if I were to go over
into where squirtles thing is over here
this right here where it just says water
and I do that so now I have badge badge
primary I'm just gonna write water in
there save it
fingers crossed that this works the way
that I wanted to because I didn't
actually test it but it does indeed work
and look at how nice that is it just
works really well there seems to be a
little bit smaller text wise than yeah a
little bit smaller yeah and we actually
might be able to get around that if we
were to for example embed that within an
h3 if I'm getting this correct and it's
to say badge secondary well see if this
works
spam Bank
Barry's gonna change the color oh you
know what you're right you're right
sorry edge primary and so there we go so
we have a nice large little icon to
serve stay oh this is a water pokemon
better than much better than text yeah
much more visually visually pleasing at
least to me I don't agree with that I
appreciate it
you can double click a word to select it
quickly sis Kaiser twitch oh yeah of
course the fonts with differentiate more
clearly are my favorite I'm not entirely
sure what you mean Babic if you could
elaborate on probably just syntax
highlighting and you got a you got a
plus one on Monica yeah Rizwan autop oh
I haven't been keeping up with
subscribers but hum on a song and too
far No thank you very much for the
follows so we have the water badge in
there and that's appropriate because in
Pokemon you get badges from the gyms so
we have our water badge for squirtle for
it so speak not the same meaning at all
I'm gonna go ahead and copy this this h3
which we just arbitrarily search shows
and I'm gonna put this here now that was
the green one was a success awesome okay
so this I see to change to success yeah
one one sort of thing that I have with
bootstrap is as I wish that they would
have just named it by color instead of
cement yeah yeah I think I can agree
with that especially in this context
where we're using them in a very
non-standard way totally make sense to
me
I think sometimes it's just hard to
guess what they like I mean primary and
secondary are just I believe they're
blue and what gray I think gray yeah
but they kind of made an arbitrary
choice to say hey success is gonna be
green
yeah which I think usually semantically
is but when you're using it for
something like this where you're not
you're not in the domain of success
failure warning you're in the domain of
types you want to use it for a
completely different use case it's
different but look at how nice that
looks right we made a simple change
right just name it with colors as bees
Chris materialized CSS
does that it's pretty nice interesting
I'll have to take a look at that clear
visual difference between similar
looking character oh I see Oh like the
zero and oh I and and maybe the pipe
symbol if that is orell and a capital I
know item says Mabel 2006 no items yet
maybe for a future app maybe we'll build
like a full Pokemon inventory or
something as a fun web app this is
purely just like a this is my party I
guess yeah but yeah these are badges so
we've we've gone i'll we've leveled up
work table i guess if you want to stick
with the theme of of pokemon and sort of
one of the next few things i want to do
is get into actual progress bars too so
we'll take a look at that grass twice
whoops yep pikachu is not grass type
pikachu is in fact electric type so
thank you for knit man and probably to
find behavior for pointing that out
let's refresh that and boom it works
beautifully it looks so nice this looks
so satisfying awesome so those are
badges they can be used for a lot of
things clearly they can be used for
notifications they can be used for
Pokemon types
if you're so inclined you can even use
pill badges actually and actually that's
kind of nice I might do that so we'll
add the bad you feel that multiple
cursors you know get fancy with it badge
pill like that and then refresh and now
rounded edges right Oh Pikachu is wrong
where's Pikachu what I do think Pikachu
was wrong with before I changed it to
electric I think there that's what
they're referring to and you can even do
multiple types here if we wanted to we
could have two two spans two badges
because spans are inline elements so we
can have one after the other and one
could be grass electric or water rock or
whatever so this is clearly something
that we can mess around with and get
different behavior with electric types
are prone to grass slash rock digging
into our Pokemon I know right electric
types are weak against ground and
strength against water strong against
water they are weak against grass which
is interesting but I don't think they
are weak I don't think they take extra
damage from grass they just do less
damage to grass
and they do they do attack they can't
attack rock pokémon which is weird I had
always thought that rock was immune to
electric but actually it's ground that's
immune to electric ground is a super
effective damage against electric and
correct me if I'm wrong on this I had
I've looked at this fairly recently and
I'm like 95% sure I'm right on all this
I'm not a Pokemon expert per se but I'm
not a bootcamp expert either so the
theme is I'm not an expert at anything
but I think 95% certainty that those
type Oh feel free you know this is just
literally taking you know simple
bootstrap components and then tweaking
them making nice looking stuff this is
an evolution of the table idea that we
had in the HTML stream right which was a
fun little stream and we covered some
cool stuff but kind of just saying that
they got a message blocked interesting
oh because he put angle brackets yeah I
can make the opponent I would only have
to type electric grass fire water
instead of all that ya know that's the
idea kinda behind using something like
react review is being able to modularize
your components and semantically
identify them using electric grass fire
water instead of having to say classes
water color equals whatever but while
you define it and then you can just
think it's really like having a
domain-specific language for your
front-end application that's fill this
out more we might even define these
classes ourselves sort of using some
bootstrap stuff and central to the CSS
stuff yeah exactly we could definitely
do that very times dark times lifetimes
ya know there's all that I actually
don't know much about fairy types
because that's on that's in the newer
Pokemon that's a nice Jigglypuff fairy
type was introduced in X Y which
Jigglypuff did become Fairy Type I
believe but prior to that fairy type
didn't exist it was like plain or like
yeah normal normal yeah yeah yeah I
don't know anything about fairy type I
know a little bit about dark type I
think actually I take that back
I know that s there's some relation with
psychic but I don't know whether it's
dark as weak against psychic or
vice-versa so and light type I'm not
sure if there is a light type
like dragging their Dragonite those are
dragon-type there so yeah I don't think
there is a light type I mean unless they
added that also with Jerry type maybe
they did I need to get up to speed with
Pokemon like past XY because I am NOT
for sure you have more types that
evolved into different types of like a
dinner yeah at the pendant when the game
at least you get to like get a certain
stone and like that was how you could
evolve it the other things so it's cool
we could actually make badges links as
well mm-hmm
so if we wanted to link to all the
pokemon may be in our pokedex that were
water type or grass type or whatever we
could do that using the link feature
that's pretty cool
breadcrumbs so a lot of these things are
not gonna be taking a tremendous look
overcomes might actually be using
breadcrumbs but all the breadcrumb is is
basically a way for you to sort of keep
track of where you are at an application
a set of paths a set of links and this
is actually used on like our CDN I think
we have a CDN display CDN about cs50.net
we have a breadcrumb feature here and
actually David kindly put in a search
feature and you're just pretty cool but
you notice that if we go to 2007 we do
have these separate breadcrumbs here and
these are what breadcrumbs are they
allow you to go from base paths to more
refined paths down deeper into the tree
so to speak yeah I'll phone Gretl style
leaving breadcrumbs to find your yeah
exactly exactly so you can navigate
backwards in a web app or some
application depending on what you need
to do we're not going to use it in
today's example but could be very useful
depending on what you're trying to
achieve as I said we used it for our CDN
buttons buttons are important I would
say not that we're necessarily in dire
need of buttons today but you can see
that there is a very common theme in
bootstrap and that's this sort of color
system that they have here with all
these buttons and you can override these
colors we might see it in the
documentation here in a little bit you
can say style equals background color
bulb ah and that will actually change
the background color of the button but
these buttons are nice they have an on
hover animation which you can see they
have the same semantics as the pills
that we saw before a primary secondary
success danger warning info light and
dark those are all pretty common through
the blue chef documentation and all you
need to do is just add the button class
as the base class to get the base
styling and then the specific color that
you want with button primary buckin but
a button secondary button success etc
and even a link to you can have a button
that it does have it has no background
it just is a link with the button link
capability we're actually just talking
about success or submit buttons earlier
we were yeah which has a actually
submits a form and you can prevent it
from submitting the form using to
prevent default in JavaScript which is a
little bit beyond the scope of today's
thing but these are actually really cool
too I like these outline buttons a big
fan yeah they have an on hover colored
animation so they turn essentially into
the other button type the the regular
button if you if you hover over it
primary secondary success danger warning
and actually the yellow text turns all
these different texts turn into a
different color as well yeah these will
turn into white this turns into black
just cuz white or yellow is hard to read
same for these two these turn into dark
to light and the stringent dark it's
light background but super cool so
depending on what you're trying to go
for aesthetically you can go for either
outline or filled buttons you can do
large buttons just Add button large as
the class you new small buttons add this
button small so it's a very flexible
framework allows you a tremendous amount
of things block level buttons if you
want to span the entire container you
can do that as well
you can set the state you can set the
disabled state um what else can you do
you know a lot of stuff you can toggle
buttons with javascript so it has this
outline around it which is pretty cool
you can do check buttons which is pretty
cool you can have a button group which
we'll look at pretty soon here which
allows you to disable or enable certain
sub buttons of a set of buttons yeah
there's a lot a lot of stuff all very
customizable but we're not going to I
don't think we have really a use for
buttons in today's example scientist and
our inure Ken and how do you pronounce
it Orion Orkin thank you very much for
the follow of both of you yeah we don't
have a use for the buttons I would say
today but if we wanted to create another
page
that was made me register a Pokemon for
example in a form we could override the
styling of the default button and do it
that way we can't we could use the we
can include our button or include a
fancy JavaScript button in that sort of
paradigm oh you might use those button
boobs to sort of select and type even
yeah yeah that'd be cool yeah we could
do a random choose a random Pokemon
right and then we could like grab a
button that does that scientist says
greetings thank scientists for the
follow and for tuning in so button
groups which we just looked at are just
as they sound just a set of buttons that
go together right and this is actually
the example from the last page the left
middle on the right and it remove the
white space between them yes you could
definitely add them separately but yeah
and you can even do that - you can have
separate button groups that are all in
line so you have a group of four buttons
and a group of three buttons and you
could maybe visualize this being in the
context of like a Photoshop kind of app
or a maybe maybe that Google spreadsheet
for example where you have like
different styling that you want your
text to be like text align left middle
and right and that those would go into
like this group of three buttons I could
even see it being used in like a
feedback setting so maybe like one
through fours like I'm confused five
through seven s I am okay and it's like
I felt really confident about that yeah
yeah you can rate your rate your comfort
level yeah and sort of color code them
according yeah and it's semantically
even partitioned where 8 is like I'm
100% good I'm pretty good and I could
use a little bit more yeah so this is
pretty cool you can mix different input
groups with button groups in line and
also floated left and right which is
pretty cool
you have different sizing nesting this
is pretty cool you have a drop down
within a button group so this is pretty
cool this is the way that you can sort
of modularize your your setup right you
can compartmentalize and modularize all
your button groups and all basically
everything in bootstrap I mean you could
put whatever you want into any of these
yeah we'll see some of this too when we
look at the navbar yeah yeah and here's
some vertical buttons vertical buttons
with dropdowns
the nice thing about bootstrap is just
such a great job of illustrating
everything for a visually and
interactively so that you can see sort
of like oh I would really love this like
we just did with our pills right we
looked at the pills we change the
styling of them
we looked at buttons we could have just
easily done it with that as well it's
pretty cool this is so cool this is that
ignite we can override with CSS classes
I guess of course absolutely you could
very easily change the color and I think
I could even do it in here if I were to
go style equals background color and if
I did like and what which type is this
fire if I did orange yeah instead right
and if i refresh the page notice that
fire now has an orange background color
instead of red so you have absolute
control over how you want to set your
your colors of anything that has a
default color whether its primary or
whatever easily easy to override I also
love how it shows a little sample of
what that color will look like it yeah
yeah do an Adam I think it will do it
for hex colors but not for like weird
colors yeah I'm sure there's probably a
plugin that'll do it 10 probably yeah
yeah pretty very flexible format
anything that you write yourself
especially at the element level that's
got like the highest priority for CSS so
they'll overwrite everything
whoops trick I need to start using
bootstrap more absolutely no it's a
great framework and I mean this isn't to
say that bootstrap is the best framework
like we said earlier we showed semantic
UI and foundation and skeleton and all
these other frameworks like I would
recommend and this is something that I
need to do myself go out and explore all
these frameworks use them in different
projects see which one's that sort of
the way that you think about your
components and that you like to develop
and then use that you know don't
necessarily adhere to one framework
specifically I would say there's maybe
an argument to be made for efficiency
maybe I don't get really good at
bootstrap if you do just bootstrap but I
mean honestly I'm probably more i I
think attracted to semantic UI right now
I really like how semantic UI looks but
bootstrap is just so ubiquitous -
they're like being really good at
bootstrap probably means that you have a
lot of utility yeah and and some of the
one of the nice things about bootstrap
is that they use consistent terminology
between all of their components yeah so
primary always means blue yeah so if you
want something to be blue you can just
say oh yeah I remember that's primary
most likely just out of class that's
like something - primary yeah is
bootstrap used in production level
websites bootstrap was created by
Twitter for use in Twitter really yeah
Twitter created bootstrap used to be
called Twitter bootstrap actually used
to be called Twitter something else and
then they changed it to Twitter
bootstrap another yeah and now it's just
bootstrap whoo step 4
and um to this day and a hundred percent
sure I would imagine they still use
bootstrap it's actually pretty easy to
recognize the code website is using
bootstrap or not there's certain
features that you'll pick up on us you
use it more but it's pretty noticeable -
Elliott Khan's point many websites do
override the styling so it doesn't look
like the bootstrap yeah which is I think
a good move if you want your website to
not look like you just started learning
how to use bootstrap but I would say it
provides an excellent foundation upon
which you can do your own styling and
customization like we just did where we
changed the fired badge for example
response says adding a delete button on
the right in another column for each
data row nice yeah and I think he might
be doing that himself as an exercise
it's something you could totally do you
could use a trash can icon even to do
that which would be totally great I'm on
the far right here after XP delete or
release in Pokemon you release your
Brooklyn we don't want to think about
deleting our Pokemon there's also I
think it's an alert there's like a class
that you can add that little X oh yeah
that's too close yeah and that's I think
a JavaScript thing too you need
JavaScript to do that it's in what what
is that it's in I think I've seen it in
alerts
it's an utilities ok it's a close icon
this thing right yeah which allows you
to close pretty much anything it's
pretty cool and you can add that to any
trap any bootstrap component that'll
just close it I believe but I think you
do need to include that JavaScript well
actually in this case maybe not cuz it's
just saying close icon use this might be
just a close icon so what you might be
referring to like the modal to give it
like some functionality yeah because I
think that tonight I should get it to
work I think you might have to tie it
into the modal like
and then cuz then you can click it and
have a go well in this case it's not
going away but I'm pretty sure one of
these examples lets it go away one of
these is live and you can actually close
it where is it it's not it one of these
has a in alert box that you can close
with this
but yeah does that I did you would and I
mean if it doesn't have this built in
you could certainly use JavaScript to do
it to delete the row and to animate it
up with jQuery or whatever and we can
maybe cover something like that in the
future which chick has a interesting
message they're kind of like oh yeah the
usual in admin dashboards and those
kinds of websites yeah exactly
CJ oh three nine nine says hello hello
CJ thank you for joining us
okay so we were just looking at button
groups right yeah so if we go down to
cards actually cards are really cool so
this is what a car it is yeah cars are
awesome this but it's I mean it's a
simple thing really you have an image
and you have a container with a header
some text and button right it doesn't
even need to be those components that's
just like a sample that bootstrap chose
to show that you can have multiple
things within a card yeah you could
certainly have multiple text multiple
buttons multiple images whatever you
could see being in a card we could
actually implement this same project as
cards like yeah pokemon card yeah that
would be really cool actually at some
point I really want to do that yeah fun
fact the CSV got harvard.edu website if
you go to staff these are all cards
bootstrap cards and these are all
implementing that there's a special
someone right here who might look
familiar but these are all bootstrap
cards and they are all dynamically
adjustable well not when there's yeah
you have to let go of the browser first
but this is using what's called masonry
j/s which is a JavaScript library that
auto fills a grid of stuff whatever you
want in this case it's a grid of cards
so in this case we're actually used to
technologies in conjunction masonry Jas
and bootstrap to create a custom sort of
system yeah it's pretty cool because
sometimes bootstrap Jase doesn't have
all of the features in fact most times
it won't so you'll have to sort of add
some things to
yeah to get your desire one thing that I
realized would be pretty cool is a like
a button here where we could like drag
in the website here so that this whole
thing could fill out and we could just
have a cons on the left yeah I feel like
that'd be really sick but that would be
somewhat it might not be that hard to
implement actually because we would just
need to make sure the Jekyll output the
right HTML with the bootstrap stuff so
yeah it's it's doable but technologies
once you sort of get to that point where
you know you're pushing stuff to
production it's usually you're using
what three or four frameworks yeah yeah
yeah three or four maybe more and bits
and pieces really of the things that you
want and then Batman access cold is
missing I didn't show up for that day to
take my photos I am myself I forgot to
do that shame on me that time I've been
saying shame on you this whole time but
it's actually shame on me well if you
didn't take one either so shame on a
fish shame on you for not letting Opie
take a picture
Sahil XP says hello hello Sahil thank
you very much for joining us if I have a
list of elements and I want to transform
one of those elements IDs into a button
for users to click how would this be
done one of those elements ID into a
button you probably need JavaScript for
that you'd have to take the you have to
grab that element from the DOM and then
dynamically change it from using jQuery
I think there's a method to do this
whatever it is already it's not sure
what your list is when Li I guess but
you whatever its sub content is whether
that's a P or a span just change that to
a button which should work in jQuery you
can just fetch it fetch its ID using
dollar sign and then the ID with a hash
symbol yeah if you don't have jQuery you
can use get element by ID if she have
wasn't there for the photo shoot but
yeah these are cards cards are really
cool maybe we should come back to this
for a Pokemon a separate or more
interesting Pokemon you know will be
cool a Pokemon Trading Card Game
which socket IO how about that I always
say that would be sick with a database a
there's a full stack idea for an
application our own foe database we can
change we could trade cs50 staff oh yeah
yeah that would be pretty cool lipstick
says I think I can do finance now that's
awesome
should have been there for the animated
pink shoes that's kind of a yeah I
probably should that but yeah there's to
Aaron's point there's a lot you can do
with cards they're very flexible see in
this case this one has a hood a header
and a footer with the sort of the same
content we saw earlier all
center-aligned we have two cards side by
side we have two cards touching each
other different size sizes but they're
sort of stacked yeah yeah custom CSS all
pretty cool right align middle align
left aligned even one with a cap its
tabs inside of it so you can get really
sort of modular with this and really
like add things together yeah a lot of
cool ways it's a lot of you can do a lot
of stacking for sure of all the
different features and one of my
favorite things is sort of combining the
cards with the carousel oh yeah yeah
well carousel is actually next yes and
we don't we're not covering javascript
so you probably want to actually look at
the carousel too much but we have a
first slide here it does actually work
by the way is alive okay so in this case
this is a carousel that that we can look
at that's actually alive so the carousel
is just where you put a bunch of images
together essentially or whatever content
you want you can do with cards you can
do it with text you can do with it
nearly anything and you just scroll
things left to right and change the
visibility it's effectively how this CSS
is working to give you this sort of
carousel effect and it loops back around
supposed to go first second third and
third being our last slide which we do
one more time it goes to the first slide
so we end up looping back
yeah secure so the implementation here
is adding the class active to whatever
you want it to be start and then it'll
just loop from back yeah yeah exactly so
it's pretty cool and there's even an
indicator thing you can add to it which
is pretty sweet captions you can add to
it as you can see you could go you can
explore bootstrap for hours and hours
and hours which we're already in the
process of doing but there's just so
much cool stuff you can do collapse this
is a JavaScript thing I think where you
can basically just enable content to
display with a click of a button which
is pretty cool again not something that
we have the power of
to do today because we're not doing
JavaScript but there's a lot of cool
water you could probably implement that
without using javascript this yeah you
just like a sign into class like but the
animation itself oh the animation sure
yeah yeah you could do that you could
hide it yeah well on button click though
oh yeah cuz on button click is when
you're assigning the class and I think
you need JavaScript for that yeah but
yeah so much you can do and here
actually this is cool you have an
accordion you can actually have these
three elements that are one of them is
visible at a time right and you can
actually collapse one of you can coughs
all of them as you want to but only one
of them only be visible so it's like
accordions you could open all of them
yeah yeah cool accordion like right yeah
and this is cool because we have an idea
accordion class card it kept you know
this is sort of the way that you create
any component in bootstrap generally
speaking is you apply it to a div apply
a class or an ID to a div and that'll
accomplish that it's pretty cool there's
some accessibility information we don't
have time to read all this stuff there's
so much of it but drop downs drop downs
are cool took a little so here we see we
have a panel sort of appearing
dynamically when we click a button with
some new elements that are now visible
that we can highlight which may reveal
more things they might take us to
another page it's all pretty awesome
pretty flexible same thing here we have
you know just as we said before the
styling of bootstrap as typical we have
primary secondary success themed
dropdowns so it's all pretty intuitive
so long as you learn it the first time
you can apply it certainly to other
things that bootstrap gives you yeah
some folks might have seen that there
are some buttons with just the dropdowns
with just a button on the right side
which is a split drop-down which we have
that capability to do here so if you're
looking for that there's all of the sort
of copy and paste code that you might
want right here super easy which is
amazing you can size it you know all
this stuff is pretty there's there's
definitely patterns you see some funny
yeah I like the air and move on the CS
city site sad that you did not do it
here on that stream can you on the
stream what is it oh nice we got it live
here that was actually almost like like
her Batum what you did in the in the
actual I think you practice that at
night or something like everyday yeah
some of the websites I've been working
on rates ready to look nice now yes
Babic well we're glad that we were able
to help you level up your CSS abilities
certainly adding that customization will
give it even a more professional feel to
it cuz it'll look a little less
bootstrapping a more customized yeah I
would say make like a bunch of web pages
where you're just kind of taking in the
components learning how they work and
then once you have an idea of how do I
want my vision to differ from the
default vanilla components then you can
actually apply the custom CSS so maybe
do some research and figure out which of
the sass you know mix ins or sass
variables are being used for a given
thing which someone mentioned earlier
because bootstrap is all written in sass
you can actually dive in and change it
yourself
using an own style sheets drop laughs
here which are pretty cool right you can
drop it to the left it's a drop it to
the right drop it down drop it above
menu items oh you can you oh these are
buttons I guess that's pretty cool menu
alignment right aligned menu that
doesn't seem like a right aligned menu
I'm not entirely sure I'm not too sure
what that's all about you can change the
headers of your menus that's pretty cool
so we have a little non interactive
header here but then we have the two
actual elements of it but yeah lots of
cool stuff menu forms even that's cool
so you can actually have a menu a form
within a menu Twitter that's that which
makes a lot of sense now that that's
yeah that they're related you know they
they got sometimes you cooking a little
sign in a little yeah it's pretty cool
now forms forms is a gargantuan oh by
the way there's a newer version of
bootstrap for between 2/3 of today I
think this might be an alert yeah this
looks like a block level alert but we
have that if you look at the like the
forms page is just massive there's so
much that you can do with forms in
bootstrap yeah we took a look at the
basic forms in the earlier documentation
but this gives a little bit more style a
little bit more of that bootstrap feel
because the other one was very HTML yes
yeah the the stuff you can do with form
is pretty incredible
you get all obviously all of this the
the form elements that you get in Rodge
do all completely restyled but on top of
that you can also group things together
really nicely using form groups so that
just means putting things together right
you can have things sort of if we get
down to it here see where it is you can
well I mean first of all you can nicely
horizontally aligned checkboxes and
stuff like that but where is it you can
have things like this where for you have
form rows where you can actually have
you know using the column system the
drop bar the bootstrap column system you
have the first name and the last name
that fit the grid and we actually don't
really look too much at the layout which
is probably what we should do um before
we maybe dive too much into anything
else but containers look like this where
you can have you know containers that
are side by side a container is
represented by both of these these are
both two separate containers that are
different sizes containers can span the
entire width of the page as well but
where do we have more information I
think it's the grid system here so by
default you can create columns by
specifying rows and then within that row
sort of like how tables work with you
know TRS and T DS you specify rows and
then columns and you can specify small
columns medium columns large columns and
that will those classes will become
active or disable depending on the size
of your device the media queries will
change the classes in this case if we're
on a small device or larger right which
is pretty much any device will have
these three columns here no we could
have another extra medium column and
depending on the size those would change
and those those have become active the
small ones to become disabled right and
that's sort of the nature of mobile
first you go start with the smallest
device type that you're trying to format
for and then work your way up yeah the
reverse now if you notice if you're
creating a row and you just specify it
just to call them without specifying you
know a number or anything it will
automatically figure out how big the
column should be
it'll fill the system for you so you can
see in this row for example we have two
columns and as a result of that it's
kindly Auto figured out that it needs to
be two columns that span each half the
size of the container and the same thing
applies to this row down here this row
has three columns right three divs that
are all given the class column and you
might be able to hear that siren out
there apologize for that
but you can see here that these all
three fit in the exact same space but
they're given different sizes yeah
pretty nice very flexible same thing
here and we're actually given a W 104 I
believe that's to specify the from the
break point in this particular example
yeah because in this case we're given a
one row but we want two columns and then
we want it to break so we say with a
hundred and then it breaks to the next
set of columns effectively oh the cops
are gonna get you this kind of it but
you can have three monitors is the two
right now this stream atom and the page
I'm working on I totally feel that
hundred percent often will split atom in
a doc page and that will mean that I can
code and see the documentation on one
monitor and then have another monitor
dedicated to a video or whatever right
but you could also split your video and
your documentation you know you don't
need to have this in too big of the view
because you know you should have the
bootstrap documentation probably open if
you're doing bootstraps programming
should I feel guilty I'm listening while
I'm at work no not at all as long as
you're being productive just stay
productive
you're only gonna copy they only get
super good causes on J yeah exactly
hey if you're if you're coding at work
right and you're learning bootstrap to
get better at coding professional this
is professional development exactly
exactly
excuse me so yeah different ways you can
lay out the columns and you can specify
if you want the size of them a little
bit more specifically with the number
and blue trim uses a twelve column
system so if you say call six call six
that's the equivalent of half the screen
or have the container half the container
right yeah if you do call three call
three those two add up to six so it'll
only take up half the size of the
container those will be 2 25% white
containers yeah the use case that you
might want to use this for is so by
default it's gonna split everything up
equally let's say if you wanted to give
one of them like half of the screen real
estate in the other to split between the
other half and that's when you would
want to explicitly say how big how many
columns to make that exactly by default
it will assume you want to use the
entire width of your container which is
not necessarily the case or just divide
it up equally like that example right
there this is a good demonstration of
specifying that you want call 8 and you
want one column to be large and one
column to be smaller call 8 makes this
one 2/3 of the size of the screen yeah
and then this one just makes it 1/3 call
it 4 yeah so this is great this is the
column system in a nutshell and you can
specify whether you want them to apply
when it's when you're using a medium
device a small device a large device and
this will responsively adjust how things
are laid out depending on whether you
using a phone or a computer or a small
browser window or a large browser window
etc it does extra-small is the default
yeah and then small if you say small
that will be explicitly applied on top
of extra small yeah so you can do lots
of cool stuff with it definitely check
out the grid page so that you can get a
sense of how the column system works you
can do some vertical alignment now that
there's flex box and this is a little
bit of some fanciness that you can apply
to it but that is I think a necessary
bit of information because we were just
looking at input groups right
and we weren't no sorry we were looking
at forms and in forms we were looking
specifically at form rows which is or
form grids form rows which was down here
form row so right here these are
effectively using the column system you
can say I want a column and a column
which is right here just like this
column in a column only this time
they're given form controls instead of
you know being a paragraph or an image
or whatever now the form is adhering to
the bootstrap grid system which is super
nice and convenient yeah and again we
can certainly change this like the
column size just by adding in those
numbers right after a column yeah
are those rings on the right hand
fingers are there some kind of finger
relaxants says Rizwan octet now these
are these are rinks Amazon rings it's
cheap rings they got an Amazon except
for my index finger when my best friend
got me for my birthday a long time ago
or for Christmas I forget it was for
some holiday but it's a glow-in-the-dark
ring it's pretty cool
this boot strap play well with CSS grid
says m4 NJ I don't have a lot of
experience I think it actually inherits
the CSS grid to an a to a degree
actually no I think it doesn't inherit
CSS credit and inherits just flexbox but
you can certainly use CSS grid in
conjunction with it you might get some
odd behavior depending on what you're
trying to do here's an example of a more
fleshed out form which you might use
several of the features for you can see
we have two fields here one field here
one field here three fields here I think
it's maybe assumed that this is maybe a
call 6 or a call 6 then it call for and
a call to right here so things are laid
out and you know the size that you might
expect right and then finally we have a
checkbox and then a button that submits
the form and you can see more examples
of different kinds of forms the more you
scroll down and get a sense of it and I
think - there's some bootstrap
JavaScript that will sort of give you
some nice formatting for verification of
fields so for instance if you require
that a user has a name or an email
address it will like make it read if
they don't have any text there when it's
submitted or something like that I had
seen that and I'm trying to figure out
where that was where was that that
wasn't popover was it no popover sort of
like tooltip oh right yeah yeah where
was the it might be informs all the way
at the bottom
forms all the way at the bottom I
definitely saw this whole thing at the
docks yesterday there is a way to do
this it's pretty nice it gives a nice
visual aspect to Oh validation every
validation so here we go so when you
submit the form you can see that it sort
of adds some elements below all of your
fields here where things look okay
or things don't look okay you know
you're missing data or doesn't follow
the right validation you have the
ability to add valid invalid styles - oh
yeah and of course obviously we can tell
that that requires some logic so we're
gonna need something more than like a
markup language or CSS to implement that
yeah exactly
the very robust form system I mean the
whole framework is very robust and meant
to work very well together it's amazing
input groups are cool because these let
you sort of group things together like
on the same line for example here's an
at so it's sort of tell you that this
should be an at user name and that just
means this how you gonna reference your
user name in that domain maybe I'm
discord or slack or some other
application or Twitter you can size
things up just like that you know a lot
of these are a little bit more niche you
know depending on the style that you
want here's one that has a first and
last name integrated together into one
widget which is pretty cool I mean it's
not something I've seen very often I'm
not sure how I feel about that design
wise I think the enormous to have two
separate boxes yeah I think I I think I
agree with that but you know it just
goes to show you how flexible you can
actually get with it segmented buttons
being used in conjunction with an input
group so looks like lots of really cool
stuff Jumbotron this is cool this is
kind of like I mean it's it's not a
really sophisticated component but it
allows you to like maybe put something
on the front of your web page
announcements yeah right here at the
very front it has you know big text
which is just a display tag with a I
think the other paragraph thing that we
saw that leg jumps out or whatnot
and then a smaller one and then a button
with a horizontal rule with margin on it
so yeah you got a lot of cool stuff you
can do with this but it's meant to kind
of just be like a boom here's my website
you know if you've taken cs50 on EDX
there are like announcements
homepage and it kind of mirrors that
same effect yeah list groups so these
are cool this allow you to sort of group
things together stylistically in a list
to give you a little bit more visual I
guess sophistication rather than just
displaying text so all bunch of
different examples here again we have
some colorization all the buttons and
the prior stuff that we've seen here we
go same thing with hovering right so a
nice more interesting way to show lists
than just simple text right with badges
too so here the nice thing about the
documentation is that lets you sort of
call back to other things that we've
just learned and mix them together so in
this case we looked at badges you can
just mix things together just in great
integrate them together right and
they're usually inline in this case the
span for the badge goes within the li
which has the list group and all this
other stuff it's pretty useful
here's a list group that has pretty
complicated content right you can
actually activate any of them but we
notice that one of them has the active
class applied to it which turns it blue
and it has a little bit of a small
element up here which shows you how many
days ago something did something or
whatever and this can easily be a badge
as well with a notification number
here's a heading here's a paragraph
here's a small paragraph if you wanted
to fetch that sort of dynamically you'd
probably need some JavaScript yeah yeah
exactly and I mean you can also serve it
from like flash back into if you wanted
to if you wanted to render it
server-side but here we have a
JavaScript sort of thing where you would
click on a list item and it would swap
in and out text you know in a given area
right or at least set something to
active or not active active did true or
false active none
I forgot it is disabled display settings
displayed so yeah might be disabled or
display:none but there's a lot of other
fancy JavaScript stuff that we can do
call six along side call me and four
will it auto prefer according to screen
the website is running
call six alongside O'Call md4 so if you
are so different things because one of
them is specifying screen size and then
a column size whereas one as you're
saying call six yeah if you say if you
have call six and call MD for together
well it's basically gonna do is call six
will be the default and then if you're
running on a medium device it'll apply
call MD for and then everything else
will be said yeah well it is to me that
that's the same element yeah but yeah is
bootstrap still bloated as prolem er if
you're if you're talking about maybe the
CSS classes I mean they can get a bit
verbose if you're referring to the
actual the byte size the distribution
it's not terribly large but you can use
a CDN link and usually this gets cached
anyway and we're talking maybe fifty to
ninety kilobytes I think for the CSS
actually might be 150 for the full
bootstrap I think we looked at it was
like a hundred ninety something yeah for
the regular and then 152 I think for the
midmark yeah yeah so it's not terrible
again it gets cached typically if you're
if you're using it and a user is going
to your website over and over again so
not a huge concern but I would say it
can get bloated in the sense that we're
writing pretty dense class sets of
classes for all of our elements and they
can get a little bit large thankfully
they're pretty readable yeah I don't
find it too overwhelming or too heavy
too thick and you can certainly abstract
it even more and sort of assign a bunch
of classes to one thing yeah yeah using
sass yeah you can definitely do that
modal's are cool so these are like
windows that you can dismiss in this
case is not working for some reason I'm
not sure if it's supposed to or not
demo modal here there here we go so you
have a modal it turns your screen dark
it puts a modal up in front so really
flexible really cool
they have a long modal that you can
scroll through which is pretty cool
which might be used for something like
terms and conditions before you yes
absolutely
vertical centered one so this is cool so
this one instead of coming up at the top
of the screen it actually comes right in
the center and I see the modal's like
this all the time which is pretty cool
JM Anderson so glad to catch one of
these live I actually use bootstrap
heavily my day job as a UX designer for
prototyping at night I've been taking
and loving your game dev class awesome
thanks Jay Madison you're probably much
better at using bootstrap and I am if
you're a designer that uses it on the
regular but I'm happy that you may need
to tuning into my game dev class hope
you've been enjoying that I know that
adamantine has been tuning into that as
well and I believe Adam just finished
the match three lecture which was one of
my favorites to program so shout outs to
Adam for and also to Jim for taking the
game to class and if you haven't taken
it already cs50 edx.org slashing games I
believe if you want to take the class
and I think I have the chat widget
disabled again and on the screen because
I hit C I really have to disable that
chat macro because they get through the
chat every time I press C which is
unfortunate I think there's also so if
you're interested in this we also have a
course on EDX that sort of dives more
deeply into web development Oh true yeah
we should probably plug that as well so
city dot edx.org slash web yeah and
that's Brian's course excellent course
on web development they cover some
people have asked about Django week of
achy covers Django and their courses and
flash lots of lots of cool there's lots
of bootstrap sort of projects that you
can work on there as well then press the
again to make sure the chats enabled
which it should be everyone spam chat so
we make sure that the chat is enabled
again I can't see the whether the chat
box widget is currently live I have to
kind of guess yeah there we go
beautiful thank you very much okay so
here's a demo modal of oh this is cool
so we have a modal that actually is
illustrating the grid within it so this
is a nice robust way of illustrating
just how powerful bootstrap is I love it
model 4m do like form type things
bootstrap yeah this is amazing yeah I
love the modal's love I love all the
stuff they just give you for free and
you're obviously able to change pretty
much anything yeah to suit your needs
right and there's a lot of JavaScript
that goes with it again I think a future
stream is warranted where we can
actually use JavaScript
stuff and actually make a very dynamic
webpage that be like a Mondrian modal
just add color not familiar with that
term you're gonna have to explain that
one out Dre I apologize
so NAB's are cool NAB's are one of the
things that I think of when I see
bootstrap yeah I mean more specifically
navbars because now they're just sets of
links together
now if bars actually use the navs in a
more robust way and actually it's a
failure most websites have an app bar at
the top and that's how you use your
navigate through the site right yeah
yeah exactly on here for example on the
get bootstrap calm web page at the very
top we do have a nav bar in use and I'm
a hundred percent sure that we separates
own web page that would be silly if it
used like semantic UI or something but
you can see if you want to layout links
all together in groups you got so we can
do that in the end the semantic for that
is a nav and a half item yeah that's
probably how they implemented this home
documentation examples themes blog
exactly you have a nav bar within which
are sets of NAB's in this case this is a
set of names this is a set of Navs some
of the NAB's are images some of them are
links so on and so forth and we also
have like a little drop-down there for
the different versions because we can
definitely look at documentation for
version 3 or other previous versions
exactly yeah which goes to show you that
you can mix and match things within your
names just then you can mix and match
things everywhere else is there a
component for side nav bar and bootstrap
I think there's a vertical nav bar
there's not a side nav but I was looking
at it yesterday they have just the
horizontal nav bar but not a side when
you kind of have to roll your own but
there was a really good website that I
saw side bar bootstrap and I think it
was this one yeah this one here so if
you go to bootstrap yes calm slash P
slash bootstrap side bar or in Google
just type side bar bootstrap and it's
this first link here they cover how to
use bootstrap 4 which is what we're
using and they implement 4 different
ways of adding a side bar like this
which is really cool ones that toggle
and then ones that are static and
I was looking at this yesterday because
I was hoping that we could take our last
demo that used regular CSS and sort of
implemented the cs50 homepage and make a
bootstrap version of it but it was gonna
be a little bit more complex than just a
simple port but we will be covering if
we have time a horizontal navbar so when
you have a little mobile here too nice
so that's a great tutorial if you're
curious about that
now here we have a set of links that are
centered right aligned we have vertical
aligned Navs which are great but you'd
probably end up using an aside now far
right yeah exactly exactly so you will
still use these Navs if you were to make
your own sidebar which is great here's
this is cool because you can actually
have tabs and depending on if you have a
certain tab active you might display
content right you might display certain
types of content which is really cool
you can use pills for the same thing you
know he'll bat badges pills
they're called nav pills in this context
but they're functionally similar to the
to the badges that we saw before
[Music]
OPA Mondrian was a Dutch abstract
painter and it might be pietà Mondrian
but I wanted to guess PA Andrej plugged
the link to for a ping can you run the
poke a web that you have made in Safari
wants also in developer mode mobile view
just to checks s Rizwan sure so we'll
take this and then we'll go to Safari
and then we'll run this see how this
looks hopefully it doesn't look horrible
yeah sometimes different browsers will
sort of render things differently and
some of the html5 stuff specifically so
it's just something to be aware of you
can't always you don't always have the
bandwidth to develop for all of your
browsers so it can get a little dicey
depending on on the resources that you
have when you're developing for sure I
would say this looks identical in Safari
so that's the nice thing is very
portable framework and if we bring it
down a little bit you can see that it is
indeed reaching breakpoints those media
query breakpoints and resizing the table
dynamically which is great and it's
still fitting all the content if with
they're like it needs to until we get to
this point at which point it is a little
bit iffy behavior but you know typically
your browsers aren't gonna be that small
until you're in mobile view in this case
for a table I would say probably we
would need to do something different I'm
not entirely sure how I would implement
this I would probably change into a
different view altogether I'd probably
make it vertical and I would have
everything in a very condensed sort of
iconic view like five with a with the XP
and the health bar below and the pokemon
card the application would be a lot more
appropriate for something like that but
for a table typically not a mobile
friendly thing to do maybe for our next
iteration in a future it needs to like
add your own breakpoint there just to
like make sure that when your browser
when your window gets that small that it
yeah translate yeah exactly I think he
also requested to open it with developer
mode Oh shorten realm so that was okay
so he can do that and so forget it
sorry going here and then in developer
mode it actually doesn't look bad but
it's a little bit it's a little bit
screwy but OPIC the iPhone X for example
now it'sit's a bit the thing that is a
little bit if he is the fact that
there's a little bit of default padding
on the left with containers and we might
be able to get rid of that actually if
we do container fluid so if I change
this to container fluid and then I
rerender that no that didn't fix it so
yeah so if we do over here it looks like
it's our container okay which is
interesting so if we actually get rid of
the container I'm curious curious if we
can do that and just have it be
completely a table by itself yep so
that's great so once we got rid of the
table it fits the whole page it's a
container fluid so now it's gonna
dynamically fit everything it's gonna
look a lot nicer now the thing that's a
little bit iffy is
the images here because it's container
fluid it's actually filling the entire
page I don't necessarily want that I
don't think or well actually that's not
container fluid anymore because it's
reading a table totally took out the
container there yeah we did so in this
case I would probably say these should
all be aligned Center as well or at
least the images because the images I'm
not a huge fan of how they're kind of
left aligned so why don't we do that why
don't we say align Center I'm not sure
if this works
PDF PDF but yeah mobile garden mm PD
Annette I think is that actual today
thanks for the link
kloppenburg and let's let's figure out
how to bootstrap for table cell center
because I don't like how the
text-align:center I think we can use
text-align:center but there was a for
bootstrap for there was a way to do can
even search right within the bootstrap
documentation as well there's like a
little search bar there let's see hi
cs50 am i late um a little
we started at once we've been going for
about two hours now Lillian 898 yeah
yeah we are
how long have we been going for about
two hours have we really oh wow okay two
hours and 21 minutes geez I did not
realize been going that long yeah we're
pretty late the video will be the video
I thought we were like at an hour in ten
minutes or something this has been a
very fast train we're probably gonna go
for just a little bit longer maybe ten
more minutes and then maybe just to
implement a basic vertical or horizontal
navbar and then
this video for those who did miss it it
will be on YouTube afterwards you can go
to youtube should be it tonight and you
can watch the whole thing and its glory
and also on Twitch we have the BOD which
should be immediately available
afterwards so go to videos on Twitch on
our channel and you should see it
well that work on the table let's try it
yeah that's beautiful
that was easy amazing Thank You Indra
ready for that okay so and I think the
reason that we had that before we had it
in a div that had text header applied to
it that's why it was working out for so
we have I think objectively made it look
better yeah until that point which gates
are so cool if the extra small yeah and
we could have a wicked I mean ideally
we'd have a query that turns these
badges into small badges when we get
here you know cuz right now they're in
h3 si do we'd want to change that
styling yeah but maybe even change the
font size or yeah exactly 10 more hours
hiss Kai's a twitch and that would be a
that would be a little bit rough be a
marathon stream yeah okay so these are
Navs let's go over to the nav bar which
is the the fun stuff and let's just pick
a nav bar so we have nav bars that you
can just plug and play for free
basically which is great and it's kind
of all this code and it gets a little
bit bulky yeah we're going to let's just
do this one for uh not a search we'll do
a search for now yeah that's fine so go
ahead copy that here it'll go above our
table so right there cover all of this
and we'll interests indent all this so
this one actually has a format the
search bar which is kind of cool
and this hat it has to be a dark theme I
mean come on right okay we're being
consistent and if i refresh we do indeed
have a nav bar up top then now bar text
itself
is a little light our dark so how do we
actually make that light let's see here
you're probably change text color right
where's the dark theme part of it let's
see oh I see navbar you have to change
it to navbar now for a dark background
dark but we did that how do we change
the color to be light bar brand wait
navbar navbar dark background dark we
did that so it should have made it you
should have made it light right it
should have changed all of the I mean
this looks okay I kind of like this
search how it's green there and then
this is this this bar but I don't like
this I don't like that at all so let's
change this to my PO and I'm gonna get
fancy my PO came on party right refresh
that so that's cool I got it I got a
nice party thank you taking up the full
size of the web browser to almost which
is pretty cool and then you have our
brand
how do we change that color because it's
weird cuz it here and they say the when
you go to the dark theme right they have
nav bar well let's go down to or you
have the dark theme right here
they have nav bar now who are dark
background dark right you know what
let's use the developer tools get out of
this its oh shoot but it's gonna be in
mobile yeah very good
there we go yeah and you can see that
one of the built-in features that it'll
adjust your nav bar to go from all of
those links to what we call a burger
menu which is just those three lines in
a button it just makes it a little bit
easier when you're viewing something on
mobile just so that you can sort of not
have all that clutter at the top of your
screen because your screen real estate
is very valuable when you're talking
about something small like a phone yeah
someone says remove the clasp from the
anchor it needs to have the navbar brand
as we can see in the actual thing here
this definitely does have a navbar brand
clasp attached to it which is weird
am I missing something you did you give
it just navbar navbar dark background
dark you don't need the navbar expand
large that just has to do with the this
thing I think um then I give it just
regular navbar class yeah but you need
to now far and then navbar navbar dark
background dark justify content between
that is not expected behavior huh why
don't you try copy and pasting the other
one I mean what I could do if I really
wanted to I could just say hot style yes
bad color white there we go that's how
we do it right
beautiful perfect works just as expected
I'm not sure they should normally work
just fine but it didn't mr. Juan says
where are the bars that you were saying
like the powers oh right yeah we have to
do the the progress bars okay that's the
last thing we'll do that's the last
thing we'll do so we're gonna go down to
progress here which is another component
part and it's literally just these you
have these little bars that fill with
color right and you can even have
striped which is pretty cool if we go
down to here need enough striped and
this is actually an s CSS animation so
you don't even need JavaScript for this
you can actually toggle an animation but
this is how you would do a progress bar
so we can imagine a you know you could
make this different colors depending on
how much health or pokemon has if it has
full health maybe it's green in half
maybe it's yellow and then really low
maybe it's red and then the you can even
do multiple bars which is kind of cool
if you wanted to show this I I see this
and I think of like what are what's my
distribution of like disk space on my
computer right like how much am I using
of music photos videos etc right mm-hm
but here what we want to do is I'm just
going to take a simple progress bar
actually I'm gonna do one with a number
so this one right here you're literally
gonna copy and paste this progress bar
notes has the class progress and you can
specify its width value now value min
value Max cetera et cetera gives you a
lot of flexibility and within each of
the I guess right here where we have
this 30 I'm just gonna paste that in
right there that looks horrible so I'm
going to do this do this
how's this look maybe that looks oh okay
think yep cool so that's looks a little
bit better I think let's just make sure
this looks okay so I'm gonna say value
now is going to be well what did we say
it was before it was 30 that's the
amount of health right yep so we'll say
30 and we'll say that the the max value
will be 50 and then the actual text is
to say 30 let's render this we'll see
how this looks awesome
wait no actually no that's not awesome
that's 30 out of 100 that's not
rendering out of 50 so it needs to be
out of 50 with 25% value now is 30 value
min zero value max 50 interesting this
style width is 25 percent yeah I don't
think so
we if we get rid of that no it makes
even worse yeah no let me see value 30
bootstrap progress bar value now it's
rendering out of a hundred Oh actually
let's just look at the let's look at the
actual documentation
so this says I mean these are all 0 25
it looks like this with thing is the
percentage of the bar that is full oh
[Music]
yeah okay I see okay so if we were to
say then what's 30 out of 50 that's 60
percent try that
yeah okay good enough good enough okay
so you actually have to dynamically
calculate that then okay which isn't too
hard you're doing the value now over
value max and there's CSS calc functions
that you can do that will do that but
I'm not sure if we can do it now I don't
think you can do it with HTML attributes
I'm not it say you do that with like CSS
attributes I'm not entirely sure yeah
Purdue the teachers to 60% control ship
V paste with automatic indentation ah
that's cool control ship V off the
probably command ship V on my computer
off to take a look at that so we're
gonna do it with everybody and I'm
actually gonna make it I want to make it
a green progress bar so how do I make
success somewhere yeah probably right
yeah BG success okay
so it's a way that goes on the actual
dip introdu so do BG success right
re-render it now it's like health bar
beautiful so copy this a bunch of times
where we have the health here didn't
work for me the control should be didn't
work for me unfortunately so I might
have to tinker with it to figure it out
it might also be specific to the editor
it might be different yeah that's true
cool I got that let's make sure that
that renders appropriately which it does
not
oops oh I did I screw that up big-time
screwed that up big-time
okay
I'd give an extra to do oh yeah I'm
putting in the wrong spot aren't I
yeah yeah so this needs to go basically
what I want to do is replace this like
with that uh we don't want to go do this
and that and like shoot that okay we can
do this and then that okay is that
rendering correctly perfect no I can
just copy and paste this whole thing and
get rid of this whole thing here which
is great just like that line oh okay
gotcha so yeah we have health bars XP
bars would be the next extension and
then we can be finished and the XP would
I think be background warning so you
make it a yellow bar we can change the
background colors if you wanted to but
let's go ahead and just do this this is
gonna be 50 out of 100 so there's gonna
be with 50% by you know is 50 out of 100
and we'll say that this is 50 and all
this yeah it's sort of mapping the text
that shows up to the percentage you
certainly could put like health is good
or some other semantics yeah exactly
yeah there just to clarify what you
actually mean it doesn't need to be the
exact number that you're displaying yeah
okay I think that's about it if we
refresh we do indeed now have XP bars as
well thank so this is cool we have a
much better nicer looking table than we
did in the HTML stream right sure we've
we've upgraded our our aesthetics quite
a bit and it was
very easy all of the stuff has just kind
of done for you it's like I've made the
analogy several times already it's a
buffet where you're picking and choosing
the pieces that you want to put together
to create your project and at the end of
the day you you can adjust it however
you want it to look but you have all the
tools you need to make modern looking
web applications and you they'll be
recognizable as such if you don't do
much customization but it's still much
better I think than done with raw HTML
CSS and then once you get to that next
level where you do have the ability to
write all your own stuff
you can start tinker with it and really
customize it to get it to look just how
you want yeah so that was awesome we you
know there's other things that we
haven't had time to cover yet like
scroll spy tooltips popovers pagination
all the utilities more of the other
stuff down here bootstrap is a large
framework it has a lot of stuff it's
great if you want to dive into it and we
didn't even really touch on the
JavaScript stuff either at all or even
the media breakpoints and stuff yeah but
that would be a lot of fun so in the
future we'll definitely think about
doing something like that putting
together a more robust application I do
like the pokemon card idea yeah the
Trading Card idea it'd be a nice way to
tie JavaScript into bootstrap and use it
up Script cards I'm gonna transition us
to the other screen over here because I
think we're about ready to wrap up but
if anybody has any last questions for me
or Aaron definitely let us know
apologies that this week has been a
little bit light on the streaming it's
been kind of a rough week but next week
we'll be doing a bunch of streams let me
pull up actually what the streams we
have going are cuz of twitch says over
the entire course of this stream I've
been converting to a different library
for getting color palettes finally just
finished and it turns out it is broken
and only returns blue not sure why but
in terms of color palettes I like
coolers CEO I think it's what is it
coolers the CEO
poor zo let's just have that oh oh cool
or is that co-write what it is oh we
used this on stream yeah I love this
yeah this is a cool this is a cool
website yes it's great for sort of
finding that color palette that may
match your company or you know whatever
web 5 you're going for when you're
developing and it it allows me to sort
of pin the color and then find other
colors that go with it in a palette of
like five or so colors fear lacks is
there a reason why you work with 4.0
instead of the latest version I thought
we were using the latest version we were
using 4.0 maybe I was no it's remember
they released a new one
Oh interesting I'm not sure why I had
the 4.0 documentation up in another tab
I have the 4.2 one up for some reason
but yeah I was unaware that that was
even happening but version 4 all the
stuff should more or less be the same
they may have added some some new stuff
can we get a gist of the HTML file for
this sweet pokemon web page please sure
yeah I can put one together for you
shouldn't judge a book by its cover
let me see what happened to the
solitaire streams is that chat cat I got
really sick on what was it two days ago
Wednesday when we had it scheduled and
so I couldn't come in but we'll
reschedule it and I'll put it into the
stream schedule so we'll have it in the
near future at some point but yeah that
was an unfortunate timing I apologize
for that but it's coming I promise we'll
do um in the near future and we'll do a
crypto one as well with Nick not this
next Monday because the holiday but then
one day afterwards we should be able to
get Nick in for a crypto stream and have
that work fine all right
cool cool how is your health now colds
as medical I appreciate you asking about
Vic I'm doing fantastic thank you very
much though just needed a bit of rest
everything is great I forgot to bookmark
and I'm in incognito
what was that James thirty days like
shoot I don't remember what that was
either but yeah that was up on this
guy's like JavaScript 30 that's yeah I
think it was something like that yeah
it's way up there if anybody knows the
link definitely plugin for Babic
javascript 30.com yes m4 m4 was
the case yeah sweet sweet I'm gonna go
ahead and just maximize this really
quick here cool cool
for some reason this isn't showing there
we go awesome but yeah that was
bootstrap Oh schedule for the upcoming
stream sorry I had it I had so many
things they got distracted I apologize
the next next week what we were going to
have is another code review on Tuesday
so tune in for that one
on Wednesday David is going to talk
about this cs50 sandbox which is a
package that he put together to make it
easy to sort of come up with easy coding
environments for people it's what our
labs are built upon possibly on Thursday
Kareem is gonna do an electron tutorial
so we'll follow up with that and then on
Friday we have a web scraping stream
with Emily Hong it'll be her first time
on stream so we have quite a lot of
stuff lined up next week nothing that
I'm hosting myself and then the week
after that Nick's back in town and then
we should have a bunch of other stuff
lined up but the twitch schedule the
little plugin that we now have on the
bottom of our twitch page this should
list everything so as soon as we have a
new event I end up putting it in there
and you'll see it when you log in a
twitch
it's a nice little plugin and Thank You
Felix
baby yongi volley hue nights 98 in sahih
Alexi I think I might have read that one
off earlier but thank all of you for the
follows baby punji and Felix at the same
time thank both of you let me just make
sure I can read the chat I got the check
and I've taken away so you should never
apologize in your sick I appreciate that
neh thank you scheduled for a purse jam
which has been done thank you : been
consuming water and feel great awesome
thanks for in our power I'm glad that
you have been great streams as Belle
cures and Martin thanks Erik culinarian
thanks Martin for tuning in
let's put agrestic hydrated agreed yeah
definitely
Shadid thank you thank you thanks
everybody oh shoot as they are the last
second no 1 2 3 53 that's ok will the
bottle be up and then you'll have
another vid on Monday or Tuesday
actually I'll have another stream on
Tuesday so tune in for that one it'll be
a code review 1 coma sick get well soon
thanks I appreciate it I see that boy in
YouTube's is volatile a 90 98 I'm not
sure if it's referring to me
born dia Oh BOM dia
is it morning in Portuguese that's they
say good morning and I believe it's say
you say good morning in Portuguese right
I don't speak a lick of Portuguese all
the Portuguese folks in the chat
definitely definitely verify this for us
chat cat thank you for the shame my
pleasure sorry again about solitaire but
it's coming soon thanks guys can
appreciate enough what you guys do week
in and out see you next time thanks to
my 1:18 much appreciated oh she makes
one noon and then what's for the evening
I think dinner is for the evening
I'm starving unfortunately I am well
either way and I'm starving and I'm
gonna eat something you're learning at
Harvard located teaching and learning I
mean I'm learning everyday I'm learning
doing this so I get some classes yeah
technically speaking I guess we're both
learning cool all right all right
everybody good good to us out thanks to
Aaron's special thanks to Aaron's
shoutouts for her joining us for the
first time there we go beautiful wigs
get get you we should get you in the
background is doing that also
Franco crack up that view count
astronomical um my voice sounds sick I
don't think my voice sounds sick oh
maybe I sound tired
that could be it Oh buddy God oh yeah
that's how you say thank you he relaxed
goodbye teachers vote 1988 cool alright
everybody thanks so much thanks to Aaron
have a great weekend
will see you on Tuesday for another code
review stream and a bunch of streams
thereafter so stay safe
and see you in just a few days Oh bye