Toolbox Shorts

Since this is a special episode of the Toolbox, I'm going to go over some of the GitHub Tools, plus an extension you should definitely add to GitHub.

CodeSpaces

This is the tool that is going to change how developers work. It's basically Visual Studio Code in your browser, but it's deeply integrated into GitHub. Everything you can do with Visual Studio Code, you can do with CodeSpaces.

Recently GitHub announced a quick way to jump into CodeSpaces. You can hit a period in any repo to start CodeSpaces. You can also change the URL of the repo to .dev instead of .com. That way you can easily share a link directly into a repo, so for example, here's a link to one of my courses on TailwindCSS

I demoed this on last week's episode, but this works really well with a tool called CodeSwing that lets you build a CodePen directly into VSCode, but with all of the power of GitHub.

Copilot

Another popular new tool is GitHub CoPilot. This is an AI tool that's sort of the next generation of auto-complete. It's an artificial intelligence tool that writes entire functions for you in many programming languages based on the context of your code.

Copilot uses a new algorithm based on GPT3 called Codex, which focuses on software source code. It works with many programming languages, specially those with well established code bases.

GitHub Issues

Something else that's not quite out, but I'm pretty excited about is the changes to GitHub Issues. GitHub has all these cool features that can help you organize your code project. That's usually done with a Kanban board, but they're working on something that is more like a table mode. It lets you look at your projects' status a bit easier.

GitHub CLI

Now GitHub also has a command line interface, that's a terminal tool that lets you issue commands directly from GitHub. Where this can come in handy is with something like issues. You can create issues directly from the command line while working on a project.

They just announced a 2.0 version of the tool which also lets developers create extensions for the CLI, so I'm excited to see what other developers create with this.

GitHub for Mobile

If you're a maintainer, it can be a hassle to keep up with your projects, so the mobile app for Github gives you the ability to peek into your inbox, comment on issues and do things away from your computer.

Recently, they announced a feature that allows you to block users who are being disruptive. That's a welcome addition to an already capable platform.

Git Lens

Visual Studio code has a lot of built in GitHub functionality, but one tool that you gotta install is GitLens. It turbo charges what Visual Studio code can do.

My favorite feature is that it lets you do a git diff not just with the last commit, but with any branch or tag in your project. I use this all the time.

My Favorite Github Tips

Enough about the tools, lets dive into some of my favorite tips. The first is a couple of changes to git that you'll probably notice in more and more tutorials.

Restoring

There's a new way to restore files. It's an addition to git 2.2, so eventually you'll see it being used more and more. You can issue a git restore command instead of the old git checkout command. Checkout had too many responsibilities in Git, so they've added a few commands that are more targeted.

git restore README.md
# git restore .
# git checkout .

You can still use git checkout command. I think restore makes more sense since checkout can be used in other ways.

Ignoring Files

To take care of ignoring files, you can create a .gitignore file at the root level of your project. Inside that file, you can add any type of file or pattern that you want to ignore.

