JoelPeterson

Home | Blog

Putting down the things I Pick up

Tips and Tricks I have gathered in web development

The Deal I Got at DuaneReade the Day After Halloween

By Joel Peterson on November 1, 2011

One of my favorite things about Halloween are the deals on candy the next day. Today I went into DuaneReade to see if I could satisfy my sweet tooth on the cheap. I was perusing the Halloween candy when the store manager pointed at me asking if I liked Candy Corn. “Why Yes I do.”

“I’ll give you all of the candy corn on the shelf for a dollar.”

Sold. 26 containers of candy for $1. Yesterday this same candy would have cost me $52.
As I was checking out the lady at the cash register asked if I would like to make a donation to the Charity.

“It’s for Diabetes.”

Of course it is. So I donated twice as much as I spent on candy.

Time to go reverse trick-or-treating around the office!

receipt26 Cases of Candy Corn26 Cases of Candy Corn Two

Posted in Off Topic | Tagged Candy, Candy Corn, Deal, Duane Reade, Halloween | Leave a response

The CSS Grid jQuery Plugin

By Joel Peterson on October 5, 2011

CSS grid frameworks are a handy solution for rapid development of page layouts. One minimal CSS grid framework that I have taken a liking to is Grid – a minimal CSS Grid utility.

As pointed out in Javascript HTML CSS’s article on Grid Grid is limited to the number of columns declared in the CSS with the default maximum being 5 columns. The path to extend Grid is a task as easy as coloring within the lines.

As an exercise I wrote This jQuery plugin which eliminates the need for the CSS file within Grid. While the prospect of relying on JavaScript to maintain a layout makes me cringe – It does offer a limitless approach with customizable options. On Document ready this plugin parses the elements on the page and applies the appropriate CSS properties to the elements within the DOM based on the naming convention proposed by Grid.

Pros:

  • Limitless possible combination of columns
  • Customizable naming convention

Cons:

  • Relying on JavaScript to write your layout CSS

The CSS Grid jQuery plugin applies Grid CSS to DOM elements based on the naming convention of Grid – a minimal CSS Grid Utility.

  • Based on Grid – a minimal CSS Grid utility – By Brajeshwar
  • Plugin Boilerplate by Stefan Gabos

Usage

  • Include the jquery.cssgrid.js plugin, along with jQuery
  • Add a class “grids” to the container of elements you would like to apply the Grid CSS styles.
  • Define your desired grid size by applying “gxofy” where “x” is the segment of the “y” whole.
  • Invoke the plugin on document ready

Example

$(document).ready(function() {
	$.cssGrid($('.grids'));
});

Alternative String

By default the plugin looks for the starting character “g” and the string separator “of”. These are customizable.

Example:

$(document).ready(function() {
	$.cssGrid($('.grids'), {
		startString: 'g',
		seperatorString: 'of'
	});
});

Download

Click here to download CSS Grid jQuery Plugin (33.78 kB)

Posted in CSS, jQuery, plugins | Tagged CSS, DOM, Layout, Plugin | Leave a response

Heroize jQuery Plugin

By Joel Peterson on June 24, 2011

The Heroize plugin generates a customizable animated hero/feature pane for use on your site. Features include

  • play/pause toggle
  • jump to pane buttons
  • keeps code clear and optimized for search engines
  • timer
  • Default panel display if Javascript is not enabled
  • slide transitions.

Download

Click here to download jQuery Heroize Plugin (226.29 kB)

Sample

How to implement

Setup your HTML in the following format:

Feat One
Feature 1 text
Feat Two
Feature 2 text
Feat Three
Feature 3 text

Be sure to include the jQuery library and the Heroize plugin files.

Then simply run the function “heroize” on the #hero container.

jQuery(document).ready(function() {
  jQuery('#hero').heroize();
});

How to Customize

The hero pane is highly customizable.
You can override the default settings of the plugin by passing parameters

