Slideshow Bob - Webentwicklung

Script-Entwicklung für Greasemonkey

nospam@example.com (Thomas Werner) — Thu, 11 Mar 2010 19:54:00 +0100

[TOC3]Greasemonkey ist eine nette, aber auch irgendwie anarchistische Firefox-Erweiterung, welche es erlaubt, von Benutzern selbst gebastelten JavaScript-Code auf x-beliebigen Websites auszuführen. Sinn und Zweck ist die Veränderung der Seiten. Klingt erstmal komisch, hat aber viele, viele sinnvolle Anwendungsgebiete, insbesondere auf populären Websites wie StudiVZ, Youtube und Co.
Mit Greasemonkey kann man Websites um Funktionalitäten erweitern, die so nicht angeboten werden. Da sind der Vorstellungskraft keine Grenzen gesetzt und darüber hinaus erleichtert einem diese Erweiterung sehr viel Arbeit, wenn man vorhat, eine kleine, eigene Erweiterung für Firefox zu basteln (was recht kompliziert ausfallen kann).

In diesem Artikel gehe ich auf die Script-Entwicklung mit Greasemonkey ein, erläutere Dinge, die man beachten muß und ein paar fiese Bugs, über die ich selbst gestolpert bin.

"Script-Entwicklung für Greasemonkey" vollständig lesen

JavaScript und das Krümelmonster

nospam@example.com (Thomas Werner) — Tue, 24 Nov 2009 19:15:44 +0100

Ich hab mich kürzlich erstmals mit dem Thema Cookies unter JavaScript beschäftigt und muß sagen: meine Fresse, das ist wirklich zum Haareraufen schlecht gelöst. Daher gibts jetzt von mir eine kleine Klasse, die den Umgang mit Cookies deutlich vereinfacht:

/**
* A Cookie Manager Class.
* @author tw
*/
function Cookie() {
/**
* Gets a cookie value by its name.
*
* @param name The cookie's name.
* @return String
*/
this.get = function(name) {
eval('var regex=/' + name + '\\s*=\\s*([^;]+)\\s*(;|$)/;');
var result = document.cookie.match(regex);
if(result) return result[1];
};
/**
* Sets a cookie.
*
* @param name The cookie's name.
* @param value The according value.
* @param expiresOn [Optional] A Date object specifying the expiration date.
* if omitted, the cookie expires in seven days from now.
*/
this.set = function(name, value, expiresOn) {
if(typeof expiresOn == 'undefined') {
expiresOn = new Date;
// Keep for a week
expiresOn.setTime(expiresOn.getTime() + 604800000);
}
document.cookie = name + '=' + value.paramEncode() + '; expires=' +
expiresOn.toGMTString();
};
/**
* Sets an "unlimited" cookie, meaning that the expiration date is set
* to the maximum.
*
* @param name The cookie's name.
* @param value The according value.
*/
this.setUnlimited = function(name, value) {
var expiresOn = new Date;
expiresOn.setTime(2147483647000);
this.set(name, value, expiresOn);
};
/**
* Deletes a cookie.
*
* @param name The cookie's name.
*/
this.remove = function(name) {
var expiresOn = new Date;
expiresOn.setTime(0);
this.set(name, '', expiresOn);
};
}

Verwendet wird der ganze Spaß folgendermaßen:

var cookie = new Cookie;
// Hält 7 Tage lang
cookie.set('meinCookie', 'xyz');
// Hält "ewig" - also genau genommen bis 2037 oder so:
cookie.setUnlimited('ewig', 'jaja');

Viel Spaß damit.

[JavaScript] Die Probleme einer Vererbungskette

nospam@example.com (Thomas Werner) — Mon, 23 Nov 2009 17:32:00 +0100

[TOC3]Ich habe zuvor bereits einen ausführlichen Artikel über die Möglichkeiten und Grenzen von Objektorientierung und Vererbung in JavaScript geschrieben (siehe Objektorientierte Programmierung in JavaScript).
Gerade eben bin ich allerdings auf ein handfestes Problem gestoßen, und zwar konnte ich mit der gängigen Technik nicht vernünftig die Kette von Eltern-Konstruktormethoden von einer tieferen Kindklasse aus aufrufen.

