Archive for the ‘Web Development’ category

Javascript Circular Selection Knob (IE6 Compatible)

August 23rd, 2010
Polished Knob Logo

An inherent problem with the internet is that the UI elements are disconnected from the real world. People in the world are accustomed to things like switches, knobs and the like.

One thing that has been missing (at least I couldn’t find anything?) from HTML UI elements is the knob. An element that you can spin around to assign a value to some property. The functionality of a knob is basically the same as a slider — only the shape is different.

Up until now, you only had horizontal and vertical sliders to choose from. Boring. The look of them is generally ugly and there is nothing special about the design or intuitivityness.

» Read more: Javascript Circular Selection Knob (IE6 Compatible)

Ajax spinner… I hate you.

May 22nd, 2010

It’s time to kill the ajax spinner. It had a good run, but now it’s time to retire it to gif heaven where it belongs, right next to the animated “under construction” and “email me!” gifs of 1994.

» Read more: Ajax spinner… I hate you.

Backup/Migrate MySQL Databases to New Server (Windows)

March 27th, 2010

Bird migration image from: http://audubonoffloridanews.org/?p=3314

I searched far and wide and could not find a way to easily migrate MySQL data from one server to another. I remember a few years back that MySQL released a migration assistant that did the job pretty well, but that software seems have reached EOL. I had to move files on my local (windows) dev server to a new desktop that I purchased and decided to write a couple bat files that automate the process of exporting and importing the databases. Download the scripts now.

It seems that MySQL has replaced the former helpful software with MySQL Workbench — which is pretty cool, but unfortunately it doesn’t include any help for migration.

A future release of MySQL Workbench (post 5.2) will add a migration plugin, providing features comparable to the MySQL Migration Toolkit component of the MySQL GUI Tools Bundle. We will also be adding many other enhancements and new features.

Where does that leave us? Mysqldump.

I modified a MySQL backup shell script from Sonia Hamilton, and these scripts could both be modified to work with nix, but they are mainly for Windows. Read on for how to migrate your windows MySQL server.
» Read more: Backup/Migrate MySQL Databases to New Server (Windows)

pr() a print_r enhancement for your HTML web page

January 18th, 2010
function pr ($mixed)
{
	echo '<pre>' . htmlentities( utf8_encode( print_r( $mixed, true ) ), ENT_QUOTES, 'utf-8' ) . '</pre>' ;
}

When writing PHP, I often find that I need quick debug access to an Object or Array to see what it contains. PHP provides print_r, which works great–except that the data appears without all the tabbing in regular ol’ HTML. This is annoying for large Arrays or complex Objects.

That is why I created the pr() function. It basically just wraps the output of print_r in pre tags and then your formatting is back.

Depending on the encoding of the data you are passing to and getting from print_r, you may run across problems when combining print_r and htmlentities (with utf-8). If the encodings don’t match, it may return nothing at all! This could either mean that the variable is some kind of empty, or it could mean that htmlentities didn’t like the encoding that was returned by print_r, and crapped all over itself.

So, you first have to convert the data returned by print_r to utf8 (or whatever the encoding of your web page is) before passing it along to htmlentities. Since I try to keep every web page I work on in utf8, I keep this function set up to compliment that.

As long as you have a working utf8_encode, this function should always output pretty, utf-8 encoded data in HTML. If you need to convert to some other encoding beside utf8, you can use mb_convert_encoding.

More examples of image manipulation with PHP

January 14th, 2010

All of these examples use the PHP simple image manipulation class that I created.

Every now and then I write a batch image converter snippet that others might find useful. I figure I’ll post them here for my benefit and yours. These snippets will also serve as a way to better understand the class. As I come up with these in life, I’ll update this post.

All of these examples assume that you’ve already included the class in your file.

» Read more: More examples of image manipulation with PHP

Simple Image Manipulation in PHP (Rotate, Resize, Crop, Flip and Mirror, Thumbnails square and regular)

December 31st, 2009

UPDATE: I’ve added support for PNG alpha transparency which makes this class significantly more useful. Changelog in the class code below.

I keep misplacing this class so I figured I’d post it here so that I know where it is.

