Harvest4Clients Fork

Posted: February 14, 2014, filed under: Projects

No demo online yet, so a screenshot will suffice for now.
No demo online yet, so a screenshot will suffice for now.

I am in the process of transitioning all of my work to hourly billing and am looking for an easy way for clients to check in on my hours. I am a happy Harvest user, but it doesn’t offer an easy way for clients to view hours (unless I am missing something).

There are a bunch of add-ons developed using Harvest’s API, and one of them is Harvest4Clients by Jeron Kenters. The application provides a simple, password protected area where clients can see billable and unbillable hours, and a record of past invoices. I recently forked it and slapped on a nice Bootstrap 3 front end. There are a few todos still (mainly getting the jQuery UI datepicker out of there), but it’s totally useable!

 Check it on Github.

Show a title when hovering over an image with jQuery or CSS

Posted: February 5, 2014, filed under: Tutorials+Tips

Looks kinda like that.

It's not too hard! I was writing up a demo and figured I might as well share it with the world. You can do it in CSS or jQuery, definitely useful for galleries.

The Markup

A couple of figures surrounded by a nice, clearfixed wrapper (love those!):

<div class="wrapper clearfix">

    <figure class="gallery-item">
        <img src="http://placehold.it/300x300">
        <figcaption class="img-title">
            <h5>Image Title</h5>    

    <figure class="gallery-item">
        <img src="http://placehold.it/300x300">
        <figcaption class="img-title">
            <h5>Image Title</h5>    


Read More →

Poster design

Posted: January 25, 2014, filed under: Design, Projects

Kinda fun! For a mission teaching high school students about genetics.

Medal Illustration

Posted: January 9, 2014, filed under: Projects

This is for a poster for a 7th grade class’s mission called “Quest to Discover the World’s Greatest City” at Q2L. Students will measure the per capita income, crime, cost of living, and other statistics to determine the greatest city. Hmm..maybe Pittsburgh?

2013 Web Design Shout Outs

Posted: December 29, 2013, filed under: Design, Ideas, Inspiration


The past few weeks I have been entirely overwhelmed with inspiration and need to drop some serious shout outs:

People and Places

First and foremost, the the entire web design/dev/tech community. What an open, motivating, and supportive group of people! In particular:

Read More →

Responsive Video Embeds [Snippet]

Posted: December 15, 2013, filed under: Tutorials+Tips

Update 4/23/14: Just use Fitvids, but this does essentially the same thing.

How to make embedded videos responsive? It is very annoying, especially in WordPress where you can't count on theme users to modify the HTML. Because embedded media like Youtube and Vimeo videos require a height attribute to be more than 150px tall (that's the browser default), you would have to adjust the height with media queries which would be unreliable and verbose. Here's a simple bit of jQuery and CSS that will solve these headaches, wow!

First we wrap all iframe, object, and embed elements in a .media-wrap class that will be styled. This step isn't necessary if you can just wrap the elements yourself.

// Wrap all media in a figure element 
var $media = $('iframe, object, embed');
$media.wrap( '<figure class="media-wrap"></figure>' );

Then add some styles for the wrapper, courtesy of this blog post by Michael Lancaster.

Read More →

Update: Teaching endeavors in NYC

Posted: November 26, 2013, filed under: Projects


NYC is treating me well, no doubt. In addition to part-time work at the Institute of Play, I've found a real passion for teaching and a few excellent opportunities:

Front-end Web Development at General Assembly

This is a ten week course covering HTML/CSS/JS and more, similar to the one I taught this summer at the Saxifrage School. The class has 27 students and, being so large, it is a more traditional classroom format where we code together and I explain concepts as we go. Being in the front of the class, I don't get the visual/body language feedback from students like in a round table or discussion structure. It took me a class or two to get in the groove, but I think it's going really well now and is a lot of fun. Also, I've got a pretty pro profile on the GA site, so that's cool.

Website Bootcamp for Creative Professionals with Simple Labs