"[JavaScript] Die Probleme einer Vererbungskette" vollständig lesen

PHP geht bei 64 Bit die Speicherpuste aus

nospam@example.com (Thomas Werner) — Sun, 20 Sep 2009 15:21:48 +0200

Höher, schneller, weiter hat auch seinen Preis.

Vergangene Nacht war ich mit 'nem Kumpel damit beschäftigt, eine Homepage zu debuggen, die auf einem neuen Server einfach nicht mehr funktionieren wollte. Manche Seiten waren weiß, ein paar wenige Seiten funktionierten dagegen - und im PHP-Log war zu sehen, daß der Speicherverbrauch die festgelegte 16-MB-Grenze gesprengt hat, weshalb sich PHP zum Abbruch der Skriptausführung gezwungen sah.

Die Frage war: was ist mit der Homepage nach der Migration plötzlich passiert? Auf dem alten Server ging sie auch mit dem 16M-Speicherlimit. Die Antwort ist hierbei ganz einfach und leider auch ein bißchen erschreckend - der neue Server ist ein 64-Bit-System. Auch die PHP-Installation ist die 64-Bit-Variante.

Der Speicherverbrauch der problematischen Homepage hat sich eindeutig meßbar im Schnitt verdoppelt. Eigentlich muß das nicht unbedingt der Fall sein, bloß weil der Prozessor von 32 Bit auf 64 Bit "hochgeschnellt" ist, aber scheinbar geht die 64-Bit-Version von PHP etwas verschwenderisch mit dem Speicher um.

Ich kann mir gut vorstellen, daß intern sämtliche Ganzzahlen auf 64-Bit-Integer festgelegt sind (anstatt dies je nach Bedarf niedriger anzusiedeln), und dazu kommen dann noch sämtliche Pointer, die zur Adressierung des größeren Adressraums wahrscheinlich standardmäßig ebenso 64-Bit sind. Allein diese Werte verdoppeln daher schon einmal ihren Speicherbedarf.

Da die betreffende Homepage eine recht komplizierte, objektorientierte Architektur hat, ist wohl der Ärger im Rahmen dieser Migration vorprogrammiert gewesen - nur geahnt hat es keiner.

Ich hab jedenfalls mal wieder was dazugelernt - insbesondere daß es wohl erforderlich ist, auf einem modernen 64-Bit-System auch tiefer in die Tasche für mehr RAM zu greifen. Ebenso ist es unvermeidlich, spendabler mit dem PHP-Memory-Limit umzugehen. Wenn das alles nicht hilft, muß man wohl leider wieder auf ein 32-Bit-System zurückgreifen.

JSE v1.0 - Ein Quellcode-Editor für den Webbrowser

nospam@example.com (Thomas Werner) — Fri, 11 Sep 2009 17:07:00 +0200

Als ich vor zwei Jahren meinen Blog frisch einrichtete, veröffentlichte ich einen Artikel über meinen Quellcode-Editor, den ich damals in JavaScript schrieb. In erster Linie ließ ich meinen Ärger über die Cross-Browser-Problematik bezüglich Tastatur-Key-Codes aus, welche abhängig von Browser und Plattform voneinander abweichen können.

Aufgrund dieser und weiterer Probleme war das Projekt seither auch auf Eis. Ich hab's aber vorhin nochmal ausgegraben, weitgehend korrigiert, sodaß es immerhin einigermaßen sauber unter Firefox für Linux klappt und stelle es nun wie den Quellcode von PixPush ebenso zur freien Verfügung unter der Creative Commons 3.0 Lizenz.

Ebenso stelle ich eine Live-Testversion zum Rumspielen (bzw. Code schreiben) zur Verfügung.

Schön bunt sieht's aus. Einfach mal selbst ausprobieren: Live-Testversion

Features

Die Editor-Klasse ist recht flexibel gestaltet. So kann man sich eigene Regeln für simple Code-Completion sowie Syntax-Highlighting festlegen. Standardmäßig wird Hervorhebung für die Programmierspache Java unterstützt.
Ansonsten werden Look & Feel klassischer Quellcode-Editoren über Tricksereien nachgebildet.

