Die Chrome-Erweiterung DOM Snitch soll dabei Entwicklern beim Verbessern ihres JavaScript-Code helfen. DOM Snitch untersucht dazu Skripte auf Funktionen, die das Document Object Model zur Laufzeit manipulieren können.

confirmed to work with the following browsers so far:

• Internet Explorer
  • Internet Explorer 6 (Microsoft Windows)
  • Internet Explorer 7 (Microsoft Windows)
• Mozilla Firefox
  • Mozilla Firefox 1.5+ (Microsoft Windows)
  • Mozilla Firefox 1.5+ (Apple Macintosh)
• Opera
  • Opera 9 (Microsoft Windows)
• *NEW* Safari
  • Safari 1.3+ (Apple Macintosh)

Free Richtexteditor

Lizensiert ist der Editor unter creative commons

Als Beispiel ein kleines JavaScript

<script type=”text/javascript”>
function uDial (frage, verweis) {
if (confirm(frage)) location.href=verweis;
return false;
}
</script>

und das Script nach dem Highlighter

Yahoo! UI Rich Text Editor

TinyMCE

NicEdit WYSIWYG editor

CKEditor WYSIWYG editor

openWYSIWYG WYSIWYG editor

Er beschreibt in seinem Artikel die Vorzüge eines jeden WYSIWYG editors Editor für den Web Einsatz.

Ein wesentlicher Bestandteil der Webseiten Typographie ist die Schriftart oder Font. Doch wie binde ich als Webmaster meine eigenen Fonts in meine Webseite ein? In den meisten Fällen werden Texte mit eigenen Fonts als Grafik oder als Flash dargestellt. Doch gerade diese werden von den meisten Suchmaschinen nicht als Content gewertet oder der Besucher der Seite muss einen Flash Player Plugin auf seinem Browser installert haben. Abhilfe schafft JavaScript

Cufón

Bei Cufón wird die gewünschte Schriftart über ein Web-Interface umgewandelt und anschließend per JavaScript eingebettet.  Sollte Javascript beim Webseiten Besucher ausgeschalten sein, wird der entsprechende Tag im definierten Zeichensatz dargestellt. Bei Cufón können ttf- bzw otf-Fonts verwendet werden.

Nachteile:  Es lassen sich nur drei Schriftstile (normal, fett, kursiv) hochladen und auch die Anzahl der einzubettenden Zeichen ist begrenzt. Ausserdem wird für jedes Wort ein eigenes Span Element generiert, welches den Code aufbläht.

Ein weiterer Vertreter dieser Sparte ist

typeface

Auch mit typeface lassen sich eigene  Schriftarten in einer Webseite verwenden. Die Konvertierung erfolgt wie bei Cufón, über ein Webinterface. Typeface.js rendert die konvertierte Schrift ohne Verwendung von Grafiken und Flash. Ist Javascript inaktiv, wird die Schrift wie im CSS festgelegt dargestellt.

Cufón vs Typeface

Der Unterschied zwischen beiden ist sehr gering. Cufón unterstützt mehr Filetypen, Typeface mehr CSS-Eigenschaften. Typeface.js ist einfacher zu verwenden, Cufón ist etwa 40kb kleiner. Bei Typeface.js  können transformierte Texte nicht markiert und kopiert werden. Bei beiden kann es zu Problemen bei der Lizenz der verwendeten Truetype-Fonts kommen.

Hyphenator

Mit Hyphenator.js wird eine automatische Silbentrennung erzeugt. Sollte ein langer Text, zum Beispiel durch verkleinern der Auflösung, zu einem Zeilenumbruch gezwungen werden, übernimmt Hyphenator die Silbentrennung. So kann es nicht zu unschönen Blogsätzen führen.

Momentan werden folgende Sprachen unterstützt:

• Englisch
• Deutsch
• Französisch
• Niederländisch
• Schwedisch
• Spanisch
• Malayalam, Tamil, Hindi, Oriya, Kannda, Telugu, Bengali, Gujarati und Panjabi
• Italienisch

Fazit

Wie man sieht, ist die Lösung vom Traum einer Schriftenvielfalt im Netz noch weit entfernt. Auch ältere Lösungen wie das Flash/ JavaScript Tool sIFR, können die Probleme der WebDesigner nur bedingt lösen und schaffen gleich wieder neue.

Dung currently supports the following functionality:

• Live DOM view and inspection
• DOM attribute and HTML editing
• Live CSS view
• CSS editing
• Provides console functions like console.log and console.error

Link zu Dung Beetle

Deshalb möchte ich heute 7 der wichtigsten Javascript Libraries zur Visualisierung aufzeigen:

Processing.js

