In other project news, I just launched designer Karol Miekina’s new portfolio site. Her design of the site is fantastic and turning it into a responsive wordpress theme was a lot of fun.

In about a week and a half I will be starting a new full time position at Sanborn Media Factory as a Front End Developer. I’m a little sad to leave The New School, but super psyched to be going over to SMF. They do a lot of really exciting, interesting work and it will be awesome to be a part of that. I recently finished up a freelance project with SMF, doing the front end development and wordpress theme for a microsite they created and designed for Xerox and The Week, called Business Made Simple.

But really, just go vote for that damn Webby. That’s all I really care about.

The New School
Front-end development (css, javascript, html) and responsive framework. Design by Alexandra Ståhlberg and Elizabeth Kuehnen.

Brighter Lights Media
Responsive website design and WordPress theme development

Dead Presidents Lounge
Responsive website design and WordPress theme development

Bantie
Responsive wordpress theme development for Bantie. Site design by Dalston Creative.

The New School for Public Engagement
Front-end development (css, javascript, html) and responsive framework. Design by Sarah Daley.

The New School Information Technology
Front-end development (css, javascript, html) and responsive framework. Design by Laura Scherling.

Christman’s Windham House
Responsive website design and WordPress theme development

Those are some of the bigger projects that have happened. All very exciting and rewarding in various ways, but the most fun I had was definitely in building the functionality of the new homepage for The New School. Alexandra Ståhlberg designed a really fun, playful interface where users can drag and drop the various elements as they see fit or shuffle them up or grid them, based on their preference. I used the jquery UI for the draggable aspect of this and then wrote a bunch of custom bits for resizing the viewport height (based on the open/close state of the lower items), smoothly moving the tiles when using the shuffle/grid options, smoothly loading the page, etc. It all came together really nicely and we’ve been brainstorming some really fun enhancements for the next phase that will incorporate a little bit of gaming to the interface.

Also the opportunity to develop and build out a responsive framework for such a large-scale website was very gratifying. Not a lot of universities have responsive sites and it was nice to be able to do that here. The New School takes pride in being on the edge of current technologies and it was cool to play a large role in translating that to our web presence.

So you are making a list in your web page and want to use a different type of bullet than the standard disc. So you have to set the list-style-type to “none” and add a background image, right? Not anymore! If the character you want to use for your list bullet is a standard character (some usual suspects: /, >, -, ;, etc), you can just use psuedo-elements in your css to achieve these custom list bullets. For example, if you wanted your list to use “>” as the bullets, you would do the following in your css:

ul { list-style-type: none;}
ul li:before { content: "> ";}

Want to remove that pesky bullet from the first list item (as you may in an in-line list…possibly for breadcrumbs or the like)? Simply do the following:

ul li:first-child:before { content: "";}

And it’s that easy. No idea why I never thought to do that before.

On the twitter side, things are a little less buggy, but the biggest issue is that no plugins will tweet scheduled posts. This is a very big concern for someone like me, who writes most of his blogs on the weekends but prefers to publish them during the week.

I spent many hours tearing my hair out looking for a solution before finally realizing it was right in front of me all along: Feedburner. Such a simple solution! Setting up your blog feed through Feedburner takes roughly 2 minutes and using their “publicize” tab, you can connect it to your twitter account. Whenever the feed updates, new tweets go out for each new item.

The next step is connecting that to Facebook, which is easily done with Selective Tweets. Set your Feedburner twitter settings to automatically add #fb to the end of your tweets, connect your twitter account to Facebook via Selective Tweets and you are good to go.

Note: this post is also a test of this idea since I haven’t actually done it yet. Sounds good in theory though.

Update: Worked perfectly.

But, despite my lack of creativity in branding this post, April has been productive. So here is a recap of some of the more interesting items that hit (or have been started) this past month. Some new Parsons projects went live, a fun responsive page build for Atlantic Records went up, and the new design for the Dead Presidents Lounge was approved. (Visit post page for screenshots of everything mentioned).

Dead Presidents Lounge Website Design
Deadpreztattoo.com is overdo for a facelift and with some pretty exciting PR for them on the horizon, we figured now was the best time to do it. This site will be a wordpress site, responsive, and feature much more timely updates than their current site allows (including an Instagram feed and a blog). The designs are approved and I am currently deep in the dev phase. The site will probably launch in a couple weeks.

For Your Sake
The lovely Edith Levin designed a beautiful iBook for Atlantic Records recording artsists Shinedown, titled For Your Sake. To help promote the iBook, she also designed a one-page promo site for the book, which she enlisted me to build. The page is responsive and features a jQuery UI slider that makes use of a little script snippet found here to readjust the slider each time a browser window is resized. I can’t stress enough how useful this little piece of code is. Kudos to the author, Dave Kinsella.

