mailo : Rubrik:coding

inplaceeditor mit autocompleter

mailo — 2009-08-03T19:00:00Z

scriptaculous bietet sowohl einen inplaceeditor als auch einen autocompleter an. leider sind diese beiden jedoch separat.

falls jemand beide braucht - wie zb ich (von der firma aus) - müssen diese jedoch kombiniert werden. das ist aber kein problem.

meine variante
zwar könnten die änderungen auch direkt im quellcode von scriptaculous stattfinden, doch das ist imho eher die unschöne/unsaubere art. da man in javascript alles überschreiben kann, bietet sich diese (= meine) variante sehr gut an.

insgesamt sind 3 methoden davon betroffen, in denen kleine erweiterungen vorgenommen werden müssen.

go for it
der inplaceeditor weist den inputfeldern keine id zu. diese werden aber gebraucht, um vom autocompleter angesprochen werden zu können.

Ajax.InPlaceEditor.prototype.createEditField = function() {
  [...]
  // mod: add id to the input field
  if(this.options.acOn) fld.id = this.element.id+'_input';

  this._form.appendChild(this._controls.editor);
};

natürlich sollte der autocompleter nur solange wie nötig existieren, daher wird er nach der erstellung des inputfeldes erzeugt ...

Ajax.InPlaceEditor.prototype.enterEditMode = function(e) {
  [...]
  // mod: store the autocompleter element (for destroying afterwards)
  if(this.options.acOn) this._acElement = new Ajax.Autocompleter(
    $(this.element.id+'_input'),
    this.options.acDiv,
    this.options.acPath+'?'+this.options.acParam+'='+this.element.id,
    this.options.acOptions
  );
};

... und nach dem editieren wieder gelöscht.

Ajax.InPlaceEditor.prototype.leaveEditMode = function() {
  // mod: destroy the autocompleter element
  if(this.options.acOn) delete this._acElement;
  [...]
};

erklärung
insgesamt sind 4 selbstdefinierte variablen aktiv, die alle über die optionen des inplaceeditors mitübergeben werden können (zur konfigurierung des autocompleters).

acOn: boolean - zum ein- und ausschalten des autocompleters
acDiv: string - der div-container für die liste des autocompleters
acPath: string - pfad zur datei, die die autocompleter-ergebnisse zurückliefert
acParam: string - zusätzliche parameter, die zur obigen datei mitübergeben werden

beispiel
code (html)

code (javascript)

zum abstellen des (meiner meinung nach) nervigen gelben highlight effekts fügt man diese zeilen hinzu:

Ajax.InPlaceEditor.DefaultOptions.highlightEndColor = 'transparent';
Ajax.InPlaceEditor.DefaultOptions.highlightColor = 'transparent';

falls es jemand geholfen hat, wäre ich über ein kommentar froh ;)

mfg mailo

ps: es wurde die version 1.8.1 von scriptaculous verwendet!

minesweeper

mailo — 2009-04-12T20:00:00Z

was macht man wenn der abgabetermin der diplomarbeitsrohfassung immer näher rückt und noch viel zu tun ist?

genau! - man setzt sich hin und programmiert minesweeper in javascript! :D

vorhaben

minesweeper in javascript programmieren
mit purem javascript (ohne irgendwelche libraries oder frameworks)

dauer

gui und basis logik => 3h
logik für die 0-felder* => 1,5h

anleitung

aufspüren der 10 minen auf dem 9x9 feld
ein feld gibt preis wie viel minen direkt im umfeld liegen
marker setzen bzw löschen mit strg+klick

ergebnis
minesweeper (html, 4 KB)

enjoy and have fun!

mfg mailo

* wenn auf ein 0-feld geklickt wird, sollen alle benachbarten 0-felder aufgedeckt werden

mach es richtig!

mailo — 2009-04-11T17:00:00Z

diesmal ein blogeintrag mit (vor)programmierten wortwitz.

immer/meistens/oft wird man dazu aufgefordert etwas richtig zu machen.
dazu habe ich ein kleines skript bzw einen einzeiler vorbereitet ;)

anforderungen

"es" (= s)
richtig (= true) machen

vorkehrungen

die variable s definieren (wertzuweisung egal)
beispiel: var s;

ergebnis

