Placeholder Image

Subtitles section Play video

  • Hello, and welcome to a quick tutorial

  • on how to submit your own project to the contributions

  • on thecodingtrain.com.

  • So at thecodingtrain.com, on the home page,

  • you'll find the most recent coding challenge.

  • And then, if you click on Coding Challenges,

  • you'll find all the coding challenges that I've done.

  • And each one of those has an individual page,

  • with a description, the video, a list of links of things,

  • all the source code with p5 Web Editor,

  • or on GitHub, as well as, here it is, my favorite part,

  • the list of things that other people have made

  • in response, as creative versions, or twists,

  • or improvements on the thing that I

  • coded in the video itself.

  • So if you're wondering how you can submit yours,

  • I'm going to show you how to do that.

  • So let's pick, arbitrarily, not so arbitrarily,

  • the 10Print coding challenge.

  • It's the one that happens to have the most community

  • contributions.

  • Let's see if we can get another one to beat that record, maybe.

  • And I'm going to walk you through the steps.

  • I'm going to make my own little twist on it, change the code,

  • and then submit my own version to it.

  • So here I am on the 10Print coding challenge page.

  • I've got the description.

  • I've got links described in the videos.

  • And then here, look at all of these community contributions.

  • Awesome.

  • So there's a link here to add your own version.

  • I'm going to go to that, with some instructions.

  • You could just look at that.

  • But I, instead, am going to try to walk you

  • through the process.

  • So the first thing I need to do is make my own version.

  • Presumably, you've already made yours.

  • But I'm going to go to View Code, Web Editor.

  • Click on that, and I'm going to play it,

  • and quickly just make some changes.

  • So there you go.

  • This is my variation of the 10Print coding challenge,

  • where, instead of drawing a line forward or backward,

  • I've drawn a circle, and I have filled it white

  • or filled it black.

  • So now that I've made this project and then save it,

  • I've got the link to it, I'm going to go over here

  • to Coding Train, and I'm going to click

  • on Add Your Own Version.

  • So I'm going to click on that.

  • It's going to take me to this strange page.

  • Oh, what's the deal with this page?

  • The format for this page is something

  • called YAML, which stands for Yet Another Markup

  • Language, seriously.

  • And you can see here, this is the metadata associated

  • with this coding challenge.

  • It has a title, of the number of the challenge, the date it

  • was recorded, the video ID, which is its YouTube video ID.

  • That's where the source code is.

  • That's the p5 Web Editor.

  • These are various links.

  • And what's most important here is Contributions.

  • So this is the part that you need to edit.

  • And I would suggest that you just put yours at the end.

  • You could slot it in wherever you want.

  • You could put it first.

  • I guess there's no actual system for this.

  • But in terms of where I would ask you to put it,

  • I think it makes sense to have these somewhat in order

  • of contribution.

  • So I'm going to go all the way to the end.

  • And the easiest thing for me to do

  • is to simply copy paste one of these contributions, which

  • has four fields in it: title, author, URL, source.

  • So I'm going to copy paste this.

  • And then I'm going to paste it below.

  • Now I just realized, you might be asking

  • kind of an important question.

  • Where am I?

  • Where am I editing this?

  • What's Going on?

  • So this is actually the GitHub website.

  • You'll notice this is a URL on GitHub.com.

  • GitHub is a website for hosting Git repositories.

  • A Git repository is a collection of documents

  • with a history of all the versions of those documents,

  • mostly used for tracking the history of a source

  • code related project.

  • I would refer you to my videos on Git and GitHub.

  • I have a whole series, about 10 to 15 videos, that kind of like

  • talk more about the dot, the Git software and the GitHub website

  • itself.

  • S if that's unfamiliar to you, you

  • might go back and look at those.

  • But you don't actually need to know anything,

  • you don't need to know all those details to submit

  • your contribution.

  • You just need to be able to follow these steps.

  • However, these steps will only work

  • if you have a GitHub account.

  • So if you don't already have a GitHub account,

  • you will need to sign up and be logged in for this to work.

  • So once you've done that, I'm going to go down here.

  • I'm going to add mine.

  • Let's change the title to Coding Train Demo Contribution.

  • The author is me, Daniel Sheefmahhnnn.

  • And then, now it's time for the URLs.

  • So I'm going to consider, I'm going to go under Share.

  • I'm going to consider, and again, yours might not

  • be a p5 Web Editor sketch.

  • Might just be a website.

  • It might be a Git repository.

  • It could be anything.

  • But you just need a link to your documentation of the project.

  • So I'm going to pick this full screen one, whoops,

  • which is this.

  • And I am going to, where was I?

  • I'm going to paste that in here.

  • Then I am going to go back here, and I'm just

  • going to do the Editor View, which is that,

  • and I'm going to paste that in here.

  • And then, one thing I'm going to do

  • is, I'm going to automatically make a mistake.

  • Because it's very common that you'll miss something up.

  • So for example, what if I forget the quotes here?

  • I'm going to make another mistake.

  • I'm going to add like a couple of extra spaces here,

  • and I'm going to have this have an extra space here.

  • So I'm going to make those mistakes on purpose.

  • 10Print Contribution, circles instead of lines.

  • Now here's the other important thing

  • that I would really like you to do.

  • When reviewing these pull requests,

  • it's really nice that there's a link

  • to the project in this optional extended description.

  • It makes it really easy to click and see what you made,

  • and it lets me see them much more easily,

  • so I know what to share, and just be able to react to it.

  • So I would ask that you add a link to it here.

  • Link to demo here.

  • So I'm going to go back to here.

  • I'm going to go under Share, I'm going to click this,

  • and I'm going to click this.

  • Now, then, this is the option now.

  • It will say you cannot commit to the master branch.

  • But I want to go to Create a new branch for this commit,

  • and start a pull request.

  • A pull request is a term that refers to asking me,

  • or not me in particular, but the Coding Train website,

  • to pull your new changes in, to pull your submission in.

  • So I'm going to call this Schiffman-10Print-contribu--

  • Just Schiffman-10Print.

  • I'm going to hit Commit Changes.

  • Now you can see, this is now, then the last step

  • here, open a pull request.

  • And it's pretty much filled in for me now,

  • because it took the commit description in here.

  • So I'm just going to click Create Pull Request.

  • And then here is the next really important thing.

  • And we're going to wait for this to run.

  • I should say what's running here.

  • This is what's known as a unit test is running,

  • and it's running via continuous integration

  • on a service called CircleCI.

  • So I actually have a whole set of video tutorials

  • also on unit testing and continuous integration

  • that you can check out.

  • But what it's doing is, it's checking the syntax

  • of your contribution, to make sure there

  • are no formatting mistakes in it, or no missing required data

  • pieces.

  • And well, it came back now.

  • All checks have failed, meaning there's an error.

  • So this is something that helps you,

  • when you make your submission, know

  • whether it was done correctly.

  • And this is so sort of off-putting

  • to have this big red X. And you feel so terrible,

  • like oh, my submission was wrong,

  • and the test didn't pass.

  • No, no, no.

  • Feel good about yourself, that you stretched and made

  • an attempt, and tried to submit a pull request.

  • Maybe it was your first pull request on Github.

  • It doesn't matter that the check failed.

  • It's just the computer checking it.

  • You can now make some edits, or you could ask for help.

  • The Coding Train community is here on GitHub

  • to help you fix it up and make sure your submission goes

  • in correctly.

  • But knowing that the test failed is a bit

  • of extra information for you.

  • So I could actually go click here on Details .

  • Scrolling all the way down through all the tests,

  • we can get to the end, and I can zoom in.

  • It says, "Extra space at the end of this line: URL editor."

  • So you can see, this is the error.

  • This is, and this is the error I need to fix.

  • Unfortunately, it just finds the first error,

  • and hasn't necessarily found all the errors.

  • But I can go back now to my pull request,

  • I can click on Files Changed, I can

  • go here and click on Edit File, and I can go back,

  • and I'm going to just fix all these things.

  • So I'm going to get rid of this.

  • I'm going to put the quotes around here.

  • Where did I have this?

  • Oh I have extra spaces here.

  • I'm going to click on those, and I'm

  • going to say commit directly to the Schiffman-10Print branch.

  • That's going to add those changes to the pull request.

  • I'm going to hit Commit Changes.

  • And now, if I go back to Conversation,

  • we can see the unit tests are running again.

  • And let's hope they work this time.

  • There you go.

  • All checks have passed.

  • This branch has no conflicts with the base branch.

  • Merging can be performed automatically.

  • Merging is the act of accepting that pull request,

  • and merging the changes with the current web site's source code.

  • So you won't actually see this button, squash and merge.

  • And by the way, if you're wonder what squash means,

  • it means this pull request has two commits, two

  • separate straight changes, and squash will squash both those

  • into one.

  • So it just cleans up the history of the project,

  • because we don't actually need to separate these two

  • things out in the grand history of things,

  • even though they are two separate changes

  • for this request.

  • So you won't see this, because you most likely are not

  • an administrator of the Coding Train website,

  • and you will wait for somebody here to press that button.

  • And once it's done, you will see,

  • and I'm going to do that now.

  • Once that's done, all I do is go back

  • to thecodingtrain.com website, and I hit refresh.

  • Hit refresh, and there it is!

  • My Coding Train demo contribution

  • by Daniel Sheefmahhnnn is there.

  • And if I click on this, it will take me over to,

  • there's my contribution.

  • If I click on Source Code, it will take me over

  • to the source code page.

  • So I should point out, I'm just showing you,

  • my contribution happened to be a p5 web editor sketch.

  • But what you might want to link to could be a YouTube video.

  • It could be just a full website.

  • It could be a blog post.

  • It could be anything you want.

  • One quick gotcha is that for things that are YouTube videos.

  • Don't put the full URL to your YouTube

  • video