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.

Awesome tools for data recovery

So I did something incredibly stupid the other day. While trying to do a clean Linux install, I wiped my external HDD clean and overwrote it with an OS. I meant to do that to my internal drive but I messed up, badly. I absolutely was just not paying attention to what I was doing. I had other things on my mind and when I realized what was happening, my reaction was something like this:

Michael-scott-no-god-no

I had 4+ years of photos, a large collection of wallpapers, animated gifs, purchased mp3s, and other valuable information stored on that external HDD. I thought everything was lost forever, but I wasn’t going to just give up. So I turned to my trusty friend Google and asked it for help. I came across a number of resources which I’d like to share with you here.

PhotoRec
The steps laid out in the above link is what I used to recover most if not all of my data that was wiped AND overwritten. I’m not sure if I got it ALL because I had so many photos and other files but a large majority of them seem to be there. Follow the instructions in that link and you should be good to go.

BootMed
This was the first thing I stumbled upon. When you download it, you get a zip file containing an iso. Burn that bad boy onto a CD/DVD and boot your computer from the CD/DVD you just made. It’ll load Ubuntu 10.10 with some custom tools installed. When Ubuntu boots up it’ll open a website in FireFox automatically with some instructions. You can use either TestDisk (this one didn’t work at all for me) or PhotoRec (worked amazingly). I recommend burning a copy of this iso to have handy in case of emergencies! It has a lot of nice tools packaged into one iso.

Testing Websites In Different Versions of IE

As a web developer, older versions of IE can be a little tricky to work with. They require a little more time and attention than Chrome or Firefox. HTML and CSS rules are somehow different in IE than in other browsers so it’s important to make sure your site works in IE. The absolute best way would be to download a VM image of Windows XP and actually run IE6 and IE7 to test your site. But, if you’re not into installing a VM of XP, there’s something you can do: IETester.

I’ve used it a couple times and it seems to have a few bugs in it, but overall its a nice free tool to check what your site looks like in IE.

Free Online Computer Courses From Stanford University

The flow of information in this day and age is absolutely phenomenal.  Choose wisely how you use your time – the ONLY non-renewable resource.  I realized I spent a lot of my day consuming information dessert, instead of information that will actually help me to be a better person or help other people.

To make a long story short, I’m trimming my internet usage to consume more information vegetables instead of information dessert.  To know more about what I’m talking about, check out Justin Pots’ article called Eating Only Dessert: Why Your Information Diet Is Probably Terrible.  He makes the point that industrialization has taken over a lot of aspects of our society, and now it’s fully integrated into our media consumption.  The result?  Lots of cheap, unsubstantial information.  Lets face it, research and statistics are hard.  Why not just talk about a new laptop that’s coming out or how X celebrity is doing.

The bright side?  This is the internet!  As much garbage information is out there, there’s also a lot of useful information for self or societal betterment.  I just recently stumbled upon Stanford’s Open Classroom.

Ever wanted to learn how to program or wonder exactly what goes in to making a web application?  Or maybe look into algorithm design?  Check out Stanford’s Open Classroom for lots of awesome classroom information.  You can even get a signed certificate from the teacher after proving you’ve completed the course.