I like the business end of Web design. I’ve come to the conclusion that one of the reasons I like it so much is due to my enjoyment of problem solving. Web design as a business is a problem, plain and simple. Everyone has their own way of doing things, we’re working in a medium that many of our clients don’t fully understand, and it’s sometimes very difficult to completely resolve the final terms of an agreement and be fully confident you’ve covered all your bases. This is something I like thinking about, something I like dealing with. If you’re not in the same boat, I hope you don’t plan on freelancing being a walk in the park. The business end is just as big of a deal as the design/development end. You want to get paid.

Style guides? For code?

A style guide is a straight and to the point document that outlines how you should be formatting your code. It covers indentation, alignment, spacing, tabs, naming, and just about every other aspect of writing code apart from the logic itself.

Whether you’re writing a script, some markup, or programming, you have a way of doing it. You put your brackets in a certain place because either it looks better to you, or your teacher told you to write it that way. The same goes for the spaces you include in your arguments list, your array declarations, and so on. These are important details to consider, especially when you’re looking at someone else’s code.

Even if you didn’t realize you did it yourself, looking at someone else’s code can just come off as… unorganized. At first you can’t quite put your finger on it but you’ll find yourself asking “how the heck does this even work?” If you’ve ever had one of those moments, you’ll appreciate a good style guide in your workflow.

Structuring your style guide

There isn’t a real set of rules to writing your style guide(s); they will probably undergo a long series of revision as you realize the little details you’ve forgotten over time. I think coming up with a style guide is really good team based exercise, something I plan to finalize with my team over the coming weeks.

At my company, we’ll need four style guides to cover our workflow:

• HTML
• CSS
• JavaScript
• PHP

Currently these style guides are a work in progress, but as small snippets look something like this:

HTML

Our HTML style guide will cover things you’d expect to find in other code style guides, but certain aspects of formatting will be included in nearly every example. Things like the ‘closing’ comment for block level elements based on their class or id.

Block element with class

<div class="group">

</div>
<!-- /group -->

Block element with ID

<div id="address">

</div>
<!-- /address -->

Block element with class and ID

<div class="group" id="services">

</div>
<!-- /services -->

CSS

Probably the biggest rule to cover in a CSS style guide would be whether you’re going for single line or multi line, a debate that will carry us through the end of time. Front enders seem to be very passionate about their decision to go with one or the other, so we’re lucky to have a number of tools that will convert from one format to the other on the fly.

Comment Basics

/* ================ */
/* = MAIN SECTION = */
/* ================ */