die variable s wird true (= richtig)
zwar doppelt so lang wie s=true; aber nicht so offensichtlich :)

der "mach es richtig"-einzeiler (in javascript)

s=!!!s?!s:!!s;

falls es jemand nicht verstanden hat - macht nichts, kein weltuntergang ;)

mfg mailo

ps: für die, die "es falsch" machen wollen

s=!!!s?!!s:!s;

javascript mal anders

mailo — 2009-03-22T11:30:00Z

da ich mich im diplomarbeitsschreibstress befinde, hier nur ein kurzer blogeintrag.

google's interne und externe entwickler und designer haben einige beispiele programmiert, was so alles mit javascript möglich ist.

beispiele zum selbstausprobiern und inklusive video: chromeexperiments
ich habe zwar erst einige angesehen, aber mein favourite ist bislang der browser ball.

was haltet ihr davon?

mfg mailo

ein ganz besonderer tag

mailo — 2009-02-09T19:30:00Z

ich freue mich schon auf den 14. februar 2009 - dieser tag ist ein toller tag!

wer glaubt, dass meine euphorie diesem tag gilt, weil (zufällig) "valentinstag" ist, der hat sich geschnitten - ich bin informatiker ;)

am 14. februar 2009 um 00:31:30 (MEZ=UTC+1) lautet der unix-timestamp:

1234567890

in php-code ausgedrückt:

echo strtotime("14.02.2009 00:31:30"); // 1234567890

bzw. anders herum:

echo date("d.m.Y H:i:s",1234567890); // 14.02.2009 00:31:30

auf wikipedia sind weitere besondere tage/werte aufgelistet.

was meint ihr dazu? - schon ein cooler tag, oder?

mfg mailo

UPDATE: countdown

ajax.request und ajax.updater

mailo — 2009-02-07T21:00:00Z

einer der vielen vorteile bei der verwendung von prototype ist die recht einfache verwendung von ajax requests. so braucht man sich überhaupt nicht um kümmern, ob nun eine instanz vom XHMHttpRequest() (firefox, opera, safari) oder vom ActiveXObject("Msxml2.XMLHTTP") bzw ActiveXObject("Microsoft.XMLHTTP") (internet explodierer) erzeugt werden muss.

da sich nun ajax.request und ajax.updater recht ähnlich sehen, kann man durch die "macht der gewohnheit" auch etwas übersehen. ich habe es also geschafft, dass etwas doppelt geladen wird und wusste zuerst nicht warum, obwohl die lösung doch ganz einfach ist/war ;)

hier mal die beiden, die das gleiche ergebnis liefern (farblich gekennzeichnet):

new Ajax.Request('file.html', {
  method:'post',
  evalScripts:true,
  onComplete:function(transport) {
    $('container').update(transport.responseText);
  }
});

new Ajax.Updater('container','file.html', {
method:'post',
evalScripts:true
});

wie zu sehen ist, erspart man sich durch den ajax.updater (= die spezielle form des ajax.requests) ein bisschen tipparbeit. vor allem zu empfehlen ist der updater, wenn die zu ladende datei ohne weitere verarbeitung gleich in einen container geladen werden soll, da dies automatisch geschieht.

aus gründen der interaktion ist es sinnvoll bei größeren ladezeiten den benutzer über den ladezustand zu informieren, dass es nicht den anschein hat, dass sich nichts tut. meist wird hier ein ladesymbol angezeigt (vgl sanduhr bei windows).

bei einem vorhanden ajax.request sieht dies möglicherweise so aus (vereinfacht dargestellt):

new Ajax.Request('file.html', {
  method:'post',
  evalScripts:true,
  onCreate:function() {
    $('container').update("");
  },
  onComplete:function(transport) {
    $('container').update(transport.responseText);
  }
});

hier wird beim erzeugen des requests (onCreate) das ladesymbol in den container geladen und wenn die datei fertig geladen wurde (onComplete) durch den eigentlichen content ersetzt.

