The Workaround

Below is a simple Javascript function you can use to convert Tiny-enhanced textareas back into regular form textareas:

var fixTiny = function(properties) {
	var properties = properties || new Object();
	var instance = properties.instance || 'mce_editor_0';
	tinyMCE.execInstanceCommand(instance,'mceCleanup');
	tinyMCE.triggerSave(true,true);
	return true;
}

Using The Goods

Using the above Javascript function is easy. Let’s assume we’re submitting two TinyMCE-enhanced textareas named “excerpt” and “body”, in a form with the id “myForm”. Here’s how to submit the form:

(The form submit code is taken directly from this Mootools demos page. Please refer to that page for further Ajax.Form reference.)

$('myForm').addEvent('submit', function(e) {
	/**
	 * Prevent the submit event
	 */
	new Event(e).stop();

	fixTiny({instance:'excerpt'});
	fixTiny({instance:'body'});

	/**
	 * This empties the log and shows the spinning indicator
	 */
	var log = $('log_res').empty().addClass('ajax-loading');

	/**
	 * send takes care of encoding and returns the Ajax instance.
	 * onComplete removes the spinner from the log.
	 */
	this.send({
		update: log,
		onComplete: function() {
			log.removeClass('ajax-loading');
		}
	});
});

All of this code, including the fixTiny function should be placed within a domready event.

Simple, Right?

If I’ve missed anything, shout at me. You can also refer to the Mootools forums for further examples of using both TinyMCE and the Ajax.Form class.

For those who have similar inspirational needs, allow me to lend a helping hand. I’ll list my personal favorite websites categorized by three major design pools: web showcasing, typography, and digital art.

CSS / XHTML / Flash Showcases

Digital beauty in the form of web design…

The easiest place to gather hordes of inspirational material is among the hundreds of CSS/XHTML and Flash showcase websites. Each of these showcase websites are dedicated to the programmers looking for inspiration through others works. Here are a few of the best:

CSS Vault & Design Shack

Both CSS Vault and Design Shack have a huge collection of CSS-based websites that offer the common user the ability to comment and rate each submission. The Vault also showcases a load of css demos, hacks, and tools, while the Shack sports bitchin’ tutorials.

Design Snack

Although very similar to CSS Vault and Design Shack, Design Snack uses cookies to award submissions a ranking on their website. Registered users of Design Snack can rate submissions, much the same way Digg users rate articles - the popular ratings get noticed and awarded, while the runts of the group are dropped from the website.

Stylegala

Stylegala stands out from the rest by syndicating important design-related news directly onto their website. This, along with their groovy features section, and wicked forum gives them a special place in my code-ridden heart.

FWA

Without a doubt, FWA is one of the most pristine Flash web awards on the net, showcasing over 2,300 websites in the last seven years. To be listed or better yet, receive Site Of The Day (S.O.T.D.) or Site Of The Month (S.O.T.M.) notoriety, is a real honor. Plenty of talent listed for the gawking.

A List Apart - Design

Because of the abundance of well-written articles on A List Apart, this website will no doubt appear once for each category. Though the website itself is pure beauty, A List Apart’s purpose is to provide meaningful web reads for us geeks. They succeed.

Typographic Hotness

It’s not what you say, but how you display it…

It may not be the most interesting of topics, but typography is probably the most important detail of web design. The text spacing, positioning, color, size, and angle can make or break a designs (web or print related) appeal. When you’re in the mood for some typographic porn, these sites might tickle your fancy:

I Love Typography

I Love Typography is hands down one of the best typography related websites - not only are endless examples archived for viewing pleasure, but its authors frequently attempt to explain why certain designs are more appealing than others.

Typographica

Typographica says it best: “Typographica is a journal of typography featuring news, observations, and open commentary on fonts and typographic design.” One of my favorite typography journals.

A List Apart - Typography

Once again A List Apart makes it into my list of favorites - this time for typography. The first true typography article I ever read came from A List Apart: Typography Matters.

Smashing Magazine

Although Smashing Magazine spreads across each of these categories nicely, it’s typography section is especially nice. There generous gift of free fonts once a month and “Monday Inspiration” articles quickly have you dreaming with font.

ISO50

Scott Hansen, a typography god, created ISO50 to display his visual works.
Easily a print design prodigy, Scott has repeatedly inspired me to think outside and even beyond the box.