.main { width:100%; }

	/* Child section */
	.child { border:1px solid #f00; }

Selector property value formatting

.section { width:200px; height:200px; }
.section #child { border:2px solid #f00; }
.section p { margin-bottom:1.2em; }
.section ul { list-style:disc; }
.section ul li { margin-bottom:0.6em; font-size:1.1em; }

JavaScript

We’re a jQuery house, so a significant portion of our JavaScript style guide will include jQuery-specific notes. Along those lines, more generic JavaScript instructions will be needed as well.

Conditionals

if( $('#address').height() < 100 ) {
	do_this();
} else {
	do_that();
}

Chaining

$('.group')
	.find('> p')
	.removeClass('someclass')
	.addClass('newclass')
	.find('ul')
		.addClass('targetclass')
	.end()
.end()
.slideDown();

PHP

I’ve always liked the way CodeIgniter writes PHP. Their guide is extremely in depth and I’d simply like to use that as our style guide as well. One of the best things about CodeIgniter’s style guide is that both correct and incorrect usage is outlined.

Bracket and Parenthetic Spacing

// INCORRECT:
$arr[ $foo ] = 'foo';

// CORRECT:
$arr[$foo] = 'foo'; // no spaces around array keys

Do you use style guides?

I’m becoming increasingly comfortable with the idea that at least some form of style guide, whether on a team or individually, is an extremely important part of the process. It helps with everything from readability to quality control and especially helps a team become that much more cohesive. Are you/is your team using style guides? Have you found them to be helpful, hurtful, or ineffective?

In an ideal world, we’d be able to pull said content via (the real) AJAX but due to security (particularly cross domain) issues, that’s not a possibility. All is not lost, however. Enter cURL.

A brief introduction to cURL

cURL is defined as:

PHP supports libcurl, a library created by Daniel Stenberg, that allows you to connect and communicate to many different types of servers with many different types of protocols. libcurl currently supports the http, https, ftp, gopher, telnet, dict, file, and ldap protocols. libcurl also supports HTTPS certificates, HTTP POST, HTTP PUT, FTP uploading (this can also be done with PHP’s ftp extension), HTTP form based upload, proxies, cookies, and user+password authentication.

These functions have been added in PHP 4.0.2.

In summary, cURL allows you to have PHP fetch a page for you to do with what you will.

Setting up cURL

There’s a bit of a learning curve when using cURL, so you’ll want to review the manual. If you’re looking to set something up quick and dirty, the function I’ve come to use is (via):

function get_url( $url,  $javascript_loop = 0, $timeout = 5 )
{
    $url = str_replace( "&", "&", urldecode(trim($url)) );

    $cookie = tempnam ("/tmp", "CURLCOOKIE");
    $ch = curl_init();
    curl_setopt( $ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1" );
    curl_setopt( $ch, CURLOPT_URL, $url );
    curl_setopt( $ch, CURLOPT_COOKIEJAR, $cookie );
    curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, true );
    curl_setopt( $ch, CURLOPT_ENCODING, "" );
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
    curl_setopt( $ch, CURLOPT_AUTOREFERER, true );
    curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );    # required for https urls
    curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT, $timeout );
    curl_setopt( $ch, CURLOPT_TIMEOUT, $timeout );
    curl_setopt( $ch, CURLOPT_MAXREDIRS, 10 );
    $content = curl_exec( $ch );
    $response = curl_getinfo( $ch );
    curl_close ( $ch );

    if ($response['http_code'] == 301 || $response['http_code'] == 302)
    {
        ini_set("user_agent", "Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1");

        if ( $headers = get_headers($response['url']) )
        {
            foreach( $headers as $value )
            {
                if ( substr( strtolower($value), 0, 9 ) == "location:" )
                    return get_url( trim( substr( $value, 9, strlen($value) ) ) );
            }
        }
    }

    if (    ( preg_match("/>[[:space:]]+window\.location\.replace\('(.*)'\)/i", $content, $value) || preg_match("/>[[:space:]]+window\.location\=\"(.*)\"/i", $content, $value) ) &&
            $javascript_loop < 5
    )
    {
        return get_url( $value[1], $javascript_loop+1 );
    }
    else
    {
        return array( $content, $response );
    }
}

This function allows me to pass a URL and have it be returned as the first index in an array. The second index contains another array of response headers as well.

Replacing an IFRAME with cURL

The particular service I'm working with uses GET variables to filter the data presented. I can literally use the same URL string in my cURL function and work with the data straight away. For example:

$service_url  = $service_base_url;
$service_url .= "&var1=X";
$service_url .= "&var2=Y";
$service_url .= "&api_key=" . $service_api_key;

$request_results = get_url($service_url);

preg_match("/<body.*\/body>/s", $request_results[0], $pagecontent);

$pagecontent = $pagecontent[0];

$pagecontent = str_replace('<body>', '', $pagecontent);
$pagecontent = str_replace('</body>', '', $pagecontent);

// I'd like to resize the images...
$pattern = '/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i';
$replacement = '<img src="' . $imgpath . '/phpthumb/phpThumb.php?src=' . '$1' . '&w=160&h=110&zc=1';
$pagecontent = preg_replace($pattern, $replacement, $pagecontent);

echo $pagecontent;

What's happening there is I'm first building the request URL (as the GET variables will change based on a few things) and then firing my get_url() function and passing the final URL. That's a great start, but of course the cURL request is going to return a full HTML document (including the head) which we don't need. A quick preg_match will pull out everything included within the body of the document, and we'll finally strip that out as well.

That leaves you with the remote page as would have been included in the IFRAME itself. You can write applicable CSS and do what you will with the markup. You can even go a step further and continue to refine the markup returned. In my case, I'd like to resize the images returned to fit the design I'm trying to implement. I've come to use phpThumb for all of my resizing needs and a quick preg_replace lets you reformat the img src to better match your design.

