Webworking

Lint für jQuery

Guido — Fri, 03 Sep 2010 09:08:08 +0000

Früher war alles besser, der Himmel war blauer, die Wiesen grüner und ich programmierte eine Mailbox-Software in Turbo Pascal und wurde in der Uni dazu genötigt C zu programmieren. OOP war bei den Professoren mindestens Teufelszeug und Java irgendeine moderne Modeerscheinung – ja, damals hat das Informatik-Studium bei gescheiterten Mathematik-Professoren noch Spaß gemacht! ;)

Wenn die nichts konnten (außer von ihren ruhmreichen und heroischen Taten zu berichten, das sie einen Algorithmus aus dem Buch von Donald Knuth widerlegen konnten), und einen Assistenten brauchten, um diese neumodischen E-Mails lesen zu können – Lint konnten sie bedienen! Lint war ein kleines Tool, das in C die Qualität von Quelltext überprüfte, da die damaligen Compiler sagen wir mal recht rudimentär waren ;)

Lint fand nicht initialisierte Variablen, nicht freigegebenen Speicher und bei der Gelegenheit überprüfte es auch direkt, ob der Quelltext richtig formatiert war. Große Teile von Lint sind heute Bestandteil eines modernen Compilers – aber damals – naja, ein funktionierendes Programm war nicht gleich einem funktionierendem Programm :)

Ausgabe von jQuery Lint in der Firefox Console

Lustigerweise gibt es jetzt Lint für jQuery das durch einfaches Einbinden lustige Fehlermeldungen auf der Console ausgibt. Es kommt mit vier Reporting-Leveln daher und wird mit zunehmendem Level immer nerviger, und hilft einem unter anderen seinen jQuery-Code zu optimieren. Es macht also wesentlich mehr als eine simple Fehlersuche, sondern hilft einem dabei den in jQuery schnellsten und besten Weg zu finden, etwas zu erledigen.

Natürlich befindet sich das Tool noch im Aufbau aber jedem ist wohl klar das gerade in jQuery die gleiche Aufgabe auf 23 verschiedene Arten erledigt werden kann. Lint ist nicht nur ein nettes Tool zur Optimierung, sondern aufgrund seiner Ausgaben hilft es auch richtig jQuery zu programmieren.

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Bisher kein Kommentar - Schreibe den Ersten!
Verschlagwortung: Code-Optimierung, Javascript, jQuery, Lint

Cached Commons – CDN für JavaScript und CSS

Guido — Wed, 01 Sep 2010 12:27:37 +0000

Neuerdings lädt man ja Javascript nicht mehr vom eigenen Server, sondern verwendet die Google Libraries API, das ist zwar ganz nett, aber der Dienst bietet nur ein paar der weiter verbreiteten Javascripte an. Ich persönlich suche mich auf der Seite regelmäßig zu Tode, um noch einmal den korrekten Aufruf eines Skripts schnell zu finden. In der Regel hilft es einem auch nicht sonderlich weiter, denn wenn man die jQuery UI verwenden will, muss man Teile davon eh lokal ablegen.

Hinzu kommen eine große Anzahl von Plugins für jQuery (Lightboxen, Slider, Form-Elemente, etc.) das die einzige Hilfe von Google darin besteht, das grundlegende Javascript zu liefern. Cached Commons verfährt in dieser Angelegenheit grundlegend anders.

Screenshot der Cached Commons

Zum einen bietet der Dienst auch eine unzählige Anzahl an Plugins und kleineren Javascripten an, und zum anderen: das Ganze sogar in einer von Menschen durchschaubaren Liste! Ausgeliefert werden die Dateien über das CDN von GitHub, und wie es sich herausgestellt hat, sind die Betreiber des Dienstes sehr flexibel – falls mal etwas fehlt und man glaubhaft versichern kann, dass es besser drin wäre: Einfach bei GitHub das Projekt Forken oder direkt in das Hauptprojekt aufnehmen lassen.

Ich habe selten ein Projekt auf GitHub gefunden, das dessen Möglichkeiten bzgl. Auslieferung und Forks so gut ausnutzt!

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Bisher kein Kommentar - Schreibe den Ersten!
Verschlagwortung: Cached Commons, CDN, github, jQuery

