Eventuell kennt ja noch jemand diesen Effekt aus den alten C64 Demos. Habe ihn in einer ruhigen Abendstunde mal in JavaScript nachprogrammiert.

DEMO

Mir ist bei meinen Photos in Google+ ein netter kleiner Effekt aufgefallen, den ich mal schnell mit JavaScript/CSS3 nachprogrammiert habe. Continue Reading

Heute habe ich mal wieder Zeit, mich mit einem weiteren Thema zu beschäftigen, was mir schon seit längerem im Kopf rumschwirrt: Ein Buildskript für JavaScript-Projekte. Natürlich lässt sich da nicht wirklich was “bauen”, aber ich würde gerne bei der Auslieferung eines Projektes mehrere Dateien zu einer zusammenfassen und dann noch das gesamte Skript minimieren. Das hat zum Einen für den Anwender den Vorteil, das sich die Ladezeiten ebenfalls minimieren, zum Anderen find ich es einfach cool .
Ich nutze, wie ich früher schon mal berichtet habe, meistens Eclipse zur JavaScript Entwicklung. Diese IDE bringt Apache Ant mit, ein Java-basiertes Build-Tool, welches sich mit einer build.xml-Datei wunderbar steuern lässt und ich bereits vor längerem mal mit gearbeitet habe, allerdings nicht für JavaScript. Also ist es naheliegend, das ich dieses Tool hier verwende.
Also was soll mein Build-Skript denn können?

• Mehrere JavaScript Dateien zu einer einzigen Datei zusammenfassen
• Diese Datei komprimieren
• Die komprimierte Datei in einen extra Ordner speichern und den Workspace aufgeräumt hinterlassen

Zuerst muss einmal eine Datei in meinem Workspace erzeugt werden, die build.xml. Ich erstelle sie direkt in meinem JavaScript-Ordner, natürlich könnte sie auch woanders stehen. Sie bekommt natürlich gleich den Projektnamen “myproject” und als Einstiegspunkt den letzten Punkt von meiner Liste:

<project name="myproject" default="cleanup">
  <target name="cleanup"></target>
</project>

Jetzt soll vor dem Cleanup natürlich noch die einzelnen Punkte abgearbeitet werden:

<project name="myproject" default="cleanup">
  <target name="init"></target>
  <target name="concat" depends="init"></target>
  <target name="compress" depends="concat"></target>
  <target name="cleanup" depends="compress"></target>
</project>

Nachdem jetzt die Struktur schon mal steht, kann ich mal anfangen. Als erstes sollen zwei Verzeichnisse erstellt werden, das erste Verzeichnis “_tmpjs” als reines Arbeitsverzeichnis, das nach dem Build wieder entfernt werden soll, das zweite Verzeichnis “jsmin” soll die fertige Datei aufnehmen.

<project name="myproject" default="cleanup">
  <target name="init">
    <mkdir dir="../_tmpjs"/>
    <mkdir dir="../jsmin"/>
  </target>
  <target name="concat" depends="init"></target>
  <target name="compress" depends="concat"></target>
  <target name="cleanup" depends="compress">
    <delete dir="../_tmpjs"></delete>
  </target>
</project>

In das Arbeitsverzeichnis werden jetzt alle Dateien kopiert, die ich später in meiner Ergebnis-Datei haben will. Das ist natürlich Projekt- und auch Programmierer-Abhängig, in meinem Fall sollen WebWorker (die sowieso in einem anderen Verzeichnis stehen) und Dateien, die mit einem Unterstrich beginnen, nicht mit einbezogen werden. Nach dem Kopieren können dann auch gleich die Dateien in eine zusammengefügt werden, da es sich bei JavaScript meist um reine Text-Dateien handelt, gestaltet sich das auch relativ einfach:

