Eric.Pe/terson

Launched my sister Sarah Peterson’s photography portfolio...

Wed, 05 Jan 2011 13:22:34 -0700

Launched my sister Sarah Peterson’s photography portfolio site today. Since it’s a photography website, I put extremely little work into the design and focused on simple navigation and organization.

The horizontal accordion slider on the main page was achieved using a combination of view templates, jQuery, and hSlides. There is at least one horizontal accordion module out there now, but it comes with a number of dependencies that seemed like overkill for such a simple project and it didn’t feel stable.

Everything else about the site is relatively straightforward. All of the images are dynamically resized with the usual trio of imagecache, imageapi, and imagefield. I modified node templates so that instead of displaying images, the images are displayed as the backgrounds of divs. This is to prevent users from easily saving images and using them elsewhere without permission. Obviously there are many ways still to get the files, but this inconvenience seems good enough to thwart most casual users.

Today, I launched the new and long overdue Quiet Company...

Tue, 04 Jan 2011 02:51:00 -0700

Today, I launched the new and long overdue Quiet Company website. I’ve worked with them a number of times in the past, but this project was significantly more ambitious.

The goals for the site were essentially threefold:

Replace MySpace’s now largely irrelevant calendar feature with a centralized location for shows,
Integrate with the band’s already strong social network presence,
Give fans a centralized space to communicate and share content.

I was able to take the basic structure of the site from a previous Drupal band site, Weather Maps. The basic calendar functionality desired was already there, they just wanted an alternate “poster” view of upcoming shows in addition to the traditional “calendar” view.

The social network integration module landscape in Drupal isn’t very well documented, but there are a couple modules that proved at least decent. The Twitter module was difficult to set up, but once configured, worked very well (the problem in configuration came in its poorly documented dependency on an outdated version of the oauth module). I also decided to forego default Drupal comments in favor of Facebook’s social plugins, which are implemented quite well by Facebook Social. My primary complaint here, though very minor, is that “like buttons” can be configured to appear on nodes in the “links” section, while the “comments” box cannot and must be parsed manually from the node body when using a custom node template.

The most challenging part of the site was user uploaded content. Essentially, each user, designated a “fan” (by default), is allowed to create content of the specific type “fan content” for each show which has already occurred. I wrote a small, custom module to handle all of the subtleties of the form handling and built several views to display all of the contents of those nodes on the respective show pages (as well as the user’s page).

Last Saturday, Austin band Quiet Company held its first...

Wed, 01 Dec 2010 14:58:43 -0700

Last Saturday, Austin band Quiet Company held its first “Twitter show.” As seen in the photos above, all throughout the evening, tweets with the hashtag #QCatND were being live streamed on a large screen to the side of the stage. They asked me to help put it together.

As it turns out, there are already a number of services which offer basic live Twitter wall functionality. Rather than spending a lot of time duplicating code, I decided the easiest approach would be to just modify the look of one of the existing services. Twitter Fall, though aesthetically a little atrocious, has the ideal feature set and also a handy presentation mode. I wrote a quick and simple Chrome extension to take care of small issues like color, size, overflow, etc.

More interesting than the technical bits and pieces of the show though, was the tweet culture that unfolded. I’ve seen similar projections at other shows, but they tend to be completely anonymous, less conversational, and exclusive to the concertgoers themselves. This wall had participation from people as far away as Wales; anyone anywhere could follow along. As predicted, it turned very obscene very quickly. Still, by all accounts, it was an incredibly fun, interactive experience (I even had fun just reading the Tweets as the show unfolded).

There are a few venues in Denver where something similar could be a lot of fun, but I think the success of this event had a lot to do with Quiet Company’s large Twitter following and great use of the medium. As it stands, I’m not certain any bands in Denver have the same social media pull, and I’m not even sure there is enough crossover between Denver concertgoers and Twitter users in the first place.

Today, A Small Web Firm went live. It’s an idea...

Thu, 18 Nov 2010 02:52:00 -0700

Today, A Small Web Firm went live. It’s an idea that’s been germinating in my head for some time now, and it still has a long way to go; but this is where it begins. It will be a collective (rather than a company) of individuals whose skills can be synthesized to realize websites and web applications for those who need them but who would rather spend their time honing their own products, services, or skills. Right now, it is just a temporary portfolio and contact form, but it will grow.

