The Mijingo Blog

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

Three Twig Tag Types in Craft CMS Explained

by Ryan Irelan

Templating in Craft using Twig can, at first, be a little confusing. If you, like me, come from other systems that have a proprietary template tag system, then it might take a little time to wrap your head around how Craft and Twig work.

But once we learn about the different types of tags things will be clearer and you’ll discover the power of using Twig in Craft. This tutorial will give you the direction and guidance you need to get started.

Let’s jump right in.

There are three tag types in Twig and Craft:

  • Statement/Logic Tags
  • Output Tags
  • Comment Tags

You will always use the first two in your Craft templates. The third, comment tags, are optional but a handy way of documenting anything that isn’t obvious by reading the code.

Statement/Logic Tags

Statement or logic tags use the curly brace plus percent sign delimiter. In Twig and Craft they can come in multiple forms.

Some are just a single tag, like this Craft-specific Twig tag:

{% requireLogin %}

which you would put at the top of a template in Craft to require a logged-in state. If a visitor is not logged in than Craft will automatically redirect them to the log-in page.

Other logic tags take parameters, like the redirect tag in Craft:

{% redirect "about/tos" %}

The redirect tag takes one parameter, which is the URL or path to where you want to redirect the visitor. This is a tag specific to Craft but there are some Twig tags you should know, too.

Another type of tag is one that has an opening and closing tag, like the for tag in Craft.


{% for %}
{% endfor %}

The tag pairs have an opening tag and a closing tag. The closing tag will typically have an “end” prefix, like endfor, endpaginate, and endblock.

Even the set tag we use to set a variable can be used as a tag pair. The simple version looks like this:

{% set author = "Ryan Irelan" %}

But using a tag pair for set, you can assign a block of text to a variable. Here we’re setting the variable socialLinks to an unordered list of social network links:


{% set socialLinks %}
<ul class="social">
    <li class="twitter"><a href="">Twitter</a></li>
    <li class="facebook"><a href="">Facebook</a></li>
    <li class="googleplus"><a href="">Google+</a></li>
</ul>
{% endset %}

Another example of a tag pair–and by far your most used tag while writing Twig template code for Craft–is the for-loop. It’s how you will loop through and display section entries in your templates and output other lists, like categories.

This is a for-loop to display content from an array of blog posts:


{% for entry in craft.entries.section('blog') %}
    {{ entry.body }}
{% endfor %}

It uses the curly brace plus percent sign delimiter for both the opening and closing tags of the for-loop. This delimiter tells Twig that what’s between needs to be executed as a statement (in this case a for-loop).

Output Tags

The code with the double curly braces are output tags. They print variable contents to the screen (i.e. output content in your template).

{{ author }}

The author variable would output my name (because we set it in the previous example).

If you want to use an output tag to pass in data to another tag, like when we set a variable in Twig, then you don’t need to use the double curly braces.

{% set name = author %}

If we printed out the value of the name variable we just set than it would render:

Ryan Irelan

But output tags can generate the output on the fly and then print it to the screen. How about a little math?

{{ 4 * 4 }}

This output tag will do the multiplication of 4 and 4 and print out the product. I’m unsure how practical it is to do math like this in the template but there you have it.

The Twig documentation calls out that the curly braces are not part of the variable itself but instead an indicator that the value of the variable contained within should printed to the screen.

Comment Tags

This tag type is straight-forward but perfect for adding comments to your templates but not have those comments render in the page source like HTML comments would.