elRTE – WYSIYWYG-Editor in jQuery inkl. Dateimanager

Guido — Tue, 31 Aug 2010 08:37:22 +0000

WYSIWYG-Editoren sind etwas Nettes, haben aber dennoch ein Problem: Die Bilder, die man in den Text einbinden möchte, müssen dummerweise erstmal auf den Server, und dann auch noch dem Editor zugänglich gemacht warden. Ich glaube TinyMCE war der erste Editor, der das eigentliche System um einen Bildbrowser und einen Dateimanager erweitert hat. Beides sehr nette und kostenpflichtige Module.

Letztens Endes vereinfachen sie den täglichen Umgang mit WYSIWYG schwer, um so begeisterter bin ich darüber, dass es nun einen Open Source Editor mit Datei-Manager gibt, der ziemlich schmal ist, da in jQuery programmiert. elRTE kann über eine einzige CSS angepasst werden, und ist wahnsinnig schnell geladen.

Screenshot von elRTE

In der Demo ist für mich immer am wichtigsten, wie und ob Tabellen angelegt werden können. Das hört sich in der heutigen Zeit zwar etwas archaisch an, aber Kunden wollen doch ab und an mal Zahlen online stellen – und gerade die Tabellen machen dann im Bereich WYSIWYG die meisten Probleme und enden in der Regel in einem wilden Rumgeklicke und einem genervten Kunden. Zumindest diese Anwendung ist im elRTE sehr intuitiv gelöst und kommt mit einer sehr einfachen Bedienung daher, das Gleiche trifft auch für den Filemanager zu.

Ist jQuery erst einmal geladen schlägt das Skript minified mit 150kb zu Buche, dazu kommt ein CSS mit 15kb, plus die Bilder. Ein deutsches Sprachfile liegt bereits bei und es werden kleine Teile der jQuery UI verwendet, die sich mittels jQuery Theme anpassen lassen. Dies ist zwar nicht viel weniger als beim TinyMCE, gefühlsmäßig ist elRTE aber wesentlich schneller als das Urgestein der WYSIWYG-Editoren.

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | 5 Kommentare
Verschlagwortung: elRTE, jQuery, TinyMCE, WYSIWYG

Links der Woche XLIII

Guido — Fri, 27 Aug 2010 10:15:36 +0000

Und mal wieder zur Abwechslung die besten Links aus der letzten Zeit ;)

Artikel-Serien in WordPress erstellen und verwalten
Der Titel sagt eigentlich schon alles, super Anleitung für die “neuen” Artikelserien in WordPress
ezMark: jQuery Checkbox & Radiobutton Plugin
Mit jQuery einfach Checkboxen und Radiobuttons designen
10 Free Web UI Kits and Resources for Designers
Ziemlich coole Kits zur Verwendung in Photoshop oder Wireframe-Software um Mockups zu erstellen
Facebook-Quiz in PHP
Nettes Tutorial das anhand eines Quiz erklärt, wie man eigene Anwendungen mittels PHP in Facebook integriert
40+ Well Designed E-commerce Icon Sets
40 freie Icon-Sets zum Thema E-Commerce
How to Test your JavaScript Code with QUnit
Nettes Tutorial zu QUnit: Unit-Tests für Javascript

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Bisher kein Kommentar - Schreibe den Ersten!
Verschlagwortung: Design, ecommerce, Facebook, forms, icons, Javascript, jQuery, Photoshop, PHP, qunit, Templates, Tutorial, Webdesign, wireframe, Wordpress

Glimmer – der Editor für jQuery Animationen

Guido — Wed, 25 Aug 2010 08:43:27 +0000

jQuery Animationen sind eine lustige Sache, lustig deshalb, weil man mehr als „Einblenden“ und „Ausblenden“ im Web nicht zu Gesicht bekommt. Soll eine Box von links nach rechts durch den Bildschirm fliegen nimmt man eher Flash, als dies „Mal eben schnell“ in Javascript erledigen zu lassen. Grund ist meines Erachtens ein gutes Stück Faulheit, dann sobald etwas fliegt, ist nicht mehr der Webworker zuständig, sondern der Designer, und der hat in den seltensten Fällen schon mal Quelltext gesehen, sondern diesen eher zerstört. (Jehova!)