<project name="myproject" default="cleanup">
  <target name="init">
    <mkdir dir="../_tmpjs"/>
    <mkdir dir="../jsmin"/>
  </target>
  <target name="concat" depends="init">
    <copy todir="../_tmpjs/" overwrite="true">
      <fileset dir="./">
        <include name="*.js"/>
        <exclude name="_*.js"/>
        <exclude name="prototype.js"/>
      </fileset>
    </copy>
    <concat destfile="../_tmpjs/full.js">
      <fileset dir="../_tmpjs"><include name="*.js"/></fileset>
    </concat>
  </target>
  <target name="compress" depends="concat"></target>
  <target name="cleanup" depends="compress">
    <delete dir="../_tmpjs"></delete>
  </target>
</project>

Nach diesem Schritt haben wir bereits eine Datei “full.js” im Arbeitsordner liegen, der aber wieder gelöscht wird. Der letzte Schritt, das Minimieren des Codes fehlt ja auch noch. Dank Dr. Google kam ich auf die folgende Seite:
http://lcasoft.com/compress-js.html
Hier werden zwei jar-Archive angeboten, die heruntergeladen werden und in den Ant-Einstellungen angegeben werden müssen:
Window->Preferences->Ant->Runtime->Classpath->Global Entries->Add External JARs
Hier einfach die beiden heruntergeladenen JARs auswählen und einfügen.

Jetzt muss noch ein neuer task definiert und der pfad zu den beiden JARs angegeben werden (Eigentlich doppelt, aber hat bei mir nicht anders funktioniert…) und dann kann das letzte target auch definiert werden:

<project name="myproject" default="cleanup">
  <path id="cp">
    <fileset dir="/path/to/jars" includes="*.jar"/>
  </path>
  <taskdef name="compress-js" classname="com.webpanes.tools.ant.taskdefs.CompressJS" classpathref="cp"/> 
  <target name="init">
    <mkdir dir="../_tmpjs"/>
    <mkdir dir="../jsmin"/>
  </target>
  <target name="concat" depends="init">
    <copy todir="../_tmpjs/" overwrite="true">
      <fileset dir="./">
        <include name="*.js"/>
        <exclude name="_*.js"/>
        <exclude name="prototype.js"/>
      </fileset>
    </copy>
    <concat destfile="../_tmpjs/full.js">
      <fileset dir="../_tmpjs"><include name="*.js"/></fileset>
    </concat>
  </target>
  <target name="compress" depends="concat">
    <compress-js file="../_tmpjs/full.js" todir="../js-min" verbose="true" stripCR="true"></compress-js>
  </target>
  <target name="cleanup" depends="compress">
    <delete dir="../_tmpjs"></delete>
  </target>
</project>

Ich habe hier noch die Option verbose sowie stripCR mit angegeben, damit werden mehr Informationen über den Vorgang in die Console ausgegeben und in der fertigen Datei noch zusätzlich die Zeilenumbrüche entfernt. Weitere Optionen finden sich hier: http://lcasoft.com/compress-js-doc.html

Jetzt kann man einfach mit der rechten Maustaste auf die build.xml gehen und per Run As… -> Ant Build ausfüren.
Viel Spass beim Ausprobieren, Kommentare sind natürlich herzlich willkommen.