Keep in mind the terms of service

I'm currently waiting to hear back from the third party in an effort of following their terms of service. With the official documentation revolving around the inclusion of an IFRAME I'd like to make sure that this alternative method is acceptable before I put the remaining hours into customizing the output.

Crop and Resize with GD

Above all, the most asked question was “why only ImageMagick“? I really don’t have a solid answer for that, other than the project itself was a way for me to get into using ImageMagick in a bit more detail than I ever had. I’m very happy to say that this version (as well as any future versions) now has equivalent ImageMagick and GD installations. You can choose one or the other in both the demo and download sections.

Demo: GD Crop and Resize v1.1

Demo: ImageMagick Crop and Resize v1.1

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

Converting to GD wasn’t a major undertaking thanks to the helpful comments on version 1.0. It did take some time getting the slider to properly convey dimensions that would result in an accurate recreation of the image. One thing I have noticed is that the GD version seems to result in lower quality output when compared directly to ImageMagick. If you’ve got a server with both GD and ImageMagick installed, take a minute to use the same image in both demos to see what the differences are. I plan on looking into this much further, but if you’re a bit more knowledgeable on the subject, I’d love to hear what you have to say. Could the answer be that ImageMagick is simply a superior piece of software? I noticed that GD gives you the option to control the quality of images when using certain functions, so I left image output at 90% for the time being (the default is 75%).

If you have any positive or negative experiences with the new GD version, please feel free to post your findings either below, or in an email to me. I’d be greatly appreciative of any data that comes through.

Updates to the server side

There were a number of fixes that needed to be done to the server side of things straight away. First and foremost was Linux dependency. I must admit, a Windows server didn’t cross my mind when I was working on version 1.0, so I tried to polish things up a bit in that regard. The mv lines have been replaced, as well as an update or two elsewhere. There could very well be some more Windows-specific issues to be dealt with, unfortunately I don’t have any Windows servers at my disposal to test with. Feedback in this area will be particularly helpful.

A small series of updates I made was to the file upload process itself. The example now only accepts files with a MIME type of image/jpeg. Future versions will allow for more image formats, but I’d like to do some more research before including it. There are also some checks on the filenames themselves, as there were some issues with particular circumstances in version 1.0.

There was some logic repair regarding the $maxWidth and $maxHeight variables you can set in the first step. As per request, $minWidth and $minHeight have also been added. This should allow you to really narrow down what image dimensions will result using these variables in conjunction with the Cropper UI. One issue that has not been included yet is taking the minimum and maximum values set in the first step into account when users have reached the resize stage of version 1.1. This will be handled in a future release.

Finally, the last noticeable feature to be added server side was the inclusion of image rotation. When the final image is presented, image rotations of 90, 180, and 270 degrees will be available as well. You’re able to pull apart the code to retrieve which image you’d like to use, and can also include auto-generation using a form whenever you’d like. This was a larger hill to climb when it came to GD as none of the servers I have access to had PHP compiled with GD bundled, therefore giving me no access to imagerotate(). As reflected in the source, a function was written as an alternative, and appears to work just fine. It checks to see if imagerotate() is available before taking the extra CPU cycles doing it ‘by hand’.

Updates to the Cropper UI

I can’t credit Dave Spurr enough for his Cropper UI that powers the entire front end of the cropping mechanism this installation provides. He had made a number of updates after my version 1.0 release, so first things first I went ahead and upgraded to his most recent version.

The second most asked for feature was a specific alteration to the Cropper UI itself. Whether it be minimum dimensions, maximum dimensions, or something else, it seemed like many people would like to use the script, but the openness of the Cropper UI was in fact a limitation. I made an effort to indicate that Dave Spurr included many of the requested features right out the box and documented them well on his website. To help with the version 1.1 demo, I’ve included a few Cropper UI instances to demonstrate its robustness. When you check out the demo, you’ll see a new option to choose the crop type you’d like to use. I’ve included the following by default:

Basic crop

Includes the most basic version of the Cropper UI. Unrestricted as far as crop dimension is concerned.

Ratio (16:9)

A 16:9 ratio will be applied to the Cropper UI. There are no restrictions for width or height.