Screenshot von Glimmer

Richtig gute Designer können auch bedingt programmieren, und wissen vor allem, was möglich ist, und was nicht. Aber zurück zu jQuery – ich persönlich würde glauben, dass es mehr Animationen in Javascript gäbe, wenn es auch hier Klickibunti-Oberflächen gäbe, in denen man sich WYSIWYG Animationen zusammen basteln kann.

Und genau das gibt es jetzt! Zwar als Windows-Anwendung (noch mal: Jehova!) aber immerhin. Glimmer kommt mit einer netten Oberfläche daher und erlaubt das Zusammenklicken von Animationen die am Ende als Javascript-Datei in jQuery ausgegeben werden.

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Bisher kein Kommentar - Schreibe den Ersten!
Verschlagwortung: Animation, Glimmer, jQuery

MyWebsql – eine weitere Alternative zu phpMyAdmin?

Guido — Mon, 23 Aug 2010 08:03:13 +0000

Mein ganz besonderer Liebling ist ja eigentlich Adminer, nur eine Datei, schnell – und macht vor allem alles, was man braucht. phpMyAdmin kann ich nach wie vor nichts abgewinnen, insofern bin ich immer interessiert wenn ich webbasierte Lösungen zur Verwaltung von SQL-Datenbanken finde.

Screenshot von MyWebsql

MyWebsql ist eine solche Lösung. Zugegebenermaßen ist die Farbgebung etwas gewöhnungsbedürftig (Demo), aber die Usability ist ganz ordentlich. Auf die Demo sollte man derweil nicht so viel geben, der Server, auf dem diese gehostet wird, könnte durchaus etwas schneller sein. Das kleine Tool baut auf jQuery auf und nutzt dessen UI.

Das Code Highlighting für SQL ist sehr nett und eigentlich erlaubt es alles, was der „große Bruder“ phpMyAdmin auch kann. Allerdings glaube ich nicht, dass das Tool bei mir den Adminer ablösen wird, der mir nach wie vor am besten gefällt.

Syntax Highlighting im Editor von MyWebsql

Wer sich allerdings mit dem Adminer nicht anfreunden kann, und wer von phpMyAdmin die Nase voll hat, der ist mit MyWebsql gut bedient, zumal es eines der wenigen Tools ist, die rapide weiterentwickelt werden. Man darf abwarten, was noch kommt, aber es ist zumindest schon einmal das erste Tool das eine der mächtigeren Javascript-UIs verwendet.

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Bisher kein Kommentar - Schreibe den Ersten!
Verschlagwortung: Adminer, MySQL, MyWebsql, PHPMyAdmin

Links der Woche XLII

Guido — Fri, 13 Aug 2010 07:55:29 +0000

Die besten Tweets der letzten Tage, viel Spaß damit :)

Radian Is a Radial Mouse-Centered Application Launcher
Radian könnte sich zu einer netten Alternative zu Launchy entwickeln, muss man auf jeden Fall mal im Auge behalten
40+ Free Professional PSD Design Templates
40 freie Web Design Templates für Photoshop – sind ein paar sehr nette Sachen dabei!
40 Bizarre and Cool Google Earth Photos
Bei Google gibt es nicht nur “normales” zu bestaunen, sondern auch den einen oder anderen netten Spruch auf einem Dach oder sonderbare Anomalien der Natur
So optimierst du den Kommentarbereich deines WordPress-Blogs
Nette Hinweise zur Optimierung des Kommentarbereiches einer WordPress-Installation
Aus der Berufspraxis: Fehlentscheidungen der Webentwickler
Die 10 größten Fehler, die man als Webentwickler machen kann – sehr gute Zusammenstellung
Google Analytics: IP-Übertragung anonymisieren
Sehr guter Beitrag der erklärt, wie man als Webseiten-Betreiber die IP-Adresse seiner Benutzer für Google Analytics anonymisiert, um so zum Beispiel der derzeitigen Datenschutz-Diskussion aus dem Wege zu gehen
Aus Facebook-Nutzern Kunden machen – So macht “Fan sein” Spaß
Interessanter Beitrag zur Kundengewinnung über Facebook – und einer kleiner Anleitung wie man es nicht machen sollte :)
Formular Design mit CSS3 – Visuelle Gestaltung und der Verzicht auf Grafiken
Nettes Beispiel zur Gestaltung eines Formulars in CSS3 ohne Verwendung von zusätzlichen Grafiken
Chrome Shows Off Some Fancy HTML5 Tricks
Einige nette HTML5-Beispiele zur Demonstration der Leistungsfähigkeit von Chrome
MySQL virtual columns
Nette Erklärung der neuen MySQL Virtual Columns, die sich gerade in der Entwicklung befinden.
How to Run Mac OS X in VirtualBox on Windows
Nettes Tutorial zur Installation von Mac OS X in einer VirtualBox

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Bisher kein Kommentar - Schreibe den Ersten!
Verschlagwortung: Analytics, Chrome, CSS3, Facebook, Google, HTML5, MySQL, osx, Photoshop, Templates, virtualbox, Wordpress

