Mit der attr() Funktion ist es möglich, Attribute eines Elements in CSS auszulesen.
Das kann zum Beispiel verwendet werden, um in der Druckansicht der Seite die vollständigen Links anzuzeigen. Continue Reading

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

DEMO

Ich habe vor längerer Zeit hier mal ein Ant-Script vorgestellt, mit dem sich JavaScript Projekte automatisiert zusammenfassen und komprimieren lassen.
Die in dem Video vorgestellte Lösung verwendet den YUI Compressor und zusätzlich noch JSLint/JSHint.

Ein kleines Video, passend zum heutigen System Administrator Appreciation Day

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

Ein grossartiges Video von Patrick Clair

Continue Reading

http://css.dzone.com/news/crazy-javascript-hack

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

Ich habe mich ja bei denen kurz nach meiner Registrierung wieder abgemeldet, “nicht noch so eine Seite” habe ich damals gedacht… Das meine Entscheidung damals wohl gar nicht so schlecht war, zeigt dieses Video von Extra3. Continue Reading

Just had some fun with Javascript (and Prototype):

Continue Reading