jQuery('#hero').heroize({
	'heroTransitionSpeed': 700,   //transition time in miliseconds
    'heroTimeDelay': 8000,		  //panel display length in miliseconds
    'heroPlayImg': 'play.png',	  //path to custom play button
    'heroPauseImg': 'pause.png',  //path to custom pause button
    'heroNextChar': '>'        //Character to use in "Next" button
});

In addition the included CSS file has been clearly marked to easily configure the

  • height
  • width
  • fonts
  • opacities
  • colors
  • text bar properties

References

  • I built this plugin using Stefan Gabos’ jQuery Plugin Boilerplate – A great starting place for kick starting a jQuery plugin.

Posted in Javascript, jQuery, plugins, Tips & Tricks | Tagged CSS, HTML | Leave a response

Streaming Netflix and Video from iPhone in the Car

By Joel Peterson on June 7, 2011

With a couple of long car trips on tap this summer it was time to address the backseat entertainment options for my 21 month old. He’s an antsy ball of energy that would rather run his head into the headrest over and over than be subject to a car ride longer than 4 miles.

Brandishing my iPhone and a streaming Netflix account like a sword in battle I felt confident that a solution was only a Google search away. What I discovered, however, through perseverance and several trips to multiple electronic stores is that one can never realize exactly how little the customer service people actually know.

The good news is the easy solution exists – but there is a lot of noise out there and plenty of ways to get tripped up along the way. The goal of this article is to save a few trips to the store and a few headaches to anyone who comes after me who chooses to pick this fight.

Goal
The goal, at the outset, seems simple enough.
“To harness the ability to stream Netflix and Videos from the iPhone to an external screen in the car while keeping the iPhone and screen charged.”  To be clear – I am not looking for a custom installation job here – just a temporary ad hoc solution that can easily be removed when not using the car.

Simple Enough. And here’s your grocery list complete with my Amazon referral link to help pay for all of the gas I used getting to and from Best Buy and Radio Shack to make this thing work:

  • Griffin Component Video Cable for iPod
  • Sony DVP-FX970 9-Inch Portable DVD Player
  • Case Logic PDVK-9 7 to 9-Inch In Car Portable DVD Player Case (Black)
  • Belkin Dual USB Car Charger for iPod (Black)
  • Female to Female 3-RCA Coupler

If your car only has one Cigarette lighter then you’ll need a splitter not unlike this one:

  • BESTEK Twin 12 Volt 24 Volt Input Car Cigarette Lighter Socket Charger Splitter 150W with Dual USB Ports (black) MRS152UV-3

Let’s break down picture style:

  1. Plug the iPhone into your car charger
  2. Plug your video cable into your iPhone.
  3. Get your AV out capable CD player ready with the included RCA plug adapter
  4. Connect the griffin RCA outs with the CD player’s RCA outs with a female-to-female connecter
  5. Set the case up in the car, hide the cables, and you should be about ready to entertain

End result? Exactly what I was looking for…  iPhone streaming Prison Break (season 2) via Netflix to the Screen in the car while everything remains plugged in and fully charged.  Mission Accomplished!

Here is the setup:

Posted in DIY, iPhone, Netflix | Tagged Mission Statement | Leave a response

Obama’s Visit to WTC [Video]

By Joel Peterson on May 6, 2011

The company I work for is located on the 32nd floor of World Trade Center 7. As such we are privileged to have amazing views of New York City – especially of Ground Zero and the ongoing construction of the Freedom Tower and the 9/11 Memorial.

Yesterday President Obama visited New York which included a trip to a local fire company and paying his respects at the site of the terrorist attacks.

Luckily the bomb dogs stationed in our lobby didn’t seem to mind that I brought my video camera to work. Please enjoy a few select shots from my vantage point.

Note: The hand held video camera is on a tight zoom which makes for shaky video. This is especially noticeable when I laugh at Bob Slade’s joke. If you tend to experience motion sickness I would recommend you grab a plastic bucket before enjoying this video.

Posted in Off Topic, Video | Tagged Bob Slade, Freedom Tower, Ground Zero, President Obama | 2 Responses

Next »
Thanks for scrolling all the way down here! Want more? Catch me on Twitter, FourSquare, Delicious, LinkedIn and My RSS Feed