bloginfo('name');

bloginfo('description');

Archives Posts

DOJO needs a package managment!

Februar 25th, 2008 by Blu:RayNe

I needed some locale date and number parsing fucntion for javascript today. As it goes for what the user sees i do usually do parsing and validation on the server-side. But this time i needed something for an admin interface that does also some javascript-based price calculation on the client-side.

So far i searched via Google for Prototype-based Libs on i18n, sprintf and so on. I found  JEL (JavaScript Enhancement Library)  and gave it try, but hardly to say: it is too bloated and the author implemented much english-language based method, but so far no sprintf, which i find is essential. And in overall the lib was ober 200KB for only doing I18n stuff!

Then i found out DOJO implements Date.POSIX and also a a String.sprintf that seemed very complete and began browsing the DOJO-Website. DOJO so far is IBM-sponsored and it was nice to see it reached a mature stage of development. I don’t like the namespaced function calls in JavaScript much, but on the server side doing java stuff like in GWT would be nice with that.

Still one big problem remains with DOJO: it just fucking hangs my browser and loads too damn slow!

DOJO has a nice dojo.require() which loads required dependencies on-the-fly. I had my own approach on that via the Prototype-based Postload.js. But the main problem with DOJO is that every class has again it’s own dependencies. You just have to inlcude one line of javascript in your HTML header, but when you do following require-statements…

dojo.require("dojo.date.locale");
dojo.require("dojo.currency");
dojo.require("dojo.i18n");

… it results in firing up about 40 requests on .js-files!  That’s horrible! No wonder, my little Firefox hangs until all files are loaded! So, please, don’t harm the web, DOJO!

I don’t know if there is any solution out by the DOJO team, so please tell me. My conculusion so far is that for default load process of the website the dependencies should be resolved before the page is even sent to the browser. The browser should have just to load one JavaScript-file that is compressed and contains all default dependencies used by DOJO on the page. So far that can only be done having a little reference of all dependencies, so the haeder can be written accordingly.

If there isn’t such a thing someone should do that! So far I think think DOJO is a good for my future use, as long as there isn’t an Prototype- or jQuery-equivalent for i18n. 

KAURI has also a nice comparision chart of JavaScript-libraries.

UPDATE #1: Probably i could now also check out localisation-support for Ext.js… which seems to miss parse()-functions (or does it automatically). And in overall i don’t find any great localisation support either :(

UPDATE #2: There seems to be such a thing for DOJO called DOJO Build System that uses ant. It could be used as base for automatic server-side file generation in PHP… great ;) I just everyone who uses DOJO is also using it, otherwise I am gonig to hate your websites!

Filed under Allgemein, JavaScript having No Comments »

Archives Posts

Prototip: Now does AJAX with this little Extension.

November 30th, 2007 by Blu:RayNe

Prototip.js is my favorite prototype.js-based tooltip-script at the moment. I’ve just written this piece in morning because we needed the capability of having dynamic content (or postloading big bits of HTML with images). Enjoy!

/**
 * AjaxTip
 * @version 0.1
 * @desc Extension for prototip.js. Now it supports dynamic loading of content. (http://www.nickstakenburg.com/projects/prototip/)
 * @author Markus Geiger 2007
 * @package AjaxTip
 * @license MIT
 * @url http://blog.evolution515.net
 */

var AjaxTip = Class.create(Tip, {
    hasContentLoaded: false,
   
    start: function() {
        this.require(’Tip’);
    },
   
    initialize: function(elem, href) {
        this.elem = elem;
        this.href = href;
        this.options = arguments[3] || {};
        this.eventMousemove = this.mousemove.bindAsEventListener(this);
        elem.observe(’mousemove’, this.eventMousemove);
    },
   
    mousemove: function(e) {
        if (this.tip)
            return false;

        // Initialize Tip
        var content = ‘<img alt="" src="lib/ajaxloader/tooltip.gif" style="vertical-align: top;" /> Loading&hellip;’;
        this.tip = new Tip(
            this.elem,
            content,
            this.options
        );

        // Make AJAX Request and load content
        var tip = this.tip;
        this.request = new Ajax.Request(
            this.href,
            {
                method: ‘get’,
                onSuccess: function(transport) {
                    tip.content = transport.responseText;
                    tip.tip.innerHTML = transport.responseText;
                }
            }
        );

        this.elem.tip = this.tip;
        Event.stopObserving(this.elem, ‘mousemove’, this.eventMousemove);
    }
});