da aber bereits ein ajax.updater vorhanden war und ich einfach nur die onCreate und onComplete funktion kopiert habe (i love copy&paste although sometimes it's evil), kam es zum doppelten laden:

new Ajax.Updater('container','file.html', {
  method:'post',
  evalScripts:true,
  onCreate:function() {
    $('container').update("");
  },
  onComplete:function(transport) {
    $('container').update(transport.responseText);
  }
});

glücklicherweise kam ich bei genauerem hinsehen gleich auf die lösung.

mfg mailo

javascript pro

mailo — 2009-02-04T19:00:00Z

im zuge einer diplomarbeit liest man sich in das themengebiet (bei mir u.a. javascript, prototype, script.aculo.us) recht gut ein. javascript ist eine skriptsprache, die sehr vielfältig ist.

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine moderne, schlanke, dynamisch typisierte, objektorientierte aber klassenlose Skriptsprache, die dennoch allen objektorientierten Programmierparadigmen unter anderem auch aber eben nicht ausschließlich auf der Basis von Prototypen gerecht wird. Obwohl im Grunde eine funktionale Skriptsprache, lässt sich in JavaScript sowohl prozedural als auch rein funktional bzw. objektorientiert programmieren.

[quelle: wikipedia]

dadurch ist sie für beginner nicht schlecht, da der programmierstil ziemlich flexibel ist. doch aufgrund der vielfältigkeit kann sie auch zur verwirrung führen. bislang habe ich immer gedacht, dass ich sehr viel bezüglich der programmierung von javascript weiß, doch wieder einmal wird der spruch "man lernt nie aus!" bestätigt.

wer sich nun vom novicen zum professional in sachen javascript weiterentwickeln will, dem empfehle ich folgende literatur:

» pro javascript techniques (john resig)
» pro javascript design patterns (ross harmes, dustin diaz)
» practical prototype and script.aculo.us (andrew dupont)

meiner meinung nach sind diese bücher sehr gut geschrieben (inkl. vieler code-beispiele) und ich habe sehr viel dazugelernt (besonders einige feinheiten, die beim erstellen eines frameworks essentiell sind).

mfg mailo

ps: für die hardcore-javascriptler die ecma-spezifikation ;)

NOTE: für alle die es noch nicht wissen: javascript == ecmascript

true or false

mailo — 2008-12-11T20:50:00Z

heute wäre fast das weltbild von einigen von uns (inklusive mir) zerbrochen ;)
beim bug fixing hat sich etwas interessantes herausgestellt:

(0=='string') ergibt true

viele (auch ich) dachten aber, dass das ergebnis dieses vergleichs false ist.

meine logik:
-> 0 wird als false behandelt
-> 'string' ist kein leerstring und daher true
-> daraus ergibt sich: (false==true) ist false

diese logik stimmt auch:

var_dump((bool)0); // bool(false)
var_dump((bool)'string'); // bool(true)

sonderfall: beim vergleich von einem string mit einem integer wird der string zuerst in einen integer umgewandelt und dann erst verglichen [string in a numeric context]:

var_dump((bool)((int)'string')); // bool(false)

somit ergibt sich:

var_dump((bool)0); // bool(false)
var_dump((bool)((int)'string')); // bool(false)

und (false==false) ist true.

anmerkung: wenn ein string in einen integer konvertiert wird, ist dieser immer 0 außer er beginnt mit einer zahl.

var_dump((int)'string'); // int(0)
var_dump((int)'9string'); // int(9)

FYI
-> typenvergleich: [php.net] bzw [blueshoes.org]
-> casting: boolean | string | integer

mfg mailo

mein geekend

mailo — 2008-11-01T15:20:00Z

das ist KEIN tippfehler!

es ist eine kombination von geek und weekend. da ich dieses wochenende wieder recht geekig verbringe, habe ich mir gedacht, dass es passend ist. meine freunde wissen, dass ich ein computer freak und in dieser hinsicht entsprechend abgedreht bin ;)

woran erkennt man das an mir?
hier ist ein kleiner vereinfachter ausschnitt wie ich denke bzw programmiert bin (javascript-syntax):

dieser code kann natürlich noch kürzer gehalten werden, nur dann wird er schwer leserlich (aber so denke ich) :D

aber solange ich mich nicht als klasse darstelle/ausprogrammiere, ist alles noch okay - vielleicht verstehen mich die meisten nicht, da sie keine programmierer sind ;)

so - genug vom unsinn!
eigentlich wollte ich nur darauf hinaus, dass ich gestern (an einem freitag!) nach der arbeit irgendwie das bedürfnis verspürte five stones in javascript zu programmieren ;)