ist eine Javascript-Umsetzung der Sprache Processing.  Die JavaScript Version Processing.js ist eine offene Programmiersprache, die es erlaubt Bilder, Animation und Interaktionen für das Netz zu programmieren, ohne Flash- oder Java-Applet zu verwenden.  Dabei verwendet Processing.js das HTML5 <Canvas> Element, um Formen zu zeichnen und zu manipulieren.

flot

ist eine Javascript-Bibliothek zum einfachen Erstellen von  Diagrammen und  ein Plugin für das JavaScript-Framework jQuery. Besonderer Wert wird bei Flot auf Interaktivität und das Aussehen gelegt.

Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6, 7 & 8

Sparklines

wie float ein Plugin für jQuery. Mit Hilfe von Sparklines lassen sich Sparklines, auch Inline-Diagramme oder small inline charts genannt, darstellen. Ein Beispiel eines Sparklines

Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.

Das Visualize PlugIn für jQuery

ermöglicht es aus den Daten in einer HTML-Tabelle ein Diagramm zu erzeugen. Bei deaktiviertem JavaScript wird statt der Balken, Linien, Flächen oder Torten-Diagramme  einfach die HTML Tabelle angezeigt.

IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9

milkchart für MooTools

ist ein Plugin für MooTools mit dem sich HTML-Tabellen in Grafiken konvertiert lassen. Es stehen Column, Bar, Line, Pie und Scatter Diagrammformen zur Verfügung. Milkchart benutzt das <canvas> Element von HTML5 und funktioniert deshalb nicht auf allen Internet Explorer Varianten.

Raphaël

ist eine Javascript-Bibliothek  zum Erstellung von Vektorgrafiken.  Dabei verwendet Raphaël das SVG des W3C Recommendation und Vector Markup Language (VML) als Basis. Dadurch unterstützt Raphaël auch den Internet Explorer.  Die Vektorgrafiken legt Raphaël als DOM-Objekte an, so daß  diese mit Javascript-Event-Handlern verknüpft und auch später noch modifiziert werden können.

Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

JavaScript InfoVis Toolkit

ist eine Javascript-Bibliothek mit Schwerpunkt auf dynamische Visualisierung von hierarchischen Daten. Es lassen sich Baumstrukturen anzeigen und immer weiter verzweigen. Die Bibliothek unterstützt TreeMaps, Radial Layouts, HyperTrees/Graphs  und  SpaceTrees.

IE6+, Firefox2+, Safari3+, Opera9.5+

Zu den Neuerungen gehören:

Firebug 1.5 supports Firefox 3.5 and Firefox 3.6.

Inspect

• Most solid inspect ever! No known case where the inspector is offset from the element.
• Added Quick Info Box
• Added Image Map Inspector

Console and Command Line

• Moved Break on Errors to Console panel (from Script panel).
• Break on individual errors improved and tested.

HTML

• Added Computed Style Panel (was previously an option of Style side panel)
• Added Break on HTML Mutate
• Added z-index and position to Layout side panel
• Added Show Basic Entities (is now the default)
• Added Namespace prefix HTML/XHTML/SVG/MathML
• Inspecting and editing of SVG and MathML now supported

CSS

• User Agent CSS is now read only (to prevent you from messing up Firefox)
• Improved duplicate stylesheet handling
• Update styles panel as pseudo-classes change for current element
• Allow change of pseudo-class state in styles panel
• Expand short-hand CSS properties mode
• Edit element style

Script

• Freeze Javascript and event handlers when on a breakpoint
• Break on Next moved to pause button in user interface.
• Break-on features through out Firebug.
• Turn off Firefox ‘jsd’ and allow Just In Time compiles if Firebug is not active in any window.

DOM

• Break on Object Change

Net

• Break on Next XHR

Der Download wird in den nächsten Tagen bei Mozilla verfügbar sein.

Crosscheck

Crosscheck ist ein open source test framework zum Testen von JavaScript mit unterschiedlichen Browsertypen.

FireUnit

Die JavaScript Test Erweiterung für Firebug.

JSLint

Tool zum Scannen von JavaScript Code auf Sytaxfehler.

SugarTest

ein weiteres Tool zum ermitteln von Fehlern in JavaScript Code

Obtrusive JavaScript Checker

Eine Firefox extension zum Scannen von HTML Seiten. Das Tool findet zum Beispiel HTML-Elemente mit Inline-Ereignissen und JavaScript Ereignisse in Webseiten.

JSLitmus

Ein ad-hoc JavaScript Benchmark Programm.

JsUnit

JsUnit ist ein Testing Framework für client-side (in-browser) JavaScript. Es ermöglicht Tests auf mehreren Browsern und unterschiedliches OSs laufen zu lassen.

Pretty Printer