all right hello world this is cs50 on
twitch my name is Colton Ogden and today
we're going to venture again into web
development so last stream we
implemented cookie clicker we had an
amazing community created game that we
also showcase at the end so thanks again
to all the folks involved in doing that
as the aundrea Bella and attained a that
was awesome today we're stepping away
from games and we're going to start
talking about one of the most popular
programming languages in the world today
and that language is JavaScript today's
stream is going to be a little on the
basic side so we're only going to be
covering the very basics the syntax
we'll do some basic Dom manipulation and
then we'll load bootstrap up with
JavaScript and take a look at how it
changes once we actually start
integrating that versus just the CSS
part of bootstrap shouts to everybody in
the chat we have a bunch of people that
are super excited apparently to learn
JavaScript today so lo9 nafeez rahul
Ranjan Chinaski black beard oh one
kinetic Kandra killer om whips tree 23
saying and that's Nate saying that they
are very excited to learn JavaScript
Nate's been featured on stream before
assuring his HTML and CSS project when
we did our code review stream so stay
tuned for some more of those in the near
future and then as Lee as well thanks
for tuning in everybody ro who asking
how was your birthday birthday was
awesome just kind of hung out kept a
kind of mellow the folks that I just
mentioned put together an awesome if you
haven't watched the last stream the
cookie clicker stream where they put
together that game that happy birthday
game was super awesome so check out that
last strain in the last 20 minutes or so
the cookie clicker stream it's here on
twitch still at the time of this
recording and if you're watching this on
YouTube
it'll be in the YouTube video and yeah
it was it was awesome I was kind of
blown away a little bit speechless when
I actually watched it we have lots of
people we have folks from Yemen from
Turkey we got folks from India folks
from all over the world thanks so much
for everybody for tuning in let's talk
about I guess some folks some folks are
asking what's the agenda for today's
stream today stream we're going to be
covering kind of the syntax of
JavaScript and a few
small examples to start off some basic
prompts we're going to implement a to-do
list the to-do list is going to be in
just pure sort of console JavaScript
we're gonna be using prompts and alerts
Waldheim not pure console in that sense
we're gonna be using prompts and alerts
we're going to implement a basic to-do
list we're gonna output the to-do list
so we can showcase things like arrays
and for each and then we're going to go
into making a version of the to-do list
in the Dom so actually using it with
things like document create element
append child actually integrating
JavaScript with the visuals of the HTML
so that we can actually start looking at
dynamic website content creation and
then once you create that to-do list
will fire up bootstrap we'll take a look
at some of the components let's take a
look at how they change once they
actually see the bootstrap JavaScript
integrated and that'll probably be it
for today's stream and then expect more
streams in the sort of JavaScript
ecosystem in the near future we may also
cover things like nodejs
we'll have a sweet dream on jQuery in
the near future bootstrap also uses
jQuery intimately so we have a long ways
to go but this will lay a nice
foundation especially for folks who have
not used javascript in the past
Java's thanks to blitz l99 Janowski why
MMH cramps level satya m and to Hamed
Taha or how do you pronounce that
Taha I'm in a tee thank you very much
for me follows so let's go ahead and
transition over to my laptop here so if
I press this key over here you'll see
I'm in Google and just let me move this
on the screen just a little bit so that
I can see what I'm doing as well with
all of you make sure I'm sanity checking
my setup here so the nice thing about
Google Chrome that makes it super nice
and easy to develop stuff is oh and I
also should clip this as well that was
the heat music that we were playing at
the start of the stream Google actually
lets you use the chrome developer tools
to actually code in your browser which
is pretty cool so if you want to test
web pages that already are loaded or
maybe your own web pages and actually
manipulate the JavaScript this is
something that's super useful and to do
this and I'm actually used to the
shortcuts offhand I'm not a hundred
percent
what the menu setup is but I can sort of
guess that I want to view
first of all let's close it so we can
start sort of from with a clean pallet
so assume that you've opened up a new
Chrome window go to view it looks like
developer and then developer tools if
you're on a Mac it's option command I
and I believe its control shift I on a
Windows machine
I click developer tools here this we've
looked at in the past for example the
elements view where you can see all the
divs you can see all of the HTML
elements then the classes and IDs and
all that the console is where you can
actually look at the JavaScript not
that's actively executing but you can
look at the JavaScript you can examine
any of the JavaScript objects and
variables that exist in that webpage so
for example I could console dot log
whatever I want if I let's see if I if
job that jQuery is loaded in here it
looks like it is so dollar sign is
typically jquery's what jQuery is
assigned to and most other libraries
don't really mess with that it looks
like if I'm not mistaken that's this F
means that that's a function in
JavaScript sort of objects are functions
it's kind of a weird thing but
JavaScript looks like has loaded jQuery
here in this context and you can do a
whole bunch of stuff I could console
dialogue my name if I wanted to
Colton like that and it does output
Colton I could I could do one two three
for each function console dot log and
this actually should take in an e
console dot log e this should work if
I'm not mistaken I might have messed
that up console dot log
did I Oh
did I miss this up maybe let's try this
normally this should work I might have
screwed this up though oh the right this
let's try that there we go so you can
see that I've done in iteration over an
array this is sort of a thing that you
might have seen if you're coming from
cs50 and you looked at C or other
languages like Python where you have
lists you can actually iterate over a
list using this function called for each
we'll take a look at that in the near
future but you can see that I have
output in my web browser and the ability
to sort of create code you know using an
IDE that's not terribly great a sort of
text editor that's not particularly
great because it's kind of this is more
like a what's called a repple so read
evaluate print and loop where it's sort
of allows you to one line at a time and
this is what you get with python sort of
interpretive lis program but generally
this is not something that you would do
for a large program this is only for
testing generally speaking let me go
ahead and read the chat here so never
got to understand some Lukens has never
got to understand that Dom thing can't
wait to get the thing done yeah so the
Dom we'll take a look at that document
object model just a way of representing
it's the way the web browser sort of
represents your web page in memory and a
tree and so we'll see sort of how that
how that works at least in terms of how
we can manipulate it using some basic
functions that are a part of most web
browsers come with all these functions
by default and so that is what Dom
scripting is just another anti anti
player I just turned this gem what is
your qualification do you have any
reference I mean sorry let me read the
rest of it saying this is cs50 is a bold
statement
interesting so I've been programming for
maybe 11 12 years now a long time a good
amount of time I work with cs50 cs50 IDE
introduction to computer science and is
taught by David Malin I work alongside
David Malin we started this twitch
stream as sort of an offshoot my
specialty is more in game development
not necessarily
much into web development but as a sort
of an exercise for myself and also just
to sort of help provide useful content
for more of our audience who isn't
necessarily into game development we've
been doing more web catered streams so
that's essentially our qualification
just lots of experience lots of
programming but I am NOT a JavaScript
expert not even nearly close but I
completely understand your your question
there I just don't want other people to
think they get a good education but the
guy does not know any interesting so
this brings up the question of how do
you define qualification I suppose and
in the domain in which you're
necessarily looking to get tutelage so I
would say if somebody were asking me to
maybe teach them how to develop an
enterprise-level application in
JavaScript a front-end may be something
built in react that scaled to millions
of end-users I certainly probably
wouldn't be qualified to do something
like that because I haven't necessarily
developed anything like that or have the
insight into something like that and all
the design considerations but if you're
looking for maybe something along the
lines of just showing people how to get
started the basics how to think in terms
of basic programming and computation I
would say that's something that somebody
with the right level of experience is
certainly capable of doing and that's a
small pretty much the best that I
personally can offer but many of the
folks that I work with have I would say
academically more qualifications than I
do certainly David at least has a PhD
and I want to say at this point 20 years
of teaching experience so just depends
on on your perspective I suppose if
you're a software engineer and are
looking to get some value out of this
dream you probably won't because you
yourself probably have the same level if
not more level of experience than I do
but you know it's all relative at the
end of the day as long as we can
hopefully get some people bootstrapped
into the basics of JavaScript
interacting with web pages making some
simple apps then we'll consider success
currently taking a diploma in game
development says tempest station do you
know how easy it is to switch over to
software and application development
game development is kind of a
specialized beast but I would say that
from my experience having general
software and application development
transfers over to game development games
are sort of a very monstrous type of
application that with a lot of
complications especially when you're
dealing with real-time feedback to your
end-users and reliable feedback you know
not having stuttering frames there's a
lot of design decisions that go into
implementing engines modern game engines
things like unity and unreal and it can
be tough - it can be tough designing
games and making them feel good in a way
that's not generally approached in other
realms of software development so I
don't know I would say that games are
probably a special class of application
development but yeah just another anti
anti player ok that sounds good I like
that honest answer I think setting up a
short description for the stream about
you and who you are would greatly
benefit new viewers to know what to
expect that's fair we can certainly we
could certainly introduce that we have a
much larger following so cs50 has a very
large following across platforms like
Facebook and YouTube if you go to
youtube.com slash cs50 and I'm gonna
assume that you might not be necessarily
familiar with our work but go to
youtube.com slash cs50 go to
facebook.com slash cs50 and you'll see
there we have established a larger
audience and a larger search portfolio
of projects and and videos
David Malin has produced many years
worth of full course content cs50 s
course content so take a look at that
that's more I guess where our pedigree
is established but on Twitch it's a
newer platform for us we might not
necessarily have that spread so I
understand where you're coming from I
think we could definitely benefit from
that frances 3745 not sure
qualifications have to be mentioned
you're going through the basics which is
great for beginners although from
experience the twitch community is
really not suitable for developers yeah
I mean I think too anteye anteye players
point I think definitely having
a little bit more at least textual
information here if it could be
beneficial I do see where he's coming
from where he or she is coming from and
definitely understand the twitch not
being necessarily suitable for
developers I am disinclined to sort of
impose that expectation or stereotype on
the twitch community I think maybe the
twitch community has been more catered
towards game development
I'm sorry towards game playing and
streaming and things like that but sort
of bucket izing it and saying you know
oh it's twitch isn't suitable for
development it's not suitable for
programming tutorials i i'm i don't feel
sort of pleased you know sort of
furthering that kind of expectation i
think we should definitely push
expectations and try new things and
experiment as much as we can and i mean
there's plenty of channels which don't
even do a lot of game development which
you know all of the just chatting
channels and which actually so far this
train has followed that format i think
more strictly but but yeah shows your
browser history is black 0:01 hey this
is a test account so there is nothing
there's nothing shady hey now there'd be
anything shady on my regular account
either you know just for the record as
they saying 12 years i'll never catch up
no absolutely it will definitely catch
up and 12 years i say that and i mean
some years are better than others you
can be programming for 12 years and have
a year where you're kind of just like
mmm not really learning a lot and then
you can have a year where you're just
really focused on learning and getting
new getting comfortable with new
environments new libraries new languages
and tools new new mathematical
frameworks so 12 years is kind of a
relative thing is someone's 2 years
spent well might be more valuable than
someone's 12 years spent poorly and
being surrounded by the incredibly smart
people here at Harvard it's become very
clear how true that is to me general
question says racoon why would one use
an IDE over a text editor and vice versa
IDs like Eclipse offer so much
functionality so I don't understand why
someone would use a text editor instead
I think it comes down to personal taste
ultimately it depends on where you can
be most productive and where you can
enjoy programming the most I personally
prefer developing in the S code and I'm
going to fire up the S code now just so
that we can at least sort of get one
step in the direction of actually
programming and this is the code base
that we were looking at last year the
cookieclicker code base I'm going to
create a brand new project here and
actually let's go ahead and create the
actual project which will be in here dev
streams and this will be JavaScript I'm
actually gonna just drag this right on
over to here so that it opens up I like
vs code I like text editors generally
speaking more than I des personally but
I can't argue with the fact that ideas
like eclipse like NetBeans like IntelliJ
offer a ton of functionality to
developers that are working especially
in statically typed environments the
Java based our c-sharp based
environments even when programming in
unity and using something mono developer
Visual Studio it's usually pretty
beneficial
having code completion and intellisense
and other sort of features like that
profiling and debugging functionality
super useful when you're programming in
a statically typed language and you want
to get the most performance machine game
development that's where I've seen it
the most but it's used all across the
board
I used IDs for a long time and then I
ended up finding that I didn't like how
heavyweight they were there's so much
magic going on I like being close to my
code and close to the process the
development process and so I personally
enjoy programming in an IDE in a text
editor and vs code and vs code kind of
has hybrid sort of IDE functionality it
has debugging functionality it has a
great plug-in system it has intellisense
so you get code signature
sort of stuff off the gate and variable
completion and a lot of really cool
stuff built into it that you don't get
with something very simple a simple text
editor but it's it's ultimately really
up to you I would say do what you feel
better.with
if you get more productivity out of an
ID use an IDE if you enjoy using
something like sublime or vs code or vim
or Emacs then use those because
ultimately you being more productive is
of what's most important but that's an
excellent question
thanks for I couldn't Barry for the
question
via our game zone says you should ignore
the trolls in the chat and I wouldn't
recommend the chat be on the screen this
is good stuff and even the young
students can get something out of this
too vr to your point i would say i would
say a trolls can be poisonous but i
don't think the question asked about was
a troll i think he actually was they
actually were bringing up an honest
concern and so i actually don't mind
questions like that questions that sort
of ask for accountability and for
credentials and sort of that sort of
thing I think people have every right to
be concerned about this and are curious
and really want to know you know are
they getting a good amount of value out
of the people who are watching can they
expect to be taught the correct
information and certainly I might get
things wrong but hopefully at least by
teaching these streams we'll get a sense
of how you can go out at least figure
things out on your own and get the sense
of how to program and Google and Stack
Overflow and all sorts of other
resources to carry you into your
training as a web developer or any other
developer a game developer perhaps if
you paid attention to the game
development streams if I'm trained in
C++ how easy is it to pick up other
languages I've heard people say it's
easy all the time but I have my doubts
C++ is a pretty crazy language it's very
powerful and very flexible it's also
extremely complicated relative to other
programming languages it has a million
different the syntactical things you can
do with it it has an a tremendously
expansive standard library it's a very
easy language to screw up in because it
does allow manual memory management
although with smart pointers you can
sort of circumvent that to a degree I'm
not a C++ expert so down the rabbit hole
of C++ I can't necessarily vouch but if
you're good at C++ then almost I would
say any other programming languages is
probably pretty approachable something
like Java scripts and like Python if
you're not used to dynamic programming
languages it might be a bit of a culture
shock for you to go in from C++ or C to
a environment where you just have to say
var equals var something equals
something or let something equal
something and not say oh this needs to
be an int this has to be it longs to be
a byte this needs to be a short this
needs to be a a unsigned in 32 there's a
lot of sort of different ways of
thinking in dynamics
statically typed languages so I would
say probably dip your toe a little bit
try Python maybe first pythons are very
approachable language then learn
JavaScript then learn Ruby maybe if
that's something of interest to you
lots of good languages lots of paradigms
what's the prerequisite before learning
JavaScript asks us to a car not really
much of a formal prerequisite I would
say having some programming experience
will be helpful but we're going to sort
of assume the very basics and actually
at the expense or to sort of prevent us
from taking too long than actually
getting into coding stuff let's do the
very first step into actually getting a
JavaScript app up and running JavaScript
program up and running and that's having
an index that HTML to hoist our
JavaScript into and actually run it so
I'm we've done this before we've had
HTML streams and CSS streams and a
bootstrap stream so this should be
pretty pretty standard if you're tuning
in from the very first time maybe you're
not familiar with the world of web
programming and you just heard of
JavaScript you're not sure what goes on
basically you need an HTML page to get
you started the thing that I like about
vs code a lot of modern text editors and
we've shown this on screen before is
that you can use the simple html5
starting point for example in the S code
or some analog and another text editor
and if I hit tab notice that now I sort
of have this fully built out basic HTML
template that I can then fill out as
needed so we'll just say this is gonna
be JavaScript test 1 right and it
already added a script tag which we
haven't really taken a look at before
notice that we have for example a
stylesheet tag a link tag which is
referencing a stylesheet called main dot
CSS we haven't made that so it's just
kind of assuming we're gonna add that
and it's already sort of added this main
j/s bit here in the script tag sort of
to say oh I'm assuming that there's
gonna be a main dot j/s in the same
folder but I haven't created it yet so
it's not gonna actually do anything and
so all I need to do in order to sort of
fulfill that is just write main CSS here
new file main is here and those are the
files that that index.html was expecting
to exist and so now we can hoist them up
if you watched the HTML stream this
should all be kind of new or kind of old
to you but if not this is how you get a
basic web page up and running HTML CSS
and JavaScript are like the trifecta of
web technologies that work
together so here in index.html I have
this link this reference to mange AAS
it's here in my head although we'll see
that this isn't necessarily great for
vanilla JavaScript if you're if you're
not doing the right things to ensure
that things get loaded in the right
order we'll sort of see that here in a
second
in main dot Jas we can do a few
interesting things so the very first
thing that I'm gonna do is I'm just
gonna write alert hello world which is
sort of like the analog of I guess
saying hello world and Python with print
and we can do it with console dot log as
well but I'm going to just do a simple
alert that says hello world and load the
page let's go ahead and load this page
up once I do that you can see that this
is something that we really had the
capability of doing before we really
didn't have much dynamism you know that
was possible before and this is a brand
new sort of thing it's not even part of
the page it's kind of like an extra
window an extra modal so to speak and
this is just a very basic sort of
old-school way of saying here's some
information right and typically pages
these days don't use alerts and if they
do it's very rare sometimes you'll see
an alert when you're trying to log into
a device and network device but and they
ask you for an like a username and a
password for example but this isn't
something that you see in actual web
development much these days
pages like Facebook and most Google
pages and YouTube they don't use alerts
it's generally more they'll have divs
that are dynamic that get inserted into
the page and often you can even move
them around and shrink them down and you
know various things like that but that
is the basic way of saying hello world
in JavaScript if you're using a web
browser if you want a more traditional
way of doing it you can say instead
console.log hello world and if i refresh
the page you'll notice that I don't get
that alert anymore and actually I don't
get any output nothing is visible now I
just see the white page but if I open up
my developer tools as we showed earlier
on the stream and also thanks so much
for the folks that follow let me just
shout out all
those folks so we have steel 45 will car
shake elbow graphy double cheese three
and IM sm 26 thank you very much for the
follows you can see that I got back in
the developer tools in the little panel
there and remember it on a Mac it's
option command I on a PC it's ctrl shift
I it might be different if you're using
Chrome on a Linux box but now the output
is in my console and this is more akin
to how you would do something with the
the terminal for example if we were
programming in Python or Lua and we
wanted just to output to this terminal
here just have debugging statements or
whatnot
there's some stuff that you might not
want visible to your users in your web
page itself but maybe you want as
feedback maybe you want to analyze
variables or you want to do a
calculation and display that in your
console on page load or whenever you
press a button but not actually make it
visible to your end-users and ideally
you'd probably take this out of your
shipped application not make it visible
to folks that are maybe inspecting your
webpage once they've downloaded it maybe
make this just developer side only but
you will see often times that there are
these kinds of messages still embedded
in webpages that ship that normally ship
and a graybeard 1970 thank you very much
for the follow let me make sure I've
caught up with all the questions just so
they're anti anti player if the new
language is an imperative one then yes
you'll probably get started quick all
you need is to learn new syntax and not
logic is that if the language is a
functional one you probably feel like a
beginner again absolutely and actually I
myself am learning closure a little bit
more in depth which is a functional Lisp
and it definitely does feel like you are
starting from scratch in certain aspects
certain things are the same you know
strings are the same dictionaries are
the same but using you know just
basically composing your applications is
a fundamentally different process it's
really cool though I honestly am really
attracted to functional programming
quite a bit Alba graffia what kind of
code editor would you suggest to us
yes code or sublime Adam etc those three
are all together they're pretty
functional equivalent I liked vs code a
little bit better I like the way it's
structured I like the fact that it's
very actively developed it's a little
bit less memory intensive than Adam it's
free unlike sublime text and as
intellisense built into it which is cool
for being able to end
variables and functions while you're
actually programming it's got excellent
plug in support but Adam has much of the
same features and even some other cool
fancy features that vs Co doesn't have
to my knowledge like collaborative
editing which I thought was really cool
but yeah it's it's kind of up to you I
would try all of them honestly try them
all see which one you like the best and
then use that text editor
it doesn't ultimately matter so much the
specific when you're using as long as
you're being productive with it you're
enjoying the process if you're good at
C++ you will learn anything alone this
is Alex Cambria love it's almost kind of
true Superbus is a pretty crazy language
it's the language it's sort of like the
defective language of game development
although that's changing because of
unity now it's sort of c-sharp but unity
itself is written in C++ so you know
ultimately it's still sort of the
defective language of game development
what car asks why JavaScript named
JavaScript is it something related to
Java not related to Java at all so at
the time that JavaScript was developed
and this is my knowledge and I wouldn't
maybe need to research this to 100%
verify it but Java was popular at the
time of JavaScript inception in the 90s
and so the folks developing JavaScript I
believe was just one person but I think
the name might have been standardized by
a committee decided that in order to
sort of market it better they would call
it JavaScript but the two languages are
completely different
Java is an object-oriented like peer
like very object-oriented statically
typed programming language and
JavaScript is a sort of dynamically
typed pseudo you can use it functionally
but it's not - technically functionally
prototype inheritance dynamic scripting
language it's kind of a weird
programming language actually JavaScript
and Lua are very similar in a lot of
ways they both are have a prototype
inheritance model they both have
first-class functions which if this
doesn't mean anything to you that's fine
as a beginner you're not expected to
really know what this means but if
you've been paying attention to the Luas
stream there Lewis streams up to this
point then some of the JavaScript stuff
will actually look kind of familiar to
you syntax is a teachable skill in my
opinion knowing how to write
well-designed an efficient code is
important then when learning a new
language knowing what the language can
and can't do is something that come
with practice yeah exactly syntax is
fairly I think straightforward but being
able to take bits of syntax and compile
them together to make functional things
that work is the harder part obviously
composing applications versus being able
to read and understand basic syntax
those are in my opinion two separate
aspects of learning how to program then
once you've learned one language once
you've learned see for example languages
like JavaScript actually very easy to at
a glance parse and like for example if I
were to write here in my main j/s code
if I wanted to write a function that
summed two integers if I said function
some that took an x and a y all I have
to do is just say return X plus y
semicolon you'll notice that this kind
of looks similar to C and also sort of
to Lua as well because of the function
keyword but notice it it has this
function keyword for defining a function
it has what you want to call the
function it takes in parameters in
parentheses which is the way that C does
it the way that Python does it the way
that most programming languages does it
do it Lua as well it delimited scope
with these curly brackets so this is the
C style way the Algol inspired way from
way back in the day where you have
blocks sort of block definitions I
believe Algol did it with a keyword and
then you return just like in any other
function I would return another any
other programming language that I have a
function sorry that returns a value you
can just return the sum of x and y that
were passed into this function and if I
say console dot log the sum of ten and
ten well then we should get twenty
output it to our console and if i
refresh we do indeed see that we have 20
output into our console the nice thing
about this running these programs is
that all you have to do to retest that
your program works is just refresh that
browser page everything is dynamically
type so you don't need to compile
anything like you do in C you just write
your javascript file attached it to an
index.html file as by here and then in
your browser
make sure you load it and this refresh
it anytime you want to update it I can
refresh as many times as I want to it's
not gonna change it's just re-evaluating
the JavaScript so good questions yep and
Alex's point
marketing doing small cadiz hacker
ranked leak coated centers good practice
related languages it says great bird
1970 we ended up actually hosting some
hacker rank sort of programming contests
I think back in the day
hacker ranks pretty cool they have a lot
of really good stuff on there I haven't
checked out lead code myself though are
there any downsides to learning
JavaScript as your first programming
language asks Dex 1987 I would say in
certain senses yes
you'll be getting used to dynamically
typed programming languages right off
the gate and this might be a challenge
if you decide to work for a more
structured programming language like C
or C++ or Java or C sharp where you're
expected to know how to type your
variables how to statically out how to
define which type your variables should
be and to use them in the right contexts
javascript does not enforce this and
there are actually a lot of really weird
bugs that you get with javascript sort
of tight coercing your things for you
automatically
adding strings and numbers together for
example produces weird output adding
certain data structures together it
produces weird output but learning how
to program fundamentally I think you can
learn whether you're using a dynamic
language or a statically typed language
even the folks that might have learned C
for example the folks learning assembly
before them might have talked down on
those folks for learning a language that
to them was a higher level abstraction
right because in assembly you're
basically talking with your cpu plus or
minus a level of abstraction with the
with C you're actually abstracting on
top of assembly so you're missing out on
some of the things that you need to
worry about in assembly that you don't
need to worry about in C in Python and
in JavaScript and in some other
dynamically typed languages like glue
while you're missing out on some of the
things that you need to worry about in C
that you don't need to worry about in
those languages so it's kind of this
infinite sort of like how deep are you
willing to go in order to consider
yourself well-versed at something
ultimately I think get a encompassing
view of programming get a get a learn
how to program in a dynamic language to
learn how to program in a statically
typed language maybe look at assembly
maybe look at how CPUs work and then you
can derive value as much as you want to
depending on how much you're willing to
sort of go down that rabbit hole but
it's almost an infinite
holy really you can get down until the
really hardcore weeds you can even
abstract below the CPU level and start
getting into the circuitry getting into
the electrons it's pretty you know to be
productive you kind of have to pick and
choose the point at which you're willing
to anchor yourself Alex says nope Jas is
everywhere and great and that's true Jas
is right now a really popular
programming language if you're
programming any website you need Java
Script if you're programming servers
these days it's very popular to use
nodejs which is a server-side version of
javascript and that's extremely popular
and javascript is getting used in more
and more context on a daily basis I
think primarily just because the my
theory is because the the pool of
developers is so large that a lot of
people are just kind of getting tired of
some of the setbacks of JavaScript hence
es6 which is the more modern version of
JavaScript sort of refining the language
and being a broadcasting it out refining
it using developing tools like the v8
engine for node it's just become a very
incredible ecosystem things like NPM for
node being able to install so many
libraries that so many developers have
made freely available to you to
bootstrap your application on the server
or the client it's really incredible so
it's a not a bad ecosystem to get
involved in I would say there are some
weird eccentricities of JavaScript that
you'll have to get used to I would say
probably it's I would advise maybe
learning Python first if you're gonna
learn a dynamic language I personally
like Python more I feel like it's more
its engineered a little bit better but
you know it's up to you really just do
whatever you feel like doing okay let me
just make sure that I have kind of
paired with the chat there's a lot of
chat messages which is awesome I don't
want to take up too much time just
because I I know some folks are eager to
dive in but many some looks like some
folks talking about their C and C++
knowledge South Africa asks will you
ever do Python kV in your stream it's
very interesting heavily documented hard
to learn I built an app but could not
implement garbage collection Python
kitty I'm actually not sure what that is
Python Kibby cross-platform Python
framework for n UI development
innovative user
interfaces such as multi-touch
applications interesting let's take a
look at their page this is just a minor
aside so just kind of like a more modern
version of TK inter I guess or tech
inter however you want to pronounce that
it looks pretty nice I have no knowledge
and expertise at all in using Kibby so I
would have to dive into it and really
learn how to use it well but you know
maybe in the future especially if it's
taking off I'm not sure I am not sure
how popular it actually is elbow graphy
asks what are we creating we're gonna
create a two versions of a to-do list
application I think Andre is a troll
constructors are nothing crazy they are
standard material of object-oriented
programming languages
what did Andre say if you really get C++
Adina in spite of all the crazy things
it has like constructors destructors
copy/move constructors or perhaps
because of this I think C++ is probably
the language that made me think the most
about how things run at both the lower
level and about language syntax so just
another anteye anteye player I think
he's talking about I think Andre so we
know Andres not a troll long is a very
active member of our community
the difference with constructors and C++
for other programming languages that
there are multiple versions of it that
you have to sort of hard code and
specify in addition to things like
destructor is and I think that's where
he was sort of sort of laying out the
difference between maybe C++ in another
language most programming languages
don't specify destructors C++ is kind of
unique in that context I haven't looked
at languages like rust ergo to see if
they do I know go actually doesn't
really have a traditional object model
in and of itself and rust I'm not too
familiar with but most of the
object-oriented programming languages
especially in the dynamically-typed
landscape just have a one constructor
like in Python and it's up to you to
sort of use that for all of your use
cases but of course there are
differences across languages and then
yeah andrey elaborated on this point a
little bit
C++ is awesome not as messy as Python in
my opinion I don't know tempeh station I
think C++ can get pretty damn messy
I actually really like Python for how
clean it is but if you want to elaborate
on what you think is messy definitely
let me know if you're refering to maybe
some of the syntax for some of this
like the like metaclasses I can get what
you're saying it can be a little bit
messy
would you consider JavaScript an
object-oriented programming language um
yeah I would say yeah it kind of falls
into a gray area but yeah I would say it
is use what are called prototypes which
is a way for an object to construct
itself to reference a one object that
you've already created which is kind of
acting as a class it's a very odd sort
of way of doing it but it I think it
technically speaking is an
object-oriented programming language and
with es6 they added class syntax so you
can actually specify a class instead of
a prototype and they made it a little
bit similar to how you more somewhat I
would do something in for example Python
or C++ versus how you would do it
previously where you have to define a
prototype and all of the sort of
functions there after you can get a
little bit odd though C++ is an
extension of C give me a garbage
collection thread over having to
allocate and deallocate memory yeah I
agree
memory allocation is a real pain these
days it's so fast relative to how it
used to be that it's not as bad
just another anti anti player the
biggest change you see at first is that
C++ is object-oriented originally it was
called C with classes everything you can
do in C can be done in C++ there are a
few other things like ra íí- which is
resource allocation something I forget
what that stands for ra íí- holding a
resource is a class invariant and is
tied to object lifetime resource
allocation or acquisition is done during
object creation by the constructor while
resource D allocation is done during
object destruction by the destructor
yeah so that's those sort of the C++
paradigm of things the thing naturally
that gets converted into the garbage
collection side of things in a more
modern programming language more sorry a
more dynamically typed programming
language and even Java does this for you
which is kind of nice you don't have to
specify a destructor it'll actually get
taken care of for you by the GC
but yes to an Thais point everything you
can do and see can be done in C++ the -
I mean you can do anything with any
programming language roughly speaking
there are you know sort of ways to do it
more easily but you can do and see what
you can do in C++ it's the really the
goal of C++ is to abstract to make you
think in terms of objects not in terms
of functions right and functional
programming actually is the opposite
it's you thinking in terms of your data
structures and applying operations to
your data take it to the same goal and
I'm kind of falling more in love with
that idea but I need to experiment a lot
more with the low with the actually
getting into the weeds with it so we'll
see just started cs50 and I don't have
any prior programming experience so what
are your suggestions on making myself
count and those of the more comfortable
cloud category
how should I begin my process and how
much time will it take being more
comfortable is really a process of
really just programming and doing it
smart so programming something and
expanding your skill set you know not
doing the same same thing over and over
and over again the same basic tutorial
app example actually implementing
something that you find interesting
right off of for me it was games I
really enjoyed making games and
programming games and I apologize that
were we haven't really done a whole lot
of JavaScript yet we have a lot of
people asking a lot of questions I want
to make sure that the people tuning in
are getting value out of the stream so
we'll we'll have this conversation but
for me it was games you have to find
what you really enjoy programming which
you really are passionate about right if
you want to be an a mobile app developer
if you want to be a web developer if you
wanna be a game developer if you want to
be a systems developer if you want to
program Arduino if you want to be a
microcontroller developer need to find
what you like and actually make stuff
and make complicated things and they
don't even necessarily need to
necessarily be complicated per se but
you need to you need to keep broadening
your horizons broadening your skillset
and learning the things that make
you capable of achieving that right
I wanted to program games so I bought
books on games I read how engines at the
time and this was about 10 years ago
we're working 10 or 11 years ago I got
into unity I learned how unity works I
got into love 2d I read tutorials I
tried to understand fundamentally what
goes on layer by layer of abstraction
and eventually you sort of fill in all
these gaps especially things like
overflow and Google and all of the great
books that are out you do fill in your
gaps but you need to put in the time you
need to really invest and you really
need to sort of get past the mental
hurdles that you will have because it
will hurt your brain will hurt for a
while it's not easy it's not easy to
sort of think computationally when
you're not used to doing it and to
program things that are large-scale but
by practicing and working your way up
small things up to large things you will
get there eventually but you need to
invest the time Java or C sharp as Steve
Ronix I like C sharp a little bit better
but I'm a little biased because Ja the
JVM was what closures built on and I'm
starting to like closure a little bit
more so it's hard to say but C sharp is
what unities programmed in so I whip
streaks saying what Python is not messy
excuse me what's the difference between
JavaScript Java and j/s JavaScript and
jsr the same thing Java is a statically
typed object-oriented programming
language that runs on the JVM completely
different language I would suggest
completing the cs50x course and its
entirety first then go back and complete
the more experienced piece sets it took
me about a year to complete tux mania
good suggestions cs50x
will teach you how to think if you work
through the whole thing and actually
complete all the piece sets you will get
a lot of value out of it and yeah I had
to look up the ra íí- acronym it's been
a while since I've looked it up what
would be a good way to learn C or C++
and how to get started just Google I
would say C++ tutorials watch youtube
videos if you're into visual learning
there are plenty of books and articles
that you can find online that will help
you you have to actually work through
them because if you don't work through
them you're not gonna actually learn you
have to learn and here's the other
important
the really important thing that you need
to do if you're using a tutorial using a
resource reading a book do all the
exercises do them and don't cheat look
through all the read through the whole
exercise do it completely yourself you
know using this the concepts that you've
learned and force your brain to really
get through those tricky parts if you do
that eventually you will be very you
will be relative to how you started much
better and much more well-versed and you
will have learned a lot of things half
of it is just really working through
problems and figuring out why things
aren't working debugging using the
syntax and the concepts that you've
actually read through that's important
do the exercises actually that should
probably be like the main point do the
exercises but of course knowing the
theoretical knowledge is good too and
understanding of the concepts all work
great bases hope you're not under a time
limit back to the tutorial yeah I I
definitely should do that we have so
many people asking questions today and I
know that so many people especially in
here in this shame might not be very
well versed in programming they might be
beginning and so they want a place to
start off this is a good place to look
at definitely and we'll definitely get
started here by very here very shortly
okay it looks like I'm more or less
caught up here so why don't we do a
little bit of programming and then we'll
come back to the chat we'll answer some
questions and see what Java Script is
all about so the first program that I
want to implement today to showcase how
JavaScript works and some of the basic
data structures in JavaScript is I want
to make a to-do list so normally with
HTML if I wanted to make a to-do list I
would kind of just have to specify a ul
like here all right it out well we'll
write out a simple to-do list the way
that we might want it to look normally
right so I'll say div class is equal to
a container this is just going to be our
class can or our sort of element
containing all of our to-do lists I'll
say I want an h1 that says this is my
to-do list and I want a UL an unordered
list
and each of these things is going to be
my tasks right so task 1 Li for task 2
and Li for task 3 if I save this and
rerun it we should indeed see that we
have a very crude sort of to-do list and
even for style sake let's just make it
look a little bit nicer in here I'm
going to in my CSS define what I want
the container class to have I'll just
say that it should be text-align:center
this should work
and then I don't like these dots right
here so I'm actually going to say
list-style:none for my UL and then now I
have a to-do list with three bullets
that are static this is static content
this is not dynamic content at all this
isn't really much of a to-do list
because all I can really do is just at
the very beginning say hmmm I know that
I'm gonna want these tasks but now
there's no way for the user to
communicate to say that they want to add
or subtract tasks from the list so let's
go ahead and the this to-do list the
HTML to do is we're gonna actually
implement I think as part two so part
one is gonna be a little bit different
it's going to be a console-based
to-do list right so this will sort of be
my to-do list now in order to make
comments in JavaScript you can do slash
star and then end it with star slash so
if I say to-do list version one console
and what's cool actually is vs code will
actually automatically put these stars
next to your comment signature which is
pretty nice so let's go ahead and obey
the way Vick J saying my god move faster
this is boring get in the details there
this is meant for beginners so if you're
already familiar with JavaScript you're
probably not gonna get a tremendous
amount of value out of this I would say
maybe tune in for another stream in the
future where we going to jQuery and more
advanced JavaScript this is gonna be
very basic this is meant for people
have no JavaScript knowledge to begin
with I'm assuming that you might have
already some prior experience oh tempest
station what he's doing now is external
CSS yes so here in my index on HTML I
have a link right here that just says
the relationship that for this resource
is going to be a stylesheet and capered
saying basically it's telling you to
shut up and get out of here not at all I
would say Vic J should definitely stay
around if they're if they aren't
familiar to be fair we did spend a lot
of time on sort of answering questions
so I do apologize for that if that if
that was boring but if if Vic J and is
experienced then I would say that
they're probably not going to find the
value out of this frame that they might
be looking for this again is very gonna
be very basic level to answer tempo
stations question about external CSS yes
we can absolutely do this with internal
CSS with a way you know marking
different elements with a style we could
even add a style tag with some CSS but
this is external which means that I'm
actually putting all of the CSS inside
of a main file this main CSS file
because I don't want all my Styles to be
inside my HTML I want to separate them
so here I say this link tag rel
relationships gonna be it's a stylesheet
type is text CSS by default it just
added just said media is equal to screen
as opposed to print which you can
specify CSS for printed documents and
things of that nature
and then I'm going to link to it with
this href which just says that it's
going to be main CSS as the actual file
location so yes absolutely if you have
any questions again this is catered
towards beginning programmers in the web
development ecosystem let me know if I'm
going too fast or assuming too much
information but the this is definitely
external CSS so all we're doing is we're
saying that the container everything in
the container should be
text-align:center and then anything
that's in a UL should not be styled as a
list typically is styled with the dots I
didn't like the way the dots looked so I
just said set the list style to none so
it gets rid of the dots so we're just
getting just the text
however we're going to venture away from
that so we're gonna step away from that
that'll be the what we have to look
forward to right eventually we're gonna
have this to do list which is
interactive this will be a taste
but first let's actually get our hands
around the basic syntax of JavaScript
and some of the basic primitives with
with a simpler console-based version
gravy tasks what if you had multiple
lists can you sit styles for specific
lists or elements in general yeah
absolutely if I for example wanted to
set this list to be ID is equal to task
list for example and in here I could say
u L is equal to like wherever you all is
set to list aisle none but if I just
wanted that one task list to be set to
list I'll then all I have to do because
I gave it an ID is just say hash task
list and the hash just means ID and so
now not every ul is going to have the
list style of none it's just going to be
this particular list if I for example
now created another list and I said
second task one and we'll just copy this
down a few times two and three and then
I rerun the application you'll see that
the second list now has the styling of
of the dots but the first list has no
styling whatsoever so that's just a way
of specifying specific elements in your
page you can give them an ID and then
use that ID you can also give them a
class and apply the class to multiple
things in your page the ID is meant to
just be one specific thing in your page
is cs50.tv affiliated with cs50 yes that
is our official page our it's an older
page of ours for sort of laying out all
of our content so let's actually
implement the static or the console
version of this application so let's
assume that I want to let's let's have
this be the UI I want to prompt the user
and this is another thing that we can do
I want to prompt the user for their task
and once they've typed out all of the
tasks that they want to add
to the program I want to quit by
pressing Q for example and then output
all of those tasks in the console so in
my page it'll basically be this will be
blank and we can comment all this out
for now
so let's go ahead and just kind of
comment all of this out like that this
would be a blank page and this is all
gonna be purely in the console what
we're gonna do is we're gonna get a
prompt we're just going to say add a new
task you can add the task and if the
user entered quit then we'll stop
prompting and then we'll lay out all of
the individual tasks so we can cover
some basic syntax here basic array
syntax and a while loop syntax which is
very important
can I watch a replay for this absolutely
this will be on our twitch channel the
vaad and this will also be on our
youtube channel after the fact the guy
talking is the same guy teaches the game
dev course yes that is me sous vide XR
slash games if you are curious if you're
in the game development that course is a
more structured course and then you can
follow along with that and a whip shake
it ask me how did I comment that block
of code very easily if you're using vs
code and most other modern text editors
if you highlight an entire block of code
that you want to comment rather than
commenting individually you can just
highlight it all with your cursor and
that command or ctrl slash control
forward slash and that will comment it
depending on which programming language
you're using in HTML it will and it will
add a this sort of less than exclamation
point - - at the end it will add - -
greater then the one six six six one one
one says love the streams came up with a
great work thank you very much
blue booger says alt all that for also
works yes we haven't now we have a troll
in our chat everybody so campus for blue
booger for alt f4 is there a schedule of
upcoming twitch streams
it says VR game zone one yeah so next
week they're actually going to be pretty
sparse we're having two streams and
that'll be updated today so on Monday
we'll have a stream with Nick Wong on
cryptocurrency and on Friday off hand
actually
remember what the stream is next week I
think we were set to do
I don't remember honestly it might be
solitary part three and it might be
something else altogether with one of
our other staff I apologize for not
knowing offhand but that'll be updated
today for Monday and Friday so next week
is gonna be a little sparse will we
learn jQuery next week I mean will you
be live every day or every week this is
fun well thank you for saying that it's
fun I I don't remember if we have jQuery
on the schedule or not let me confirm
that it'll be updated today patil says
text mining or natural language
processing from cs50 oh that's a good
good idea actually we should do
something for that 100%
those are pretty invoke technologies I
don't have any expertise in them but we
can maybe take a look at that in the
future what are using um ATM seems nice
may venture into this from Adam Oh what
are using at the moment sorry I'm used
to singing in lowercase it is V s code
so V s code is super nice it's a lighter
weight than Adam in terms of memory
usage at least per my sort of
measurements in the past and it has a
really great plugin system and it tell
us instant debugging and all that
awesome stuff
solid GD says bro how long do you spend
fixing your hair not very long honestly
just a couple minutes your views on
programming the visual effects industry
I love visual effects oof I don't have a
lot of experience in the visual effects
industry to be quite honest with you
often you'll see that I think After
Effects and certain other programs are
used in that industry ignorant of Jaso
apologies visit stupid question I assume
you can import in other Jas files so is
there a central repository that one can
browse and download other open-source
proprietary JavaScript modules you
absolutely can using there are different
ways of developing in JavaScript so the
way we're going to be doing it is just
with script tags so in order to import a
JavaScript file into your program you
just need to specify this script tag
here and then you give it the name of
the script file if you're developing
locally with node you know compiling
your application using NPM you can
actually require JavaScript modules into
those JavaScript files you
npm and you can install new ones with
NPM install we won't get into using node
in today's stream but if you're curious
look up node and NPM and then you can
get a sense of how to actually do that
and remote says hello awesome cool so
let's let's actually get started on the
beginning of our to-do list in
JavaScript so if you're familiar with Cu
or Python you might be familiar with the
idea of Lists or arrays or storing
multiple things in one location so
that's probably what we're going to need
in order to store to-do lists right if I
want multiple things I want to output
multiple things it doesn't really make
sense for me to say tasks one to set
that as a variable and then tasks to
write and var is the way to actually set
a keyword and we'll see that there's
actually another syntax for that but if
I want to say for example my name I want
to set a variable that says Colton in
the in the variable like name I have to
use var right I could say var name
equals Colton Ogden and then I can
console dot log name and what this will
do is it will output that variable
whatever I stored in that variable and
it's called var there is a newer way of
doing this in es6 called let and let has
a little bit of a different set of rules
but what it does is it actually lets you
store a variable just the same it lets
you store a value in a symbol called
name or called whatever you want and
then you can reference it later we'll
probably use let for the remainder of
this demo do because left is better
practice is less buggy var has what's
called function level scope which
introduces a few weird bugs let has
block level scope and if you're not
familiar with the differences just as
just think of let as being more similar
to the way Python does variables and the
way that in Lua if you're following the
Lewis streams local works so local is
similar to let var is kind of similar to
not local but Lua is even more grandiose
with its scoping with unlock alized
variables it actually makes everything
global this just makes fun of functions
global and some point in the stream
would you mind touching on typescript
and the differences between typescript
in JavaScript ooh
I actually don't know typescript but
Brian knows typescript so maybe we can
get him on the stream at some point and
then he can he can show us that I've
been interested in looking up typescript
I know that it's a typed hence the name
it's a typed version of JavaScript but
I'm actually innocent
JavaScript that scales which makes sense
I mean everything is a little bit less
buggy I presume but I have no idea
any of the syntax or anything with
typescript actually so looks like it
uses functions okay cool so that's that
looks just like regular JavaScript to me
but it looks like here for example you
can specify that person should be a
string and so at I guess compile time
because you are using a compiler with
typescript
you can enforce that whatever gets
passed into here is a string variable so
there's a little bit of type enforcement
which is kind of cool so this is cool
this is about as much as I know about
typescript and it looks like you can
define an interface kind of similar to
Java and a bunch of other cool stuff but
I'm not an expert on typescript I cannot
comment on on typescript cool tempest
station says to be able to work as a web
dev to what point do I need to learn
learned up till jQuery at the moment um
the more programming you know the better
you'll be in any domain I think but
learning jQuery and learning how banila
JavaScript actually works I think is
important because Jake would it's common
to see jQuery developers who know jQuery
but might not necessarily know the
lower-level workings of JavaScript
itself and so you get into sort of weird
issues where you might be a great jquery
developer but if you need to actually
dive in and do something a little bit
more fundamental you might run into some
problems
definitely definitely learn as much as
possible and then to which fix point we
are digressing so that's 100% get back
on track here let's go ahead and switch
back over to my text editor so this is
how you define variables we'll use let
you can use VAR you'll see var very
commonly but let is the newer way to do
it it's more more stable so this
actually I say stable in the sense that
it's easier to debug using let than as
var just because of the scoping rules
but let's go ahead now and say I want to
I want to have a list of tasks right and
the first thing what we'll do is we'll
actually demonstrate how to get user
input so I'll say let task input be the
value of prompt we haven't seen prompt
yet but will prompt for enter task right
and prompt is a kind of a cool thing
this actually lets you very similar to
the way alerts work this actually lets
you prompt the user for text input and
this introduces the first step in
actually making things dynamic and this
is similar to how inputs work in forms
for example but I can say do the laundry
right and hit okay cool wait and
inputted do the laundry and we assigned
it to a variable if I examine my
variable now I can say for example and
what do we call it we called it task
input so if I say task input we can see
that it says do the laundry the string
is do the laundry right so we've got the
value of whatever we we prompted the
user for whatever we ended up filling in
to that prompt so we have a couple of
variables here we have JavaScript alert
so we have JavaScript prompts we have
sort of a couple pieces that we can use
to to do some dynamic Java scripting and
also thank you so much to all the people
that followed so let me just make sure
that I've caught up here so graybeard 97
good thing I did get you kill shot
tempeh station Varg or Turo
wash wash in Zig Siddhi CJ LaGuardia
Olga Marfa Nova to Mort Menzel X saw man
and Lord Henry thank you all very much
for the follows great beard says seems
like prompt is a low-level method in
JavaScript can one override this method
to change the functionality it's a
function provided to you by the by the
browser so it's not something that I
think you can easily change the behavior
of but typically you won't even use this
you'll use a form in your actual page
and you'll and will actually see this
here pretty soon
prompt was just
of a 90s early 2000s way of doing it but
it allows us to demonstrate the
primitives here so this is what we're
going to do and yes tempest station says
let is the better version of our better
we're depending on how you look at it
but most people I think would agree that
it is more it's easier to debug so let's
go ahead now we have the value of our
task right so we can we can immediately
console dot log it right console dot log
is just a way of printing to your
console in Python this is print in Java
this is system dot out dot print line
it's kind of all the same thing so will
actually print task input right away if
i refresh and i'll say cook dinner as my
task now it immediately and this is
still here actually since refresh this
cancel i don't want this here anymore so
let's go ahead and hard refresh cancel
the console still up so there we go
so it's refresh now i'll say do the
laundry and it prints out do the Longet
prints out exactly what we typed into
the prompt so this is actually the
fundamental way we can start looking at
making our own to-do list our simple
to-do list right so we'll say i want to
have a list of tasks right a to-do list
i want a way of storing a bunch of
information together in python it's the
list in Java and C it's the array in Lua
it's the table in JavaScript we'll just
use the array so we'll say let tasks eat
be equal to these empty square brackets
and this is a dynamic list we can
actually add to it so let's go ahead and
say tasks dot and actually I think this
is join if I'm not oh no its push so we
say push task input and this will
actually let us push a new value into
our list so I can console dot log tasks
here at the very end and I'm not doing
any console dot logs of the individual
tasks but I'll I'll just
cancal I'll just console dot log the
list itself once we've added one element
if i refresh i say cook RS and make
breakfast right very very sort of dull
themed to-do list here but now you can
see that we've actually outputted not a
single string but rather a list an
entire array right so we can see it by
these square brackets we can see that at
index zero and this is something similar
to see for example we're in an array
everything is zero indexed in JavaScript
is the same away your arrays are zero
index and we can see that at index zero
we have the string make breakfast our
array is of length one and then it's got
the prototype of the array object in
JavaScript which means that it is it
basically is the object-oriented way of
JavaScript telling this particular data
structure that it's an array and should
satisfy and have all the functionality
that in array has right so this is our
beginning point for how we can create a
to-do list right we can actually store
all of our tasks not just one string at
a time
if we go over back to our code here I
want to make this flexible so that we
can add a bunch of tasks I don't want to
just add one task so to do that if
you're familiar with the language like C
or Python you might be familiar with a
while loop so we can say while
first of all let's let's do this in a do
while actually so I'll say do and then
we'll say both of these while task input
is not equal to quit right so this is
interesting and it might be easier to
read in this in this way but a a while
loop just lets us do something over and
over again while something is not true
or false right so what I'm doing here is
I'm basically saying okay do this ask
for a task and then push it on to the
array as long as
the task is not equal to quit right and
we can go back over here to our
application and now let's say I want to
make breakfast task input is not defined
oh and this is a this is a problem that
we get with block level scope actually
with let so we need to actually say let
task input equal to a blank string we're
gonna use it if we define let in here
it'll actually make it only visible
within here so you have to use var in
this particular context if you wanted
the condition to be to be able to
reference the task input so instead I'm
gonna define task input up above let
right here and so that now the du has a
reference to it and also the while has a
reference to it because right now if we
define anything with let because let has
block level scope remember it will just
get discarded as soon as the do is
finished it won't it won't have a
reference to it if we specify it up here
we can assign it values in here and
that'll still be visible within the wild
condition so this is one of the key the
differences between let and var is you
have to be kind of careful with this
sort of thing now if I said var task
input is equal to prompt and I just got
rid of it here now this should actually
work I can say make breakfast and then I
can say make lunch and then I can say
cook dinner and then quit and then
notice that here now we have a
four-pronged or a four unit list of
items right I have make breakfast make
lunch cook dinner and then quit on all
of those are stored in the array even
quit which we don't necessarily want but
we can take a look at how to fix that I
think there's a bug please add the first
task quit can you handle it so if we go
over here and I say quit or rather its
refresh and quit it does indeed quit so
that works fine the issue here to your
point is that if we want to in this this
gets in
the next part of the program if we want
to output the entire list well we'll see
how we can maybe get rounded right so
let's go over back here and actually
implement this right because we don't
want it console dot log the tasks array
because this isn't very user friendly as
you can see if I'm if I'm outputting
this and I'm saying make breakfast and
then blah blah blah blah blah blah and
then quit I'm not getting very user
friendly feedback here of my list I'm I
want to actually display everything one
at a time and in order to do that we
need to demonstrate for each right so
this is a great function that you get
with the array and this is also a
demonstration of first-class functions
which is a very important idea in
JavaScript and something that you will
see all over the place and we'll see
this actually when we get into our when
we get into our Dom version of this
application it'll be kind of the same
thing if I say tasks dot for each right
so for each task
I want a console dot log it right and
then kill shot is saying if task input
is not equal to quit yeah exactly we
could do that too that would be the
simpler way to do it sure so if I said
oh and also semicolons are optional
which you might have noticed because I
don't have a semicolon on this line but
for good practice make sure you include
them at least stay consistent I can say
if task input task input is not equal to
quit then push the the task right just
like that and that works fine there's
other ways too we could just add it
blindly and then just output all but the
last element so it kind of depends on
what you want to do does JavaScript have
the concept of break and continue yes it
does
so shoot what was I I think I got I was
gonna make a point I think I got
sidetracked mentally sidetracked but
wasn't gonna say well we solved at least
that issue
thanks to kill shot who posed it in the
chat we can certainly do it that way you
can do it other ways you can splice the
array up to the last element but for
each
is what we were doing is we were talking
about if you want to actually output
each individual element of the array or
if we wanted just to just to iterate
over the array and demonstrate how that
works right the interesting thing about
javascript is the end the same thing in
Lua is that functions are objects just
like other data like strings or integers
right I can say function in here notice
that oddly I'm for some reason
specifying a function in on line 18
inside of for each which is itself a
function so my function is actually
taking a function and the interesting
thing too is this function actually
doesn't have a name it just takes in a
parameter E and this is what's called an
anonymous function or a lambda function
and this is really cool because this
demonstrates that functions are just
objects that you can pass around like
other bits of data so it's a very common
pattern that you see and makes for a lot
of really cool flexible code but if
you're not used to this idea this might
be very new concept for you
so I would pay attention to this detail
if you're not familiar with it and be
aware that we are actually passing in a
function as a piece of data to another
function can't emphasize enough how much
better you are than my lecturer thanks
Tampa station I really appreciate that
it's a awesome compliment I mean great
boot says especially the hair he has
great hair thank you very much I
appreciate that adamantine says that's
when a lambda function is yes an
anonymous function it derives from the
lambda calculus which is a sort of
mathematical way of formalizing
computation from I believe it was
created I think it was created by Alonzo
Church in the 40s or 50s I'm not 100%
sure but it's pretty old and it goes
kind of hand in hand with Turing
machines and defining computation in the
context of Turing machines I'm learning
all this stuff kind of right now and so
it's kind of fresh but I also don't know
all the details but yes in the context
of most modern languages when you see an
anonymous function it's also considered
a lambda function the two are kind of at
least in terms of their nominal a
genomic later
the same in Python you actually can see
this because anonymous functions are
literally written out with lambda you
write lambda and then you write out the
function and lambda functions of Python
are not my favorite way I've been
talking about are dealing with anonymous
functions because at least per my trials
you can only have one line lambda
functions in Python which kind of
defeats the purpose for a lot of use
cases but yes lambda and Nonna's
functions are one of the same
immediately invoked function expression
says new criticism yes I think that's
the same thing immediately invoked
function expression
this sort of way of talking about it
it's been I've heard of this and read
about it but it's been a while
immediately invoked function expressions
can be used to avoid variable hoisting
from within blocks protecting us pulley
in the global environment oh this might
be more for when var was a thing because
of the function scoping yeah that's what
this the whole function scoping is but
they especially with this and sort of
things like that arrow functions kind of
change this a bit yeah that's what this
is yeah yeah so this was a very common
thing that you would see a lot with
libraries in JavaScript prior to es6 it
might still even be a thing but you
would effectively evaluate everything
within the function block so that you
didn't have all these variables because
everything is function scoped you
wouldn't have all these variables that
you defined in your library
hoist it up into your global scope it
was kind of a it's kind of messy and
that's one of the reasons that for the
function scope is kind of a pain in the
butt right but es6
as said here has let and Const which
have block scope which kind of negates
the need for this idea but the two are
separate the two are related in as much
as the anonymous function was used for
that but the you use them in different
use cases certainly I think it's when
you write a lambda and then call it
right away oh yeah yeah yeah yeah that's
that's used to you can certainly do that
for a lot of a lot of use cases but in
this particular case yes this is a
anonymous function that we're writing in
this for each basically this for H is a
function that that when written expects
a function that you pass in to it and
just in a loop will just call for every
element that function given that element
right and so we're just writing that
function that word that we are passing
to for each that will execute for us
every element and that's that's what
this e is and that's why I've actually
written it as e because it will sort of
inject that element from the array into
this anonymous function that you're
passing in and this allows you a lot of
flexibility you can therefore sort of
inject I don't know dependency
injections the appropriate term here
because it's used that's more use in the
context of libraries and when you have
and want to update the way things work
and also the there's a pattern a design
pattern that revolves around this idea
that I don't remember offhand it's not
the factory pattern but I'm trying to
remember what pattern it is it's been a
while but effectively this allows you to
put in any function and for each will
work given that function and therefore
for each is a very flexible function
that can change his behavior to suit
whatever needs that you want and then
callbacks are yeah it's a callback
function effectively
before each we'll call that function and
callback functions use a lot in
asynchronous programming this is
actually a synchronous function but it's
the same idea you're gonna pass in a
function that will get called whenever
this for each runs and does its thing
right and someone actually asked a
question up here that I missed thoughts
on webassembly I not too familiar with
webassembly I know that M script in for
example which I think relies on it has
done some really cool things using unity
I think unity is written in web assembly
and also its web GL players written web
assembly and even like love Jas which
was an M script in project which
compiled love 2d applications used web
assembly I know that there were a lot of
higher ambitions with web assembly and
ASM Jas and those types of libraries but
I'm not 100% sure of the state of that
ecosystem at the moment so I can't
really advise into I can't advise
terribly well so it takes in a function
and loops for each variable in the
function it takes in a function and
loops for each variable in the tasks
array so it's going to say tasks for
each task and tasks run this function
and pass in that specific task here and
call it e that's what that's doing and
then doesn't this potentially cause
infinite loops asks Lord Illidan no
assuming that your tasks array is finite
in size which it has to be by definition
by the context of being in a programming
environment your tasks
arrey is just going to iterate over
however long it is and run that function
one time for each element now if you
have an infinite loop in your anonymous
function then obviously that will be an
infinite loop but that's on you as the
programmer at that point not necessarily
a design decision of the for each
mechanic what is Ruby on Rails Ruby on
Rails is a web development framework
that uses Ruby and Ruby as its scripting
layer and has a bunch of sort of
built-in infrastructure for you to build
up a web application quickly but it's a
very specific way of doing so oh and not
equals equals that's an important thing
to talk about so we've been doing that
here not equals equals is basically a
way of enforcing that a variable checks
not only its type but the value of the
thing on the right so for example you
could let's say I have a variable choice
as equal to zero and I want to say if 0
is equal to choice and do something
right so if the user this is important
if for example the user enters string
input so if if I am querying the user
for a set of numbers let's say I want
the user to enter whether they want to
choose number one number two or number
three they're gonna return to us string
data right because the prompt returns a
string so if the user types in 0 it's
going to basically do if the if let's
say user choice is equal to the string 0
it's going to be a string right because
they entered string input it's not gonna
change that to a number for us
automatically but if we compare that
against 0 the number 0 width equals
equals what that's gonna do javascript
does loose type comparison so it's going
to actually say it's going to check to
see whether 0 evaluates numerically and
as a string so this will actually be
true if this is a string and this is the
number 0 it's actually going to return
true which can cause you problems
sometimes
what your program is and now if I say
equals equals equals choice that's doing
a stricter type check we're actually
checking to see whether it's whether
it's not only than the value but also
the datatype whether it's a an integer
or a number and whether it equals zero
not just a string that could happen to
be zero so this is a source of some
subtle bugs generally the advice is
always use triple equals unless you
absolutely 100% know what you're doing
it can be it can be a problem
devastation Janice seems awesome unlike
C++ don't have to manually include
libraries yeah I mean it depends on
where you're trying to do there are a
ton of libraries for JavaScript jQuery
is a really famous one but to do a lot
of things that you would normally have
to do in C++ with libraries yes it is
easier to do things javascript is more
flexible language you get first-class
functions like this even though in
recent versions of C++ this is also
possible dynamic languages generally
offer you a much greater layer of
flexibility and a foundation to work on
but at the expense of speed generally
C++ programs can be a lot faster they
compile down to native code this is
running in your web browser still pretty
fast but not the same as not gonna be
the same speed as C++ jazz makes sense
if you actually read how it works but it
might seem like it doesn't yeah now
absolutely like there's the watt talk if
you're not familiar if you're not
familiar with this C plus or cs50
actually uses this so go to this if you
want and destroy all software comm slash
talks slash watt on your own time watch
this talk it's an amazing talk on sort
of the weird idiosyncrasies of
JavaScript you will be very entertained
by it it is a video right it is indeed
I'm not gonna play it just to avoid any
issues with copyright or whatever but
and also just because it's a kind of
it's gonna take a few minutes but this
will show you some of the weird things
that you get by sort of using
type comparisons and JavaScript that's
kind of the main sort of feature of this
talk and two web streaks point we are
digressing again so let's go ahead and
get back up to speed so now we have this
for each function let's go ahead and
console dot log remember we're passing
an e from from our tasks array it's
getting injected into that function I'm
gonna say console dot log E and also I
have to do one thing really fast David
asked me to text him to let him know
that we were streaming so everybody
fingers crossed and hopefully we'll get
an appearance by David in the chat now
that we've specified that for each task
we should output e where e is what pass
into this function which gets injected
by this for each loop it's gonna be each
individual task I'm going to run the
code let's say make breakfast make lunch
and make dinner and then quit notice
that now instead of getting a list
output into our screen with the sort of
square brackets we actually get a new
line separated list of all the strings
we've actually console dot log each and
every one of them one at a time using
this for each mechanic given to us by
JavaScript a built in array data
structure so pretty cool right
it's a lot more flexible we could do
other things with this actually so let's
maybe write a function that takes in a
list of or rather let's some yeah let's
do that let's say let's get rid of all
of this so we've made a basic to-do list
in in vanilla JavaScript right using the
console which is pretty easy oh and to
Adams question where did he come from so
e
so this function that we're passing in
here to tasks so this function is
basically gonna every time the this
tasks loop basically gets an individual
task from task the for H is basically
saying for each task so I'm gonna grab
one task do something I wanna grab
another task I'm gonna do something I'm
gonna grab another task I'm gonna do
thing from tasks so it's going for each
task we want to do some function on that
task and we want a reference to what the
task is right so we pass in e the actual
for each loop is going to inject e into
that function for us and so that's how
we get a reference to each individual
task so therefore we can console dot log
E and that will be our task if that
makes sense so let me know if that's a
if that makes sense or not our lists
immutable when iterating through them
what if the function adds to the task
list that's a source of bugs absolutely
so I don't believe that JavaScript lists
are actually immutable so I think we
could do like tasks stop push filler for
example right and I think this is
technically an infinite loop so if I
were to run this and say blah blah quit
maybe not actually tasks oh okay I guess
it it looks like it pre caches the tasks
based on what I understand it takes in
just the task as it was at that point in
time when we first actually called the
for each loop and then calls it on just
that part of the list and then it's
actually adding the in a might it might
maintain like a starting and ending
index and that's what's going on here
but it's not immutable as you can see we
are adding filler but it doesn't create
an infinite loop which actually is the
case in some programming languages if
you're doing this in Python for example
this can cause you issues and shout out
the David for tuning into the chat
these methods are functional so they
either return new array or a new result
these methods are not functional in that
case they're not purely functional so
these functions are actually just these
are extra aren't returning anything
these are performing side-effects
these are none funky subroutines more so
than the arc functions anonymous
subroutines as you can see where console
about logging and then we're adding to a
an array so this is actually the
opposite of functional with immutable
data structures we're actually very much
using mutate
here which we typically would not want
to do in a functional domain if that's
what you're talking about but in this
particular case the list itself the
tasks list is mutable while you're in
this function so you can actually add as
we saw here we we added filler for each
individual time we ran the loop it just
adds it to the end and presumably
JavaScript is calculating the start and
the end index before we begin the loop
to prevent this exact problem this exact
issue of adding stuff to the list that
we're iterating through at the same time
which would definitely cause infinite
loops MapReduce and filter those don't
mutate yeah that that's a different use
case though that's that's certainly
different miss Deane 12:16 moby-dick so
intent is a char brosef thank you all
very much for these follows yes
for each does Java Script does not
enforce purely functional programming
it's a there's libraries that you can
get immutable j/s is one of them that
will do this but javascript you have to
enforce functioning functional
programming by writing the write
functions and using const and things
like that it's a bit of a different
ecosystem it's not a purely functional
ecosystem it's the the onus is on the
programmer to do things if you're
looking to actually program things
functionally and this is an illustration
of how exactly non functional you can
program in JavaScript so we'll do
another example here of another for each
so we've done our sort of to-do list
version one all done in the console
using prompt so we're going to migrate
into a Dom version of this very shortly
just to illustrate what you can do with
for each again to make it maybe a little
bit more illustrative I'm gonna say let
total equals zero and I'm gonna say one
two three four five six seven eight nine
ten on a sort of anonymous list and
anonymous array we're not assigning it
to a value although we could I'm gonna
say for each on this array call a
function E and I'm going to say total
plus equals E and what this is gonna do
is if you're following along this should
just
actually people that chat can maybe
guess what this does if you're not
familiar if you're familiar don't don't
guess he's probably know but if you're
unfamiliar and this is your first time
in JavaScript tell me what this is gonna
do because if you if this is your brand
time brand-new if you're brand new to
JavaScript then this should be a nice
exercise for you you're the total being
logged is gonna plus equal whoops my bad
yep in the log the total not eat it was
some all the elements exactly by sort of
for eaching all of them adding that eval
you which gets injected from the list
remember this value is gonna get put
into this eve part here when we pass
this anonymous function in a for each
it's going to run this function every
single for every single element passing
an e along the way right so it's pretty
useful mechanic let's go ahead and run
this and we do indeed get 55 so bad
ignite unfortunately was incorrect with
65 but that is okay most people it's
look like got it Jay s isn't really a
functional programming language is more
of a dysfunctional programming language
- shots fired by andrey and the chat
they're es6 at least is a nice step
forward I will say lots of love for
David there in the chat as well so we
have a pretty good sort of foundation
upon which we can build everything one
other thing we can do to illustrate for
loops for example I can say let elements
equal this array let's just illustrate
what this looks like with a for loop
just so that we can show a more
traditional way of doing this I can say
for let is equal to zero I is less than
elements length I plus plus will say
total plus equals elements at index I
and then will console.log total right
with this should give us the exact same
value if you're familiar with C or
Python you might have seen well Python
does for loops a little bit differently
but if you're familiar with C for
example or Java or some other languages
and that in that sort of category of
imperative programming
parrot of object-oriented programming
then you're familiar with this idea of a
for loop where you have a counter and
starts at zero you iterate you increment
it basically here as long as I is less
than element length in this case it's
going to be of length two ten just go
from zero to nine
because remember arrays are zero indexed
with 0 1 2 3 4 5 6 7 8 9 I'm gonna add
total and then we can console dot log it
it does the same thing as our for each
version of this program only with for
each you don't have to necessarily know
in advance how large something is and
you have a little bit more flexibility I
think and conciseness but you can kind
of accomplish the same thing depending
on what you're going for is there a
problem with doing it the traditional
way no not necessarily I would say for
each can be a little more readable
because you don't have to necessarily it
basically manages this for you with for
each which is nice you don't actually
have to do less than length and have a
counter that starts at 0 you just inject
an anonymous function and the for each
will actually handle everything handle
the keeping track of the size for you
and this actually gets around that bug
that we saw earlier where you can mutate
the array as you're going along this
this version will probably be an
infinite loop if I say element stop push
let's say push hello or bulge say 10
right this will probably break yeah in
this case it looks like yeah it's still
going yep so it crashed because it's an
infinite loop because we're actually
adding to the array within our for loop
so it's more error-prone so the for each
actually manages this for you it
prevents you from breaking your own
webpage let's go ahead and get rid of
that
save it refresh and then now we have
ourselves back to 55 what if you have to
deal with the object and the index of
the array at the same time well the for
each work then I believe it does I
believe there's actually for each index
javascript so
think it gets in I think it gets an
element and in index as an optional
parameter I have to just remember this
hundred percent yeah because I think you
can just do for each and then let's say
elements for each function e and then I
where I is the the index so you can
actually see here my intellisense is
actually helping me out a little bit
which is really cool this sort of comes
with free uh comes with vs code for free
you'll actually be able to get a direct
reference to the index by just passing
in another value which gets injected by
for each again into that function
because for each underneath the hood is
sort of implementing this for loop for
us right so it knows the I so it'll pass
it to our function and we can very
easily now just say something like
console dot log index and then total
plus equals e right or rather I not
index and then now I can console that
log of the total and if I'm not mistaken
whoops wrong page you do indeed see that
we are outputting the index which gets
injected into the function for us and we
have our total located at the very end
American sweat Ziya nights in before
twitch or mint and X polar dreams thank
you very much for the follows why are we
doing for and for each again ask whip
streak we were doing it to demonstrate
how to iterate over our to-do list and
output it to the string output a list
and so that's all done with now which is
great and this is more just sort of lay
out a framework for fundamental
JavaScript programming right you need to
know how to iterate over collections if
you want to store multiple pieces of
data into one thing this is not how I
would want to implement a to-do list in
JavaScript though in that using the Dom
right I want a visual to-do list I want
something that I can actually see my
lists in the web page and click on them
and have them go away and all sorts of
features like that right so let's
actually take a step in that direction
make a more visually interesting to do
applicationthis console is not what I'm
into and we're actually going to get rid
of the developer tools right now and get
into the actual Dom so the DOM is
interesting there are a lot of functions
that come with web browsers for free
that you get to use to manipulate your
webpage as it starts off so let's go
ahead now and figure out what we need to
do let's go back to our index.html and
uncomment this block of code that we did
before and come back to what we
initially teased at the start of the
stream and I'm actually gonna get rid of
the second list because I don't need
this list here this was to demonstrate
list style so I have some static list
items here and I also don't like the
fact that we were prompting earlier so
we're actually going to take a look into
getting input not from prompts but from
the Dom itself from elements some inputs
in our webpage so this is going to be a
few different steps forward not just one
or two so let's go ahead and look at our
page here so I know that I have my h1
which is fun h1 is not gonna change the
UL is gonna change and I don't want
these el eyes here because those are
meaningless those are just static to-do
lists to do items I want to start fresh
in my application and you could enter
get a web a database with this if you
wanted to and make it more dynamic you
can use something like a local storage
we're not gonna dive into that today
but we are going to show how to get a
dynamic to-do list up and running so I
have a ID on my task list and basically
what I want to do is I want a text area
somewhere and a button so I can type in
a task click the button and have a new
task sort of added to the page
dynamically which is not something that
we could have done before right now with
HTML normally when you submit a form you
know that takes you to a new page right
it's a little bit different so let's go
ahead and add our new elements that we
can get some input from the user so if I
say input type is equal to text and
placeholder equals a new task
oops and then let's say also after that
I want a button which is gonna say add
task right let's do that
boom so now we have a UI that sort of
lets us it's a little bit small some a
zoom in just a little bit so this is our
UI for adding a new list to our page a
new list item to our page right now I
can type whatever I want all day long
and nothing's gonna happen
we actually have to tell this
application what to do and normally
because the button is actually not in a
form it's actually not going to submit
to a new page anywhere so we can use
this for just adding stuff to our
current page we don't need to worry
about going to another page and linking
to it and then passing get parameters or
post parameters we can just do stuff on
our actual we can just manipulate the
Dom the document object model and change
how things are right so let's bring the
developer tools back and take a look at
what our Dom looks like this is our sort
of our Dom this is the I mean this is
more or less the HTML that we're using
but we have a ul right and it's empty
and what I want to do to manipulate this
Dom is want to actually add allies to
this I want to every time I click this
button I want to get the value of the
text that's in this text box and I want
to create a new li in this ul that just
takes that text and puts it there right
and I want to be able to keep doing this
over and over again and what I should
also do is clear the text box as soon as
I do that so that we start with a brand
new instead of text right so this is
sort of very basic Dom manipulation this
allows us to add stuff dynamically given
you know click handlers or timeouts and
all these other sorts of things to our
web page a little bit more flexibly than
we could get with just pure HTML and CSS
jss single threaded but can do
asynchronous stuff that is correct
I have a question why is no one
streaming the Swift language um I don't
know Swift but if somebody might know
Swift here I'll ask around and see if
maybe somebody can do is trim on it it
might be something worth learning in the
future I'd have never gotten into mobile
development but I'll have to I have to
take a look at it
cool so we have our to-do list sort of
frame here are our foundation let's go
ahead now I'm spacing out for my sake
let's go ahead and figure out what we
need to implement in our and our
JavaScript to make this work so let's do
that
so to-do list version two Dom what I
want to do is basically want to say
whenever I click this button I want to
create a new element on the page a new
list element and add that to the UL so
you can get references to any of the of
the actual elements on the page usually
by something called get document by ID
you can also use something called a
query selector so this task list for
example has an ID of of tasks list all
right aptly so this button has an ID I'm
gonna call it tasks button and the input
doesn't have an ID but I'm gonna call it
text field so now I have an idea
sociated with all of the important
pieces of my UI that lists the text
field and the button itself so now I
have a way of actually pointing at the
elements that I care about and I could
have also done it with something a query
selector which we can take a look at too
so I can say let text field be document
and document is basically just your
webpage rain this comes built-in to your
to your web browser so you can get a
reference to it I want to say document
dot get element by ID and then text
field right and let me just console dot
log text field so you can see that we
indeed got a reference to it I'm gonna
go to the console refresh and it's
actually set to null and here's an
interesting thing anybody have any
guesses as to why they're why my
document dot get element by ID is know
why it's not returning to me an element
I clearly have in my page here text
field ID on my text my actual input here
so why is it null it then subject I know
but I'm curious how one would pass
messages between pages eg message queues
pub/sub let's say we both were looking
at the to-do list and you added one I
would like to see your addition on my
screen typically there's some of the
WebSockets I think people to people get
established a socket connection to the
same page and then you would basically
broadcast a change to the page on that
stream and both people would see it when
it happens and it looks like Adam just
also posted that Lord Illidan script is
running before the button submit in this
case we're not actually doing anything
with a button but you are on there in
the right track the the problem and the
true can easily saying the text field is
empty that's not actually the problem
it's no because you didn't actually
click it it's not because of a it's not
because of a click handler we're not
actually clicking anything right there's
nothing in here checking for clicking
there's a different issue
I'll let a couple more guesses come by
the Dom is not rendered yet says cronix
82 hey there we go what was the name
Clinics 82 yeah essentially HTML works
top to bottom right so it actually
starts in the head goes down here it'll
actually execute the script and
everything inside of it before we even
go into the body so there is no element
with an ID of text field at the time of
going through our head and typically the
way that we get around this with vanilla
JavaScript is we just put our script at
the bottom of the page like this now if
i refresh the page notice that we do
indeed get our input right here see the
ID is equal to text field it basically
renders the element just as the HTML
itself and branded david says the same
thing james code runs before the element
is rendered adding deafer will fix it as
well J only the 7th you want to define
what deafer means I'm not entirely sure
what you mean but yes one thing you need
to be aware of
make sure your javascript is being
rendered after you're being interpreted
after your Dom is defined otherwise you
will get issues and you could do
document dot ready that is a jQuery
thing I believe window load is what you
do in vanilla JavaScript Oh defer write
a script that will not run until the
page is loaded defer sorry I misread
that or async might work yeah there are
a few ways around it this simple way is
just to put it at the end of your of
your body so that way at least the Dom
is in place right so now we have a
reference to our text field which is
great we can we can even console dot log
the value of that text field but right
now we're not going to do that but now
we're on the sort of right track right
chatez crazy today people love Jas yeah
a lot of a lot of love in the chat today
which is awesome super happy keep it
coming
try to
answer as many questions as possible but
I realized that we might have done a
little too much of that earlier on in
the stream should all scripts go at the
end of the body by default not
necessarily so when you're using
something like jQuery or other libraries
they have functions built into them that
let you actually specify that your
scripts they have a function that you
can call that will make sure your
JavaScript gets run at the end of the
body's rendering and there are other
things you can do too like window dot
onload you can also check for a
particular event and add event listener
for Dom something loaded and that will
actually take care of all that rendering
or all of that behaving in the proper
way but to begin with if you're starting
off and you're not using jQuery just put
your script at the end to be simpler
Venis code is written JavaScript I
believe so I believe vs code is a
chromium application so yeah or maybe
not chromium maybe electron which might
be chromium actually so yeah I think it
is written in JavaScript uh-huh I just
like J s the most from all blank which
is I know by far says that McKnight yeah
JavaScript is a bit of a weird language
but it's gotten better recently so you
know es6 is pretty good American sweat
says electron yeah that's what I had
thought and I thought that electron was
chromium underneath the hood at least
cream told me it was so yeah you need
the co-host role modern and handle some
of the questions responsibly enforce the
chat hiding with the less than sign yeah
that might be that might be true or
maybe I should at least get a movie
focus more on the questions fewer of the
questions please do about data
structures and algorithms I think we
have plans in the future I think Rodrigo
was interested in doing that so we'll
we'll take a look at that and then
Janice used to be a baby language but
it's pretty powerful now yeah it's
definitely grown quite a bit
let's get a reference to the other
elements we have so text field let's go
ahead and grab the button so let button
equal to document dot get element by ID
of what do we name it we named it task
button and we have task list now we
could say let a task list be equal to
document dot query selector which is
cool because this actually
pass in a CSS query to get our elements
we can pass in hash task list here and
now we can we can look for classes we
can look for elements we can look for
IDs we can look for nesting we can look
for all the things same things that we
can basically do with CSS this is
essentially a much more robust version
of get element by ID but we are not
going to be using it too much we'll just
use it here so that we have a
representation of it making a stream
channel in the cs50 discord might lessen
the amount of questions the problem
though kinase is that I think it's
important that people do get their
questions actually answered because if
people have questions for me and I'm not
answering them it kind of defeats the
purpose of having this be a bilateral
system right of bilateral streaming set
up streaming I think part of the
streaming aspect is interaction with the
community especially for people that are
confused or need real-time assistance
and also for some of the tangents that
we go on off onto I think it actually is
often educational and helps clarify a
lot of things for people that are
otherwise lost if I'm talking to you or
talking at you and you're lost and you
can't ask me for help live kind of
defeats the purpose of the stream and of
making this educational so I think I
prefer having this bi-directional layer
of interaction however I think sometimes
maybe we could tone it back a little bit
depending on what we're talking about
it's hard it's a hard balancing act
working on it though
but I'm disinclined to stop answering
questions because then I feel like we
stopped adding value in the same way
personally but I can see how folks that
are more experienced might get a little
bit impatient because of the the volume
of questions and that's totally
understandable and I apologize that
that's your perception of the stream
cool so we have references to the three
elements that we care about now what I
want to do is when the button gets
clicked this is the next part when I
click the button I want to grab the
value of the text field and then add
that to an Li so we have three different
elements sort of talking to each other
now which is kind of cool we have all
these different things sort of interact
Dingman are all sort of tied together
wire together so what I in order to do
that I can basically just say button dot
on click right and this is something
that's provided to you but with all
elements in JavaScript on click is gonna
be equal to a function right this is
cool so I can actually assign on click
to be a function in anonymous function
which we just saw with for each so sort
of these concepts are coming back
together right and once we click on that
button and we get a function let's
actually just test right now let's make
sure this is working when it calls it a
log and say button clicked right so
pretty simple demonstration let's
refresh let's click Add task and we do
indeed see that I can click this button
and we get console dot log button
clicked right we have interaction now we
have user interaction sort of event
handling listeners rather for you know
user input which is great and Lord miss
gyro thank you very much for the follow
is there a chance to do a stream on mid
max I'll go my head is hurting
understanding and implementing it Brian
just did a stream are a lecture on that
somewhere else so I'll see if maybe he
can talk about that does PJs have
something similar to jQuery document
already yeah it does so you can do
there's a few different ways to do it
you could do for example window dot
onload is equal to function and you get
the window by default in JavaScript so I
can do something like that which will
basically say onload is essentially
called by the window when everything
gets loaded so I can say window dot
onload equals all of this stuff and then
call all this stuff right so again
similar to on click you can see button
dot on click has the same pattern where
he was signed into anonymous function
onload you get to sign an anonymous
function there's also a an event that
gets fired by the browser which is more
I think more supported by browsers than
onload and I forget offhand the exact
the exact button or the exact event that
it is I think it's addeventlistener Dom
ready let me see Dom content loaded so
you can say
I believe this document yeah document
dot addeventlistener
Dom content loaded and what that'll do
is that will basically wait until
everything is loaded in the Dom and then
the with the document for you will
actually broadcast this event which is
just the all the event is is Dom content
loaded like everything is loaded do
whatever you want to do with it now
right and so in this function here is
where you would actually pass in all of
this code that we're writing in this
module this will ensure that everything
runs after the Dom is ready to be
manipulated and this means that we could
therefore put this in our head or
anywhere in our application and it will
all work like we define this at the top
of our head but it only gets fired only
gets executed once this Dom content
loaded sort of event it gets fired by
the by the document so there's a feeder
and window dot onload is essentially the
same thing this will happen the same way
this is an older way of doing it
this one rather and just happens to be
more flexible you can add event
listeners and specify your own events
and fire your own events and have things
happen depending on what you're trying
to accomplish but we're not going to do
any of that we're just putting
everything at the bottom of our file for
ease right now but that's how you would
implement it so when we click the button
we now know that we get a we actually
get a message we get some feedback so
the button does get clicked so let's go
ahead now and create a new element to be
added to our list right no shout out to
my dad in the chat I said hello gang
virtual hugs to a Danny Bella and Andre
and as Li the birthday game was amazing
loved it yeah my dad turned in for that
and thanks to my dad for tuning in as
well shoutouts to Chaz to him everybody
gives some love how is air handling done
in JavaScript is there the concept of
exceptions and try-catch I don't think
that JavaScript has exception handling
by default I mean let me verify that
actually does it have try/catch oh it
does ok cool so you can actually you can
try catch I didn't know this was
actually a JavaScript thing I rarely see
it happen probably because it's more of
a
some that's implemented in a library I
want to say but yeah it looks like you
can throw you can try and catch just the
same so I don't think you necessarily it
necessarily expects a particular
exception does it let me see try catch
error looks like it just catches an
error and then you have to throw that
error here so you try all this stuff and
then error will become whatever this is
and throw right so empty will be what
air gets in this particular case too low
too high so this is cool
it goes to show you how how much I know
about JavaScript right apparently not as
much as I thought to design the AI for
tic-tac-toe oh right because I think I
think Brian actually did implement min
max for tic tac toe in his beyond class
so I'm not sure if Brian is a paying
attention wants to elaborate on min max
for Farouk and for anyone else
definitely do so but I know Brian is
probably hard at work as an undergrad
button dot click does not require us to
implement bounce time right balance time
you want to elaborate on what you mean
tempo station I met more general
questions about the streamer ideas for
future streams basic questions that
aren't loosely tied in stream maybe even
have a general weekly Q&A stream of
random technology programming questions
I would say that would work if we were
doing more of a full-time thing but
we're probably only gonna have two
streams a week just because we have only
a limited amount of time that we can
keep doing this week you know every day
during the week so probably gonna be
like two streams weekly and during that
period of time that's the only period of
time people can ask questions so I don't
know maybe if this were done every day
for eight hours like a traditional
full-time stream may be more appropriate
but at the moment we're going to have to
we're gonna have to probably be as fast
but as general with the questions as we
can be not related anybody here have the
gallbladder removed
I got stones but afraid to remove it oof
I'm sorry Alex that's not as painful
hope that you all the best with that I'm
not sure if you're being serious or not
but
you are then that sounds very unpleasant
and I wish you all the best if you're
going to get surgery for that Oh bounce
time as in time to prevent multiple
clicking on a single click I'm not sure
actually an app tool I have to do some
research on that and see the web browser
probably implements something like that
and there's probably a double click
mechanic in there free event handling
but not a hundred percent sure nice ok
awesome alright so we've talked about we
just talked about onload we talked about
addeventlistener which we haven't talked
into tremendous detail but maybe in the
future we'll take more of a look at it
well then a custom event system right
now what we care about is when we click
the button we want to add a new thing to
our list and so that means that we need
to basically take this empty UL right if
you go back to our page here this empty
UL that's here right here it has no no
allies in it we need to create a new Li
from scratch and basically tell the UL
to sort of add it as a child we need to
make the Li and go inside the UL so it
becomes a child element right so let's
go ahead and say let inside of our on
click function we're gonna let Li or new
task we'll say a new task equal to
document create element F type Li right
so now we have a new task that we're
using a new function that's part of the
document which is called create element
let's just create a brand new element is
just in kind of in outer space somewhere
at this point that we can therefore put
wherever we want to in the Dom so I can
then say for example task list dot
append child new task right and this
will add a new Li too rul
right this will take a dose create a
brand new task and then it'll append it
as a child to task list which is why
it's task list append child right and so
let's go ahead and test this out to make
sure that we're actually working this is
actually working here let's go over here
I'm gonna look at my elements view right
here and refresh the page and then just
gonna click on this you can see that I
click the button and it did indeed add a
blank li I can do it again and again and
again and again and this is actually
manipulating now our Dom every time we
click the button we're adding a brand
new element that we created in
JavaScript this isn't something that we
had to code in HTML ourselves this is
something that's totally dynamically
generated with our button presses right
so this is cool we actually have the
ability to create new Dom elements now
the lis are
empty so we need actually get that text
information right so let's go ahead and
we'll say let task text be equal to the
text field dot I believe just don't
value work if I'm not mistaken and once
they give me node value I have to go off
hand out can't remember let's see get
text from text field JavaScript and this
is the this is the power of Google input
text value okay so it's just a value
okay so it might just be vs code messing
with me and that's what's confusing me
but we'll just say text field dot value
and then what we can do is we can say
new task dot append child well rather
actually what we need to do is we need
to say this is this is the this is what
we need to do right the text itself is
actually a different kind of note it's
actually called a text node and we need
to create that from scratch and then
make it with the text value from our
text field so what I say is task text
gets the value and then let task text
node B equal to document dot create text
node passing in task text right which we
just got the value over the text field
so this will be make dinner make
breakfast whatever we have the text
string there and then we actually to
create the note itself right and then to
our actual task we need to make the task
text node a child of the actual Li we
need to make the text a child of the Li
so the Li has sort of encapsulate that
text right so we'll say append child of
our task text node right just like that
and then we just add the task itself to
the Li which has inside of itself the
task text and if I go back here and i
refresh this if all goes well I should
be able to say make breakfast add text
and indeed now we have in our to-do list
make breakfast task that's here right
here now if I do make lunch same thing
and if I do make dinner same thing so
now we have a dynamic list that we can
sort of create individual entries from
which is great we're missing a few
pretty cool features so we're gonna
actually add a few more but right now
this is the core of a to-do list right
we've added the ability to take input
from a text field assign a button some
functionality and have that button
update another element a separate
element in this case our unordered list
how do you remove ones as explore james
so funny you should ask that that's
actually gonna be part of the next set
of things we're gonna implement here in
just a second tempis station is gonna
sleep for um stream was educational well
watch the video release later bye
awesome thanks Tampa station for tuning
and glad you glad you showed up please
show the index.html main J's and main CS
multiple times sometimes his elbow
graphi sure if anybody wants to see what
the CSS looks like it's just this so
nothing special just a container class
with text-align:center and a task list
ID which just removes the styling from
our list so pretty straightforward and
then the index on HTML is just the div
with an h1 and input and a button and
then our ul or empty ul so we showed
this before quite a bit earlier it's
pretty simple but if you're if you need
a refresher that's what that is right
there okay oh yeah the react native
course was a the rack native course
taught by Jordan was pretty awesome that
was a fan do you know if the whole DOM
is rerender each time a new Li is added
I believe well actually I'm not sure
that's kind of up to the web browser I
would imagine Chrome probably does
efficiency here where it only rear
Enders what it needs to absolutely needs
to I'm not sure you'd have to dig into
the chrome source code to find that out
I think
innerhtml that works for for certain
things yeah
I think in this case we only needed
value though react renders the
difference between previous Dom and the
new one yeah that's my understanding I
don't have a low-level understanding of
the Dom manipulation or their sorry the
Dom Marie rendering of chrome and how it
differs amongst browsers and how much of
that is actually part of the JavaScript
but I imagine the information is
probably pretty easy to find on Google
then we have a stream of CSS before we
did yep use dot delete yeah we will
we'll be using actually removed child
actually because I don't is delete
actually a function in and in the Dom -
Dom delete function I think it's just
removed child right I don't think
there's delete is there a delete yeah I
don't think there's a I don't think
there's a delete function if I'm not
mistaken
Oh to remove a field sure sure
but these aren't objects in the same
sense and they won't remove the object
right
can you explain what we keep using let
instead of var let has block scope it's
more common now to see it it's better in
terms of your engineering it's much
easier to debug let than as far bar will
essentially be visible throughout your
entire function and which is defined so
even nested variables are visible from
the entire application so you can assign
something in a nested loop and think
that you're only doing something within
a block level scope and you're actually
assigning it to a whole rest of the
function it can be hard to track where
those changes are taking place with let
it's block level so nested let's are
only within that scope only changeable
within that scope and only visible so
they actually get we saw this with the
wild condition when we defined a let
inside of a while loop and then we
brought it out to the wild condition it
was actually null so it it wasn't
visible which is more better from an
engineering standpoint easier to debug
they don't heist which is true but I
would say that that's probably a good
thing most of the time and most
programming actually is most programming
is block level most programming
languages implement block level scope
and is there something like let but
constant in Jas Oh funny you should ask
that andrey const happens to be that so
I could say Const like text field for
example and it would have the same sort
of scope functionality as let but in
this case it's unchangeable it's just
constant so which is can be helpful for
elements you don't necessarily want that
to be Const but for functions you might
want functions to be Const you might
want some variables to be constant
depends on what you're trying to
accomplish cool so now we have our to-do
list implemented roughly speaking let's
go ahead now and talk about actually
being able to check off tasks right
because that's an important feature
that's the sort of next big part of our
list and then we'll essentially have our
full to-do list right
Adam could you have just used query
selector for all the variables yep you
could have and query selector is
arguably better from I would say all use
cases but there may be a performance
cost with query selector because it has
to run a search over the entire Dom I'm
assuming IDs get indexed in some way in
the web browser for efficiency so it's
probably not as efficient to use query
selector for everything but I'm not 100%
sure I'd have to do some research and
figure that out and then no constant let
as far as I'm aware Andre have the same
scoping rules JavaScript version
releases like an iPhone launch too many
exciting features coming all the time
yeah that's true they with es6 and es
2017 they're definitely doing a bunch of
really cool stuff it's always said that
cs50 one is one of the best options to
go for after cs50 is there a slightest a
chance to have it on EDX I've been
asking David for a long time to add cs50
one our own version to EDX but in the
short term it's not something that we're
working on but we'll see if we can maybe
encourage the folks to implement it here
we'll see
it'd be a great project to create though
for sure Fifield says thank you very
much for your time we're also looking
forward to the text mining and natural
language processing yeah no I'll see
what we can do with that I'm not a
hundred percent sure when we can
actually implement that somebody has to
put a stream together for it cuz I'm not
an expert on it but we'll see what we
can do cool so first of all what I want
to do here's the UI that I want to
implement I want to add a radio button
here what I want to do is inside of the
Li or the UL each Li I want to have a
checkbox right and so this is cool what
I can actually do is say let checkbox
equal document dot create element input
right and then I can say checkbox dot
type is equal to checkbox and then so
this is essentially what I've done in
code you can do this in in HTML of
course with input type is check box it's
just a check box so you can click on and
off what I want to have happen is to do
this
I want to have one associated with each
and every Li that I generate in my click
handler right here right so I can say
new task is a pen child so right now
what we've already done and we're just
appending the text itself right the ly
with the text or just wrap it adjust the
text node but before the text I'll add
the check box and then I can have both
of them so I'll just say new tasks on a
pen child check box like that and if I
rerun the page and I add make breakfast
right here notice that now my li also
has a check box associated with it that
I can check on and off right pretty cool
so you can see how you can dynamically
do whatever you want right it's you can
assign whatever whatever crew JR closure
is gonna be touched on today probably
not we're going to have nested anonymous
functions well actually to be actually
yes I think technically speaking we are
going to be talking about closures in
the context we're not going to be
discussing them in depth but we are
going to be using a closure so that's
actually a good point and can you assign
the label via a script if you're
referring to this yeah you can so I can
say in here once we click on the once we
click on all this stuff and I sign it
all that blah blah blah I want the
actual task text to be equal to or
rather I want the text field dot value
to be equal to nothing right so I can do
this I can say make breakfast
now watch the text field once I add the
tasks it gets cleared so now it's ready
for a brand new task and doesn't
preserve make breakfast anymore so now
that's actually been changed dynamically
as well just by assigning it right it's
all we have to do we just assign the
value equal to an empty string and then
it just functions as before and those
that even gets the placeholder filled
back into it too which is a nice cool
side
it's a good question now what I want to
have happen now we have the checkbox I
want to click the checkbox and I want to
strike a line through my element I want
a visual sort of indication that that
element is gone right so the way we can
do this is I can say checkbox dot on
click is equal to function and then this
is kind of where the idea of a closure
comes into play because this anonymous
function even though it's anonymous and
even though it'll be called sort of
asynchronously it's gonna have a
reference to all of these variables no
matter what so this is kind of what a
closure is it's a function an anonymous
function that has access to the scope
above it right which is cool so that
means that we can do things anonymously
we can sort of add this aloneness
functionality but also have our
environment have a sort of a frame a
snapshot of the environment at all times
so this is pretty cool are you gonna
touch on event propagation probably not
in this stream we're not really even
covering events too much but ya know in
this case no and do a non closures have
to be anonymous no we could we could we
could define a function here if we
wanted to called function click is equal
to blah blah blah and assign this on
click to click just like this and that
would be the same it would be the same
sorry getting arrow functions and normal
functions kind of conflated there but no
in this case you could just define it
right here like that function click and
then just assign it as a variable again
functions are first class citizens in
JavaScript so you have this ability to
assign it to field just like you would
any other variable type like a string or
a number right I personally prefer just
using an anonymous function especially
because we're not going to reuse it
anywhere so that's why I'm doing here so
when we click the function what I want
to do is I basically want to say new
task dot
set attribute I believe and then style
and then this is sort of a way that you
can dynamically change the CSS of your
program at runtime using JavaScript you
can set the attribute the style
attribute of something to something else
so I can say text decoration line
through and so what this is doing is
this is actually getting a reference to
new tasks whatever new task is right
here right and setting its attribute to
text decoration line through right and
this works for every time we click the
button this will be that specific task
that we're worried about right because
of closures which is two fruits point
right this is pretty cool freak and m4
in June so now if I go back here refresh
make breakfast which I never do by the
way add tasks and then click this notice
that we do indeed have a line being
struck through our make breakfast text
we're actually applying a CSS attribute
at runtime using dynamic the dynamic
setting of that attribute right it's
pretty cool all right we're getting
closer and closer but wait we haven't
deleted our tasks yet right so I can
make lunch add tasks make dinner right
but I don't want make breakfast here cuz
forever right maybe I want Nick maybe I
want to add make breakfast again and
uncheck it right and by the way make
dinner works on itself make lunch works
on itself so everything sort of works
nicely but I actually want to delete the
attribute so how do we do that right how
do we how do we actually mini plate the
Dom so that I can get rid of elements
we've added elements add or remove
elements and this is kind of cool
so using something called window set
timeout you can actually specify
something to happen after a period of
time right so I can actually specify
this function to happen after one second
I can say let's say document dot or
rather in this case it needs to be the
UL right so the task list because we're
gonna delete a child right you this is
the way that you delete elements
in in JavaScript need a parent element
and then you need to say remove child
right so let me just make sure that I
have this correctly so remove child yeah
so you basically say and actually can't
do this okay is there a way to do it
from the element as well can't I say new
tasks dot remove child I guess it's just
remove child which is fine so okay so
we'll just say task list dot remove
child and we'll pass in new task so if
you give a element and then you call a
remove child you can pass in the element
that you want to remove that's a child
of that element and it'll just remove it
it'll just take care of doing it for you
because it maintains a reference to all
of its elements so underneath the hood
it can like basically compare pointers
and say oh that's the same child so
delete it from the from the list right
so what I've done here is I've basically
said I'm gonna set a timeout function so
a timeout just means after 1000
milliseconds so on whenever that times
out I want to run this anonymous block
of code this task list remove child new
task right so once I go back here run
this lets do make breakfast make lunch
and then make dinner and if I make lunch
after a second we do indeed see that
make lunch disappeared right it's just
gone so pretty easy right is there a
difference between setting a bar to a
timeout versus just calling the timeout
I have to remember turn value I have to
remember what this is for
I'm not sure I guess if it looks like
you have to use protocol promises which
are asynchronous JavaScript this is like
a more complicated use case I'm guessing
and it's actually wrapped by another
function yeah you wrap the timeout in a
promise and you can return it so I think
it's a little bit of a different use
case if I'm not mistaken I don't see it
very frequently but I'm sure it's used
in certain contexts a little bit more
remove child seems a bit extreme is
there a get child to do homework
function though oh that one hurt a
little bit Andre could you maybe give a
quick tutorial on how to read API
documentation that pops up when you
write a method in vs code maybe take
window dot set timeout as an example oh
okay sure why don't we do that so if I
were to write window dot set timeout you
can see that it gives me a little bit of
information here so this is a little bit
cryptic but in this particular case it's
saying that it expects a handler which
is a timer handler which is a function
handlers are usually functions they
handle something and then the timeout
which is optional it looks like hits the
question mark and then it takes in a
number and then you can pass another
arguments and then it returns a number
which is or actually I guess if it
returns a number maybe that's maybe
that's more of what somebody somebody
mentioned that I forget who was it
shoot who just said that oh juban so it
looks like it does return a number maybe
so what maybe I maybe I have this one
maybe I looked this up incorrectly what
is set timeout return oh okay
so a timer ID okay interesting oh oh so
that you could okay I see I know what
it's for so you get a timer ID from set
timeout so this is the difference I was
missing this for some reason if you call
set timeout and return to a variable for
example if I say local clear timer is
equal to window dot set timeout oh sorry
look I'm using lua syntax if I say let
clear time or be equal to window dot set
time
and by the way this is not gonna be very
useful in this closure because let is
block-level so it's not gonna be visible
but let's say I have it somewhere where
I do have other bits of code that I
might want to use to clear this timer
out you can associate and maybe you have
a global object somewhere that you're
storing references to all of this so you
don't even need to use let but you can
assign a return value from set timeout
which is basically an ID and identifier
that lets you say at any point before it
times out you can clear it you can say
timer cleared you can say
window.cleartimeout or I think it's
clear timeout right yeah clear timeout
right here and pass in the handle for it
that ID and that will stop the timer
from running in the future and we've
used a timer library that does something
similar to this in some of the game
streams but this is if you have a timer
that maybe you want to abort its
functionality at some point you can
return the ID linking to that timeout
function so that's what that is
yeah ID so you can cancel it exactly you
can do a new task type parent node I
remove child if you want to remove it
without using the task list element ah
yes right that makes sense yeah and it's
that interval that usually want to clear
with clear interval later that's correct
yeah set intervals for something that
you want to have happen more routinely
that I could see being cleared more
frequently than than timeouts
because timeout just occurred one time
usually alright let's go ahead and add
one last feature to this so right now we
can remove elements but I want a little
bit fancier of a removal right so what I
can do in my CSS and I have to make sure
that I actually get this right if I do
Li and then I say opacity is gonna be
two seconds I think and then transition
is a transition oh no its transition
opacity over two seconds and then wait
is that what it is I think that's what
it is and then I can do
first of all we don't need this
reference to clear timer anymore so then
we'll go ahead and I'm gonna say new
tasks got set attribute of the style of
the to be equal to exactly what this is
if I'm doing it from scratch this is I
believe opacity oh you know what I think
it's opacity oh right now I think it's
opacity zero right and then this gets
opacity one and then this gets set to
[Music]
duration over once over two seconds just
like that right I think that's how it
works
shoot I need to look this up I apologize
so derp a CSS transition duration
opacity have a bit of code here okay so
opacity oh right okay
opacity gets it to okay so opacity is
going to be I had this all mixed up so
pasty is gonna be set to one and then
the transition is going to be opacity
over one sec over two seconds if I'm not
mistaken is that correct yeah and so now
what we can do is we can say set the
opacity to zero for the style and what
this is going to do is it's going to
actually interpolate over duration the
opacity because we set the transition to
opacity over a certain period of time
this is a CSS animation it's a little
bit complicated even I had to Google
because I don't remember it offhand but
if we go into here I'm gonna set this
actually to 2,000 milliseconds when we
check the checkbox what this is gonna do
is should be able to refresh this do
make breakfast make lunch
and make dinner and then if I click make
lunch notice that it actually faded out
before clearing and it actually didn't
set the text decoration though which is
unfortunate why is the text decoration
not oh wait why did the text decoration
not show as line through that's strange
I did this yesterday and it seemed to
work I mean I don't mind that it's not
struck through and I don't know if I
have time to debug it but that's weird
any case now we can opaque get things
out of our to-do list using a transition
a CSS transition right which is pretty
cool and you just have to set the
opacity to some initial value so set it
at 1 that goes from 0 to 1 whereas 0 is
invisible 1 is completely visible
and if you
buh-buh-buh-buh set the opacity if you
set the transition right on opacity to
be 2 seconds any changes that you make
to opacity are going to apply over to
seconds right so if I change the opacity
to zero here because we had duration set
to opacity in two seconds this opacity
to zero is actually going to be in
interpolation so it's actually gonna go
from one to zero over two seconds and
that's why I'm also setting this remove
the element from the task list to be two
seconds as well so the two kind of
happen at the exact same time and then
they're gone just like that and then as
he's saying that's cool macarena saying
whoa adamantine saying that was buttery
make it do a flip before disappearing I
do not know how to do that I'd have to
look cool that and feel about that I
think the screen had a refresh before
the opacity was changed Oh maybe people
watch Netflix at night I'm watching a CS
game and enjoying it almost 1:30 a.m.
here in Pakistan will watch the rest
later have a good day oh thanks root for
tuning in much appreciated glad you
enjoyed hope to have you begin soon
nice oh whoops trick was saying how did
you uh how did you guys do that to the
to the birthday stream yeah it's pretty
sick wasn't it I was a huge fan of it
particles lots of particles yeah there
were a lot of those birthday particles
were really or some good particles I was
a fan well done in the particles
Department that concludes our to do list
now really briefly one of the things
that I also wanted to do was just add a
bit of bootstrap with JavaScript to
bootstrap I want to show you how it kind
of changes now you can kind of make it a
little bit more complicated stuff we
won't go into too much detail I don't
have a concrete thing I'm gonna show you
carousels and some of the dropdowns and
show you how to integrate that and show
how it works
but on in a future stream what we can do
is have a project oriented stream where
maybe build a whole webpage using
bootstrap and Inter and dynamic
JavaScript and all kinds of fun stuff so
we can actually see how things work why
it does a turn Knoll when I add a new
task elbow graph II I'm not sure I'll
bow I'd have to look at your code I
imagine if you're copying the code with
me there's probably an error in your
code somewhere a syntax error so I would
just debug and and look through it a
little bit see you know console dot log
the stuff is you're writing it out make
sure everything is scoped appropriately
I can
commit all this I can commit at least
what we have here to github so you could
clone it if you're interested so what
I'll do is I will CD into dev into
streams and then JavaScript get in it
it's not a whole lot of really
meaningful I mean it's cool it's a cool
simple to-do list it's not it's but it's
you know if you want to download this
and clone it and and test it out then
you can figure out maybe why your code
is different compared your code with the
code that I'm pushing and see if where
the difference might lie
so we'll say final it's a new list
remote at origin and then we need to
actually create the repo and github so
we'll do that my mouth is extremely dry
not anymore all right let's go ahead and
add a new repo javascript stream stream
on whoops extreme on JavaScript on
twitch.tv slash the to-do list stream on
JavaScript uh okay cool
and then we grab this link here go back
here and add that as the origin get push
ups tree and origin/master now if all of
you want to download this to-do list and
mess around with it on your own machine
you have the power to do so I'm going to
write in the chat github.com slash
Colton osku P slash JavaScript stream
just like that
Nick's lysenko could you tell us about
binding context for prototype methods
please I know that there are a function
level just like var is if I'm not
mistaken but the weeds of that we're
probably not going to get into in this
stream maybe in a more advanced
JavaScript stream will implement a sort
of a class hierarchy in JavaScript
prototype so we can discuss it I would
say nowadays you might want to
transition to using the es6 classes
which I think cover have a few less
issues with it at least related to
function level scoping because
everything is usual I think everything
is let a block level scope now with
classes so it should be I mean classes
are technically still a layer on top of
the prototypes it's just a kind of a
syntactical conversion but look into
class syntax for es6 and mess around
with that and see how that works
[Music]
if you mean everything works fine but
only the text appeared in all had the
same error it turned out that I set text
field dot node values that text oh I see
right yeah that's what I did 200 thank
you let's find my mistakes syntactic
Splenda yeah there you go it's kind of
yeah that's that's fair that's oh and
thank you to all the people that have
followed elyes in Cruiser one and grow
in Sajha 95 thank you very much to
repeat setattribute overwrites the style
immediately destroying the text
decoration ah okay interesting so why
don't we fix that then let's go over
here
- wait text set attribute overrides the
style immediately destroying the text
separation wait how is that if we are
literally doing that right oh oh I see
what you mean right yeah yeah so I need
to say opacity and zero here just like
that right yeah so now this should work
right if I say make breakfast yep nice
cool shut it's a humble pie for the fix
there I forgot that you have to do it in
one call otherwise it will just sort of
refresh the style to completely from
scratch forgot about that totally good
thing to consider let's commit that
fixed set attribute awesome
all right um so let's add bootstrap to
our program here and just mess around
with a couple modules real quick before
we conclude since we have a little bit
of time left here so I already have
bootstrap here I think in my CSS do I oh
no it's an actual bootstrap thing here
oh but it's not there let's see where
was it did we make do not have bootstrap
oh because we're loading it in the right
because we were loading it from the CDN
right we can do that that's fine so
we'll go over to get bootstrap grab the
CDN links download okay let's do this
just gonna add the link in this source
so if I'm not mistaken this should just
work by default regardless of where we
put it because all of bootstrap is
within jQuery and I think they wrap
their entire thing and a document on
ready so this should work already by
default but we'll see let's actually add
a brand new folder here just to get
started bootstrap j/s test and let's
load that into here yeah great and we
create a new index.html whoops
index.html just like that and then we'll
create that starter boilerplate gonna go
into here copy and paste the bootstrap
links which now we should have bootstrap
and booster up the the CSS and the
JavaScript built in so this is cool so
let's go ahead and just mess around a
couple modules so go to components go to
carousel that's one that's pretty easy
to test out we'll go to this one for
example starting to copy and paste so
this is the carousel example a carousel
is just something that lets you span
images left to right right we're not
going to go into the detail on how this
all works you can watch the bootstrap
stream if you're curious we didn't
really cover carousel in the too much
detail but the basics should all carry
over let's go ahead
just make sure this is all indented
properly which I think it is so if I run
this now if I'm not mistaken this should
just kind of run with a Oh is everything
messed up let's see refresh why is this
interesting
oh is because we're not linking to the
images and it broke perhaps all right it
expects image sources and we don't have
any right that's what's causing it so
let's go ahead and add some Pokemon
images to stay with the theme of last
week's bootstrap stream so let's grab
this Bulbasaur image cute image actually
let's copy image address we'll go into
here do that and then let's grab
Bulbasaur let's grab squirtle this image
address notice that I'm just kind of
filling in the blanks because bootstrap
nicely gives us all this documentation
for all of its modules but if you know
the right things that you care about you
can just kind of plug and play the parts
that are specific to what you want in
this case I want to use the carousel
feature but I want the I want the
specific images that I care about and
I'll see every web says check out
JavaScript info great for starting Jas I
think somebody mentioned that to me
before actually a JavaScript info CI
looks like it covers a lot of really
good stuff so if anybody in the chat is
interest and definitely check that out
and these two inquisitor for the follow
appreciate it
okay so we have squirtle and then last
let's get Charmander looks like they
already have it recommended to us let's
grab this copy image address back over
here source is this and then now is it
gonna work
whoa hey that's a little bit large okay
let's make sure that this is set
appropriately now we're not loading the
JavaScript in here appropriately that's
what it looks like
excuse me it feels almost like we don't
have Java or we don't have sorry we
don't have the we don't have bootstrap
loading in here appropriately so let's
make sure I might have been wrong about
it loading it at the start so let me
just as a sanity check make sure it's
loading I'm going to say h1 and then I'm
gonna say bootstrap test just like that
and actually I'm gonna div class is
equal to container I think this might
help us a little bit to apologies for
the fumble here but we'll fix it let's
make sure this works by itself whoops
wrong page Oh was I afraid I was it was
efficient that okay refresh okay so it
is working okay container text Center
right that works oh no dad this mixed up
a little bit let's see I've already
forgotten the bootstrap container text
center I thought I had that right don't
I have that right
Oh in any case let's go ahead and now
get rid of the commenting let's see if
now it works this is odd
oh we do have the okay we have the
buttons there's hard to see but they
don't actually do anything okay so let's
make sure okay okay
so I think maybe this does have to be
put at the bottom let's try this shoot
why is this not working this is very
weird each one is not in the container
h1 is o h1 is outside of the container
what's live debugging for the wind okay
do the flip fresh okay cool I thought I
was going crazy there for a second I'm a
little confused as to why this is not
just working I thought this just worked
I apologize
don't need to refresh hard refresh the
page why is this this is so strange
carousel not not working bootstrap
here's where the real development comes
let's see if there's any obvious ones
that people do wrong okay we definitely
have the CSS right that's here yep
cool
CSS yep oh shoot okay need the plugins
forgot about that
jQuery Jade I was promoting this jQuery
and tether near the end of your pages
right before okay that is my fault okay
[Music]
if you're building our JavaScript from
source it requires you told us
let me see go back to documentation go
to JavaScript where is the tether
I'm guessing it's tether bootstrap
tether
oh I see okay jQuery and then popper
interesting and popper I guess okay cool
so we'll add those boom boom now this
should work fingers crossed there we go
thank goodness okay wow that was
horrible
sorry about that forgot that we needed
popper and jQuery in the page but yeah
that's the sort of functionality that
you get now there are certain bootstrap
clearly certain bootstrap modules that
require other JavaScript files the
regular Java scripts not gonna work for
some things like the carousel it shows a
bad example though one of the examples
that does work I believe without any of
the of the side libraries is for example
dropdowns so you can import just the
regular just a regular drop-down like
this for example
and before I don't believe you were able
to actually click the drop-down and have
it do anything so let's go ahead and
just plug this right into here like this
okay apologies also for how brutal that
was it was a pretty silly mistake now
and a v-z HD and Mara where thank you
very much for the follows so here's a
drop-down just copied and pasted from
bootstrap documentation which if we have
everything right it should just look
like this right so action another action
something else here and if we disabled
all of our JavaScript which we'll do
right here I'll actually comment all of
this out so we could see the difference
if I'm not mistaken this should just
give us a drop-down that doesn't
actually do anything
right so I click the drop-down but it
doesn't actually have any dynamic
functionality we can insert new elements
because when when it renders the new
panel underneath the drop down you're
actually getting you're actually getting
the like the it's actually adding new
things to the Dom right when you're
clicking the drop down and you're having
a new sort of set of links but pop out
below it that's not always something you
can do CSS right or raw HTML you have to
actually be adding new stuff to the page
in order to have that visible
or you could maybe do it with some like
active stuff active and hidden stuff but
if I uncomment these script tags right
and I refresh and I drop a click on this
button now you do indeed see that it's
dynamically injecting sort of new stuff
into the page it has this action another
action something else here those things
have hover attributes on them so that
they can we can get some visual feedback
so this is sort of like the kind of the
behavior that you can see by adding the
JavaScript part of bootstrap into your
application correctly unlike what I did
the first time without popper but
assuming that you've done everything
correctly now all of the almost all the
widgets have some kind of small
JavaScript capability associated with
them that you can also now fine tune and
tweak and use for your own use cases you
can make alerts pop up and fade away
dynamically you can shrink badges and
grow up badges and shrink them you can
make cards move around on the page like
I did with masonry with the cs50 staff
page you can make tooltips up here you
can make progress bars animate you can
do all kinds of awesome stuff and the
Lord illidan's asking does it work now
if the Jay s links are in the head and I
think it should actually so let's go
ahead and copy this and then go over
here
paste those three save it rerun and then
click and drag and it does indeed seem
to work if I click and drag err if I
copy and paste the Carousel example
again well well actually we should still
get this first one working we'll do it
with control so we can manually adjust
it let's go ahead and do this um copy
this right in here
copy paste development for the win oh it
interesting does not seem like it is
working I mean it's definitely doing
something it's moving stuff around
that's weird so it's actually not
working when it's at the top of the page
when it's at the head fascinating oh is
it because there's no images here then I
do why I'm not sure that's a weird bug
huh it might still have to be at the end
let's see if we just copy this over at
the end at the bottom of the file and
see if this does the the same thing
let's see if this works
fresh no it still doesn't okay it still
doesn't work interesting is it because
there's no images I haven't tested it
without images you would think that it
would just work because of the this raw
image this raw example here right like
you think you would think that this
would be I don't know we'll say dot dot
dot and then we'll we'll add maybe three
images of Charmin let's see if that
bubble sort fixes it very weird copy
image address go back here fill in these
image source blanks
okay let's rerun this okay I think it
just causes issues if you don't have
images for some reason that's causing
it's like looking in the wrong place for
it so now if we have images let's take a
look let's uh just do it with the the
scripts here let's bring those to the
top refresh okay so now it seems to work
so carousel or carousels are bugged
without images FYI when did you put hash
in the source let's try it let's do that
boom boom Ash refresh nope so looks like
it's bugged fresh seems to work there so
you know it's a little touch-and-go but
it looks like you indeed can put it in
the head so long as your widgets are
laid out appropriately and you actually
fill in your your widgets at the right
information but yeah that was JavaScript
we've covered the basics we'll probably
do some streams in the future where we
make a full website using more dynamic
stuff and also do want to get into
semantics UI and foundation and those
kinds of frameworks semantic UI in
particular I think actually seems pretty
cool but I think yeah I think that's
where we're going to wrap up today so
let me go ahead and just boom move us
back to the main page main shot here if
we have any last questions I'll stick
around for a few more minutes this isn't
meant to be a very beginner friendly
introduction to JavaScript so hopefully
we didn't go too fast we might have gone
too slow
Oh confusion regarding head might come
from the fact that jQuery needs to be
loaded first true although jQuery as
long as jQuery gets loaded I had thought
that it was integrated with bootstrap
dot min dot ge'ez with the newer
versions maybe not but not sure
Frederick says when's the crypto stream
next Monday so this next Monday we'll be
doing a crypto stream you'll be posting
that today can we make every new task
with a different bootstrap alert and
color absolutely you can do whatever you
want really the sky's the limit once you
know how to use bootstrap and how to
actually you know look for the right
Lyn's and the right styles for your
webpage you can do anything you want to
it's ultimately up to your taste at that
point I have the actually the same idea
as I was looking at the alerts in
bootstrap they seem to be fitting for
different notification for different
tasks and your to-do list you could if
even theme them you can make maybe
urgent tasks you could color red and
less urgent tasks yellow and in
completed tasks screen maybe you know
whatever whatever you feel like doing
JavaScript being JavaScript again that
was more like that was more my fault and
not putting the image in the source
I find ball a lot better framework than
bootstrap it has understandable class
names yeah chicken look at boomer I
should probably take a look at it maybe
any streams for functional programming
in the future I would love to do one I
need to study it a bit more I've other
folks that I've talked to that might be
worth getting on here to do some
functional programming we'll see if they
end up having time to do so and also
thanks to act Anisha cypher TV and holy
black sheep for the follows can have a
session on graph QL that'd be
interesting I've wanted to learn graphic
you all for a long time we'll see if
folks might be amenable Lord Illidan
says thank you for the stream which
appreciate thanks for tuning in the
whole time can we do no js' as well asks
lord Illidan yeah I would like to do a
node.js stream that's the plan
no concrete timeframe on it like I said
are probably gonna be cutting back to
two days a week so we'll see what we can
get done with that limitation on time
but expect it in the future for sure
everything worked fine thanks a lot for
the awesome stream now finally get the
Dom dude done get the Dom dude done nice
how have a strong CS fundamentals by
learning on your own how do you get a
strong CS fundamental background is what
you're asking killshot I would say read
there's plenty of books out there on
programming languages plenty of books on
higher-level concepts like theory of
computation functional programming
expand your horizons work on large
problems reading books on data
structures and
there's plenty that you can do teaching
yourself all of CS you can teach
yourself just spend the time on it moon
can sing almost 6 a.m. but worth the
time awesome well glad you're glad you
stuck around for so long
thanks so much for tuning in even at 6
a.m. that's uh sounds like it's gonna be
a hazard on your sleep schedule we're
gonna have a stream on react native um
maybe I'll have we have so many ideas
which is great really like it I'm gonna
have to find out find how many people
can be up to it do you know if there was
a guy three people learning Jay s coming
from C++ offhand not man I'm not sure of
a specific one but I think just learning
up going like w3 schools for example is
a great website if that's the correct
one it should be w3 schools right com
that's an excellent website for learning
how to program HTML excuse me
HTML Javascript and CSS so tune in to
that website look at articles you'll see
it has everything kind of laid out for
you on the left hand side to by category
which is really nice and it's a very
approachable ecosystem I mean especially
if you're used to a very structured
environment like C++ where everything is
very sort of touch-and-go and easy to
mess up and crash and burn javascript is
much more forgiving so forgiving easy to
introduce bugs that are hard to find but
it's much more forgiving do you must
blame the JavaScript like everyone can
we have a session on kubernetes as
bihari web I'm actually not familiar
with kubernetes myself but again we'll
see what we can well see we can put
together for people maybe start a poll
for the next topic for this stream yeah
we can maybe do something like that
first of all I need to find people that
have a multitude of topics that they can
that they can sort of talk about because
I only know so many categories I have to
learn all this stuff kind of from
scratch if I want to teach it so if we
wanted to teach graph QL or kubernetes
or any of these technologies I'd have to
learn it so it might be easier to find
people that know in advance
j/s will just crash and burn at runtime
so it's a Greek fire yeah some
sometimes forgiving or giving headaches
kind of both badly kind of both but a
good pun what's your favorite taxes kill
shot at the moment it's closure so take
a look at closure
I think closure org I think that's right
right I'm learning it it's a functional
programming language it's a lisp it's
got it runs on the JVM so it's pretty
fast but it's a very fundamentally
different way of thinking about
programming that I've been trying to get
into for a long period of time and it
seems to be pretty well engineered but I
need to take more of a closer look at it
but that is what I've been spending my
spare time on aside from running web dev
and stuff like that I haven't gotten
into games for a while I would like to
program more games it's been a while but
let's say we can do I do a lot of game
programming here on streams so that kind
of itches that a little bit what's the
main use for closure anything really
it's also closure script is great you
can use it for client-side web
development but it's meant to just be a
it's used a lot for server-side
development for application development
closure script is probably a larger pool
of it which is a it's a version of
closure just interpreted into JavaScript
so it runs in the in the web browser
it's pretty sweet to take a look at it
if you're interested
what about camel for functional
programming I don't actually don't know
Oh camel but we teach it here at Harvard
as a language for what he should here as
a language in 51 for functional
programming so I'd have to take a closer
look at it but I'm sure dad and Haskell
and ml and all these languages f-sharp
yeah I'll all kind of strive towards
some of the same goals a drop-in
replacement for Java kind of like Kotlin
yeah it's a JVM hoisted dynamic language
just like Colin except it's mostly
purely functional I'm not too familiar
with Colin though goaling and rust yeah
I've been wanting to learn those as well
go I've started learning rust I've I
started a long time ago
but I haven't actually looked at it for
a long time but so many people love rust
it's it's worth so we're looking at a
little bit we just had more use cases
for it um yeah I've been wanting to get
more into a functional programming state
of mind and actually do it more
religiously I think just to actually
start thinking about solving problems I
think a little bit better and
engineering problems a little bit better
so many people and so many companies are
really investing in it and it seems like
is taking off and it seems like it has
such a foundation in good engineering
principles that seems worth the
investment and at the very least it's a
different way of thinking about
programming and our newer languages like
CoffeeScript Pierce script all Jas based
they all transpile to JavaScript but
CoffeeScript like the geek pirate said
it's pretty old it shipped with Ruby on
Rails a long time ago I was programming
in it in 2014
many people were programming in it
before me do you think it's worth
learning some webbed up even if you have
no intention of doing it professionally
um probably not if you have no intention
of doing it professionally I would say
focus on what you have intention to do
professionally first and foremost as an
exercise and understanding how the web
works sure it's great don't spend time
too much time doing things that you
don't think you'll actually do though
cuz it's only have so many hours and
minutes and time to spend on this planet
might as well spend them in the way that
makes sense to you
try Haskell it's so strictly
functionally I just forces you to do
everything functional yeah that's the
plan I have tried it a little bit I'm
probably gonna spend some time
programming in the future I know that
James Carmack implemented Wolfenstein in
Haskell and so that he wasn't a huge fan
of it but I'll see we'll see how it is
and what age did you start programming I
was fifteen fifteen so 13 years ago
that's touching this is backward Oh one
yeah there's a lot of languages raccoon
it's not important to learn all of them
they learn the ones that are relevant to
you and your interests and the ones that
you're passionate about don't try to
learn everything it's hard to learn
every programming language and don't
mean to yawn I'm a little caffeine I
think is wearing off I took a caffeine
pill earlier now it's wearing off Mac
versus PC for webdev I like programming
on a Mac generally but I do both so it's
totally doable to do both and they both
work pretty roughly the same and
especially now that you can get win
accept Linux subsystem for Windows on
Windows 10 you can get a Linux type
environment which is the kind that you
get for Mac and your Windows machine so
really it's up to you it's they're
totally both viable though I've used
them both and Enki parallel says Linux
Linux is good too and Andre meant not to
say that Haskell was terrible but that
for that use case it wasn't as great as
James or John Carmack was hoping he was
said if I remember that he was hoping
that the Haskell reduced the codebase
and the sort of the intellectual
overhead by quite a bit but it ended up
actually not being worthwhile but
Haskell on its own has a lot of great
things that let you think about problems
differently and can condense a lot of
stuff life advice from Colton yeah not
really just how I sort of feel about
life wsl it can be buggy at times yeah I
haven't used it a lot personally we use
it actually here for a PC that we stream
on so that we can host a Linux script
that is broadcasting the cross stream
between two a Facebook and or two a
twitch and to youtube so they get two at
once but yeah what Deb you saw still
likes some native Linux terminal but
still can do stuff ours on here seems
like it has a pretty close to parity
Linux terminal that we view
it's just running Ubuntu 18.04 but if
you mean maybe some of the utilities are
missing then yeah I'm sure there are
there's a few differences between them
that are definitely meaningful for some
people for a lot of yeah terminal
functions yeah some are missing as far
as I know that I have heard of but the
core is present all right any last
questions and then we will wrap for our
JavaScript basic stream and tune in next
week for Nick on crypto and then I
forgot the Friday stream it's a week in
advance so hope he will be posting that
all today how many hours do you program
a day asks so high that's right many I
would say on a typical stream we're
cutting for three hours but on a general
day depends on whether I'm programming
or not some days I program sometimes I
don't on the days I program three to
four maybe it depends on what I'm doing
depends on if it's for work and if it's
for personal stuff too but some days
zero some days three to four really
depends and no as they saying thank you
so awesome and davic saying thank you
thank you all for coming in for joining
us on today's stream would love some
Postgres sessions yeah maybe with
somebody new this Postgres in a Brian
those Postgres Brian knows a lot of
stuff I just got to get him in here he's
got a limited set of time you know it's
hard to get him to come into the stream
like we don't want C mate take care of
thank you thank you sir rule remote knit
man Bewick raccoon kill shot way you
used for front end what do you mean by
that kill shot I'm not sure what you
mean by that question in Ekta nice Joe
Thank You Igor moonkin Andre kill shot a
boo graphy a I'm personal
eternal enclosure and I program games
personally lot sure thank you very much
to the follow
so yeah games and learning closure as of
recently games just tend tends to be
what I generally tend to prefer Oh kill
stuff or frameworks um
I don't do a lot of web dev I'm still
learning but react is probably what I
want to end up learning and then
specific
there's a closure library called reagent
which is a wrapper around react for
closure script and so that is something
I've been taking a look at recently
which i think has some potential with
the use of fig wheel which allows you
actually live reload and run and repple
execute your closure script in the web
browser it's pretty cool so but I am
very very beginner level with all that
stuff so don't expect too much amazing
things for me what do you put in your
hair a little bit of blow-dry gel wax
pomade messy look pomade and hairspray
clojurescript is essentially closure for
the web that's correct Andre it's a
version of closure that runs in the web
browser and they transpose to JavaScript
correct it's not like JavaScript and
Java closure script is actually closure
and King four four zero what the WTF are
those just a different language if
you're talking about closure thunder 44
71 thank you for tuning in I appreciate
it it's looking like we're probably
close to the end here so thanks again to
everybody who tuned in hope this was
educational for some folks this was cs50
on Twitch javascript basics tune in next
week for crypto and more details to come
very soon once again thanks and it was a
pleasure having you all and doing some
live debugging as always have a great
weekend see you all soon