benipsen News Feed

In Search of Some Good Company

Mon, 26 Jul 2010 11:13:00 -0500

Over the past three years or so I've been working independently while traveling broadly. The experience has been a dream come true in many ways and has presented challenges in others.

I am endlessly grateful for the opportunity I've had to see some truly fantastic places around the world while maintaining enough income to fund my adventures. On the other hand, keeping up can get tricky when your flight is delayed several hours and you're stuck 5 timezones away for a Skype meeting the next morning. Of course, there is then the accounting and taxes, account and project management, pitches and sales efforts—all for which I have been solely responsible.

Difficulties aside, the primary reason I've decided to change my work situation is not due to management struggles but rather a desire to once again learn from and to teach others. I've found the absence of a work environment in which I am able to actively exchange and connect with like-minded individuals has curtailed the expansion of my creative talent.

I am now actively seeking employment in a location where I will gain exposure to new ideas, concepts and technologies that once came with working in close proximity to my colleagues. Please view and download my resume where you'll find I've managed to build out a large skill set over the past twelve years.

- Ben

General and Cross-Browser CSS Tips: Write less. Refactor less.

Fri, 30 Oct 2009 10:37:00 -0500

I've noticed a lot of IE6 Bashing among the developer community lately. While I've certainly been through my share of suffering, after designing and building websites professionally for the past ten years I've learned to deal. I'll not debate JavaScript DOM support, or lack thereof, as that is another issue entirely.

Instead, this article offers a few tips and some high level declarations as a starting point that will help you write less CSS and spend less time re-working your CSS to work in IE.

Starting out:

This is a common CSS template I start with:

body, html{
     margin:0; padding:0;
     height:100%;
}
div, p{
    position:relative;
    margin:0; padding:0;
    overflow:hidden;
}
br{
    clear:both;
}

What does this accomplish?

First, it will extend your background images all the way to the bottom of the screen and eliminate the default margins and padding on the page (html, body block declaration).

Second, it saves you the trouble of declaring position:relative over and over again. While relative and block display are the supposed defaults CSS declarations for margin, top, and left won't be respected without an explicit position:relative specified in the style block. In the next section you'll see why this is important for cross-browser CSS. The overflow is also hidden by default because often an inner element's height, padding and margin will cause their parent element to extend beyond the desired height.

Lastly, the br block will cause any
tags to automatically clear floated elements. If you're producing CSS layouts with columns you'll quickly notice how handy this becomes.

Cross-Browser CSS Tips

The best way to create cross-browser CSS productions the first time (without even looking at IE) is to avoid using any code that the two handle differently.

The first and most important difference can be avoided by NEVER specifying horizontal margins or padding for layout elements. IE will add the margin/padding dimensions to the width you specify while Mozilla will not, thereby causing your column widths to be inconsistent. But what if nested layers require horizontal positioning? For example, you may need to render some content within the borders of a background texture or shadow image. The cross-browser solution? Use top, left, and right to position them. Because IE and Mozilla handle these declarations the same way, you're in the clear.

Second, be sure to use absolute positioning whenever possible. If you require flexible column height obviously this won't work. However, when positioning anything at all satic, you'll be glad you did!

CommonTweeps: A Twitter API Project

Mon, 27 Jul 2009 11:03:00 -0500

UPDATE: 20 JUNE 2010

Due to significant changes in the Twitter API Authentication (oAuth implementation) this application requires repair. I will attempt to resolve this as time allows. - DBI

In hopes to learn more about what could be accomplished via the Twitter API, I wrote an application called CommonTweeps recently. Inspired by the Mutual Friends feature presented on Facebook I decided Twitter could use the same functionality. When someone follows me I often wonder how they found me. Using CommonTweeps I'm able to determine this information (provided they aren't following me via an automated channel). Further, if we have mutual friends or followers I am more likely to follow them back. Give it a go by visiting http://commontweeps.com

Handling cross-browser/platform key board events with Javascript

Fri, 24 Apr 2009 16:10:00 -0500

Although this functionality comes packaged in my cross browser core file elementary.js - I thought I'd post this up in hope others will find it useful. I still need to complete the keymap as the only keys supported currently are: Shift, Control, Up, Down, Left, Right, and Tab.

Download keys.js (New window/tab)

Usage:

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Cross browser keyboard event handling