And here’s a replacement for a better default CSS style:

/* Tooltip styles */
.prototip .default {
    width: 150px;
}
.prototip .default .toolbar {
    background: #FFE;
}
.prototip .default .title {
    padding: 5px;
}
.prototip .default .content {
    background: #FFE;
    font-size: 11px;
    font-family: Arial, sans-serif;
    padding: 6px;
    text-align:left;
    min-height:1em;
    width:200px;
    color:#000;
    border:1px solid #999;
    border-radius:5px;
    -moz-border-radius:5px;
}
 

You can create a neat AJAX-Loader GIF here. Use  #FFFFDD for background and #999999 for foreground color.

Filed under Allgemein, JavaScript having 3 Comments »

Archives Posts

Interactive Flash Panoramas

September 12th, 2007 by Blu:RayNe

I normaly don’t post much about Flash but this Interactive Panorama is really cool. It was built on Papervision3D, probably the most popular Flash 3D-Engine (but not as advanced as Away3D)

Somehow the stuff reminds me of the things that already were possible with quicktime, but were also harder to realizie and didn’t load as fast as Flash Panorama.

Filed under Flash having No Comments »

Archives Posts

PHP: Zend Framework Tutorial by Ralf Eggert

August 9th, 2007 by Blu:RayNe

I was a friend of Zend Framework when it was in version 0.5 because of the convincing and really well-thought concepts. Most of them are even better than those of CakePHP (ok, CakePHP can some little other frameworks can do much more than Zend Framework). But Zend Framework is now final and already 1.01, and i guess it has a bright future ;)

There is an easy to understand and some good tutorials on Ralf Eggert’s Blog that gives you an introduction to MVC and how things work with Zend Framework. Just try it for yourself!

And for all trolls: I know Java is better!

Filed under PHP having No Comments »

Archives Posts

WYSIWYG-Editors: They just don’t get it!

August 2nd, 2007 by Blu:RayNe

When will you guys finally learn to write good documents?! Yesterday the popular JavaScript framework Ext 1.1 was released, including finally a WYSIWYG web-editor:

If you don’t see what’s wrong about that editor, let me help you: Nowadays, when you write a document or an article, you got different headlines, different paragraph types that when properly used, automatically let’s you create a table of contents, like seen on Wikipedia articles or in OpenOffice.org OpenWriter (or Microsoft Word). You have also style sheets that automatically do the work of assigning different homogenous styles to your headlines throughout the document.

But here again i don’t see any combo-box for formats! Buttons like “make text bigger” or “make smaller” or “font-family” or “font-size” do not make any sense at all and only encourages bad formatting!

Recently i searched for an alternative blogging client, but i could not use any of them because most did not even have a „format“-field. All my beloved stylesheets assigned to lists and headings here would have be gone! But that’s exactly why they exist! Are you crazy not using them in your editors?

As it goes for having toolbar buttons, these are are absolutly sufficient: “Format” “Remove Format” | „Bold“ „Italic“ | “Unnumbered List” “Ordered List” “Intend” “De-Intent” |  “Add Link“ “Remove Link“ | “Text-Foreground” “Text-Background” | “Insert Table” „Insert Image“  should be enough for most users!

Filed under Allgemein, Browser, CSS having 3 Comments »

Archives Posts

Uploads with progress-meter in PHP - a pain in the ass!

Juli 26th, 2007 by Blu:RayNe

 

Armored Personal Carrier

An APC from the aliens movies; picture py paramount studios
 

Okay, i probably guess that probably have some experience with it, probably already made an implementation that works. And probably you only think it works. But often not for production level or enterprise! At the end of the article you will praise once again APC - the PHP Opcode Cache ;)

Well, I tried it all, the PECL uploadprogress_meter-extension which doesn’t really always compile to the latest PHP, upload with Flash ≥8 and JavaScript (because we want to show the progress in HTML). Then we or i have also additional requirements to the upload, like posting variables with one file. And it should really run stable what most solutions don’t!

Let’s summarize - Progress Meter using PHP as primary server language:

PECL Extionsion uploadprogress_meter
Often only compiles and runs stable to the version it was built for
Wrappers with Perl
Megaupload, Filechucker or how they call them, have some problems in stability, resulting not always in writing the monitor file. Who knows why? I made an own version based on Megaupload (which should be on release here shortly)
Other PHP hacks
Do they really run stable with the current PHP built?! Who will update them?
Flash-Uploader with JavaScript Backends
While beeing client side they have the generic problem of often calling a JavaScript-Callback that results in a flash-side timeout alert-box when you’re using broadband connections >1MB/s upstream. Shitty for all the customers on your commercial website with such a connection and without any technical knowledge.
Pure Flash-based upload progress
A solution that really works and runs stable, but do you wanna make your whole site in Flash or are you working in Flex?
APC - the PHP opcode cache
You heard right! Just add an apc.rfc1867 = on to your PHP ini and submit also a APC_UPLOAD_PROGRESS>-field and your on the right side calling the progress like with apc_fetch('upload_'.$_POST['APC_UPLOAD_PROGRESS']); For more just have a look here and enjoy ;)

My Perl-based solution mentioned above (called jjUpload) will be available here shortly – didn’t i already post about it? It won’t work on it anymore since APC now has that functionality. Just bad for all you ZendCore- or ZendDebugger-Whores :P

Anyway, i’d like to hear what you prefer - client side progress-meters -or- if the status should be pulled from the server?

Filed under Allgemein, Coding, PHP having No Comments »

Archives Posts

Post-load your JavaScript and CSS files!

Juli 25th, 2007 by Blu:RayNe

If you look at todays web 2.0 sites you will realize there is often a heavy load on external JavaScript resources, CSS files and probably images. Above compressing and optimizing the files and merging multiple files (also background-images), there is not much room to further optimize the page loading process.

One problem of many modern sites is that they often provide optional functions for the user at the price of loading the main libraries all at once ending in a terrible site- and javascript-performance. I’ve already spoken about that once before and see more and more a good chance for web-applications based on Flex, or a real interface-language or perhaps Java. But we’re speaking about web-sites here not applications (anyway you could intermix them)!

Imagine a „passage-way“ or „pass-by“ page: How many of your users will use your “godly” fully featured search-window that you’ve implemented with Ext or the Prototype Window-Script and that runs inside the page? And what about  overall JS and CSS footprint about 150KB? Really needed? And oh, it’s the only part of the website you’re using these scripts.

Maybe one of ten users will use your “godly” feature. The others all have to load the site, the slow JavaScript and you will pay bandwidth.

So, why don’t you just simply load the parts of the site when you need them? AJAX – it’s all about that but still people are loading tons of libraries on every single site!?

As you might guessed i worked on such a script today. It works pretty well in Firefox and Opera (not yet Safari and fucking MSIE), and i still have to come up with some issues and heavy testing (especially on older browser that probably don’t wanna let their DOM injected JavaScript or CSS; so a good wrapper for <script> is necessary). I just wonder why no one didn’t come up with that idea and a working script before. It saves me about 120KB on a product page. And 50KB on other sites. Now that’s ok?!

Here’s a little preview of the alpha sourcecode

/**
 * Post-Load
 * @version 0.1a
 * @desc Why preload all your scripts? Dynamically them when they are needed!
 * @author Markus Geiger 2007
 * @package Postload
 * @license MIT
 * @url http://blog.evolution515.net
 */

PostloadJob = Class.create();
PostloadJob.prototype = {
    totalFiles: 0, // holds number of total file to load
    loadedFiles: 0, // holds number of loaded files
    completeHandler: null, // function executed on complete loading
    errorHandler: null, // function executed on error while loading
    initialize: function(input, completeHandler) {
        // Init the container for our files
        Postload.htmlContainer = $(‘postload’);
        if (!Postload.htmlContainer) {
            var elem = document.createElement(‘div’);
            elem.setAttribute(‘id’, ‘postload’);
            document.body.appendChild(elem);
            Postload.htmlContainer = $(‘postload’);
        }
        if (input)
            return this.load(input, completeHandler);
    },
    load: function(input, completeHandler) {

        if (completeHandler)
            this.completeHandler = completeHandler;

        if (typeof(input)==‘object’) {
            this.totalFiles = input.length;
        } else {
            input = [input];
            this.totalFiles = 1;
        }

        for (i=0;i<input.length;i++) {
            var filename = input[i];
            if (filename.indexOf(‘.js’)!=-1) {
                this.loadJS(filename);
            } else if (filename.indexOf(‘.css’)!=-1) {
                this.loadCSS(filename);
            } else {
                return false;
            }
        }

    },
    complete: function() {
        this.loadedFiles++;
        if (this.loadedFiles!=this.totalFiles)
            return;
        if (this.completeHandler)
            this.completeHandler();
    },
    loadJS: function(filename) {
        var elem = document.createElement(’script’);
        elem.setAttribute(’src’, filename);
        Event.observe(elem, ‘load’, this.complete.bindAsEventListener(this));
        Postload.htmlContainer.appendChild(elem);
    },
    loadCSS: function (filename) {
        new Ajax.Request(
            filename,
            {
                method: ‘get’,
                onSuccess: this.completeCSS.bindAsEventListener(this)
            }
        );
    },
    completeCSS: function(transport) {
        var elem = document.createElement(’style’);
        elem.setAttribute(‘type’, ‘text/css’);
        elem.innerHTML = transport.responseText;
        Postload.htmlContainer.appendChild(elem);
        this.complete();
    }
}

