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.



Posted 04.25.2013

How to Create Screencasts

One of the things that I’ve started doing recently for all my clients, when they get a WordPress site, is creating video screencasts for training. It’s so much easier than writing out documentation, submitting it as a PDF, and hoping they’ll be able to find it when they get ready to update their site.


Tools I’m Using

Screenflow

Screen Flow

This is probably the most expensive piece of the puzzle ($99). There are several different screencasting apps for you to choose from. I bought a license for Screenflow 2 years ago, so it was just one easy payment of $29.95 for the upgrade.

But, if you pay attention to a lot of the movers and shakers online, this is their weapon of choice.

Starting Screenflow
This software offers quite a bit of features. When you’re ready to go, just select “Record” from the menu and you’re off to the races. When you’re done, it launches an editing panel, where you edit your video. It makes it nice that it’s an all in one piece of software and I’m not having to switch to Premiere or Final Cut. Usually, I’ll just trim off the beginning and the end and export.



Mouse-Pose

Mouse Pose

This is a little program that I found on the App Store ($4.99). I got purchased it when I was speaking at Women’s Forum last fall. For $5 the ladies there were just impressed with this program as they were with my talk…not sure what that’s saying…about me or about this program!

But, it allows me to spotlight my cursor, show red circles when I click on something, and then if I type, it shows an overlay of what keys I’m hitting. — Which is great, because I’m a huge fan of short cut keys. Most of the time, I don’t even think twice about it. So, at the very least, with this it helps the user follow what I’m doing.


Snowball Microphone

 

Snowball Microphone

I hate it when I go to websites, watch screencasts, and the speaker sounds like he’s coming through a tunnel. This might be a frivolous purchase to some, but IMHO for $68.99 dramatically increases the quality of production.

It was insanely easy to setup. I extended the legs on the stand and screwed on the snowball. Then, there’s a USB port on the back that plugs directly into my laptop. When I open up Screenflow, it automatically recognizes the microphone. I just make sure it’s selected in the dropdown. Done.


Vimeo Plus Account

I didn’t want to have to worry about compressing my videos, customizing a player, or storage. This was by far the easiest solution. It’s only $9.95, or I went ahead and paid $59.95 for the entire year.

Vimeo’s pretty slick. I knew I always preferred their video player to YouTube’s, but they’ve done an execellent job in refining their product. For example, I can connect my Dropbox account to Vimeo. When I export a video, I can simply drop it in Dropbox. Then, when I log into Vimeo, I can simply port it over. Of course, the upload button works too.

Vimeo Settings

Once I’ve uploaded each of the videos to Vimeo, I go into the Settings section. Under privacy, I changed the following settings:

  • Who can watch this video to “Hide this video from Vimeo.com” only my clients need to be able to see this information. Besides, I don’t want to make it any easier for Joe Hacker.
  • Where can this video be embedded? to “Only on sites I choose.” Then, I’ll list my client’s URL and if the site is currently on a staging site, I’ll my staging server too.
  • Who can comment on this video? No one. Honestly, I’m not sure if this setting necessarily makes a difference because we already determined that we’re hiding it from Vimeo.
  • Additional Vimeo Settings

    At this point, I can grab the embed code. But, if you’re interested, there’s several other settings you can mess with, especially under the “Embed” tab. Like changing the color.


    WP Help

    WP Help PlugIn

    This is the last piece of the puzzle and argueably the most important. I install this plugin on my cleint’s site. It then provides a link in the left hand navigation that they can visit when they’re logged in. Then, I just add posts, similar to writing a standard WordPress blog post and copy and paste the embed code provided by Vimeo. That’s it.


    It’s pretty simple, but in a small way, I’m quickly adding a big value to the sites that I build for my clients.

    What other ways have you found that increase the value of your work? Do you make screencasts too? What’s been your experience? Do you use the same software?