Minimum Dimensions (200×200)

The Cropper UI will require a minimum 200px by 200px crop area and will not allow anything less.

Minimum Dimensions (200×200) with Ratio (1:1)

The Cropper UI will require a minimum 200px by 200px crop area and will not allow anything less. It will also apply a 1 to 1 ratio when adjusting the crop area.

Maximum Dimensions (200×200)

The Cropper UI will require a maximum 200px by 200px crop area and will not allow anything less.

Maximum Dimensions (200×200) with Ratio (1:1)

The Cropper UI will require a maximum 200px by 200px crop area and will not allow anything less. It will also apply a 1 to 1 ratio when adjusting the crop area.

Fixed Dimensions (200×200)

You’re provided with a crop area at a fixed size of 200px by 200px. The drag handles are also removed as an added convenience.

Minimum Dimensions (100×100) & Maximum Dimensions (200×200)

With this option, you’re limited to a crop area range scaling from 100px by 100px to 200px by 200px.

The Cropper UI is quite impressive in and of itself as you can see by the number of options you can apply by changing some values. For example, one thing I didn’t include in the demo is a Cropper UI that is limited to minimum and maximum dimensions as well as an aspect ratio of 1:1. You can easily invoke a Cropper UI with these attributes by creating a new file (lib/init_cropper/min_max_ratio.js for example) and inserting the following:

function onEndCrop(coords, dimensions) {
	$('cropX').value = coords.x1;
	$('cropY').value = coords.y1;
	$('cropWidth').value = dimensions.width;
	$('cropHeight').value = dimensions.height;
}

Event.observe( window, 'load', function() {
	new Cropper.Img(
		'cropImage', {
			ratioDim: { x: 1, y: 1 },
			minWidth: 200,
			minHeight: 200,
			maxWidth: 300,
			maxHeight: 300,
			onEndCrop: onEndCrop
		}
	);
});

Swapping in this JavaScript would invoke a new Cropper UI for your image with a minimum dimension of 200px by 200px, a maximum dimension of 300px by 300px, as well as an aspect ratio of 1:1. Going further, you’re also able to specify a minimum or maximum for a height or width alone. This will result in a Cropper UI with handles only on the top and bottom if you wish. I would definitely suggest checking out the official website for Dave Spurr’s Cropper UI for more details

Download & installation instructions

Installation is very straightforward. Download links to follow.

1. Download the GD or ImageMagick version
2. Extract
3. Upload to your webserver
4. Give write permissions to the working folder and subfolders
5. Begin using the demo

Download GD Crop and Resize v1.1 (.zip)

Download ImageMagick Crop and Resize v1.1 (.zip)

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

Many times, if you’re experiencing odd behavior such as pages turning up blank, there is an issue with write permissions on your server. The demo will need write access to the directory in which it is stored as well as the working folder and all folders within it. Errors with the code itself will more than likely be output to the screen. If that happens, please feel free to post your errors at your earliest convenience.

What about AJAX?

Another request that popped up more than once was a request for an AJAX version, something that didn’t require the page to reload. I thought about working out something such as that but quickly dismissed it, at least for now. My intention with this project was to provide something which would be used by the widest audience possible. Too many times have I seen examples too far into their own development to prevent me from writing something from scratch. In my opinion, an AJAX version of this example would prevent easy adoption and inclusion for many developers. AJAX may be a possibility for a future version, but I’d like to seriously consider as many angles as possible. This directly relates to the (lack of) design when looking at the demonstration. I wanted to keep things minimal in order to create the least work for anyone who wants to try incorporating this into something they’ve written.

I hope at the very least, the GD version presents itself as useful to at least a few people over the coming months. I do plan continuing work on future version, I simply hope it doesn’t take as long as this revision has. Please provide any comments you’d like, especially bug reports, and enjoy the demo!

I thought this little problem of mine would be a good reason to whip up a really simple address book we could run on our in-house server. The idea would be to keep an up to date listing of basic contact information for any clients we’ve ever done business with. It wouldn’t be anything spectacular, just an easy way to enter in basic contact information for people, and group them by their company. This past weekend, I fired up Coda and got to work.

