cool okay if nobody has any issues then
we will get into hypertext markup
language um so class intro I'm not sure
how many people are new so we'll just go
through the class intro one more time uh
silicon Dojo so basically it's my idea
for technology education Authority list
gatekeeper list free dend user hands on
Tech education that empowers students to
do whatever the hell it is uh that you
think uh is important um I've been doing
a tech education video tech education
since 2009 at this point and one of the
things that I became fascinated with
back in about 2012 is this idea that I
could provide high quality technology
education to basically anybody who
showed up using the YouTube platform uh
they got free education I got paid uh
everybody was happy um you know that was
until YouTube went down the toilet so
now I'm trying to figure out a different
way of doing things um and so basically
again my my thought here is you know
what if high quality technology
education was basically uh as accessible
as running water um what would that do
for the world that's my question um free
end user is not actually free uh we
don't have advertisers nobody's coming
to me to sponsor these things for some
damn reason so anyways uh there is a
donor box account I'm GNA start putting
links ien put the links up yet on uh
many of these things but if you go to
donorbox.org
CG there's a silicon Dojo little place
for you to throw a couple of dollars in
uh you know that the whole idea is if
people who can throw some money in throw
some money in and the people who can't
don't it still works out to being a
reasonable amount of money to be able to
provide these types of
classes uh when you're in when you're in
the class gu so everybody knows do make
sure to raise your hand in Zoom so in
Zoom raise your hand don't actually
raise your hand we had one class where
people were raising their hands that
doesn't work so uh don't do that uh
let's see here copyright everything that
we do here so one of the products is the
class that you're actually getting the
other thing is all the documentation and
everything that I'm trying to create uh
for these classes um so all of this is
not just freely accessible for you to
use but if you want to use this as the
basis for teaching your own classes
wherever you are feel free to do that uh
Tippy tap or die uh basically at the end
of these classes we are going to have
Labs we have three Labs today uh one of
the big things that I'll say is a lot of
people who want to get into programming
or even into technology they have this
weird idea that they can learn this
through osmosis like they'll just sit in
class and by sitting in class they too
shall become an mcse or a coder or
whatever else that's not really how it
works uh you have to learn why commas
matter and why semicolons matter and
what the hell a delimiter is and all
that kind of stuff uh so we're going to
have labs and all that uh make sure you
always do the
well if you want to be a technology
professional make sure you always do the
labs if you're just here because you're
bored and lonely you do whatever the
hell you want to do uh let's see here
extra help uh W3 schools if you have not
been to w3schools.com it is a terrific
resource uh for for basic coding stuff
especially when we start talking about
things like HTML and CSS these are very
setting specific client languages where
you either know the setting or you don't
so W3 school is a place just a place to
go it's like crap how do I Center my
text do a Google search W3 schools is a
good place uh and then also chat GPT uh
chat GPT again I will say I am
controversial when I say this uh cat qpt
is not artificial intelligence it just
simply is not but it is very good for
coding questions uh if you need to go if
you're trying to figure out why your
code isn't working properly just dump it
through a gqt and it'll probably tell
you what the problem is um and then
standardization uh you can use whatever
tools that you want to we use vs code
and default settings so that if you have
issues you can do a screen share uh this
will become more important as we do more
complicated classes basically if we do a
screen share and I know what the hell
I'm looking at it makes it a lot easier
for me to troubleshoot if you simply
pull up everything in text edit or
whatever I will still try to help you
but it gets to be a p
again especially like with P so we're
mainly focused on python with silicon
Dojo so there's I think it's py charm as
an ID there are a lot of like python
specific IDs out there there's nothing
against those specifically but their
formatting how they do things is
different than how vs code does stuff so
here we just try to use vs code with the
default settings uh because it will make
my life easier and with that we shall
get into HTML today HTM L programming
and if you really want to piss off an
18-year-old Noob call it HTML
programming and they will get mad to be
clear HTML just so you know if you're
ever dealing with an 18-year-old HTML is
not technically a programming language
it is something called a markup language
uh so basically with programming
languages uh you get what I've been
teaching you uh for the past few classes
you get if else statements you get
variables you get loops you get all
these things I think it's called Turing
complete a quote unquote real
programming language is something called
Turing complete go take a look at it on
Wikipedia uh anyways uh there's a lot of
different languages that you'll have to
deal with uh in order to actually create
a finished product and so one of the
languages you'll have to deal with is uh
most likely is going to be HTML so this
is a hyper text markup language and
basically we talk about when we're
talking about a mark markup language is
all this means is uh in text we're we're
essentially telling um whatever is going
to be interpreting this language uh what
the format of the text is um so you're
going to see a lot of it today again we
start talking about the uh oh the stuff
um like this basically markup
language uh with P something called A P
tag we're saying that this is a
paragraph the strong tag we're basically
saying this should be in bold with the
italic tag we're saying this should be
italicized with the mark uh this should
be highlighted so basically when you're
talking about a markup language what
you're doing is you're using tags to
tell something whatever is interpreting
this thing what the hell uh it's looking
at uh and so this is the basic concept
what you're going to be learning today
with HTML um there there are a number of
different markup languages out there uh
if you do a search for markup languages
you probably get a dozen um really
there's only two that you're going to be
dealing with really going to be two that
you're going to be dealing with in the
modern world that's going to be HTML
which looks like this or something
called XML ACC sensible Mark markup
language basically what XML is is with
HTML these are welldefined tags uh so
there's a I think it's called the W3
Consortium or whatever anyways all the
big companies they get together and they
get to argue about what should happen if
somebody uses is this tag right so they
come up with all these standardized tags
they tle all out all the the highly
technical specifications for how that
tag should work uh and then that gets
implemented into Chrome or Safari or
Firefox or whatever else uh with exml
extens extensible markup language
basically the idea is wow you know these
uh these tags are a great thing for
telling computers you know basically
allowing computers to understand what
something should be what if we had a
customized way of doing this whole
tagging thing right and that's basically
what you get with XML uh so there'll be
XML documents out there basically what
you what you do is you create your own
tags um and basically you create a your
code uh to look for specific tags and
then do things based off of those tags
uh
exml in the modern world uh the the
place you'll normally see XML is either
an RSS again modern world I wish if RSS
was still modern anyways RSS is real
simple syndication for podcast uh so not
podcast actually listening to podcast
the actual podcast technology per se uh
but basically with RSS or podcast
basically podcasting is an RSS feed uh
is what happens is you create a document
that uses all of these XML tags to State
what certain information are so this is
this is the tag for the title of the
entire RSS feed this is the title for
the article this is the date the article
was published this is the author of the
the the article these are tags of the
article this is the description of the
article this is the entire article
itself right you can actually put that
all within tags uh and then you can have
an RSS reader that can go through be
able to pull out that information and
then display it to the end user however
you want so that's basically what an RSS
feed is and again with podcast when we
talk about podcasting was really cool of
podcasting is basically you just have
that RSS feed but in that RSS feed it it
gives a link to where the file is store
so if you go and you're using iTunes
podcasting or apple podcasting whatever
it's called anymore uh the important
thing to understand with that is only
the RSS feed itself uh resides in
Apple's infrastructure all the files are
actually stored somewhere else they're
stored on your own FTP server so when
somebody goes they pull in that podcast
feed and they go to play your video file
your audio file whatever else that
actually gets pulled from your server
it's actually really great technology
and it's really sad it's kind of sorted
dead um let's see here uh so yeah so we
got a markup language again XML is the
other one you have RSS and you have a
podcast
um when you're taking a look at these
different languages again a lot of
people ask me a lot of new people ask me
they say Eli what is the language what
is the language to learn in order to
build
applications it's like well that's not
how it works the real answer is that's
not how it works right all of these
languages come together in order to
build the finished product uh and that
is why you'll hear of frontend
developers or backend developers or
database administrators or what are
called Full stack Developers
uh and basically these are the
developers uh that have a very specific
Niche right this is this is what I do
and only what I do and the important
thing to understand there is they create
a component of a finished product but
many times they don't actually create
the entire product itself a full stack
developer can basically create a a
product suit to nuts so when we're
looking at all these different languages
so we've been learning python so python
is what is called a backend programming
language
but when you start taking a look at this
uh let's say you're trying to build a
house let's say you're think about your
program as a house right and so you have
your house here and so basically when
we're talking about these different
languages uh HTML hyper text markup
language is essentially the floors of
the house the beams of the house the
walls of the house the roof of the house
and that is it so basically when you're
thinking about HTML hey HTML for your
web app is going to be the basic
underlying structure that everything
else is built on so you build your house
with HTML and it is going to be an ugly
ugly ugly house because all HTML does
for the most part is build the basic
structure then what you do is you use
CSS and what CSS does a
CSS puts color to the house and starts
to do some interesting things like CSS
will put some windows in there for the
house for you uh and it will you'll
paint the house uh so CSS and that's
we're going to have a class on that a
Thursday does all the the fancy stuff
right when you want things centered when
you want animations done many times
that's done with CSS when you want
colors so the word text to have color
background color all that kind of stuff
uh that is going to be done uh with CSS
then if you start wanting uh fun
functionality in the house let's say you
want a dishwasher right you want to be
able to wash your dishes and you want a
stove to be able to cook things uh
basically the language for for that is
Javascript so basically uh when you go
to a web page and you do things like
form validation so you have an HTML form
we're going to talk about that a little
bit later but when you're plugging
information into the HTML form and then
then things automatically change colors
uh let's say You're supposed to put in
an email address and you forget to put
the do or something um and then the the
background turns red and says give me an
email address that's done in JavaScript
um rollover images actually that's not
not done in CSS but a lot of the a lot
of that like functionality type stuff
that you get from a web page uh that is
going to be given to you uh with
JavaScript uh but the thing is then
right so you have your uh your
dishwasher and you have your stove and
you have all that kind of stuff uh
basically from there right that has to
get
connected into some other type of in
infrastructure right you need you need
the the the the public works you need
somebody to give you water to the house
or somebody to take the poop away from
your house right uh and basically that
is done uh using a backend language like
python so python is what we've been
using so python uh Ruby on Rails PHP
maybe C maybe Java a lot of languages
can be used as backend languages
basically what these backend languages
do is they are able to send stuff
resources to your pretty house and
they're able to take stuff resources
from your pretty house and do something
for you right so those are that's a
backend language then on top of that
let's say you want to store
things we kind of leave the house
environment here anyways you want to
store data because it's an app you need
to store data basically have someplace
to to push and pull data from uh that
you then have a database and there we
use something called structured query
language uh for relational databases uh
and we are going to have a class on that
coming up in the next month or so uh so
this starts to give you the idea of what
the stack so we talked about uh
technology Stacks what the technology
stack is is what is the stack of
Technology that's required for this
application to work so for most web
applications that stack is going to look
like HTML CSS JavaScript some kind of
backend language some kind of database
language and then an operating system
underneath so that will give you the
stack we're talking about HTML today all
we're going to be talking about is the
very brass Stacks the the beams the
beams the roof the walls type of thing
um yep uh when you do uh create uh HTML
files just so you know uh file
extensions are important uh you will
have the the final extension of an HTML
file will either be HTM or HTML uh any
web browser if you double click on it uh
should open it up in in a web browser so
uh if you have uh let's see here where
is my HTML intro class example so um
okay okay so format. HTML so this ends
in HTML uh so I can simply double click
on it and the file extension opens it up
in
Safari and uh you know this just gives
you some of the basic HTML stuff that
you can do and so again this is actually
the format example for
HTML this is about the level of
formatting you can do with HTML again
you can make something bold you can make
it tal sized you can you can give it a
background color you can do some other
stuff but this is about as far as you go
if you want any other kind of cool um
formatting and that would actually be
done with
CSS uh let's see here uh so you hear
about you'll hear about HTML 4 um and
HTML 5 right so HTML 4 was around when I
started doing web programing so you go
back uh to 20 years
ago 24 years ago anyways a while ago
it was HTML 4 basically back with HTML 4
um when you had web browsers and you had
HTML uh the technology world wasn't
solidified uh the way that it is now
people really didn't know what
technology was going to do things within
web browsers and so there was a lot of
playing around again because basically
things had not been standardized so you
had HDML so again to create the you know
the basics the basic structure of your
website or your web application but then
past that people weren't really sure
what they were going to use for the
additional functionality so this was
back in the days uh again if you
remember that like the 1990s with the
god off of websites crap was blinking
stuff was moving around all the time
right uh a lot of that functionality was
actually built into the web browsers
themselves you used to have browser
specific tags like this specific tag
would work in Internet Explorer it
wouldn't work in net skate Navigator the
whole n yards cuz everybody was trying
to figure out what the hell to do they
weren't sure about CSS they weren't sure
about JavaScript there are all kinds of
wacky languages that came and thankfully
uh they died uh so when you're looking
thinking about HTML 4 HTML 4 is just
HTML just HTML just the tags that's it
nothing else done right well then we get
to HTML 5 so HTML 5 probably starts
getting posted out 2010 more more web
browsers start using HTML 5 uh by 2020
everybody's using an HTML 5 web browser
and so that's basically what everybody
is on now the important thing with HTML
5 is basically with HTML 5 coming out uh
we have we have standards we have
standardization so everybody has
standardized on JavaScript everybody has
standardized on CSS everybody
standardized on HTML and so because
they're standards you they can start
tying things uh closer and closer
together and making stuff a lot more
seamless so one of the important things
is with HTML 4 uh when you had HTML 4
HTML and JavaScript were two entirely
separate things that you kind of duct
tape together and prid would work worth
the down uh with HTML 5 uh they really
brought uh HTML and JavaScript really
close clly together in the web browsers
uh so that you can do a lot of uh cool
stuff with JavaScript relatively easily
uh when you're going to be building a
web applications uh one of the things
with that is um is what are called HTML
5 uh
apis so this is really cool right so one
of the weird things we have going on in
the modern world is everybody wants to
create native applications so we talk
about Native applications that means an
iOS application or an Android
app built for that smartphone um and
basically gets installed goes to the App
Store and the whole on yards what a lot
of people don't realize though is with
HTML 5 apis these are basically apis
built into the web browser that you can
access literally through JavaScript and
do things with um so you have the
ability to look at what the battery
level is so the your smartphone app uh a
webbased smartphone app can actually see
what your battery level is it can deal
with things like Bluetooth uh it can
deal with things like uh geolocation so
there a geolocation API that is able to
pull your your location using the GPS on
your phone if you're trying to do
something right a Gamepad API so uh
we'll be doing more with this in the
future but you could actually create a
little app and have a video game
controller like literally a PS4 PS5 type
controller uh connected uh to your
computer or to your phone and using the
HTML 5 API you can actually control that
web app uh using uh the
GamePad there's a whole bunch of this
stuff in here again we'll have a class
on it later but I'm just trying to
scroll through here to show you all of
the options you actually have AA
available using these these HTML 5 apis
uh which are really cool and this is one
of the things that came out with HTML 5
is this really close integration with
JavaScript the web browser and the whole
nine
yards um let's see here uh extensions
and capitalization uh okay so the
extension is going to be HTF or
HTML okay so capitalization in HTML does
not matter uh so when we're looking at
this stuff um whether this is a
lowercase p tag or an uppercase P tag
that does not matter as far as HTML is
concerned um here's the thing you know
again it doesn't matter what technically
Works what matters is how much
you're G to get from the other people on
your your your development team just so
you know and I'll put it out there uh if
you capitalize your tags you're
officially a boomer you're officially a
boomer
um so even though capitalization doesn't
matter again it's it's this is one of
the the things is very difficult with
being an oldtime Tech person again being
doing Tech since 1996 is so many things
so many times things change not for
technical reasons just because of style
and then you keep doing what you were
training to do 20 years ago and it's no
longer what the cool kids do um and so
uh so back in the day uh whenever we
were doing tags tags would always be
upper case I guess so it was probably a
lot easier because again we weren't
using BS code uh I remember when idees
like actually cost real money so I don't
know maybe it was because we were using
notepad or whatever in order to do this
stuff having capitalized tags was just
easier to take a look at right so we
have an H1 tag close the H1 tag and
that's
uppercase that is what the Boomers do if
you want to be a boomer do it all upper
case uh what the cool kids now do do
nowadays is they do everything a lower
case so lowercase H1 lowercase H1 they
do it again this is just a styling thing
we've talked about that before the
difference between syntax so syntax is
the actual tag itself that you do have
to do properly and then there's
sty have fun with that have fun with
that again my advice to you is H peer
pressure peer pressure succumb to peer
pressure
anyways uh capitalization may not matter
May matter for the operating system for
things like hyperlinks images and any
other linking so again remember when we
started talking about this stack we got
to deal with a lot of a lot of stuff in
here and one of the layers of the
stack so still on thing y uh is your
OS right so some of you use
Windows some of you use Mac and some of
you guys use Linux right and so one of
the things is is so the tags inside HTML
doesn't matter but you are with HTML
going to be linking the things right so
everything in HTML everything in HTML is
just G to be text it's just literally G
to be text and then you link to things
to bring that into your your multimedia
uh document well when you go to link to
things right then you're going to have
the operating system basically you're
going to be giving the the link that
that address you're going to be giving
that address to the oper operating
system to say hey give me this
resource well here's the thing depending
on the operating system you're dealing
with Windows in general doesn't care
about C capitalization so you can screw
with the capitalization in your link and
windows won't care Linux will Care MAC
may or may not care that is something
that you just have to consider when
you're doing things so the operating
system does care about capitalization
even though uh HTML doesn't and again
uh let's see here uh when you're dealing
with servers um
so was so when you have a web server so
basically today everything that we're
going to be doing is just on the desktop
everything that I'm showing you today
can be done on the desktop you do not
need a server in order to present HTML
basically all you need is a web browser
a web browser is able to read HTML and
then you provide you the output uh
Safari Chrome and I guess it's the new
one for Microsoft whatever else the
thing is when you're going to be Pro
presenting a a web page for users out on
the internet you need a web server right
so you're got to have a web server www
you're going to go to GoDaddy or whoever
else you're going to buy a web hosting
plan for them and then you're going to
dump your file there here's the thing uh
the default the default name for the
homepage that you should dump onto your
web server
uh will either be
home.htm or. HTML
index.htm or. HTML or
default.htm or. HTML so basically
there's a there's standard again either
home index or default and these are just
considered the standard where if
somebody comes to your web server it'll
Auto try to drop them in to one of these
pages from there you can have links on
the page to point people to other pages
on your site but that's what the default
should be uh we're not going to have to
worry about that today because we don't
have web server um let's see
here okay doc type um HTML head body and
tags um okay so this this is going to be
something there's the right way to do
things and then there's the Eli way of
doing a lot of stuff uh so when we
dealing with HTML for
so back in the old days of HTML 4 uh
nobody liked each other nobody liked
each other Firefox Mozilla hated windows
or Microsoft Microsoft hated ncape the
whole nine yards so they weren't helping
anybody else out so you really needed to
Define what the hell your document
looked like so that it would work
properly because everybody was just
being a back in the days
the important thing to understand with
HTML 5 is at this point in time you
don't have to really worry about it so
much uh you have to use the basic tags e
tags H tags SRC tags we'll talk about
those in a bit uh but the rest of the
layout uh isn't so important uh but if
you're going to be taking a class or if
you're going to be putting stuff into a
production environment you probably
should uh make sure it looks appropriate
uh and so that's where we use the
document type uh we open an HTML tag we
open a head tag we open a body tag and I
will show you that with the page
format
so
this is page format and again most of
this you do not have to actually do it's
just for Best Practices uh so the first
line of your HTML document basically
what you're doing here is you're telling
uh the web browser or whatever the hell
is reading this thing what type of
document is it so you do uh you do the
little arrow thing so you put all these
within those little arrow things you do
an exclamation point dock type and all
capital letters uh and then you say HTML
so basically what we're saying here is
the dock type for this is HTML which
nobody cares but best practice uh past
that uh we're then going to open the
HTML tag so we open the HTML tag here
and we close the HTML tag here so for
everything other than this doc type uh
you're always going to be opening a tag
and closing a tag you open it you got to
close it uh so we open the HTML tag here
and we close it down here to say
everything in between is going to be
HTML from here we then have the head so
basically what the head is the head is
kind of like environment varibles so if
you're dealing with other programming
languages especially something like
Arduino right you create all these
environment variables that's not
actually in the script itself nobody
actually sees it but it sets everything
up uh that's basically what we're
talking about with the head here uh so
here is there's some metadata
information that you can put uh so back
in the days you could put tags and that
type of thing up here uh The Meta thing
and I'll show you that I use a lot is
there's a meta tag for auto refresh so
you can actually put a tag here to Auto
refresh the web page like every 5
seconds so you have some kind of
dashboard uh you can put that type of
thing here uh style sheets so again
Thursday we're going to do a class on
CSS stylesheets uh style information can
go in the head uh script so JavaScript
information so you can put information
about JavaScript again that washer dryer
stuff that that that interactive stuff
that you want on this particular page uh
you can put the information for uh the
functions and all that here uh then you
can do things like uh title uh so the
title uh for a web page is basically
this kind of thing up here when you take
a look at it on the web page um and all
of that is within uh the head tag then
you come down to the body and then the
body tag is basically everything that
everybody would see uh so this is where
you would put the H1s the P's your form
any kind of whatever it is that people
are going to be going to be seeing that
will be within the body tag itself so
this is the basic layout of what in HTML
document should look like uh if you're
doing it by best practice
um let's see
here yeah P so I just showed you you can
do title uh so let me let me open that
up oh in my little thing uh page format
so if I double click on page so again
these are simply files that are sitting
here I simply double click on page
format and I I don't know if you can see
so there's nothing here right so so when
we created this there's nothing here so
I could say uh hello let me just put
that there gu so you can
see so I
refresh so
any so you can see there's a hello there
so I put hello into the body and hello
it's put out there right so that's with
anything that's in the body what you
probably definitely can't see at this
resolution is up here so in this tab it
says my web app and that's the title so
just like web apis for for uh the
Microsoft developer network is there
GitHub is there basically these titles
up
here they
come
from this title tag right here the my
web
app let's see here um so we know the
title again St sheets we'll deal with on
Thursday script we'll deal with next
week metadata is things like the refresh
content every 5 seconds and that showed
you guys all that uh then we have the H1
H2 H3 and the P tags so this is going to
be important uh for SEO purposes
so so with very specific formatting you
do very specific formatting within CSS
right so CSS you can say font size you
can say font type you do font color you
can do a whole bunch of that stuff one
of the things is when all this was being
developed there was that question of
basically how would Bots or how would
spiders be able to crawl web pages and
determine what's important on the web
page again that's one of the big things
to be thinking about whenever you create
a script and that script is going to be
reading a document is how is that script
going to
determine what the hell is going on that
document and so that's where we have uh
the heading tags so H1 H2 and H3
basically not only um are these bigger
so H1 is the biggest H2 is smaller H3 is
smaller than that not only they heading
tags as their bold but by using those
heading tags it also tells any bot
that's scraping the web page that this
information is most likely important to
whatever is on the particular web page
uh and then you have P tags and all P
tags are is basically the paragraph tags
so you have a heading so you have like
the main heading and you know the class
for today and then under that so that'
be H1 then H2 would be you know HTML
tags and then there would be another one
for forms and another one for CSS and
then in inside those will be used
paragraph tags uh P tags in order to
actually be able to write out all the
documentation so we go over and we take
a look at this uh the paragraph tag
uh let
me this one's a little bit more
confusing because I got to go between
all of these damn things uh class
examples uh paragraph
tag okay so we're taking a look at this
right this is what we see so heading one
is Big heading two is smaller heading
three is smaller heading four is even
smaller than that and this is for
paragraph one and this is is paragraph
I'll show you some some stuff with the
HTML and VSS code and this is paragraph
2 and so basically what this allows you
to do is it does give you some basic
formatting for again if you want things
to be bold or if you want a title but
also why this is important is it also
tells any Bots that are going to be
scanning this particular document what
information is the most
important we go over take a look at
this right here uh basically this is
what we've got so this again all of this
is simply asking it's just simply text
literally you can use te notepad in
order to write this you can use a text
editor again back in the day that's what
I used um and basically all you have
here is the tags so we open the H1 tag
we say heading one we close it h2 tag
heading two we close it H3 tag heading
three we close it H4 tag heading four we
close it so basically all we can do is
in between here we then simply write out
whatever we want uh the heading to be
then we come down here to the paragraphs
and this is something we talked about
before in the the class we're talking
about writing to files one of the things
you have to be thinking
about is whatever is going to be reading
the file what formatting cues is it
going to care about right and so the
important thing to understand with HTML
HTML hyper text markup language only
cares about tags you do anything else
other than tags it's not going to give
it now right so we do P tag here we say
paragraph one we close it that seems
fine but look at this we open the P tag
here we say this is a paragraph notice
that asky formatting does not show up in
your browser so this is this is asky
formatting here basically these are
slashin these are the next lines that I
showed you before and then we close the
P tag here and if we go over and we take
a look at this we can see that all shows
up on one line why because web browsers
don't give a damn about asky formatting
if I do basically a rightclick and do
show page source so when you do that
that this is showing you the the text
that's giving you this it'll show you
it'll show you an asky everything was
written basically how I showed you but
again
in HTML HTML does not care about ask you
formatting um so be very very careful
with that type of thing
um let's see here then we're going to go
down um basic formatting uh again so as
I thought about before you can do basic
formatting with HTML with HTML without
CSS uh so this is going to be an
important thing especially for a lot of
you folks if you are CIS admins Network
ad
if you want to build Dynamic web
applications but you don't want to worry
about the fancy crap that's fine right
as long as you don't have to give it to
an end user who cares what colors you
use uh so you can do most of what you
want in HTML without CSS uh just be
warned though if you're watching these
videos so that you too can create the
next Facebook um there's a reason that
designers get paid a lot of
money there there is nothing quite so
hellish is getting some app that was
designed by Linux administrators and
then having to muddle through that
horrible piece of crap product um so
that is something just to be considered
here uh you don't have to do a lot of
colors you don't have to do a lot of
fancy formatting with your web app
especially if it's just for you and your
team but you do have to think about it
okay if you're going to start giving
this to the rest of the company if this
is going to be packaged as a product to
sell that's when you want to make things
a little bit or pretty uh General
formatting uh yeah generally formatting
should be done with CSS uh but you have
these different uh you have these
different uh tags so you have strong tag
strong basically bolds things you have
it tag makes the metallics you have Mark
basically does a highlight BR is a break
line so let's say you have a paragraph
but you want to break the line for
whatever reason put things on different
lines you can use BR to do that and
HR is basically a line that goes across
uh so we look at those
um let
me this up
um and page format right
no not that
one okay and so this is what I'm talking
about here so this is strong this is
italics this is text with important
words uh the BR tab breaks lines where
they are so there's a br tag here BR tag
here BR tag here an HR and HR gives us
this line across so if you want to
separate things
visually um yep and if we go and we take
a look at that in vs
code this is
format and so basically this is what
we've got so we start with the pext and
that's one thing too especially when you
start dynamically building web pages you
really have to think about what you're
doing because with uh with the HTML
again you have to open a tag and close a
tag and then inside of that you got to
open a tag close a tag and inside of
that you got to open a tag close a tag
and you know when we started doing Loops
so the last couple of classes we've done
Loops so you got to figure out how are
you gonna open a tag and then in the
loop how are you going to open and close
tags and then outside the loop how are
you then going to close the tag you open
before you got into the loop
H and again this is one of those things
that I say with programming people think
you need to be smart in order to be a
programmer no you just got to pay
attention to what the hell you're doing
and write notes write notes notes be
smart every single damn time so anyways
P tag this is the P tag open P tag close
P tag then strong so this is where we're
going to make this bold this is strong
and close strong so basically this is a
paragraph this will all be on a
paragraph line uh and then this in
between is going to be bold as you saw
uh but if you only want to do like one
word being italicized right so you don't
have to do the entire thing as strong so
we open the paragraph here we close a
paragraph here this is your normal
paragraph text uh F formatting then we
open the it tag we say italics and we
close the ey tag there and so only this
will be italic
uh P this has this text has we open the
mark tag important words close the mark
tag so all of this will be a paragraph
only this right here will have that
highlight and this is where again the
difference between asky texting and HTML
right so this is all on one line so
again you know how you decide to code
whatever you're going to code so I put
all of this on one line but in HTML
let's say for some reason I want to
break it up into multiple lines so the
BR tag may do the break the The Break
Tag breaks lines BR tag where they are
so when this comes up with HTML we'll
say the BR tag breaks lines where they
are then HR HR just gives you a line
across the HR tag creates a line and HR
so again there's so with this with HR
and BR you don't open or close tags you
just use use those particular tags and
and that's basically what you get you
can also simply write text onto the
screen and so again you'll notice
there's no P tag or H tag or anything
here this just puts the text as it is
onto the screen again you might want to
use this for when you're building crappy
web apps um if we go back again we take
a look at this so this is strong right
so so this is a P tag then everything
here is in the strong this is italics
actually what I can do here I do show
page Source just so you can see this
right e strong close strong then this is
italics and that's
italic uh this text has important words
right the mark uh the BR tag so the BR
tag break breaks lines break goes down
to the next one and then the HRS or
simply HR and
HR and we got those all right and so
that starts to give you the idea of how
you can start to use HTML to design uh
your web applications this is also going
to be something you're going to see in
the real world so a lot of times
designers are not coders and so you want
some real fun so what'll happen is your
company you either hire you'll have on
staff or you'll contract out designers
and what they're do is they're going to
in oh Adobe some kind of adobe product
they're using nowadays maybe figma most
likely Adobe anyways they're going to
build a very very pretty web application
that has no functionality basically all
it's going to be is posters something
like this only right and they're going
to show what colors icons should be and
they're going to show where icons should
be and they're GNA show where lines
should be and they're going to show all
of this stuff and then what your job is
as a technology professional is to take
this really really pretty thing they
gave
you and then figure out how to type code
to make your web app look like this
thing and that can be
amusing okay um let's see here pass that
um go down to comments uh so we kind of
showed this before with on the page uh
format. HTML if you want to comment
something out
um
basically uh this is a comment here so
again this is going to be one of the
things when you're going between
different languages one of the big pains
in the ass is different languages use
different syntax right again I've talked
about that before with like else if so
I'm used to if else if else statements
uh python does if L if L statements why
because they're python right again
python if you're going to comment things
out uh you use the that that hash that
pound sign and that'll comment out a
single line uh in other languages you
will use forward slashes to comment out
of line every language for whatever
reason they have their own ways to
comment out things so in HTML if you
want to comment that a line for some
reason you do the arrow thing an
exclamation point one hyph two hyen
three hyphens you then put in whatever
it is you want to put in one hyphen two
hyph arrow thing and that is basically
how you get a comment in HTML so with
this this will not show up on the screen
at all so if you're going to have St
like forms so you're going to have forms
and you want to explain what the hell's
going on with that form or whatever else
you can put that there the one thing
that I will warn you about with this
though is again that whole view
Source all right so if we go
um all right right so we go to this
page here's the thing you have to be
careful about right so I I type hello
here so hello shows up here that's fine
but then you're gonna do some comments
you're gonna do some comments like oh
especially got some interns it's like
crap right I gotta I gotta make sure the
interns know what the hell to connect
this form to and so one of the things
you might think about is okay in the
comments what I'll do is I'll be like
make sure to set the password or the
port number to export in order to access
our database cluster if you forget the
username and password is X Y or Z and so
if you do if you do all that in comments
and you're thinking about it this way
you're like oh look I can do all of
those comments in HTML and then that'll
give information to the developers and
it'll all be good what you have to
remember with HTML though is it sends
everything just because it's not showing
up on the screen doesn't mean all that
information didn't just get sent to the
end user um so this is a big thing right
there are hackers was it Missouri is one
of those Southern States oh God bless
like again this is this isn't political
it's just how stupid some people can be
sometimes there's like this Republican
Governor it's like an Arkansas or
something anyways so there was a local
newspaper and the local newspaper went
to like the Social Security Site or
whatever for for the state and they were
able to look in the source this and they
found people Social Security numbers and
all this kind of additional information
and literally the governor tried to sue
them for hacking because they had hacked
the state's web
application and it was like no you just
literally have no idea how your own app
works right um and so this is this is a
thing to to be very careful about when
you're building your web applications is
you only want to
send any data that you pretty much don't
give a damn if the end user sees uh so
this is a big thing like with JavaScript
we'll deal with JavaScript later
JavaScript is interesting so JavaScript
is a is a fully functional programming
language you can do a lot of great stuff
with it one of the nice Parts about
JavaScript is is a client side
programming language right so we have a
backend programming language again
python python Ruby PHP these are backend
and then we have client side languages
like JavaScript with backend languages
uh the nice part about this is basically
all of your stuff stay secure you only
send out exactly what you want to send
out right um but the issue is is all of
the processing actually occurs on your
server so every database query
everything that you do happens on your
server so if you get a million users or
whatever you're burning a lot of ram
You're Building burning a lot of CPU in
order to deal with all those users so
one of the nice things with JavaScript
is Javascript is a client side
uh programming language so basically
what happens is you just send the text
for the JavaScript script which is very
small you send it basically in one go
and then their browser then runs that
script uh to give give them results
right and so basically if you're looking
at a scaling issue the more you can
offload resource consumption to the
clients the better your infrastructure
is going to be the problem that we ran
into about 15 years ago when JavaScript
became all cool and sexy again and
people started creating web apps with
more and more JavaScript
functionality is basically they would
start sending way too much information
to the client side and then in that
information was again things like Social
Security numbers all of this stuff and
basically when you went to the form to
do a search he would simply search that
text information that was already
provided the issue is is if you went
into The Source you could simply see all
of that information and you could grab
it if you wanted to so that's one of
those things we we start talking about
we start talking about architectures and
we start talking about how we design
these systems that's some of the stuff
that you you're going to need to be uh
thinking
about um let see here so that's a
comment uh tables these are fun uh so
basically tables uh whenever you're
going to be creating reports you're most
likely going to be creating a table
tables are easy as long as you remember
to open and close crap uh so you open
the table with table tag so you open
table and then we close a table so we'd
start with Open Table close table uh TR
is for the rows themselves so tables for
the whole table and TR is for each row
then we have th th is basically for the
column header so think about the title
on top of all the columns right first
name last name age uh normally th uh
it'll be like bold or something like
that uh and then we have TD so basically
for all the individual data cells we do
TD and that's you know okay so we have
you know age or name so Bob you know
Smith 16 that's all wrapped within TDS
now if we go and we take a look at the
table.
HTML and take a look at this
this and
um this kind of gives you the idea of
what the table looks like when you
actually write it out so if we we look
at table let
me so we look at
table this is what the end result is got
to be right so we start with table we
close table then we do name a size so TR
open TR close close TR open th close th
open th close th open th close th we go
to the next TR then we do TD close TD TD
close TD TD close TD and that gives us
this table we take a look at it from the
code uh this is basically what it looks
like now remember with
HTML HTML does not give a damn about
white spaces right so this what I have
here
you know you can
do you can do all this crap in a single
line and it would run perfectly right
and again this is where we talk about
spaghetti code basically code that
functionally works but is ugly as hell
so literally I could put all of this in
a single line an HTML the web browser is
still going to function fine um the
reason that we do this type of
formatting is so that when somebody else
has to come in and actually read what
the hell it was you're you're doing uh
they'll be able to do that relatively
easily also with these tabs if you're
not using it if you're not used to an
IDE one of the nice things is allows you
to collapse uh these different uh
sections right so basically if I want to
just look at the header right th I can
simply open this up and go okay table
the first table row close the table row
th name th
D size okay that's how it's supposed to
look I can close that then I can go to
the next one I can say okay Bob 22 large
and that's one of the things with doing
this type of formatting makes life a lot
easier too um oops so if we open all
these
up again basically it's very simple here
we open the first row th for the heading
th open th close th open close th open
th close you close TR TD gives us the
name Bob close TD TD H 22 close TD TD
large close TD then we close table row
we come down here open the next table
row and they do cu6 small and so
basically this is we're going to be
doing this in the lab today is when
you're dynamically building these web
applications uh using python so you're
going to go from a CSV file you're going
to pull in all the records from that CSV
file and then essentially you're going
to be printing uh your own kind of
version of this and so that's what you
need to be thinking about it's like okay
how am I going to open the table and
close the table okay how am I going to
open the row and close the row okay when
am I going to know when to do THS when
to do
ttds and figure all that kind of stuff
out um see
here um
uh you have lists so again same thing U
you have order list uh is basically
numbers 1 2 3 four 5 six you open the O
you close the O and then each item in
the list you open an Li you close An Li
if you want an unordered list basically
bullet points you open UL close UL again
each item in the list is Li we take a
look at list. HTML
uh this is all it is right so we want to
create a list so this is an order list
one two three order list Li close Li Li
close Li Li close Li close o unordered
list Li close Li close L close close you
we go over and we take a look at what
that actually looks like in a web
page this
is what that then looks like uh order
list one two three and your items
unordered list bullet bullet bullet and
your items that's all the list looks
like um let's see
here hyperlinks okay this is where it
can get fun um so basically this is
where we start first getting into
linking and so when we start talking
about linking um what this means is
again any HTML document is only going to
be text it's only going to be asking how
you get that multimedia component is by
bringing stuff in uh from from other
places uh either on the server itself or
a server that you own or frankly
somewhere else entirely else uh on the
internet um and so this is the place
where you are going to have to be
careful again with things like
capitalization if you're linking to
something on your server and your server
OS cares about capitalization think
capitalization matters if your doesn't
care about capitalization then it
doesn't matter um so if we take a look
at this uh so hyperlinks this is where
you can click on a link and go somewhere
else right uh the tag is a so it's a you
have a herf so this is what links you to
wherever you're going to be clicking to
equals double quotation marks uh so we
want to go to cnn.com HTTP so hypertext
transort transport protocol
col www.cnn
so you need you need all of this to go
to a different website CNN.com Taco
bell.com foxnews.com I don't care but
you need to put HTTP in there you also
need to be thinking about whether you
need to put
www or not um so most people if they set
up their web servers appropriately uh
whether they have www or not it should
still go to the exact same location some
people don't have their web servers set
up properly so you do have have to
verify that before you set up your
hyperlink uh we close the little arrow
thing here we then basically this is the
human readable this is the link that
will show up on the page so we say
CNN.com
um is news I don't know I can put
whatever I want there any text this is
what's going to show up so this is the
link this is what's going to show up and
then we close the a tag um so basically
this is what gives us the hyperlink and
then in here we can put whatever we want
we could put an image link we'll talk
about images and a couple minutes you
could put a picture it basically the
image link and then that would turn that
picture into a hyperlink you can put a
div you put a whole bunch of different
stuff we're just going to put text
in um if you're trying to go to just
another page on your website so let's
say you have like a directory or an
index for your website a herf here you
can simply go to whatever document
you're going to so page. HTML a page on
your site close and so basically again
if you have like home about prices so
you could have an about. HTML and a
prices. HTML so on and so forth and that
can be your little navigation menu to
get through your site uh page. HTML so
if you say that the page is in the same
folder as this document right so I have
I have my
index.html in that I have a link for
page. HTML and it's all in the same
folder then I can simply call page. HTML
just by calling
it if the P if the page that I'm going
to is one level down so let's say this
document
isn't oh now so let's say we're here so
we have
index.html right so if we have page.
HTML here I can simply call page. HTML
but if it's down one level down into a
different folder P HTML I don't know
let's say the pages folder then I would
have to do let's say
Pages slash
page. HTML
so again basically all this is is really
very basic file structure stuff if you
get confused ask chat gbt again I'm not
anti-chat gbt it's just not artificial
intelligence anyways uh if you want to
go up one folder so let's say you have a
document that's up one folder that's
where you do dot do slash and then
whatever it is and basically what do do
slash does is it takes you up one folder
and then you're able to access the pig
that's in that one folder up all really
basic convoluted crap then don't worry
you'll figure it out as you do it um
let's see here then we can do Target uh
basically you can Target where the page
is going to open so if you do Target
equals uncore blank what this will do is
it will open uh the page that you're
going to in a new tab uh so this is one
of those things like a lot of the
content Management systems or a lot of
the companies now do to kind of screw
with their metrics right they need good
metrics people just don't care about
their site so one of the things that
they can do is if they open up pages in
blank then the original page is still
open so it's still registering as a user
being on it for an amount of time as a
new page opens up over top of it and
right that's one of the ways you can
screw with things uh if we go over to uh
link. HTML show you how this works so
um this is link. HTML when we open it up
all right so
um no did I
save Now
CNN is news
controls okay so we do this so we can
see
CNN.com is new
right and I can click on that and that
will just take me to cnn.com again to be
the with this I don't need any
permissions I can just do that I don't
have to ask CNN.com to do that uh table
page so if I want to go to table page I
click on this table page
link and uh that failed for some reason
of course it did
um where the hell am I at if uh let's
see here this is a link in paragraph I
can click on that and these are failing
okay because that's how my day is going
open a new tab anyways that worked and
so that opened in a new tab if we go
over we take a look at the
links okay yeah we got this um
yeah have to figure that out so anyways
uh a graph HTTP colon
CNN.com close close Arrow CNN.com is
news close a uh then we want to do to
the table page so table. HTML right a
table. HTML uh this is a if I only want
the link right I can simply wrap that
within the ARF the hyperlink in a
paragraph and if I want to open up into
blank a graph format. HTML Target equals
blank it'll open it in a new tab this is
the other thing you're going to have to
be thinking about when you're building
uh Dynamic web pages so again with
python um python itself really doesn't
care between single quotation marks and
double quotation marks but when you're
writing to a file um when you do that
right thing you're going to open with
something and then you need to close
with it well one of the things to
remember is if you're writing
HTML then HTML is also going to need to
be opening and closing things and so
this is why many times in Python you'll
use single quotation marks so I can put
a single quotation mark around all of
this and then the double quotation marks
in here they'll screw with it right so
if I did single quotation mark here and
then try to do single quotation mark
with this list. HTML basically you would
try to process only that and then
everything would get really quickly so
you put all this within a single
quotation mark and then you put any of
these values within double quotation
marks and it allows you to be able to
write to your HTML documents without
running into any problems uh so again
this is a basic idea with a
hyperlinks um let's see
here going down to images uh so with
images uh it's IMG SRC
equals wherever you're going uh so if
it's an image in the same folder like we
talked about before you can do image.jpg
so it going be.jpg
be jpeg it can be PNG so any of the any
of the picture uh types that your
browser understands basically you can
use that image there uh so this will put
the image as it is onto the page uh you
can mess with the height and width of
the image uh so let's say you wanted a
thumbnail image so let's say on one page
you wanted the fulls sizee image and
another page you wanted the thumbnail
well one of the things you could do is
you could use height and width values to
basically shrink that image down to the
thumbnail size that you want you have to
be careful about this though on any kind
of big site so again whenever we're
talking about web apps and we're talking
about these types of things again
resource utilization is an important
concept uh so your resources might be
that you care about are CPU Ram iops
basically uh dealing with storage the
size of storage that type of thing one
of the big things to be thinking about
when you're dealing with web
applications is basically the bandwidth
between your server to the client and
you don't necessarily have a lot of
control over that right you may have a
10 gig pipe going into your server but
they might be using a 56k connection in
India something like that right so an
important thing to understand about the
height and width here all this is doing
is it's visually either shrinking or
expanding the image it's not actually
modifying the file size itself so if you
have a five Meg image that's like I
don't know 5,000 pixels by 5,000 pixels
and then you use this for height and
width to to shrink it to 100 pixels by
100 pixels the thing to remember is all
five Megs is still going to to your to
your client computer it's just shrinking
that on the page itself so this is where
we talk about a website optimization
where you go through and using an image
editing software you actually create
images of the appropriate size so I want
to see the full size image the full five
Meg image when I click on a link it'll
give me the full five Meg image but if
all if all I want is a thumbnail I'll
actually create a thumbnail image of
that using the image software that'll
only be let's say 50 kilobytes in size
so that can move relatively quickly so
that's one of those things to keep in
mind here because uh again back in the
old days when we were all lazy we didn't
quite realize how stupid we were being
you'd have all these huge images and
then you like put them into a database
and then when you print them out from
the database you just change the size
using this uh and then again like you're
you're literally sending like 30 Megs of
image files
to somebody in a 56k connection which
was not
amusing anyways uh you can do images not
just from your server uh but also from
other people's servers uh so we have
rusan here friend of me of the of the
school rusman uh so image SRC htbs
Rossman group.com image.jpg when we open
this up on our page even though it's
sitting on his server I'm able to show
it on my server
um if we go to pick. HTML yes so you can
kind of see this
um basically here we have the fulls size
image so I have this image this is the
full size image if I just call the image
itself this is as big as it'll be then I
went down here and I fussed with it I
made it like 200 by 200 something like
that and you can see it squeezes it this
is one of the other things you have to
be thinking about whenever you're going
to be doing the height and with is
making sure you figure out how to
maintain the ratio so if you're like oh
I just want the image to be square you
can get a square image but if the image
used to be this and you make it a square
then it's going to look like this again
one of those things you have to think
about uh and then like I say Rosman
group so this is actually sitting on
rossman's server but I am able to Simply
link to it because it's something that's
on the internet if we go over we take a
look at the actual
um uh code itself again pretty simple
imgsrc equals
picture.png so that showed me the full
size one image SRC picture PNG the same
thing height of 500 with the 500 so we
just made it a square but it literally
makes it a square and then IMG SRC and
this is the link so https Rosman
group.com WP content uploads 2022 12
Rossman long f.png
so again as you can see here this link
literally goes all the way back to his
server and I'm putting this onto my
website uh which again is especially in
the modern world I really feel like the
value of intellectual property for some
reason I don't know why like artificial
intelligence has really made people much
more diligent about this whole concept
of intellectual property and what goes
on a website and I just want to show you
with some of this stuff like literally
like imagine if LS Rossman had a lot of
pictures that I liked I could literally
create on my own website a gallery of
his images and then I could put all
kinds of ads around that and try to make
money off of his images and the worst
part
is when you access this this uh this
image file you're burning his
resources this this doesn't affect my
web server right when I when I link like
like this this basically has no resource
consumption on my web server because the
user is actually getting everything off
of their web server which again is an
interesting thing to be thinking about
the modern
world um let's see
here pretty close to the end another
couple of slides uh iframe uh so
basically what I frames allow you to do
is they allow you to open other web
pages um inside your web page so this
used to be really popular again 10 15
years ago you would go to a web page and
you'd have all these little if frames
and have like different web pages in
those if frames this can be useful uh
for you folks again if you start
creating things like dashboards uh where
you're pulling in information from
different apps within your own
infrastructure so let's say you have a
script and that script gets the
information about CPU utilization of
your servers and you have another script
and it grabs Network utilization of your
servers you have another script that
grabs some kind of resource utilization
right if they write that into three
different HTML files one of the things
you can do is you can use iframes to
then pull all three of those files into
your one page to give you kind of that
single pan of glass if you want to uh
this can be important again especially
in the the real business World um people
get very protective over their
crap right again you're all supposed to
be on a
team yeah that's that's what they tell
you right unfortunately it's a team of
cats uh they'll talk about that like if
you lead a team and in the technology
world uh the old term for it used to be
cat herder you literally were just
trying to herd cats in a vague Direction
so one of the problems you can have is
since you've got these cats and you have
a SQL cat over here and database cat
over here right and they don't like to
play with each other and they don't
trust you they trust nobody at all um so
one of the issues is you might want to
be trying to create a dashboard where
you access their data right so they have
a database right the networking people
they have a database all their logs get
dumped in a database and the CIS people
they all of their stuff that gets dumped
into a database right and all you want
you're like hey hey just give me just
give me read privileges on one t
one table and that's all I want and they
won't do that because they think you
might be able to do something stupid
with those greed privileges so anyways
what you might be able to get them to do
is just periodically every minute five
minutes 10 minutes whatever else get
them to write a script that simply
outputs very specific information to an
HTML document and then you can grab that
HTML document and bring that into your
dashboard without touching their
database at all you have zero privileges
to their database you don't have to
worry about ports their database or
anything else they simply export
something to an HTML document you then
pull that HTML document in and that
might be a way to go uh if we take a
look at this uh if frame.
HTML oh what do we got
here uh so basically what we have here
um is we have um the three different
pages right so we've already created
three pages so I'm just using that
during this class uh so we have the
format page here uh we have the table
page here and we have the link page here
and so basically these are iframes right
so in so I'm at this particular page and
within this particular page I'm
embedding these other pages so again I
could have Network utilization here CPU
utilization here and maybe a trouble
tick issue here and it all can be on
that that single pane of glass that I
talk about a lot uh if we go over and we
take a look at the iframe um again dirt
simple uh you just simply say iframe SRC
equals basically wherever that
particular document is at so format.
HTML table. HTML link. HTML uh for this
whatever reason you actually do open the
if frame and close the if frame don't
put anything in the middle though just
do this and Away you go uh you can you
can bring in web pages from other places
uh to to to present uh onto your single
pan of
glass but it does depend upon the
security configurations of those other
web pages uh so if you tried to use
iframes again 10 years ago especially 15
years ago you could you could do a lot
of cool stuff with I frames and
basically you could you could grab all
kinds of people's web pages and again
basically try to direct people to your
website and you embedded their pages
into your website you know Shenanigans
ued um so one of the things nowadays is
a lot of the the the web pages the
websites out there they're actually
blocking this iframe embedding
capability um so you will have to play
around and see what'll work so
basically this will work just by default
so if you set up your own web server and
you do this it should work fine but
again basically people can try to to
turn out it SC cross site um cross is
the cross-site scripting anyways it's a
cross site thing so they can turn it off
so that's just kind of one of those
things to keep in mind um see
here past that uh we have forms uh so
we're not going to get a lot into forms
today because with
forms you need a whole bunch of other
stuff
uh so again with HTML the important
thing with HTML is HTML is not Turing
complete it's not actually a full fled
uh programming language uh it is simply
a markup language so with uh HTML you
are able to create forms you can make
the forms look pretty but when you hit
the submit button you actually have to
trigger an action uh by some other
script again one of those backend
languages python PHP Ruby on Rails
basically there is an action thing that
you put in and that sends it over there
so we take a look uh say form
HTML just show you what this looks like
so I did a crappy form
here and with this I can put in
somebody's name right uh we have oh it's
called an option box option box I can
select something uh then we have radio
buttons so these are radio buttons uh
and then I can click the submit button
so basically this is just a really ugly
form again you can design your form
however you want it to look uh if we go
over and we take a look at
this here this is what it actually looks
like so again everything in HTML you
open close so we open the form uh tag
here we're going to close the form tag
all the way down here the important
thing thing is going to be the action
the action equals and then basically
this is what script you're sending all
of this information to again we're not
actually doing that today because that's
for another class then we say what
method we're going to use uh so
generally uh in the web when you're
sending data there's either git or post
get is the method of sending data where
it's actually in the address bar the URL
right so basically you send data
essentially through a link and all of
that is visible for anybody who wants to
see it which is generally not how you
want to do things uh what post does is
post kind of sends it in a more secure
fashion so it's very it's not very easy
to see and actually get that information
and so we're going to Simply use the
method equals post going to do name so
that's just the text that's printed on
the screen then we're going to say what
input type it is so we're going to say
input type equals text and then name
equals whatever we're going to call this
thing so that backend language when you
click the submit button and this data
goes to that backend language basically
that backend language has to know what
the hell it's receiving and so that's
where these names come in so name here
is colors name here is name uh name here
is option test so basically when this
gets sent that's going to get sent and
it's basically going to get sent as an
array a name Nam key array and so what
you're going to be able to do is you're
going to be able to pull out the value
based off of that name uh so input type
equals text name equals name and that
just gives you a text box I use a break
here a br just put this on the next line
uh so this is the select box so you
click you get options name equals colors
right option value so the value
here this is what's actually getting
sent to your script right so again one
of the things we talked about before is
making sure your data looks clean or is
very easy for your script to deal with
so again most likely you're going to
want all of your Val values to be
lowercase unless there's a reason not to
make them lowercase so here I'm just
going to make the values again lowercase
red blue green and yellow therefore I
know what I'm dealing with that's the
value that will be set this is what
actually gets shown on the screen so I
have red all capital letters and that's
what the user will see I have B
lowercase b uppercase L that's what the
user will see green all
lowercase lowercase ye uppercase LL
lowercase o w and that's what the user
sees this is what gets sent this is what
the user sees and so that that's a way
like so you could have um you could have
part numbers here so you could have you
could have the description of the part
here you know large
flange I don't know small
flange smallish FL and then you could
just have a part number one
z56
4699 and so then your script is just
dealing with the part number it doesn't
have to deal with what you're showing to
the user and again that's going to be a
big thing with creating web apps is
there's two there's two things that are
seeing your app there 's the human
that's seeing your app so your human has
to figure out what the hell you're
talking about but then there's also the
script that literally has to see your
app so both both of these things have to
read what's going on and so that's where
you you design one side for the computer
to understand and one side for the human
to understand yeah if we go over take a
look at this this is where you'll see
green and then again red is all
uppercase
BL right so this is what this is what I
see the other stuff is what the user
sees
oops um then uh yep so select that's a
select box and we close a select box uh
we break and this is where we have the
options these are called radio buttons
whenever you have a DOT and you can only
select one OD the dots uh so we do
option one option two option three and
put type equals radio and then we have
to make sure in order to turn them into
a set that the name of each one of these
radio buttons is the same so option test
option test option test so that they're
same then value so this is what the
value that's going to get sent option
one option two option three and the
final is the submit button so you do
input type equals submit and that's
really all you have to do in order to
give yourself this nice little submit
button here you click the submit button
and it doesn't do anything because it's
not actually connected to a
script okay and then the final thing
right final thing uh divs and spans uh
so we're going to get into this uh in
our CSS class because this isn't going
to actually do a lot for us until we get
to CSS so basically um one of the things
you have to be thinking about when you
start designing your web application and
thinking about how it looks is again
things like how many columns where are
columns located right so so the header
will be one long one wide col colum uh
in the middle we'll have three tall
columns under that we'll have two a
little bit wider columns right uh that's
all done by divs so basically when
you're when you're building uh your web
application right the unsexy side of it
is right when you go to cnn.com you see
what CNN.com is what you're going to be
doing with these divs is so this is your
web page and so what you're going to do
is you're going to be like okay there
needs to be a div here and that's going
to be my heading and then under this I
want
divs that are actually gonna be inside a
div this is this own misery and you know
these will be like rotating pictures or
something uh and then under
this I want two divs also within a div
uh and that will be like headline let's
say again let's say this is for CNN
right headlines and then under this I
want a whole bunch of teeny tiny divs
for all the sweet sweet ad money that I
want to get and those are going to be
divs so this would be open a div and
close a div then we would open a div
open a div close a div open a div close
a div open a div close a div close a div
open a div open div close div open div
close div close a div open
div so basically what you're dealing
with with
divs is this it's where you we call
wireframe out where you wire frame out
basically the web application and this
is where all of the different things are
supposed to go uh gets even more
interesting with something called
responsive websit so almost all websites
nowadays are what are called responsive
uh basically and what happens with
responsive websites is depending on the
screen size all of this crap will autof
format to look
like something when you see it but
anyways that'll be divs that'll be on
Thursday uh and there's also spans uh so
again we have all these different tags
we have all these different things that
we want to might want to modify we want
might want to modify the background
color we might want to modify when we
hover over it we might might want to
modify when we click on something
something like that basically one of the
things a span tag allows you to do is
you're able to lump a lot of things into
the spam tag or spam spam tag uh and
then give it um styling CSS styling
configurations and then things happen
there uh so anyways divs and spans are
what we'll de with on Thursday and then
we have our Labs uh so again Tippy tap
or die Tippy tap or die you're not going
to remember all this I know a lot of
people are like wow this was a good
class I'm going to leave now if you
don't do the labs you haven't done the
class so we have three Labs today these
are going to be in Python so if you
haven't follow along with python maybe
you should leave the class because they
are going to be in Python anyways uh and
these are going to be for dynamically uh
building uh small little web
applications so you can start to get an
idea of how this works so we have
search. py dashboard. py and note
dopy uh let me figure out where my vs
code
is and
is the first
one search Okay so the search. file sure
so basically what this is is we are
going to dynamically create a table
based off of a CSV file so a CSV file is
a comma separated value file uh and so
we have these comma SE this file of
records that are comma separated value
uh so again this is one of the nice
things uh chat PPT is very good for if
you need crab data to play with just go
to chat GPT say I need 500 records I
need these you know these things in CSV
format and you go uh so anyway with this
we have first name last name age shirt
size and Allergy and then that's
basically what we've got for 50 records
or so uh and so basically with this uh
what I can do is I can either print out
all this inform into a table or I can do
something like a little search routine
and that's what we'll
do uh so with open uh student. CSV uh re
R for read so we're g to open this as
read only as file we're then going to do
file equals I'm just going to keep this
the same and so what we're going to do
is so when we create this we create this
variable and assign it a value from this
file it's going to be an object so we
just try to print PR out or deal with
the object it's going to be a mess so we
got to turn that object into something
that we can use what we can use is a
list and so what read lines the read
lines method does is basically it turns
every line in this file into an a value
for an index and a list so a file is now
going to be a list from that then then
what we're going to do is we're going to
open a page. HTML so we're going to
create a document a web document so with
open page. HTML W for right for
overwrite so whatever is there will be
deleted it'll be overwritten as web page
we're then going to do webpage. write
table and this is where HTML tags get
really fun because remember you got
always got to open and you always got to
close and you got to nest and you got to
do all that kind of stuff so the very
first thing that we're going to do is
we're going to open the table tag since
we want to make it a table
header
equals uh file at index z.s spit on the
cops right so if this is a list index
zero will be this and so these are the
header values the column name values
right now uh basically with every uh
value in this list uh that is a string
so it's a full string you can't really
do a lot with a string string so what I
need to do is I need to split that into
its own list based off of something
again comma separate values so file at
index zero I want to split that string
wherever there's a common so each one of
these things will turn into a value so
first will be first name will be zero
last name will be one Age Two sure size
three allergy
4 and then uh let's see web page WR TR
so we're going to open a table row so
this will open a table Row for Value in
header so this is a for Loop so
basically for each value in header web
page. right F string so we're going to
do th so th is the header we're going to
put in the value so first name last name
age shirt size allergy and close th so
for each one so we open the TR and then
we rip through this list and put each
one of the values and then once we're
done with that we come back out and we
close the TR so we open we put in our
values then we
close now to print all records so the
first thing that you're going to do is
you're going to just print all records
so four line in file so the file is
still that list we're going to start at
one so we do this bracket one colon
basically it says start at index value
one so when we take a look at this right
this is index value zero so we don't
want to deal with that because that's
not actually information we want index
value one so don't look at this so this
is zero this is actually one we say
start at
one uh web page right table Row Record
equals
line.it so uh so we're going to take
line and we're going to split it at the
comma like we did before for Value in
record right TD value close TD so first
name last name age size allery and then
we're going to close TR and then we're
going to Loop through for every line in
the file then all the way at the end
right we open table so we got a close
table somewhere so we're going to close
a table here so if I run
this I'm not going to get any response
here because I didn't do any print or
whatever and what I can do is I can go
and your default your default working
directory is going to be uh in your your
user account so Eli this is my
default I can open up page.
HTML and we can see all every all those
records that were in the CSV file are
now in this nice table and I can see
Mitchell Jones 36 small lactose
Abid 27 extra large pollen so on and so
forth so now I go from a CSV file that's
pretty ugly don't really want to take a
look that do something that's a little
bit prettier but the thing is that's not
the most useful thing in the world right
that turns a CSV file into a table
that's pretty nice but how do we turn
this into something that's actually uh
useful so I close this and what I'm
going to
do uncommon that out and comment this
out so now all of this is commented out
so what we just did is commented out now
what we're going to be looking for is I
want anybody who has a pollen allergy so
uh let's say have all these records in a
CSV format and again maybe it's for kids
I want to know who has a peanut allergy
whatever else for this I'm simply doing
pollen so four line in file starting
with the first record which is actually
second record one zero is the first one
is second line equals uh line replace
slash in so one of the issues when
you're dealing with sometimes so next
line so again remember the asky
character what puts things on a next
line is a slash in so what replace does
is got to get rid of that slash in just
to make our life easier here so replace
slash in with nothing so single
quotation mark nothing single quotation
mark we'll replace that with nothing
basically this is going to strip without
the slash in at the end record equals
line. split as we did before with a
comma if record at index 4 equals pollen
so we take a look at this right index
zero index one index 2 index three index
four so if the person has a pollen
allergy uh that is what we actually care
about uh do play around with this with
capitalization see what works for you
and see it doesn't but anyways if record
4 equals equals hen then we're going to
write to the page so web page right TR
for Value we're going to write the value
we're going to close the TR and we're
going to close the T So if I
then save this and I run
it come back here actually I can simply
do a refresh and there we go so now out
of all that 100 or whatever records I
had before I can now pull out and I can
do a report on just um you know whoever
has uh the Paul an alleries this is
something right I can take a look at um
so if you take think about this again in
a business situation things where this
might come up is Imagine um you have
sales agents so uh so you have a company
you have salese um you know tickets or
some kind of contact comes in for
specific salese or there's things about
specific salese if those come in in a
csb B file one of the things you could
do is basically you could search for
each salesperson and then do something
about either print off a sheet maybe
something like a lead sheet for each one
of those salespeople or again with some
other functionality basically send off
an email using something like an API to
say okay this is a CSV file that we have
here's everything that pertains to you
and send that off as an email or print
it out or whatever else so this gives
you again a little bit of
basic
functionality um let's see here then
from
that we have uh the dashboard
dopy um so uh one of the things I like
doing um for applications is uh Network
testing Network dashboards we're going
to deal with this once we start dealing
with the OS module coming up um because
one of the things that you want when
you're when you're you're dealing with
things is being able to deal with like
uh Dynamic information because if you
have Dynamic information then you can
make sure it's actually changing right
because sometimes sometimes you're
supposed to be testing Dynamic
information but you actually statically
configure things and so your Dynamic app
is actually static app and everything
kind of Goes to Hell uh so anyways I
Like Doing Network applications Network
testing applications because it actually
gives you live data to deal with uh so
this is kind of a simulation uh for that
kind of live
data uh let's see here
um okay so with this uh we're going to
do a random from the random module we're
going to import Rand in from time we're
going to import sleep let me kind of
actually show you what this is going to
look like when it's running just so you
have an idea um so when this is
running it is going to look like
this so it's basically like an up down
dashboard uh depending upon the value
that comes in the background color is
either going to be green for good yellow
for who the hell knows and red for bad
so again imagine that we're pinging all
these different sites we're using apis
or using software as a service and we
want to just make sure the sites that
we're supposed to be pinging are
actually up this is what it's supposed
to be simulating uh so what's happening
is the script the python script is
running it is writing to an HTML
document when we write to that HTML
docent one of the things that we do is
we actually add a metat tag for the HTML
document to Auto refresh itself every
five seconds so this the python script
is constantly writing to an HTML
document and the HTML document Auto
refreshes itself and then we get this
nice little green
board uh so let's take a look at this um
turn this off so from from random import
Rand in so basically I need a value to
test off of so we're simply going to do
Rand int from time import sleep uh so
remember whenever you do a while true
Loop it is going to run literally as
fast as it possibly can sometimes that's
not a good thing especially when you're
writing to files sometimes you can run
run into a problem where your script is
writing so running so fast that it's not
able to close the file before it tries
to reopen the file and all hell breaks
loose so anyways by having it sleep for
a second or two isn't necessarily A Bad
Thing even if you don't technically need
it to sleep for a second or two anyways
uh we're going to create a list of sites
so google.com CNN.com fox.com and taco
bell.com imagine that we'd be pinging
them in the future we're going to do a
wild true Loop here so while true means
it will continuously go until we force
it to stop file equals so we you'll
notice in the other
project um search when we open the file
we did with open right so this is
normally how you're going to open a file
uh with this just because it's writing
so much what I find is this other way of
opening a file actually seems to do
better and the reason is is because you
actually Define opening the file here
and at the end you actually Define
closing the file and so you run into
fewer problems when you're when you're
continuously writing to a file seems to
be less issues
anyways so file equals open dashboard.
HTML W for overwrite file. write so now
the file is open this is the meta tag
we're going to do again so single
quotation marks single quotation marks
double quotation marks inside meta it to
be equiv re equals refresh uh content
equals 5 seconds so this this tells the
web page to refresh itself every 5
Seconds file. write H1 tag up down
dashboard close H1
tag then we come down here for host in
site so that site list for each one the
hosts condition equals a Rand between
zero to two zero one or two so three
values if condition equals zero color
equals red L if condition equals one
color equals yellow else color equals
green uh we come down here so we're
going to print out on the screen guess
for troubleshooting so this going to
print down here the host and then the
color I do this just to verify it's
doing what the hell it's supposed to be
doing and then we're going to do file.
right F string P tag so this is CSS this
right here is actually CSS and so we'll
deal with it more on Thursday but got to
do something here so style equals
background hyphen color colon the value
for color semicolon closes a CSS
property double quotation marks then we
put the host so basically that's a host
name Google Fox CNN then we close the P
tag and then do I do a next line there
and then we do a file. close and then we
sleep for two seconds so basically as we
go through
this we go write the meta tag we write
the the title we then Loop through and
for each one of those Loops we check the
condition depending on the condition the
color will change for that particular
host and then the important thing is
remember with this type of dealing with
a file that you actually close the file
down here and we have it sleep for two
seconds so things don't get mucked up
now when I run it so you'll notice here
so google.com green CNN.com red fox
yellow Taco Bell red so this is just
giving me some troubleshooting to verify
it's doing what it's supposed to and
then when I come back here it is now
giving me a nice little light show uh so
that's
it um okay and then the final one is the
note okay um so for this one basically
what we're going to be doing is we're
going to be creating a little note
taking app uh so I'm going to go on this
uh so it's GNA ask me for a note here
and I can say uh teaching class then I
hit enter and ask me for another note
and all it can say typing stuff and then
I keep going
more block anyways um as that's going
what I can do is I can come here and I
have the note iph app. HTML I can open
this up and this basically gives me my
little no app so no app is a
title and then this is just a table this
gives me a pretty ugly timestamp just to
give you an idea what a time stamp looks
like and teaching stuff and typing stuff
and more so this is way this is a way
that you could create an app where at
the command line you can be typing
things in and then it's actually
outputting that into a format that
somebody could read with a web browser
uh with this let's close this uh so from
datetime import daytime this is going to
be for the
timestamp while true this allows us to
continuously Loop through note equals
input note so this is the input function
where it asks for a note that's what
that does
timestamp equals date time function now
so basically it's going to give me the
timestamp for now with open note.
CSV uh a for append as file file. write
timestamp hyphen note slash in so
basically what this is going to be doing
is this is actually G to be writing to a
CSV
file so we have this note CSV file here
and we're using this for the data
store
um and so we can see this so I have the
Tim stamp comma teaching class Tim stamp
comma typing stuff Tim stamp more right
so basically this allows me to have a
data store of some sort again when we
talk about data stores it could be
databases could be text files could be
CSV files some place that you're
actually going to be dumping
things
um and so that's that's going to go
there and then we're going to do with
open so now we're going to open the HTML
document this is the web the the web
page that actually going to be looking
at we're going to do overwrite so this
way we can we can Dynamic we can create
a page that rewrites itself without
deleting uh the the data that we already
put into it so no hyphen app HTML as app
so that's what we're going to be dealing
with so app. write no app uh h one tag
note apppp slashin app. WR table so you
got to open the table with open note.
CSV so that file I showed you read r as
data data equals read lines so we take
that file in we read all the lines for
record in data we're going to split that
record uh we're going to do app. write
so open a table row TR opens a row for
value and record uh open open TD put the
value close the TD so basically be open
the TD put the time stamp close the TD
open the TD put the the note close the
TD when you're done Loop me through
doing that we're going to do app. right
close the table row then we're going to
do app. right close the table since
we're doing the wi open we don't have to
do the file close down here and now the
nice part about using the CSV right
these two different files is when I run
this again I can say even more notes no
note was
deleted right and when I
gos
here so even though even though this
page is being overwritten it's pulling
data from a different data store so that
data doesn't get deleted and more and
more stuff can get put in so that is
ah that is my my throat for the day time
is it 3:45 anyways so those are the labs
uh so you got a dashboard lab you got a
search lab you have the note lab this
kind of starts to give the idea of how
you can use Python uh in order to to
pull data out of files and put data into
files and turn all of that into some
kind of web application and basically as
we go we'll build on these basic
concepts to to actually create more suff
sophisticated things that you you might
do something with uh in the real world
uh so that's all I got that's it I'm
done uh questions questions I will stick
around for a while if you're doing labs
and you need uh some help um right
now any hands
up everybody good your all Geniuses like
oh I learned at
all cool cool your head hurts yes
welcome to be technology are you
passionate are you passionate about a
hurting
head um what is a good book you
recommend to keep on hand for HTML uh
none none it is
2024 I have no books uh again if you
want uh this stuff uh it's called W3
schools.com if you don't know about W3
schools good W3 schools it's literally
just the best uh again they've got all
these different languages up here again
you can click on HTML or css or whatever
else uh and when you
do they just have they just have all of
this and they explain it to you really
really really simply so again if you
want like um how do I do quotation
because again the other thing too again
this is a this is an hour and a half
class so much I can teach you and again
with any of these classes an important
thing to understand is I'm going to try
to hit most important
configurations um but there there is so
much more there is so much more and so
yeah like with this like there's
quotation blocks so if you want to do
block
quotations uh you can actually try it
for yourself and so this shows you how
you can do the block quote and then how
that'll look on the page page um it's
kind of cool here because yeah you can
go through and you can play with things
and uh again you can actually do the try
yourself click on try yourself and uh
you know you can play around with it and
see how it works uh so W3 schools that
is the place to
go
um I'll start with a tippity tappity you
start with a tippity tappity it's all
fun and games until you tippity tappity
anybody can do this until they start
doing
it let's see here in the comment
[Music]
section so what time is
it all right I'll give you about 20
minutes so I will be in and out if you
have a question in the thing raise your
hand and I will try to answer again we
can also do screen share too so if it's
totally goofing up on you we can we can
share the screen see what the problems
are
will you add some JavaScript to make
logic will you add some JavaScript to
make HTML site to
react I'm sorry do I look like a goddamn
JavaScript developer to
you does it look like these hands tuck
react
um we're going to do some we're going to
do some JavaScript uh
um again the lesson I learned a long
time ago I was working at pizza shop I
was in Seattle I was working at this
pizza shop and
um the pizza shop all they did all they
did pepperoni pepperoni sausage P ha
Pizza that kind of stuff anyways this is
like 20 some odd years ago so all the
pizza places at that time they had Taco
pizzas and they had white pizzas and
they had shrimp pizzas all this weird
ass pizza and so I asked the owner I was
like yeah so so are we going to do fancy
pizzas and he was like
my employees know how to make a basic
Pizza we sell a ton of basic pizzas
so we're going to keep making basic
pizzas again that was actually some
wisdom right there one of big problems
you get to with business is you start
having creep you start trying to do too
many goddamn things um and then you fail
at all of them uh and
so most likely for siloc cond Dojo I'm
basically going to be focusing on python
uh python python teaches all the Core
Concepts of the modern technology world
again everything from the apis the
operating system understanding
networking understanding systems all
that stuff again web app development I
mean God help you mobile development if
you really wanted to like all this stuff
you can do with python U so we're
primarily gonna be doing python here
like python python python uh we will do
some JavaScript for like front end
development so one of the with python
are web app Frameworks so flask Jango
bottle my fav's bottle um and so with
JavaScript again you can do form
validation you can do some basic stuff
with JavaScript uh for that user
interface thing so I will we will have a
few classes maybe a number of classes
but a few on basically JavaScript with
kind of like that frontend dis type uh
Ty lesson um but I don't really want to
go too far with that I don't want to get
into
react unless I have to I don't want to
get into node um because that starts
again only so many hours in the day um
so yeah we're probably gonna be more
focused on um I say python I say there
are some basics of JavaScript like like
we will have to do a few classes on
javasript just in order to make bottle
or whatever work properly but I I'm
probably not going to go too into the
weeds for that
one that's my
thought
um example add customer and build the
logic to add something than
display yeah that gets into more again
also it's one of things to be thinking
about too and again like one of the core
conceits with silicon Dojo really is the
dojo like I know people that's why I
hate about the modern world people steal
words but they have they have no they
have no lived experience with that word
right so they call it a dojo why do they
call it Dojo because it's cool right
again I spent years in dojos
right I was trained in hopo akido
Taekwondo again Kempo spent a long time
learning Kempo and one of the
interesting things I really like about
the the martial arts Dojo is not only
are you learning something again let's
say Taekwondo Taekwondo is like the the
hamburger of the martial arts
work in many ways don't learn want
anyways one of the cool things with it
is not only is there this there's a
skill set right how do you do a front
kick how do you do a side kick how do
you do a roundhouse kick I had to do an
axe
kick uh and that was a debate but then
you actually have the instructors so
different instructors have different
methodologies different instructors have
different focuses different instructors
have different and so when you learn a
martial art not only are you learning a
particular skill set but you're also
learning the skill set
from from the mentality of the
instructor right again like it was funny
like uh like BJJ folks had a
fit whenever they dealt with my
Kempo instructor because they'd be like
yeah man so what if what if I get you
into like this spider guard and he
literally at all times he had this knife
on him and it was weird it was like
weirdly legal so uh because there's
these these laws with knives like you
can't have switch
blades we are so we are weird
Society right an 18-year-old can buy a
shotgun but you have the wrong G you
have the wrong knife and you can go to
jail anyways he had this one knife
literally all you do when you pull it
when you pull it it like it like grabbed
on it grabs onto your pants just a
little bit for friction and literally
when you pull it it just turns into a
knife you go and so basically when you'd
be like shink I got
you and like all the guys like oh my god
what the
what do you mean you got him and he's
like I am a 40-year-old man if you take
me to the ground I am I am going to take
that as attempted murder and I'm G to do
what's required that my ant don't get
murdered right and the funny thing is
right you hear about all these BJJ
people and they're all like the Octagon
Alphas in the
octagon and you talk about actually
using a gun or a knife and they're like
yeah yeah that's why I like my
my instructor you'd ask him be like H in
this situation what would you do and
he's like oh you know you know the best
move in this situation like what gun
fu shoot the oh that's my
instructor anyways the point is uh not
only are you learning a concept but
you're also learning a methodology a
thought process what the instructors
care about and again for me I care about
systems again I care about in
operability again I think iot is cool
even if no else does and so with silicon
Dojo um the the core conceit here is
again that we're I'm teaching you about
the overall systems how can you build
things that can reach out and talk to
other things and do things and all that
kind of stuff so anyways so JavaScript
is cool and I understand why JavaScript
has been valuable over the past decade
because JavaScript is really about that
front end development right if you're
building mobile apps so if you're
building mobile apps if you're building
desktop apps kind that front end thing
and then once people know how to build
in JavaScript then you create a
framework node so that they can use the
same sent more or less the same syntax
to work on the back end but all of that
is basic basically about creating mobile
apps I don't care I just really don't
care yeah that's fine you do that I'm
not going to uh so yeah so that's why
like I say JavaScript we will learn some
of the basics of it but
probably not going to go too into the
woods uh if I did start going into the
woods again the other thing too is to be
thinking about like valuable
Technologies so if I want to take
silicon Dojo to the next level again in
2024 is Javascript still the next level
uh if I really was gonna Branch out I'd
probably be looking at rust to be honest
with you I mean rust seems like the next
sexy language I I hate to tell the node
developers but they're looking a little
Boomer just just gonna say it just gonna
say
um that's my
thought um do you think AI editors are
actually going to replace devs uh no
no
um that's what code monkeys think I mean
you gotta think about it I've been doing
Tech since
1996 and it just changes right again
systems had hundreds of hours of
certifications on you don't even know
what the hell they look like
all right things just keep moving on uh
AI is functionality AI is functional
again a lot of the AI that we're dealing
with right now honestly it's natural
language processing it allows you to
talk to a computer it allows a computer
to talk to you which is cool but it's
not AI actually very little of this is
AI it's a party trick it's a cool party
trick that's it uh so no like you know
having Building Systems to um to see but
again the other thing you have to be
thinking about is okay what do they see
what do they care about um what do they
do when they see something right there's
all of this stuff uh that gets on get
that gets dumped on top of uh whatever
technology you're dealing with and
that's why you need technology
professionals again what's interesting
now and again it's it's actually funny
with the JavaScript people it's
hilarious with the JavaScript people
because back back when I got my mcse I
looked in going into coding right I I
learned C++ for whatever degree that I
did and I didn't want to sucked
right Cod coding back in 2000
ERA this is boring it's dirt again we
didn't have web apps aren't what we have
today mobile apps didn't exist um it was
just this you know it was very hardcore
it's very computer science right
computer science it very sciency back
then uh and then web apps came out or
the whole web the mobile world and web
apps and PHP and Python and everything
that we have now and if you actually
think about it again I'll say this is
modern programmers are actually very
dumbed down versions of what we used to
have right what it used to what used to
be required to be a program and what is
now required to be a programmer it's
very different very different right but
nobody nobody thinks that python is
going to take away programming jobs
nobody think that that JavaScript is
going to take away P programming jobs
it's just it's a it's a technology that
makes it easier to build and deploy um
and so we do and again that's where I
think like with AI it's going to give us
a lot more functionality how things will
be designed going to the future will
start to change but is that going to
take away technology jobs and encoding
jobs no it's it'll it'll it'll look
different again how many of you guys
know per I I no pearl right you don't
give a about Pearl again that was
that was the big that was a big
scripting language back in 2000 nobody
cares about it now it doesn't matter
because people are using python again
everybody laughs at PHP PHP is a damn
joke it's a fine language but it's just
you know things have moved on like
nobody nobody said coding was gonna end
when PHP fell out of f fashion
those hands are ones that mold a
Jango I mold Gango with my bare
hands um I tried to clone the GitHub
repository but it fails on my window
system well do we have to go any further
do we have to go any
further uh because colon is not
supported in file folder paths I put it
in an issue and a poll request to fix it
do you plan on accepting changes
additions from class participants or
would you prefer to manage the
repository
yourself um I will take advice I will
take advice and thoughts from students
participants um yeah I did see that and
then I started thinking huh how am I
going to ignore
this God damn
it have learned after all these years
how how to how to ly ignore people on
social media I'm not sure how to ignore
people on GitHub yet I have to figure
that one out uh yeah no uh we're not GNA
do p push and poll you people aren't gon
to do well I guess you can do poll
anyways we're not going to do
merges um so yes I did see
that uh okay how we gonna see that you
people are not going to change a damn
repository that's not going to happen
you can Fork it Fork it and do what the
you want with it you ain't changing
the uh the source repost story though uh
the advice uh I actually did hear it uh
and after I got done laughing about the
fact that you're using Windows uh I did
start thinking about what the I'm
supposed to do about it because it's
Windows um and three no I don't have a
decision yet um so yeah again I'm still
trying to figure because that's the
whole thing with like the GitHub so I
want to use GitHub as main repositor B
classes it just makes life easier you
can just go to GitHub you can pull well
some people can pull uh pull uh and
download from there um but again find
out these quirks and you find out the
Quirk but it's not knowing the Quirk
well what do you do with the Quirk you
don't like colons but is a hyphen good
well just use a hyphen but can you just
use a hyphen I mean does a hyphen look
as good as a colon I mean if a colon
looks better than a hyphen and you only
you lose Windows
users would you rather look
good so yeah trying to trying to figure
that out but again doing these classes
these classes actually could take a
couple of days to do and then you find
out colons don't work and they
like why the is anybody passionate
about this field I do not understand so
yes I have heard you I'm trying to
figure something out I do not know the
answer
yet
um let's see here uh yes I was told to
start learning to rust when I can also
thank you for the response yeah rust
seems to be the the new cool language
again that's something you think about
with your careers like what is the
language the language is the one some
pays you the most for
that's the real answer um and so again I
say Ruby on R so PHP you may used Bank
off PHP so like PHP and then Ruby on
Rails and go back to 2012 2013 that was
a sexy one node node has been the sexy
one for a little while now and yeah for
whatever reason people like r i mean
from what I've read about rust rust
seems like a pretty decent thing uh but
you also have to find somebody that's
hiring for rust uh again it's really
interesting right now there's actually
been more and more job openings for Ruby
on Rails which actually surprised me uh
and the reason is is because a lot of
Legacy systems are getting a bit long in
the tooth and so companies are basically
looking at it and they need to upgrade
their systems they need to add stuff to
this custom crab that was built along
time ago uh they don't want to redo all
the code they don't want to redo it into
python or whatever uh so actually
there's a surprising number of Ruby on
rail jobs rails jobs that that are
actually opening up right now simply
again it's that whole Legacy thing right
it's what they got so they want that
upgraded uh so that's G to be the issue
with like rust is I know it's sexy I
know it's cool everybody's like y uh
it'll be for in your area do are people
actually building on Rust so that you
can get a job that's G
question y uh in the future how would
you prefer us to submit those
suggestions these questions these
questions you
ask a carrier pigeon
carrier
um yeah I don't um
I need to figure that out hey another
thing I have to figure out yeah I'm not
quite
sure you know maybe LinkedIn maybe that
would be the better the best
one
um yeah I'll put my LinkedIn account
somewhere if you don't have it already
um probably messag me on LinkedIn that's
the best way because you messag me in
emails that's a disaster um
yeah LinkedIn LinkedIn messag that would
be the best
one
um uh can we Implement backend systems
with low to no code
platforms uh yeah I mean you can um I
have a buddy of mine again real code or
real coder guy actually got a computer
science degree in the whole 9 yards uh
that guy is all over low
code no code Solutions he just thinks
those damn things in be
knees um so yeah you can't I mean you
gotta find them uh my my problem with
the low code honestly I you not my
problem with the low code no code is
everybody's like Eli's low code no code
and then I've gone to like hackathons
and then you get there and it's like oh
my God just because like there's this
weird thing like there's this idea like
code is hard and so you get rid of the
code and then it's easy and then man you
start trying to figure out some of the
damn systems and it's like yeah I'll
just go back to python you know I could
have had this finished in Python about
10 lines of code and now we' been
sitting here for like five hours
learning this new product um so yeah you
can the issue that you're going to run
into is again the learning curve on it
because again a lot of these products
learning curve
is much steeper than you would think
they were uh and then the other thing
too to be thinking about is um what what
proficiency are you going to be adding
to your resume right so if you're a
consultant right so if you're a
consultant and you're just selling crap
to clients so basically you're selling
solutions to clients use whatever the
hell is reliable and secure doesn't
matter my concern again with a lot of
these things out there especially if
you're not actually working in the tech
world is it's really easy to get a lot
of experience and crap and nobody gives
it damn about and so you you may find
the the coolest no code solution out
there like this is the this is the bees
knees and he spent all his time he spent
all this energy learning it then nobody
cares nobody cares if you would spend
the same amount of time in energy
becoming more proficient at Ruby python
Java whatever the hell else um that
would actually be something that people
would care about on your resume um so
that that would be my that would be my
caution there again depending on where
you are in your career like if you're
going to create like internal systems
again like with no code low code let's
say you want to create some kind of
little titing system or Moder whatever
um you know you're already working in a
corporation you just want to spin up
something kind of basic that everybody
can use relatively easy to maintain uh
that may make a lot of sense um but the
experience that's going on your resume
is you're already working at this job
and you deploy this new Solution that's
what looks good
um where again like I said you're just
sitting at home pling crap kind of got
to be
careful um a Discord server
yeah the only thing I hate more than
node is I don't know I'm just not good
on social media like I'm good talking to
people again I would much prefer this is
in the real much prefer this is in the
real world but anyways I moved to Ash
that was that was my decision um I don't
know what it is like
you know how people have blocks like
again some people have blocks for math
they just can't learn math don't know
why they're smart they just can't do it
again some people code you can s in a
coding class for a year I still want to
know what a function was at the end of
it that's kind of how I am with like
social media like social media and a lot
of this like online communication um
I've tried to do a lot of things over
the years have you followed me because
again I've been doing online education
now since 09 so 15 years my God almost
15 years anyways and I've tried uh we
we've we've had all kinds of community
sites over the years and hon the real
problem like I can I can come up with
all all kinds of make belief problems
but the real problem is I just don't
care like I don't want to be on the site
it's like look I will build this site
for my
students and then I build it I do build
the damn
thing I never want to go on it I just
never
care and then everything goes to hell um
sounds the thing like with Discord
servers again I'm not anti- Discord
seems fine um I've just tried to use
Discord like Discord seems like
ADHD to
me
so yeah you want to create a Discord
server
um y wish I could have traveled for the
in-person classes yeah I don't know who
knows maybe we'll do some again
if I can build up I can build up the
popularity here maybe we can do
Charlotte or something um because that's
what I thought about because it's like
that's the thing like uh Asheville just
doesn't have a lot of people one we
don't have a lot of people and two
nobody gives a damn about tech here uh
but like Char Charlotte has like 2.8
million people so I've thought about
that it's about two hours away so I
don't know if these become popular if it
if it makes some kind of financial sense
to like go somewhere to try to teach a
class I might do that in the future but
I already wasted enough money I already
wasted enough
money the issue is distance I'm unable
to drive myself due to health issues oh
oh there we go now we got this now I got
Zoom the power of
Zoom a plane let's see here plane ticket
to us from Eastern Europe ain't exactly
the easiest thing to plan well you just
you just got to get me sponsored by a
tech company in Eastern
Europe it is much less expensive to pay
me a ridiculous amount of money to come
to Eastern Europe than it is for all of
you to come from Easter Europe to
me uh let's see I know you're passionate
about tech education that's open to
everyone without gatekeeping as such
what would you use to enrich the
education experience with learning
techniques and systems popular courses
that have a paid wall spin your version
of it free posting a con Academy for
larger reach so
on um what would you use to enrich the
education experience with learning
techniques and systems popular
courses I don't know where would I go
basically where would I go from here
with us I don't know figure it
out one step at a time
let me let me get you folks up to open
AI like I want to um there's a whole
series of classes I want to do like so
you we're doing CSS we're going to do
bottle I don't know there's about 20
there's probably about 20 classes on a
rip through in the next couple of months
um and then basically kind of kind of
figure it out from there again again
lived experience that whole mission
creep
thing um I've done
that 20 to many times in my
life hopefully hopefully now that I'm
almost 50 I can just focus on
something and just do it um and so yeah
that's where I just want to focus on
this right now I kind of see where it
goes um like it's
so like the world is weird again with
the technology world one of the things
you have to think about with success in
the technology world is this not like
normal people success like normal people
success right you go work at McDonald's
When You're 15 or 16y old you make your
$5 an hour you get a scholarship to go
to college you then go as an intern then
you go up be a junior something and then
you you work your way up your career L
right you know again when you're in high
school you make minimum wage and then as
an intern you make 15 bucks an hour and
then as a junior something you make like
$60,000 a year and then you just right
that's that's the noral
uh in the technology world it's not like
that technology World basically like at
the end of every decade you do some math
and figure out where it worked out right
sometimes you make a lot of money for
doing jack and sometimes you lose a
lot of money while you work your damn
ass off hopefully after a decade it's
bigger than it is smaller um and again
that's like one of the things like I
think about with this and like it's it's
weird for me like with lived experience
and people that I know not that just
that I know but I know I knew before and
I knew during right like with lisis
right so so Lewis originally Lewis
Rossman he originally sent me that email
years ago at 2012 when he had his little
when his Mac repair place and he sent me
the email to ask me he was like Eli I'm
thinking about doing these YouTube
videos to show people how to fix Max and
my business partner says that's a dumb
idea and um and I told him I gave him
the advice I was like look I know how to
change my the oil in my car I'm not
going to do it because I don't
have time and energy right so I take it
to the dealership and so my advice to
him was like I I believe in the modern
world if you demonstrate what you know
and you can explain it people will be
more willing to pay you $400 to do this
repair then for them to try to figure
out how to solder like like seeing like
knowing all you have all you have to do
is solder a capacitor is different than
actually soldering the damn capacitor
anyways and he took that advice right
and he did all the YouTube videos and he
did other things and he pushed her right
to repair and then I was there like he
called me like he called me when um when
that billionaire contacted him he like
you know so I this guy and he like once
he G me a million dollars it's like what
he's like yeah I don't know he just call
me out of the blue what do you
think and uh right and they got that
million dollarss they got like the next
million dollars he's doing pretty well
um and that's the that's one of the
things to to be thinking about is
like when you put valuable things into
the world many times the payment you get
for those valuable things is not going
to be a salary it's not going to be you
know $200,000 a year divided by 52 is
your salary many times it's going to be
nothing nothing nothing losing losing
losing losing even more losing even more
oh what did I do oh lot of
cash right and that's the thing I
believe in this I believe I
fundamentally believe in the concept of
siloc cond I fundamentally believe like
because again I've done Tech I've done
Tech education since 2009 I I I I know
the good parts of it and I know the
failin of
it and the Curious thing is is that
we're not moving to the next level like
we're not moving
to how can we take the best of the in
person with the best of the online and
merge it into this
new
thing and so I
think I
hope that whatever I'm creating somebody
out there will see it as a valuable
thing maybe I'll get a budget to move me
out of my my little 100 square this is
even 100 square feet 50 square feet
space that I have so um so yeah that's
kind of the thing um so yeah I don't
want to hyperfocus on paid classes and
all that kind of stuff yet because I
think um I think
sometimes it's not that you shouldn't
worry about money it's not that money
isn't important but I think sometimes
like there's only so many things you can
focus on in the
day and uh if you start Focus if you
start focusing on
money before you figured out what is
actually
valuable I think that's where you end up
spinning in circles right if you start
with you want to get paid $500 an
hour and then try to fill in that blank
I think that is much more difficult than
creating something that's actually worth
a lot of
money and then starting to charge for
it long way of saying
stuff um
okay I will scroll through this and then
I will go for the day yeah I work in
mobile game development as a programmer
for the better part of a decade and now
I am earning double in desktop software
for a lot less effort uh yes yes is
desktop software in demand
now I'm in Eastern Europe doing
maintenance on software that was built
in the mid 2000s so like Eli says it
depends on your local market also
Eastern European salaries are like a
fourth of the US ones
um let's see here big issue for me is
I'm unable to do much work due to health
issues despite the fact I know what to
do um yeah that's
so that's the hard thing yeah yeah it's
hard with people with health problems
because yeah you don't like what do you
do with our system what do you do with
our system trying to figure out
something that's valuable enough you can
make money off of five or 10 hours a
week again maybe focusing on the AI
stuff maybe focus on the um the edge
things yeah like I said that can be the
thing with the rust like you become if
you become an expert in the things that
are Cutting
Edge right um a lot of times that's a
way to to make money because you're the
expert like that's one of the things
like a lot of people don't understand
with um you know like white 20 year olds
can be making a quarter million dollars
a year people misunderstand what the
hell that's about is a frustrating thing
um it's not that 20 year olds are
special I'm so I'm tired of
it I did there's like the Millennials
and now it's the Jers and everybody
thinks like 20 year olds are
geniuses godam they're just not I'm not
anti-2 year old they're just not
Geniuses what it is and again it's why
it's why I was flying around the country
at 24 years old right so when I was 24
years old um again direct line of the
travel Department I was flying all over
the country I was supporting a whole
bunch of crap I shouldn't have supported
and the reason was is the mcsc back in
2000 had existed for like four
years right so there was nobody with 20
years experience if you wanted somebody
with 20 years
experience with an mcse or whatever you
know in the mcse Microsoft it just
didn't exist Windows 95 it popped out at
95 and was 2000 and so apparently there
was Windows NT 3.5 which I never saw in
my life I was certified at
nt4 and that was a thing right so if you
needed somebody that was certified in
this equipment and this equipment it
only existed for a couple of years the
reality is is a 24 year old you could be
as highly qualified as a 50y old because
a 24 yearold had a couple years to learn
this crap and a 50-year-old had a couple
years to learn this crap right and so
that's the thing like with node or with
rust or a lot of this stuff is you have
some kid that comes in right so some kid
like I like
proir again like for me I first learned
to program in C++ and I learned Visual
Basic and I learned the windows
scripting languages learn
PHP and uh python all this stuff but you
don't you don't need to go in that path
right you can just go I like programming
and then pick a programming line so you
get him a 16-year-old then they like
programming they can go what's the cool
programming language everybody agrees
it's rust and then they can spend two
years learning the out of rust and
rust is still a relatively new language
and so at 18 years old they can have two
years experience which is about as much
as anybody else has and they can go out
there and they can make $150 $200,000 a
year because the reality is is right you
need people with experience in the
language language hasn't been around
that long AO you're hiring the
18-year-old for a lot of
money um and so that's something to
think about like you've got health
issues or if you have anything that
really limits
you um you know going for going for that
next
level thing might be the easiest thing
at the end of the day like it may be
easier for you to learn than it is to
work right so many of us it's much
easier to work than it is to learn like
once you know it then you just sit in
titech type out and you make money but
here's the thing if for whatever reason
right you're too tired what whatever
your health issues are right it just may
be it might be one of those things like
you can't focus or for some reason you
can't sit down and do a 40 hour work
week but you can actually spend quite a
bit of time during the day learning
something right and so what you could do
is you could spend your time learning
whatever the cutting ledge thing is and
then that 10 hours a week or whatever
that you can actually
work then actually you can optimize that
to be as valuable as
possible um so it's one of those things
to again to to kind of think about and
think about like again how we get paid
and why we get paid again that's that's
one of the things a lot of the the tech
thing and I think that's why so many
people are so scared about AI it is
weird again there's this idea that
technology professionals are are are
smart we're not many of us aren't we
just we just simply liked something and
we learned it and we get paid a lot of
money right it doesn't actually mean
that people have a lot of intelligence
that's one of the things like when you
look at AI you look at how scared people
are of our AI it's like it doesn't make
sense you actually understand the tech
industry again it's just just an product
it's just another
functionality and again and how do you
how do you roll with it how do
you how do you move your career into
that position right so when
um you know you know I went from the
Army and I got discharg medical from the
Army one of be going to the the
corporate world the do com bust happened
didn't know what the hell to do ran in
this guy Doo who told me about putting
up S signs W up putting up signs became
a consultant uh became a consultant had
nine employees had a building had
Billboards whole nine yards zigged when
I should have zagged when the Great
Recession happened um build things start
doing Tech education Again YouTube was
great for a while YouTube was wonderful
uh again made a lot of money made a lot
of people happy and then YouTube went to
hell again I can make a lot of money if
I screamed about Biden or Trump getting
shot or whatever else I just don't care
and so again as things go then then then
how as the technology environment
changes how do you modify what you're
doing to try to fit into that modern
environment
and understand you're going to have
successes and
failures H anyways
um people see the young ends with a
phone or tablet in their hands all day
long and assume that means they have
advanced proficiency with them but the
truth is a lot of them spend most of the
time on social media uh yes yes cuz kids
know how to do Tik Tok doesn't mean they
know Tech um yeah basically very bad had
long Co except it happened before Co
existed yeah sucks uh I'm calling you
from UAE trying to change career you
have been great help to me because you
are actually rebranding my future uh I
deeply appreciate your efforts thank you
sir glad to help uh seems you've made
quite decent money that you're able to
sustain yourself now don't mean to ask a
question just an assumption I have or
YouTube is paying well even now yeah I
don't know I'm not allowed to talk about
money I'm not allowed to talk about
money a couple years ago my wife said
stop talking about
money again whenever you get into an
argument with your spouse again it's
options is this worth the argument and
it's not worth the argument
so I am doing this accept this as it
is and there is donor box and I will
remind everybody donor box exists so uh
yeah
okay so if nobody has a hand up and it
is
4:30 I'm gonna call it a day um so yeah
so CSS is g to be on Thursday I'm most
likely gonna have to put out the
freaking link again in comments either
in the comment section or in the email
because Meetup is a shockingly bad
platform God it's just a piece of
platform
anyways this whole thing with the zoom
link it's just not working right anyways
so you will get an email beforehand like
you did today with the actual link or it
will be in the comment section click on
that because I don't think the link
that's actually there will work and I
can't edit it because meet Up's a piece
of crap platform uh so that will be on
Thursday I will be taking a week I'll be
gone for a week uh and then when I get
back uh we're going to do be doing more
classes and again my idea with this is
I'm trying to put out classes about as
fast as I can so somewhere between two
to three a week essentially what that
comes to is one down day so I have a I
have a down day and a half a day to a
class or one day half day class one day
half day class one day so that basically
means some weeks you get two some weeks
you get three we'll see how it goes and
that's that's about all I got so yeah
okay uh with that see yall later