Mark Boulton

Though Mark Boulton’s website has plenty of useful information, this post in particular is one of the best crash courses in learning better typography habits that I’ve ever read. Take ten minutes to absorb the tips - be a better designer. As simple as that.

Art, The Physical Kind

Inspiration that hangs from your walls…

Yes, there are many kinds of art and no, I’m not defining art as anything you can hang on your wall. However, surrounding yourself with inspirational works outside of your computer can help in grasping real world print and design. Here are a few artists that inspire me on a daily basis:

David Lanham

Digital artwork at its best. David Lanham takes everything you thought you knew about artwork and makes it better - way better. The colors are amazing - the prints so perfectly detailed. Every print available for purchase also comes in digital form, as a desktop wallpaper, allowing you to capture the inspirational goodness on all mediums.

Scott Saw

Patterns are Scott Saw’s obsession. His work is littered with brilliantly colored stencils, covered with scenes of nature, mechanical objects, or spiritual innuendoes. I personally have a small collection of Scott’s work - I recommend starting your own.

ProcessRecess - James Jean

A beautiful site coupled with amazing artwork you can actually buy - James Jean works magic on a large number of different mediums, including glass and aluminum. His use of gradients makes him my personal hero.

Are Age - 555[Design]

Are Age is his art name and real-world art mixed with Photoshop skills is his art game. (I rhymed.) Less fiction, more life. Are Age delivers rich content saturated in complex detail. One of his works are sure to appear on my wall soon.

What Did I Miss?

Add your favorite inspirations…

Obviously my inspirations might differ from yours. Add the sites that inspire your creative by leaving a comment.

After sorting through tons of scripts, I thought I’d share the best ones with you.

Each script is categorized based upon the Javascript library they use. A few links aren’t actually scripts, but rather reference sheets or links to other resource websites.

jQuery (jq)

“jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.” - Wikipedia, 01/16/08

Reference Sheet (jq)

Each one of these reference sheets (cheat sheets) are crammed with functions and usage for jQuery. (They are slightly outdated. If you know of any jQuery reference sheets recently updated, please let me know.)
=-=-=-=-=-=
Reference Sheets (PDF): Page 1 - Page 2

Multiple File Uploads (jq)

The point of this AJAX-enabled script is to give the user a visual sandbox to add/delete uploads, all without ever reloading the page. The examples and documentation are topnotch.
=-=-=-=-=-=
Fyneworks - Multiple File Upload

Table Sorting (jq)

Sort table data by their parent category with Javascript - no page reloading, compact code, lots-o-fun.
=-=-=-=-=-=
Polyester - Tablesorter

A List of 240 Plugins (jq)

Rather then regurgitating what’s already on the net, here’s a site that lists over 240 jQuery plugins and their respective links. It’s freaking huge.
=-=-=-=-=-=
Sastgroup - 240 Plugins For jQuery

MooTools (mt)

“Mootools is a compact, modular, object-oriented JavaScript web application framework, intended to make the process of writing extensible and cross-browser compatible code more efficient.” - Wikipedia, 01/17/08

Reference Sheet (mt)

Being that MooTools is so simple to use, you may not even need a cheat sheet. But just in case, Snook has put together a colorful dab of MooTools knowledge for your enjoyment.
=-=-=-=-=-=
Snook - Mootools r83 Cheatsheet

mooRainbow (mt)

MooRainbow has to be one the best looking color pickers I’ve seen for the web that isn’t Flash. It’s almost an exact clone of the color picker used in Photoshop, and again, it’s for the web. Sweet stuff people, sweet stuff.
=-=-=-=-=-=
Woolly Sheep - mooRainbow

Mediabox (mt)

Think of a lightbox, only comprising of streaming online media (like YouTube or Quicktime movies) instead of images. This is what we call a ‘mediabox’, and I love it.
=-=-=-=-=-=
Ianian7 - Mediabox

Slideshow (mt)

Taken from Electric Prism, “Slideshow is a javascript class to stream and animate the presentation of images on your website.”

The presentation is similar to the default pan/zoom of Apple’s screensaver.
=-=-=-=-=-=
Electric Prism - Slideshow

Charts (mt)

