Hackathon: Fork the Project

[00:00:00]
>> Now, the fun begins. I have been promising you hackathon time this whole time. And now we're here, we are on the hack side. And so the idea now is we've covered this is this Meme-Me repo is essentially a review or a recap with a couple little extra bits and bobs of all the stuff that we have covered so far.

[00:00:29]
But now, your mission, should you choose to accept it, is to take this starter package of the Meme-Me project and have at it with whatever other stuff you would like to make it do. So we're gonna take some time to be able to hack on this at our leisure, but here's the basic flow.

[00:00:53]
We're now gonna start using GitHub's features for open source collaboration. And this is the same thing that would happen if, let's say, you notice a bug in Vite, and you want to help the Vite team fix it, you would do essentially the same thing that we're about to do here.

[00:01:11]
So in case we haven't worked with this before, what I'll ask y'all to do is go to my repo, so github.com/vakilla/meme-me. And now instead of doing what we might be used to doing of cloning this and it might it might give you this command or downloading, we're not gonna do [LAUGH] that.

[00:01:32]
Instead we're gonna go to this fork button up here. You should see a fork button and I have been forked this, yeah, cuz it's my own repository. But if you click fork, it will basically give you the same interface as creating a new repo except this repo that you're about to create, which will be in, so in my case, I have a few different GitHub organizations I'm involved with, we're not gonna worry about that.

[00:02:00]
You perhaps only have one, but in any case, this is probably in your personal Github unless you want your boss to also have Meme-Me now as part of your company's product offering. But [LAUGH] the idea is that you'll choose yourself. So in this case, well, I can't choose myself cuz I already have this repo but, you'll be able to choose your name.

[00:02:22]
You can rename the repo if you want, you don't have to. You can give it a new description, you can copy the main branch because I don't think I have any other branches, I'm [LAUGH] not sure. And when you click Create Fork, which I'm not able to do right now cuz I'm not gonna put it in one of the other organizations, you will get now your own GitHub repo that is a forked repo.

[00:02:44]
So it points back to my repo as the, what's called, upstream repository. But now, essentially, you can develop the same way as we did in our SelfieCam project. You can develop and deploy and do all of your stuff In your fork and make it your own fork in the road like take it in a different direction than my project and make your own silly memefying app.

[00:03:16]
Although it's not that silly, there are entire websites that people use all the time to make these custom memes. And now we have one so we can have like tate like me memes. I mean I don't have to use the poos and things all over the place. We need the poo [LAUGH] or otherwise or drake or whoever I can just recreate all of my memes and make people look at my silly face.

[00:03:42]
Okay, so that is the challenge. And now the question is, what would you like to do with this project? You can do whatever you want. And I am very much looking forward to seeing what you all come up with. But in case you need a little Creative Jumpstart, we could make ourselves a kind of little feature or wish list of things that we would like to have.

[00:04:07]
So here are some ideas that I would love to see. For example, the text is always in the exact same place and it's not centered or anything. And some memes have different text placement, right, like the handshake meme with the arms. Anyway, so maybe you wanns allow your users to choose where the text goes.

[00:04:29]
Maybe you want to give them more pieces of text on the screen. Maybe you wanna give them additional fonts and not force them to use impact. Maybe you wanna be able to set different colors for the text, what have you. Or maybe you wanna even do some digging in the Canvas and MDN docs and figure out how to put filters on the image.

[00:04:52]
Which if you've worked with CSS filters, maybe you want a black and white selfie instead of a colorful one. Or a sepia tone or an inversion to do like, everything's bananas meme. Anyway, maybe you want to be able to add some emoji like a shades on the memes.

[00:05:14]
Maybe you want there to be a Share button so you can like yeah Generate a link to go [LAUGH] to your Twitter account and share the image. Anything else that we can think of is fair game here. So do folks have any other ideas of stuff that maybe they will or won't do, but that they might do, one could think of this app have it.

[00:05:37]
Yeah?
>> I was going to, cause this is the right click, well, at least in Safari, the right-click on the Canvas and save the image didn't really work.
>> Doesn't work? Okay, gotcha.
>> So I was gonna see, I was looking up to see if there's a way to take Canvas and save it to an actual image, and then hit a download link.

[00:05:52]
>> A download button, yeah, or a link, yeah, totally. Absolutely useful, yes, fabulous. Any other ideas? Just to get our imaginations going? In the chat, do we have any?
>> Post it to social media.
>> Yeah, exactly. Yeah, If we can figure out how to programmatically get that image data.

[00:06:14]
And then, perhaps one of our favorite social media sites, has some information or had programmatically send a request with the right info to your account?
>> There's like a share web API, I think.
>> And this is where we're gonna just have to start digging on the interwebs and looking for Stack Overflow answers or blog posts that explain how to do stuff or whatever.

[00:06:41]
So at this point it's really we've opened up into the wide world of web development. Especially when you're working on pet projects and it's not that your boss is specifying that you have to use certain tools or do a certain thing. And really, sky's the limit here.