Updated 02.21.2015

Accounting for Freelancers (Part 1)

I’ve been doing freelance full time for 2 years now. It’s been a lot of fun, but I’ve quickly discovered that there are certain things they don’t teach you in design school. Accounting sheets, for example. It’s no wonder, most creative type, run the opposite direction when it comes to math. In fact, I have one designer friend that chose art, simply because it was the major that required the least amount of math credits!

I’ve quickly learned, though, that accounting is essential to what I do and helps guarantee that my business stays healthy and afloat.

First things first. I keep all my business money in a separate banking account. In fact, I even keep it at a separate bank to make sure there’s absolutely no confusion. This makes it so much easier when I’m trying to keep track of business income and expenses.

I have two batches of spreadsheets. The first batch, guarantees I’m recording all the information that the IRS needs, come April. The second batch (for another day), helps me forecast business and predict how long I can keep keeping on.



NOTE: You can access my Google Spreadsheet here. In fact, if you have a Google account, you can go to File > Make a Copy and it will save a version that you can edit in your Google Drive.

Expenses

My expenses sheet tracks all the purchases that I make. I use a professional accountant to prepare my taxes. Each year, he asks me to breakdown my expenses by category. On the spreadsheet, I’ve created a drop down on my options. This is far from an exhaustive list, but this list covers all of expenses.


Mileage Log

On this sheet, I track my mileage. This can be everything from visits to a clients office to picking up office supplies, as long as it’s purely a business trip. It’s important that you fill out the purpose of the trip. It doesn’t have to be detailed, but it’s something the IRS will want to know, if you’re ever audited.


Utilities

On this sheet, I track all my utilities. If you had your own office space, you can easily fill in the blanks. If you have a home office, like I do, I still fill in what all my bills are, but, I also include additional information. For example, how many square feet my home office is, the percentage of minutes I use are business calls, etc.


IRS Payments

On the IRS Payments sheet, I keep track of all the estimated quarterly payments I make to the IRS.

Whenever I make a deposit into the bank, I automatically move at least 30% from my checking account into my savings account for these quarterly payments. This way, when that time rolls around, I know the money is there.

You can go to the IRS website and print off the 1040-ES vouchers. When you submit your payment to the IRS, you’ll include the appropriate voucher. There’s also information in the packet about where payments should be mailed to.


Income

On this sheet, I keep track of all the income that I make. This is an important reference when I get ready to write my IRS checks.


Part 2

You can read more on Accounting for Designers (Part 2), which focuses on the part of accounting that keeps your business afloat: business opportunities, cash flow, etc.


What are other things you keep track of? Do you use spreadsheets or QuickBooks to keep track of everything?



Updated 11.25.2014

Step by Step Instructions for Displaying a Vimeo feed with jQuery

Prologue

A while back, I wrote a post on displaying a Vimeo feed using jQuery.

Recently, I had to do this for a client site. Knowing, I had written a blog post, I naturally, pulled up my blog post, so I could follow my own advice. (One of the good things about blogging = documenting your own process)

However, I quickly discovered, my code was outdated. None of it worked! Even the site that I referenced in my post, their code didn’t work! My Google Search returned my post as the top hit! — and any links after that were outdated too!

So, I wanted to update my content, using code that actually works (go figure).


The Actual Work

I found a code repository on GitHub that had everything I needed. So, download the code (direct link).

Vimeo Feed and jQuery Screenshot

You’ll see there are several examples for you to work from. No need to reinvent the wheel!

For the site I was working on, I neeed to display a featured video at the top with thumbnails beneath it. Within the simple-api folder, there’s a folder called gallery, then I grabbed the js-example.html file. It already has everything you need.

Displaying a Vimeo Feed - Finder

I copied the CSS out of the header, and placed it in my site’s CSS.

#thumbs { 
  height: 298px; 
  width: 300px; 
  border: 1px solid #E7E7DE; 
  padding: 0; 
  float: left;
  
    ul { 
      list-style-type: none; 
      margin: 0 10px 0; 
      padding: 0 0 10px 0;
      
      li { 
        height: 75px; 
      }
  }
}

.thumb { 
  border: 0; 
  float: left; 
  width: 100px; 
  height: 75px; 
  background: url(http://a.vimeocdn.com/thumbnails/defaults/default.75x100.jpg); 
    margin-right: 10px; 
}

#embed { 
  background-color: #E7E7DE; 
  height: 280px; 
  width: 504px; 
  float: left; 
  padding: 10px; 
}

#portrait { 
  float: left; 
  margin-right: 5px; 
  max-width: 100px; 
}
  
#stats { 
  clear: both; 
  margin-bottom: 20px; 
}

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.

I also copied the javascript and pasted it in my site’s JS folder. (Don’t forget to make sure you’re using jQuery).

var apiEndpoint = 'http://vimeo.com/api/v2/';
var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
var oEmbedCallback = 'switchVideo';
var videosCallback = 'setupGallery';
var vimeoUsername = 'brad';

// Get the user's videos
$(document).ready(function() {
  $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);
});

function getVideo(url) {
	$.getScript(oEmbedEndpoint + '?url=' + url + '&width=504&height=280&callback=' + oEmbedCallback);
}

function setupGallery(videos) {

	// Set the user's thumbnail and the page title
	$('#stats').prepend('<img id="portrait" src="' + videos[0].user_portrait_medium + '" />');
	$('#stats h2').text(videos[0].user_name + "'s Videos");

	// Load the first video
	getVideo(videos[0].url);

	// Add the videos to the gallery
	for (var i = 0; i < videos.length; i++) {
		var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
		html += '<p>' + videos[i].title + '</p></a></li>';
		$('#thumbs ul').append(html);
	}

	// Switch to the video when a thumbnail is clicked
	$('#thumbs a').click(function(event) {
		event.preventDefault();
		getVideo(this.href);
		return false;
	});

}

function switchVideo(video) {
	$('#embed').html(unescape(video.html));
}

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.

Replace the vimeoUsername name with the vimeo user you’re trying to pull from.

Displaying a Vimeo Feed

Then, copy and paste the containers within the HTML, into yours. it’s important that you leave the id tags alone so that the JS can grab them…errr.. if you’re going to change them, change them within the JS file too. Also, make sure those tags don’t conflict with your existing DOM.

<div id="stats">
  <h2></h2>
	<div style="clear: both;"></div>
</div>
<div id="wrapper">
	<div id="embed"></div>
	<div id="thumbs">
		<ul></ul>
	</div>
</div>

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.

You should be good to go! — Unless of course, you want to restyle some elements (which is what I did). But, this will at least get you pointed in the right direction.

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.