How Can GitHub Help me Manage my Development Projects? The Toolbox - Episode 01

In this episode...the official first episode of the Toolbox, we'll take a look at some great new tools, including my new favorite flowchart designer, a site that explains the shell and I'll introduce you to the tools inside Github that help with Project Management.

Welcome to The Toolbox. My new livestream, where I take a look some of the most useful tools for web developers.

The Tools

Flowchart Designer 3

(Mac/iPhone/iPad • Free/$7.99 Pro)

Screenshot of Flowchart Designer 3

I'd been looking for a great way to create flowcharts, and I came across Flowchart Designer 3, which was just what I needed for some simple charts. There's a free version with a $7.99 upgrade for some more shapes. It works just as you'd expect.

The arrows automatically connect the nodes, which then move with as you adjust other notes, items auto align to a grid and it's easy to enter some labels. Plus it lets you save as a transparent PNG or PDF. I do wish it would let you save SVGs directly from the app though.

Advanced CSS Gradient Editor

Advanced CSS Gradient Editor

Gradient editors have been around just about since that feature appeared on CSS, so I was surprised how superior this gradient editor was. The whole interface is pretty cool, but I think the killer feature is the ability to easily create layers for gradients that are stacked on top of one another. Plus, there are some nice samples that you can use as start points.

Explain Shell

Explain Shell
Have you ever found a shell command online, but you're not sure what all of the arguments are? Or maybe you want to learn more about a command, well, the site can tell you what all of those arguments are. You can type in the command and it will look up the options you type in the manpages. The nice things is that you can copy that URL and pass that along to someone else with the expanations.

Emmet Live

Emmet Live Screenshot

If you're not using Emmet, then you're not coding as fast as you code. Emmet comes with Visual Studio Code an lets you write abbreviations that convert to code quickly (main>.article*3>.h2+(p>lorem)+a[href="#"]). The Emmet Live Extension will let you play around and see the results of your abbreviations as you type them. Super Handy.

WiFi QR Code Builder

QR Code Builder

Nice little QR Code builder for giving people your WiFi Details. Would be great to print out for your Airbnb, your business or just on top of your router.

GitHub Project Management

Github provides a lot of tools to help you manage projects and if you've never used them before, you're really missing out. I wanted to take the time to go over how it works.


First, You can invite someone to join and participate on your project. That's especially useful for repositories like this one, which are private. Someone who can make changes to your project is called a contributor.

You can add contributors from the Manage Access tab in the settings tab of your project. This will send the contributor an email with a link to the project page. Once someone has made a meaningful contribution, they become collaborators.

Once you add contributors, then Github will become a bit more useful.

Creating an Issue

Issues let you create todos and communicate with collaborators on your project to identify things that need to be taken care of. They are the primary way to organize to dos and tasks. They can flg bugs and lets you have discussion with either the public or the other members of your team.

Organizing into MileStones

Once you have a lot of issues, things can get messy in the issues tab. You can create milestones to help you filter or organize your issues. Milestones help you group your issues by goals. They're just another way to organize your issues.

Creating a Project

Once you have a significant amount of issues, you can also organize them into projects. Projects give you access to kanban boards. It's like a two dimensional board where you can see all of your issues and their status. Boards provide for a ton of automation features so that as you move your issues throught the different board it creates a history of what's happening on your project.


Releases let you formalize the launch of your project at a specific version. Creating a release takes a snapshot of where your project is at a particular point in time. Regardless of where your master branch is, the release will allow someone to come back to the version of the project at that particular release.