The Mijingo Blog

Latest news, updates, free tutorials, and more from Mijingo.

Git Aliases in .bash_profile

by Ryan Irelan

Learn how to add system-wide Git aliases to your .bash_profile that allow you to:

  • create a shortcut to quickly push changes to the develop branch of your project
  • quickly push to the master branch using a bash alias
  • stage a boatload of files (added and deleted) with one five-letter command. This is perfect to large updates to CMSes, frameworks, and web apps.

This 7 minute video is an excerpt from the OS X Shell Tricks course.

Creating Bash Aliases

by Ryan Irelan

Bash aliases allow you to set a shortcut command for a longer command. For example, you could set the command cc to be a shortcut for the clear command. cc + Enter is much faster to type than clear.

Aliases are defined in the .bash_profile or .bashrc file (typically in your user home directory).

A bash alias has the following structure:

alias [alias_name]="[command_to_alias]"

A new alias always starts on a new line with the alias keyword. You define the shortcut command you want to use with the alias name, followed by an equal sign. In quote, you type the full command you want to run.

A popular example is customizing the ls command for listing directories and files. Instead of typing out

ls -lhaG

We can just shorten that to ll. Here’s the alias to do that:

alias ll="ls -lhaG"

Put that in your .bash_profile or .bashrc file and then open a new Terminal window or reload using:

source ~/.bash_profile

Now, type ll and you should see the full command run.

Here’s a video excerpt from our Command Line Fundamentals how-to video that covers the basic of bash aliases.


Want to learn the basics of navigating around the command line? Watch our Command Line Fundamentals course.

Automate SVG Export on OS X

by Ryan Irelan

In a recent tutorial on exporting SVG from the command line, we installed and used SVGExport.

What’s SVGExport?

A handy command line tool you can use to convert SVG files to PNG bitmap images is svgexport. It is available as a Node.js module and a command line utility.

With svgexport, we can easily pass in an SVG file–including any resizing options for the SVG viewport–and convert it to PNG, JPG, JPEG, or PDF of varying quality.

For this tutorial, I want to build a special folder on my computer Desktop that, when I drop an SVG file in, automatically converts the SVG to PNG. It will then move the original SVG file to a different directory and move the PNG to a different directory as a way to clean things up.

To accomplish this we are going to use Automator (Mac OS X only) and a shell script. If you’re not familiar with either, it’s not a problem. We’ll walk through both of them together.

Prerequisites

To move forward with this tutorial, please first install SVGExport via NPM.

If you’ve followed along on other courses I’ve done–like the one on JavaScript Task Runners–then installing a Node module via NPM should be old hat.

npm install svgexport -g

Also, you’ll need to be on Mac OS X so you have access to the built-in automation tool, Automator.

Setting up the Automator Folder Action

First, open Automator (available at /Applications/Automator) and create a new “Folder Action” project. There are a handful of different ways you can use Automator and a really nice option is to attach a script or series of actions to a folder.

We need to tell Automator to which folder to attach the actions. At the top, select the folder you want to use (or select “Choose…” to find any folder on your system).

I’m choosing a folder called svg2png that I created on my Desktop. The folder can be anywhere but I wanted it somewhere easily accessible.

While we’re in folder creation mode, let’s make two additional folders on our Desktop: one called source and one called processed. We’ll use these in the script to handle our input and output files.

Add Action

With the folder chosen, we now need to assign an action to it. Automator offers a generous buffet of actions to choose from–for system actions or app-specific actions–but we will keep it very simple and just use the “Run Shell Script” action.

Select the “Run Shell Script” action” from the left pane (available under Utilities) and drag it over to the right pane so it’s part of the Folder Action automation.

Make sure that /bin/bash is chosen as the option for “Shell” and “Pass Input” is set to “as arguments.” Now we’re ready to write the script!

Write the Shell Script

The shell script is fairly straight-forward but might be new to you, so I’ll explain it line-by-line. Here’s the whole script:


PATH=/usr/local/bin:/bin export PATH
for f in "$@"
do
  nf="${f%.svg}.png"
  svgexport "$f" "$nf" png 100% 0.5x
  mv "$f" ~/Desktop/source/
  mv "$nf" ~/Desktop/processed/
done

To make things run smoothly, we want to add our system path to the top of the shell script. This allows us to call commands without the full paths and makes Node happy (which is what was used to install svgexport).

At the top of the shell script (put this in the field in the “Run Shell Script” action), we’ll add our path line.

PATH=/usr/local/bin:/bin export PATH

Now we need to tell the script to process anything that gets dropped in the folder. We do that using a for loop and we loop over an arguments array ($@):

for f in "$@"

Next up is the meat and potatoes of our Folder Action: the part of the script that processes the files and runs them through SVGExport.


do
  nf="${f%.svg}.png"
  svgexport "$f" "$nf" png 100% 0.5x
  mv "$f" ~/Desktop/source/
  mv "$nf" ~/Desktop/processed/
done

Let’s unpack this to understand what’s going on.

nf="${f%.svg}.png"

First, I’m assigning the variable nf the original filename of the SVG we passed in but replacing the .svg extension with a .png extension.

svgexport "$f" "$nf" png 100% 0.5x

The next line runs the svgexport command (we don’t have to specify the full path to it because we included our system path at the top of the script). We’re using the $f variable whose value is the file of the current loop through the array as the source and the $nf variable we set earlier as the output file name. The rest of the line is standard svgexport.


mv "$f" ~/Desktop/source/
mv "$nf" ~/Desktop/processed/

Finally, we move the source file ($f) to the source folder on our Desktop and the move the processed PNG file ($nf) to the processed folder on our Desktop.

Add done at the end to close the loop and we’re done!

Automator window for exporting SVG as PNG

Saving and Testing

Save the Folder Action automation in Automator. Now it’s time to test it out. Find an SVG file and drag and drop it (or copy and paste it) into the svg2png folder. You should see a small, spinning gear appear in your menu bar. Once the automation is complete the gear will disappear.

We check our processed folder to see if the PNG file is there. Success!

This script could be enhanced and made better. For example, I’m doing any error checking here to accounting for missing files, duplicate files, etc.

Troubleshooting

If we run into problems, we can test the automation right inside of Automator by explicitly passing a file to the “Run Shell Script” action. We use the “Get Specified Finder Items” action (dragging it above the “Run Shell Script” action), choosing an SVG file to test with, and then running the automation manually.

Using Get Specified Finder Items in Automator to test

Some common problems we might see:

  • Path problems (script can’t find command) if the system path is missing from the top of the script
  • Missing directories that are called in the script (processed, source)
  • SVGExport isn’t installed
  • Not setting “Pass input” as “arguments” for the Shell Script action

For more information about how to get started with SVG, check out our comprehensive course Up and Running with SVG.

Adding to Your System Path

by Ryan Irelan

The System Path is a special environment variable in your command line session that references the full file system path to the location of binaries and executables (command line applications).

What follows assumes you’re using Bash and may be OS X biased.