Automatische Zeilennumerierung
Syntax-Highlighting
Navigation über Cursortasten sowie Bild auf und ab
Entfernen und Backspace funktioniert, wie man es von einem Editor erwartet
Tab-Taste für Zeileneinschub
Automatischer Zeileneinschub basierend auf vorangegangene Zeile

Quellcode und Support

Vorab: ich werde keinen aktiven Support bieten, es aber dennoch begrüßen, wenn ihr mir Feedback über Probleme an dieser Stelle als Kommentar zukommen lassen würdet. Ich geb' das Ding so frei wie es ist und werde allerdings nur dann daran weitermachen, wenn ich Zeit und Lust dazu habe.

Ich lade jeden dazu ein, selbst Verbesserungen und Erweiterungen vorzunehmen, sowie die vorhandenen Probleme bezüglich der Tastatur-Key-Codes usw. zu beheben (weitere Details zu den Problemen und TODOs befinden sich im Quellcode).
Über Rückmeldungen würde ich mich jedenfalls freuen, sollte jemand am Code etwas ändern oder den Editor irgendwo einsetzen.

jse.zip

PixPush 1.0 - JavaScript Bitmap-Malprogramm

nospam@example.com (Thomas Werner) — Wed, 09 Sep 2009 16:52:00 +0200

Screenshot von PixPush v1.0 - Selber damit rumspielen kann man hier: PixPush v1.0 Live-Version

Vor zwei Jahren veröffentlichte ich einen ausführlichen Artikel zum Thema Bitspiele - Schnelle Multiplikation der alten Schule. Der Anlaß war mein damals programmiertes, browser-basiertes Bitmap-Malprogramm, welches ich nun wie damals angekündigt unter der Creative Commons 3.0 Lizenz veröffentliche.

Auf folgender Seite kann man mit dem Malprogramm etwas herumspielen: PixPush v1.0 Live-Version.

Da zum damaligen Zeitpunkt der sogenannte Canvas-HTML-Tag nicht sonderlich weit verbreitet war, implementierte ich das Malprogramm auf Basis von DIV-Tags - daher leidet etwas die Performance. Unter Konqueror sollte man eher die Finger davon lassen. Unter Firefox und Opera läuft's an sich ganz gut.

Mit meinem PixelPush-Patrick mache ich mal den Anfang.

Wettbewerb

Schreibt mir Kommentare und schickt mir Links auf eure, mit PixPush erstellten, Kunstwerke. Hierbei zählen nur Screenshots der gesamten PixPush-Programmoberfläche. Es gibt hierbei keinen Einsendeschluß.

Zu gewinnen gibt es eventuell einen feuchten Händedruck - sollten wir uns einmal leibhaftig gegenübertreten.

"PixPush 1.0 - JavaScript Bitmap-Malprogramm" vollständig lesen

Objektorientierte Programmierung in JavaScript

nospam@example.com (Thomas Werner) — Tue, 21 Jul 2009 13:20:00 +0200

[TOC3] Objektorientierte Programmierung (OOP) ist in JavaScript eine ungewöhnliche Sache. Die ersten Einblicke in JavaScript-Code gaukeln einem alles vor, was man von OOP an sich gewohnt ist, aber Klassen sucht man darin vergeblich. Das liegt daran, daß JavaScript prototypbasiert ist. Es gibt also keine Klassen als Vorlage für Objekte, sondern Objekte wie String, Array etc. existieren bereits von vornherein, und werden über den "new"-Operator geklont, um neue Objekte zu schaffen, welche die gleichen Eigenschaften des Originals haben.

Dieser Artikel behandelt Techniken der Vererbung und wie man so etwas wie Klassenkonstrukte unter JavaScript nachbilden kann.
"Objektorientierte Programmierung in JavaScript" vollständig lesen

Eine einfache ActiveRecord-Klasse für PHP

nospam@example.com (Thomas Werner) — Thu, 15 Jan 2009 00:26:18 +0100

Active Record ist ein recht simples Design Pattern, welches grob gesagt die Einträge einer Datenbanktabelle Objekten zuordnet, die sich dann wiederum beliebig in einem Programm manipulieren lassen.

