Placeholder Image

字幕表 動画を再生する

  • Let's let's get Quincy appear.

  • We're so delighted that we could convince Quincy Larson to come and speak today.

  • Quincy's bean 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 meet many people assistant, higher community that sprung up in its huge and free 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, uh we should welcome Quincy onto the stage.

  • So everyone Quincy lesson.

  • Thanks, Phil.

  • Hey, everyone.

  • I'm just gonna make sure that everything works.

  • Okay.

  • Uh, first of all, welcome.

  • I hope you all are enjoying the jam.

  • Said calm 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 freak oh, Camp uses the jam stack to serve millions of people around the world who are learning to code first.

  • I'm gonna talk about the history of freak.

  • Oh, camp and our tooling over the years and how we gradually converged on jam Stack is we want to do things.

  • Then I'm gonna talk a little bit about why we chose the jam stack.

  • And some of the new ways were applying the jam stack.

  • So first, who hear his herd of free cocaine before?

  • Okay, how many people have read like a freak?

  • Oh, Camp article Or watch the video on YouTube channel.

  • How many people have used the freak?

  • Oh, camp curriculum itself and the interactive coding challenges.

  • Okay, quite a few.

  • Great.

  • Um, So what is free Coke 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 freak O 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 Oakland who can learn to code at a public library.

  • So we want everything to be browser based.

  • We wanted 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 a coat.

  • So making everything browser based, self paced, importantly, completely free allows the maximum number of people to learn to code and makes it possible for everybody to harness thes 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 freak okay, back in 2014 I had this, you know, it kind of pretentious, I think quote.

  • But it's from Lausa and I'm a huge.

  • I spent 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 the 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 teaching staff be more productive so they could spend less time change of their desk, doing immigration, paperwork and great reports and more time actually interacting with the learners.

  • So I just Googled around and figured out how to write Excel, Mac Rose.

  • I figured out how to use this tool called auto hockey toe like programmatically click through government forms and things like that.

  • OK, hockey fans.

  • Great.

  • So, um, that was my introduction to coating it in my thirties.

  • Um, and once I realized what an impact, just a little bit of programming capability had I decided I needed to help his many people learn to code as possible, not just the next generation who are getting millions of dollars in funding from the billing Melinda Gates Foundation and things like that, but but working adults who already mid career we wanted a resource that they could use.

  • So, uh, I iterated for about two years on different adult education technology products, essentially and eventually, uh, I simplified everything down and one very aggressive sprint in my closet office and I got a freak.

  • Oh, Camp live after about three days for hard work, shut out to the noun project for this landing stage, But, uh, 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.

  • Resource is we were using a lot of Stanford courses M I t courses, and we'd all work through these together and we just keep each other motivated and help each other get unstuck and chat.

  • And eventually people started getting jobs.

  • And here's a snapshot from Arlington Alumni Association.

  • We got almost 54,000 people people working at I B M X censured ta tah, Amazon, Microsoft and Ella Google.

  • So these people would turn around and they'd apply the skills they just learned and help improve freak Oh, camp itself so very quickly free Coke camp went from just being basically a list of resource is to being a full fledged interactive curriculum, and we became, like a legitimate, fairly respectable, respectable open source project.

  • And, uh, we also had a whole bunch of people create free cocaine 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 him so you can see some of these groups because, 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 he was Manchester, Sao Paulo.

  • So Guangzhou Manila, When a side is Vienna, what you mean city also known as Saigon, Mexico City, Sydney, Dhaka.

  • And at this point, like more and more people are using freak Oh, camp.

  • We were getting millions of people coming to freak.

  • Oh, camp and we became a five, a one c three 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.

  • Resource is too bring on a full time team.

  • So I I looked out and I chose four people in the community who had been prolific contributors who were already doing all this work for free and 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 co came to work.

  • So freak, Oh, 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.

  • Uh, 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.

  • James 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, which is powered by the jam stack.

  • We have the freak Oh, Camp Guide, which we'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.

  • Um, and I'll just go ahead and tell you what one looks like if you're curious, in case you haven't checked one out yet.

  • Um, so from the landing page was a click.

  • Curriculum will make it a little bit bigger.

  • You kind of scroll through and see.

  • We've got six different certifications.

  • We've got the the HTML CIA says Certification Responsible design.

  • We have a Java script, algorithms and data structures, which is just Java script.

  • You don't have to mess with any a similar CSS.

  • You're just writing out rhythms and getting tested.

  • Pass.

  • Then we have front and libraries that covers react sas.

  • A couple other popular library's data visualization if he dies in micro surfaces and information security in 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 interviewing and they want to be ableto really do well on the coding interviews like whiteboard, coating interviews and stuff, you can drill on here.

  • So that's the curriculum.

  • And we'll just click through into one of these challenges turning image into a link so you can see that the interface is like super simple, Big Tex.

  • And, uh, you know, you've got the the instructions over here.

  • You've got the coding editor.

  • You got the consul for the output, and then you've got a preview of what this html CSS would render.

  • And, uh, if you scroll down here, you can run the tests and it will immediately tell you pretty much instantaneously, Uh, and one of the reasons this is so fast, is it?

  • It's all running in the client.

  • This is a static page.

  • Um, and you can, uh, you know, reset your code if you want, and you can get a hint.

  • Um, 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 talk a lot about freak.

  • Oh, camp being very data light.

  • That's very important for us.

  • 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 is well so, um, images can be links.

  • If you look at this browser here, there's an image, and it's not currently a link, but we can make it into a link by nesting.

  • All right, so basically, it's a 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.

  • Uh, if I go up here and say, um, instead of click, let's say Dingle Hopper here, you know, and then I could just, uh, resume, and I can refresh this and it should automatically update.

  • So this is a cool tool called scrim ba, and this is not something we personally built.

  • But it's our friends in Scandinavia who are building this project, and it uses 1 1/100 off the data that a YouTube video would use 1 1/100 So it's two orders of magnitude smaller, I think, if my understanding, how mind if he's working Matthews.

  • Right?

  • So, um, it's really cool.

  • It just it memorizes like like it memorizes it Logs like dom elements in their positions and stuff like that.

  • And then it just has audio track.

  • So it renders all this in real time s.

  • Oh, this is, uh, things like this, the ability to click ask for help and you go to the Forum and we've got a 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 visited just loads everything up.

  • And then if you really drill into the like, some of the later challenges may slightly sneak some additional data in there, I'm not gonna open up the network and inspect it.

  • But, uh, the idea is that it's static and it immediately works.

  • And everything is amazing, even if you have, ah, horrible Internet connection.

  • And there are a whole lot of other advantages which I'll talk about the minute that you've been hearing about all day.

  • Um, so we've got the curriculum.

  • This is the core of freak.

  • Oh, camps.

  • 1800 hours.

  • Of course work.

  • You can earn certifications if you complete the five required projects for each certification, you can totally skipper.

  • That's another thing.

  • We want to experience developers to be able to just parachute in and complete the required projects, which all have their own test sweets and everything.

  • You can build them anywhere you can build on your local computer.

  • You could build it on code pen glitch.

  • Wherever you just pull in our CD in Lincoln, you've got the tests and everything and run against your code.

  • And once you get all the test passing, boom, go toe freak.

  • Oh, 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 freak.

  • Oh, camp.

  • And we're working on a way that you can add, like a time line of everywhere you've worked and going to school and also additional projects you've done outside of the freak.

  • Okay, create our hope is that people don't have to sign for Lincoln.

  • So then we have the free cocaine 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 toe freak.

  • Oh, 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 of people are constantly contributing to these and expanding them and making them better.

  • Um And so, for example, free cocaine is focused.

  • We have a single monolithic curriculum this focus on full stack JavaScript.

  • But a lot of people want a job.

  • So we people have come in and contributed a ton of articles and tutorials and stuff your Java section.

  • So the core curriculum is really the core of free cocaine.

  • 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 Graphic UL and how amazing it is.

  • We've got a 7.5 hour graft.

  • You all territorial We published three weeks ago, if you wanna watch like a video tutorial on seeing implemented, Um, and you meant also noticed that at the top there's that code radio with code radio.

  • What is it?

  • Well, we have a 24 7 music stream that place just jazz beats and stuff that you can listen to.

  • Why your what?

  • Your coding.

  • And you see that about 164 people are watching right now we have this cool animation loop done by this Colombian artist, And, uh, that is based off Ceron Barak, the founder of movie huge hero of mine.

  • We got her permission to put her into a freak Oh, camp shirt and put her end of this animation.

  • So, um, it's just it's just a cool thing that you can go, too, if you want, um to listen, this music, if you want to listen to something other than, uh you know what your normal Spotify playlists is, um And then we have also got ah, 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 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 Coke camp does is like no ads is totally free because we've got amazing donors.

  • He supports our project, then we also have a bunch of articles.

  • This is a 33 minute tutorial on medium that talks about communities and howto orchestrate containers.

  • This is pretty typical of the sort of things republish we publish a lot of in depth articles on different tools and technologies and Texas a really good format for doing that because you can have a command and everything mediums a great place to publish.

  • We are very dependent on medium.

  • Uh, I One of the things I'm gonna talk about it a minute is just not being so platform dependent on YouTube and medium.

  • But, uh, for now, you know, we've got the biggest medium publication.

  • Uh, 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 block and you wanna 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 YouTube's algorithms and mediums algorithms.

  • And, um so we're working on it.

  • I'm gonna talk a little bit about are tooling over the years.

  • So we've We grew very quickly, and it was very painful largely because I learned a code in my thirties and I have no formal computer science background.

  • I always making decisions pretty at Hawk like over here, somebody at a hacker's face or Ah, meet up.

  • Oh, what, did you try this?

  • Okay, let's try that.

  • And you know you're doing it in production with tons of people using the app and nasty stuff can happen.

  • Eso version one.

  • I just put it up on her Roku and I use them lab toe host the database.

  • And I used my friend so hot he had this boilerplate that already had a passport and a lot of basic user inter interactions like resetting email everything.

  • So we used that, um and we were essentially dynamically rendering static content because these were just quick 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 absolutely largely just content.

  • Perhaps just because they need, like, sessions and stuff like that.

  • Uh, I certainly felt that we needed that at the time.

  • And like our our Roku app would like crash.

  • And I didn't even know about P m to or forever any of these libraries.

  • And I'd just be running from meeting to meeting through San Francisco streets and, like, I get a text.

  • Hey, Free Cocaine's down.

  • I'd like navigato Hiroko and I'd like restart the dino.

  • I did that for, like, two or three days for some things.

  • Like, Why don't you try this This thing that that recovers if you have crashes.

  • So a lot of downtime.

  • Um, version, too.

  • 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're like, Hey, let's just do our own note servers.

  • Look through our own monger TV cluster.

  • Let's do our own elasticsearch.

  • 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 Lennox 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 loop back.

  • Web server is basically just our FBI server and M lab, uh, has been kind enough to give us an in kind donation like a cluster that we can use.

  • Al Goalie has given us search, and we just use search is way easier to configure out Goldie and haven't reliably work than to deal with Elasticsearch.

  • And then we're using off zero for all our authentication and 6000 plus static pages served through metal.

  • If I see the end.

  • 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 get home and then that code gets built using Gatsby, which is Ah, sad excite generator Gatsby, build it into a react app, then net lif I serves that react at the end.

  • User opens their browser.

  • They opened freak Oh, camp dot or GE that aesthetic, uh, react app that they pulled from nullify shows up and then their browser goes ahead and reaches out.

  • Toe off, though, and these other AP, I am points and figures out off zero, we'll figure out if they are, um, if they're authenticated, and then it will give them access to our FBI reading right access.

  • So then when they complete challenges and things like that data starts getting written through our A p I to our mongo cluster.

  • So we use the jam sack for a number of reasons.

  • First nullify CD in is really fast, and it covers the entire world.

  • It even covers, you know, like they've got a very specific place for Pakistan on the reason I know that is because we had a short term around.

  • No, no faults of nullifies.

  • But basically that was when I realized, like, Wow, how high resolution they're 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 you like crazy on And so the fact that it's globally distributed is great.

  • And also by choosing this jams architecture.

  • There's very little Leighton see, 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 isn't 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 product hunt, Death Hug or Hacker news.

  • Death Hug.

  • Okay, so it's not pleasant because people were like, Oh, I can't wait to check out this amazing app.

  • This is the top of hacker news.

  • Oh, it doesn't work.

  • Nub's, that's what they think right on.

  • And you're just sitting there like no, everybody's getting like 500 airs.

  • And refreshing repeatedly, which just makes things worse.

  • Um, so yeah, that's one of the reasons why using the jam stacks great, because you're relying on other people's really good infrastructure and, uh, you know, we offload all the rendering of the client 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, uh, you know, we can use get hub as a collaboration tool for the content and just have all the static files on get have been marked on.

  • I'm just gonna show you what this looks like.

  • So this is our get up depository.

  • Um, you'll note that there are a lot of open pull requests, apparently, after you get 5000 open pull requests, get up.

  • Just says plus, um And the reason for that is because we're participating in October fest again.

  • I got my shirt.

  • Um, who here is doing hacksaw professed Raise your hand.

  • Okay.

  • You still have, like, two days to get 54 requests into freak Oh, camp or any repositories that, uh, you just have to make the four quest.

  • You don't have to have the poor request.

  • Q eight emerged which otherwise everybody be screwed because there's no way we're gonna que es 11,000 pull requests by tomorrow.

  • Um, but, uh, the way that we're handling this and the reason why so many people are able to productively contribute to freak oh, camp is we've dramatically lowered the bears 10 tree.

  • So, for example, we will 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 could go to let's let's do the Chinese And then we'll just do a Joe 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 there anything the mark down.

  • They can preview the changes, and then they can go ahead and commit, uh, and open a poor request right through get hubs interface without even needing to clone the repo and get it all running locally.

  • and everything is just dramatically reduces the barriers.

  • So that's really important for us because we'd like, for free co camp to grow to be his biggest 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, um, 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 and Octoberfest Great opportunity to do that and have somebody else paid a ship.

  • All the T shirts.

  • So, um, reason number four security when your app is super simple, it just means there are fewer things that could go wrong.

  • Fewer things to keep track of your attack surfaces.

  • We have a single FBI that we need to safeguard its I don't lose sleep over security like I used to when we had all our own infrastructure.

  • So some ways we're gonna use the damn sack, we're going to finish the internationalization process.

  • Uh, if you know, we've already translated into Arabic, Chinese, Russian, Portuguese, Spanish, those languages, plus English.

  • That's like 3/4 of the Earth's population can now learn on freak Oh, camp in their native language, that really reduces the barriers and increases the accidents.

  • We're also trying to to reduce our dependence on platforms like YouTube and, uh, medium by having our own freak.

  • Oh, Camp news.

  • And I've been publishing on freak oh, Cam news myself for a while, but we're gonna open it up to where anybody in the community can cross post from their blog's place like that.

  • And then our editor team can't go in and say, Hey, this is a really great article.

  • This is a really great podcast episode.

  • Whatever the content happens to be that they posted and like and basically bump that up to the top.

  • So everybody on free cocaine that work can see that and be like, Yo, let's check this out.

  • So it's kind of like an editorial like human curated news feed, Um, and then really, like Jam stack set you up pretty nicely for doing an offline app.

  • Because, you know, Sadiq 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 Coke camp in a whole lot of other Creative Commons content and open source content, put it on a raspberry pies and just shifted to schools in the developing world so that people who don't necessarily have access to stable electricity they have periodic outages throughout the day.

  • Uh, can just load it up.

  • We also have people in, you know, people who can't get Internet access.

  • We have a number of prisons in the United States that use freak.

  • Oh, camp is their curricula.

  • And so inmates learn freak.

  • Oh, camp.

  • They don't have the right to get on the Internet, but they can still learn to code using freak Oh, camp.

  • So right now they're doing that in a local area network.

  • If we get these on, raspberry pies will be way easier for those people toe learn skills.

  • So when they get out, they'll be ableto have, ah, productive career, have marketable skills.

  • So there are a number of things that we're doing that are related to the jam sack.

  • Were super jazz about the jam stack.

  • As I can 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 or officially still have a couple days left.

  • If you have questions about how you can contribute your skills and your talents to the free Coke camp community and help millions of people around the world learn to code just d M E on Twitter, I've got open the EMS and, uh, enjoy jams.

Let's let's get Quincy appear.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

freeCodeCampがJAMstackを使って何百万人もの学習者にサービスを提供する方法 (How freeCodeCamp Serves Millions of Learners Using the JAMstack)

  • 2 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語