Easily create stylish charts and graphs of any combination of data, all with Javascript simplicity. If you have any data that needs presenting on your website, this script is well worth a download.
=-=-=-=-=-=
Copix - Charts & Graphs

Calendar / DatePicker (mt)

Made by the same badasses that created Mediabox (above), this date picker is super-stylish and easy to integrate into your website. Never again should your web user have to manually insert a date.
=-=-=-=-=-=
Electric Prism - DatePicker

FancyUpload (mt)

FancyUpload is a stylish presentation of uploads and ability to add/remove your upload queue with a mouse click. Well worth a look for anyone presenting upload options on their site.
=-=-=-=-=-=
Digitarald - FancyUpload

Library (mt)

Keeping with what the header says, this is the motherload of MooTools information - a library for a library, if you will. It’s a complete reservoir of scripts, tutorials, and basic information relating to MooTools.
=-=-=-=-=-=
CNET - MooTools Library

Mocha UI (mt)

Picture an entire user interface built entirely in Javascript. That’s Mocha UI - expandable, collapse, and minimize windows all while maintaing the feeling of being in a virtual operating system. It’s incredibly smooth, cross-browser compatible, and unbelievably small in size.
=-=-=-=-=-=
Greg Houston - Mocha

MooTable (mt)

Dress a simple table in a MooTable script and you instantly have the ability to sort any column with the click of the mouse. Easy to setup and extremely lightweight.
=-=-=-=-=-=
Joomlicious - Mootable

Reflection JS (mt)

Reflection JS beautifully adds a perfect reflection to any image without the need for manual labor. The background opacity, height, and fade can be controlled as shown on the Reflections website.
=-=-=-=-=-=
Digitalia - Reflection JS

Slimbox (mt)

It’s identical to Lightbox v2.0, only made for MooTools and a mere 7kb in size. It’s a must have for MooTool users needing the lightbox effect.
=-=-=-=-=-=
Digitalia - Slimbox

MooFlow (mt)

It’s coverflow for the web, built on MooTools. The application is a little shaky, but will no doubt improve with time.
=-=-=-=-=-=
Outcut - MooFlow

Prototype (p)

“… A JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities.” - Wikipedia, 01/23/08

Reference Sheet (p)

Made by the same killer dude that created the MooTools cheat sheet, Snook delivers some Prototype help in the same yummy, cheat sheet fashion.
=-=-=-=-=-=
Snook - Prototype Cheat Sheet

Script.aculo.us (p)

An obvious must-have for Prototype users. Script.aculo.us provides an amazing library of visual styles (including the ability to drag-and-drop) and works flawlessly on the Prototype library.
=-=-=-=-=-=
Script.aculo.us

Really Easy Field Validation (p)

Exactly what the header says - convert any form into an instantly-validating machine.
=-=-=-=-=-=
Tetlaw - Really Easy Field Validation

jsProgressBarHandler (p)

Add a beautiful progress bar to your application and start singing songs of joy. This is by far the easiest (and best looking) progress bar script you’ll find on the internet.
=-=-=-=-=-=
Bram - jsProgressBarHandler

EditInPlace (p)

This is an excellent script in that it’s simple, yet extremely helpful. The techniques of EditInPlace are used in applications like Basecamp and Facebook, and probably everywhere else on the internet.
=-=-=-=-=-=
EditInPlace

Prototype Window (p)

Prototype Windows is an extremely advanced version of Lightbox. Create popup windows on-the-fly with ajax calls, or via common href application. Anything’s possible.
=-=-=-=-=-=
Xilinus - Window/

See What I Mean?

Let me show you exactly what I’m talking about using some screen shots I took of my own application.

These first two screen shots show the index page and post page of my news application:

(At the moment, nothing is posted on the index page.)

(A typical form allows the user to post a new news article…)

When we post a new news article, the typical Cake method is to display a flash message on a separate page, forcing the user to temporally leave your application. This method is distracting for the user and makes your application feel broken up. (To return to the news index page, the user is forced to click the “Your post has been saved” message.)

Instead of the above method, let’s use the same messages in a Web 2.0 fashion. After a news article is posted, we can automatically redirect the user back to the index page AND display the message on the same page:

See what I mean? Allow me to show you how it’s done…

Configure Your Layout