Angenommen es existiert in einem Programm die Klasse "Car" mit den Eigenschaften "name", "color" und "hp" (horse power). Ebenso angenommen, es existiert eine Datenbanktabelle, die über die entsprechenden Spalten "name", "color", und "hp" verfügt. Das ActiveRecord-Pattern verknüpft die Klasse mit der Tabelle und entbindet den Programmierer von seinen Pflichten, entsprechende SQL-Abfragen zu schreiben, um Daten aus der Datenbank auszulesen oder darin abzuspeichern.

Ein kleines Anwendungsbeispiel:

<?php
// Neues Auto-Objekt anlegen und Eigenschaften festlegen:
$car = new Car;
$car->set('name', 'BMW');
$car->set('color', 'blue');
$car->set('hp', 180);
// In Datenbank abspeichern:
$car->save();
// Und jetzt das Auto wieder aus der Datenbank laden:
$result = $car->findAllBySql('name=?', array('BMW'));
if(count($result)) {
$mySavedCar = $result[0];
echo 'Name: ', $mySavedCar->get('name'), '<br />';
echo 'Color: ', $mySavedCar->get('color'), '<br />';
echo 'HP: ', $mySavedCar->get('hp'), '<br />';
/* Ausgabe:
------------
Name: BMW
Color: blue
HP: 180
*/
}
?>

Im Folgenden stelle ich eine recht kurzgehaltene, sehr vereinfachte Variante des Patterns als abstrakte Basisklasse für PHP (Version 5 und höher) vor.
"Eine einfache ActiveRecord-Klasse für PHP" vollständig lesen

Es ist ja "nur ein Test"...

nospam@example.com (Thomas Werner) — Thu, 20 Mar 2008 16:05:12 +0100

Derzeit fallen mir gehäuft und regelmäßig "Einbruchsversuche" auf einer, von mir erstellten, Homepage auf, da diese Versuche Ausnahmefehler verursachen, welche mich automatisch mit allen Details über E-Mail informieren.

Diese Attacken kommen jeweils von unterschiedlichen Servern, verfolgen aber immer dasselbe Muster:

Eine URL wird als GET-Parameter an "meine" Homepage übergeben

"Meine" Homepage mag das nicht schlucken, bricht ab und schickt mir ne Email

Ich hab mir ein paar dieser "injizierten URLs" angeschaut und es sind immer Textdokumente, welche PHP-Code repräsentieren:

<?php echo md5("just_a_test");?>

Es ist offensichtlich ein PHP-basiertes Internetvirus, welches die Weiten des Internets durchsucht, um "kleine Dummheiten" von PHP-Programmierern zu finden.

Das Virus spekuliert offenbar auf folgenden Sachverhalt:
Führt das PHP-Skript auf dem anzugreifenden Server Benutzereingaben aus?
"Es ist ja "nur ein Test"..." vollständig lesen

Wenn bei PHP die Müllabfuhr streikt

nospam@example.com (Thomas Werner) — Sat, 12 Jan 2008 19:16:47 +0100

PHP 5 weist nicht nur aufgeräumte Sprachergänzungen in puncto Objektorientierung, sondern auch erhebliche Probleme im Speicher-Management auf.

Der sogenannte "garbage collector", welcher sich für das Aufräumen unbenötigter Daten, Ressourcen und Objekte verantwortlich zeichnet, versagt unter gewissen Umständen seinen Dienst.

Dieser Artikel erläutert nicht nur dieses Problem anhand eines Beispiels, sondern stellt auch eine Lösung hierzu vor.
"Wenn bei PHP die Müllabfuhr streikt" vollständig lesen

Wenn Apache zuhause Hausverbot erteilt

nospam@example.com (Thomas Werner) — Sat, 22 Dec 2007 16:45:16 +0100

Ich hatte seit einiger Zeit das kuriose Problem, manchmal weder über Opera noch Konqueror, auf meinen lokalen Entwicklungs-Webserver zugreifen zu können. Die Eingabe von http://localhost als Webadresse, wurde bei beiden mit einem lakonischen "Zugriff verweigert" quittiert.

Apaches Fehlerlog vermeldete Ähnliches. Angeblich versuchte ein "client", entgegen der konfigurierten Zugriffskriterien, sich Zugang zu verschaffen. Aber das alles auf meinem eigenen Rechner.