You’ll notice that the screenshot above was taken in Internet Explorer 7. You might be surprised to hear that its structure is built entirely on the HTML5

and

tags with not a single

or .

While the standard is far from finished and even further from adopted, I think at least those structural elements are safe for deployment. For support in older versions of Firefox and all current versions of IE, all that is needed is some basic JavaScript in your head, wrapped in an conditional.

While there’s no specific advantage to using any of the above over a nest of

tags labeled with IDs (that I’m aware of), you have to admit the simplicity and semantic clarity of the source code is a thing of beauty.

Today, we launched Letters by Wordsworth, which is something of...

Wed, 10 Nov 2010 20:07:00 -0700

Today, we launched Letters by Wordsworth, which is something of a combination blog/portfolio site for Cecilia Harris, an artist and calligrapher.

Another design by Kinsey Hamilton, themed and developed with a Drupal backend. While implementing this site was straightforward, I’m satisfied with a couple of aspects: namely, the borders around the landing page images, and how successful the fluid layout came to be.

While the borders probably could have been created using a fairly basic set of CSS3 rules, I recognize that its implementation is not yet standardized or widely adopted. We opted instead to make the whole border an overlay with a transparent center. Each image consists of three elements within a container div, whose position is set to relative, so that absolutely positioned elements within it are positioned absolutely relative to it. The three inner elements are:

An anchor, which is set to display as a block, given a fixed width and height, and an absolute position so its z-index can be set high enough to display above the entire border structure,
The border layer itself, which is just an empty div whose background is the border image, its width and height are fixed, and its position set to absolute so that it is positioned in the same space as the anchor and so that it can be placed in between the anchor and the image,
An image, which is also positioned absolutely both to fit it within the border frame, and also so that its z-index can be set below that of the border and anchor layers.



  

  


  [offset]px; left:[offset]px; z-index:-1;" />

The fluid layout shines most on the same landing page. The obvious idea is to set each image block to float:left;, but this doesn’t allow the entire inner section to be centered on the page. Instead, each block must be set to display:inline-block;, which has the effect of giving each div block attributes, but positioned inline. The div containing the entire set of blocks must be set to text-align:center;. The problem with this is that if the last row has fewer blocks than there are columns, the grid is no longer maintained (because all content is centered uniformly in the container). The solution is to generate a number of empty “dummy” blocks (as many as the maximum number of possible columns) that have equal width to the grid blocks. Their height should be set to 0, however, because unneeded dummy blocks will flow below the grid; having an equal height to the grid blocks would create unnecessary blank space at the bottom of the page (equal to the number of extra dummy blocks divided by the number of columns possible in that resolution).

Today we launched the Watercourse Foods website. Watercourse is...

Thu, 09 Sep 2010 01:00:00 -0600

Today we launched the Watercourse Foods website. Watercourse is a restaurant located near central Denver that caters to vegetarian and vegan conscious individuals.

Watercourse approached Kinsey Hamilton and I to completely rework their website; they had two big issues they wanted us to address: the disparity between the aesthetics of their restaurant’s interior and their website, and their complete inability to edit or add any content. Drupal seemed to be a fairly natural choice and they couldn’t be happier with it. Watercourse presented a couple of challenges which I thought were best handled with custom solutions: the top image slider and the newsletter functionality.

The reasoning behind the custom slider was because everything I was able to find required a fixed width while Kinsey’s design called for the slider to fit the width of the page regardless of screen resolution. The solution was a bizarre CSS quirk that I haven’t had a chance to research but seems to work universally across all browsers: setting the container to width:100%px;. (If anyone has any insight on that, let me know.)

As for the newsletter, the signup used a common method involving the Webform module, however the actual distribution system is custom because all of the newsletter modules I found available were buggy, incomplete, or were too complex for what the job called. (I recommend staying away from Simplenews, at least as of this writing.) Instead, I built a simple script which pulls new menu items, upcoming events, and (optionally) an introduction paragraph (implemented as its own content type). If anything is found, it formats and sends out the email to a given number of recipients on a small delay using the PHP mail() function until the full e-mail list is exhausted. I could write a whole separate post regarding reasoning behind the delay, but suffice it to say that the mail() function opens and closes an SMTP socket each time it’s called, scripts have a limited amount of time to execute, and not everything counts toward that execution time.