I wrote/assembled this class because I wasn’t happy with any of the image manipulation libraries out there. They are either way too complex with a steep learning curve or didn’t work all that great. (I didn’t see any reason to load up a class with 3,000 lines of code just to resize or rotate an image.)

So here it is, a simple class that allows you to open an image, perform common operations, and save. There are no bells and whistles or anything exciting here. Just a collection of commonly used image manipulation functions: Rotate, Flip, Resize, Thumbnail (square and regular), and Crop.

A lot of the class code is original but some of it has been gathered over my life as a programmer from long lost sources. If you recognize your work, leave a comment and I’d be happy to cite you!

» Read more: Simple Image Manipulation in PHP (Rotate, Resize, Crop, Flip and Mirror, Thumbnails square and regular)

Firefox and broken images: Help get the behavior changed

December 30th, 2009

Whenever I am working on a PHP script that generates an image, I am always frustrated by the standard Firefox broken image error.  The problem is that I have PHP output error messages to the screen while developing for the sake of simplicity.  These error messages mix with the binary data of the image, and it causes the image to break.  The end result is no image, and no error messages.

But what if I want to read those helpful error messages?

» Read more: Firefox and broken images: Help get the behavior changed

AdCenter SEMs lives just got easier (Greasemonkey script inside)

December 18th, 2009

If you are a search engine marketer that has used Microsoft’s AdCenter, you probably have found it a bit annoying that when creating text ads, it doesn’t tell you how many characters you have left.

This means that the genius PPC ad-copy that you just wrote will only be rejected when you go to save because it is too long.

This Greasemonkey script detects when the new text ad dialog is visible, and will update the remaining characters that you have left to use as you type.  Something that Microsoft should have done…. pay me MS, you lazy bastards.

This isn’t the only thing I find annoying about Microsoft AdCenter, but all the Greasemonkey scripts in the world won’t fix it. Click through for the script.
» Read more: AdCenter SEMs lives just got easier (Greasemonkey script inside)

Stop the toolbar and overlay madness!

December 11th, 2009

If you are thinking about putting a “toolbar” on your blog, please reconsider right now.

In recent months, I’ve noticed a resurgence of the website toolbar.  What is a website toolbar?  Usually, it takes the form of a small bar that is on your screen at all times, and it provides little links to supposedly helpful tasks for the visitors of the website.  It seems that this company is responsible for most of the madness through their freely available script.

In the toolbar pictured above, you can search the website, translate it, get the sites latest news, or share the page with the community of your choice. Helpful right?  Wrong.

» Read more: Stop the toolbar and overlay madness!

Another look at Repeatable Random

December 3rd, 2009

My last post was about a similar subject only with an emphasis on generating an evenly distributed set of random numbers that existed between a minimum and maximum value.

I found this post from Jackson Dunstan about a repeatable random class written in AS3.  In that post, he mentioned that it could easily be ported to Javascript or other languages — and he was right.  Here is that class written in Javascript and as far as I can tell, it does indeed produce a repeatable random set of numbers.

His class works by taking an initial seed number, performs a simple mathematical calculation, and then returns it before making it the new seed number, and starting the cycle over. The result is a set of random numbers that are repeated based on the starting seed number.

A technique such as this is mainly used for video games but it could also be useful in web development to randomly place objects on a page. This code doesn’t do much of anything by itself but is a good jumping off point. See a working example at the bottom of this page.

» Read more: Another look at Repeatable Random

Repeatable Random: An even distribution of pseudo-randomness

December 2nd, 2009

duck_goose_medium

Does the concept of true randomness really exist?  To tackle that question we must first ask ourselves, does free will exist, or are all our lives pre-determined based on some cosmic event that happened billions of years ago?  That is a question I’m not going to even try to answer in this post. Instead, I will provide you with a simple PHP function that can provide you with a repeatable random number generator.

OK, maybe “random number generator” isn’t an accurate name for it. Perhaps hasher-to-evenly-distributed-values generator would be a much better title since that is exactly what it does.

Why would you need such a thing?

Random numbers are great. They allow you to give your web applications some personality. Let’s say you only want to display a message on a web page ~10% of the time. Random numbers allow you to do this. You would simply do something like: if ( rand ( 1, 10 ) == 5 ) echo ‘This is my message. I display about 10% of the time!’;