You can see an implementation on drivenstudio.com, the right and left keys move forward and backward in the slideshow.

Rebrandability: Adding resale value to your applications with CSS

Wed, 01 Apr 2009 10:00:00 -0500

Whether you're developing an application within its own brand or for a client, implementing creative elements of the interface with CSS creates the potential for resale value while minimizing the labor required to rebrand. Depending on agreements made (or not made in some cases) you, your client, or both parties will own the application. The ability to quickly rebrand increases its value imensely. This enables the developer to ask a higher price and the owner to attain better ROI.

While it's advisable that a developer should always use CSS, developers know well the temptation to render an image tag instead of using a link containing hidden text then setting a background with the stylesheet. Taking the extra time to ensure each and every element of the design is customizable through CSS can make the difference between a $5k application and a $50k price tag.

Next time you get a request for a custom web-based application, consider the ablity to rebrand that application and think: "How much more will rebrandablity benefit the owner?" Ultimately, this will let you fairly sell the development and production labor for a higher price.

Is Javascript the future of mobile development? Phonegap says YES!

Tue, 03 Mar 2009 10:40:00 -0600

Javascript has become the language of choice behind RIAs in the past few years. While Adobe Flash carried much of the initial momentum behind RIAs, as soon as "AJAX" (HTTPRequest object circa 2001) came into the mainstream Javascript eclipsed Flash quickly. The widespread and even legacy support of Javascript is unmatched. Javascript has also been around long enough to for web programmers to have a grip on it. On the other hand, Actionscript has changed drastically as it's evolved. Each version release has contained a learning curve. Though it might not be a steep curve, the modern version 3.0 is a far cry from "Actionscript 5" which boasted "dot syntax" for the first time as it progressed toward a more object oriented pattern. The nail in the coffin for Flash as an RIA platform arrived about two years ago. No Flash support was provided on the iPhone. With many millions of iPhones sold, that's a very large user base to neglect.

While Javascript is by no means as robust as C, Java or Ruby, Javascript has made it's way into many open source libraries, projects and has more than proved it's ability to provide a desktop app quality experience on the web. Want an example? Take a look at Google Docs if you haven't already.