(From Tokyo) Today, we launched Tome to the Weather Machine, a...

Sun, 22 Aug 2010 12:00:00 -0600

(From Tokyo) Today, we launched Tome to the Weather Machine, a music blog written by Crawford Philleo (drummer of Vitamins) and his friend Ryan Hall. They’d been writing for nearly a year using a Blogspot site and decided it was about time to take things a little more seriously.

Another Hamilton/Peterson Drupal site, Tome presented itself as an interesting exercise in website migration. A bit of quick research revealed no means of migrating directly from Blogger to Drupal. The most common workaround I found was to export the Blogger XML file and convert it to a Wordpress WXR file using this utility, then import the Wordpress archive through one of several fairly well-developed means. I chose to use the Wordpress Import Module, but there are other scripts and modules out there.

This site used a large number of custom CCK fields on the review content type (most importantly, an image field, and fields for artist, album, and label), but unfortunately I was unable to map these over in the import. Wordpress Import is (understandably) not powerful enough to map arbitrary chunks of code and text to specific CCK fields (although it does at least attempt to download photos found within the posts to your server), and even then, the photos were too low resolution to be worth the hassle in the first place.

Wordpress Import was able to successfully import the blog post dates as node published dates, however, for the purposes of scheduled posting functionality, I used a custom Date CCK field. I mapped the correct post dates over to that field using a fairly simple MySQL query with an implicit join and use of the FROM_UNIXTIME function:

UPDATE content_type_blog,node_revisions SET content_type_blog.field_review_date_value=FROM_UNIXTIME(node_revisions.timestamp,"%Y-%m-%dT%H:%i:%s) WHERE content_type_blog.nid=node_revisions.nid

(From Tokyo) Today, Prospector was launched by the Colorado...

Wed, 18 Aug 2010 00:01:00 -0600

(From Tokyo) Today, Prospector was launched by the Colorado Alliance of Research Libraries, a consortium of Rocky Mountain regional libraries which pool their resources to create an interlibrary loan system for the region. The photos here represent a before and after look. The design and branding are by Kinsey Hamilton and all development work was done by yours truly.

After working on too many Drupal projects, this was a refreshing change of pace. The front page is almost entirely static HTML, with the exception of two functions I wrote to pull in popular searches and the most recent updates from Prospector. Theming and developing for Drupal feels a lot like carving away from granite. This approach felt much more compositional, like painting on a canvas.

The covers are being pulled dynamically from Amazon, and a good deal of research was necessary to determine how Amazon’s image URLs are generated. (This proved to be an immensely helpful resource.) The rest of the site, I built on top of a Wordpress install. In the past, I’ve constructed Wordpress themes from scratch. However, for this project, we had a fairly tight deadline, so I decided to try out WP Framework as a base theme, and was satisfied with how simple the theming process was.

The day after I returned from our Houses SXSW outing, I had an...

Mon, 09 Aug 2010 15:00:00 -0600

The day after I returned from our Houses SXSW outing, I had an interview for an internship position at the Open Media Foundation for a web development position. Shortly thereafter, I received an e-mail asking when I could start, and since then, I’ve been working two-to-three days a week there.

The OMF builds websites for non-profit organizations; this seemed like a perfect fit for me because I’ve always wanted to somehow utilize my web development skills in the non-profit sector. They build websites almost exclusively using Drupal, and it’s here that I went from knowing virtually nothing about Drupal, to being able to build and deploy my own Drupal sites from start to finish.

Aside from the skills I’ve developed, the OMF, more than anything, has taught me the importance of having a community (in Drupal’s case, one of well over 10,000) and I can’t imagine going back to building web pages or apps from scratch.

The staff there was extraordinarily friendly and my time there was well-spent. If you are a student looking for a web development internship, I would highly recommend the OMF. If you’re a non-profit looking for a website (and you’ve already decided to pass on my services :) ), then this is also the place for you.

Jimmy Stofer is an extraordinarily busy musician here in Denver....

Sat, 07 Aug 2010 21:32:34 -0600

