Understanding of GitHub and Actions to Improve Your Workflow

Understanding of GitHub and Actions to Improve Your Workflow

If you host your code on GitHub, you can take advantage of GitHub Actions. Instead of running all tests and linters manually, you can leverage GitHub Actions for those tasks. Learn more Github Actions in this post, improve Your Workflow With These 4 GitHub Actions

Github Actions - What, Why, and How?

Automate boring tasks with Github Actions

GitHub Actions make it easy to automate all your software workflows. Github Actions let you build, test, and deploy your code right from GitHub. You can also assign code reviews, manage branches, and triage issues the way you want with actions.

Whether you want to build a container, deploy a web service, or automate welcoming a new user to your open-source project — there’s an automated action for that.

The easiest way is to think of Github Actions as their own continuous integration system. You can pair GitHub Packages with Actions to simplify package management, including version updates, fast distribution with the Github global CDN, and dependency resolution, using your existing GITHUB_TOKEN.

Getting Started

Every Github repository now supports Github's actions. Open a repository in the browser, and you’ll spot the “Actions” tab right away.

Source: Github

Once we press on the Actions tab, we’ll be taken to the Actions page.

Actions tabs

Github is smart enough to recommend relevant actions. Let’s say we have a Node project where we want to test whether the build command works before shipping our code to the production server. Press on the “set up on this workflow” button.

nodejs.yml

Every Github action required a .yml file. The .yml file is used to describe actions, behavior, and everything else.

.yml stands for YAML (“YAML Ain’t Markup Language”), which is a human-readable data serialization language. It’s commonly used for configuration files and in applications where data is being stored or transmitted.

Before committing the freshly created nodejs.yml file, Github gives us a chance to glance over it. Everything seems in order, and here’s what’s happening inside the file:

  • Spin up a Ubuntu server
  • Install Node.js
  • Install node packages for the project
  • Fire off the package.json scripts like npm run build and npm run test

Alrighty, let’s commit the file to the project now.

Committing the nodejs.yml file

Now every time you push to the project, the commands will fire off automatically. There’s even action for deploying to AWS or Google Cloud.

Checks running on each push

Github actions aren’t just for the Web or Node exclusively — they’re also for languages and environments. Explore all the actions here.

The best part about actions is you can write your own action and open-source it for the whole world to see.

Improve Your Workflow With These 4 GitHub Actions

Here are 4 useful GitHub Actions to improve your workflow

1. Detect Secret Key Leaks — gitleaks-action

Audit Git commits for secrets with gitleaks, as a GitHub action. If you use .env files, this action notifies you if you ever published the secrets by accident.

Gitleaks-action — https://github.com/eshork/gitleaks-action

Usage

workflow "gitleaks my commits" {
  on = "push"
  resolves = ["gitleaks"]
}
action "gitleaks" {
  uses = "eshork/[email protected]"
}

Credit to zricethezav/gitleaks for the complicated bits.

2. Audit Your Webpage With Google Chrome’s Lighthouse Test

This action integrates Google’s helpful Lighthouse audits for webpages — specifically testing for performance, accessibility, best practices, SEO, and progressive web apps.

*Github Lighthouse Action — https://github.com/marketplace/actions/lighthouse-audit

Right now, the action will print the five scores (out of 100) to the output and upload HTML and JSON versions of the report as artifacts.

In the next release, the action will let you specify thresholds for each test and optionally fail this step if they are not met.

Lighthouse audit report example

Usage

The following workflow runs a Lighthouse audit on jarv.is, shows the five scores in the output of the step, and uploads the .html and .json results as artifacts to download (as shown above).

workflow.yml file:

name: Audit live site
on: push
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
    - name: Audit live URL
      uses: jakejarvis/[email protected]
      with:
        url: 'https://jarv.is/'
    - name: Upload results as an artifact
      uses: actions/[email protected]
      with:
        name: report
        path: './report'

Lighthouse is super useful when you’re building progressive web apps. The project is inspired by GoogleChromeLabs/lighthousebot.

3. Run SSH Commands With GitHub Actions

This action will run the provided argument as a command on your $HOST via SSH. Useful if you want to run commands on your private server after each commit or push.

SSH GitHub Action — https://github.com/maddox/actions/tree/master/ssh

Usage

To use the action, simply add the following lines to your .github/main.workflow:

action "Run deploy script" {
  uses = "maddox/actions/[email protected]"
  args = "/opt/deploy/run"
  secrets = [
    "PRIVATE_KEY",
    "HOST",
    "USER"
  ]
}

Required arguments

The argument you will use is the command that will be run on your server via SSH.

Examples

  • args = "/opt/deploy/run"
  • args = "touch ~/.reload"

Required secrets

You’ll need to provide some secrets to use the Action.

  • PRIVATE_KEY: Your SSH private key.
  • HOST: The host the action will SSH to run the command. For example, your.site.com.
  • USER: The user the SSH command will auth as with the private key.

Please see the GitHub repository for full details.

4. GitHub Action That Runs ESLint

Eslint Action — https://github.com/stefanoeb/eslint-action

This action executes the ESLint linter on specified JavaScript files without any previous action/build step or Docker required.

You must have the ESLint running locally for the Action to execute. It will use the same rules as you do locally. More info in the ESLint getting started guide

Usage

Add any of the examples below to your workflow file .github/main.workflow.

Here’s an example to get it to work:

workflow "New workflow" {
  on = "push"
  resolves = ["ESLint"]
}
action "ESLint" {
  uses = "stefanoeb/[email protected]"
}

By default, it will run ESLint through all the files in the project. But you can also specify a glob of files on the args, just like ESLint:

workflow "New workflow" {
  on = "push"
  resolves = ["ESLint"]
}
action "ESLint" {
  uses = "stefanoeb/[email protected]"
  args = "index.js src/**.js"
}

If there is no previous step installing the necessary modules, this action will execute a yarn install or npm install automatically.

You may also like: GitHub Development Workflow - Developers need to know.

Conclusion

Thanks for reading, I hope you learned something new. If you know any useful GitHub Actions, let us know. Stay curious and happy coding!

GitHub Development Workflow - Developers need to know

GitHub Development Workflow - Developers need to know

GitHub is a code hosting platform for version control and collaboration. It’s designed around Git, a system for tracking changes in software code. In this article we'll take a look at the key concepts of the GitHub development workflow.

GitHub is a code hosting platform for version control and collaboration. It’s designed around Git, a system for tracking changes in software code. It lets you and others work together on projects from anywhere. In this article we’ll take a look at the key concepts of the GitHub development workflow. Including working with repositories, branches, forks, commits, pull requests and merging. Let’s get started!

What is version control?

Version control is a system that helps developers track and manage changes to a software projects code. As projects grow, the need for version control becomes vital — especially in a collaborative project. We can work safely by using whats known as branching and merging.

Branching allows us to duplicate our source code (aka ‘the repository’), so we can safely make changes without affecting the entire project. Once the changes have been reviewed and approval is agreed upon, we merge our branch into the master to update our official code. If any bugs are identified— we have the option to revert back to our original code, as our changes have been tracked.

What is Git?

Git and Github are not synonymous! Git is a specific open-source version control system created by Linus Torvalds in 2005. It’s the program that actually tracks your changes, and ensures the entire code-base is available on each developers computer. GitHub however, is simply hosting your repositories (as well as providing some additional functionality).

The Fundamentals

Let’s get started! If you haven’t signed up for a GitHub account, go ahead and sign up here.

Creating a Repository

A GitHub repository (or “repo”) can be thought of as the root folder for your project. It contains all your project files and gives you the ability to access each files revision history. If you’re working in a team you can give other people access to your repository for project collaboration.

Lets create our first repository! Make sure your signed in to GitHub, then:

  1. In the upper-right corner, click the settings + icon & then New repository
  2. Give your repository a name
  3. Add a description if you like
  4. Choose between creating a public or private repository (either are fine)
  5. Select Initialize this repository with a README (eg. “My first repo!”)
  6. Click Create repository!
  7. Add files to your repository —we’re only testing so it really doesn't matter what you add. Find an HTML file for example, and add it to your repository via the Upload files button.

Creating an Issue

Issues are how we track the tasks, enhancements, and bugs in our projects. They’re meant to be shared amongst your team to facilitate discussion for review as well as for managing task delegation. If you open an issue on a project managed by someone else, it’ll stay open until either you close it (for example if you figure out the problem) or if the repo owner closes it. When you create an issue, be sure to give a clear explanation of the task at hand. Let’s create an issue in our repository:

  1. In your repository, select the Issues tab
  2. Click the New Issue button
  3. Give your issue the title ‘Setup GitHub pages’
  4. Give a clear description e.g. ‘Need to setup GitHub Pages in this repository’
  5. Click Submit new issue

