because shit happens

When you spend half week of holidays recovering because of a dislocated shoulder, when you come back and spend 1 month recovering after a shoulder surgery, or for any other smaller or bigger shitty situation life could offer us, there is now a customisable way to express our anger: fuckn.es !

100% Embedded HTML5 Application

One project that always fascinated me is py2exe, an utility able to convert whole python applications into a single executable file.
This concept is similar in OS X Applications, where everything is transparently contained in a single file.
I have tried to reproduce a similar concept with this stand alone web page application where the manifest is hilariously the only external dependency, totally superfluous but necessary for mobile devices.
In any case, fuckn.es is a portable, "copy and paste source ready to go", cross platform tiny app, where rather than #! /bin/sh at first line, the user should simply double click it and run within a (modern) browser.
All images, sounds, and obviously CSS, HTML, and JavaScript are included. This surely avoid advantage of self updated web apps but nobody could stop me to implement a simple JSONP call to the website to compare versions:

// current version
var current = "0.0.1";

// update notification example
JSONP("http://fuckn.es/?v=" + current + "&fn", function(latest) {
    if (latest != current) {
        if (confirm(
            "New version " + latest + " available.\nWant to update?"
        )) {
            location.herf = "http://fuckn.es";
        }
    }
});

Mobile Oriented Navigation

While the app works in both Desktop and Mobile browsers, latter are surely more friendly with the implemented navigation / interaction.
The whole app can be managed with touches and gestures:

• touch the body to see the anger in action (one up to three seconds)


• tap one of the top buttons to access internal sections


• swipe sections to change them or tap other sections for faster tab scrolling


• scroll sections if these do not fit on the device screen


• interact with fields by selecting them, no need to explicitly apply changes


• tap again the current opened section to close it and eventually see changes applied

All of this is surely experimental but it was fun to create such mobile friendly interface that is usable through mouse and trackpad as well .... you know, specially on Mac we are getting used to act via gestures and I am pretty sure this website won't be the first one that interact more like an iPad app on bigger screens.

Current and future HTML5 capabilities

fuckn.es tiny app is based on many HTML5 concepts such File API, Audio, more related to the audio element, CSS3, and soon coming Web Storage to make changes persistent. I did not bother myself to make a fully cross browser app since one of these days all major browsers should support these features, including the input with capture microphone, right now usable to customise the audio providing a valid source.

JSONP Based Setup

The whole logic is based in a single fucknes function call, passing an object such:

fucknes({
    color: "#F00",
    background: "#333",
    text: "OMG",
    audio: [
        "base64encodedSource1",
        "base64encodedSource2",
        "base64encodedSourceN"
    ],
    image: {
        "00": "base64encodedImage00",
        "10": "base64encodedImage10",
        "11": "base64encodedImage11",
        "30": "base64encodedImage30",
        "31": "base64encodedImage31",
        "60": "base64encodedImage60",
        "61": "base64encodedImage61"
    }
});

The same concept is used to restore a previous or custom state file via record section and soon I will put an extra input able to JSONP online a custom configuration. Of course this app makes sense if people will start customise and distribute angers all over the net :)

Inline Download

As soon as W3C committed the link download property I have thought: how cool is that, I can create a base64 version of a text or whatever it is and set the filename into the download property ... and this is what I have done. There are no browsers yet compatible with the download property so right now if we create a snapshot of the current configuration we need to "right click" and save as, the result will be a text/plain file directly decoded for us by our browser.
This is the first time I see such technique to avoid big post or redirect to the server in order to download something for the client and as solution it seems pretty damn cool, isn't it?

No Server Code Involved At All

The last cool part is that the whole app can be used within the html file itself, there is no need of the server side and once these apps will be able to run in a trusted mode, same as native apps do, through the FileReader API, the Web SQL Storage or similar, and all next generation JS features, we can truly, and eventually, think of creating native like applications using exactly what we know already: no 3rd parts frameworks or application involved ( phonegap, Qt, appcelerator, etc )

As Summary