Parsons Website Upgrades
Two new pieces on the Parsons site went live this month. One is a new Academics page that makes use of Isotope to create a filterable page of the various program offerings at the school. The menu is built with pretty standard jQuery but the most interesting aspect is the URL filtering. Based on parameters passed in the URL, the page can offer up pre-filtered results and even hide the menus and change the page title so this one page can function in many different capacities. For example, if you visit http://www.newschool.edu/parsons/academics.aspx?filter=bfa, you will find yourself on a page dedicated entirely to their BFA offerings.

The other Parsons item is a fun interactive map that shows the various admission events that Parsons conducts across the country and around the world. I made use of the Maphighlight plugin plus some extra jQuery for menus, show/hides and like the academics page, URL filtering.

I couldn’t be happier with the lens and the camera. I was absolutely blown away with the first shots I took. So I decided to take the gear out for some test runs. I went out to the NY Botanical Gardens Orchid Show and shot some obligatory flower photos, as well as a super up close and personal portrait of Edy. Shortly after, I brought the camera along on a trip up to Albany where I took some test video using my nephew, Noah, as the subject. In typical two-year-old fashion, this boy prefers something as mundane as a bottle of water to his vast supply of toys.

As far as the harness goes, I’ve done a couple shoots where I needed two cameras and running around with two shoulder straps was just a pain in the ass. Coincidentally, just as I was deciding I wanted a harness, a friend brought the MoneyMaker to my attention. This thing looks awesome, indulges my inner geek and is STURDY. Saying this thing is built to last is an understatement. Thick leather, solid rivets. Very nice and highly recommended.

This was truly a collaborative effort, as anything in a large institution must be to succeed. So here are the people whose hard work also made this possible (I’ll also list myself again because I’m a not-so-secret narcissist):

• Art Direction: Ed Pusz
• Design: Adam Schwartz and Ed Pusz
• Program Module html/css/jQuery development: Adrien Goulet
• Page development: Helena Boskovic
• Project Management: Kyle Hansen
• Editorial: David Worley

It really is a privilege to work with such a talented and driven group of people. I can’t stress enough how amazing it is to be able to focus on my piece of a project and know everyone else working on it will get their jobs done and get them done well. Working in a creative vacuum makes the heart grow stagnant.

My main concern was not wanting to have to mess with the front end every time I want to update, so I started thinking how I could use WordPress to power Isotope. It turned out to be a lot easier than I had anticipated.

I created a category called “Portfolio” with several child categories (Design, Development, Photography). These child categories are pulled into the the portfolio page and the filter menu is built with the following code:

<ul id="filters" class="option-set filter" data-option-key="filter">
	<li>Filter: </li>
	<?php $categories = get_categories('orderby=name&depth=1&title_li=&use_desc_for_title=1&parent=82'); foreach ($categories as $cat) { ?>
	<li><a href="#"<?php if ($cat->slug == 'photos') {?> class="show-subnav filter-item" <?php } else {?>class="close-subnav filter-item" <?php }?>id="<?php echo $cat->slug; ?>" data-option-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a></li>
	<?php } ?>
	<li><a href="#" data-option-value="*" id="showall" class="selected close-subnav filter-item">show all</a></li>
</ul>

So after the menu is generated, then the portfolio items need to added. This was a simple matter of creating posts, assigned to the child categories of “Portfolio”, using the built-it WordPress Featured Image for the thumbnails and a custom field for the link to the full size image. The titles of the items (captions for the fancybox) are pulled from the post content. If you are familiar with Isotope, you know that the filtering is mainly based on classes assigned to the items to be filtered. So I generate the items on the page with the following code, using the post categories to generate the necessary classes so Isotope can work its magic:

<div class="port port-file <?php $post_cats = get_the_category(); foreach( $post_cats as $category ) { echo $category->slug.' ';} ?>" data-category="portfolio">
	<a class="portfolio-img port-item-link showall <?php $post_cats = get_the_category(); foreach( $post_cats as $category ) { echo $category->slug.' ';} ?>" rel="portfolio" title="<?php the_content(); ?>" id="<?php echo get_post_meta($post->ID, 'trigger_id', true); ?>" href="<?php echo get_post_meta($post->ID, 'port_lg', true); ?>">
	<?php the_post_thumbnail(); ?></a>
</div>

And that’s pretty much it. Not all that complicated. If you happen upon this post and have any trouble implementing this yourself, feel free to leave a comment with any questions.