Jimmy Stofer is an extraordinarily busy musician here in Denver. Although normally a bassist (including for one of my favorite bands, Hello Kavita, but also in too many others to name), he’s been trying his hand over the past several years at writing his own songs. Last Thursday, he released them in the form of a CD as Weather Maps.

Jimmy called and asked me to build him a basic website where he could post updates, shows, and sell his CD. He described himself as someone who didn’t know much about computers, so the ability to add and edit content easily was one of the primary goals.

weathermapsmusic.com is the first website that I’ve actually designed in a very long time (I’ve been focused almost entirely on development for the past six months). It’s also the first music-oriented website that I’ve built with Drupal managing the content.

The key to a successful tour, radio, or blog run starts with an...

Sat, 10 Jul 2010 01:47:04 -0600

The key to a successful tour, radio, or blog run starts with an attractive, to-the-point press kit. Major labels can still run very productive snail-mail campaigns (for example, most of the new music played at KVDU was received via mail). However, for smaller and mid-sized acts, such an endeavor is too costly and rarely yields results. Increasingly, the name of the game is blogs which, more often than not, only accept submissions via e-mail. In an inbox full of thousands of other submissions, it’s important to follow etiquette, stay brief, and stand out.

I built a “Blog Blaster” for Denver band Achille Lauro, who will be touring in August in support of their record “Indiscretions.” The blaster features a set of customizable fields laid out in a multi-column HTML e-mail. Links to album and single downloads are prominently featured, and hits are tracked via a unique code tied to each e-mail.

Coding for inboxes rather than browsers is an interesting challenge because, with some exceptions, their rendering engines are extremely outdated; thus, to ensure the widest compatibility, layouts have to be rendered in tables, CSS support is extremely limited and inconsistent, and all declarations are best made via style attributes in the tags themselves rather than including a separate stylesheet.

For three years, I worked as the web developer for KVDU (the...

Fri, 07 May 2010 12:00:00 -0600

For three years, I worked as the web developer for KVDU (the University of Denver’s College Radio Station). During my time, I also co-hosted and engineered a local music show which featured live performances by Denver bands. I recorded, mixed, and compiled all of these performances onto a compilation called KVDU Live. (I also did the artwork and layout.) It features thirteen tracks and is available for free from the radio station.

1. Everything Absent or Distorted – Don’t Be Peaches
2. Blue Million Miles – Explosions
3. Paper Bird – Pennies
4. Widowers – Stalwart Ships
5. The Knew – Neckbreaker
6. Kissing Party – Quiet Town
7. Jen Korte & the Loss – Streetlights and Bar Fights
8. Brothers O’Hair – Tonight
9. Hearts of Palm – Tunnel of Love
10. Dualistics – Unique (Like Everyone Else)
11. Pee-Pee – Song for June Carter from Johnny Cash
12. Old Radio – Asleep at the Wheel
13. Vitamins – Dark Matter

Austin band Quiet Company will be releasing a six song EP...

Wed, 31 Mar 2010 04:17:52 -0600

Austin band Quiet Company will be releasing a six song EP entitled “Songs for Staying In” on May 11th. They asked me to set up a website to help promote the release and offer pre-orders.

They wanted to set up a system where each week, fans could stream a new song from the EP, and view a new promotional video pertaining to the song. The pre-orders run through a system which I’d built for them previously. The first week is up now, and can be viewed here.

A full website redesign is also in the works, slated to be completed by the EP’s release.

This past week, I went to Austin for SXSW with Houses. We...

Tue, 23 Mar 2010 04:17:49 -0600

This past week, I went to Austin for SXSW with Houses. We played three shows in a 24-hour period, and I took in quite a few more. I also finally met and saw perform Quiet Company, for whom I’ve been doing occasional web work, which was great.

The SXSW process seems a little hollow to me. There are “well-established” bands playing well-attended showcases, and then then there are “nobody” bands playing whatever they can find. There’s no “middle-class.” It seems to be more of a business-oriented event where label and band representatives have meetings all week without having to travel all over the country, with a music festival built around it. Bands don’t go there to be discovered; discovered bands go there to be showcased.

Though that’s a cynical view of the festival, I’m not saying I didn’t have a good time. We played well, we were well received, and I saw some great performances from bands I would have never had a chance to see otherwise.

Here are a select few photos summarizing the trip.