hey everybody welcome to live coding
with jesse i'm jesse and today we're
going to do some styling and some ui
changes to make this
app look a little nicer
as you can see there's no video right
now
so
i don't know why uh
i i moved so i moved into my new house i
unplugged everything moved all my
computers over plugged it back in and my
webcam now does not work
so i'm installing
some stuff from the manufacturer that
hopefully will help it says it's going
to finish in about a minute so
the video may turn on it may not but
you all don't watch this for my face
anyway um
so
let's get started uh as long as you can
see the screen and hear me i think
that's uh
that's good enough
um i'm gonna check real quick and see
what everyone's saying in the chat
um
hey everybody see a lot of people just
saying hi
how's it going
okay
let's
bring up the app first
so that everybody who hasn't seen it yet
can at least see it
um
also
sorry the
the installation just
finished so
let's see oh okay
no i don't want to sign up for this
okay
wow
all right so i don't think that did
anything because
nothing happened
hey
we've got something
that's weird
huh
there we go
it works
all right
let's move it over so it's
all right spot
there we go okay
so i i guess it was just a driver or
something
um you can see my background has changed
so this is my new place
um
i'm thinking about getting a fish tank
back there so i have a fish tank with
some goldfish i haven't moved it yet
so i don't know let me know what you
think if you want to see my goldfish
behind me
anyway
all right let's get started so
i do want to give a shout out to chris
who did a
awesome pull request
so let's do uh get pool
this is going to pull down all those
changes from the port so you can see
like the
the code changed immediately there
um
so this is decently significant pull
requests especially considering the
project's still small this is uh quite a
few changes so thank you chris uh we're
also gonna do yarn this is a good
practice anytime you start a project
or i'm sorry anytime you're working on a
project first thing you
should do
um is
do a get pull as soon as you you start
working on it in the morning you know do
get pool
do um
and then run yarn or npm install that
way you know you have the latest
you know changes
and
and the packages right like i've
forgotten this before
um
and
i start working realize i don't have the
latest changes and then there's like
merge conflicts and stuff or i do
remember to pull but i don't remember to
to run yarn and install the packages and
then i get all these errors
uh and for a second i'm freaking out
before i realized that oh i i just
didn't install the new packages so
let's start
so let's start this up that way we could
see the app
uh so we'll be able to see it and also
let's go
to the pull requests so the issues now
there's only two issues left i'm sure
we'll we'll be able to add some more but
we're going to close pull requests and
check out
this one right so i'm not gonna go
through all of this just so that we have
time for coding but
check this out the link to the uh the
repo is in the description
so you can check out but basically this
fixes two problems one we had said that
we don't want
the user to get the same question
in a row like the exact same question
twice in a row
also we don't want when you're doing
subtraction we don't want subtraction to
result in a negative number at least not
in in the first the first level
uh also it found some bugs that i didn't
realize were happening and fix those as
well so
that's awesome you can check that out
there you can check out all the files
that it have changed um add a little bit
to the the prettier config
which is nice
i'll probably set up
some like automatic linting so that
anytime anyone tries to commit code
it'll
auto lint it
and let me know if you want to see how
to do that i can do it on a stream
otherwise maybe i just try to do it
you know on my own and just have it set
up but it is kind of a cool setup i
usually do it for all my projects
and it it avoids having uh like weird
commits where you have uh
it looks like you have a lot of changes
but they're not really changes it's just
like formatting things like a semicolon
or not using a semicolon or
weird spaces so
anyway
um oh i have some questions about that
uh auto link so when i say like auto
linting and auto formatting i just mean
like as soon as you would do like a git
commit
there'd be a pre-commit hook that would
run
and it would go through all your code it
would check it to make sure the syntax
is correct according to rules that we
set up
and then
if it's possible for it to just
automatically change your code to use
the rules we set up it will do that
so it's it's pretty cool it keeps a nice
standard and it makes it so that if you
want to contribute to this project
you don't have to learn all the rules
you just code how you like to code
and then whenever you go to commit it'll
change it all
and it looks like there is some interest
so yeah i'll definitely show you how to
do that
um
maybe on the next stream that's what
that's what i'll do so yeah it's a cool
little setup
and
uh
let's see
i lost my train of thought what were you
doing oh i wanted to show everybody the
app
okay just so you know
um the way this is going to go we're
going to do a little bit of coding and
then i'm going to take a break and we're
going to answer some questions
and then at the end i'll try to answer
all the remaining questions so if you
have questions and they're in the chat
and i haven't got to them
i will get to them uh
in in a bit probably in about i don't
know 20 minutes or so maybe less i'll go
back to the chat
all right but this is the game right so
if i'm sorry if there's a lot of
background noise my kids are all getting
ready for school they're about to leave
so
um
i don't know how much of that that mike
is picking up
hey buddy
uh
you want to say hi
hi
i don't know if they can see you there
say hi hi
all right have a good day at school but
um
yeah so i'm just in my basement right
now eventually i'm going to build like a
legit office and hopefully sound proof
it but
just moved in
last week
so anyway uh these are the styles we do
have
different colors for each mode right but
we just threw these in here
um
this is definitely not how i want it to
look
uh i still
am not exactly sure how i want it to
look but i think there's some
improvements that could be made
so let's
first thing i want to do is
open up dev tools
right so
if you're not familiar with devtools uh
the this is your best friend as a web
developer uh devtools will allow you to
inspect things on the page see the code
make changes
basically they're like previews of
changes that only you can
you can see hey raphael
i'm i'm live streaming but
my son one of my sons was back there
just like moving all these boxes
um
so what i want to do is see how this
will look on a device because
eventually we want to make this run on a
mobile device as well as on
a desktop so we haven't actually checked
to see how this would look on a device
so let's just
uh i don't know which one i'll pick
let's pick a small one just to uh to get
an idea so this actually isn't terrible
i kind of thought it would be worse
since we hadn't had this in mind at all
but
it fits wow that's
that's cool
it actually fits
um
okay
so just looking at this right now
uh i think for sure
uh the numbers need to be bigger and the
buttons need to be bigger i think the uh
the hero character that's here and the
enemy characters that here that are here
can definitely be smaller
so
the the perspective uh
this is a children's game
right uh so their attention is going to
be drawn to this when in reality like
this there's no interactions they can
take here
right so we're drawing the user to
an area that they can't actually do
anything with
uh so i think we can we can shrink this
uh so
this is this stream is going to be a
little bit of design and dev together
right so i'm i'm
a software engineer i've done design
before a bit but i'm not primarily a
designer so usually i just jump in and
start coding and then figure out the
design as i go along so
if this were a real project on a real
team we'd probably have a design a
designer already do the design right so
let's
for now let's see what this looks like
when we shrink these up and make this
bigger all right and i want to make sure
anything that
a user would click is really big right
because it's going to be a kids game
their their dexterity is not going to be
as good maybe as the average user
potentially so we want to make sure they
don't accidentally click in the wrong
spot so right here i can see like the
submit button needs to be bigger and
there needs to be more space
right
uh so let's let's do that now like so
since we're in devtools we can try some
things out here without actually even
touching our real code
so let's click
on some of these
actually
it might be easier in this case
so like in the case of uh
the numbers
we can definitely make them bigger
let's see
so
we can see all the
properties that are currently on
like the css properties that are
currently on this we have the font size
of 28 pixels
so that actually is uh
seems pretty big but as we can see like
it doesn't actually look that big on
that phone um
so if we click that it'll show us where
in the code we have the 28 pixels now
unfortunately since we're doing this
with
react native web and it's coming through
it won't allow us to edit
directly in line if this was just a
normal web app
we could um
so we're gonna have to override it and
let's go with
let's go with 40 pixels it's going to
seem pretty crazy to do 40 pixels but i
think it'll be good
actually
because of the way the styles get split
up i can't target a style so let's just
go back to our code really quick
in this case i think it might be easier
to just
mess with our code directly
normally it is not
so we do have all the styles down here
and uh i forgot we were using comic sans
we'll pro
we may change that
it's i think since it's a kids game it
might work
okay so our character
has a width of 80 and 80. let's let's
cut that down right let's let's give
that
40
and
now our
math container
our math row so our math row has a
padding on the bottom of eight let's
bump that up to 16
okay and then our text size 28 will bump
that up to 40.
and we do have our inputs
of
sporticles i believe this is our
input for
let's give it a 60. let's make it just a
square we'll give it a height and width
of 60.
i'm i didn't finish my thoughts sorry
that's our input
to put the answer to the the question so
let's save all that and then see what it
looks like now
okay
so
definitely different
we now have
bigger
text here we have more space i forgot to
make the submit button bigger
and is this okay so we we didn't
actually make the text bigger in here so
what we need to do that
and let me check my time to make sure i
i forgot to start my timer so
so what i started at 7 30 so we've been
about 20 minutes now
all right let me just get just a few
more minutes and then i'm gonna go to
the live chat and read through the chat
okay
all right so for now let's
uh
let's make the button
a bit bigger
and we'll make the text inside the input
match with this text
oh don't let me forget i need to check
out cypress
so uh our testing suite has now changed
from using puppeteer to using cypress
so i want to
give you a preview of that and i forgot
to last time
and
i want to try to do it for sure this
time so
uh that was an addition from from
harshit who i haven't seen in the chat
today so i don't think he's here but
he's been a big contributor to
um
to my streams
for a long time for like
over a year
uh
let's see
where's our button
i don't think we have any styles for a
button
so we're gonna have to go up here and
see
what we can do here oh okay so we
actually have the the default styles for
a button so let's look up
in the doc
the react native documentation what the
styles are for button
so if you're doing a react native
project i definitely recommend just just
leave the react native docs open on your
tab
uh on on one of your tabs because
uh
i i reference it so much there's just no
point in me even closing it
so here's the button
you'd see i'm pretty sure we just copied
this exactly
but what i want to see is uh all the the
props
uh on press how to assist with color
disable test id prefer focus okay so
here's our props but what i want to see
is what kind of styles we could actually
give this
um
which i don't know let's see let's just
add some styles and see if we can give
it one
we may have to switch it up so
you can use touchable opacity
or touchable native feedback
to give your button some custom styles
so we may have to switch up to that
that's what i normally end up using
anyway
but
for now let's
just see if we can do this so
i'm just going to do an inline style
just as a test
so we're going to add style so in uh
react native if you want to do an inline
style you can
you want to uh use an object right so
we're doing style we're putting our
curly brackets which means
hey we're about to do some javascript
and then inside of there we have another
set of curly brackets which is just
normal javascript right it just says
like this is an object
and then now we're going to do css
as if we were writing so like
we're converting our normal css into
javascript's object syntax right so
we're going to camel case everything
uh it's key value pairs right so in this
case
let's just say height
hd if i can spell it
ht
and
we're going to give it
something crazy so we just know
uh
we know that it works right so type 200
so this would be obvious if it works
and it didn't
right so it looks like we're going to
have to change that
and we can't actually add a height to a
button
if there is some way to add height to a
button let me know in the chat
you know but according to the
documentation it didn't look like we
could i was hoping there would be like
some props
but it seems like the only thing you can
really change style is this the color
okay so i'm just going to click on
touchable opacity so it's there
and we can we can check that out and if
anybody wants to read ahead i'm going to
put this in the chat the link to
touchable opacity if you've never used
it before you can check out the docs
basically you're just making something
clickable and react native and you can
give it whatever styles you want
all right and
i'm gonna take a five-minute break here
so i'm gonna set my
my pomodoro timer to five minutes i'm
gonna go to the chat and i'm gonna
answer some questions
okay so
i'm scrolling
just seeing a lot of people saying hi at
first
uh
charming muhammad says this is a very
good thing thank you oh you're welcome
i appreciate that
uh akeem says is this a react thing yes
yes it's react native web so it's all
react native syntax but we're actually
running it as a web app
if you want to know why we're doing like
that watch like the first two streams
and i i explain more of the benefits of
doing that
um eric says how can i find your
javascript beginner tutorials
so i haven't done
a lot of tutorials myself it's mostly
live streams and it's
some streams are more beginner friendly
and some streams aren't just depends on
what we're working on that day but um
there are some awesome beginner
javascript tutorials on this channel
on the free codecamp channel if you do
want to see my tutorials check out my
channel the links in the description
i don't do as much with my personal
youtube channel i'd love to do more
just
hard to find the time but i do have some
tutorials on there for beginners
let's see
jalal says smile more bro you look
better right
all right i'll try to smile more
uh
the dawn says bro i love this channel oh
thanks thanks yeah the free code game
channel is awesome like not i'm not just
talking about my stream like
um
there are so many really really good
contributors uh and just the variety and
quality of content on this channel is
i mean it's really amazing and it's
impressive like no one's getting paid to
do this it's all volunteer
uh so
it's it's really cool and it's helped a
lot of people to get their skills up and
get jobs like including me
uh charming says pulling in pulling and
installing yarn before anything in the
morning is good advice been a victim of
such trust me you don't want to go
through the work before you pull yeah
for sure
um bell
bellis
sorry angelo i'm sorry i i probably
missed your name up uh let me know how
i'm supposed to pronounce it this is uh
i can anime that
uh i'm not sure where you're
what you're for are you offering to
animate something and so let me know
what you mean because i'm not exactly
sure what what you're saying
uh
yes you asked if i have any plans to
work on vue.js projects not right now
uh i've
i'm like curious about vue but i don't
have any immediate plans to work on them
maybe maybe i'll do it at some point
creative girl says hi which one do i
have to learn flexbox css grid or maybe
bootstrap i have no idea when you use
them
okay that's a good question uh there are
some answers there uh coding technique
says i think flexbox is easier
um
uh is ishmael says i will go with
bootstrap but just know a little flexbox
okay so they're not exactly comparable
right so bootstrap is
an entire
css library
that's
you bring in it's css and javascript
and there's a lot of like built-in
classes
that you can use to style
an entire app
or a website
flexbox is a part of css
and so is grid
so it's a part of just normal css you
don't have to import anything uh extra
and it's used for positioning
right so
back in the day
people use tables for positioning or we
used floats for positioning
but
flex or flex box gives you a nicer way
to position uh
like for instance you can vertically
center things on a page
very easily with flexbox right that was
always
really hard to do before
and not that it was impossible but it
was just more difficult
grid is another way
to align things on a page so it's not
exactly comparable
so like if you learned all of bootstrap
you could style an entire site if you
learned flexbox
you could just position things which you
couldn't really style things so
i say definitely
if if you want to do react native then
you need to know flexbox
uh because flexbox is the default
positioning system for react native
so i definitely recommend using flexbox
that's what we use
and like bootstrap's not always going to
be available to you
so
you know try to learn the the regular
css
it'll be easier to work on a variety of
sites if you know css
bootstraps should be easy to pick up
because it's just
basically giving you chunks of you know
pre-written css
attached to classes that you can add to
your site
so if you know really no css you'd be
able to understand all of bootstrap
just by looking at the css files
and kind of know what's what's happening
and be able to change it up and
like customize it to what you need okay
does that make sense let me know if it
doesn't
all right didn't get through everything
but
let me go back to
all right here's what i'm gonna do i'm
gonna say i'm gonna mark down here where
i left off
746. i need to like adjust the
tilt of my screen or something
it's really hard to see
i need new screens period i just i'm
using some old screens that i've just
gotten from people like when they're
getting rid of their screens
okay so
let's
how much time do we have
okay
so we have about a half hour left
so here's what i'd like to accomplish in
that half an hour
i want to get the styling
so i want to get this button a little
bit bigger
uh commit these new styles i'm not like
obviously we're not finished with the
styling but this is just
a little bit of some updates
um
i want to demo cypress for testing
and then i want to finish the rest of
the questions okay so that's the that's
the plan
so let's switch this up to use touchable
opacity first
so we can see in with touchable opacity
obviously instead of using body button
we're replacing it with this but then
also we can put things inside of it
and in fact we we need to put things
inside of it
so let me show you what i mean
so right now our button we can say like
the title is submit and look there's
there's nothing there's no children to
this button
when we switch it to touchable opacity
if we did this
nothing would appear on the page right
so
we need to give it children
for instance to to say like hey here's
what you should display inside of this
button
all right so let's switch that up now
and go to the top of the file and where
we have button
let's change it to
touchable opacity
should have changed up here too yep
okay we're going to change it to
touchable opacity now i know i'm going
to need something in here and i will
need text
and let's say
oh wait is this our oh this was our
restart button oh
i changed the wrong thing
i forgot we had i i totally forgot we
had a restart button all right
let's do that again
let's keep button in there because i
don't want to mess with the restart
button right now just
because i want to finish on time right
uh so let's
touchable opacity
now let's find the right button this
time
where are we at
okay
whoa actually did we
yeah yeah this is what we did for a
second i was like have we been working
on the wrong button the whole time
but i don't think so
all right so touchable opacity
and now we're going to say
text
submit
and then we're going to close out
touchable opacity
okay now
let me just say so we'll just see what
shows up on the page now before we do
anything else
so you can see it's it's just the button
right so it should still work so like
right there's no
um
and you know what i just thought of we
should uh not allow a submit
if there's nothing in here
i can see that being really frustrating
for a child if they accidentally hit
submit and haven't even put anything in
there
and then another enemy comes like that
especially if a child is really
struggling with their math and it would
like almost be
beat it and they know what the answer is
and they just accidentally hit submit
like that could be devastating for a
little kid right like so let's make that
happen so that we check to make sure
that basically if there is nothing in
this box we don't allow submit all right
we're not going to do that right now but
um
let's just keep that in mind and add
that in at some point
if somebody wants to make an issue for
that feel free to make an issue i'll try
to remember and make an issue for it
later
uh okay so we need to style this this
submit button right
so you can see like our color
you know that's not
that's not going to work right
we do someone to keep this test id i
believe the title
is not going to matter here
we can double check
that there is no title attribute
let's see if it shows us
yeah so our props here style active
opacity
yeah okay
hmm
actually this is kind of weird why do we
have
it's weird that they don't list on press
under this
i guess maybe they're just like assuming
that you would have that but anyway
we can remove
where are we at oops here's our code
you can definitely remove the color uh
let's give this a style though
style equals
and let's say styles dot
we'll just call this button for now
i know we're gonna have we have more
than one button but we'll just say
styles.button
and
i'm going to group this
i'm going to put this under input since
it appears under the input
all right so we need to give this
like a height a width a background color
right so
let's say our height is going to be
40 pixels so we always want to at least
go 40 for touches you know let's go
um
let's at least bump it up to 50 right i
want to make this bigger than you would
normally make it for an adult
uh
like i said i know kids fingers are
smaller but
they may be a bit more clumsy
okay button
height uh
with let's just go with with
like 100 for now
let's see how it looks and then
background color
we can give it that same color that we
had
i'm not like a huge fan of that color
but
i don't
really have any other color in mind so
we might as well just use it
okay
let's see what that gives us now
hey look we've got
got a button
okay you could see like look it's still
just totally bare bones the the submit
is
not even centered so let's work on this
submit as well
yeah
okay
uh so
we can actually set this to
display
i don't know if i should i don't think i
need to put display flex on here but
let's see so let's say justify content
center and align
items
oops
center so this is flexbox so this is
what i'm talking about when i say
flexbox makes
vertically aligning things easy so this
is going to vertically and horizontally
center
submit hopefully let's see
yep here we go so now it was up here now
it is both vertically and horizontally
centered so easy
especially if you remember
everything that you had to go through to
make this happen before flexbox
so much easier
all right now we want to make
our
our text
a little bit more readable so we're
definitely going to give it a color of
let's just say white for now
all right so fff is going to give us
white
uh that's the the hex code
and
let's make the font size
so the button itself is what's
50 so let's make our font size
40.
i definitely don't want it to be bigger
and let's see what it looks like
oops we didn't apply it to the text so
on the text here let's say
style equals styles
dot
button
text
whoa
okay
we need to make that wider
and okay
yeah definitely need to make it wider
and probably taller
all right so the button now is 100 uh
let's double it to 200
and
let's make its height 60.
okay that's more reasonable
it's still not like a spectacular
looking button
but
it does have a little effect right it
has this little kind of flash thing
right
um
and it still works
all right i tell you truth like i i'm
not thrilled with the way this button
turned out but
but it allows us to customize it so
we can further customize this as we we
need to right
uh let's see
yeah that
i'm kind of thinking that the submit
button is like dominating the page now
i mean i do want to keep track of my
time okay but
uh
i think i'm at a point now where
i want to commit this
uh and
and then check out the testing suite so
that i have enough time to get to the
um
like the the messages uh the chat
messages
okay so
so if if you're totally a beginner and
you're not really familiar with version
control uh we're using get
okay so we have a
git status
and that tells us what's changed right
we've only really worked on one file
right so
that's to be expected and now we're
gonna do a git commit
i'm going to give it an am flag
okay
and then i'm going to put the commit
message so
i'm going to say feature um
this is like a terrible message uh but
we we just adjusted styles right so
let's commit that and now we can do a
get push
right and
that's gonna push that up to github
right
okay
so that's like very very basic of using
get you commit and then you push
um
now we basically have a save point
for our code that we could always go
back to that point
later on so if we totally mess things up
in the next stream it's okay because we
could always go back to this point
all right now let's check out our
package json for a second
and see
that we have
this e2e script
all right and that's going to open up
cyprus and run some tests
okay so let's let's check this out
so we're going to run yarn e to e
and like i haven't really used cyprus
yet so harshit set this up
um
i think it's really cool i did run it
once just to see what it did
uh but it's definitely something that i
want to learn more about uh because it's
pretty cool so while this is doing its
thing which
why is this taking there we go
so you see this is definitely different
than what we had in the test before
before our tests would just run and you
know display some things here in the
console but this is
bringing up this whole ui right so it
says here's our test
here's our file right oops
this is the following place
cool
all right so i click that and now it's
running i didn't mean to actually run
them but so i clicked on that file and
you can see it's run all the tests in
that file so we only have one file with
the test i'm assuming if we had more it
would show all the tests and we could
run them all at once if we wanted
okay but if you saw some flashes up on
the screen
of
basically it it was running this
and and going through the motions of
clicking everything
and it says we can see a title we can
see hero and we can we get the
if we do a correct addition answer it
reduces the enemies by one right so we
don't have a lot of tests in there
but it's kind of cool to have a ui as
well
i know some of the people i work with
on my team are way more familiar with ui
stuff as opposed to like doing things
through the command line uh so it
definitely could be helpful
um to be able to have that that visual
uh of this
so
i can see you've no recorded run
yeah so there's a lot of stuff in here
that i haven't even messed with
wow okay so there's all your settings in
here so i mean this is really cool so
definitely check this out if you need to
do react testing
wow really cool all right uh
so i'm not gonna go more into that yet
because i myself don't know that much
about it so i'd rather not mislead you
but i promised harshit that i would demo
it so definitely uh you know check that
out it looks cool it does give us some
output in the command line as well
um
all right
let's
let's go back to the chat so i've left
about 15 minutes
before i have to end the show for chat
so i hope i can get through everything
uh before i have to end it
and
where'd i do that okay so i ended about
there in the chat about 6 46 my time
there we go
okay
and i'm gonna i didn't really display
what's changed in our package json so
i'm just going to put that up here
uh really the dev dispen dependencies
change we have cypress
and our eslint plug-in for cypress
and all the stuff with like mocha and
chai and puppeteer are gone
all right so let's get to these
questions
uh
ab
abdullahi says i am fresh to programming
and i don't know where to start uh check
out freecodecam.org and just start out
with with some of the lessons there it's
totally free
uh just create a free account
and like free code camp's never going to
try to sell you anything we're not going
to spam you with ads nothing like that
so just check it out start doing some of
the the
um
the lessons there and see how you like
it
um
web noob says in response to creative
girl's question about flexbox and
bootstrap and grid says everything is
important to learn it yeah i mean
ultimately yeah it's great to know
everything but i would say like don't
don't get overwhelmed thinking that you
have to learn everything you definitely
don't you know if you just pick
something and learn it
you're fine right so um
i would just try not to be anxious about
what to learn what to learn first and in
what order
uh
you know just just learning something
and being able to work with it is great
like a ton of websites use bootstrap if
you just know bootstrap there's a ton of
work out there um the same way like if
you just know flexbox you don't know
bootstrap or grid you can still do a lot
of awesome things like so
basically my point is like as long as
you're learning something
that's you're good you know you're
already going in the right direction you
know and you'll learn more eventually
just you know it takes time
jimmy says guys please can you help me
out how can i animate a button on long
press um
i'm not exactly sure that would be
something i'd have to look up myself so
i can't give you an answer right now
but maybe somebody else in the in the
chat can
web noob says uh hey jesse are you
teaching your kids and programming can't
wait to try with my son
yeah so actually i i do
so we have like some little kid
programming books
uh that we we read to the kids sometimes
and um
we have trying to make what it's called
uh tinker so we have a tinker
subscription
uh so i think it's like tinker.com or
something and they have coding exercises
for kids
and so
our my kids do that
so we've tried out some other ones too
um but
my son especially my oldest my
nine-year-old seems to really like the
tinker stuff and he works on it all the
time
so yeah so we're we're trying to teach
him and not like pushing them into that
into it but you know just kind of
providing them with books and
uh you know like lessons and stuff so
it's there if they want to want it you
know and they're just excited about
using a computer
so
if i tell them like well the only way
you can use computers if you're doing
the coding stuff then usually that's
enough and and they do it
uh let's say
uh
bob
i'm i'm really sorry i'm not pronouncing
your name right uh but
says are you using the windows subsystem
for linux
uh
no so i am using bash on windows but i'm
not i haven't done anything with the
the subsystem yet
it's uh gaming says hello everyone hey
how's it going
let's see
oh cool so
michael creel uh answered my question
about the button and unfortunately i
didn't look over to see that but thanks
michael it basically says from stack
overflow this component has limited
options so you can't resize it to a
fixed height
all right
so uh
so that is true so basically we we did
have to switch the button over to a
touchable opacity in order to
basically change anything except the
color and text
um
for
fargentius says
uh are you doing the mobile or web
yeah so right now we're doing
web
but
we're gonna switch it over to mobile so
let me give you an update on that
actually so i'd like to use expo
to help us uh
test and build the mobile versions but
unfortunately
so
all right let me give some background to
explain this so like
expo just takes has its own fork of
react native right uh and
it allows you to create react native
apps more easily it comes with a lot of
built-in things to to like developer
tools
and like different components that work
with
like hardware on a phone
on a device
so i'd love to use expo because it comes
with all that but
since expo has its own fork of react
native it's behind a little bit so it's
not the latest version so the latest
version of react native allows you to
use react hooks which we are using
right but the expo version of react
native doesn't yet
support hooks
so if we try to use expo right now
we would have to switch to not use hooks
and that would be a lot of refactoring
and i don't want to refactor it back to
that i'd rather use hooks so the plan is
this
i'm going to keep developing
the
web version
i'm going to keep the mobile styles in
mind like by using dev tools and
mimicking the
phone right
but we're not actually going to test it
on a device we're going to wait for the
next update to expo which should allow
us to use hooks then we'll pull in expo
into our project
and
we'll be able to run
the web version the mobile version the
mobile in a simulator
side by side so that we make a change we
can immediately see how it impacts both
the web and mobile versions
so hopefully that makes sense
we could just use straight up react
native and run it like that but like i i
really do like everything the additional
stuff that expo uses so i'd rather just
wait on that
if it seems like it's gonna take a
really long time then maybe we'll
rethink that strategy but that's where
i'm at right now so the mobile's coming
we're just kind of waiting on the next
expo update
if anybody had knows like if you've been
keeping track of the updates to expo and
you have some insight into when that's
gonna happen let me know
last week or something i did read up on
it
and at least at that point i don't think
there was an exact time for the next
release
saeed says love you bro
oh thanks i love you too
um
let's see
vedant says this channel is great
um
manu says well thanks thanks i
appreciate that man who says please
suggest um
all right let me hold on let me read
this question
says i'm i'm intermediate in javascript
but i can't build up logics what should
i do
um
i check out some of the more advanced
javascript uh problems in
free code camp
so freecodecam.org i check those out i
know i keep recommending free code camp
but
it's just quality stuff and it's totally
free right if you feel like you need
more then maybe you know go look at some
of the paid things out there
but
free code camp's always a great place to
start there's always links to additional
resources on the free code camp lessons
so you can go and read more if if you
want to but i would say yeah check those
out it's gonna you know give you some
algorithm problems
uh and practice is really
i mean that's how you build up your
skills
so just keep at it um it'll it'll be
tough it's it's tough for me
um
to do the algorithm stuff and kind of
the more advanced um like logic based
stuff right because as a
primarily like web mobile developer you
know you're not doing a lot of algorithm
based stuff so you don't normally get
practice you kind of have to go out of
your way to keep up and practice that
stuff
um jm says have you ever told your
youtube audience about how you got into
coding your challenges obstacles how you
got your first job etc um it would be of
interest to us newbies so i have a
little so check out my youtube channel
the link in this is in the description i
have done some videos on like my
background and how i got into that so go
ahead and check that out
um
if you
check that out and like there's
something more specific you want me to
talk about let me know and maybe i can
make a video about that as well but yeah
that's a good question and so i do have
kind of a basic overview of
how i got into coding
um so that should
kind of highlight a lot of that
oh goodness um
somebody said in response to the
question about building up skills and
logic and stuff uh
somebody gave the response of just give
up if you can't build logic then coding
is not really your thing
um so number one i would say please
don't do comments like that you know
we're trying to help each other out
uh so
i i don't really want comments like that
let's keep it positive
secondly
like i'm gonna say it again like
practice is the difference between
people that can do things and people
they can't right there's not like
you know
some people do have more natural ability
one way or another or maybe their
background gives them more ability but
it's still if you practice you can get
there so
uh
if something is really hard that doesn't
mean you should give up it doesn't mean
you can't do it right it just means you
need more practice right that's
that's it so yeah don't don't give up
uh if this is what you want to do
then keep at it right
um
and
uh
just don't get discouraged i you know
it's easy to say don't get discouraged
but just
realize that like
everyone goes through
times where they feel like they just
can't figure things out like i was
working on a bug
on my work project and trying to get
something to work for
like over a week just trying and trying
and everything i tried just didn't work
and i just felt like
i was never going to figure this out
and then
then i did
and it works it was and it was awesome
and my team was excited and my boss took
me to his boss and said here demo this
thing right it was awesome
all right and and but i really thought
you know just just like two days before
i was like in despair of ever finding a
solution right so it's just like you
know keep going
and
you find a solution right i think people
that have been doing this for a long
time realize that
you will always find a solution
eventually
so you know don't give up
so
um but just in general everybody try to
keep things positive here you know
there's enough depressing stuff out
there in the world i don't want this
stream to add to that
okay
um icram says anyone know any materials
about music recommendation systems which
could be helpful to my college project
uh i'm really sorry um
i don't know anything about that so i
won't be able to help you hopefully
somebody in the chat can
um
okay
all right so
jay says i'm confused between android
and react what can i start for job
purpose
um
okay so
react
is used normally for web apps right
react native can be used for android
apps
so
you could start out by just learning
react and then transition into react
native to build things for android as
well so it kind of depends on what you
want to do
if you know you just want to be an
android developer then maybe you you
just learn android development and just
don't worry about react at all
but react is going to allow you to
develop things for more devices
more
platforms so that may be a better path
for a job but like it just kind of
depends really on what you want to do
aman asks can you use react navigation
with react native web
um
so yeah so the navigation is a little
bit tricky uh
so
you can use any navigation that will
work on the web with react native web
but
when you want to also do it on mobile
you'd have to have an alternate
navigation system that would work with
mobile
so um
i'm actually i'm working with navigation
systems on
another project right now that's react
native web and
so right now
for the web navigation we're using
uh react router
but for mobile
it's
really like we have no mobile navigation
system set up we're just kind of using
state to navigate so like it's if that
is a little bit tricky um
i don't know of a
navigation system that would work for
both
as of right now
i'm hopeful there is one because i'd
like to use it uh but to be honest i
need to do more research on it as well
all right i mean listen i do want to say
like so i can see the the conversation
from earlier that kind of got
took a wrong turn there is going on so
everybody just kind of like chill so
um
they don't like
uh you like you're cool just like kind
of like please don't tell people to give
up
um and then everybody else that's
getting on vadon like
let's just
be cool about it too right like
um
and let's kind of just let it go for now
all right
okay
michael creel says uh regarding coding
with your kids have you tried scratch
yes we have done some stuff with scratch
that's really cool
uh so if you haven't done anything with
scratch even if you're an adult coder
like check it out it's actually pretty
fun
um it's kind of like a drag and drop
coding interface it's it's cool
michael says if you have an android
device you can plug it put it in a debug
mode connect it to your computer and
then dev tools can let you interact live
with your phone
um yeah that's yeah we have done that
i've done that before um
so yeah we may end up doing that but i
do i want to do something in a way that
uh everybody can see it on the stream so
i don't want to run stuff on my device
let's see
oh cool so oman is researching
navigation system that works on both
okay cool i'll uh
if you find anything let me know i i
definitely want to want to know more
about that
um
oh okay michael cruz is saying that it
shows up live in devtools so maybe that
might be something we could do where i
could test it on my android uh it would
show up live in devtools so you all
could see it as well
okay so maybe we'll have to to do that
um
robert boy uh best language to learn for
beginners
um
it depends on what you want really um
which you really want to learn but
assuming you have no preference for what
you want to try to do
i'm going to say javascript because you
can run javascript in a browser
um
and
you don't need anything special on your
uh on your computer right
so uh
try that out like
if you if you know you want to do
something different like if you're not
interested in web development at all
then like don't mess around with
javascript right
um but
if you
think you might
want to do something that has to do with
web development then go with javascript
because you're going to have to learn it
at some point anyway if you want to do
web dev
all right uh
okay so i went over a little bit uh but
i did get all the questions in so anyway
uh i guess we'll be
we'll wrap things up now
i feel like i'm forgetting something
but i think we did everything all right
so
thank you all so much for watching
i'm not gonna be able to stream on
friday because i'm gonna be at a
conference so i'll be at the star trek
conference in columbus ohio here in the
in the u.s
so
i believe my talk from that conference
is going to be online so whenever it
gets posted online i'll i'll mention it
in the chat and i'll probably post it on
my social media and stuff so if you
liked what you saw here
subscribe and check out my channel and
my social media and stuff links are in
the description
if you have
suggestions for what i could do in the
future you know let me know if you want
to contribute to this project feel free
you can add issues you can submit pull
requests like the project's totally open
source
if you have any other questions that i
didn't get to today you didn't get a
chance to ask you know put it in the
comments um send it to me on social
media you know i'm happy to
happy to help so
uh
i guess i'll see you all next week until
then have a great week and uh thanks
again for watching