Contacts. FOSS contact management.

Contacts is a really simple application modeled after many desktop address books. When you bring it up, you’re given a list of entered contacts, as well as a list of companies that have been entered. Clicking a company name will limit the contacts list to only those contacts which are part of the selected company. Clicking a contact name will take you to a details page which contains information about the selected contact. This details page is (partially) equipped with hCard. At the bottom of the details page, you’re able to edit or delete the active contact.

I told you it was basic.

Contacts uses some icons from the famous Silk icon set, as well as an icon from the Tango icon set.

Getting on to the demonstration

The demonstration is the best part. You can check out the Contacts 0.1 Demo and see what it’s all about. The demo does have some restrictions you should know about. First and foremost, when you hit the demo, you’ll be asked for your name. This is used to ensure that any data you add/remove/edit will be seen only by you. Obviously this is a very simple solution, and there is a chance that two people could enter the same name. Please keep this in mind before entering any sensitive data. Also, the database will be purged on a regular basis to control table size. If your data goes missing while you’re checking out the demonstration, (hopefully) it’s just the clean-up process.

The live demo has been temporarily disabled due to a recent server change.

I can’t stress enough that this version is very early in development, so if you do happen to come across any bugs or awkward behavior, please take a few minutes to send me an email.

Contacts is definitely a work in progress

The 0.1 release of Contacts is definitely a work in progress. As Colin Devroe reminded me; “FOSS is always release early, release often”. I’m going to keep this in mind and mark this project as ‘live development’. In much of the same style as a live redesign, this project will [ideally] be updated often, and I’m going to chronicle the changes as I go along.

Download Contacts 0.1

To install Contacts 0.1, you’ll need a server running PHP and MySQL. You can then follow these steps:

1. Create a MySQL database and user with appropriate privileges
2. Extract the archive and copy the contents into an empty folder
3. Edit config.php and enter the correct DB_NAME, DB_USER, and DB_PASSWORD
4. Hit install.php in your browser (sets up table)
5. Delete install.php

Feature Requests

As I was working on Contacts, there were a number of things that came to mind that I’d like to include as features go. My main goal with this project was to end up with a simple and lightweight contact management Web app, so I don’t want to bloat things with completely superfluous features. Some of the things I plan on adding:

• Better hCard support
• Multiple phone numbers
• Phone number types (i.e. work, home, mobile, etc)
• Multiple email addresses
• Mobile version
• Better search functionality (currently only works with single words)
• Progressive enhancement via JavaScript
• Optimized database structure

My list goes on, and I hope to implement these features as soon as possible. What other features would you like to see in Contacts? Is it something that’s of any use to anyone besides me?

Limitations range greatly from one CMS to another, some have embraced Web standards and produce semantically rich and valid markup, while others have put standards on the back burner. One issue I’ve had some reoccurring trouble with in the past is the combination of a CMS with managed images that are part of the design as opposed to having informational value. To be more clear, sometimes a client will request to have control over a piece of stock imagery represented on any number of pages. This becomes an issue because traditionally, when images are uploaded in context, they’re treated as having informational value and included using an img tag with a descriptive alt attribute.

So what’s the problem with inline images?

There’s nothing at all wrong with inline images — as long as it is applicable that they be represented in the markup as an inline image. When images are included in the markup, they should have informational value. Images with the sole purpose of adding to the design can be better included via your style sheet as to preserve the separation of style and content.

Inline images definitely have their place on the Web, but it is a far different position than images used for the site design purposes only. Those images should be included via the associated style sheets, defined either by hand, or through the theme management of the CMS. Keeping that in mind, there can be a time when images that should be defined using CSS are instead included via the CMS front end.

What can be done about the situation?

The trouble with trying to give a client control over design-oriented images is when it comes to referencing the dynamic content. With inline images, it’s easy in that the image URL can be pulled from the back end and used in any way you please. It becomes a bit harder when a style sheet needs to be updated with a change in URL. I’ve read an article or two about using PHP (or any other server side language) to generate style sheets on the fly, but including PHP echos in CSS doesn’t sit well with me. It also restricts that style sheet to the language in which it has been written, therefore forcing an otherwise unnecessary update should the style sheet be written strictly in CSS.