nach obigem schema war ich zu krank, um fort zu gehen und zu gesund, um im bett zu liegen. da auch die einträge coding, programming und computer stuff recht ähnlich sind, war die wahrscheinlichkeit größer, dass eines davon zutrifft.

nach ca 2,5 stunden hatte ich ein lauffähiges programm und konnte sowohl gegen mich als auch gegen den selbstprogrammierten bot spielen. natürlich war ich ihm intelligenzmäßig überlegen, da ja ICH IHN programmiert habe - und nicht umgekehrt ;)

er setzt eben nur zufällig seine steine, aber wenn man sich "anstrengt", kann man ihn auch gewinnen lassen. geplant ist, dass ich meinem bot eine höhere intelligenz verpasse.

weiters habe ich nun meinen clean-up durchgeführt und ein generelles layout zusammengebastelt, wo man im browser zwischen den voreingestellten farben mittels stylesheets wechseln kann.

mfg mailo

thecoda/thecrypta

mailo — 2008-09-21T13:00:00Z

am freitag nachmittag fing es mit ein bisschen kopfweh an. doch wer hat schon zeit krank zu werden? - ich doch nicht! ;)

also sagte ich sowohl dem fußball spielen als auch dem "friday nightlife" ab und ging zeitig ins bett. am späten vormittag des samstags mehr oder weniger fit aufgestanden, wollte ich mich noch schonen und da es draußen kalt war, entschied ich mich für indoor activities.

doch was kann man in der wohnung schon treiben? als eingeschweißter informatiker und programmierer fiel ich wieder in mein altes verhaltensmuster und saß vor dem laptop.

ergebnis: thecoda/thecrypta

frage: wtf ist ein thecoda/thecrypta?

antwort: eine einfache webapplikation mit der verschiedenes kodiert/dekodiert und ver-/entschlüsselt werden kann.

daher auch die wortspielerei bei der namensgebung: "the coda" ("der kodierer" bzw "dekoder", was beide funktionen beinhaltet) und das gleiche schema bei "the crypta" ;)

eigentlich ist es eine einfache php-seite, die die nativen funktionen von php verwendet, ein bisschen mit javascript für mouseover/mouseout-events gepimpt und natürlich mit css gestylt ist.

die motivation war einmal eine solche applikation zu schreiben. weiters habe ich irgendwie ein faible für verschleierungen bzw verschiedene repräsentationsarten und wie diese genutzt werden können.

um nun das big picture der applikation zu sehen, habe ich eines angefertigt: [big picture]
btw: so groß ist es nicht, ursprünglich 1380 x 1380 pixel, nur hat es flickr auf 1024 x 1024 pixel skaliert - kA warum.

ein bisschen muss ich noch daran feilen (input validation, error handling), aber sonst finde ich es eigentlich recht gelungen (ja, mein innerer kritiker ist auch mal gut aufgelegt ;)

mfg mailo

ps: ich bin noch gesund und habe nicht vor diesen zustand zu ändern ;)

hiding your code

mailo — 2008-09-16T21:10:00Z

wenn es um webanwendungen oder auch nur um einzelne html-seiten geht, gibt es oft neugierige leute (mich eingeschlossen), die wissen wollen wie der quelltext dazu aussieht. das ist weiters nicht schlimm, genügt es doch nur eines rechtsklicks und "seitenquelltext anzeigen" (benennung browserabhängig). wirklich verstecken kann man den code nicht, doch komprimieren und sehr schwer leserlich machen schon ;)

ich habe das spiel all lights out mit javascript nachgebildet und mich ein bisschen mit dem quellcode gespielt. das spiel funktioniert und müsste auf jedem javascript-fähigen browser* laufen. wer will, kann sich natürlich den quellcode dazu ansehen (ist in der datei einzeilig).

für alle, die es nicht erwarten können, gibt es hier einen screenshot davon.

zum spielen auf folgenden link klicken, zum downloaden "ziel speichern unter" (oder so etwas ähnliches): all_lights_out_javascript_edition (html, 5 KB)

viel spaß damit ;)

mfg mailo

* getestet auf: firefox 2 & 3, safari 3.12, google chrome, ie7 und opera 9.5 - davon nicht lauffähig auf ie7 und opera 9.5 (vermutlich css-probleme - werden gefixed wenn ich zeit und lust habe ;)

