Easter eggs jQuery plugin

I decided that a project I was working in needed more monsters so I created a quick jQuery plugin to add them, have fun.

//Change image
//<div data-swapcss-value='url("imageurl.png")'>

//Full options
//<div data-swapcss-property='background-color' data-swapcss-value='red'  data-swapcss-count="3">
var swapCssConfig = {}
var swapCssConfig.currentCount = 0;
(function ($) {
    $.fn.swapCSS = function (options) {

        var settings = jQuery.extend({
            clickCount: 6,
            property: 'background-image'
        }, options);

        var currentElement = this;

        currentElement.click(function () {
            warningClickCount++;
            if (swapCssConfig.currentCount > (settings.clickCount - 1)) {
                currentElement.css(settings.property, settings.value);
                currentElement.unbind('click');
            }
        });
    };

    $(document).ready(function () {
        $('[data-swapcss-value]').each(function (index) {
            var item = $(this);
            var options = { value: item.attr('data-swapcss-value') };

            if (item.attr('data-swapcss-count') !== undefined)
                options.clickCount = item.attr('data-swapcss-count');   

            if (item.attr('data-swapcss-property') !== undefined)
                options.property = item.attr('data-swapcss-property');

            item.swapCSS(options);
        });
    });

})(jQuery);

Why pay for hosting?

Free Hosting

I don’t like to pay for stuff on the internet this also goes for hosting. Recently I wanted to put up some demo javascript so I figured it was time to find some free hosting.

I turned to google again to try and find an answer. There were a lot of of sites offering free hosting but most of them were crap, I did however find two options thar seemed pretty good, they were:

Google App Engine

What you get for free

With the new Google App Engine pricing you get:

  • 1GB Disk space.
  • 1GB Outgoing bandwidth daily.
  • 1GB Incoming bandwidth daily.

How to set it up

Luckily for me someone has already written how to use app engine to deliver static pages.

Amazon S3 Static Hosting

What you get for free

With AWS Free Usage Tier you get:

  • 5 GB of Amazon S3 storage.
  • 20,000 get requests monthly.
  • 2,000 put requests monthly.
  • 15GB of data transfer out each month for one year.

How to set it up

  1. Go to amazon and sign up for a free account.
  2. Open the management console.
  3. Select “Amazon Simple Storage Service (S3)” from the dropdown at the top of the page.
  4. Select the bucket(figure 1.1) and then click the properties button(figure 1.2).
  5. Select the website tab(figure 1.3).
  6. Click “Enable” and enter your Index Document this would normally be “index.html”.
  7. Note down the Endpoint and click save.
  8. Upload your site using the upload button.
  9. Select all the files in your site right click and select “Make Public” (Figure 2.1).
  10. Open the endpoint address for step 7 and enjoy your website.

A Got Ya

There seems to be an issue with the bucket names where you cannot create a website unless your bucket name is all lowercase. I found that if you stick to lowercase and only dashes you will be fine.

Figure 1 Figure 1

Figure 2 Figure 2

No sound on avi for PS3 = Solved (using a mac)

Every so often you go to watch a movie on your PS3 and there is no sound this has been an annoyance for some time for me. The way to fix it is to convert the movie to another sound format that the PS3 can play. As I have a mac it is a pain to convert it but thanks to gizmodo I now have a simple way.

  1. Download and Install Media Converter it’s free.
  2. Open Media Converter and select “iPod/iPhone (H.264)”
    media converter screenshot
  3.  Drag your movie on to the media converter and wait.
  4. Watch Your newly converted movie.

jQuery a Quick Start

I “volunteered” to do a developer session/presentation on jQuery for work I made the slides on Slide Rocket and showed the examples the javascript using Cloud9 IDE. 

If anyone is interested or wants to steal it and get some brownie points where they work, the slides are here and examples are hosted on my github repo called jQueryExample.

Update: The links seem to be a little buggered on the final slide so here they are:

Free Flex IDE

Flash DevelopOk so flex is great but there is one small problem and thats the US$ 299 for the IDE from adobe. Yes there is a free trial available so you can at least spend 60 days trying the IDE but what happens after your 60 days are up and you still want to use flex but don’t have US $299 laying around to buy yourself the full version. With Flash Develop and a two little plugins you can.
Installing First you need to download all the required files listed below:

Now you have a directory full of downloads it is time to start installing(please note [version] is a place holder for the current version of the file you downloaded):

  1. Run the installer(FlashDevelop[version].exe) for Flash Develop and and leave everything as the defaults.
  2. Install the Java SE Runtime Environment (jre-[number]-windows-i586.exe).
  3. Extract the Flex SDK(flex_sdk_3.zip) to “C:\Flex\3".
  4. Install Adobe Air.
  5. Install the Design View AIR app(designview.air) by double clicking it.
  6. Open the Design View plugin(FlexDesignView-[version].zip) and copy the contents of “Data” to “C:\Program Files\FlashDevelop\Data\” and the contents of “Plugins” to “C:\Program Files\FlashDevelop\Plugins\”.
  7. Extract the Debugger Plugin(FlexDbg.zip) to “C:\Program Files\FlashDevelop\Plugins\"”.

Now Everything is in installed all you need to do is set up flex in Flash Develop:

  1. Open the Flash Develop(Start > Applications > Flex Develop > Flex Develop).
  2. Once the application is opened press F10 or go to “Tool > Program Settings” to open the Program Settings.
  3. Click on AS3Content button (1. in the image below).
  4. Then set the “Flex SDK Location” (2. in the image below) to “C:\Flex\3\”.
  5. Click Close, and enjoy Flash Develop.

Program Settings

Flash Dev Settings
Update: as requested here are some screen shots with FlashDevelop in both Source and Design Views.

Design View

Edit View