Postload = new Object();
Postload.htmlContainer = null;
Postload.allFiles = new Array();
Postload.require = function(input, completeHandler) {
    new PostloadJob(input, completeHandler);
}

Example usage

The syntax is very simple. Just use it like require from your PHP or Java language. The only difference is that it handles more than one file and calls a complete-handler when all files have finished loading. So chaining it into your applications should be very easy.

product._openComparisionWindow = function() {
    Postload.require(
        [
            ‘gz?lib/windows-js/javascripts/effects.js|lib/windows-js/javascripts/window.js’,
            ‘gz?lib/windows-js/themes/default.css|lib/windows-js/themes/alphacube.css’
        ],
        product.openComparisionWindow
    );}
Filed under Browser, CSS, JavaScript having No Comments »

Archives Posts

Outlook2007 HTML-Vorschau mit Microsoft Word2003

Juli 17th, 2007 by Blu:RayNe

Outlook 2007 ist toll: Microsoft hat es tatsächlich wieder aus unerfindlichen Gründen geschafft auf eine HTML-Darstellung aus dem Jahr 2000 zurück zu finden. Entgegen der Vermutng Security könnte was damit zu tun haben, ist aber mittlerweile offiziell, dass die HTML-Darstellung von Outlook zu der von Word konsistent zu halten. Mit Word schreibt nämlich der Outlook-Nutzer auch seine E-Mails, sofern er die Standard-Eisntellungen läßt. Wer das Ganze nicht glaubt ließt hier nach.

Natürlich ist das außerordentlich dumm, stehen nämlich somit wieder alle Sicherheitslücken der Word2003-HTML-Darstellung, die dahintersteckt, auch wieder offen.

Und es wirft Probleme für Web-Designer auf, vor allem bei Webmails, da die Mehrheit der Empfänger und Windows-Whores nicht glauben will, es liege an ihrem „technisch fortschrittlichem“ Outlook2007. D.h. doppelt Frust für Webtreibende, denn heißt es somit wieder zurück zum Tabellenlayout von 1999, möglicherweise steht auch die Installation von MS Office2007 an.

Letzteres muss nicht unbedingt sein, denn kann hier Word2003 auch schon helfen. Hierzu speichert man den nicht-kodierten Quelltext des HTML-MIME-Parts der Mail, und lädt ihn mit Word2003. Somit läßt sich wenigstens in den meisten Büros ohne Windows-Vista und Office2007 die Darstellung überprüfen.

Da auch schon Grafiken in HTML E-Mails schon lange Tabu sind  – außerd den inline-embedded Bildern mit <img>-Element – bleibt nur noch wenig übrigen, mit dem man arbeiten kann. Nämlich noch einige wenige fehlerhaft dargestellte Eigenschaften aus CSS 1.0. float gehört im übirgen nicht dazu, und somit sind Bilder im Fließtext auch Vergangenheit. Danke Microsoft!

Hilfe und mehr Tipps zurAnwendung von CSS gibt es im  guide to CSS Support in E-Mail.

Filed under Allgemein, CSS having No Comments »

Archives Posts

Real unique id

Juni 23rd, 2007 by Blu:RayNe

Every PHP programmer should know that.