ps: falls jemand weiß, wie der css-block verschleiert werden kann oder auch weitere verschleierungstechniken kennt - ich bin ganz ohr ;)

pps: mit tiny-url kann man sehr lange links verkürzen und somit verschleiern (und eventuell für xss oder ähnliches nutzen ;)

php, javascript und boolean

mailo — 2008-09-09T19:00:00Z

im berufspraktikum habe ich das framework der firma um 2 template engine plugins erweitert, die ich übermorgen im dev-meeting präsentieren werde. die verwendeten scriptsprachen sind php und javascript (genauer: die ajax-libraries prototype und scriptaculous) und die template engine dazu ist smarty. die umsetzung ist natürlich nicht ganz reibungslos abgelaufen - wo wäre da denn der lerneffekt? ;)

zuerst dachte ich mir, mein laptop ist einfach nur stur, doch ich weiß ja, dass das problem meist davor sitzt ;)

als php-programmierer bin ich gewohnt boolsche variablen statt durch

if($bool==true) {
// some code
} else {
// another code
}

mit der kürzeren schreibweise

if($bool) {
// some code
} else {
// another code
}

zu überprüfen.

naja, wenn ich ehrlich bin, tendiere ich eigentlich mehr zu

($bool?/* some code */:/* another code */);

in javascript ist das nicht anders - außer eben, dass die $-zeichen bei den variablen fehlen. soviel zur syntax. bei den rückgabewerten gibt es jedoch einen unterschied.

php-code

$a = true;
$b = false;

// in php wird true als 1 ausgegeben und false gar nicht
echo $a; // 1
echo $b; //

javascript-code

var a = true;
var b = false;

// in javascript hingegen wird entsprechend true oder false ausgegeben
document.write(a); // true
document.write(b); // false

ein boolscher wert kann in javascript auch mittels new Boolean() gesetzt werden [beispiele].

hierbei ist aber zu beachten, dass die variable dann kein boolean sondern ein object ist.

javascript-code

var c = new Boolean(true);
var d = new Boolean(false);

document.write(typeof a); // boolean
document.write(typeof b); // boolean
document.write(typeof c); // object
document.write(typeof d); // object

wenn jetzt die variable mit new Boolean() gesetzt wurde, liefert die gekürzte schreibweise ein anderes ergebnis als bei der direkten initialisierung mit true oder false. bei boolean wird auf true oder false geprüft - bei object, ob es null bzw leer ist oder nicht.

javascript-code

(a?document.write('true'):document.write('!true')); // true
(b?document.write('true'):document.write('!true')); // !true
(c?document.write('true'):document.write('!true')); // true
(d?document.write('true'):document.write('!true')); // true

(a==true?document.write('true'):document.write('!true')); // true
(b==true?document.write('true'):document.write('!true')); // !true
(c==true?document.write('true'):document.write('!true')); // true
(d==true?document.write('true'):document.write('!true')); // !true

durch die template engine ist es mir nicht gelungen einen boolschen wert zu übergeben. dadurch versuchte ich die variable mittels new Boolean("false") zu befüllen. deshalb kam auch true heraus, wo ich eigentlich ein false erwartet habe (siehe variable d). sogesehen war es ja richtig, da die variable einen wert hatte und nicht null oder leer war.

es sind eben solche kleinen feinheiten, die den unterschied zwischen den verschiedenen scriptsprachen machen und auch den aufenthalt vor dem computer verlängern ;)

mfg mailo

neues design

mailo — 2008-09-06T20:30:00Z

vor über 500 tagen habe ich aus reiner langeweile diesen blog begonnen. es ist also höchste zeit endlich mal das design zu wechseln (das alte finde ich eh schon recht langweilig).

gesagt - getan!

ich habe mich jetzt den nachmittag hingesetzt und das neue design umgesetzt (entworfen hatte ich es ja schon). wenn es jemand nicht gefällt oder er/sie irgendetwas auszusetzen hat, dann soll er/sie doch eine mail schreiben! ;)

wem es gefällt oder wem es egal ist, darf ein kommentar hinterlassen ;)

mfg mailo

"versteckten" fehler gefunden

mailo — 2008-05-14T09:15:00Z

