Why web developers and designers should use Grunt

Work smarter, not harder

The purpose of this post is to help people who are uneasy about using Grunt or other command line tools become aware on what they are missing out on. Chances are, there are a number of reason why you haven’t used these awesome tools that’ll make your life so much easier. I too, was hesitant to use unfamiliar tools, so I hope this post can help ease the transition into being a super efficient web developer/designer.

No knowledge of grunt or node.js is necessary to get something out of this post. If you’re familiar with these tools, you probably don’t even need to read this article. There’s nothing technical in this post, just persuasion points to try to help people to see that they should be working smarter, not harder.

This post if for you if:

  • You find yourself repeating the same mundane tasks over and over while working on a website
  • You put off updating your website because it’s a lot of little time consuming steps
  • You want to take your web development/design to the next level by increasing efficiency (like by minimizing/concating files)

What is Grunt?

Grunt

In very basic terms, grunt is a script that automates mundane tasks. Tasks that you shouldn’t be wasting your time on if you’re a web developer. I mostly use Grunt to minify and concatenate my JavaScript and CSS files, but its capable of so much more than that.

How much of a difference can it really make?

I can actually give a real life example. I worked for an organization who had a website which had 18 separate asset files totaling 508kb. Some of them were CSS, most of them were JavaScript. The website was calling all 18 files individually and none of them were minified. One of my first tasks was to audit these files and see if I could optimize them in any way. They were also using an old version of Bootstrap and wanted to use the latest version because of all the cool new features of Bootstrap 3.

So my mission was get the performance up while not losing any functionality or the way the site looked. I upgraded their framework to Bootstrap 3 which is larger in file size (and which could be a topic for a completely different post because it was kinda tricky) and I reduced the number of requests to 3 files totaling 274kb. That’s a 54% reduction in size and a 600% reduction in server requests.

In a time when more and more of our traffic is coming from mobile devices, this was a pretty big win for us. The only reason I was able to do this in a sustainable way is because I found Grunt to help automate the concatenation and minification of files.

What Grunt allows you to do

Grunt allows you to separate your development files from your production files. This is really quite important and should excite you. This means you can develop the site as you always have, but now you’ll have a buddy named Grunt running in the background, doing the (excuse the pun) grunt work of optimizing files.

Grunt also allows you to easily deploy your websites via FTP or rsync. This will be a subject of a future post. You don’t even need to know how to deploy a website with Grunt to get something useful out of it.

Since Grunt runs on top of node.js, you’ll have access to package management via npm (node package manager). This is pretty cool and once you get more comfortable with grunt, you’ll see how cool it is to be able to install packages from the command line.

I’ve used Grunt with static HTML sites, PHP sites, and WordPress theme development and it hasn’t let me down yet. Grunt is capable of so much, but I’ve only found good use for it as a tool to help me automate my front-end web development.

Are you sold yet?

You should be, but in case you’re not, let me give you a real use case.

For example, say you are developing a site and you have 4 javascript files.

On your site when you call those javascript files, you probably have something in your HTML that looks like this:

<script type="text/javascript" src="scripts/script1.js"></script>
<script type="text/javascript" src="scripts/script2.js"></script>
<script type="text/javascript" src="scripts/script3.js"></script>
<script type="text/javascript" src="scripts/script4.js"></script>

This means your website is going to make 4 requests to the server to load these javascript files. But because you are an efficient web developer, you want to cut these 4 requests down to 1 and minify it so its as small as possible. So if you’re clever, maybe you’ll combine by copying & pasting, all these files into 1 file, then name it script-combined.js and minify it using a tool like this. Then you could load the file like this in your HTML:

<script type="text/javascript" src="scripts/scripts-combined.js"></script>

Now you’d have 4 javascript files combined into 1 file that is minified to be as small as possible. That would be one way to do it, but what about if you need to make updates to script2.js or script4.js?

You have to go through the steps again. Every update would be painful and would require you to perform the same repetitive tasks over and over. This doesn’t have to be the way though. If you’re currently doing development like this, stop it right now and learn these tools. Using grunt, you could literally perform all these tasks with 1 command in your command line or terminal. Now that’s efficient!

All the cool kids are doing it

Organizations like jQuery, WordPress, Twitter, and even WalMart use grunt to help with their web development needs. This is just another point in grunt’s favor of being an awesome, reliable tool. I’m normally hesitant to try out new tools, but when well-known companies and organizations adopt them, I know there must be something there worth checking out.

