Transcending all language barriers… because it has no language.
jQuery Plugin – Increment
Inspired by this article on css-tricks.com, I decided to release a plugin dedicated solely to quick keyboard-based manipulation of numeric values in HTML input fields. It’s called Increment.
» See the Demo
Simply assign the set of inputs you wish to attach this behavior to:
$('input.hours').increment();
And let your fingers do the walking: use the up arrow to increment values, down arrow to decrement. Hold down shift for greater increments (maxIncrement), Ctrl/Cmd for smaller ones (minIncrement).
Define custom options for Increment easily:
$('input.hours').increment({ increment: 10 });
See plugin script comments for full list of options.
Use Cases: Time sheet applications (how I came to develop this), Order / Requisition forms, anywhere multiple numeric form inputs are needed.
v0.6 — Added support for mousewheel plugin, small Closure Compiler bugfix
v0.5 — Initial release
Increment has been tested on:
- Firefox 3.6 / Win
- Chrome 4.0 / Win
- IE 8 / Win
- Safari 4 / Mac
- Firefox 3.6 / Mac
- Chrome 5 Beta / Mac
Download Increment Now
New v0.6 with mousewheel plugin support
Thanks to Chris Coyier (@chriscoyier) for the inspiration, and to Karl Swedberg (@kswedberg) for the still-solid jQuery plugin architecture guide.
Your feedback is appreciated. Let me know what you think in the comments below.
Follow me on Twitter: @seanodotcom
jQuery API Search – Google Chrome Extension
Love Google Chrome? Love jQuery? Have a look at my birthday gift to you: the new jQuery API Search extension for Chrome. Get information on jQuery methods as-you-type!
Nathan Loves Lindsay’s Pratfalls
Glenn Beck on White Culture. Or not.
What. A. Weasel.
I haven’t seen this much uncomfortable squirming since Sarah Palin was backed into a corner about newspapers she likes.
Ocean City 2009
Actual Video Footage of the Hudson Plane/Helicopter Crash
From an Italian tourist:
Q: Why was he focusing in on the helicopter before the crash?
Tutorial: How To Create Your Own URL Shortener
I’ve been thinking about posting this for a while now. Then came the announcement on Sunday, from URL shortening service tr.im, that they are shutting down, effective immediately. It brought to light the issues with relying on the cloud.
Admittedly, this is not as devastating an announcement as your trusted e-mail, or even photo hosting, service going under. However, social media sites — primarily Twitter — have made URL shorteners almost a necessity, and some users have developed quite a bit of “social capital” in the form of links built and shared using a particular service.
Although tr.im promises to keep existing links active through the end of the year, there is currently no way to create new short URLs, nor is there any way to view information or statistics on any existing tr.im links. Poof, they’re gone. No warning, no recourse.
UPDATE: Tr.im has restored their service. However, this unpredictability only reinforces the call to control your site and your brand.
Okay, so what can you do about it?
Make your own URL shortener.
As you’ll soon see, it’s easy, it’s fun, and puts the you in short URLs.
Requirements
- Web Server — preferably one you host yourself, with control over basic site settings
- Web Development Language — using PHP here, but this code can be adapted to ASP.NET, ColdFusion, etc.
- Database — MySQL featured, but SQL Server, PostgreSQL, etc. would work
- Ideally, you’ll want a short domain to set this up on.
www.joesautoglassandspareparts.com kinda defeats the purpose 😉
Examples
Each of the following are short URLs to content on other sites:
http://sean-o.com/babysafe
http://sean-o.com/getwindows7
http://sean-o.com/playtime
Getting Started
As mentioned above, we’ll be using PHP 5.2.x & MySQL 4/5 for this tutorial — as these open-source technologies should be available to most of you.
The first thing you’ll need is a source for your short URLs. Easiest way to do that is with a MySQL database (or new table on your existing site’s database). Here’s the structure I used:
You only really need the first three columns, the rest are for statistics & future use (userID). Add/remove fields as you see fit — perhaps you may want a field for notes?
The Script
We’ll only need one script to accomplish the short URL resolution. Create a file called shortURL.php at the root of your site. (or you may choose a custom name & path)
To begin, the first thing to do is grab the short URL — the segment after the base URL.
e.g. http://sean-o.com/playtime
A little regex (regular expressions) goes a long way here to parse the short URL and strip extraneous characters.
$expectedURL = trim($_SERVER['URL']);
$split = preg_split("{:80\/}",$expectedURL);
$shortURL = $split[1];
// security: strip all but alphanumerics & dashes
$shortURL = preg_replace("/[^a-z0-9-]+/i", "", $shortURL);
Next, we’ll check this string to see if it matches a short URL in our database.
$isShortURL = false;
$result = getLongURL($shortURL);
if ($result) { $isShortURL = true; }
$longURL = $result['longURL'];
Finally, we check to see if our $isShortURL flag is set. If a matching short URL was found, we’ll redirect to it. If not, we’ll display our standard 404.
if ($isShortURL)
{
redirectTo($longURL, $shortURL);
} else {
show404(); // no shortURL found, display standard 404 page
}
The Functions
The primary function — get the long URL associated with the passed short URL, if it exists.
function getLongURL($s)
{
// define these variables for your system
$host = ""; $user = ""; $pass = ""; $db = "";
$mysqli = new mysqli($host, $user, $pass, $db);
// you may just want to fall thru to 404 here if connection error
if (mysqli_connect_errno()) { die("Unable to connect !"); }
$query = "SELECT * FROM urls WHERE shorturl = '$s';";
if ($result = $mysqli->query($query)) {
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
return($row);
}
} else {
return false;
}
} else {
return false;
}
$mysqli->close();
}
Perform the URL redirection.
function redirectTo($longURL)
{
// change this to your domain
header("Referer: http://www.your-domain-here.com");
// use a 301 redirect to your destination
header("Location: $longURL", TRUE, 301);
exit;
}
Finally, display your standard 404 page here.
function show404()
{
// display/include your standard 404 page here
echo "404 Page Not Found.";
exit;
}
Wire It Up
Okay, so we have the script… now what? Well, the “special sauce” here is the 404 redirect. What we’re simply doing is replacing (or augmenting) your site’s 404 page with one that checks a database for a URL shortcut. If one is listed that matches, redirect to it. If not, display your standard (or not so standard) 404 error message.
You’ll need to modify your site’s existing 404 error page, or (recommended) create a new one. If creating a new one, make sure your site is set to point to this file. For IIS (5/6): Go to your web site, Properties, Custom Errors, 404, Edit Properties… For Apache, edit your .htaccess file thusly: ErrorDocument 404 /shortURL.php. (replace with your custom path as appropriate)
Now, Run With It (Additional, Optional Steps)
If you’ll be using this with any regularity, you’ll probably want to create an admin panel page to quickly add & manage your URLs (I’m simply using a MySQL GUI — the great HeidiSQL). Consider whether you want to use custom short URL names, or just generate a random 4-5 character string (or both!). If you’re a statistics nut, you might want to capture more than just the user’s IP and/or build a stats page.
If you’re looking to “monetize” (ahem, see above), you may want to frame the linked site under a toolbar with your site’s branding, a la the “Digg Bar”. I highly recommend against this, however, as many users consider this practice an annoyance.
If your domain name is longer than, say, 8 characters, consider purchasing a second domain for exclusive short URL serving. Two-letter country-based domains such as .ly and .to are popular. Flickr’s recent purchase of http://flic.kr was especially clever.
Conclusion
So there you have it. Your very own, shiny new, URL shortening service… in under 50 lines of code!
Be sure to test. I suggest trying the following: a short URL you’ve created, a known working URL on your site (make sure you didn’t break anything!), and a known incorrect URL (test the standard 404). Also, be mindful of the security implications. Make sure following best practices with regards to MySQL security, and be sure to sanitize all URLs. Ensure your server is running the latest versions of software with the latest patches.
Disclaimer: This article is just to get you started. The code presented here is most certainly “quick & dirty”, and can surely be optimized. This code may or may not work for you, and I cannot be held responsible for any damage that may occur to your site as a result of implementing this.
If you end up implementing this on your site, I’d love to see it. Post an example here in the comments, or follow me on twitter and hit up @seanodotcom. If you’ve ported this code to other languages/databases, drop me a line.
Advantages
- You’re in complete control
- You can specify random short URLs or custom ones, using related keyword(s)
- You can collect virtually any statistics you wish
- Excellent for site branding — your URL appears on every link!
Disadvantages
- You’re responsible for maintaining uptime — as your site goes, so goes the service
- You need to build any related services — stats tracking, APIs, user registration, etc.
- Your site’s subdirectory names will override custom short URLs of the same name
- Every 404 on your site will incur a database hit — be sure to keep your main site links fresh (Thanks 5Min)
- Utility varies inversely with the length of the primary domain name
Alternatives
- Simply use another service — bit.ly, cli.gs, etc. (but that’s no fun, and you’re again vulnerable)
- Creative use of htaccess or IIS Rewrite
p.s. the short URL for this post is http://sean-o.com/short-URL
Pool Picnic
Colbert on The Birthers
The Colbert Report | Mon – Thurs 11:30pm / 10:30c | |||
Womb Raiders – The Fight for the Truth Behind Obama’s Birth | ||||
|
Nathan is Rollin’ Rollin’ Rollin’…
Hastily Made Cleveland Tourism Video
Best. Tourism Video. Ever. LMAO