ich bin immer wieder froh und glücklich, wenn ich einen "wie-soll-man-bitte-auf-das-kommen-außer-per-zufall"-fehler gefunden und beseitigt habe - wie auch in diesem fall:

im anwendungsprojekt inkludiere ich gerade den phpmailer in ein drupal-cms, um mails verschicken zu können ohne einen smtp-server zu installieren. nun habe ich es schon so weit geschafft, dass die mail rausgeht, nur kam ich dann auf eine leere seite anstatt redirected zu werden. im log wurde folgende meldung eingetragen:

Cannot modify header information - headers already sent by (output started at [pfad]\includes\phpmailer.inc:28) in [pfad]\includes\common.inc in Zeile 314.

da ich einen editor verwendet habe, der keine zeilennummern anzeigt, fiel es mir nicht auf, dass diese datei aus nur 27 zeilen code bestand. als ich die zeilen zählte und auf 28 kam, war mir alles klar.

die funktion header() wird zum senden von http-headerinfos im rohformat benutzt. da diese infos im header sind, müssen sie vor jeglichen output stehen - nicht einmal ein leerzeichen, eine leerzeile, ein zeilenumbruch noch sonstiges in dieser art darf vor dem aufruf sein. der fehler trat auf, da die phpmailer.inc mittels include() eingelesen wurde und sich ganz zum schluss ein zeilenumbruch nach dem ?> eingeschummelt hatte.

zeilennummern sei dank ;)

mfg mailo

ps: hilfreiche quellen: quelle 1, quelle 2 und quelle 3

anmerkung: lasst euch nicht von den linknamen verwirren ;)

secure (web)applications?

mailo — 2008-05-03T17:00:00Z

in der heutigen zeit sprießen programme und webapplikationen wie pilze aus dem boden. sobald die applikation irgendwie funktioniert, wird sie releast - im zeitalter von web 2.0 gibt es die tollen logos mit einem kleinen "beta" dran.

nun ja - es wird uns auch meist so vorgelebt (zb verwendet microsoft seine user ja auch als beta-tester). die heutige zeit ist in diesem bereich so schnell-lebig, dass viele meinen, dass man es sich nicht mehr leisten kann die applikation zb ausreichend zu testen - oder von der anderen sichtweise: wenn die applikation wirklich fertig wäre, dann ist sie schon wieder veraltet.

ich weiß nicht, ob es allgemein so ist, aber in meinem fall trifft es zu: ich habe nie gelernt SICHER zu programmieren! ich habe zwar gelernt zu programmieren, aber der security-aspekt war meiner meinung nach nicht wirklich vorhanden. mein ganzes (noch kleines) security know-how habe ich mir selbst erlernen müssen.

warum schreibe ich nun diesen blogeintrag?
ich bin sehr froh, dass ich nun endlich mein fh-projekt (j2ee, jsp) zum laufen gebracht habe. es ist ein simples programm. man ruft es im browser auf und gibt in das eingabefeld die matrikelnummer ein (und drückt enter oder klickt auf den button). danach wird in der datenbank gesucht und, wenn ein eintrag gefunden wird, dieser angezeigt (also matrikelnummer, name und nickname). falls kein entsprechender eintrag gefunden wird, sieht man die meldung "no student found for [matrikelnummer]".

mein erster gedanke war gleich: "was wäre, wenn ich jemanden suche, der mit mir zu mc donalds geht?" natürlich habe ich sofort statt einer matrikelnummer going to mc donalds eingegeben - leider wurde keiner gefunden ;)

der nächste gedanke war: "OJE! XSS ALARM!" und die eingabe von bestätigte dies!

hmm ... da im hintergrund eine datenbank ist und derzeit noch die eingabe direkt in die sql-query kommt, könnte auch eine sql injection erfolgreich sein - sie war es ;)

und die moral von dieser geschichte?
alle benutzereingaben sind BÖSE (bzw sollten als solches angesehen werden)!
ich habe 6 zeilen an code hinzugefügt, um die benutzereingabe zu überprüfen und somit die xss-attacke und sql-injection zu verhindern bzw erfolgreich abzufangen.

wer nun diesen minimalen aufwand bezüglich security weglassen will, der soll es von mir aus auch tun - it's your choice!
security muss nicht unbedingt komplex sein - keep it simple!

mfg mailo