Gerade auf dem letzten Blog, Millionär 7, wird in einem der letzten Beiträge erklärt wie man das erreichen kann: Man definiert einen Betrag mit dem man monatlich über die Runden kommt, multipliziert diesen mit 150 um anschließend mit einer Rendite von 8% davon leben zu können. Dort ist die Rechnung 2000 * 150 = 300000 EUR. Hat er also 300000 Euro angespart kann er nur von den Zinsen allein leben und bräuchte nicht mehr zu arbeiten. Das ist das erklärte Ziel.

Nun kommen wir zum eigentlichen Blog Artikel. Ein Kollege von mir, Peter Trumpp, hat vor einiger Zeit in einem Anflug von Entwicklungs- und Tatendrang ein kleines Utility mit der JavaScript Bibliothek jQuery und der Google Chart API Google Visualization API erstellt welches einem genau das oben erklärte Ziel der finanziellen Unabhängigkeit visuell darstellen soll. Herausgekommen ist ein beeindruckendes kleines Utility mit dem Namen “Vermögensrechner” mit dem man ein wenig herumspielen und herausfinden kann wie lange das eigene angehäufte Barvermögen reichen wird bzw. welches Barvermögen man bräuchte um eine finanzielle Unabhängigkeit zu erreichen.

Das Tool habe ich auf einer extra Seite unter der URL http://webthreads.de/vermoegensrechner online gestellt aber auch gleich hier im folgenden eingebettet damit man direkt ein wenig rumspielen kann:

Die Berechnung der einzelnen Werte für den Chart ist einfach gehalten und wird mit JavaScript durchgeführt. Daher kann es auch zu Rundungsfehlern führen was wiederum den Chart selbst beeinflusst. Dieses Verhalten kann man auch in der folgenden Beispielrechnung erkennen:

Beispielrechnung für eine monatliche Bargeldentnahme von 2000 Euro

In dem Millionär 7 Blog wurde beschrieben, das das gesteckte Ziel ist mit 300000 Euro Gesamtvermögen und 8% Rendiete monatlich 2000 Euro zu erhalten und von diesen ohne weitere Arbeit zu leben. Mit der einfachen Rechnung auf Papier müsste der Betrag von 300000 über die Jahre gleich bleiben und die Rechnung somit aufgehen. Nehmen wir diesen Rundungsfehler in der JavaScript Berechnung als Schwankung in der nicht immer gleichbleibenden Rendite und somit sähe der Chart wie folgt aus:

Insgesamt geht der Chart also nach unten und das Vermögen verkleinert sich – sehr ernüchternd. Mit diesem Betrag kann er also 33 Jahre ohne Arbeit leben – die Inflation ist übrigens noch nicht einberechnet. Da eine solche nach unten zeigende Kurve sehr unschön ist schrauben wir ein wenig an einem Parameter uns erhöhen bei gleichen Konditionen das Startkapital um eine positive Kurve zu erhalten. Man benötigt somit 335000 Euro um die Kurve nach oben zu treiben und ist nach den gleichen 33 Jahren wie oben nun bei ca 429000 Euro:

Das ganze sieht schon wesentlich besser aus. Baut man jetzt allerdings eine Inflation von 2,5% ein schafft man mit dem Gesamtbetrag von 335000 Euro nur noch 23 Jahre bis das Geld aufgebraucht ist:

Somit brauchen wir wieder eine Grundkapitalerhöhung um eine positive Kurve zu erreichen. Diesmal muss auf 465000 Euro aufgestockt werden um eine nicht abfallende Kurve zu erhalten:

Die hier dargestellte Rechnung ist sehr einfach gehalten. Die Inflation ist mit konstanten 2,5% und die Rendite mit 8% berechnet. Beide werde sind sehr positiv. Auch wurde kein extra Betrag berücksichtigt der jährlich für z.B. einen Urlaub entnommen wurde. Aber es ist immerhin ganz erstrebenswert überhaupt mal einen Betrag zu sparen und dafür Zinsen zu erhalten ;)