It is typically located in your user home directory inside of a hidden file called .bash_profile or .bash_rc (here’s a good comparison of the two files. Most of the time you’ll use .bash_profile.

Basically, the System Path lets you cheat at the command line by only typing the command name and not the exact location of it.

Knowing about the System Path is important because as you get more experience working on the command line you may have to install software that will require you to update your system path in order to run the software from the command line without specifying the full path.

As an example, I run the git command dozens of time per day. But I just run git and nothing else. My system knows where to find the location of the Git binary (the Git application itself) because the location is listed in my System Path.

The actual location of git is /usr/bin/. If I ran /usr/bin/git it’s the same thing as if I ran only git.

But my System Path doesn’t know explicitly about Git. It has a set of paths (full locations to directories) that it checks each time I run a command. If there are 3 paths set, my Terminal session will check each one until it finds the location of Git.

To add to, edit, or just view your System Path, you’ll need to access the .bash_profile. I like to do this using vim.

It’s okay, I know. Sounds scary. But I’ll walk you through it. We start by opening up the .bash_profile in Vim.

vim ~/.bash_profile

The .bash_profile file is located in the user home directory. We use the tilde as shortcut for that. Once that’s open you should see something like this near the top:

export PATH=/usr/local/bin:~/bin:$PATH

This your System Path. It has two paths defined to check when we run a command. Let’s add another path to it.

In order to edit the file in Vim, we’ll need to go into insert mode. Press the “i” key. Then use your arrow keys to navigate to the end of the export statement. Type in the path you need to add.

Mine is going to look like this:

export PATH=/usr/local/bin:~/bin:/Applications/Inkscape.app/Contents/Resources/bin:$PATH

We added a colon and then the path to the Inkscape binary for the command line tool (see more about using that). The path is an absolute, full path right to the directory that contains the binary.

After you’re done editing, hit the Escape key (or control-c) and then type :wq for write and quit. You should be dropped back into the command line prompt.

Before the current terminal session knows about the changes we’ve made, we need to reload our .bash_profile. We can do that by opening a new Terminal window or running:

source ~/.bash_profile

Now let’s test out the change: inkscape (whatever command you need to run will probably be different).

Ready to learn more about the command line? Our Command Line Fundamentals course will get you up and running in no time.

OS X Shell Tricks: Get more from your Mac

by Ryan Irelan

Brett Terpstra is one of the best minds when it comes to improving how you use your Mac. He’s been authoring tools and scripts for years that thousands and thousands of people rely on every day.

Now you can learn Brett’s tricks in our latest course: OS X Shell Tricks.

I’m really happy to have OS X Shell Tricks available today and, I’ll be honest, I learned a ton while preparing to teach the course. It’s really, really good.

Take Command of the Command Line

After watching this course you’ll be better prepared to take command at the command line. You will learn about a dozen different tricks for saving time and doing more. Along the way you’ll also learn some tactics to put together your own tricks.

The course covers the following:

  • Files & Directories – where we will dive deep in to the open command, learn how to quick look files from the command line, batch change file extensions, and move from the Finder to the Terminal seamlessly.
  • Git Shell Tricks - we will look at using git aliases, editing our gitconfig file, searching through git aliases, and creating Github Gists from the command line.
  • Tricks for Web Designers - We’ll get image dimensions in the command line, batch process images using sips, and create base64 version of images, including scripting it so we can quickly create a CSS background property from an image.
  • Wrapping Up - Then we’ll wrap up by learning how to make the command line manuals even easier to access as PDFs and tips for branching out and getting even better at the command line.


Ready to go? Get started learning some great OS X shell tricks

What are our customers saying?


"Just purchased your Flexible Twig course. Love it!"
Tyler Morrison
"Been enjoying @mijingo 's Learning Craft video tutorials. Feeling like I've got a good basic understanding of #craftcms Very impressive"
Laura Montgomery
"I bought your Craft Starter Pack a year and a half ago. Worth every dollar. In fact, I would've paid twice as much for it, because you saved me so much time."
Timothy Ingram
"Ben's knowledge of Craft combined with his relaxed and informal teaching style makes for a great learning experience."
Steve Abraham
"Ben puts a lot of thought into his teaching approach and has the ability to explain complex concepts in a way that just make sense"
Gareth Redfern
"Ben is great at taking a complex subject and breaking it down in a way that you can wrap your mind around. I thought that plugin development was something I would never understand, and happily Ben proved me wrong!"
Jonathan Melville
"I really appreciate all the videos and writing you have done. Your work has given me a jump start on my front end development business."
Shan Ricciardi

Perfect for Small Teams & Companies


Mijingo's courses are perfect as the training curriculum for both small teams and entire companies.

Our courses are offered in Team Packs (up to 5 people) and Company Packs (up to 25 people), so you can make one simple, fast purchase to train your entire staff.

Prices are listed with each course. Need more than 25 or something custom?

Send Your Requirements
Team Pack2-5 People
Company Pack6-25 People
Custom Pack25+ People