Naja, ein Blick in die Konfigurationssektion meines "htdocs"-Verzeichnisses, ließ in mir eine Ahnung aufkommen:

<Directory "/srv/www/htdocs">
Options FollowSymlinks Indexes
AllowOverride All
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</Directory>

Ich vermutete, daß sowohl Opera, als auch Konqueror auf 'localhost' zugriffen, und dieser Hostname nicht vernünftig auf meiner Kiste als '127.0.0.1' aufgelöst wird. Nachdem ich den obigen Konfigurationsabschnitt noch um ein Allow from localhost ergänzt hatte, läuft's jetzt wie geschmiert.

Zu seltsam, daß ich unter OpenSUSE 10.2 hiermit keinerlei Probleme hatte.

Annahme ausgelöst und nicht aufgefangen - oder JavaScript im Internet Explorer

nospam@example.com (Thomas Werner) — Mon, 27 Aug 2007 19:06:00 +0200

Eine JavaScript-Fehlermeldung des aktuellen Microsoft Internet Explorer 7. Offenbar verwechselten die Übersetzer "exception" mit "expectation".

Seit jeher beschert Microsoft uns Webdesignern und -programmierern mit seiner "Internet Explorer"-Produktserie (IE) eine schier unerschöpfliche Quelle an, zu meisternden, Herausforderungen.
Meine ersten Gehversuche in JavaScript, waren damals noch geprägt von einer gigantischen Menge an Inkompatibilitäten zwischen den großen Browsern (Netscape und IE), wobei die Räder gerne neu erfunden wurden, und die Hersteller für gleiche Funktionalitäten ihre eigenen Spezifikationen und Methoden bereithielten.
Dieses Problem läpperte sich im Verlauf der Jahre und die meisten Browser halten sich mittlerweile auch brav an die Standards.
Da ich mittlerweile hauptsächlich unter Linux entwickle, testete ich auch ein neues JavaScript-Projekt von mir, eine ganze Weile lang hauptsächlich unter Firefox, Konqueror sowie Opera, da bei mir der IE leider auch mit Hilfe von Wine und dem praktischen Tool IEs4Linux, mittlerweile nicht mehr funktioniert.
Gestern testete ich meinen Code allerdings unter Windows, um genau zu sein, unter Internet Explorer 7; und mußte feststellen, daß nichts, meiner harten Arbeit, darin laufen wollte.
"Annahme ausgelöst und nicht aufgefangen - oder JavaScript im Internet Explorer" vollständig lesen

PHP-Sicherheit

nospam@example.com (Thomas Werner) — Sun, 11 Feb 2007 15:00:00 +0100

PHP und Sicherheit ist ein wichtiges Thema - insbesondere durch den hohen Verbreitungsgrad des "PHP: Hypertext Preprocessor"'s. Es ist eine nette, offenbar einfach zu erlernende Skriptsprache, welche den Webentwickler recht flott Ergebnisse erzielen läßt. Bei aller Einfachheit, bzw. bei allem Komfort, liegt es am Entwickler, gewisse Sicherheitsvorkehrungen an seinen Skripten vorzunehmen, um nicht unerfreuliche Bekanntschaft mit Hackern und "Skriptkiddies" zu machen.
"PHP-Sicherheit" vollständig lesen

Bitspiele - Auf Biegen und Brechen einen Nutzen gefunden

nospam@example.com (Thomas Werner) — Sun, 04 Feb 2007 15:21:38 +0100

In meinem vorigen Artikel zum Thema Bitspiele, habe ich mein ernüchterndes Ergebnis bezüglich Multiplikationen mittels Bitshifting in JavaScript gezeigt.
Nun habe ich allerdings die andere Shiftingrichtung durchgetestet: die Division.
"Bitspiele - Auf Biegen und Brechen einen Nutzen gefunden" vollständig lesen

Ein Array sagt mehr als tausend Worte.

nospam@example.com (Thomas Werner) — Sat, 03 Feb 2007 20:32:44 +0100

So auch ich selbst: JavaScript und Array-Funktionen. Ein bunter Strauß der guten Laune und Abendunterhaltung. Nicht.
"Ein Array sagt mehr als tausend Worte." vollständig lesen