In order to display the awesome-web-2.0-styled messages, we need to add a line of code to your app/views/layouts/default.thtml page, above the code which displays your layout content:

<?php
   if ($session->check('Message.flash')): $session->flash(); endif; // this line displays our flash messages
   echo $content_for_layout;
?>

Configure Your Controller

Next comes the line you must add to your app/controllers/news_controller.php controller to display your message and redirect your user to a particular page:

function add() {
...
   if ($this->News->save($this->data)) {
      $this->Session->setFlash('Your post has been saved.');
      $this->redirect('/news/index');
      //$this->flash('The News has been saved', '/news/index'); // this was the old way of doing things... yuck
   }
}

All Done!

Now when a flash message is displayed, it’ll be placed in a div (directly above the layout content) for easy style manipulation:

<div id="flashMessage" class="message">Your post has been saved.</div>

Easy as cake. If you have any questions or suggestions, please post.

The all-too-awesome PHPMailer class has been updated and is awaiting your download.

If you use MooTools (or even if you don’t), Vacuous Virtuoso’s Fancy Form is totally worth checking out. It’s a mix of CSS and Javascript that enables you to create custom form checkboxes. There are other script on the net that claim to do the same thing, but none are as cross-browser compatible.

Lastly, to add a splash of color to your ajax load processes, check out Bram Van Damme’s Progress Bar Handler. It’s probably the smoothest, best looking non-flash based progress bar on the net.

If you're finding that executing this:
<?php echo $html->formTag('/' . $params['url']['url'], 'post', array('enctype' => 'multipart/form-data')); ?>
	<?php echo $html->input('Test/title'); ?>
	<?php echo $html->file('Test/file'); ?>
	<?php echo $html->submit('Save'); ?>
</form>

... returns something like this:
$this->data:Array
(
    [Test] => Array
        (
            [title] => Foo
            [file] => 4tmp/phpHGSjDA
        )
)

... instead of something like this:
$this->data:Array
(
    [Test] => Array
        (
            [title] => Foo
            [file] => Array
                (
                    [name] => aeo.jpg
                    [type] => image/jpeg
                    [tmp_name] => /tmp/phppM8tfc
                    [error] => 0
                    [size] => 45471
                )
        )
)

... then you must be as annoyed as I am.

The reason why the file form field is returning the tmp name is because CakePHP expects register_globals is OFF.

Solution One

Turn off register_globals via .htaccess:

#/app/webroot/.htaccess
php_flag register_globals off

Solution Two

Manually write your HTML form fields without using an input array:

-- do this --
<input type="file" name="file" />
-- not this --
<?php echo $html->file('Test/file'); ?> // will output: <input type="file" name="data[Test][test]" />

Solution two is a slight pain in the ass, because now that you’ve eliminated the array within the form input field, you need to do a little extra work in your CakePHP controller. (If there’s a demand, I’ll give some examples.)

Hopefully this’ll clear up Cake’s messhole.

Control Suite is a collection of six high quality widgets and controls for Web 2.0 applications built using the Prototype JavaScript framework. Each script is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. All scripts are MIT licensed and are thus completely free for any purpose in any project.

Thus far, the SelectMultiple is finding some serious use in my web applications. Assuming I come up with something not already discussed in Ryan’s examples, I’ll post it in Labs.

Go to the official Control Suite website.

The method most spammers use is called a “mail injection”, in that the spammer manipulats the PHP mail() function via a custom form post, etc. I won’t go into details, as a quick search on Google came up with over 225,000 pages describing this technique - here are a few.

Getting around these hacks requires detailed validation of your data.Thankfully I’ve done everything for you using the best PHP email class around, PHPMailer. My class is called SendMail and it’s an extension of the PHPMailer class. The result is a powerful script capable of sending email via SMTP or POP3, all without handing over your server to a toothless spammer.

The SendMail class has been updated. Please view the updates before commenting.

Download The SendMail Class

Click the link to download the SendMail class and continue reading to learn how to use it.
Download the SendMail class

Setup

Setting up the SendMail class is easy-peezie. Simply include the required SendMail variables and call the send() function to send emails:

<?php
require("inc/class.sendmail.php");