.DS_Store
.vscode/
authentication.js
node_modules
notes/
**/*-todo.md

You can add an entry for the .DS_Store file as well as the .VSCode folder.

Another common one is a file called node_modules. This is create by npm when working on web projects.

If your project requires it, you can add a file here to store authentication tokens, API keys, etc.

You can also add a notes/ folder here for local notes about the project you don't want to share.

Or you can create a special extension and add the notes anywhere in your project.

git config --global core.excludesfile [file]

If you're going to be using the same ignore files in many projects, you can also add this as a config variable pointing to a file in your hard drive. You can add many things to your config variables that makes using git easier.

Copying a branch

git switch NAME
git switch -c NAME
# git checkout -b NAME

With the git switch command we can switch to or create a new branch and switch to it. It will have the same history as the current branch.

This is the same as the old git checkout command.

Git Clean

git clean -n # dry run
git clean -d # directories
git clean -f # force

Git clean is pretty simple. It lets you remove all untracked files and directories from your branch quickly. This is a nice way of removing old files that you don't need anymore.

It has a lot of options, but the ones I find really useful are -n, which will show you which files are going to be deleted, and -d, which will delete directories.

Be careful with these commands because they're permanent.

Github TLDs

GitHub has a bunch of TLDs (Top Level Domains) that you can use to do quickly take care of tasks.

• github.new or repo.new - Creates a new repo
• gits.new - In the same way, it creates a new gist immediately.
• github.dev - Start up a CodeSpaces environment.

Shortcuts

Github has a number of shortcuts you can use to do things.

• shift-? - If you only remember one shortcut, remember shift-? inside any github page, it gets you a list of all the shortcuts.

• One shortcut you might not be familiar with, you can hit the t key on any project to search through files immediately.

GitHub Special Profile

You can really customize your profile and it's pretty easy. All you have to do is create a repo that is named with your account name. My account is planetoftheweb, so my special repo is https://github.com/planetoftheweb/planetoftheweb

There's a lot more that I could do here and you can find samples of people with all types of special additions, but I think it's nice to have a profile with a description and a picture.

New Course: Github Code Challenges

We have this really cool series of courses on LinkedIn Learning called Code Challenges.

I made the course free for 24 hours by going to this link. Make sure you are on LinkedIn and are following me and you should have access to the course for 24 hours after you first watch it. https://go.raybo.org/5WZc

The concept is that you start off by presenting the viewer with a challenge, and then show them how you solved it.

For This course, I tried picking challenges that were things that I was doing in my day to day life. So, for example you can see some simpler challenges at the beginning where I show you how to clone repos with empty histories, using the Github CLI to create an issue from the terminal and deleting all the commit history.

Let's take a look at an example. For this sample, the challenge is to generate a secret using Github and then do something practical with it.

Use hidden secrets in projects from GitHub Code Challenges by Ray Villalobos

Let's take a look.

Watch it for Free

You can watch this course for free on LinkedIn Learning by using a special link that I have right here. Before you do that. Make sure you are following on LinkedIn so you can have access for 24 hours once you start watching it. The course is under an hour long so it should be easy to watch in one sitting.

PostFix

Tailwind CSS's JIT Mode

Speaking of which next week, I'm going to do an episode of the Toolbox on Tailwind CSS's Just in Time Mode. From a new course that I've been working on. It helps you generate a CSS file that analyzes your documents to see which classes you're using and builds a custom file for you.

It also lets you do superpowers, like creating custom sizes and colors by using bracket notations. Is it a Bootstrap Killer? You'll have to wait until next week to find out.

See you next Wednesday at 1pm. Follow me for details.

layout: post
title: "GitHub Tools You Should Know-EP04 Launch Edition"
summary: "I'm celebrating the release of my new course: GitHub Code Challenges. So, in a special launch edition of The Toolbox, I go over some of the latest GitHub Tools and updates as well as some of my favorite GitHub tips you should already know."
hideDesc: true
video: "bagdajYKNN4"
hero: /images/toolbox/githubtools.jpg
thumb: /images/toolbox/githubtools_tn.jpg
category: toolbox

Toolbox Shorts

Since this is a special episode of the Toolbox, I'm going to go over some of the GitHub Tools, plus an extension you should definitely add to GitHub.

CodeSpaces

This is the tool that is going to change how developers work. It's basically Visual Studio Code in your browser, but it's deeply integrated into GitHub. Everything you can do with Visual Studio Code, you can do with CodeSpaces.

Recently GitHub announced a quick way to jump into CodeSpaces. You can hit a period in any repo to start CodeSpaces. You can also change the URL of the repo to .dev instead of .com. That way you can easily share a link directly into a repo, so for example, here's a link to one of my courses on TailwindCSS

I demoed this on last week's episode, but this works really well with a tool called CodeSwing that lets you build a CodePen directly into VSCode, but with all of the power of GitHub.

Copilot

Another popular new tool is GitHub CoPilot. This is an AI tool that's sort of the next generation of auto-complete. It's an artificial intelligence tool that writes entire functions for you in many programming languages based on the context of your code.

Copilot uses a new algorithm based on GPT3 called Codex, which focuses on software source code. It works with many programming languages, specially those with well established code bases.

GitHub Issues

Something else that's not quite out, but I'm pretty excited about is the changes to GitHub Issues. GitHub has all these cool features that can help you organize your code project. That's usually done with a Kanban board, but they're working on something that is more like a table mode. It lets you look at your projects' status a bit easier.

GitHub CLI

Now GitHub also has a command line interface, that's a terminal tool that lets you issue commands directly from GitHub. Where this can come in handy is with something like issues. You can create issues directly from the command line while working on a project.

They just announced a 2.0 version of the tool which also lets developers create extensions for the CLI, so I'm excited to see what other developers create with this.

GitHub for Mobile

If you're a maintainer, it can be a hassle to keep up with your projects, so the mobile app for Github gives you the ability to peek into your inbox, comment on issues and do things away from your computer.

Recently, they announced a feature that allows you to block users who are being disruptive. That's a welcome addition to an already capable platform.

Git Lens

Visual Studio code has a lot of built in GitHub functionality, but one tool that you gotta install is GitLens. It turbo charges what Visual Studio code can do.

My favorite feature is that it lets you do a git diff not just with the last commit, but with any branch or tag in your project. I use this all the time.

My Favorite Github Tips

Enough about the tools, lets dive into some of my favorite tips. The first is a couple of changes to git that you'll probably notice in more and more tutorials.

Restoring

There's a new way to restore files. It's an addition to git 2.2, so eventually you'll see it being used more and more. You can issue a git restore command instead of the old git checkout command. Checkout had too many responsibilities in Git, so they've added a few commands that are more targeted.

git restore README.md
# git restore .
# git checkout .

You can still use git checkout command. I think restore makes more sense since checkout can be used in other ways.

Ignoring Files

To take care of ignoring files, you can create a .gitignore file at the root level of your project. Inside that file, you can add any type of file or pattern that you want to ignore.

.DS_Store
.vscode/
authentication.js
node_modules
notes/
**/*-todo.md

