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 in the contribution.
Just put the video ID.
The system itself knows to make the YouTube video
URL out of just the video ID.
There's probably some other small details.
In theory, those things are covered here under See How.
If I click on See How, this is a guide to everything
that I just showed you, and you can
see the actual format of how to put in your contribution,
and how to create a pull request.
But this is also something you could edit and offer
contributions to, if there are things missing from this guide,
or leave them in the comments of this video itself.
So thank you very much for watching this quick tutorial
about submitting your own community contribution
to thecodingtrain.com website.
I hope this encourages you to submit yours.
Don't be shy.
Don't be afraid.
We're here to welcome you in, with open arms and rainbows
and unicorns, to try.
If this is your first time using GitHub,
this is a great way for you to give that a try
and see how it goes.
So thanks so much, and look forward
to seeing you in a future coding challenge,
and having your contribution on thecodingtrain.com website.
Bye-bye.