Another way to go about things would be to have the CMS handle a number of style sheets the can be, as was an original intention, cascaded upon one another. These files could be generated, taking into consideration any images that are managed via the CMS, and then included with the site CSS.

A more abstract method that could be possible is using a static URL in your style sheet that references the dynamic image, but instead of updating the URL, the CMS will update the image file itself. Effectively the URL remains the same, but the target image itself can be updated by the client via the CMS.

What’s this got to do with inline styles?

While any of the above can be considered a solution, not everybody has open access to the inner workings of their CMS. Sometimes you’re literally stuck with an image URL and that’s all you get. At this point, is it better to include the image as a background-image via inline CSS? Is it acceptable to ignore document semantics and include the image inline?

In my personal opinion, I think I’d opt to go with using inline CSS and a background-image as opposed to sacrificing semantics. While inline CSS is considered difficult to manage, in this case the CMS is doing the management for you. While the end result isn’t completely ideal, I have to consider it more appropriate than using an inline image.

Is this an issue you’ve ever had to worry about before? Do you really consider it an issue at all?

Update: There has been significant discussion in the comments regarding a GD version of this script. I have re-released v1.0 of this example as a GD version as well as an ImageMagick version. You can find both downloads below The download has been removed in preparation of version 1.1 due for release on December 17, 2007. They behave function exactly the same as one another. Thanks for all the contributions (Stefan Leever and others) and requests!

Image management is often a big part of a comprehensive CMS, and in my personal experience, has been one of the more difficult areas to make really easy for people to use. Those that are technically inclined are often able to successfully format an image to their liking if given proper instruction. On the other hand there are many who find image editing to be difficult, intimidating, and/or confusing.

View JavaScript Crop & Resize Demo

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

In an effort to better the situation, I put together a demo which gives the end user the ability to upload, crop, and resize their image from within their Web browser. The intention, on my end, would be to use it for server-side image pre-processing before the image is used by a client in their CMS for their website.

What powers JavaScript cropping & resizing

This demo wouldn’t be possible without a number of scripts that can not go without mention. First and foremost, the entire client side process is based on the Prototype JavaScript Library. Prototype has just been updated to version 1.5.0 and it acts as the foundation for both the crop and resize stages of the demo.

Another essential piece of this demo is script.aculo.us, a collection of effects addons for Prototype. It provides some really excellent UI tools to work with as well as various animation effects. Both the crop and resize stages use script.aculo.us features.

JavaScript Image Cropper UI by Dave Spurr

In my opinion, the most comprehensive aspect of this JavaScript image crop and resize demo is the cropping stage. The JavaScript Image Cropper UI by Dave Spurr is a script that deserves the spotlight in the demo. It was written using both Prototype and script.aculo.us and it is the one piece that really brings the demo together.

Dave’s JavaScript Image Cropper UI has many more capabilities than the basic version included in the demo. If you check out his documentation he includes cropper user interfaces that can inherit various options such as retaining an aspect ratio, min/max width/height, and also display a crop preview if desired. The JavaScript Image Cropper UI by Dave Spurr is a feat in and of itself and should be given proper recognition.

Server requirements

The provided demo was written for a Linux based Web server running PHP and having ImageMagick installed. It should run on a Windows based server with minimal adjustments, such as including the path to your ImageMagick install for each command.

ImageMagick is a powerful command line image editor which performs all of the actual image transformations server-side. Installation is usually quite easy after following directions written for your Web server configuration.

Installation notes

After you’ve downloaded the demo, extract the files to a common directory and upload that folder to your server. After uploading, the directory will need to be given write permissions. Failing to do so will destroy the functionality of the demo as uploads won’t be saved and there would be no way to create the adjusted images.

Download ImageMagick Crop & Resize (.zip)

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

Closing thoughts about cropping and resizing with JavaScript

This demo was put together in an effort to make very basic image editing easier for less technically inclined users. The main intention is to provide it as a component to include in a variety of applications including custom content management systems or Web applications.

I hope the demo proves to be useful, but I absolutely welcome any comments and criticisms readers may have. Please take a minute to post your thoughts below so that the demo can be in constant revision to ensure it’s effectiveness.