Nun nochmal kurz zurück zu dem eigentlichen Utility. Der “Vermögensrechner” ist mit Hilfe von jQuery und der Google Chart API erstellt worden. Vor allem die Google Chart API ist sehr beeindruckend. Und das man damit auch sehr schöne Utilities erstellen kann hat Peter Trumpp mit seinem Vermögensrechner gezeigt.

Ein kleiner Hinweis am Ende: Der Vermögensrechner hat keinerlei Anspruch exakte Zahlen und Charts aufzuzeigen. Vielmehr ist er eine Demonstration der verwendeten Technologien.
Der Vermögensrechner ist ab sofort unter der URL http://webthreads.de/vermoegensrechner zu erreichen und rechts im Menü unter “Specials” zu finden.

Es besteht auch die Möglichkeit den Vermögensrechner als Google Widget zu installieren:

(Benötigt allerdings ein größeres Layout oder eine eigene iGoogle Seite)

Nun gibt es ein weiteres sehr jQuery Plugin mit dem Namen “Galleria” welches eine sehr schöne Bildergallerie ohne viel Aufwand ermöglicht. Das Plugin ist gerademal 4kb groß und erstellt die Thumbnails (kleine Vorschaubilder) selbst. Im folgenden der Screenshot der ersten Demo:

Um eine solche Gallerie zu erstellen reicht es aus eine normale ungeordnete Liste zu erstellen:

<ul class="gallery">
  <li><img src="i/i01.jpg" title="A caption 1" alt="Image01"></li>
  <li><img src="i/i02.jpg" title="A caption 2" alt="Image02"></li>
  <li><img src="i/i03.jpg" title="A caption 3" alt="Image03"></li>
</ul>

Das das Design auch noch anders gestaltet werden kann zeigt die zweite Demo:

Insgesamt macht das jQuery Plugin “Galleria” einen sehr guten Eindruck und liefert von Haus aus ohne viel Aufwand eine wirklich schöne Bildergallerie. Man sollte sich die URL meiner Meinung nach bookmarken.

Update: Passend zu dem jQuery Them habe ich eben eine Tutorial Reihe auf IBM DeveloperWorks entdeckt: Working with jQuery, Part 1: Bringing desktop applications to the browser. Dort wird eine Einführung in die JavaScript Bibliothek jQuery gegeben und es werden noch weitere Teile hinzukommen.

Und im geöffneten Zustand:

Das ganze kann man sich natürlich auch in einer Demo live ansehen. Auf der Herstellerseite wird auch mit Codebeispielen kurz erläutert wie man dieses Widget einbaut und man kann es auch von dort direkt herunterladen.

Als Einsatzmöglichkeiten könnte zum Beispiel ein Login zu einer Anwendung oder ein News Panel in Frage kommen.

Eine solche Entscheidungshilfe könnte der “JavaScript Bibliotheken Performance Test Roundup” von Brian Klug sein. Er vergleicht dort die JavaScript Bibliotheken Dojo (1.0.1), jQuery (1.2.1), Prototype (1.6.0), YUI (utilities bundle) (2.4.0) undProtoculous (1.0.2) (prototype-1.5.1 + scriptaculous-1.7.1).

Die Frage die hier gestellt wird ist: Wie schnell kann eine Bibliothek geladen werden und wie verhält sie sich im gepackten, minimierten oder normalen Source. Aber auch die Frage wie schnell sind die Bibliotheken in einem Browser oder bringt die gepackte Version der Bibliothek etwas wird hier beantwortet.

Als interessantes Ergebnis hervorzuheben ist wohl, dass das Cachen, Minimieren und Zippen von JavaScript Files einen deutlichen Performance Gewinn gegenüber dem Unterlassen dieser Vorteile bringt – vor allem, dass bei diesem Test die Yahoo! Bibliothek ganz oben steht obwohl sie eine beachtliche Größe mitbringt. Auch interessant ist, dass die gepackte Version der Bibliotheken keinen wirklichen Performance Vorteil bringen.

An diesem Test kann jeder mitmachen und alle Testergebnisse gehen in das veröffentlichte Testergebnis direkt ein. Aktuell sind schon über 130000 Tests durchlaufen worden.

(via Ajaxian)