{# Begin logic for sidebar #}

Using a single opening curly brace paired with a pound sign, we can create the un-rendered comments. They’ll always be available in your template file but never rendered by Twig.

Any code that is inside the comment tag will not be executed by Twig.


{# removing this for now to debug
    {% for entry in entries %}
        {{ entry.body }}
    {% endfor %}
#}

There’s a lot more to templating with Twig in Craft but this introduction to three different tags will get you set off in the right direction.

Don’t miss my new course on Craft + Twig

Coming soon is a brand new video course on Twig & Craft that will help you grasp what Twig is, how Craft and Twig work together, and some templating best practices. Sign up below to get notified when the course is ready!

Ready to learn more about Craft?

If you want to learn more right now about Craft, I have a popular 2 ½ hour video course that will get you started on the right path.

Get the Craft video course

Important SVG Elements

by Ryan Irelan

There are a lot of elements–and attributes–to consider when writing SVG. But to get started, we don’t have to learn them all. Let’s review the most important ones you’ll encounter while working with generated SVG or SVG you coded yourself.

svg Element

You’re probably already very familiar with this. It’s the main element of SVG and inside of which you nest any shapes, paths, lines, etc. that you want to draw.

The SVG element defines the viewport or canvas for SVG content.

Here are some of the specific attributes for svg:

  • height - the height of the viewport
  • preserveAspectRatio - forces the aspect ratio so your image isn’t stretched when using the viewBox element to define a new coordinate system.
  • viewBox- Allows you to set a new coordinate system by defining where x,y coordinates where the system starts as well as the width and height.
  • width - The width of the viewport for this SVG element.

g Element

This element is used to create groups of SVG objects. For example, if you had a series of related rectangles (rect), you can group them together inside of a g element. The nice thing about this is that any transformations you apply to g apply to everything inside of the group.

The g element accepts all global attributes (like stroke, fill, etc).

circle Element

This element does exactly what it says in the name: it creates circles.

circle accepts three element-specific attributes:

  • cx - This attribute defines the x coordinate of the center of the shape.
  • cy - This attribute defines the y coordinate of the center of the shape.
  • r - Defines the radius of the circle.

rect Element

This is the elements we used in all our examples up to this point. It creates rectangles.

The rect elements takes the following attributes:

  • height - Defines the height the shape.
  • width - Defines the width of the shape.
  • x - The x coordinate where the shape should start drawing.
  • y - The y coordinate where the shape should start drawing.

line Element

The line element allows you to draw lines in SVG. Each line connects two points by setting x and y coordinates.

Here are the attributes available in line:

  • x1 - the start of the line on the x axis
  • y1 - the start of the line on the y axis
  • x2 - the end of the line on the x axis
  • y2 - the end of the line on the y axis

path Element

You’ll see the path element if you take an existing artwork and convert it to SVG (in Adobe Illustrator, for example). Illustrator converts the artwork to SVG by tracing the shapes in the image and converting them to SVG path elements.

Any shape can be created with the path element. It takes the following specific attributes:

  • d - this is the definition attribute, which defines the path to follow to create the shape. The path is defined using “path descriptions:” Moveto, Lineto, Curveto, Arcto, ClosePath.
  • pathLength - Use this attribute to define the total length of the path.

polygon Element

The polygon elements allows you to create any shape with many sides. A typical example would be an octagon. You plot the sides of the polygon using points (the only specific attribute for this element).

text Element

Use the text element to set text in your SVG. text takes the global style attribute, which you can use to apply styles (size, font, stroke, etc) to the text.

  • dx -
  • dy -
  • lengthAdjust -
  • text-anchor -
  • textLength - An exact value of the length of the text. This used for very specific layouts.
  • rotate - A list of numbers that will determine the rotation of the text.
  • x - the coordinate where the text begins
  • y - the coordinate where the text begins

textPath Element

The textPath element allows you to put text along a path element and have the text follow the shape. This is a classic SVG demo element because it can make text on a curve.

Did you like this review of SVG elements?

Invest a small amount of time to improve how you use SVG with our hands-on video course, Up and Running with SVG.

Get the video course

Search Git Commits with grep

by Ryan Irelan

A log of commits in Git (retrieved using git-log) can be filtered and changed to output only the commits (or types of commits) that we want to see.

Typically, you review the repository history using git-log by running:

git log

The default log is great for grabbing a quick look at what just happened in the repository. But it takes up a lot space and you can only see a handful of commits at once, unless you have a display the size of a building.

Sometimes, however, we want to only find changes that included certain keywords in the commit message. To do this we use the --grep option and pass in a term or regular expression.

git log --grep="homepage"

This will return a log with commits that only reference the word “homepage” in the commit message.

Used in conjunction with other git-log options (like --author and --since), you can very quickly narrow down the commits to exactly what you’re looking for.

Ready to learn more about Git?

Invest a small amount of time to improve how you use Git with our practical tutorial.

Get the video course

Grunt & Gulp Together (at last)

by Ryan Irelan

We’ve been learning about both Grunt and Gulp with the Mijingo JavaScript Task Runners course.

Two powerful tools, right?

As I mention in the introduction video, you don’t have to choose between the two. Use Grunt for this project and Gulp for that other project. 

Or use them together!

This short tutorial tells you how. Let’s get started.

Joining Gulp and Grunt

You make Grunt and Gulp work together by running your Grunt tasks in your gulpfile.js file. You’ll need to do the following steps in a project already set up with Gulp. Since you learned with the Mijingo course, you can just open up the Gulp project you built in the course and start there.

Install the Node package gulp-grunt by running:

npm install gulp-grunt --save-dev

If it’s not there already, move your Gruntfile.js file to the project (if you’re using the sample project from the course you’ll want to copy it over). We need it there so we can access the tasks inside of Gulp.

We have to make sure the Grunt plugins are installed so the Grunt tasks can run. No Grunt plugins, no Grunt tasks.

Individually install the Grunt plugins you need, or copy the dependencies from package.json in the Grunt project to package.json in the Gulp project.

Because we have added new dependencies, we need to install them in the project. Run

npm install

to install all project dependencies, including the Grunt plugins we just added to the package.json files.

Near the top of your Gulp file, require the gulp-grunt plugin like so:

require('gulp-grunt')(gulp);

Because we’re calling gulp, we need to do this after we define the gulp variable. This loads in the Grunt tasks defined in your Gruntfile.js file. Now we have access to them and can call them from our Gulp file.

Before we do, let’s make sure everything is working okay with our Gulp file. Let’s run gulp in the command line as a test to check.

gulp

Look good? No errors? Good, let’s continue.

Now we need to tell Gulp to run our Grunt tasks. We’ll add the Grunt task sass:dist to the default Gulp task. It will look like this:


gulp.task('default', function() {
    gulp.start('uglify', 'sass', 'grunt-sass:dist');
});

We added the Grunt sass:dist task to the default Gulp tasks by specifying it in the start method.

All Grunt tasks run in Gulp will use the grunt- prefix so they don’t conflict with your Gulp tasks of the same name. You don’t have to rename your Grunt tasks to make this happen, gulp-grunt will handle this prefixing automatically.

Now for the grand finale. Let’s run the Grunt task in Gulp.

Run gulp in Terminal to fire off the default Gulp task.

gulp

At the end of the output you should see something like this:


Running "sass:dist" (sass) task

Done, without errors.
[20:38:24] Finished 'grunt-sass:dist' after 1.2 s

That’s it, you did it!

Further Reading

To learn about all of the options for using the gulp-grunt Gulp plugin, review the official documentation.

Learn More About Grunt & Gulp

My video course will get you up and running on both task runners in just 90 minutes.

Get the Grunt & Gulp video course

Two Types of Git Tags

by Ryan Irelan

There are types of tags in Git: annotated and non-annotated. The names say it all: with one type we tag with an annotation on what the tag is about, while the other is tag without annotation. Both, however, are tags and mark a point of time in the life of the repository.

Annotated Tags

Annotated tags are created with a message so there’s some context–other than the name of the tag–to go with the tag.

git tag v1.2.0 -m "version 1.2.0, including new API"

In addition to the message, annotated tags also include the name of the tagger, and the date the tag was created.

If we run

git show v1.2.0

we will get something like this above the list of changes:


tag v1.2.0
Tagger: Sally Smith 
Date:   Tue Jan 27 14:06:02 2015 -0600

version 1.2.0 of the site

Non-annotated Tags

Non-annotated tags (also called “lightweight tags”) are created without a message, so the only hint as to what the tag is about is how you name it.

git tag v1.2.1

Non-annotated tags will look like a commit object, showing the changes made to the repository, but it won’t have metadata about the tag.

When do I use which tag type?

That short answer is: that’s entirely up to you.

But if you want to include the name of the tagger and a date, you should use the annotated tag. I would use annotated tags for official releases, like MySoftware v1.2.1.

git tag MySoftware-v1.2.1 -m "version 1.2.1, including new API"

This tag shows the tagger name and date, in additional to any information about the release.

For casual tagging, a lightweight or non-annotated tag should be enough.

Both tag types include the entire history log of commits, so you will always have a record of what happened leading up to the tag (remember, a tag is just a snapshot of a point in time in the life of a repository).

Ready to learn more about Git?

Get the video course

Reverting a Git Merge

by Ryan Irelan

Sometimes you get in a situation–and this is a no-judgement zone, we’ve all been there–where you merge branches and you messed up and need to undo the merge because, well, because your co-workers are kind of mad you broke the project.

Let’s say that happened. How do you revert a merge?

We have a my_feature_branch that I’ve been working in. We also have a develop branch that I merge into and deploy to my testing/staging server.

git checkout develop
git merge my_feature_branch

My merge of my_feature_branch into develop broke the site. I need to save myself from further embarrassment in front of my team, so let’s undo the merge into develop.

Because the merge is a commit that points the HEAD to a specific commit, we can undo the merge commit and roll back to the pre-merge state.

To revert the previous commit (our merge commit), we do:

git revert HEAD

We can also specify the exact merge commit that we want to revert using the same revert command but with a couple additional options.

git revert -m 1 dd8d6f587fa24327d5f5afd6fa8c3e604189c8d4>

We specify the merge using the SHA1 hash of the merge commit. The -m followed by the 1 indicates that we want to keep the parent side of the merge (the branch we are merging into).

The outcome of this revert is that Git will create a new commit that rolls back the changes from the merge.

We are saved from embarrassment! The project is working again. Now back to work to figure out why that merge broke the commit.

Ready to learn more about Git?

Get the video course

Learn more advanced Git techniques

by Ryan Irelan

Today I released a brand new course called Git: The Next Steps. It’s a follow-up to the Basics of Git course that gets you up and running with Git version control.

The course has three modules: How Git Works, Git Workflow Tools, and Solving Problems with Git.

We start out with digging in and learning how Git works and why it really is just a bunch of interrelated commit objects (what? you’ll see what I mean when you take the course).

The workflow tools module gives you practical Git commands that will help you immediately. A cool way to create useful, helpful Git log output, merging stashing, and tagging.

Module 3 gives you information for when things go wrong. Because they will go wrong! Learn all about git-bisect, git-revert, and git-reset.

There’s a lot more to learn about Git and this course will take you to the next step.

Start learning Git now

Find Out What A Command Does

by Ryan Irelan

In the command line, you’ll often find yourself wondering exactly what some command does, what the options are, and how, just maybe, you can make your use of that command even better. Here’s how to do it.

The first place I always look when needing more information about the command is the manual (or man as the cool kids might refer to it). Most well-maintained and well-documented tools will have robust manual pages for you to review.

Let’s say we need to know more about git-reset, a tool in Git that allows you to (destructively) rollback changes to your repository.

I know the command is git reset and if add the --help option to it, I’ll get the manual for git-reset.

git reset --help

In the case of git-reset, we get a healthy amount of well-written documentation and very, very helpful Examples area. The examples provided offer real-world scenarios you might face, right from the folks who are working on the Git source code.

Manual for git-reset

Another way to get help with a command is to use the man command:

man ssh

This will display the manual for the SSH command (note that ssh --help does not work).

Not every tool has as robust a manual as Git and SSH but most all do, and you can learn a lot from them. Next time you get stuck, check out the manual!

Want to learn more about the command line? Our Command Line Fundamentals course will get you started on the path to success.

Adding Your Completed Courses to LinkedIn

by Ryan Irelan

An important way to show ongoing professional improvement is by using LinkedIn’s Courses listing. Courses is a section in your LinkedIn profile where you can list the training courses you took online, in person, or at a traditional school.

Adding Mijingo courses to LinkedIn

The major driving force behind Mijingo is to provide you tools and training to continue your professional development. And, you know, it’s important to show that you’re always learning, improving, and staying on top of new techniques in your field.

Let’s make sure you can show what you’ve learned!

To add Mijingo courses you’ve completed to your LinkedIn profile, follow these steps:

  1. Log in to LinkedIn
  2. Under Profile menu, choose Edit Profile
  3. Right under your profile overview, you should see “Add a section to your profile”. Click View More and then choose Courses to add the Courses section to your profile.
  4. Click “Add course” to add a new course. For the course name, use the full name of the course on Mijingo.com and append “from Mijingo” at the end. E.g. “Up and Running with SVG from Mijingo”. Leave the course number blank. Lastly, associate it with the position you have or had while taking the course.

Once you’ve added courses that you’ve successfully completed, save your additions and then review your profile to ensure everything looks correct.

Saving Changes with Git Stash

by Ryan Irelan

In the Basics of Git course, I was in the middle of making some changes to the homepage of our sample site when a another change request came in. I needed to quickly save–or stash away–my changes and then apply them back to the repository later, after my other work was complete.

The easiest way to do this is with git-stash, a useful git command that allows you to store the modifications you’ve made in our working directory and go back to a clean working directory.

From the Git Manual (run git stash --help to see it on your own):

Use git stash when you want to record the current state of the working directory and the index, but want to go back to a clean working directory. The command saves your local modifications away and reverts the working directory to match the HEAD commit.

Git stash isn’t a replacement for smart use of branches (we don’t want to start a new feature in a main branch and then stash it away until you’re ready to apply it) but can be a life saver if we find ourselves needing to quickly shifting gears to another task, bug report, or request.

git stash list

Fire up a current project to try out git stash.

First, let’s check if we have any existing stashes.

git stash list

The list option shows all of the existing stashes, if there are any. If you do have some they’ll be listed like this:


stash@{0}: On develop: testing out git stash
stash@{1}: WIP on master: 4fd1101 fixing layout on homepage product listing
stash@{2}: On develop: product bundle download template

Each stash is listed in a separate line, starting with the stash name that consists of the word “stash” and an index (starting with zero) in curly braces. The latest stash is the one at the top, with the index of zero (confusing, right?).

Let’s add a stash. To do that we use the stash savecommand.

stash save "updated the offline file"

The last two parts of that stash command are optional. We can just do:

stash

instead and it will still create a stash with any changes in the working directory but without are customized message. The save option is automatically assumed if it isn’t included.

Here’s the list of stashes now:


stash@{0}: On develop: updated the offline file
stash@{1}: On develop: testing out git stash
stash@{2}: WIP on master: 4fd1101 fixing layout on homepage product listing
stash@{3}: On develop: product bundle download template

To apply a stash to the working directory, we have a couple of options. The first is:

git stash pop

which will remove the most recent stash from the list and apply it to the current working directory. It’s just reversing what you did when saving the stash (but keeping any subsequent repository changes intact).

You can also be specific and pop any stash in the list:

git stash pop stash@{1}

We should see something like this at the end of the output:

Dropped stash@{0} (38f88c1479dc8a3c63f794feed7cd276ae3c6c7e)

The other option when applying a stash is to use:

git stash apply

Just like with pop, we can choose to not specify a stash and it will use the latest. Or, we can specify one, like this:

git stash apply stash@{1}

With apply, we’ll get similar output when applying the stash, but without the message that the stash was dropped. Why? Because git stash apply applies the stash we specified but it doesn’t drop it from the list of stashes.

If we run:

git stash list

We get the full list of stashes, including the one we just applied.


stash@{0}: On develop: updated the offline file
stash@{1}: On develop: testing out git stash
stash@{2}: WIP on master: 4fd1101 fixing layout on homepage product listing
stash@{3}: On develop: product bundle download template

These are the basic commands when using stashes day-to-day. There’s more to it, and I encourage you to run:

git stash --help

to see all of the commands.

Do you need a primer on Git? Check out our course Basics of Git to get started today.

SSL/Non-SSL Site Locally with MAMP

by Ryan Irelan

In the last blog post we walked through how to set up MAMP Pro for SSL websites. This assumed that your website would be SSL all the time, for every connection. While more and more sites are becoming all SSL, many still only invoke SSL connections for critical situations, like signing in or authenticating, important form submissions, and financial transactions, like purchases.

In these SSL and non-SSL situations, a site visitor is being ushered between secure (SSL, https) and insecure (http) connections, depending on what they’re doing on the site. On Apache, this is typically set up as two different host records, one for port 80 (http) and one for port 443 (https).

When setting this up locally–as a way to emulate how our production server would work–we also need to set up two different host records on Apache.

This tutorial requires that you have a paid (or trial) copy of MAMP Pro.

Set up Non-Secure Host Record

First, let’s set up a normal MAMP host record.

(If you’re new to localhosting, I recommend our free course on localhosting, which includes how to use MAMP.)

Create the MAMP site to point at the local (public) directory of the site files you want to use. Restart the MAMP servers and then go to the site URL to confirm that it is working.

Set up Secure Host Record

This part is already covered in the previous tutorial on setting up SSL on MAMP. In summary: we’ll need to create the new host record for SSL–pointing to the same local directory as in the first step–and make sure we check “SSL” as part of the setup.

Redirecting from Non-SSL to SSL

Unless your software, CMS, or web application is set up to handle the redirect from non-SSL to SSL based on URL, you will want to do it with a redirect, using mod_rewrite rules.

Every situation will be slightly different but here’s an example of how I redirectred non-SSL connections to SSL:


RewriteCond %{HTTPS} off
RewriteCond $1 ^(account|cart/checkout|admin) [NC]
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

This starts with a mod_rewrite conditional to check if the request has HTTPS off (meaning it’s a non-secure request, over port 80), then it checks if the request has one of the URIs listed (delimited by pipes).

I can add as many URIs there to check as I wish. In this example, I’m checking for account, cart/checkout, and admin. These are all common examples of places you’d want to have SSL connections.

If the conditions evaluate to true, then the request is redirected to an https of the same URL. We’re using some variables to grab the current HTTP host and request URI.

Now when someone access mijingo.dev/account, Apache will redirect to https://mijingo./dev/account automatically, never allowing /account to accessed over port 80.

Develop SSL Sites Locally with MAMP

by Ryan Irelan

Local development of SSL sites with MAMP (see our course covering MAMP and other localhosting tools) takes just a few steps to set up. If you’re using MAMP (the free version) you will have to upgrade to MAMP Pro to set up SSL locally.

Here are the steps you need to take to set up an SSL site with MAMP Pro.

Create the Host

Just like we would with a non-SSL site, we have to create a new host first. In MAMP Pro we do this by clicking the + button at the bottom left of the main window. That will create a new entry in the Hosts listing. Name it whatever you want (I’m using mijingo.dev for my localhosting of this site).

If it’s not already, select the new host so you expose the hosting settings on the right side of the window.

I’m working under the assumption that you use the standard Apache ports for MAMP Pro (80 and 443). If you’re not, your site will not be available at the standard SSL port (443). I suggest running the same ports locally as you do in production, just so everything is the same.

Enable SSL

Next up is to enable SSL for our newly created host. With the host selected on the left, click the “SSL” tab on the right side of the MAMP main window.

Check the SSL box to enable SSL for this host. With SSL enabled we need to create certificates so we have an encrypted connection.

Fortunately, we don’t have to buy an SSL certificate for our local development (although, I suppose, we could). We can use what’s called a “self-signed certificate” instead.

A self-signed certificate means that we sign the certificate ourselves to verify its authenticity instead of going through a certificate issuing authority that verifies the certificate is indeed from us. Since we’re just using this locally–and not to serve any pages to the public–using a self-signed certificate if perfectly acceptable.

Create a Certificate file and key

There are two parts to creating an SSL certificate: a certificate file and the certificate key file. MAMP Pro makes it really straight-forward to create both.

Click the button “Create self-signed certificate…” and then fill out the form with your information. The form you input will only be used to create the certificate files on your computer and not sent anywhere.

Creating a Self-signed Certificate in MAMP Pro

After submitting the form, choose the location to save them. I typically choose the project directory or my computer user directory. MAMP Pro will create the certificate files and then add them to your config automatically.

MAMP Pro with SSL Certificates

Save your host file using the Save button.

Test the New Host

Confirm that MAMP Pro restarted the servers properly and then test the URL out in your browser. In my case I’d go to https://mijingo.dev/ and it should load the site properly over SSL and port 443.

Now that you have that done, learn more about localhosting in our free course Reliable Localhosting.

Bash Alias to Download and Extract Latest WordPress

by Ryan Irelan

In the last blog post we covered the basics of bash aliases and how to create one. This time I want to jump back into Greg’s Command Line Fundamentals course and share a nice trick on how to automate downloading and extracting the latest version of WordPress.

This is an alias we could use just about every single day.

I have an empty directory on my computer called new-wp. I want to create an alias that will:

  1. Download the latest WordPress via wget
  2. Unarchive the download using tar
  3. Clean up by deleting the downloaded archive.

Here’s what the alias would look like:

alias get_wp="wget http://wordpress.org/latest.tar.gz && tar zxvf latest.tar.gz && rm latest.tar.gz"

The first part is using the alias keyword to start defining a new alias, followed by the name of the alias. In this example we’ll call it get_wp.

Then we define the commands, starting with wget, fetching the latest.tar.gz file on the WordPress server, which always contains the latest version of the software.

We use the && operator to tell Bash to run an additional command (but only when/if the first one completes). The second command is to unarchive the file using tar.

Finally, we add another && operator to remove and bash the downloaded archive. Since we’ve already unarchived it, we no longer need it around.

Now run the command inside the new-wp directory

get_wp

and see the magic happen!

If you prefer to watch instead of read, check out this excerpt of the same tutorial from Greg Aker’s Command Line Fundamentals course:

Why should you use SVG?

by Ryan Irelan

There are several reasons why SVG might be a good way to create some graphical assets on your website.

Scalable

It’s what the “S” stands for. Unlike traditional images (like PNG or JPG) SVG easily scales from small to big without loss of quality or fidelity. This is because the “V” part of the name–vector–describes the series of paths, shapes, and more that are created using connect points plotted on x-y axes.

You might have noticed that SVG has come back into favor recently among web designers and web developers because of a combination of better browser support (see below), improved screen resolution (like Retina screens on iPhone, iPads, and MacBooks) and Responsive Web Design.

File Size

Another reason to use SVG is because of a file size. SVGs are typically smaller files. For example, I took a large size version of my Mijingo logo and converted it to an SVG of the same canvas size. The PNG image was 30KB and the SVG image was only 6 KB. Big savings, especially if you working on a site that requires a lean performance budget.

Modifiable via CSS and JavaScript

Since SVGs aren’t bitmapped images, they’re easily modified using both JavaScript and CSS. This makes it simple to have a base SVG file and repurpose it in multiple locations on the site with a different treatment.

SVG images aren’t perfect for everything, however. Ideally, you’d use SVGs for icons, simple line graphics, and, if possible, logos. SVGs are ideal for imagery that are used multiple times on a page (like interface icons).

Do you want to learn more about SVG? Check out our course Up and Running with SVG to get started!

Samantha Warren on Style Tiles

by Ryan Irelan

From An Event Apart in Austin, Samantha Warren covers how to make faster design decisions using style tiles.

What if we had an artifact that not only helped us communicate with clients, but allowed for developers to jump into the project earlier? Style tiles are a design artifact consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They create a strong foundation early in the web design process for talking with clients, establishing a visual language, and working iteratively with developers. Learn how to apply design principles and bring confidence and agility to your process by using style tiles.

Watch the entire talk for free courtesy of An Event Apart:

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.

Run Gulp from Sublime Text

by Ryan Irelan

My friend and fellow teacher Mike Clark alerted me to this one after he saw it in the Sublime Text Tips email newsletter. And it is very cool.

Gulp is a Sublime Text package that makes it very, very simple to run Gulp commands and tasks right from Sublime Text.

It’s really easy to get started with it.

Running Gulp tasks inside of Sublime Text

Installing Sublime Text Gulp

The Gulp package is installed using the Package Install command in Sublime Text.

  1. Type Shift-Command-P and then type “package” until you get the “Package Control: Install Package” option.
  2. Hit Enter to have Sublime text retrieve the package index.
  3. Type “Gulp” to search for the Sublime Text Gulp package. Once you found it, press Enter to install it.

That’s it!

Running Gulp in Sublime Text

If you already have a project with a Gulpfile.js file, open it in Sublime Text. Now we use the Command Palette (Shift-Command-P) to run your Gulp tasks.

  1. Shift-Command-P
  2. Type gulp
  3. Choose “Gulp” or “Gulp (silent) which will run them in the background without output
  4. You’re done!

Running Gulp inside of Sublime Text

If you spend a lot of time in Sublime Text and need to run a special task that isn’t automated as part of gulp watch then this is a great plugin to have.

Learn more about Gulp in our JavaScript Taskrunners: Grunt and Gulp 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.

Cutting Assets with Slicy

by Ryan Irelan

Preparing assets properly for web or mobile apps can be a pain. You have to create multiple sizes and versions and you have tediously go through the PSD to export what you need.

In this excerpt from the Fundamentals of iPhone App Design course, Funsize designer Rick Messer shows how to use Slicy to quickly export assets for the NearMe iPhone app he builds in the course.


To get start using Slicy here’s what you need to do:

  1. Download Slicy (and then grab a license) and install it (Mac OS X only)
  2. In your PSD, properly name your layers per the instructions Rick gave in the video (the layer name should be the name of the image you want to export). If you’re designing at 2x then Slicy will automatically create the 1x images for you (pretty cool!).
  3. Set up AutoRepeat in Slicy so it will automatically export new images when you edit the layers.

Want to learn more about iPhone app design? Watch our Fundamentals of iPhone App Design Course.

Why You Shouldn’t Use Git Fast Forward

by Ryan Irelan

I’ve been using the Git Flow branching model for a while (but at times not very strict). Maybe because it’s buried in the original article but I didn’t realize until now that there’s a very good reason to not allow fast-forwards when merging branches.

The –no-ff flag causes the merge to always create a new commit object, even if the merge could be performed with a fast-forward. This avoids losing information about the historical existence of a feature branch and groups together all commits that together added the feature.

If you do git merge without the --no-ff option then

it is impossible to see from the Git history which of the commit objects together have implemented a feature—you would have to manually read all the log messages. Reverting a whole feature (i.e. a group of commits), is a true headache in the latter situation, whereas it is easily done if the –no-ff flag was used.

I’ve been there. Using --no-ff would’ve saved me a lot of time.

If you aren’t already familiar with it, Vincent’s A successful Git branching model is a canonical article on using Git.