Creative Juices Bo. Co.

Teaser: Drag and Drop File Uploads with jQuery and ColdFusion

I've been a busy little bee as of late, but I wanted to let you know I've been working on something that I think you might enjoy. A way to incorporate file uploads using drag and drop!

jQuery handles the UI and ColdFusion handles back-end magic. Drawbacks of course being that this only works with HTML5 enabled browsers (i.e. all modern browsers, accept Internet Explorer). It also uses the form "PUT" method, so I'm not 100% sure which versions of ColdFusion it's compatible with (I'm using the latest Railo and I've tested it on CF9).

Anyway, I've slapped together a quick video of it in action, so check it. Hopefully I will be able to get around to releasing the code on how I'm doing this soon, but I need to wrap a few things up first. Enjoy!

Click the "read more" link to watch the video...

This post is primarily a reminder for myself, but it might be useful for others as well. One of the cool new features of CCS3 is the ability to use customer fonts by declaring @font-face. I've been using some of the cool @Font-Face Kits from Font Squirrel on some of my new sites. One of the things I just discovered is that some of there included .eot files do not seem to work as expected on Internet Explorer (.eot fonts are what IE is supposed to use).

Anyway, I fixed the problem, by converting the included TrueType (.ttf) file into an .eot font using the ttf2eot service and everything seems to be working correctly now.

A Rock-Solid Default for HTML5 Awesomeness

If you're looking for some examples of website development "best" practices, then look no further the the HTML5 Bolierplate by Paul Irish (As well as a slew of other contributors). The site says that this thing is "badass" and I couldn't agree more. I personally have been using a slightly modified version (Made it ColdFusion compatible) of this for the past few websites I've created and a few older sites that I converted. I'm quite impressed.

Why am I impressed? Well, for starters, Google Analytics is showing that the traffic on the sites that I converted jumped 500%. This is essentially telling me I had some problems with the way I was structuring my sites.

One of the really cool features of this collection, is that it includes something called an Ant Build script. I'm still not 100% everything this thing does, but in a nutshell, it optimizes everything in your site. It will minimize JavaScript, CSS, HTML and reduce the size of JPGS, PNG's. Very cool indeed. To use, all you have to do is open terminal (I know, but it's not that hard) and then CD to the build directory (located inside the bolierplate framework) and type ant build. Then sit back while it does its thing.

Don't just take my word for it, check it out yourself and see the awesomeness.

HTML5 Tip: Using localStorage to Retain Form Data when Sessions Expire

Most of the websites I design have a pretty nifty Content Management System which allows my clients to edit a majority of their website content. One of the biggest problems I've been trying to address over the past few years has been the short session limit on some of the shared hosting plans we use. It seems like the ISP's only allow a maximum of 30 minutes when using session management. 90% of the time, this is fine, but if my client is in the middle of an edit and then takes a phone call or leaves the computer, it's possible the session will expire and then they will lose the form data they had entered.

Cool HTML5 Canvas+Video Effect

Blowing up HTML5 video and mapping it into 3D space.