Assigning an Issue

We need to assign issues so our team members know who’s job it is to handle the task!

  • On the right side of the screen, under the “Assignees” section, click the settings icon and select yourself

Let’s resolve our first issue! We want to Setup GitHub pages. You can read about GitHub Pages here. But for now, our focus on completing the task:

  1. Click on the Settings tab in your repository
  2. Scroll down to the “GitHub Pages” section
  3. From the “Source” drop down, select master branch
  4. Click Save

Closing an Issue

Now you’ve completed the task — you can go ahead and close it! You can delete an issue on GitHub, however closing it tells your team members that the task has been completed. To close:

  • Open up your completed issue and click Close issue

The GitHub Flow

Now that we know how to work with issues, it’s time to look at the GitHub Flow. Simply put its a workflow where we can experiment with new ideas safely, without the risk of compromising our project. This is primarily achieved through the use of branching.

GitHub Flow

By default, our project lives on the master branch — any changes to the master will update directly to our project (This can be dangerous is you haven’t properly reviewed your changes!).

When we want to experiment with a new feature, or even fix an issue, we create a new branch on the project. The branch will initially be a duplicate of your master, now when you make changes —they’ll reflect only on the branch.

While working on changes, you’ll commit the changes to your branch. When you’re satisfied that the changes are complete, its time to open a pull request. From here your team will discuss and further refine the project changes. Once the changes have been approved, the branch will be merged onto the master branch. Let’s go through an example of this process now!

Creating a Branch

  1. Open your repository and click the Code tab
  2. Click Branch: master in the drop-down
  3. In the field, enter a name for your branch (e.g. ‘development’)
  4. Click Create branch

Now that you’ve created a branch, you can modify your project without changing the deployed master branch.

A note on forks — A fork is different to a branch in that it allows you to clone another repo in your own account. It essentially allows you to start a new project based on a previous project.

Committing a file

Now we can safely work within our branch, let’s create a file and make our first commit.

  1. Make an edit (anything! just add a simple comment to your code) to one of the files you had added to the repository earlier
  2. Give the commit a name and description
  3. Make sure your newly created (development) branch is selected
  4. Click Commit changes

You’ve made your first commit! The next step is to share the changes with your team via a pull request.

Opening a Pull Request

A pull request is where we share our proposed project changes with our team — with the intent on discussing & revising them before applying the changes to the master branch.

  1. Open the Pull requests tab and click New pull request
  2. In the base: drop-down menu, ensure the master branch is selected
  3. In the compare: drop-down menu, select the development branch you created earlier
  4. Click Create pull request
  5. Now enter a title for your pull request, for example “Add my changes”
  6. Add an accurate description of the changes you made
  7. Click Create pull request!

Your team members now have the ability to discuss and review your proposed changes. Once everyone is happy and the changes are approved— it’s time to merge to master.

Note: If you forked a repo and made changes, you can create a pull request to merge your changes from there as well.

Merging a Pull Request

  1. Inside of your Pull request, click Merge pull request
  2. Click Confirm merge
  3. Once your branch has been merged, you don’t need it anymore. You can click Delete branch
Conclusion

And that’s it! You’ve learned how to work collaboratively on projects using GitHub. GitHub is an amazing tool to take advantage of! You can now create repositories and issues, create branches, fork projects and make commits, submit pull requests for review, and merge to the master branch. Not bad!

I hope you found this article useful!

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers. Learn Functional Programming and how it enables developers to move from imperative to declarative programming. Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes. Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

Functional Programming for JavaScript Developers

Learn functional programming and how it enables developers to move from imperative to declarative programming

Improve your code with functional patterns like pure functions, compose & map/reduce/filter...plus advanced concepts like fusion, transducing and monads!

Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes

Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Go beyond the fundamentals of asynchronous JavaScript and use features and techniques that will help you reduce code and create smarter applications.

Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

What you'll learn

  • On the surface, this course is designed for beginning and intermediate JS developers who want to learn the fundamentals in order to understand and use functional programming in both ES5 and ES6. However, this course is also perfect for people preparing to enter into competitive JavaScript bootcamps