Die Selektoren von jQuery erweitern

Guido — Wed, 11 Aug 2010 08:54:52 +0000

Ich bin über einen recht interessanten Artikel im Blog von James Padolsey gestolpert, der nachhaltig Arbeit einsparen kann, insofern man jQuery verwendet. Die Selektoren von jQuery sind ja bereits hinreichlich bekannt, wie zum Beispiel :first-child und :last-child. Lustigerweise zeigt die Praxis, dass man gerade den Selektor verwenden möchte, den jQuery gerade nicht anbietet. Man kann zwar auch ohne Selektoren auf die Elemente zugreifen, aber dies ist in der Regel aufwendig und was noch viel wichtiger ist: Es verlangsamt den verwendeten Code.

Screenshot von James Padolseys Blog

James zeigt in seinem Blog allerdings, das es ziemlich einfach ist eigene Selektoren zu schreiben:

$.extend($.expr[':'],{
   inline: function(a) {
      return $(a).css('display') === 'inline';
   }
});

Fügt dem System den neuen Selektor :inline hinzu, der dann ganz normal angewendet werden kann:

1 2	$(':inline'); // Selects ALL inline elements $('a:inline'); // Selects ALL inline anchors

Das spart jede Menge Arbeit und hält den Code übersichtlich, eine feine Sache, wie ich finde vor allem wenn man sich eine Bibliothek häufig verwendeter Selektoren anlegt, die jQuery dummerweise nicht anbietet.

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Ein Kommentar
Verschlagwortung: jQuery, Plugin, Selektoren

Tutorial Regular Expressions: Wiederholungen

Guido — Wed, 11 Aug 2010 08:31:51 +0000

In den bisherigen Teilen des Tutorials haben wir Elemente immer so gesucht, das sie an einer bestimmten Stelle vorkommen mussten. Dies ist eher seltener der Fall, denn in der Regel ist es eher so, dass wir nach einer unbestimmten Anzahl von Zahlen oder Buchstaben suchen. Oder das wir nach einem Konstrukt suchen der mit etwas bestimmten anfängt, mit etwas bestimmten aufhört, und dazwischen eine beliebige Anzahl von Zeichen stehen (so zum Beispiel ein Tag in einer HTML-Seite).

Entsprechend benötigen wir die sogenannten Metacharacters der Regular Expressions, die uns erlauben, Wiederholungen durchzuführen. Die wohl bekanntesten Metacharacter sind das Fragezeichen ? und der Asteriks *. Das Fragezeichen bedeutet, dass das davorstehende Zeichen im Suchausdruck keinmal oder einmal vorkommen darf! Eine Suche nach Hoh?l findet zum Beispiel die Wörter Hohl, aber auch Hol.

Der Asterisk bedeutet, dass das davorstehende Zeichen keinmal oder beliebig oft vorkommen darf! Es entspricht im Großen und Ganzen den Wildcards, die man aus der Kommandozeile von Betriebssystemen her kennt. Eine Suche nach Wald* findet zum Beispiel Wald, aber auch Waldschrat.

Im Gegensatz dazu muss beim Metacharacter Plus + das davorstehende Zeichen mindestens einmal vorkommen. Es darf aber auch beliebig oft wiederholt werden. Eine Suche nach [A-C]+ würde zum Beispiel das Wort Bier finden, aber nicht das Zebra. Grund ist, dass das Z natürlich nicht in der Aufzählung [A-C] enthalten ist.