Jack Slocum von der ext JavaScript Library hat sich auch diese Frage gestellt und die CSS Selectoren von fünf (Mootools, Prototype, Dojo, jQuery und Ext) JavaScript Bibliotheken in verschiedenen Browsern miteinander verglichen. Im folgenden ist das Ergebnis der Tests zu sehen und natürlich schneidet Ext dabei am besten ab, was aber den Test nicht weiter mindert:

Erwähnt werden sollte noch, dass lediglich die beiden JavaScript Bibliotheken Ext und jQuery alle Tests ohne Fehler durchlaufen haben.
Den ganzen Test kann man auch in seinem eigenen Browser und System live durchführen.

Neben der Seite mit einer kleinen Beschreibung besteht eine Demo des Widgets – für alle die ein solches Widget noch nicht kennen: Man kann an den Pfeilen rechts und links durch die News bewegen. Das JavaScript File kann auch direkt heruntegeladen werden. In der aktuellen Version allerdings ohne dynamisches Nachladen der Daten vom Backend, was bedeutet, dass alle Daten die in dem Slider angezeigt werden sollen auch schon direkt geladen werden müssen. Das die Daten allerdings auf der Seite schon vorliegen hat den Vorteil, dass bei ausgeschaltetem JavaScript alle Daten, die mit dem Widget normalerweise dynamisch eingefügt werden, dennoch auf der Seite untereinander angezeigt werden.

Man kann ein solches Widget vielseitig verwenden. Ob es nun kleine Diashows sind, News oder sonstiges eingeblendet (oder dynamisch nachgeladen) werden soll kann man ja frei entscheiden.

Als Features werden die weichen Übergänge zwischen zwei Bildern, die Vorschaubilder sowie die Reflektion angegeben. Besonders die dynamisch erstellte Reflektion eines Bildes finde ich interessant. Aber auch das gesamte Auftreten der Bilder Gallerie finde ich sehr gelungen.

Die Image Gallery kann man auch direkt herunterladen, entpacken und lokal laufen lassen. So hat man auch gleich den Quellcode und kann sich das ganze näher anschauen. Dort sieht man dann auch, dass für die Reflektion ein eigenes JavaScript File vorhanden und somit separat ist. Zu diesem steht auch gleich eine readme zur Verfügung so dass man das man eine solche Reflektion einfach in ein eigene Komponente einbauen kann. =)

Aber nun zu dem Spy Widget. Das Spy Widget erhält schon auf so manchen Newsseiten einzug. Dieses Widget zeigt in regelmäßigen Abständen an welche Seite als letztes bewertet oder gelesen wurde. Durch digg.com ist es bekannt geworden – dort kann unter dem Menüpunkt Spy live beobachtet werden, welche Meldungen aktuell wie und von wem bewertet wurden. Ein nettes Feature bei dem Spy Widget auf digg.com ist, dass die Nachrichten auch gleich gefiltert werden können. Man kann somit selbst entscheiden welche Art von Nachrichten man sehen möchte.
Der deutsche Clone yigg.de hat auch eine Spy Seite mit dem man die aktuellen Bewertungen verfolgen kann – natürlich in deutsch gehalten und daher mit dem Namen Spion.

Möchte man nun auf seiner Seite selbst solch ein Spy Widget verwenden so muss man sich ab sofort nicht mehr die Mühe machen alles selbst zu implementieren. Für das JavaScript Framework jQuery wurde eine Spy Komponente geschrieben, die einfach zu verwenden ist. In wenigen Schritten hat man diese Komponente am laufen, wie der ursprüngliche Artikel der Spy Komponente gut beschreibt.

Schön ist, dass diese jQuery Spy Komponente schon live im Einsatz ist und man sich das anschauen kann. Die Seite Arsenal-Mania.com, eine Fan Seite für den Fussball Verein Arsenal London, hat dieses Spy Widget für verschiedene Kategorien eingebaut. Im folgenden Screenshot ist das Spy Widget für die aktuell gelesenen Artikel zu sehen.

Aber auch bei der Beschreibung des Spy Wiget wurde ein Beispiel implementiert, welches die Funktion der letzten Version zeigt. Insgesammt ist das doch eine schöne Lösung, wenn man ein solches Spy Widget auf seiner Seite implementieren möchte.