This little website has been one of the most stupid and futuristic personal projects I have ever made. It was simply fun from the beginning till the end, the silly represent your anger idea and the everything in one place with no server needed implementation.
It took a little while during my spare time and even this post has been prepared in different moments but eventually I have been able to activate my german PayPal account and the host finally worked as expected after DNS changes ( my fault here, I did it wrong ).
I hope you can at least appreciate the idea and why, have a little laugh or contribute with some customisation.
What's next? It could be face recognition to put anger through our camera snapshots or who knows what else ... stay tuned, and have fun ;)

Event driven application and the most basic Listener module

Event driven programming is a common technique particularly common in JavaScript applications.

When

The most classic application is the one with DOM and assigned listeners.
We have basically no idea about "what happens when" and we delegate asynchronous logic to our listeners, waiting for user actions.
This kind of approach could be implemented in whatever application creating a chain of events or notifications that must occur when something expected happens.
Other examples of event driven programming are sockets, Ajax calls, and any sort of notification that may occur in order to let the surrounding logic act accordingly.
Often combined with registry pattern, event driven programming can be found inside UI frameworks where components, as example, are notified when sub-components are added or removed. In this way the component always knows its status and it can change accordingly (redraw, repaint, properties, accessors, counters, other notifications).

What

Following the DOM example or, back in 2004, the ActionScript model, events are nothing more than callbacks associated via unique identifier: the event name. The natural order for these callback is FIFO and usually each callback is "fired" with the same object/event as single argument. One de-facto standard about events is that usually there is no need to add twice the same so that one event will be fired just once.
Since the order matter, there is no way to prevent events already assigned to do not fire. The same is for DOM events, preventDefault or stopPropagation won't stop other events associated with the same node to do not fire but, if used, the chain or the behavior after these events are fired may be different.

How

This is one of the most basic Listener implementation: it's a module, suitable for mixins, is a Singleton, usable and shareable across the whole application, and finally it's a little piece of code, basically unbreakable and reliable for what it does.
This is a basic usage example for the Listener module:

function MyListener() {
    // create the "protected" listener hash
    this.initListener();
}
MyListener.prototype = Listener;

var ml = new MyListener();

var test = function (arg) {
    alert(ml === this && arg === 2); // true
};

ml.addListener("test", test);
// won't add the same event
ml.addListener("test", test);

// fire the event
ml.fireListener("test", 2);

// remove the listener
ml.removeListener("test", test);

// check precedent operation
alert(ml.hasListener("test", test)); // false

// fire a listener in any case
ml.fireListener("test", 2); // nothing happens

Why

With this basic functionality we can already start to create an event driven application firing events whenever it is necessary.
As example, an object with a remove/destroy method may involve soe notification. All we need to do in this case is to use something such:

this.fireEvent("destroy", this);

before or after destroy operations. In this way whatever other part of the application that added a listener may act accordingly and the chain of notifications can establish a new environment, if necessary.
The behavior is the same we can found in native DOM events listeners. If a listener is removed runtime it won't be fired and same is if a listener will be added runtime, it will be executed only next time unless we are not firing it again (which means all others will be fired again).

This post would like to be just a starting point for this kind of approach, sometimes we may need to deal with objects that don't know what could happen if one of them has been removed, added, created, or changed so in this way we have a basic component to deal with. Have fun ;-)

Basic Ajax Twitter Application

Yesterday I posted a work in progress of a Full PHP Ajax Proxy, today I would like to show you what you could do with that file.

Twitter API Directly via Ajax

Thanks to basic realm authentication support, it is extremely simple to create your own twitter app in your home page. Here the example:

<style type="text/css">
div.twit {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
    width: 320px;
}
div.twit h3,
div.twit h4 {
    margin: 0;
    padding: 0;
}
div.twit h3 {
    font-size: 10pt;
    color: blue;
}
div.twit h4 {
    font-size: 7pt;
    font-weight: normal;
    text-align: right;
    color: #999;
}
div.twit span {
    font-size: 8pt;
}
</style>
<script type="text/javascript" src="http://vice-versa.googlecode.com/svn/trunk/build/vice-versa.min.js"></script>
<script type="text/javascript">
function addIntoList(info, container){
    var div = document.createElement('<div class="twit"></div>'),
        h3  = div.appendChild(document.createElement("h3")),
        span= div.appendChild(document.createElement("span")),
        h4  = div.appendChild(document.createElement("h4"))
    ;
    h3.innerText = info.user.screen_name;
    h4.innerText = info.created_at.substring(0, 19);
    span.innerHTML = info.text.replace(/([a-zA-Z]+:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
    container.insertBefore(div, container.firstChild);
};

onload = function(){
    var xhr = new XMLHttpRequest;
    xhr.open(
        "GET", "proxy.php?url=" +
        "http://twitter.com/statuses/friends_timeline.json" + "?_=" + Math.random(),
        false,
        "YOURNAME",
        "YOURPASS"
    );
    xhr.send(null);
    if(199 < xhr.status && xhr.status < 400){
        document.body.innerHTML = "";
        for(var
            list = Function("return " + xhr.responseText)().reverse(),
            length = list.length,
            i = 0;
            i < length; ++i
        )
            addIntoList(list[i], document.body);
    };
    setTimeout(onload, 10000); // again after 10 seconds
};
</script>

Be Careful!!!

First of all it is not a good idea to put user and password directly in your page source code, so try locally but do not put online. Secondly, I did not say anything yet about side effects and security problems related to this PHP proxy I am working on ....so, as I wrote in the other post source, "do not try at home"

PAMPA 1.0 - Jaxer included!

Update - Windows Home Fixed!
Version 1.0b contains hot fixes for Window$ Home Edition plus some little change to make PAMPA more robust than before during process managment.
If you already downloaded version 1.0 you can download only the Tray executable and rename it as PAMPA.exe

Please tell me if you have still problems, hoping this b version will be the final 'till 1.1 ;-)

Update
Final Version 1.0 now served via Google Code ;-)

---

I am proud to announce the first Release Candidate final 1.0 release of my tiny precious PAMPA, jumped from version 0.7 to 1.0 and rewrote from the scratch considering every suggestion its users gave me during these years (project born in 2006 and completely revisited for version 1.0)

What is PAMPA-J

PAMPA means Portable Apache, MySQL, and PHP Application, in this release with Aptana Jaxer included!
(shell I consider PAMPA-J a portable Aptana Cloud?)

What does it mean: Portable

PAMPA is the first customizable and portable WAMP environment that includes Jaxer and that is completely free (but of course donations are always appreciated).
You can launch PAMPA from an USB driver, a CD-ROM (without native database write capabilities), an external Hard Disk, your Hard Disk itself, configuring MySQL data folders, session folders via php.ini, Apache folders, Jaxer folders, and reading logs, changing configuration, in a truly simple way.

Where is it?

For some reason Google Code policy is to ask sourceforge about projects with the same name, so in Google Code I had to change PAMPA project name into PAMPA-J, considering that somebody created an empty PAMPA project in sourceforge 1 year ago, while PAMPA exists at least since February 2006 ... anyway, the link I provided already should not show the RC release yet, while this one, directly from the svn, is the unofficial Release Candidate 1 Direct Download

How does it work?

All you need to do is to choose a folder to decompress PAMPA and then launch PAMPA.exe from that folder, wherever it is.
The result, by default, should be a fully configured Apache, MySQL, PHP, and Jaxer environment for your Window$ 2000/XP/Vista/7 Operating System.
I am working to create a better "splash page" to introduce PAMPA, but right now the Release Candidate shows simply the Document Root with links for some file, Jaxer public folder included ;-)

What's in

• Apache 2.2.11


• MySQL 5.1.30-community


• PHP 5.3.0 alpha 3 (RC1)


• Jaxer 1.0.2.4347


• phpMyAdmin 3.1.2

Why all this effort for a Release Candidate?
Because I am looking forward for your feedback, in order to release the first portable WAMP plus Jaxer environment with all you need to develop for your own or for distributions your applications and with all you need (in a reasonable way :D)

PAMPA-J is out, have fun! 8-)