Started by Nate Cooper at Simple Labs, this is a two hour crash course in websites. It's perfect for creatives not necessarily looking to make websites, but to learn the lingo. Curriculum-wise, I'll hit on client-server communication, the difference between HTML/CSS/JS, mobile web, about CMSs (mainly WordPress of course), and the current relationship between design and development today.

Interested? It's at 7pm on Dec. 17th at the Centre For Social Innovation in Chelsea. 25% discount here and on Dec. 4th, come meet the developer (me!) for free (breakfast included!).

Read More →

How the Internet Works Comic

Posted: November 21, 2013, filed under: Miscellaneous


I’ve totally posted this before, but just want to reiterate how great it is. I used it in my class at General Assembly and I think it was an excellent guide for talking about what is normally a really confusing/jargon-heavy topic.

via Fabulously Broke

Responsive-ize WordPress Gallery Thumbnails with Sass

Posted: November 3, 2013, filed under: Tutorials+Tips, WordPress

UPDATE: Just use Justin Tadlock’s Cleaner Gallery plugin.

I am in the midst of rewriting my WP theme WPFolio Two. I wanted to make the gallery thumbnail images a flexible width rather than their default fixed width. To do this, I gave the attachment images themselves a width: 100%; but needed to apply my responsive grid to each image’s container. So, how to conditionally add the .threecol, .fourcol, .fivecol to each gallery item according to the number of gallery columns selected?

The answer is Sass! Here’s a simple loop that creates a style for each gallery class and gives a %age width according to the number of columns:

$width: 100%;
@for $col from 1 through 9 {
	.gallery-columns-#{$col} dl { 
		width: $width/$col;

There would definitely be a fancier way to do this instead of width: $width/$col; if I was using a Compass-y grid like Susy or Singularity. This is on my to-do list.

Lastly, these styles come into play at the tablet size of 768px. For smaller devices, the columns specified in WP will be overridden to two columns or so. I’d post that code, but I can’t work on it now because Mavericks (i.e. sloppy me moving folders around) messed up all of my file permissions, thus no localhost for me at the moment.

Cargo Cult CSS

Posted: October 31, 2013, filed under: Design, Research

About every other day I read a blog post about a new take on CSS best practices. I think either “I’m doing right!” or, “Ohh that makes sense, I’ll change my ways”. Cargo Cult CSS is another of these posts, and resulted in an “Ahh…now I’m really confused, but this was an excellent read.”

NYC + Cute creatures

Posted: September 27, 2013, filed under: Projects

Big news!

As of the middle of September I started as the Design Assistant at Quest to Learn in New York City. My job is, well, assisting the game and learning designers at Q2L’s Mission Lab. It’s been excellent so far – I’ve gotten some fantastic insight into what goes on at the Institute of Play and the the school, plus everyone there is great. I love NYC so far, though I still need an apartment…

One of my first tasks at the Mission Lab was to make some cute creatures for a game about legends. Results below (Bigfoot stealing the show, of course):


The job is part-time so I will continue my freelancing, though I’d like to shift my focus to teaching. More soon!

Social Studies with Charades & SMALLab

Posted: July 17, 2013, filed under: Games, Projects

Recently I've been thinking about adapting common party games for the classroom. The energy and quick thinking involved in games like Charades, Celebrity, Pictionary, and Taboo would work well to help students internalize facts such as historical names and events. "Who Am I" (title will change, don't worry) is basically Charades using SMALLab to provide visual feedback and an architecture for team play. I made a very rough video of how it would work (do not judge my animation & video skills on this!):

In case you don't feel like watching it, here's an illustration and brief description:


In the above image, students have been divided into 4 teams. One student from each team has been given a character to act out such as Ben Franklin, Abraham Lincoln, etc. That students stands in the center of each quadrant. When the game begins, the center student silently acts out their character while his/her teammates guess who they are.

Read More →

I’m Just a Bill

Posted: July 16, 2013, filed under: Inspiration

Some inspiring, light-hearted nostalgia for you (I just returned from a month in Europe and am not quite ready to write a substantial post). After that, maybe take a look at Jimmy Kimmel’s parody “You’re Screwed”.