if($_POST){
    $mail = new SendMail;

    $mail->authHosts = array("domain.com");

    $mail->addEmail("name@person.com","Name",);
    $mail->addEmail("name2@person.com","Name2");

    $mail->subject($_POST['subject']);
    $mail->body($_POST['body']);

    $mail->fromName($_POST['from_name']);
    $mail->fromEmail($_POST['from_email']);

    $result = $mail->send();

    if (!$result){
        if(!empty($mail->errors)) {
            $mail->displayErrors($mail->errors,'ol');
        }
    exit();
    }
}

echo "Message was sent successfully";
?>

<form method="post" action="<?=$_SERVER['PHP_SELF']?>">
    <input type="text" name="from_email" value="people@info.com" /><br />
    <input type="text" name="from_name" value="People" /><br />
    <input type="text" name="subject" value="This is a subject" />
    <input type="text" name="body" value="Email body goes here." />
    <input type="submit" value="Submit" />
</form>

For further security, you may implement the authHosts variable as highlighted above. The authHosts array specifies what domains are allowed to send $_POST data. Any domains not listed that attempted to contact the script via $_POST will get a 403 (permission denied) error.

Further Configuration

If you need to specify an SMTP host, username, and password, include each variable before calling the send() function. You may also specify the charset and select whether or not HTML should be used in the email by using the respective code below:

...
$mail = new SendMail;

if($_POST) {

    $mail = new SendMail;

    $mail->authHosts = array("domain.com");

    $mail->host = 'mail.domain.com';
    $mail->username = 'root';
    $mail->password = 'pass123';

    $mail->charset = 'utf-8';
    $mail->bodyHtml = "HTML goes in here";

    $mail->addEmail("name@person.com","Name");
    $mail->addEmail("name2@person.com","Name2");

    $mail->subject($_POST['subject']);
    $mail->body($_POST['body']);

    $mail->fromName($_POST['from_name']);
    $mail->fromEmail($_POST['from_email']);

    $mail->Mailer = 'mail';

    $result = $mail->send();

    if (!$result){
        if(!empty($mail->errors)) {
            $mail->displayErrors($mail->errors,'ol');
        }
    exit();
    }
}
...

When displaying errors via the displayErrors() function, you may choose to use <ul> or <ol> HTML. If you’d rather receive errors as an array, use $mail->errors only.

Fini, Cowboy

If you need further explanation or would like a better understanding of the code, dig into the inc/class.sendmail.php file. The code is well-commented and should guide you nicely. If it doesn’t, comment and I’ll help you myself. For further information on PHPMailer, go to the official website.

Updates

Nov 27, 2007: The entire SendMail class has been rewritten to better perform as OOP should. The domain security is now optional. All files have been updated for downloading.

Dec 21, 2007: Select between sending with PHP mail(), SMTP, or POP using Mailer as shown above. All files have been updated for downloading. Eat it up.

Jan 15, 2008: When sending HTML mail, alternative text sends accordingly.

I’ll walk you through creating custom error pages, both simple and complex.

Basic Errors

Creating typical custom error pages in Cake is super easy. Below is a list of files that can be created in the /app/views/errors/ folder in order to overwrite the generic error templates located in /cake/libs/view/templates/errors/:

# not found #
    error404.thtml

# missing files #
    missing_action.thtml
    missing_component_class.thtml
    missing_component_file.thtml
    missing_connection.thtml
    missing_controller.thtml
    missing_helper_class.thtml
    missing_helper_file.thtml
    missing_layout.thtml
    missing_model.thtml
    missing_scaffolddb.thtml
    missing_table.thtml
    missing_view.thtml

# private & scaffold related errors #
    private_action.thtml
    scaffold_error.thtml

The above errors are all fine and dandy, but what if you want to create a custom error to be displayed when a user is denied access to the super secret area of your website?

Custom Errors

Custom errors could be used for anything - to let users know an area is restricted, or perhaps to users know they need to pay you loads of cash in order to use your website. Whatever the reason, Cake can help.

Example:
Let’s say you want your users to donate before entering your website. For those who haven’t donated, you want to display an “error”.

First create your donation error page as you would any of the errors above, and place it in the typical errors folder:

/app/views/errors/donation_error.thtml

Next, in order to call your custom error, place the following in your controller of choice:

$this->viewPath = 'errors';
$this->render('donation_error');

Give yourself a pat on the back. You’ve done well.