[Music]
let's uh let's get Quincy up here we're
so delighted that we could convince
Quincy lassen to come and speak today
Quincy's been around educating people on
the web for a really long time he's one
of the founders of free code camp which
is this resource that does incredible
work teaching coding to so many many
people this entire community that sprung
up and it's huge and free of free code
camp is a great example of where the jam
stack has been applied to great effect
so you wanted to try and grab some of
that knowledge grab some of the stories
about that from Quincy and share those
with you today so I think I should get
out of your way and we should we should
welcome Quincy onto the stage so
everyone Quincy Lawson everybody thanks
Phil hey everyone I'm just gonna make
sure that everything works okay first of
all welcome I hope you all are enjoying
the jam STATCOM so far who's enjoying it
raise your hand if you enjoy it yeah
all right lots of hands in the air great
so I'm Quincy and I'm gonna talk about
how free code camp uses the jam stack to
serve millions of people around the
world who are learning to code first I'm
going to talk about the history of free
code camp and our tooling over the years
and how we gradually converged on Jam
stack is the way we wanted to do things
then I'm gonna talk a little bit about
why we chose the jam stack and some of
the new ways we're applying the jam
stack so first who here has heard of
freako camp before okay how many people
have read like a frico camp article or
watched a video on our youtube channel
how many people have used the free code
camp curriculum itself and the
interactive coding challenges ok quite a
few you great so what is free code camp
all about we're all about access we want
everybody in the world to be able to
learn to code because we believe
everyone in the world should learn to
code not just the kids but the adults
median age of people who are using
freako campus 30 we want people who are
anywhere in the world regardless of what
kind of data plan they have what kind of
access to electricity they have which is
an issue in a lot of countries we want
people who can learn to code on their
hand-me-down phone in Mumbai or people
in Auckland who can learn to code at a
public library so we want everything to
be browser-based
we want it to be completely self-paced
so that you can learn to code even if
you have kids if you have a full-time
job if you have a mortgage and a whole
lot of other competing obligations you
can still figure out a slice of time
where you can learn to code so making
everything browser-based self-paced and
importantly completely free allows the
maximum number of people to learn to
code and it makes it possible for
everybody to harness these mainframes
that we're carrying around in our
pockets and the incredibly inexpensive
computational power that's all around us
we want everyone to be able to do that
and to be more productive as a result so
I started free cocaine back in 2014 I
had this you know it kind of kind of
pretentious acne quote but it's from
Laos and I'm a huge I spend a lot of
time in China and it was I just wanted
to create a community where people could
learn to code and I tinkered with that
for years I worked as a teacher in a
school director for about a decade
before I eventually learned to code and
the way I did it was purely driven by
necessity I needed to help my my
teaching staff be more productive so
they could spend less time chained to
their desk doing immigration paperwork
in and grade reports and more time
actually interacting with with the
learners so I just googled around and
figured out how to write Excel macros I
figured out how to use this tool called
autohotkey to like programmatically
click through government forms and
things like that okay
Alek
fans great so that was my introduction
to coating it in my 30s and once I
realized one of the impact just a little
bit of programming capability had I
decided I needed to help as many people
learn to code as possible not just the
next generation who are getting you know
millions of dollars in funding from the
Bill and Melinda Gates Foundation and
things like that but but working adults
who are already mid-career we wanted a
resource that they could use
so I iterated for about two years on
different adult education technology
products essentially and eventually I
simplified everything down and one very
aggressive sprint in my closet office
and I got a frico Camp live after about
three days for hard work shout-out to
the noun project for this landing page
but I started tweeting it out people
started coming people started hanging
out and helping one another and
initially we were just using a lot of
existing resources we were using a lot
of Stanford courses and mighty courses
and we'd all worked through these
together and we just keep each other
motivated and help each other get
unstuck in chat and eventually people
started getting jobs and here's a
snapshot from our LinkedIn Alumni
Association we've got almost 54,000
people people working at IBM Accenture
Tata Amazon Microsoft and Della Google
so these people would turn around and
they'd apply the skills they just
learned and help improve freako camp
itself so very quickly
free code camp went from just being
basically a list of resources to being a
full-fledged interactive curriculum and
we became like a legitimate fairly
respectful respectable open-source
project and we also had a whole bunch of
people create freako camp study groups
around the world because they wanted to
be able to meet in person these were
completely federated and there wasn't
really any formal leadership for me
because it was still just me at this
point
but we had people I'm just gonna click
through them so you can see some of
these groups cuz I mean for me it just
blew my mind it still blows my mind that
these people are getting together often
every week in their city
so here's Manchester Sao Paulo
Seoul Guangzhou Manila bueno Saturdays
Vienna Ho Chi Minh City also known as
Saigon Mexico City
Sydney Dhaka and at this point like more
and more people are using free coke
Kampf we were getting millions of people
coming to free coke camp and we became a
501 C 3 nonprofit which was always our
goal but it takes a long time to do that
in the United States so we got
tax-exempt status and people started
donating to us and so we had resources
to bring on a full-time team so I I
looked out and I chose for people in the
community who had been prolific
contributors who were already doing all
this work for free in their free time
and I said come on let's just get you
doing this full-time so here here the me
plus these four people these are the
people that run free cocaine for work so
free coke camp at its core is really
just a Content community we generate a
whole lot of learning content we're not
a technology company we're never going
to be like riding the bleeding edge we
don't want to be Facebook and have their
caliber engineering team necessarily we
just want stuff that works reliably that
helps people learn to code for free so
I'm gonna talk a little bit about the
different types of content we have
because that's very important to the jam
stack jam stack is in my opinion an
ideal platform for delivering tons of
content to tons of people so we have our
open source curriculum we have which is
powered by the jam stack we have the
free code camp guide which I'll talk
about in a minute also powered by the
jam stack we have tons of videos
articles podcasts and then we've got our
whole portfolio and certification
system so this is the curriculum it's
about 1800 hours worth of coding
challenges and I'll just go ahead and
show you what one of them looks like if
you're curious in case you haven't
checked one out yet so from the landing
page does it click curriculum I'll make
it a little bit bigger you can kind of
scroll through and and see we've got six
different certifications we've got the
the html/css certification responsive
web design we have a Java Script
algorithms and data structures which is
just JavaScript you don't have to mess
with any HTML or CSS you're just writing
algorithms and getting tests to pass
then we have front-end libraries that
covers you know react sass a couple
other popular libraries data
visualization a few guys and micro
services and information security and
quality assurance so you know we're
covering all the what I view the
fundamentals of web development all the
way up to some basic security and
testing and then we also have just
thousands of hours of interview prep if
anybody's going out and interviewing and
they want to be able to really do well
on the coding interviews like whiteboard
coding interviews and stuff you can
drill along here so that's the
curriculum and we'll just click through
into one of these challenges turn the
image into a link so you can see that
the interface is like super simple big
text and and you know you've got the the
instructions over here you've got the
coding editor
you've got the console for the output
and then you've got a preview of what
this HTML and CSS would render and if
you scroll down here you can run the
tests and it'll immediately tell you
pretty much instantaneously and one of
the reasons this is so fast is it it's
all running in the client this is a
static page and you can you know reset
your code if you want and you can get a
hint and that'll take you to the guide
article you can also watch a video and
I'm pretty proud of this because we just
implemented this I talked a lot about
freak
camp being very data light that's very
important for us we we have tons of
people in Africa South Asia places that
don't necessarily have the best data
plans and the best telecommunication
systems in the world you could
definitely argue that the 20% of
Americans that don't have broadband
could benefit from this as well so all
right so basically it's an or it's a
verbal explanation and you you can see
the cursor moving around and you can
this can be refreshed this code can be
changed if I go up here and say instead
of click let's say dinglehopper
here you know and then I can just resume
and I can refresh this and it should
automatically update so this is a cool
tool called Simba and this is not
something we personally built but it's
it's our friends in Scandinavia who are
building this project and it uses 1/100
of the data that a youtube video with
use 1/100 so it's 2 orders of magnitude
smaller I think if my understanding of
how my anythings work in math is right
so it's really cool it just it memorizes
like like it memorizes it
it logs like Dom elements in their
positions and stuff like that and then
it just has audio tracks so it it
renders all this in real time so this is
things like this the ability to click
ask for help and you go to the forum and
we've got like pre-populated template of
what you post in our forum so active
that generally people get an answer
within less than an hour even though
it's a forum and the assumption is it's
asynchronous so we've the coding
environment completely static completely
client-side you go here and it just
loads everything like the first the
first time you visit it just loads
everything up and then if you really
drill into like some of the later
challenges it may slightly sneak some
additional data in there
I'm not gonna open up the network and
inspect it but the idea is that it's
static and it immediately works and
everything's amazing even if you have a
horrible internet connection and there
are a whole lot of other advantages
which I'll talk about in a minute but
you've been hearing about all day so
we've got the curriculum this is the
core freako campus 1800 hours of
coursework you can earn certifications
if you complete the five required
projects for each certification you can
totally skip everything that's another
thing we wanted experienced developers
to be able to just parachute in and
complete the required projects which all
have their own test Suites and
everything you can build them anywhere
you can build on your local computer you
can build it on code pen glitch wherever
you just pull in our CDN link and you've
got the tests and everything and they'll
run against your code and once you get
all the tests passing boom go to freako
camp paste in the URL to your project
and you can claim the certification put
it on your LinkedIn or your CV so we've
got the certifications then we've got
like a portfolio essentially which is
just your activity on free code camp and
and we're working on a way that you can
add like a timeline of everywhere you've
worked and gone to school and also
additional projects you've done outside
of the free cooking of curriculum our
hope is that people don't have to sign
up for LinkedIn so then we have the free
code camp guide this is something we
just launched like a year ago completely
static 4500 articles served through the
jam stack like with Gatsby
so these cover these give you good
enough explanations on pretty much any
programming terminology or concepts you
might need you might hear about somebody
talking about for example kubernetes one
cubicle over you're like oh my god
imposter syndrome kicks in I know
nothing about kubernetes well you can go
to free code camps guide and you can
quickly pull up a quick and dirty
explanation it's not like Wikipedia
where it's like you know like an
academic treatment of the topic with
tons of outbound links and stuff like
that no it's just a good enough quick
and dirty explanation of the tool
showing some implementation and all this
is open source so people are constantly
contributing to these and expanding them
and making them better and so for
example freako camp is focused we have a
single monolithic curriculum as focus
full-stack javascript but a lot of
people wanted Java so we if people have
come in and contributed a ton of
articles and tutorials and stuff to our
Java section so the the core curriculum
is really the core of free kokum that's
what we certify and everything but we
also have a ton of video content here's
our YouTube channel you can see that we
just heard a great talk about graph QL
and how amazing it is and we've got a
seven and a half hour graph QL tutorial
that we published three weeks ago if you
want to watch like a video tutorial on
see it implemented and you may also
notice that at the top there's that code
radio with code radio what is it well we
have a 24/7 music stream that plays just
jazz beats and stuff that you can listen
to while you're while you're coding and
you see that about 164 people are
watching right now we have this cool
animation loop done by this Colombian
artist and that is based off Saran EDA
barik the founder of code newbie huge
hero of mine we got our information to
put her into a free code camp shirt and
put her into this animation so it's just
it's just a cool thing that you can go
to if you want to listen to some music
if you want to listen to something other
than you know what your normal Spotify
playlist is and then
we have also got you know the YouTube
channel thing about YouTube it takes
years and years of hard work to really
get the YouTube channel to take off
because YouTube's algorithms are very
suspicious at least in our experience so
we finally got it to take off so if you
ever create like a video tutorial and
you just want a whole lot of people to
see it feel free to like reach out to us
and we may be able to cross post it but
you can see there's no ads on our
YouTube channel everything free code
camp does is like no ads it's totally
free because we've got amazing donors to
support our project then we also have a
bunch of articles this is a 33 minute
tutorial on medium that talks about
kubernetes and how to orchestrate
containers this is pretty typical of the
sort of things we publish we publish a
lot of in-depth articles on different
tools and technologies and text is a
really good format for doing that
because you can have the commands and
everything medium is a great place to
publish we are very dependent on medium
I one of the things I'm going to talk
about in a minute is just not being so
platform dependent on YouTube and medium
but for now you know we've got the
biggest medium publication and we are
publishing thousands of articles a year
on there so it's a great place if you
write like an article on your blog and
you want to cross posted somewhere where
a lot of people see it
we've got submissions instructions we've
got a whole team of volunteer editors so
both the videos and the articles and the
podcasts are things that we'd like to
move over to the jam stack and we have
some ideas for how we would do that and
reduce our dependency on you know
YouTube's algorithms and mediums
algorithms and so we're working on it
I'm going to talk a little bit about our
tooling over the years so we we grew
very quickly and it was very painful
largely because I learned a code in my
30s and I have no formal computer
science background I always making
decisions pretty ad-hoc like over here
somebody at a hackerspace or meetup oh
why don't you try this okay let's try
that and you know you're doing it
production with tons of people using the
app and nasty stuff can happen so
version 1 I just put it up on Heroku and
I used em lab to host the database and I
use my friend saw hot he had this
boilerplate that already had passport
and a lot of the basic user interactions
like resetting you know everything so we
use that and we were essentially
dynamically rendering static content
because these were just click articles
that explain like go here and do this
and that so I think a lot of people
think that they need a web server to run
apps that are largely just content apps
just because they need like sessions and
stuff like that I certainly felt that we
needed that at the time and like our our
Heroku app would like crash and I didn't
even know about p.m. to or forever or
any of these libraries and I just be
running for meeting the meeting through
San Francisco streets and like I get a
text hey free coking it's down I'd like
navigate to Heroku and I'd like restart
the dyno I did that for like two or
three days before so he's like why don't
you try this this thing that recovers if
you your f crashes oh so a lot of
downtime version two I thought I was so
smart has anybody heard of second system
syndrome okay or also known as the
version to suck in some circles
basically you think all those things I
did wrong I'm gonna do I'm gonna fix all
of them and what happens you just do it
all over again but you do it usually in
a much more costly way so we were like
hey let's just do our own node servers
let's do our own MongoDB cluster let's
do our own elastic search we thought
we're smart we can figure it out and of
course it was expensive as heck things
were constantly crashing and I was up
till 3 a.m.
looking up Linux commands as a result of
my foolishness
so finally Jam stack that is where we
arrived and I'm so grateful to be on the
jam stack we now have a single node
loopback webserver it's basically just
our API server and M lab has been kind
enough to give us as an in-kind donation
like a cluster
that we can use our goalie has given us
search and we just use searches way
easier to configure algo Leah and have
it reliably work than to deal with
elasticsearch and then we're using auth0
for all our authentication and 6000 plus
static pages served through net low five
CDN so here's how it all works I'll just
try to describe it to the best of my
ability so we push code to github and
then that code gets built using Gatsby
which is a static site generator Gatsby
build it into a react app then natla Phi
serves that react at the end user opens
the browser they open free code camp
Torg that static react app that they
pulled from now Fi shows up and then
their browser goes ahead and reaches out
to auto and these other API endpoints
and figures out of zero will figure out
if they are if they're authenticated and
then it'll give them access to our API
have read and write access so then when
they complete challenges and things like
that so data starts getting written
through our API to our cluster so
we use the jambs tag for a number of
reasons first natla phi CDN is really
fast and it covers the entire world it
even covers you know like they've got a
very specific place for Pakistan and the
reason I know that is because we had a
short-term outage no no faults of
nullifies but basically that was when I
realized like wow how high-resolution
their CDN is because it was just a very
few people who were using a very
specific mobile carrier that were
affected but those people kept messaging
me like crazy and so the the fact that
it's globally distributed is great and
also by choosing this Jam stack
architecture there's very little latency
because you know almost all of the
requests are done in the background they
get this nice static page all the
contents already there and then just
some features are basically unlocked
through time as their browser has time
to complete these requests so the fact
that our web servers in Virginia
in that consequential if they're in
Pakistan okay so the second reason is
scaling how many people have ever built
like a web app and then gotten the
reddit death hug or producthunt death
hug or hacker news death hug okay so
it's it's not pleasant because people
are like oh I can't wait to check out
this amazing app this is the top of
hacker news oh it doesn't work noobs
that's what they think right and you're
just sitting there like no everybody's
getting like 500 errors and refreshing
repeatedly what just makes things worse
so yeah that's one of the reasons why
using jam stacks great because you're
relying on other people's really good
infrastructure and you know we offload
all the rendering to the clients so we
can have basically nothing in terms of
infrastructure another thing that is
really important is simplicity it's so
much simpler when you just load the
static pages and you're basically done
and their client starts doing everything
else and you know we can use github as a
collaboration tool for the content and
just have all the static files on github
in markdown I'm just gonna show you what
this looks like so this is our github
repository you'll note that there are a
lot of open pull requests apparently
after you get 5,000 open pull requests
github just says plus and the reason for
that is because we're participating in
October fest again I got my shirt who
here's doing hacks over fest raise your
hand okay you still have like two days
to get 500 requests into free code camp
or any repository that and you just have
to make the requests you don't have to
have the pull request qa2 emerged which
otherwise everybody'd be screwed because
there's no way we're gonna QA 11,000
pull requests by by tomorrow but the way
that we're handling this and the reason
why so many people are able to
productively contribute to free code
camp is we've dramatically lowered the
barriers to entry so for example we
we'll just come here and we'll look at
you know the guide and it's just right
here it's like really easy to traverse
these directories and know where you
need to go and you can go to let's let's
do the Chinese and then we'll just do
agile and then we'll do acceptance
testing and we'll look at the file and
here it is this this article on
acceptance testing translated into
simplified Chinese so anybody who wants
to edit this if they're like oh man he
used this weird word that I would never
use I'm just gonna go in here and make
it clear they just click Edit this file
and boom they're editing in the markdown
they can preview the changes and then
they can go ahead and commit and open up
or request right through github x'
interface without even needing to clone
the repo and get it all running locally
and everything it's just dramatically
reduces the barriers so that's really
important for us because we'd like for
free code camp to grow to be as big as
Wikipedia at least the technology
related aspects of Wikipedia and the
only way we're gonna get there we're not
gonna get there with a five person team
we're gonna get there with tens of
thousands of contributors so that that's
really like a big thing that we're
working on is just increasing the
accessibility of coding and contributing
to open source itself in hex our first
great opportunity to do that and have
somebody else pay to ship all the
t-shirts so reason number four security
when your app is super simple it just
means there are fewer things that can go
wrong fewer things to keep track of your
attack surfaces we have a single API
that we need to safeguard it's I don't
lose sleep over security like I used to
when we had all our own infrastructure
so some ways we're going to use the jam
stack we're going to finish the
internationalization process if you know
we've already translated into Arabic
Chinese Russian Portuguese Spanish those
languages plus English that's like
three-quarters of the Earth's population
can now learn on free code camp in their
native language that really reduces the
barriers and increases the access we're
also trying
to reduce our dependence on on platforms
like YouTube and medium by having our
own freako camp news and I've been
publishing on freako camp news myself
for a while but we're gonna open it up
to where anybody in the community can
cross post from their blogs places like
that and then our editor team can go in
and say hey this is a really great
article or this is a really great
podcast episode whatever the content
happens to be that they post it and they
can basically bump that up to the top so
everybody on freako camped at work can
see that and be like oh let's check this
out so it's kind of like an editorial
like human curated news feed and then
really like jam stack set you up pretty
nicely for doing an offline app because
you know static files you can
potentially load those onto a Raspberry
Pi you can load a lot of the
functionality and our dream is to get
free code camp and a whole lot of other
creative commons content and open source
content put it on a raspberry pi's and
just ship it to schools in the
developing world so that people who
don't necessarily have access to you
know stable electricity they have
periodic outages throughout the day can
just load it up we also have people and
you know people who can't get internet
access we have a number of prisons in
the United States that use free code
camp is there curricula and so inmates
learn free code camp they don't have the
right to get on the internet but they
can still learn to code using free code
camp so right now they're doing that on
a local area network if we get these on
raspberry PI's it'll be way easier for
those people to learn skills so when
they get out they'll be able to have a
productive career and have marketable
skills so there are a number of things
that we're doing that are related to the
jam stack we're super jazzed about the
jam stack as I could tell pretty much
everybody here is certainly all the
people up on stage so I would definitely
encourage you all if you're interested
in participating in the act over Fest
you still have a couple days left if you
have questions about how you can
contribute your skills and your talents
to the free code camp community and help
millions of people around the world
learn to code just DM me on Twitter I've
got open gems and enjoy jam stay calm
[Applause]
[Music]
[Applause]
[Music]