Monday Monday open wide dev fans get ready to stuff your face with JavaScript CSS no module barbecue tip get workflows Break dancing soft skill web development the hcs the karaisius the tastiest web development treats coming in hot Here is where's Barracuda boss and Scott El Taroloko Tallitsky Welcome to syntax on this Monday. Hey, hey, see treat. We're gonna be talking about GitHub actions GitHub actions We're going to explain them what they're here for and you probably got an access to them recently if you're on GitHub And we're gonna talk a little bit about what they do and why you might be interested in that money in a scot Alinsky on a developer from Denver, Colorado and with me as always as West boss Hey, everybody. Hey, Wes this episode is sponsored by log rocket one of our favorite sponsors over here at syntax We love log rocket because what they do is they make solving your bugs so much easier by giving you a Reducible video that you can watch as you click around and does this thing and breaks your site You might be getting some reports or perhaps you're using another error an exception handling tool or perhaps you just logged into your log rocket And saw that there was a bug happening and you wanted to know why and so you can click that video and you can see the Network activity you can see that council logs and error logs You can see just absolute pixel perfect video what the user saw you can even screw up through it And it's really cool.
It puts a little uh timeline markers in the little timeline there to show you when events haven't Scott's doing lots of hand gestures Right now. I'm just taking like crazy right now Karate chopping over here and the honor of GitHub actions I'm doing some chops and let me tell you this is one of those tools that really saves your bacon because how are you gonna know how a User managed to goof up things users can like find the craziest ways to goof up things on your site You turn your back and all of a sudden the headers upside down and the footers where the headers should be and their arm broke somehow And you got to figure out how the heck they did that. How did they break their arm using your website? Well, this thing will help you figure that out So check it out at log rocket dot com forward slash syntax and you will get 14 days for free This is a service I use and love over here.
I love love tutorials. So check it out at log rocket dot com forward slash syntax All right, GitHub actions. You want to get into it? What do you want to say?
What is GitHub actions? What are they? Yeah, so get have actions was rolled out I've had it for about six months now and I've seen a couple conference talks about it And I actually haven't used it on any of my projects yet, but I've been like really digging into it So my hope with this episode is to explain what it is and what it can do so that the next time that you have this problem You can go. Oh, that's what you have actions does and and you can sort of roll into it So GitHub actions are little pieces or big pieces of code that will run when some sort of action on GitHub happens So essentially it's a file with code in it and this code can be written in JavaScript I think I've seen libraries for for Ruby and for a couple other languages that code can be run and can be triggered when different things on GitHub happens so like what would that be?
Well, when somebody Submit a pull request or creates an issue or edits an issue or assigns a milestone or pushes some code to your repo or closes an issue or Any of these things that happen like they're all events all of these events on GitHub You can then listen for them to happen and when those things happen you can trigger some actual code to run and these things are called actions So the code that you write is called a runner and you can host them on GitHub yourself or you can also do a self-hosted runner Actually, sorry, it's only a beta right now. You can't do it yourself just yet, but they're beta testing it So why would you host it yourself right there? And I get up like what's the benefit there? So it can help offers three environments to host these runners right now and they have a Linux Oh, Windows and they actually have a Mac one which is really interesting and they give you two thousand minutes for free on a free plan and it goes up from there and I guess for people who are Doing a lot of actions Maybe I should say just for a couple examples an action might build your application it might deploy your application it might run prettier It might run test things like that So you might have I don't know six or seven different actions and each of those takes like I know building this in tax website and deploying it to now It takes about eight minutes And if you're doing that I don't know 20 times a day every single time that you send in a pull request You'll run out of those minutes really quickly And then you go and pay GitHub anywhere from 0.8 cents a minute up to eight cents a minute for Mac OS to actually run this code on it So it's I kind of equate this to like a serverless function where anytime something happens You can run these actions and it will you'll be able to run a script that does whatever you want it deploys It builds your app it can publish to NPM it can run prettier it can check for spelling mistakes It can apply tags to pull requests things like that It can notify people imagining you could like send text messages and things like that as well And when you get over your minutes you have to go and pay GitHub or if you have your own infrastructure If you don't want to run maybe sensitive code on GitHub servers and you want to run on your own servers a lot of companies I can't do that gotcha then they might want to you might want to host it yourself on your own servers Okay, so this sounds a little bit like I guess that sounds like a little bit of super powered continuous integration stuff because more than just continuous integration It's also building in things that were even like process based maybe around issues or things in your repo But one of the things that I'm really interested in is this going to replace continuous integration services?
Like am I going to need to use code ship or or a step before or circle CI or any of those things? Are you still going to need those with GitHub? It doesn't look like an actions or could it completely replace that? I think it will completely replace it because you do have to take it on yourself to actually write the code that the CI does Because like it's not like a GitHub is going to like write code for every single possible situation But but people will but well they people have published all of these different types of actions There's hundreds of actions already on GitHub for things like deploying to Google Cloud deploying to AWS Running your test suite and making sure all of these things happen You can also order them as well.
It's called steps So you might want to like first run a linter and then run a builder and then run a deploy and then Run like a domain name swap on that might be four different steps that you have interesting as far as I can see Yes, this is going to replace all of these like little five ten dollar a month services that are used for your continuous integration Yeah, I've never found to be super user friendly anyways, you know, I don't want to complain too much because they're fine But I feel like there's things they could have done like co-chip was really great because it did a lot for you But I think you were paying for that right where I think some of them I don't know They all have their own ways of doing things in their own systems that you kind of have to adhere to and learn and it becomes a big Thing that you'll learn this thing where I feel like you have actions are going to be a little bit more I don't know if the word is ubiquitous but used is ubiquitous use by everybody Yeah, you don't have to learn a new way it looks like they're all based on yaml Which is an indentation based config file so if you've ever done like a Docker file or something like that kind of similar to that So it certainly will still take a lot of setup like this is not some amazing GUI where you just click together things that exists You still have to write your own config files and whatnot But like I'm just running some math on what I would need it for and it's it's real simple real simple I think it will be I think it will be very cheap if we were to run syntax or even my own build on something like this Interesting. So yeah, it seems like it could be definitely very useful Especially and maybe we're like on a roll your own Gatsby type of thing where like you were headed gasby And you wanted to have like a build created directly every time you pushed Yep deploy it to your server comment with a like you could also like you could check it And if it's if it's failing some tests or failing code style, then you could either just not I get fix it or or have a Bot write a comment under it like there's a lot of bots that currently do stuff like this and get up actions I think we'll totally replace all of that as well cool pretty cool Yeah, it's and so github has libraries and I was just looking at the JavaScript libraries I think they have in other languages as well So like you would write like a node app or a node script that imports the github libraries And then you can use those libraries to get information about the code You can check out some check out a branch if you like it's pretty neat to be able to to do all of this And it's pretty cool that github is opening up the ability to run code on their own servers Wow, this is really interesting I just thought I'm just going around within the action googling I'm just searching within the actions here And I found one called it next diff for next JS is actually made by zeit themselves I've never seen this before and this action takes a screenshot of your change the pages and then writes a comment on a PR Yeah, just the possibilities stuff like that like yeah, I'm running a site like level of tutorials There's a lot of pages and I make changes I rely on you know Cypress and my unit unit tests But I'm not testing for visual changes necessarily and so sometimes things do maybe introduce a small visual bug on a page I haven't checked or didn't look at or manually test for some reason in a visual way And this seems like that could be a really great thing to just get a nice little alright Here's the changes that have happened and here's them and screenshots right here in front of you That seems like that seems like a task that a like a manager would do to be like Go up and take screenshots of every single page and then email them to be because I'm you know not tech savvy I had that you ever had that? I guess you know, I guess you know, you know, I guess you know, I guess you know, I guess you know We had somebody was just like we need screenshots of all the pages Like why don't you just go to the darn site and look yourself or you know pull it up on your phone even I need screenshots That's great I'm just reading through the code on the next def and it seems 190 lines of JavaScript It uses puppeteer So like the beauty of the GitHub actions is that if it's done in JavaScript You can just use any node module that you can think of it does look like there's a Docker file Which is 25 lines of code and part of the Docker file is that once the Docker image is up and running? I'm imagining it has puppeteer or a headless Chrome running in it then it just runs this node screenshot JS and then that will in turn pull down the website check all the pages and then post a table to the comment So that's actually a really good example of like a simple example, which is seemingly pretty powerful.
Yeah, simple Yeah, we should actually link to this marketplace I'll pull it put this in the show notes here because the marketplace looking for actions There's a lot of cool stuff to just paw through in here and just even again just to check them out Like you said just paw through the code and see how see what you can do for some of these But also maybe just get inspired like I had no idea that screenshots thing even existed and I just searched for next and it popped up So I'm pretty darn excited to dive into these a little bit more now that I have a From our understanding of how powerful they can be I was sort of thinking they were just sort of a continuous integration replacement And I wasn't thinking that they were so powerful. Yeah, it's it's guys a limit if you can run your own code, right? So that's pretty cool. I'm just looking at other ones validate license Make sure repo has a license Fire metal variables syntax checker lots for things like ESLint in here That's because that's like the probably the most simple one is just format the code when somebody sends in a pull request Yeah, format the code properly get up actions for Gatsby CLI Twitter action update a status on behalf of a user So like whenever you merge a pull request or whenever you cut a release of an application you could post it out to to GitHub Update or create a DNS record on cloud flare That's huge because a lot of this like hosting is just changing your DNS a record to a new value And then your domain name will cut over immediately Here's one that exports figma components directly from figma and then uploads them to a GitHub repo pretty cool.
Yeah, there's SMS SMS responsibility alert. I said that earlier that does exist PHP runner. Yeah, pretty cool pretty pretty pretty. Oh secret scan scan your repository for secret By accident, can you repo?
Oh, so if you I've certainly heard of people accidentally posting like AWS tokens to GitHub So maybe this will stop you from doing that before you even push it s3 backup mirror repository to an s3 storage repo cool I can't figure out how this thing works But what the secret scan but I think the way that it works is that it will stop the push from happening So I even think you can go even before you push code to a repo like from your command line I think you can reject it so you don't even accidentally push a secret to GitHub Well, how would that work if as soon as you even submit a pull request the code is on GitHub and then you're poached But I think this will stop it That's just another example of like being able to trigger these actions from running at any given point super cool I'm very excited. I'm glad we chose to do this episode because now I'm inspired Awesome. That was my hope with this is that like not necessarily here's how I'm using it But here's what it is and here's what people are using it for so just clear the arrows to what it is Wow, cool. So these are GitHub actions I am pretty darn excited.
I don't know about you And I'm gonna be spending some time in this marketplace today So check it out We have the links in the show notes here if you want to check out the GitHub actions marketplace And just pause through some of that code and see what you can use or might be useful in your projects Just doing a little quick little search about whatever, you know type of thing you're using or something you might be interested Who knows somebody may have already written this thing for you And that's the best case scenario So as always this has been an awesome episode of syntax I look forward to a Wednesday episode All right, thanks for tuning in. We will catch you later Peace Head on over to syntax.fm for a full archive of all of our shows And don't forget to subscribe in your podcast player or drop a review if you like this show