hey everybody welcome to live coding
with jesse i'm jesse today we're going
to try to turn our react project into a
progressive web app
i've just upgraded to next 7.0.1
and that's probably the only change
that's happened to this project
since
the last time i streamed other than uh i
i did merge a few pull requests i know
some of you are are getting those
hacktoberfest uh pr's in
so thank you for everybody who's uh
who's helped out on that
and
yeah i think what did i do yeah so i've
been at the
react
advanced react training uh with ryan
florence
so i'm thinking i might make a video
recap of what i learned there
and uh put that on my youtube channel so
if anybody's interested in seeing that
uh you can check out my youtube channel
the links in the description of this
video
uh i'd like to get that done within the
next day or two before i start to forget
things
and uh also i want to thank everybody
who has been helping out and sending me
job openings um
i have
three interviews coming up in the next
two days and one phone call with a
recruiter
so a lot of a lot of stuff happening
and i have two more interviews that are
uh need to be scheduled so they're
like most likely going to happen we just
haven't set a date yet so
as of right now that i'm thinking like
five interviews
uh will be happening in the month of
october
uh and i'm still waiting to hear back
from a lot of a lot of companies so
anyway thanks again
all your your advice and your links to
jobs and things have been super helpful
and i'll keep you all updated as
everything you know happens with that
okay let's get started let me flip my
screen here and
uh if you're new uh feel free to ask
questions as we go along i'm gonna take
breaks periodically and go back to the
live chat and answer questions
so uh just be patient with me and i will
eventually get to your questions
okay so
nothing to see right here for now
let me let me bring over that lighthouse
audit
and we can start from there
so if you've never used lighthouse
i'll give you a little overview
so if you go into dev tools
let's make this bigger much bigger okay
so if you open up dev tools which you
can do by just
um
i mean there's multiple ways i guess you
could get there there's a keyboard
shortcut i cannot remember what it is
but you could also just
right click and go to inspect it'll pop
open these dev tools and then up at the
top if you click on audits
it'll take you to the audit page and you
can run different artists for like site
speed accessibility search engine
optimization and you can also run one
for a progressive web app so this is
what i've just run
and i got a 64.
it's not really a good score
so number one
i'm not registering a service worker and
that's a big deal you need a service
worker for a progressive web app
so
that's where we're going to start is
making sure we get that service worker
registered first after that
then we can look at some of these these
other issues
about having the proper icons and and
things like that
uh you can see some of the other stuff
we actually have already and i'm just
going to show you this so that you all
know what what's needed uh cross browser
right we have that uh some of these are
just basic that you usually do for a
site anyway
uh let's see each page is url
we do have some at least some content
even when javascript's not available
we have ssl so we use https we redirect
https we have fast load times even on a
3g network
the address bar matches brand colors
that's interesting i didn't know that
was that was the thing until just now so
that's kind of cool we have a meta
viewport tag
content is sized correctly for the
viewport okay so
all those things
are
checked here in lighthouse for a
progressive web app
and there's a lot of links to learn more
as well so this is pretty helpful this
should tell us it tell you everything
you need to know
uh let me
oh the shortcut is ctrl shift i to bring
this up so thank you uh
warrior
i'm sorry i'm mispronouncing your name
but anyway thank you so much for the uh
shortcut and that's on chrome
uh i do want to say i see a lot of
people saying hi so i just want to say
hi to everybody
i'm not going to go individually since
there's so many but
let's get started and
first what i want to do is
let's go back to our code
and i'm doing this on a separate branch
so i made a separate branch to install
the latest version of next in case it
broke something
this is not on master and i'm just going
to keep going with all our changes on
the same branch
and then if we
if everything works we can merge it back
into master hopefully at the end of the
stream if we get it working
uh opio says we could use f12 as well
okay cool
all right so let me bring over some
documentation as well
here we go
and i'm going to paste a link
to this so
i just pasted this link in there so you
can read this documentation too but i
was doing a little research
and this seemed to work so there's been
an open issue on the github repo for
next js for
at least a year
and the issue has been about offline
support so you could do progressive web
app stuff
so
this was one of the latest
uh entries one of the latest posts on
that long thread
and
it supposed to generate a service worker
that can help
next to work offline
and
somebody else used tried it and it
worked for them so i'm going to try it
as well
so the it says down here that there's
been some updates
for next
seven so that's why i thought you know
what i better upgrade to next seven
beforehand so now that we've done that
let's install this see we need to do to
get it working
so this is next offline okay cool so
let's go back here let me make this a
bit bigger for everybody
and
we're using yarns we're going to do yarn
add next offline
you can do this of course with npm
as well
so that shouldn't take very long to
install
while that's doing its thing let's look
at the first step
so we need a next.config.js which i
think we already have so let's double
check that we have that
and we know we have a jest config
do we not have a next config
i guess not
okay so we're going to have a next
config
whoa ray okay it's
pretty sure you told me how to pronounce
that before i'm really sorry that i i
didn't remember
i'm gonna try really hard to remember
okay
let's copy and paste this now and
hopefully this is finished yep it's
finished
and let's make
you know root here a new file
and we'll call it next
dot config
dot js
and we'll paste
that we just have here
so we're requiring uh next offline
and we're exporting
next off or with offline so let's save
that we'll go back over we already have
a server.js file so
we need to
integrate this into our existing
server.js so i don't think we'll be able
to just copy and paste this
let's see also you can add your custom
nexus configuration as a parameter
okay
let's see what we're doing here
creates
let's see where they're actually adding
in with offline
yeah that's interesting i don't actually
see them using this anyway
let's check out our uh server.js file
and see if
see what's there our server.js file is
unusually long
and needs to be refactored but
we're not going to do that today
so check out what we're doing
okay so
we are
checking for a service worker
okay it looks like we only have it in
this spot
okay so
if it's
the route is
serviceworker.js
we are skipping a lot of our custom
logic which i i believe that's what we
ought to be doing
um and we're falling back on
next now i'm not 100 sure that's what we
should be doing oops sorry
don't have scrolling here i forgot we
had this giant object at the bottom
okay this is our our caching
um
see
all right says compare
sir static listen
okay so we have this if path name is
service worker
trying to figure out where exactly we
need to put this
interesting app doesn't
okay uh
i'm gonna look back
just to see if anybody's
uh commenting anything about this code
okay
you know what i forgot to start up my
pomodoro timer so i'm just going to keep
an eye on the time
so i know maybe in another let's say 10
minutes i'm going to go back and answer
some questions in the live chat so just
hang in there for about 10 more minutes
i'll set this timer for uh for 10
minutes
so i'm thinking
we may be able to take
some of this
i guess i should double check and make
sure that
everything still works before we take
another step
it looks like it works
um
okay
let's make sure we have path name equals
first url
i don't think we're using the same names
for some of these variables so we need
to find the equivalent
okay so app next directory
let's take
we don't need to do this right now we
need let's comment these out we left
these in from a previous thing we were
going to implement and i never took them
out so let's just comment these out for
now
uh an extra bar next
so
apps next
okay so
apps should still be
[Music]
the same
server
uh let's take
all of this
now let's just take this out
let's take all the salesforce stuff out
this file is already long enough
okay
realistically i don't think i'm going to
be at this position long enough to even
implement that so
i'm going to take that out
and uh if they ever want to put it back
in it's already in github
okay so we're not getting
all right so this is all this custom
logic that we've done but what we really
need is
what's getting just like passed on
so at some point
we're just passing things on to next
and saying okay next you just handle
this
printed html
okay so here we have
url and we're using that as the cache
key
sorry i'm i'm trying to figure out what
all this is we made this
oh so long ago
handle app request
get requested handler
okay
now let's put in
try to put some of this in
in here
so
oops
i don't mean to take that much out of
here
let's get rid of that
okay
i'm hoping that's what i need looks like
join is not defined and parser's not
defined
okay let's see what we forgot there we
are
all right let's put these in
see if that fixes everything
getting weird errors
no no weird errors
i'm getting a new warning when i
upgraded that we shouldn't have title
tag in document.js
so i'm not sure where we're supposed to
put it
but i guess that's not
it's not
now they're showing a warning before
they weren't
okay
let's check our our page here see if we
have
i'm gonna go to localhost to check this
and just
click around
okay
it works
try some other pass
okay
we'll go back home
all right that works let's check in the
console to see if we're getting errors
okay we're getting some extra stuff here
about service workers
so we should be able to check out our
service workers here
and see
okay so for localhost
test to push messages
okay so we have something going on here
with a service worker
so
to test this
let's put in
ah what
i'm trying to remember the command for
this
um g cloud yeah
oops you know what i have this in my
package json so
let's check out the package json i don't
want that right now
i don't want that
our package.json we have test deploy all
right yeah let's do test deploy so that
way we'll deploy to
uh google app engine
and we'll get a test url but it won't
push to our main url uh so the reason we
want to do this is because we're when
we're running this on localhost we're
not going to get a true
uh
progressive web app experience right the
service worker is not going to work as
as we wanted to
so let's do yarn
what's it called test deploy
and check the time
okay so while this deploys i'm going to
start answering some questions
and let's go
five minutes of answering questions and
i accidentally started that video
so at some point i'm going to have to
hit the enter key but other than that
that should just do its thing
okay i'm scrolling all the way up to the
top and i'm going to just go through as
many many questions as i can i doubt
i'll be able to get through all of them
in this five minutes so the rest will
have to wait uh until the next break
actually a lot of the messages are just
telling me i had no sound at the
beginning
scroll through those
uh
and
uh
let's see that works okay
and about it the other half of the
messages are people just saying that it
works now the audio works okay
abraham says hello can you hear me i'm
in california dreaming about who we used
to be
thank you for that uh that was nice
um
riren says please teach me about
programming uh yeah if you have
questions like any specific questions
please let me know i'm happy to answer
them
yasmine says i can't understand please
be clear and brief yeah i'll do my best
to explain what i'm doing as i'm doing
it and feel free to ask any questions
that you have and i'll i'll do my best
to answer
those pink says what this guy does is
pretty advanced in my opinion um i don't
know i mean advanced is relative right
so
um to a beginner this might seem
advanced to somebody who's been doing it
for a while this might not so it and we
are all over the place so sometimes we
do really basic stuff and sometimes we
do advanced stuff
uh israel says i'm new to programming
and this seems huge yeah this project
we've been working on since
like december or january
so it
it has a lot to it
you know but
it's to be expected we've been working
on it for a long time
uh
zhang says hello jesse good to see you
again uh it's good to see you too thanks
for joining us
um
lamb's tech says pomodoro timer yes
using a pomodoro timer
okay horizon saying
um
good to see you harsha glad you're here
uh but the harsh is saying don't
directly copy that code it is meant for
vanilla node instead you instead use
server.get your using express there
sorry
israel says i need interactive whatsapp
coaching lessons too please
i currently don't do any interactive
coaching lessons um maybe i should think
about doing something like that
okay
all right harsh it's uh put in some code
here for me to use so i'm gonna
as soon as the timer is up i'm gonna
check that out
jay says 243 lines biggest code i ever
wrote was 80 lens so i haven't even
started a code from the look of it
yeah
i don't know we have a lot of we have a
lot of code we've been working on it for
a long time though so don't be
discouraged
um just asks what a web
okay drew asked what a web app manifest
is uh it's just a set of instructions
to tell
i guess like the the phone
like what logo to use what title to use
what's flash screen what colors to use
when you are loading a progressive web
app on a phone
uh harsh it says next offline
automatically generates service worker
and prod
let's see
okay that was in response to michael
creole michael had said you might want
to make the service worker.js file first
and harsha's saying it automatically
generates it yeah so it'll we shouldn't
have to do it ourselves
uh xds how old are you i am 32
and i will be 33 at the end of this
month
okay so
i'm gonna go back to the code
and i'm gonna remember to start my timer
this time so in 25 minutes i'll go back
to
the chat
and we should have a url
i guess not
we should soon have a url but i'm going
to go back and check based on what what
harshit was was putting in the chat
and check and see
how badly i may have messed this up
let's see server get service workers
request
services
oh you know what actually
this ended up working so
since i didn't copy and paste the whole
thing i ended up putting it inside a
server get anyway
so
it's a little bit different so uh what
hardship was saying is just get that
service worker js
and instead this is getting uh
everything
um
that has been passed through which our
service worker js should be passed
through since we're passing it through
up above
um
so since that's going to pass through
instead of checking for it here we just
check for it down here right because our
path name is our parse url our parse url
is just the
um
the url that would we would have been
able to get through here so
this should be the same thing hardship
let me know if it's not but i i believe
it
it will end up if the same result
okay let's see
here's our url
and what we do when this url loads
for our test site and i'll i'll paste it
in here
so you all can check it out if you want
when it loads i'm going to do another
lighthouse audit
and
let's see if anything has changed in
regards to the service worker where my
thoughts
all right so you can do all these audits
but since we're just testing progressive
web app it'll take a lot less time if we
only check for this
but you can check for them all at once
if you want
so we're going to run those audits
and while we're waiting i'll check the
live chat
uh hamro says i'm 17 and dropped out
what should i do
uh well if you're interested in
programming learn as much as you can
about programming try to get some
freelance jobs maybe with some small
businesses
and build up your
your portfolio
and learn as much as you can
on your own like take the free code camp
lessons
and
you can still
you know get a good job you can make
good money
from doing work like that
uh zhang says the other day i was trying
to set up express.js as well as
browsersync does it make sense to do
both i'm trying to make a site that uses
express.js at the back end
yep uh express.js would be good for the
backend but browsersync
hey cool we passed
sweet
so um
we do register service worker we respond
with the 200 one offline
awesome
so now we just need
some icons
and a splash screen
cool
um i guess i'll finish answering this
since i started already
so
as far as i know and correct me if i'm
wrong anyone that is more familiar with
this but browser sync is going to allow
you to get like auto refresh and see
what's happening
as you update things when you're in
local development
express is gonna actually run your back
end like even in production it's it's
gonna
be the server right
so
you can you should be able to do both
i don't know that i've ever used browser
sync
with express i mean usually it's i use
express in the context of react
and all that stuff's already configured
because i'm either using next or i'm
using create react app by the way create
react app 2.0 is out
so if anybody's used that and wants to
let us know how it is that i'd be really
interested to hear that i actually can't
wait to use it on the the next
uh project that i do
all right so let's try this out so we
need
these icons let's see what icons we
already have because we do have a
manifest json already
and where did my code go
oh i'm all the way over here okay
so let's check out our manifest
json which i have up here
okay so we have a short name a name we
have some icons but not all the right
size icons
so
let's
see what we need
okay we need icons at least 192 pixels
and at least
512 pixels
so
let's add this in for now and see
just place
theme color background okay so we have
what we need there
let's try to make some images
i wonder if there's an automatic
generator
let's say
progressive web app icon generator
suite
see i knew it had to be out there
somewhere right
so
we'll choose a file
great and then we'll get all these files
there's got to be
uh logo
see if i have a logo file
no i don't want
let's check in downloads
ci logo
i gotta have a logo in here already
right
i had a favicon
[Music]
what is that
okay this will actually work
yeah that'll work let's use that desktop
jpeg
all right
it's not really that like big enough
we'll see how this goes
might need to find a bigger image
yeah
zero padding
um
all right
let's see what happens
i don't know why why do i have the box
checked for windows phone
does anybody have a windows phone
oh hey horseshit um
thanks for stop for joining and stopping
in for a little bit
i appreciate it so see you next time
wait what happened
it's not spinning anymore what just
happened
hmm
okay evidently that is not working well
let's try another one because there are
a bunch on the list
hmm
cool
all right so
let's check out these app images
all right cool i think we have all the
sizes we need
i'm gonna
see if i can just drag them over here to
our static
files
put them right here maybe in our images
folder
okay it would not let me copy and paste
them let's see if i can drag them
all right cool
so we have all these icons now let's see
if it gave us
it did not
i was hoping it would automatically give
us what we needed
okay
it's all right we'll be able to put this
in here let's go to our manifest json
and just switch this up
i'll leave these
and then let's just add in these sizes
which or whatever ones they said we need
so we need at least 192
so here we have a 192.
and that is static
image
icon
192 192.
[Music]
let's see if this one
well they copied everything i don't need
everything
okay
to have that and then this one will be
our 512
and
we'll copy this
oops let me copy the path
just pop that in
get rid of this
okay
wonderful
all right i'll leave the rest of these
sizes in here just for now
in case you want to add those in uh but
otherwise probably a good idea just to
clean them up you know so
overall your uh
there's less size to the
uh to what gets uploaded the server
okay that looks good
to make sure that was it
150 or 512 and 192.
let's see what the manual checks are
page transitions don't feel like it
block on the network he's facing url
okay
that should be all right
so let's run this again
so we're gonna run this and i'm gonna
answer some questions while that runs
let's check my timer
and um
we'll guess we'll give it a check we'll
run our our lighthouse again
and then the final test will be
uh
i will actually try to load it on my
phone and you all can do the same too
because i'll copy and paste the url
that was fast
oops you know what
i need to stop my
i need to stop my local server before i
do that because uh it can mess up the
build so we're gonna run that again
but anyway i'll give you the url you all
can test it out on your devices and see
if it actually works
and
so if it works in lighthouse and it
actually works on a device then i'd say
mission accomplished
um the web says hey jesse i am a
beginner in react
should i take any paid courses you could
it depends on your finances right if if
you can handle paying for a course then
there are some good courses the udacity
react nano degree is really nice because
you you have people that will review
your code for you
and let you know what you need to do to
to make it past or to make it better
so that's very valuable
there's also like i just went to an
advanced react training uh from ryan
florence
and
that was also helpful as well
but you don't need to most of my react
training has been free videos you know
tutorials and just reading documentation
so
it kind of depends on how much money you
have and what your learning style is
some people do a lot better if they're
in a classroom setting with somebody
talking to them other people do better
just kind of learning on their own
and all different types so that's more
like a question that's going to depend
on on you personally
uh v web says what's the top state
manager for react redux for a long time
was the answer to that question but now
like apollo has state management built
in if you're using graphql that's a good
choice
there's the context api that's built
into react now that can help you with
state management mob x is also good so
there's a lot more options now than
there used to be
uh
the follow-up to that was which one is
difficult context api redux or mob backs
of the three i i would say redux is
harder to learn
but it's potentially the most powerful
so if you had a very large application
that needed the power of redux then it
might be worth it but if you have
something smaller just use the built-in
context api
and you know try out mobx and see if you
like that too it's also a good choice
all right
let's test this out
and i'm going to copy and paste this in
here for you all
okay so the link is now there and let's
try out
our lighthouse audit
let's try the console
cool
no errors in the console that's awesome
run the audit
and i'll answer some questions while
it's running
uh manuel says what's the best way to
save my data from my database to my
service worker
um well you maybe not right to your
service worker but you could certainly
use local storage in the browser uh if
you had a lot of data to work with you
might want to use something like a pouch
db
so if you're familiar with couchdb pouch
is like the browser equivalent of that
and they can sync together in real time
so you know maybe check that out there
may be some other options out there but
that's what i would go to
first uh vweb says do you know back-end
programming i do know some back-end
mostly with node
uh so we do like that whole server js
file like that's that's back-end stuff
anthony says what do you mean by
progressive so the term progressive web
app uh is specifically a term that it's
a web app that can work offline and then
progressively enhances so more and more
features will become available
as you have a better network connection
so that's because it's a progressive
enhancement is where you get the word
progressive from so the basic things
that your app can do should be able to
be available offline when there's no
connection
and then you the full range of features
could be available when you actually
have a good connection
so let me know if that makes sense
wally says hi hey how's it going
harshit says so i asked harshad earlier
if the way i did it would work and he
said yeah that's that's not the express
js way of doing it but it works all
right
we'll do i very much am a believer in
like when you first approach a problem
make it work first
then go back and do it do it right right
so
uh
we'll make this work and then
we can always do it right later feel
free to submit a pull request if it
really bothers any of you and you you
want it to be done right uh that's
that's cool
cool so this passed
so now
let me try
i really don't want to type that in on
my phone i hope autocomplete handles
this
if it doesn't then i'm going to like
share this link with myself and so i can
click it
so
2018.
hey i think it i think it did auto
complete
uh no it was an earlier version
it's not the version i won
all right let me copy and paste this
i'm gonna share it with myself with
google keep because that syncs up really
fast
let me know if any of you have any luck
uh getting this to run
locally
i'm interested to see how much of it is
actually available offline so i'll
probably put my phone in airplane mode
after i load it
and see
see what we can do
i didn't think about this but i already
pasted this into the chat i could have
gone to youtube instead of going to keep
but
on my phone
oh well
open this
with chrome
all right so i wish i could share my
screen
now what what should happen and maybe i
would have had to have done something
else to get this to work but
it should prompt me at some point
to
load this as a progressive web app
but i can't remember what point that's
supposed to happen
or if i need to do something else to
make that happen
if anybody knows let me know
okay so it hasn't prompted me yet
so i'm gonna manually do this
so i'm just going to go in and chrome on
so i'm on an android phone
and in chrome i can go to the menu
and there's an option that says add to
home screen so i'm going to do that
option add to home screen
and let's find it so it is now on my
home screen
so should be able to click that
and it'll pop up
now here's here's the test
let's put the phone in airplane mode
alright so my phone is now in airplane
mode
i'm gonna completely
exit out of
the app and i'm gonna go back in and see
if it still works
all right so some stuff still works so
the youtube videos obviously don't load
which that that makes a lot of sense but
i can still like click
on the tabs so i'll show you like what
i'm seeing so this youtube videos
doesn't work but these tabs still work
the data is still there
uh for the home page
the
images are still there so these images
are there oh but that
that needs formatted differently um
all right so that works now i'm going to
try the menu
menu works now what i'm not sure about
is when i click one of these is anything
going to happen
i'm going to guess and say nothing's
gonna happen but let's see
okay yeah i get an error that says it
failed to fetch
okay but here's what i'm gonna do
um
i'm gonna take this out of airplane
mode and then i'm going to try to go to
a few pages
then i'll put it back on airplane mode
and i want to see if it
if it will actually load then
so
you know what i want to see is will it
save these pages
okay so i've loaded three pages
now i'm gonna put it back on airplane
mode
so i'm sorry if this is really boring
for you all because you can't see it but
i just
i i don't have anything set up right now
to uh to share this
okay
so
i'm on airplane mode now i'm gonna go
back to the home page and try to
navigate again to the pages that i just
went to
hmm
interesting
okay so
one page did save
but the other ones didn't
that's kind of weird
okay so
i'm not 100 i have an idea why i did
that but i'm not 100 sure so the only
difference i could see is
when i put this on airplane mode and i
try to visit a page that used the link
tag without
the
i believe without the prefetching
somehow it it worked it's like it cached
that
but
to menu
let's go back to the code i'll show you
in the code what i'm talking about
so i i remember it in my mind but i'm
sure it won't make sense to you unless i
can show you
so in the drawer menu
you can see we we have this link url and
then we put this as url in as well
but in our where's our index
so these are the ones that didn't
didn't save it didn't work uh offline
even when we had loaded them online
first
but
where's our pages
but these ones did work
and where do we have them at
index all right tab section you go to
tab section component
so in our tab section
we actually have
we're not even using the link tag we're
just using a regular link
so when i say the link tag i mean it
comes specifically with
next js and allows you to do
pre-fetching so these ones
stayed cached
but the other ones didn't
so i don't i'm not exactly sure what's
going on there but
the home page still works offline
and we at least some pages still work
offline so
i'd say like i'm not 100 satisfied with
that
but we have like very basic progressive
web app functionality
so i wouldn't expect every piece of
content to be available because that's
just way too much and i wouldn't want to
you know load up all that stuff on
somebody's phone and have it saved
because they probably won't need it all
uh but there may be some basic content
that always should be available so maybe
i'll have to figure out how to do that
if that's possible
to just say i want certain pages to
always be available
i'm not sure how to do that but i assume
it's possible so that'll probably be the
next step for me if i want to continue
on with this
i'm not sure how much value there is in
it right now
i as far as i know no one is really
tempted to use the site like this yet
so if i can get some analytics or data
to show that this is a feature that is
being used then it might justify me
going in and trying to make it an even
better experience
but in any case
you know we were so close to making it
work i thought it was worthwhile to just
do that a little bit extra to have this
work uh as a progressive web app
so
i'm gonna go back and answer the
remaining questions now so if anybody is
watching and you have any questions
about anything at all
uh please feel free to ask him right now
i'll answer as many as i can
and just to let you all know i may do a
live stream on my youtube channel the
links in the description
uh
either today or soon i i'd like to live
stream my studying for
the google interview that i
will have somewhat time at the end of
this month
so i'll probably do algorithm challenges
and i'll talk through it as if i was
in a real interview
so try to explain myself explain
possible solutions and then you all can
ask questions and then once i finish the
algorithm
uh i i'll go and answer your questions i
think that'll help me to study and maybe
it'll help you all to
see what kind of things you should be
studying for for technical interviews as
well
so if you think you'd be interested in
that uh you'll if you subscribe to my
channel and turn on notifications you
should get notified of that
and
like i'd also like to put out a
pre-recorded video of a review of the
advanced react training that i did last
week
okay
i'm not sure where i left off so let me
scroll up and see where i left off here
okay i found it
antonio says hi i'm new here i don't
know any programming language where
should i start uh it depends on what you
want to do but javascript's not a bad
place to start it runs in the browser
you don't need any special thing to
download on your computer
and there's a lot of you know
beginner-friendly tutorials you could
try freecodecamp.org
start out with their basics
and you know see if you like it
if you have something specifically in
mind that you would like to do then
another programming language might be
good for you if you're into machine
learning maybe you want to go into
python
um if you're
really into um
not slipping my mind into like wordpress
development php might not be a bad idea
right so it just really depends on what
you're into
but if you have no idea
javascript's not a bad bad place to
start you can use it on the client and
server side it's very versatile
uh
v web says which one is better ubuntu or
mac
i've only used ubuntu on a server so i
haven't used like a desktop version of
it so i can't really compare i will say
in terms of servers i
i would definitely prefer to use an
ubuntu server than a mac server i mean
does anybody use mac servers for
anything i know they're they were a
thing i don't even know if they're used
anymore
has anybody used ubuntu as a for a
desktop and can share
what would you think about it as
compared to a mac
nabil says hello from algeria hey how's
it going thanks for watching
hassam says i'm also from algeria cool
two people from algeria awesome
um
says what is the frequency of live
coding with jesse
it used to be i tried to do it every day
now
uh not every day
so i try for like at least once or twice
a week
things have been
different so
if you want to know what's going on with
my work situation right now what's the
last stream the beginning of the last
stream and i explain it all but things
have just been uh really different here
recently so that's been a lot of the
reason why i'm
my coding has been not as steady
um
so just just check it out if you're if
you're interested
uh blessing says i'm a beginner so
should i start with javascript or python
i i'm going to answer the same way i
answered the last question about this it
really depends on what you want to do
javascript and python
in my opinion are both very easy to get
into python may be even easier
because of the fact that the syntax is
really easy to pick up and
you know there's not a whole lot of
special characters
but
like if you want to do web development
then definitely learn javascript if
you're not sure then maybe get python a
try
hitachi says hi
hey how's it
going kavia says love from india thank
you
assam says um
i really love how simple python is
simple and powerful yeah i mean you got
to love the python syntax right it just
looks so clean it i mean it is really
fun
oh john says since you're on a mac
if you have an iphone you can copy on
your mac and paste from your iphone if
you have continuity enabled wow i don't
have an iphone but that is
really cool
i did not know you could do that my wife
has an iphone and a mac i'm going to
tell her about that and see if she's
ever used it
i have a feeling i'm gonna tell her
about that and she's gonna say like oh
you didn't know that i've been using
that for years
but
i think that's really cool
i'm not gonna switch to an iphone i like
my android but
that's that's pretty awesome
manual says you need to set up the
service worker so it can load the pages
you add you can add pages service worker
once you want oh cool you know what i
never scrolled down and read the rest of
this i bet you
there yeah there are options
hmm
yeah i'll have to check that out maybe
later but it's it's possible that there
are options for that here that i just
didn't read about
uh v web says what is the build system
that you use for production build react
app um
i mean next.js has its own custom
webpack config and it handles all the
build and then i send it to google cloud
platform and it runs on their app engine
vweb says do you know node.js uh yes i
do node we do a lot of custom routing
like form handling file uploads things
like that with node uh making like api
calls in the background
vweb says what are the best web
technologies to learn right now it that
really depends on your goal
if your goal is to be completely on the
cutting edge like doing cool stuff then
you know maybe you want to work with
um
i don't know like web assembly and
doing like web vr stuff or um
what else there is out there
i mean there's some really cutting edge
crazy stuff you can do on the web if you
want to get a job
there are a ton of react jobs out there
right now
uh so i mean it just it really depends
on what would you want i mean
if you're going to be on the web you
need html css and javascript for short
you can't go wrong with that they're not
going anywhere anytime soon they've been
around
you know almost since the beginning of
the web so
go with those and if you're a beginner
it'll that should keep you busy for a
while trying to learn those and master
that beyond that
if you're looking at frameworks there's
still a lot of jobs with angular
there's there's definitely a lot of jobs
with react
i'm not sure how many jobs there are
with you but vue is pretty popular at
least among developers
and then there's some older frameworks
that there are still jobs for them you
know they're not really growing anymore
but things like ember
you know there's there's still jobs for
that
nick says
can php build progressive web app or
only javascript well the key to a
progressive web app is that service
worker which is a javascript thing
because it runs client-side so you could
have the back end be php
but
you would still need to have that
javascript service worker
so i personally have never seen a php
progressive web app but i've also never
looked for one so they maybe they're out
there
vweb says what are the best courses to
take in udemy to learn react i don't
know i've never done a udemy react
course so i can't i can't help you with
that but if anybody knows a really good
one please let us know i mean i'd be
interested in it as well
sergey says is php still alive it is
still alive i mean there are um
evidently larval
is a php framework that's getting a lot
of
like modern updates i heard on a podcast
recently
uh wordpress is still like most of the
internet so and that runs on php
so it's definitely still alive
uh
hua rei roo
i think i pronounced that right this
time says
uh when should one use react native uh
or native code over progressive web app
um
if your site
if you have a website and or a web app
and your main audience is
desktop users but you'd also like to
provide a little better experience for
mobile users i think progressive web app
is good then
if your main audience is mobile i would
definitely go with react native you're
gonna have access to
more uh of the the features of like the
hardware on a phone than you would just
using a progressive web app
so
it's going to be you're going to be able
to build
better phone experiences with react
native or just native code
so does that make sense i mean there's
definitely going to be like a line
where you're not sure
but like if there's some feature on a
phone
that you want to use and you can only
use with react native then
you know definitely that's that's where
you're going to go
but i mean one of the the
things to keep in mind is like if you
don't need those features it could take
a lot of extra time and money in terms
of paying developers to build out a
native app
but if you already have the web app
built turning it into a progressive web
app but i mean we just did it here like
it's not that hard to do so
you really have to measure like how much
value like how much benefit am i going
to bring to the users like how much
revenue is this going to bring in if we
do a native app
uh versus just progressive web app so
that's that's going to be a decision
that's going to depend on those those
factors
the web says are you a wordpress and php
developer i do stuff with wordpress i
know limited php
to do what i need to do in wordpress but
i wouldn't
i wouldn't consider myself a wordpress
developer
uh my my time spent coding is
overwhelmingly in javascript
sergey says hi from kiev how's it going
thanks for watching
daniel says i used i used ubuntu every
day but if there's a reason why you want
to learn go for it but it's a headache
sometimes okay
dungaree says i like turtles do you like
turtles i do like turtles turtles are
nice
um v webb says i want to build a site
like facebook can node.js javascript
handle that much traffic or i need
something else
i would say
you can build it with node and
javascript and if you ever end up with
as much traffic as facebook you'll have
enough money to rebuild it in whatever
you want so don't worry about that
uh getting as much traffic as facebook
is
uh
that would be amazing so you could
probably build it with whatever you want
at first and
you'll have plenty of time to refactor
rebuild but you know as you're on your
way to facebook like numbers
manual says what's your opinion with
angular
um i think angular is good you can build
good stuff with it
i pr i happen to prefer react but i
haven't used angular since angular 1. so
i don't think i can really give a a good
well informed opinion since i'm not up
to date on the latest in angular
jerry asked if this is live yes it is
live
kwabi kwabe and i should i pronounce
that says view is so easy to learn if
you don't know angular or react go with
you first i would suggest
okay yeah i have heard view is pretty
easy so
yeah if you just want to
if you want to get started in something
and build some cool stuff then
you have you done i haven't used you but
it seems to be uh pretty popular and
straightforward
vweb says how much time will it take me
to learn mern mernstech it depends
entirely on how much you already know
and how much time every day you can
dedicate to learning
and how quick of a learner you are so i
it really depends on the individual
bob says can i use django with you to
have a real-time app
i suppose right i mean views just gonna
be your client-side stuff so
i suppose you could use it with whatever
back end you want
uh andrei says hi what about flutter you
know what i i know barely anything about
flutter so i don't i don't feel
comfortable
talking about it because i don't think i
can give you good information uh right
now about that
vweb says can i get a javascript job
like react node express code without a
college degree yeah definitely at least
in the united states you can i don't
know what it's like in other countries
but you can definitely get a javascript
job without a college degree
reweb says should i go to college to
take the time to learn coding on my own
well it depends right if you want to be
a web developer you don't necessarily
need to go to college if you want to get
into more complex like math based things
um so more complex computer science
things so some more of maybe the machine
learning
then a computer science degree may help
you more and depending on what company
you want to go to certain companies
value computer science degrees more than
others so check that out first
before you make your decision
uh j
j on
i'm not sure i pronounced that let me
know if i'm doing it wrong but anyway
jaylen says hi from the philippines hey
how's it going
vweb asks how i get motivation to code
um
i if you're working on projects that you
like that will help motivate you once
you start to get the hang of it and are
able to do more that will motivate you
but other you know do what you need to
do like drink some coffee uh do some
jumping jacks uh put on some music that
gets you pumped up right like help
yourself out a little bit you know
motivation is going to be different for
different people you know obviously but
the more you practice and the better you
get the more fun
it's going to be because you'll be able
to build cool things you'll be able to
think up something and build it and
that's awesome
so um
you know more practice i think will
result in more motivation right unless
you just completely hate coding but then
at least you'll know and you can start
looking to do something else
uh the web says can i learn angular
react review in two to three months
well i mean you
coding
the way i look at is it's never like
you're going to completely learn
something because
there's so many
ways to approach problems in coding and
even these frameworks update frequently
so there's always new things to learn so
you know could you get to a point
where you could build
you know functional apps with those
frameworks in libraries
in two to three months yeah definitely
you could
you know what i consider someone an
expert after two to three months
probably not
you know but
um would i ever consider anyone as
having learned
one of those completely no it i
wouldn't the web says how did you learn
coding documentation or online courses
and which one is better
it it depends most of learning coding
was online core is a mix of online
courses and documentation really
usually when you're just starting out
documentation can be confusing because
you don't have a lot of that basic
knowledge to even understand what
they're talking about so an online
course can be good to start out
but then once you start to get better
with it it's actually much faster to
just go to the documentation and find
exactly what you need than to try to do
a course
so at this point right now unless i'm
trying something completely new
i'd mostly look at documentation
and i i remember whenever documentation
was way too confusing to me and my main
source was online courses so that
there'll be a shift
that happens
once you get
proficiency with with something you know
once you get really good with something
i'm not saying i'm really good but once
you get kind of good with something
then you'll be able to understand the
documentation more and you'll find more
value in it
vweb says are you in mobile development
uh i do react native stuff so not like
mobile as in like kotlin swift java but
react native mobile
vweb says thanks yeah no problem they're
all good questions
uh
serdna says hi hey how's it going
uh
bhakta says hi it's great to be live
with you is a boot camp 15 weeks the
best way to learn coding
i don't know if it's the best it it
depends on the boot camp and who's
teaching it and what they're teaching
and how you like to learn right and how
much time you want to dedicate to it so
i really think that
this
the success of any educational program
does depend a lot on
the actual student and how much time
they're willing to put into it so
if the student is a really good student
even a terrible program can still be
beneficial to them
but if a student doesn't want to put
forth any effort
the great program is they're not going
to learn anything so it's definitely a
mix so do your homework and get a good
program
and then put the time you know and
effort needed to to do well in it and
then you'll be fine
but it's certainly it it's not
necessarily the best way you know there
could be other online programs that
aren't a boot camp you know self
teaching so you know there are options
just you know kind of try to figure out
what's best for you
and like look back on your your learning
experiences and try to figure out what
helped you the most what you enjoyed the
most which you learn the most from
vweb says what should i learn beside
coding to get a job and any big company
communication skills are big like
writing skills
because you probably need to write
documentation you'll need to interact
with team members with clients
so those are always important
do you use flow in your project and your
attitude
uh at static typing
i don't use flow
static typing
i think it could definitely be helpful
and help help you to write programs with
less bugs
okay so i think it's
if you have a really small project
sometimes it could be overkill
uh just in terms of
like it's not 100 necessary to keep
everything straight but as soon as you
start to get a bigger size project i
could definitely see the value
uh in static typing
the web says when do i know i'm good to
react and can move to back-end
development um when you can start
building stuff that's good uh
you know when
when you can build things that work that
are useful to people
then you're you're good right if you can
convince somebody to hire you then you
know you're good enough right um
but you know you move to back end when
you need to move to back end if you need
to build out your own back end then
that's the time to learn it
and then you can certainly learn react
and back end at the same time
as you try to develop more and more
complex apps
you'll need more complexity on the front
and back
end uh koabe says i learned 30 of you
from courses on udemy 60
on my own project
and 10
i will hopefully learn by improving my
own project and doing other projects in
the future
that's cool yeah i mean i think that's
it should be expected right like if you
do a course or a boot camp or anything
like
don't make the mistake of thinking that
like now you know it it's time to move
on like now you know a little bit
you're going to learn much much more by
actually working on things so you won't
even be actively trying to learn you
won't be taking a course or anything
like that you'll just be trying to get
through the day and and build what you
need to build or fix a bug and you'll
learn so much
in the course of that without even
realizing it
like i've learned so much over the past
year
through these live streams of having to
try to fix stuff you know live and and
figure out what kind of pull requests
are coming in before i merge them and
and really like none of that had
anything to do with an online course or
boot camp or anything like that
it was just doing the work it was you
know we need to do this thing i've never
done this thing before so let's try to
get it done
and
you know that's like your your entire
career as a web developer or any type of
programmer is going to be learning and
doing just a constant cycle of learning
and knowing
undefined particle says are you familiar
with some place to look for challenges
or projects to move from the basic to
more intermediate level and let's say
javascript
yeah you know what i don't know what
it's called or url but there are
definitely like there are place websites
and i believe github repositories that
have lists
of potential projects that you could do
so i'd search for those they're they're
definitely out there
porrix says i'm getting advanced in
mobile app development but i see big
companies working on write once run on
any device and with simple web code
can i mention name
i'm not sure what uh bhakta said can i
mention name
so i'm not exactly sure what you mean by
that question pork says i really wonder
if what i'm doing is going to be
valuable in the long run what do you
think
so you're saying like you're learning
like native app development as opposed
to something like react native and i
think native app development is not
going away right um
it's
there are still
the majority of apps are still
native apps
so
i wouldn't worry about that
and those are actually some really high
paying jobs i frequently see
native app developers
then the salary ranges are higher
than
web developers
um
psvnl says hello jesse i'm a junior web
developer i want to know that
what will compe that competitive coding
will help me develop better applications
uh it it might
not necessarily
competitive i'm not that familiar with
competitive coding i guess it depends on
what you're coding if you're competing
in like who can do algorithms better
i i doubt that it would help you that
much it would definitely help you in
technical interviews
but web developers don't necessarily use
a lot of
you know algorithm type stuff challenges
and things so
i mean it depends on what you're working
on but
um
i'm not sure i could be mistaken like i
said i'm not that familiar with
competitive coding
says i learned a lot um very grateful oh
i'm glad you
glad you learned something
uh
so that's cool you know definitely uh
stop back in for another stream
sergey says what level php knowledge do
you need in the us to get a job
i i don't
i mean i don't really know i i haven't
ever really looked at php jobs so
uh i don't think i could give you a good
answer on that
the web says are you on any discord
server or any social websites we can
connect with you i am i have my own
youtube channel it's linked in the
description i have uh twitter that i
believe is also linked in the
description and i'm on instagram i'm
also on facebook but i don't really do
that much with it so i'm most active on
twitter and instagram
vweb says have you built any apps with
react native yes i have
vweb says if i want to build android and
ios apps should i learn react native or
java swift what will be better um
you'll definitely be able to build apps
for both platforms a lot faster if you
go with react native then you won't have
to learn multiple languages
vweb says are you still learning new web
technologies oh yeah for sure
yeah i mean i just got to use the new
suspense api that's not out yet uh last
week at the react training um so
you know i'm always
i'm always trying to learn
the latest stuff or at least the latest
versions of stuff like react
that's the job you got to stay ahead um
or else you'll stagnate i mean to be
honest with you i don't think i would
have fun at this if i just came in and
did the same thing every day and didn't
learn new things that's that's part of
the
the coolness of this job is that it's
it's always new right you always have
new challenges new problems and you have
to find out new ways to do it and
and
there are new tools out so it's like you
can solve even similar problems can
still be different because you use
better ways to solve them better tools
better techniques
so i i don't know to me that's that's
really fun not everybody wants that some
people want to just want a job where you
going you don't have to think you put in
your time and then you go home and
that's when you live your real life
i've had jobs like that before there is
definitely a nice
aspect to that i can see
how people could really
you know be fulfilled by that um
but i
right now
i really love this and for the last six
years i've loved doing this
and uh you know i have fun
when i'm when i'm coding
bhakta says i've started with javascript
but not too advanced level now getting
ready for boot camp where the work is
mainly ruby please advise
um hey i mean do your best and learn the
ruby
right if that's what you're going to be
doing in your boot camp so
learn that and
you know
try to keep using javascript so you
don't forget what you already know
troll master says i can't get hired
because my real name on my birthday
certificate is troll master
oh you know maybe you can change that
right
or
you know maybe try to get hired at a
place that that likes trolls right
you know i mean
uh evidently like reddit is full of
trolls isn't it maybe they'd hire you i
don't
i don't know their
youtube comment section is full of
trolls i would see if you could get in
to build a ui for comments
and with google for youtube maybe that's
the place for you
i actually never had problems with
trolls on my youtube videos i wonder if
just not enough people even watch them
to care to comment but
almost all the comments i get are
positive and even the ones that aren't
positive are still helpful
ismail says thanks for the good tips
you're welcome welcome um
hopefully they help some of you v webb
says thanks jesse i learned a lot from
you you are helping a lot of people oh
thanks for saying that i i hope so
that's why i do these streams and i will
keep doing them as long as i can as long
as they are helpful to you all so i've
gotten through all the questions we've
had a about an hour and a half of live
streaming now so i think now's a good
time to stop
um i may end up doing another live
stream on my channel
sometime today we'll see how i feel live
streaming does tend to take a lot out of
me and sometimes i lose my voice
so we'll see how that goes
but um
i'm not sure
if i'll be able to stream any other time
the rest of the week i have interviews
coming up and my wife's having surgery
so i have to take care of her and the
kids
so this may be my only stream for free
code camp this week
i'm not happy about that i wish i would
be able to stream more but that's just
how it is this week so maybe i'll see
y'all next week maybe i'll see y'all
sooner uh either way have a great day
have a great week and thank you so much
for watching