What’s next?

Be aware that its normal to be hesitant to trying new tools. There is a slight learning curve to picking these tools up, but don’t let that discourage you. You’ll be much better off with them than you were without them. 6 months from now you’ll wonder why it took you so long to check into these. If you’re intrigued and want to give grunt a shot, here’s some awesome links to check out.

Reflections on 2013

2013 was a crazy year for me. It marked a lot of important events in my life and was the culmination of years of hard work.

In February I was hired as a student worker on campus. This meant I didn’t have to work in fast food places anymore and I was making a decent wage doing something I actually enjoyed. I almost didn’t think this would ever be possible because I worked some not so motivating jobs over the last 8 – 9 years. At my new gig, I worked with a senior web developer and made some really cool things for the campus website. That marked the moment where I knew what I wanted to do. I always knew I wanted to do something that was working with the web, but specifically working at a university sounded best of all. I really enjoy campus life, so working on a campus seemed like it would be pretty cool after graduation. That felt like the perfect next step for me to take.

On April 19 I was awarded the Outstanding Senior in Information Science award at SUNY Oswego. The announcement took me by surprise because I still felt like I had no clue what I was doing, but the award was much appreciated and boosted my confidence.

In May, I graduated magna cum laude from SUNY Oswego with a major in Information Science and a minor in Computer Science. My time at SUNY was so meaningful. I went in knowing I wanted to better myself. The environment in the computer science department really helped foster change in me. My CS teachers were phenomenal, and even my non-CS teachers (philosophy and native american history) were very good at what they do. Excellent faculty, challenging courses, and motivated peers made for a great learning experience.

Also in May, I applied for my first “real” job at a University for a web developer position. My qualifications were pretty good for the job minus a few things but I figured I’d give it a shot. The worst that could happen was they would say No and I’d be in the same spot as when I started. I knew I must be doing good when I was called back for a second interview less than a week after my first interview.

In June I was officially hired as an Associate Web Developer at Binghamton University. It was a good place to work and it fit in really well with my wanting to work at a University. The campus was beautiful and my co-workers were hard working. I was working on campus when Barack Obama visited Binghamton. It was all a lot of fun, but it was weird leaving Oswego. My wife and I both missed the lake as well as our friends and family. Also, living in Vestal (just outside Binghamton) was pretty expensive and it was hard to get a foothold financially.

In August, I noticed an opening at SUNY Oswego for the same position title I currently had in Binghamton. I wasn’t sure if I wanted to go back to Oswego at first but I felt like I would regret it if I didn’t at least try and see what happens. I applied, interviewed, and was hired in late September, early October. It was a good feeling that we were coming back but we laughed that we didn’t even get to experience one winter away from Oswego. Oh well ๐Ÿ™‚

My last day at Binghamton University was October 17 and it was bittersweet. Leaving our life in Binghamton was hard, but luckily we weren’t too rooted there yet. Months after leaving, I still think about our experiences down there and the people I worked with. We really got to like the Nature Preserve on campusย and I was building some neat things at work. I’m really thankful for the opportunity and experiences I had at there.

On November 4 I began working at SUNY Oswego. It felt good to be back where I worked as a student. I immediately hit the ground running with some neat projects (hopefully will be launched before Spring, but we’ll see) and had the opportunity to completely redo my workflow. I integrated some incredibly valuable tools into my arsenal and have become a lot more efficient because of it.

So in 2013, I’ve received an award, got a job that made me realize what I really wanted to do, graduated college, got my first real job, moved to Binghamton, got my second real job back in Oswego, moved back to Oswego and re-imagined how I work. When I think of where I was at just a year ago, I feel really good about where I’m at right now. It’s all because of a decision to be better and then staying focused on the path.

As this year winds down, it’s time to start thinking about how to make 2014 even better than 2013.

Making wp_nav_menu work with Bootstrap 3 navbar

Notice! This only works with single level navigation. If your nav needs a dropdown, follow this tutorial which uses a custom nav walker. If you’re using a single level nav, this will do the trick.


I’m currently re-designing my homepage functionally and aesthetically and I wanted to use the Bootstrap 3 navbar on the re-design. After wrestling with the code for a little bit, I finally got it to work.

The following is in header.php

Leave any questions in the comments below.