Wenn ein Zeichen mehr als einmal vorkommen muss, kann man geschweifte Klammern {n} verwenden. Wobei das davorstehende Zeichen exakt n-Mal wiederholt werden muss. Eine Suche nach [0-9]{4} findet zum Beispiel alle 4-stelligen Zahlen. Möchte man nach einer bestimmten Anzahl von Zeichen suchen, kann man die geschweiften Klammern auch abwandeln: {n,m} findet von dem davorstehenden Zeichen mindestens n, aber maximal m Stellen. Eine Suche nach [0-9]{3,4} findet demnach alle 3- oder 4-stelligen Zahlen.

Kommen wir zurück zu unserem Suchstring:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC1; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0)

Suche nach: W*in
Findet Windows und Win64

Suche nach: [xX][0-9]{2}
Findet x64

Suche nach: [0-9]+\.[0-9]+
Findet 4.0, 8.0, 6.0, 4.0, 2.0 …

Im nächsten Teil des Tutorials lernen wir das Gruppieren von Suchergebnissen.

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Ein Kommentar
Verschlagwortung: Regular Expressions, Reguläre Ausdrücke, Tutorial

Syntax Highlighting in Javascript

Guido — Mon, 09 Aug 2010 12:59:37 +0000

Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Finger vom Code zu lassen hat, als Nächstes muss er noch farblich in hübsches HTML überarbeitet werden. Zumindest Ersteres ist schon ein Thema für sich. WordPress – oder besser der WYSIWYG-Editor TinyMCE – hat das Feature „HTML aufräumen“ – was mich in regelmäßigen Abständen in den Wahnsinn treibt. Was das genau heißt? A) man sollte eigenen Code stets in ein

-Tag setzen und b) das bedeutet nicht das TinyMCE die Finger davon lässt und den Code nicht verschlimmbessert optimiert!

In anderen Worten: In schöner Regelmäßigkeit zersetzt der TinyMCE Code-Beispiele. Ich habe noch keine vernünftige Möglichkeit gefunden, TinyMCE dies abzugewöhnen, aber es ist auch nur das halbe Problem. Hat man den Code nämlich einmal im System, wird er zwar dargestellt, aber weder schön noch sinnvoll. Was fehlt ist ein Syntax Highlighting! Dieses kann wiederum durch gefühlte 1.000 Plugins nachgerüstet werden die allesamt auf der Tatsache beruhen, dass sie mittels Geshi und einem Filter den Code serverseitig „einfärben“.

Demo von jQuery Syntax

Geshi zeichnet sich insbesondere dadurch aus, dass es jede noch so mystische Sprache auf diesem Planeten – wahrscheinlich sogar Lochstanzkarten – unterstützt. Geshi an sich ist kein Leichtgewicht und die Einflussmöglichkeiten, die genommen werden können, sind gering. Kombiniert mit schlechter Programmierung und einem WordPress-Filter kommt ein Moloch heraus den man wahrscheinlich in seiner Komplexität nur schlecht überbieten kann. Dies ist auch der Grund, wieso ich hier im Blog regelmäßig die Art und Weise, wie das Syntax Highlighting funktioniert, schlicht und ergreifend komplett austausche.

jQuery Syntax ist eine interessante Alternative die als jQuery Plugin kein Geshi benutzt und das Feature besitzt, das die Grundversion nur 11kb besitzt. In dieser Grundversion sind keine Sprachdefinitionen enthalten. Der Core ist clever genug nur die Definition für die Sprachen nachzuladen, die auch wirklich benutzt werden. Darüber hinaus bietet es Themes an und kommt mit einem sehr gutem Standard-Theme. Alle Farben und Settings sind einfach anpassbar und über CSS änderbar. Besonders gut gefällt mir, dass das ganze auch Inline funktioniert!

jQuery Syntax stellt meines Erachtens eine sehr gute Alternative zu den Geshi-basierten Systemen zur Verfügung und ist vor allem eins: klein, schnell und anpassbar. Eine direkte Einbindung ins Theme belastet WordPress so gut wie gar nicht!

Ähnliche Beiträge:

75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink | Ein Kommentar
Verschlagwortung: Geshi, Javascript, jQuery, Wordpress