That’s all well and good, but what if I want to display a random message to my visitors AND make sure they see the exact same one each time? Not possible with plain ol’ random.

However, it is possible with this very simple repeatable_random PHP function.

» Read more: Repeatable Random: An even distribution of pseudo-randomness

Pegboard Window Manager: A Javascript window manager written with jQuery

November 30th, 2009

Introducing Pegboard: A Javascript Window Manager that is written in Javascript (with a light dusting of jQuery). You can download Pegboard here. Click here to see a quick demo of Pegboard.

» Read more: Pegboard Window Manager: A Javascript window manager written with jQuery

The Overuse of Ajax and How to be a good Ajax developer

November 24th, 2009

New to web design? Old to web design and clueless about the proper Ajax uses? Here is a good rule of thumb: If it doesn’t make your website easier, faster, or smarter to use — ditch it. This includes the majority of that slick Ajax that you are working on right now!

How is Ajax being misused these days? Or better yet, how do you properly use Ajax to make the user-experience on your website better?

» Read more: The Overuse of Ajax and How to be a good Ajax developer

IE6? Not if I can help it

November 1st, 2009

I’ve begun using this statement enclosed in conditional comments (IE) for all IE6 users on certain websites.  Internet Explorer 6 was released more than 8 years ago and it still maintains market share.  Who is to blame?  Mainly us, the web designers and developers.  We continue to dumb down or designs and programming to support this horrible, horrible web browser.  From the standpoint of a user, why bother upgrading if everything works fine?

If users see statements like the one above, on more and more websites, maybe they’ll get the point.

Click through to see my code in all its inline style beauty. :)

» Read more: IE6? Not if I can help it

Detecting IE with PHP to enable display:table-cell CSS

October 30th, 2009

An ugly hack for an ugly web browser.

I love the display:table-cell.  It gives you the ability to vertically align stuff.  It’s great.  With display:table-cell, you don’t ever need table layouts again.

The problem?  I’m sure you already know or you wouldn’t be reading this.  Internet explorer, the bastard son of the web browsing world, doesn’t support it.  (IE8 does, but IE8 still sucks for other reason.)

My solution involves  (the normally bad idea of) changing output based on user agent strings.

» Read more: Detecting IE with PHP to enable display:table-cell CSS

Ephective Hosting website quoter thingy

October 20th, 2009

I work for Ephective and had to create a super easy way for people to price out websites.  These website packages are targeted towards small businesses with small budgets and because of this, there is no need to write up custom estimates for each individual project.

I came up with a multi-step Javascript form (degrades gracefully) that allows the customer to add and remove projects and services as they go and enter coupon codes that are XHR verified and automatically applied.  It’s modeled a bit after the way the big computer companies (HP, Dell, etc) allow you to add/remove components from computers.

This post will attempt to explain the logic behind that form.

» Read more: Ephective Hosting website quoter thingy

osCommerce orders not showing up in database

September 1st, 2009

Customers were placing orders on a clients osCommerce installation but they orders table in the database stayed empty.

As it turns out, the problem was with the payment module.  The order was placed, and it was forwarded to the 3rd party processor alright but the approval wasn’t getting back to the shopping cart–even though everything looked ok and worked in development.

» Read more: osCommerce orders not showing up in database

A couple hack fixes for the WP Twitter Updater plugin

March 16th, 2009

I needed a plugin that would simply send a tweet to twitter every time I posted a new article on one of my sites.  The answer I found was Twitter Updater.

The problem with the plugin is some pretty huge bugs. For example, at the very least, it will post 2 duplicate tweets for your post.  Depending on how you have it configured, it could make up to 5, 6, or even 7.  Pretty annoying and unusable.

I’m not a WP junkie and have no plans of becoming one, but I did create a quick and dirty hack to fix this behavior in Twitter Updater.  It does nothing to fix the real bug. » Read more: A couple hack fixes for the WP Twitter Updater plugin

Save your users search time and take them to the most likely data

March 8th, 2009

Extra clicks are the enemy when it comes to the WWW.  There is nothing more annoying than an extra step that you shouldn’t have to take.

Consider this example:

You have a website that displays listings for plumbers in the US.  Your visitors can type their location into the search box and be presented with a listing of the plumbers in their area.

» Read more: Save your users search time and take them to the most likely data