Home-grown

Backup script for RimuHosting

Tags: 

A handy little one - a backup script for RimuHosting that will backup your Rails app and copy it to the provided backup storage account. To use it you first have to add Geoffrey Grosenbach's backup.rake script to your lib/tasks directory, then sign up for RimuHosting's backup service, then just save out this script as e.g. "backup.sh" and add it to your crontab. Easy when you know how.

export TIMESTAMP=`date +'%Y%m%d%H%M'`
rm -f backup.zip
rake db:backup RAILS_ENV=production
zip -r -9 -q backup.zip *
lftp -u 'myaccount,mypassword' backupspace.rimuhosting.com -e "set ftp:ssl-protect-data true; put backup.zip -o backup_$TIMESTAMP.zip; exit"

Catfish fun with script.aculo.us

Tags: 

Script.aculo.us is a wonderful library of Javascript functions for doing lots of buzzword-friendly snazzy effects. A recent schmancy JS trick is the catfish - a small, unintrusive advertisement that pops up at the bottom of the web page and can be closed without affecting the web page. Looking around I didn't see any existing code to do catfish effects with Script.aculo.us so I decided I'd have to fill the gap.

There are four parts to a catfish - the Javascript libraries (Script.aculo.us, which relies upon Prototype), a little bit of HTML structure on your page, some CSS and a single Javascript line. So lets get to it.

To do any of this fancy stuff you need both the Prototype and Script.aculo.us libraries on your site and then load them into the page as follows:

<script src="js/prototype/prototype.js" type="text/javascript"></script>
<script src="js/script.aculo.us/effects.js" type="text/javascript"></script>

Don't forget to change the paths to whatever is correct for your site.

The HTML below needs to be one of the last segments within your HTML, basically it needs to be the last code before the close-BODY tag, so that nothing else throws it off. There's also a link to hide the catfish, you don't want to upset your visitors!

<div id="footer_ad" style="display:none"> <div id="footer_close">[x] <a href="#" onclick="Effect.BlindUp('footer_ad', {duration:1})">close this</a></div>
Catfish is tasty!
</div>

You can put whatever fillings you like in there - nested divs, etc, basically eat your heart out.

The CSS part is pretty straight forward, basically we're setting the div to be locked to the bottom of the web browser window so it slides over the other content - this is a general trick that works great for e.g. shopping cart totals, menus, etc. I used some fairly ugly colors just to make it stand out during testing :-) And for those who don't know, this should either go in your page's CSS file or within a STYLE tag in your page's HEADer.

#footer_ad {
position: fixed;
bottom: 0px;
display: block;
width: 100%;
background-color: #b7948f;
color: #394a8c;
font-size: 24px;
padding: 10px 0 10px 0;
margin: 0;
left: 0;
border-top: 1px solid #9a5261;
}
#footer_close {
float: right;
width; 50px;
display: block;
font-size: 0.6em;
padding: 5px;
text-align: right;
font-size: 0.8em;
}

Last but not least is the Javascript code to make the screen pop up. The best location for this is your body tag's onload attribute, but you could embed it in the page if needed (within a SCRIPT block):

new Effect.BlindDown('footer_ad', {duration:2});

Put that altogether and you too can have some tasty catfish for your site.

There's one last thing, the way the above code works the catfish will keep popping up every time the page is loaded, its left up to an exercise for you on how you'd like to make the close link make the browser remember to hide it. One idea would be to have the onclick event execute a function on the server side to set a session variable that would indicate the visitor no longer wished to see the catfish, then in the presentation code only display the catfish if the visitor doesn't have this variable set; alternatively some Javascript could set a cookie, but I prefer to consolidate all client data in viewer sessions, so there's only one source for all of the relevant data.

Bon appetitè!

Image block rotation using Script.aculo.us

Tags: 

Here's a handle little Javascript function that'll let you rotate a set of DIVs as needed, e.g. to rotate a series of images for a slideshow. It uses Script.aculo.us to do a very simple looking yet quite appealing slide in/out. You'll need to load the prototype.js file and Script.aculo.us' effects.js file before running the code. One thing to note is that you can use any object to do this - DIVs, IMGs, etc, just assign the IDs accordingly, which is useful if you need to rotate entire code blocks and not just individual images. Enjoy!

// Shuffle a series of divs using Script.aculo.us
// Set it up like this:
// var shuffle_list = ['div1', 'div2', 'div3']; // an array of DIV IDs to rotate
// var shuffle_time = 8000; // 8 seconds
// var shuffle_effect = 'blind'; // the effect to us: 'appear', 'blind' or 'slide'
// setTimeout('imageShuffle();', shuffle_time);

function imageShuffle() {
if(arguments.length == 1)
var i = arguments[0];
else
var i = 0;
var next = i + 1;
if(next >= shuffle_list.length)
next = 0;
new Effect.toggle(shuffle_list[i], shuffle_effect, {queue: 'end'});
new Effect.toggle(shuffle_list[next], shuffle_effect, {queue: 'end'});
i++;
if(i >= shuffle_list.length)
i = 0;
setTimeout('imageShuffle('+i+');', shuffle_time);
}

Wordpress Widgets - Enhanced Search Box

Tags: 

After installing Wordpress 2.0 and discovering the wonderful Widgets plugin I added a few widgets to this site. While the widgets are great and give a really wonderful level of configuration over the site, I was quite disappointed to discover that the default search box looked pretty, well, aweful:

The old search box

So I did what every self-respecting geek does, I fixed it :-) I present to you, WPWidgets_EnhancedSearchBox v0.1:

The new search box

You can download a small zip file I made of both the new widgets.php file and a diff file off the SVN source code (in case you're into that kinda thing), along with a quick readme.txt file explaing how to install it, which you can download at will:

Subscribe to Home-grown