You can add an entry for the .DS_Store file as well as the .VSCode folder.

Another common one is a file called node_modules. This is create by npm when working on web projects.

If your project requires it, you can add a file here to store authentication tokens, API keys, etc.

You can also add a notes/ folder here for local notes about the project you don't want to share.

Or you can create a special extension and add the notes anywhere in your project.

git config --global core.excludesfile [file]

If you're going to be using the same ignore files in many projects, you can also add this as a config variable pointing to a file in your hard drive. You can add many things to your config variables that makes using git easier.

Copying a branch

git switch NAME
git switch -c NAME
# git checkout -b NAME

With the git switch command we can switch to or create a new branch and switch to it. It will have the same history as the current branch.

This is the same as the old git checkout command.

Git Clean

git clean -n # dry run
git clean -d # directories
git clean -f # force

Git clean is pretty simple. It lets you remove all untracked files and directories from your branch quickly. This is a nice way of removing old files that you don't need anymore.

It has a lot of options, but the ones I find really useful are -n, which will show you which files are going to be deleted, and -d, which will delete directories.

Be careful with these commands because they're permanent.

Github TLDs

GitHub has a bunch of TLDs (Top Level Domains) that you can use to do quickly take care of tasks.

• github.new or repo.new - Creates a new repo
• gits.new - In the same way, it creates a new gist immediately.
• github.dev - Start up a CodeSpaces environment.

Shortcuts

Github has a number of shortcuts you can use to do things.

• shift-? - If you only remember one shortcut, remember shift-? inside any github page, it gets you a list of all the shortcuts.

• One shortcut you might not be familiar with, you can hit the t key on any project to search through files immediately.

GitHub Special Profile

You can really customize your profile and it's pretty easy. All you have to do is create a repo that is named with your account name. My account is planetoftheweb, so my special repo is https://github.com/planetoftheweb/planetoftheweb

There's a lot more that I could do here and you can find samples of people with all types of special additions, but I think it's nice to have a profile with a description and a picture.

New Course: Github Code Challenges

We have this really cool series of courses on LinkedIn Learning called Code Challenges.

I made the course free for 24 hours by going to this link. Make sure you are on LinkedIn and are following me and you should have access to the course for 24 hours after you first watch it. https://go.raybo.org/5WZc

The concept is that you start off by presenting the viewer with a challenge, and then show them how you solved it.

For This course, I tried picking challenges that were things that I was doing in my day to day life. So, for example you can see some simpler challenges at the beginning where I show you how to clone repos with empty histories, using the Github CLI to create an issue from the terminal and deleting all the commit history.

Let's take a look at an example. For this sample, the challenge is to generate a secret using Github and then do something practical with it.

Use hidden secrets in projects from GitHub Code Challenges by Ray Villalobos

Let's take a look.

Watch it for Free

You can watch this course for free on LinkedIn Learning by using a special link that I have right here. Before you do that. Make sure you are following on LinkedIn so you can have access for 24 hours once you start watching it. The course is under an hour long so it should be easy to watch in one sitting.

PostFix

Tailwind CSS's JIT Mode

Speaking of which next week, I'm going to do an episode of the Toolbox on Tailwind CSS's Just in Time Mode. From a new course that I've been working on. It helps you generate a CSS file that analyzes your documents to see which classes you're using and builds a custom file for you.

It also lets you do superpowers, like creating custom sizes and colors by using bracket notations. Is it a Bootstrap Killer? You'll have to wait until next week to find out.

See you next Wednesday at 1pm. Follow me for details.