I stumble upon too many lame md5-hashes based on md5(rand()) or even more ciritcal crc32(rand()). That could really lead to trouble especially when you’re using a lame unique id for critical applications like payments or somethimg.  The chance that one id is used two times is not great, but if there is a chance for such an error, a programmer has to eleminte it!

And it’s so easy with PHP!

string uniqid ( [string $prefix [, bool $more_entropy]] )

Gets a prefixed unique identifier based on the current time in microseconds.

// no prefix
// works only in PHP 5 and later versions
$token = md5(uniqid());

// better, difficult to guess
$better_token = md5(uniqid(rand(), true));

 

For more see the PHP Manual

Filed under PHP having No Comments »

Archives Posts

Backup remotely via Perl

Mai 29th, 2007 by Blu:RayNe

Ok, i guess you love that cheap servers only with FTP and HTTP, and minimal PHP4-Timeout and lame CGI and no real possibility but to do a good backup job. Well, Perl was once a dominant language and can do much for you.

The benefits of following backup solutions are as follows:

  • Backup is done via calling an URL
  • that invokes the mysqldump utility to backup your database to a local director, that is preferable outside the webroot
  • the data is then gzipped
  • old backups are automatically deleted
  • and then backed up via FTP to another server
  • and while a second server gets the backup it is more secure than having all on a single server

Put this in you cgi-bin folder and remotely call it via CURL or test it via the browser. Don’t forget tot set chmod 755 for the files! If you backup to a directory in the webroot don’t forget to protect that directory by e.g. setting a up an .htacess-file!

#!/usr/bin/perl -w

use CGI;
use POSIX qw(strftime);
use Time::Local;

$query    = new CGI();
$file     = $query->param(‘file’);
$filename = $query->param(‘filename’);

print "Content-Type: text/plain\n\n";
# print "Content-type: application/octet-stream\n";
# print "Content-Disposition: attachment; filename=".$filename."\n";
# print "Pragma: no-cache\n";
# print "bash ".$file;

sub backupMysql
{
    my ($host)     = $_[0];
    my ($username) = $_[1];
    my ($password) = $_[2];
    my ($database) = $_[3];
    my ($title) = $_[4];

    $time = time;
    $filename = $title."-".$database."-".strftime("%Y%m%d-%H%S", localtime($time));
    print "Backup of \"".$title."\" (".$database.")…";
    system "mysqldump -e –add-drop-table –add-locks –allow-keywords -h".$host." -u".$username." -p".$password." ".$database." > ../../backup/".$filename.".sql";
    # print "GZip ".$filename."…\n";
    system "gzip ../../backup/".$filename.".sql";
    # print "Unlink ".$filename.".sql…\n";
    unlink "../../backup/".$filename.".sql";
    print "done.\n";
}

# Delete previous backups
if (-d "../backup/") {
    $where = "../backup/";
    while (defined($next = <$where/*.sql.gz>)) {
        unlink($next);
    }
}

backupMysql("<em>host</em>", "<em>username</em>", "<em>password</em>", "<em>database</em>", "<em>mybackupname</em>");

 

Optional .htaccess-File:

<Files ~ ".*(sql|gz|tar)">
    Deny from all
</Files>
 

Then call the URL by cronjob:

#!/bin/sh

remoteAddress="<em>ftp://user@yourftp.com</em> -p <em>password</em>"
localAddress="<em>/home/Backup/mybackupname</em>"

timeThreshold=15
mirrordirOptions="-v –keep-files  –no-chown –no-chmod  –num-backups 30 –mtime-threshold $timeThreshold "

echo "Backup to $localAddress — `date +"%a, %C.%B %Y"`"
echo -n "[`date +%H:%M:%S`] Killing runnung instances of mirrordir…"

/usr/bin/killall -9 mirrordir &amp;2>1 > /dev/null
echo "done."

mkdir -p $localAddress/htdocs > /dev/null

echo  "[`date +%H:%M:%S`] Backup of relevant databases…"
curl http://www.yourdomain.com/cgi-bin/backup/mysql.cgi
echo "done."

echo -n "[`date +%H:%M:%S`] Backup of remote FTP…"
/usr/bin/mirrordir $mirrordirOptions $remoteAddress $localAddress/htdocs
echo "done."

echo "[`date +%H:%M:%S`] Finished."
 

If you don’t have mirrordir or curl install it via aptitude install mirrordir curl on your debian box.

Filed under Allgemein, Datenbanken, Linux having No Comments »

« Previous Entries