jQuery.smartCrop – Enabling Truly Responsive, Client-Side Image Processing (Proof of Concept)

Demo: http://gschoppe.com/projects/jQuery.smartCrop/
GitHub: http://github.com/gschoppe/jQuery.smartCrop

Let’s face it, responsive images are a real pain in the neck.

As a web designer, I want complete control over picture dimensions at any size; but i am constantly compromising designs to deal with the constraints of user-provided images.  These constraints are well known to any designer: Continue reading

Picking Winners for Hashtag Contests

My office wanted to hold a drawing a few weeks ago, where people would share a photo with the company name as a hashtag, and one random poster would win a gift card.  These are great contests to boost a business’s social standing, but with so many hashtag friendly social networks, it’s hard to choose a winner in a fair way.

We found a great hashtag aggregator, called Hashtagr.co, that displays a pinterest-like feed of hashtagged posts across multiple social networks.  It made for a great leaderboard, and got all the data in one place, but it still didn’t solve the picking problem… So I wrote a quick script, and packaged it up as a bookmarklet.  A bookmarklet is a link that can be added to your bookmarks, that, when clicked, will run some custom javascript, rather than changing pages.

My bookmarklet for Hashtagr selects a random post in the list, scrolls the browser window to it, highlights it with a red border on the bottom, and opens an alert box that declares that poster as the winner.  To use the bookmarklet yourself, simply drag the bookmarklet below to your bookmarks, go to a hashtag feed on hashtagr.co, and click the bookmarked link.

Hashtaggr – Pick Winner

Rapid Prototyping for Strangers Pt 1 – Knitting Counter

I’ve always been a big proponent of learning how to rapidly create prototypes.  It doesn’t really matter what field you’re in, from architecture to programming, fast prototypes are gold.

Recently, I’ve been brushing up on my javascript, designing various web utilities.  One of the best ways I’ve found is to create bespoke code for strangers online.

Today, I received a comment on a post I made years ago on instructables.com, describing my build of a custom USB foot pedal.  The commenter was a 73 yr old knitter, who was interested in finding a way to count her rows with a foot pedal.  I decided to make it happen.

It took me about an hour and a half to create a web app that could integrate with a cheap usb foot pedal ($11 on amazon) and increment a counter. (the proof of concept actually only took 15 minutes, but I wanted to add goals, customization, and better overall user experience).

I loaded the code onto github, hosted the app on my site, sent the commenter a response, and posted the app to reddit’s knitting community.  Since then (5 hours ago), I’ve gotten 20 replies from knitters around the world, who have added my app to their workflow.

The lesson here is, “if you are prolific and can solve problems quickly, you will find an audience.”

Here’s the link: http://gschoppe.com/projects/knitting-row-counter

Why My Company is Leaving HostGator (and why you should too)

I’ve been CTO of a small start up called Prmot.it for a few years now, offering an online coupon solution to local restaurants.  We started our operation on a shared server from HostGator, and grew from there to serve thousands of customers.

We are approaching another scaling jump, and will need to expand our infrastructure significantly.  We will be moving to a new host to meet these needs.  Don’t misunderstand me.  HostGator offers many tiers of service that would serve the level of usage our company requires well into the future, but we will instead be spending a few hundred dollars more a month, and will move to a competitor.  HostGator’s service is simply unacceptable for a small business. Continue reading

Simulate an MP3 Player Display with jQuery-AnimateOverflow

IMG_0008[1]I’ve been working on progressive enhancements to a web-controlled Pandora client called Pidora.  In the process of wrangling the code, I discovered that there was really no good way to display long song titles/artists/albums.  They either take up a varying amount of screen real estate, which throws off designs, or they get cut off, effecting readability.

To solve the problem, I decided to emulate the behavior of old MP3 players, and programs like WinAmp, by limiting the title to a single line, then scrolling it across the page.  I considered using marquee tags to accomplish this, but the results would have been horrifying, and would have affected all titles, whether they needed it or not.  Instead, I created a jQuery plugin that I call AnimateOverflow.

The plugin takes any group of block level elements, converts them to single line boxes, and, if the content is larger than the box, applies an animation to sweep through the content.  Currently the plugin supports the two most common animations from old MP3 Players: linear and ping pong.

Check it out:
Demo | Download

The $30 Network-Controlled Pandora Radio

Headless Pianobar Client

Introduction

I work in a small office, with 2 other people.  We all like our music, but work very different schedules.  We wanted a device that could play music, without having to leave a computer connected to it, and could be controlled by all of us, from our desks.  We needed a wide and flexible music collection, and an easy interface.  Pandora was the perfect service, but dedicated receivers were all costly and complicated.  The obvious solution?  Build my own! Continue reading

jSlabify Now Supports Partial Pre-Slabbing

slabify

 

For those of you who don’t know, jSlabify is my jQuery plugin to create slabbed blocks of type, like the one seen above.  Until recently, there were two modes it could operate in, unslabbed and pre-slabbed.

In unslabbed mode, the plugin creates the rows of text, based on the size of the overall slab.  In pre-slabbed mode, the plugin looks for rows of text already defined with <span class=”slabbedtext”>, and then simply sizes the rows to fit.

Now there is a more flexible option, that allows the user to define sections of text to treat as a single row, and then automatically slabs the rest of the text to fit.  Simply wrap the text you want to be a single row in  the tag <span class=”slabbedtext”>, and jSlabify will do the rest.

I made a simple demo of the new partial slabbing, here.

The main demo can be found here, as always.