JavaScript & DOM Debugging

Letzten November gab ich einen kurzen Vortrag beim WebdevFulda Treffen über die Möglichkeiten, die aktuelle Browser beim Debuggen von Webseiten im allgemeinen und JavaScript im speziellen bieten.

Auf folgende Themen bin ich etwas näher eingegangen:

  • Benutzung der Debugging-Funktionen (console.log etc.)
  • Schritt-für-Schritt Debugging
  • Conditional Breakpoints
  • DOM Breakpoints
  • DOM Inspektor und Live CSS Editor

Präsentation »JavaScript & DOM Debugging« anschauen

Veröffentlicht am


Appliness – digitales Magazin für Frontendentwickler

Das neue iPad/Android Tablet Magazin Appliness richtet sich ganz konkret an Frontendentwickler. Dabei wird ein weites Themenspektrum abgedeckt: vom einsteigerfreundlichen Artikel über neue CSS3-Features bis hin zu detaillierten Abhandlungen über Node.js oder PhoneGap.

Neben der hohen Qualität der Artikel von bekannten Gesichtern wie Christian Heilmann oder Paul Irish, kann auch das Layout überzeugen. Besonders erwähnenswert: Appliness ist nicht nur einfach ein “dummes” Magazin – es macht auch vom Tablet-Format regen Gebrauch in dem trockene Code-Schnipsel, direkt im Artikel eingebettet, per Browser zum Leben erweckt werden.

Alle Ausgaben von Appliness gibt es als kostenlosen Download für Apple’s iPad und Android Tablets

Veröffentlicht am




highlight.js – Syntax Highlighting in Wordpress ohne Plugin

Ich weiß nicht genau warum, aber es gibt recht wenige gute Wordpress-Plugins die vernünftiges Syntax-Highlighting von Quellcode ermöglichen. Bisher griff ich auf Syntax Highlighter Evolved zurück. Richtig zufrieden war ich damit allerdings nicht, da ich permanent das Gefühl hatte mit Kanonen auf Spatzen zu schießen. Darüber hinaus ist das von Syntax Highlighter Evolved generierte HTML-Markup viel zu aufgeblasen und altbacken – es werden Table-Layouts verwendet – Hallo?!
Der größte Nachteil: die Seitenladezeit erhöht sich erheblich – besonders durch die Flash-basierte Lösung, die erlaubt den angezeigten Quellcode automatisch in die Zwischenablage zu kopieren.

Als vielversprechende Alternative bot sich highlight.js an. Kein Wordpress-Plugin sondern eine kleine JavaScript-Bibliothek, die momentan den Quellcode von 51 Programmiersprachen automatisch erkennen und farblich hervorheben kann.
Man muss dazu nur den gewünschten Code in die dafür vorgesehenen HTML-Tags <pre><code> verpacken, den Rest erledigt highlight.js.

Hier ein kleines Beispiel:

<!doctype html> 
<html> 
    <head>
        <script type="text/javascript" >
            function helloWorld() {
                var message = "Hello world!";
                alert(message);
            }
        </script>
        <style type="text/css" >
            body {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>highlight.js</h1>
    </body>
</html>

Genau was ich brauche – nicht mehr und nicht weniger.

highlight.js – Syntax-Highlighting per JavaScript

Veröffentlicht am