So what does this mean for mobile application development? Currently there are three main platforms: iPhone, BlackBerry, and Android (Google's mobile platform). Each of these requires development using a different language as requiredby their native operating systems. This means that you would need three teams with three different skill sets working on an application you were to deploy on all three. What if you could develop native applications across all three platforms using your in-house web development team instead and make your app accessible via a plain old web browser as well? With Javascript and phonegap, this is now possible. The three frameworks (one for each platform) provided for each of the platforms allow you to run Javascript applications as native applications on the phone - fancy icon and all. The included Javacript library allows you to access some native phone features (contacts, camera, phone, speaker, virbation etc.) through one library and one familiar language. While many of the phone's native functions are not yet accessible the roadmap is clear and the project is young. Over time I anticipate we'll be seeing more and more applications deployed using Javascript. Really though, who wouldn't want to cut development cost by two-thirds?

FITE! El Obscuro Weighs In...

Sun, 18 Jan 2009 13:00:00 -0600

The amazing folks over at Flying Skull have put together a very cool contest which I'm grateful (and a bit nervous) to be part of.

The "FITE!" is a battle of drawing skill, imagination and promotion. Each contestant draws an assinged wrestler which is then randomly pitted against another. While I never claimed to posses much talent when it comes to drawing figures, all said and done I'm proud of the result.

Lastly, a big thanks goes out to Alana Post for getting me in on the action. So without further ado - I introduce you to El Obscuro:

A B O U T:

El Obscuro was born from darkness, the speed at which he is able to move. During the early years of life he was ritualistically beaten so near death that he no longer feels pain. He was sent to hell at the age of 13 where he was trained in the art of inflicting gruesome tortures known only to El Diablo himself. At the age of 20, weighing in at only 210 pounds, El Obscuro earned his first wrestling title in the ultimate fighting category. Outside the ring he enjoys playing tennis and spending time with his clinically insane wife and their demented children.

More details to follow on how you can help El Obscuro win the battle!

New Guitar

Sat, 17 Jan 2009 09:14:00 -0600

Recently I purchased an amazing instrument on Avenida Central in San Pedro, Costa Rica from Nery Rodriguez. The guitar is made entirely by hand. I can't imagine what it would have cost in the states but for a small sum I was able to acquire this beautiful sound. Here's me playing a quick song I composed. The recording quality is not fantastic, but not half bad for a MacBook.

(Note, this was taken with PhotoBooth and is a mirror image)

NativeEnergy Small Business Calculator goes live

Tue, 06 Jan 2009 11:34:00 -0600

In my latest efforts to aid the green revolution I've programmed a calculator which can be used by small business owners to easily calculate their carbon footprint.

NativeEnergy is a company offering both individuals and business a way to offset their carbon footprint by investing in clean energy technologies. The calculator works by applying formulas to various inputs, prompting users for information about business activities such as commuting, shipping, and energy consumption. Using these inputs the application can determine the amount of harmful emissions that result. The application interface features an intuative step-by-step process designed by Propeller Media Works based out of Burlington VT. Check out the Small Business Calculator or learn more about NativeEnergy on their website.

New SKI THE EAST Features Launch

Thu, 18 Dec 2008 15:00:00 -0600

Six months in the making the SKI THE EAST community website now boats an impressive array of weather and snow conditions reporting features including a very slick east coast webcam map. The weather page is a mashup design leveraging various data sources from around the web to give an unbiased outlook on the weather that matters most to our core audience - The die hard east coast skier.

Other new features include personal messaging, email notification improvements and an additional podcast for your viewing pleasure.

Be sure to visit http://www.skitheeast.net/ and http://www.meatheadfilms.com/

Displaying Doppler Radar with the Google Maps API

Sun, 16 Nov 2008 09:23:00 -0600

This is an advanced tutorial so you haven't got a handle on the basics yet you'll want to be comfy with them first. We'll make use of the GGroundOverlay object, Noaa's updated radar .gif images, and the Where's the radar Site? application to retrieve the bounding coordinates for each radar site.

First you'll need an API key. You can sign up here.

Begin by deciding where you want your map to be displayed, then hit this URL replacing the la and lo query string arguments to reflect the latitude and longitude of your location respectively:

http://mapki.com/radar/get.php?la=48.80686346108517&lo=-79.013671875

This url will return XML data that contains information we need about the radar sites nearby. The sites we'll be working with are CXX in Burlington Vermont, and ENX in Albany NY. The XML output from the application looks like this:

Begin by constructing and initializing the GMap2 object which to which we'll add the overlays. The setCenter method will draw and center the map around the desired coordinates. The second argument to this method is the zoom level for the map.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(43.609549935614595,-72.7679443359375), 7);

The GGroundOverlay object is constructed using an image path, and a GLatLngBounds constructed with two GLatLng objects. This creates the rectangle in which the overlay will be loaded and positions the radar accurately on the map. To construct our two points we use the following code:

var en_boundaries = new GLatLngBounds(new GLatLng(39.894551,-76.9899), new GLatLng(45.2676,-71.128392));
var cx_boundaries = new GLatLngBounds(new GLatLng(41.73241,-76.1867004255815), new GLatLng(47.2795563992587,-70.13522));

We then create our GGroundOverlay instances using the GLatLngBounds object and the paths to the corresponding radar image. Note that the URLs of the radar images are created using the abbreviation for the radar returned in the XML as the site attribute.

var en_overlay = new GGroundOverlay("http://www.srh.noaa.gov/ridge/RadarImg/NCR/ENX_NCR_0.gif", en_boundaries);
var en_overlay = new GGroundOverlay("http://www.srh.noaa.gov/ridge/RadarImg/NCR/CXX_NCR_0.gif", cx_boundaries);

To display the image simply call the addOverlay method on the GMap2 class

map.addOverlay(en_overlay);
map.addOverlay(cx_overlay);

And finally, here's our result:

New Website, Two years later...

Thu, 06 Nov 2008 08:01:00 -0600

I am pleased to announce the launch of my new website. For nearly two years I've been working to creating a hosted asset management and content publishing system which allows both individuals and marketing teams to easily manage and publish assets to their websites, blogs and other desirable internet channels simultaneously. This project among others has been a huge distraction from getting this puppy live so I'm stoked it's finally up. I'll be posting more on the site via the CMS I wrote and likely some other websites I use once and awhile as well.

For now feel free to browse the (very) abridged porftolio and artwork.