I’ve finished a simple, photography-showcasing website for myself – which comes with a super-unoriginal URL:
photos.iamkoa.net

If you’re interested in photography or have a showcase website of your own, leave a comment.

Props to Flickr, Cufon, jQuery, Masonry, and Lightbox for making the website dazzle.

An application for Android is about to win the hearts of Flickr fans and photography enthusiasts alike – it’s called Flicka, and it promises to bring the power of Flickr to your Android device.

Here’s a few key features as listed on Flicka’s blog:

Flicka needs to be on my phone. Now!

Mac OS X may not be as easy as Ubuntu to customize, but thanks to GeekTool, you can make your desktop background a little more useful than just eye-candy. I’ll show you how to easily add a calendar, multiple clocks (display both relative and non-relative time), a live system processes chart, and a system up-time timer (with load averages) to your desktop. Of course you can easily add more items, but this should be enough to get you started.

Sounds completely geeky (and it totally is), but GeekTool makes you and your desktop look awesome – it also increases sexual pleasure and makes you last longer in bed.

Get Your GeekTool Ready

Obviously none of this action would be possible without GeekTool, so go download yourself a copy and install it. The install should take you 30 seconds or less. Skim over the Introduction to give yourself a quick overview of your new best friend.

Add The Goods To GeekTool

Now that you have GeekTool installed, it’s time to add some magic to your desktop. (You can reference my desktop screenshot above as you add your GeekTool components.)

For each component you add, you can drag and resize the window in which they appear – you’ll see what I mean once you begin.

To add a new component, click “New Entry” in GeekTool and under the main configuration frame drop-down menu (#3 in the screenshot), choose “Shell”, then insert the following code into the “Command” textbox. The “Refresh” input box can be changed to rerun the Shell command every number of seconds.

Here we go from bottom to top of my desktop screenshot:

System Uptime Stats

uptime
Set refresh to ten.

System Processes Chart

top -l1 -u -o cpu -S -n 15
Edit the number “15″ at the end of the string to display more or less processes.

Local Time

date +%H:%M
You can change the format in which the date is displayed using these nifty conversion symbols.

Non-Relative Time

TZ=Pacific/Honolulu date +"Honolulu: %H:%M"
To change the timezone, edit the TZ variable above to something like “America/Los_Angeles” – a full list of possible TZ variables can be found here:
http://twiki.org/cgi-bin/xtra/tzdatepick.html

Calendar

cal | sed "s/^/ /;s/$/ /;s/ $(date +%e) / $(date +%e | sed 's/./#/g') /"

My Exact GeekTool Setup

Want to completely copy my style? Be my guest!

Colors and Font

White – Monaco
The font size is variable depending upon the component – it varies from 9, the uptime and system processes, to 71, the local time.

Text

Right-justified

Image Background

I can’t remember where I download the background from, but it’s called “Flow” and it insanely rules. (If you know to whom I should give credit, please let me know.)
Download Flow (~3MB)

Enjoy!

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.