Ich bin ja zur Zeit in Eltern(teil)zeit, da bleibt mir neben Kind versorgen und Haus renovieren doch mal tatsächlich ein Stündchen Zeit übrig, um mal ein paar alte Ideen aufzuarbeiten. Die erste Sache war eigentlich eher ein Zeitvertreib.
“Wator” (http://de.wikipedia.org/wiki/Wator) sollte eigentlich bekannt sein, in meinem Fall fressen rote Haie grüne Fische in einem blauen Meer. Umgesetzt habe ich das mit Hilfe von Web Workern und Canvas.
Demo (Am Besten mit Chrome ansehen…)

Kritik am meistgehaßten Browser der Welt, der Song spricht mir aus der Seele.

Critic on the worlds most hated Browser…
Continue Reading

Just had some fun with Javascript (and Prototype):

Continue Reading

Habe mal wieder mit JavaScript gespielt, heraus kam eine Methode, direkt Texte auf einem Drucker auszugeben (Ok, der System Druckdialog ließ sich nicht umgehen, ist aber auch besser so!)

String.prototype.print = function(){
    var ifr = document.createElement('iframe');
    ifr.style.visibility = 'hidden';
    document.body.appendChild(ifr);
    ifr.contentWindow.document.open();
    ifr.contentWindow.document.write(this);
    ifr.contentWindow.print();
    ifr.contentWindow.document.close();
};

Ein paar Beispiele:

"Hello World!".print();
"Hello <strong>World</strong>!<br>This is a test!!".print()

Dieser Codeschnipsel habe ich bislang nur unter FF getestet, funktionierte!

Played again a bit with JavaScript and created a small code-snippet which let you print out a String on a printer without opening a popup-window.

String.prototype.print = function(){
    var ifr = document.createElement('iframe');
    ifr.style.visibility = 'hidden';
    document.body.appendChild(ifr);
    ifr.contentWindow.document.open();
    ifr.contentWindow.document.write(this);
    ifr.contentWindow.print();
    ifr.contentWindow.document.close();
};

Two small examples:

"Hello World!".print();
"Hello <strong>World</strong>!<br>This is a test!!".print()

I have tested it only with Firefox, worked good for me.

Es ist ja anscheinend gerade “in”, etwas über JSONP zu berichten. Nun ja, ich dachte eigentlich, so etwas ist kaum der Rede wert, aber wenn jQuery mit der Methode getJSON etwas anbietet, was Prototype noch nicht kann, muss ich wohl diesen kleinen Codeschnipsel, der mal so bei einem Experiment mit Twitter nebenbei entstanden ist, auch mal veröffentlichen Continue Reading

Seit ein paar Tagen betreibe ich ein neues Hoby: GeoCaching.
Wer mehr über die Schatzsuche für Erwachsene erfahren möchte, besucht einfach diese Seite.
Bei den “GeoCachern” ist es Sitte, alles was eventuell ein Hinweis auf das Versteck sein könnte, mittels ROT13 zu “verschlüsseln”. Damit man nicht alles manuell entschlüsseln muss, gibt es bereits Tools, ich habe allerdings bislang nur eins gefunden, welches auf der Greasemonkey-Erweiterung für den Firefox basiert.
Ich habe jetzt ein Bookmarklet geschrieben, das einfach nur in die Lesezeichen-Symbolleiste geschoben werden muss.
Damit brauche ich einfach nur den zu entschlüsselnden Text markieren, auf das Lesezeichen klicken und schon wird mir der entschlüsselte Text präsentiert.

Ivry Fcnff qnzvg!

GeoDecode
(Drag and Drop this link to your Bookmarks)

Das “Superwahljahr” 2009 hat begonnen, was mich zu diesem (nicht ganz ernst gemeinten) Beitrag gebracht hat. Ich versuche mal, unsere grössten Parteien anhand deren Webauftritte etwas zu vergleichen.
Continue Reading

Inspiriert vom WTFramework habe ich ein für mich sinnvolles Bookmarklet entworfen, das mir die ID des Elements unter dem Mauszeiger anzeigt.
Sicher gibt es viele andere Möglichkeiten, diese Aufgabe zu erledigen, dieses Bookmarklet soll nur eine davon sein.
Einfach diesen Link in eure Lesezeichen schieben:
GetElementId

Anmerkungen und Verbesserungen sind willkommen!

[UPDATE] Danke FND, der Link geht wieder

Wer interessiert ist, welches Framework die aktuelle Seite gerade verwendet, wird an WTFramework seinen Gefallen finden. Dieses Bookmarklet nimmt die Arbeit ab, in den Quelltext der Seite zu schauen und die geladenen JavaScript-Objekte zu checken.

Nettes Tool, vielen Dank!

Mikko Ohtamaa zeigt hier, wie das bekannte JSLint direkt beim Entwickeln von Javascript in Eclipse (Ich nutze Aptana, hat viele nette Features und basiert auf Eclipse) dafür sorgen kann, Probleme zu vermeiden, bzw. zu verringern.
Vielen Dank dafür!