Archive for the ‘Tipps’ Category

WWW Rewrite Rule

Freitag, August 5th, 2011

Ich bin kein Fan von der Subdomain “WWW” und sie ist komplett überflüssig. Mit einem ModRewrite Rule kann man die www Subdomain umgehen in dem alles was auf www.domain.tld/inhalt-der-seite kommt direkt mit 301 auf domain.tld/inhalt-der-seite umleitet wird.

<VirtualHost 127.0.0.1:80>

ServerName domain.tld

<Directory “/var/www/domain/”>
AllowOverride All
Order allow,deny
Allow from all
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

</Directory>
</VirtualHost>



Firefox Javascript Error Console

Dienstag, Juli 19th, 2011

Seit der Firefox 4 Version, haben sich die Entwickler entschieden die JavaScript Fehler nicht zu zeigen. So hab ich mich gewundert, dass ich voll den sauberen JasvaScript Code schreibe und bei Fehlern keine Error Meldungen in der Console oder dem Firebug sehen kann. Um die Fehler wieder zu sehen, muss man kleinen Eingriff in die Firefox Config machen:

  1. In der Adressleiste about:config eingeben und aufrufen.
  2. Natürlich wird man Vorsichtig sein und es dem Firefox versprechen.
  3. Nach errorconsole filtern.
  4. Mit einem Doppelklick auf den Registry Wert devtools.errorconsole.enabled, kann man ihn auf true setzen.
  5. Alle Firefox Fenster schließen und neu starten.

Jetzt bekommt man wie gewohnt alle JavaScript Fehlermeldungen zu sehen.



Kostenloser SSL Zertifikat für den Courier, Postfix und Apache

Montag, Juli 18th, 2011

Als ich vor halben Jahr meinen Server aufgesetzt habe, benutzte ich für Courier Imap Server den Standard Zertifikat der automatisch mit erstellt wird. Für den Postfix hab ich mir ein Zertifikat bei CACert erstellt. Doch leider hat mit diesen Zertifikaten Outlook Mail Client Probleme gehabt, da er ständig die Bestätigung brauchte. Vor kurzem bin ich über den Artikel SSL für lau gestolpert und musste natürlich die Lösung ausprobieren. Da ich leider kein Server Admin bin, kamen schon die Probleme, wie richte ich den Courier Imap mit dem Zertifikat ein.

Nach kurzer suche und schlechten Anleitungen fand ich eine sehr ausführliche Anleitung wie man Postfix und Courier mit den StartSSL Zertifikat konfiguriert. Sie hat mir geholfen erfolgreich meinen Server mit den Kostenlosem Zertifikat von StartSSL zu konfigurieren und dadurch habe ich jetzt Zertifikate für meine Domains die ohne Bestätigung von Outlook und den Browsern akzeptiert werden.



Elastische Textareas mit jQuery

Freitag, März 11th, 2011

Ich wollte dynamische Textarea haben wie sie in Facebook gibt. So habe ich im Netz nach Lösungen gesucht und bin über mehrere Lösungen/Plugins gestolpert wie hier, hier oder hier, es gibt noch mehr.

Alle diese Lösungen waren mir zu Groß und zu Komplex. Ich möchte nicht noch ein jQuery im jQuery haben, sondern Kurz und Schmerzlos. Dazu waren ein paar Ansätze nicht so Flexibel, da sie die Größe des Textarea an den Umbrüchen des Inhalts bestimmen und das muss wiederum mit ein paar Wrapper CSS Methoden gefixt werden, was wiederum viel eingriff in den Quelltext des Projekts bedeutet.

Die ganzen Unzufriedenheiten haben mich dazu veranlasst selber zu experimentieren. Und nach kurzer Zeit fand ich eine EinfachGenialeLösung so wie eine Axt, sie hat nur ein Beil und Keil das wars!

Mein Ansatz braucht etwas CSS und nur maximal 400Bytes kleinen jQuery Plugin.

textarea.input {
    	width:500px; 
    	line-height:16px; 
    	height:16px; 
}
<textarea class="input" name="name">Dynamischer Inhalt</textarea>
jQuery.fn.elasticArea = function() {
  return this.each(function(){
    function resizeTextarea() {
      this.style.height = this.scrollHeight/2 + 'px';
      this.style.height = this.scrollHeight + 'px';
    }
    $(this).keypress(resizeTextarea)
    .keydown(resizeTextarea)
    .keyup(resizeTextarea)
    .css('overflow','hidden');
    resizeTextarea.call(this);
  });
};
 
$('textarea.input').elasticArea();

Dieser Ansatz funktioniert mit der Eigenschaft scrollHeight. Sie ist sehr Präzise und gibt genau die maximale Höhe der Textarea mit Inhalt. So nehme ich sie, Teile durch die Hälfte und setze sie der Textarea als Höhe ein. Danach wird sie wieder als Textarea Höhe gesetzt. Das macht die Textarea dynamisch in beide Richtungen wenn neuer Text eingefügt oder gelöscht wird und es passiert so schnell, dass man nichts davon mitkriegt.

Das ganze ist Dynamisch und wurde miniklein gehalten. So kann jeder selbst den Code nach seinen Wünschen erweitern falls er noch maximale Höhe haben möchte, die Höhe per Parameter übergeben ohne die CSS an zufassen oder sonstige Schnickschnacks.

Getestet hab ich in gängigen Browsern. Kann sein das irgend wo noch was hängt, aber alle von mir getesteten neue Browser haben es ohne Probleme geschluckt.

Eingesetzt können diese Elastischen Textareas als Input Felder. Weil ohne Inhalt sind sie so groß wie Inputs und können dynamisch mit dem Inhalt wachsen.

Hier ist noch eine Live Demo.

Das wars und mehr brauche ich nicht.



CKEditor onChange Event

Donnerstag, März 10th, 2011

Vor ein paar Wochen habe ich lange nach einer Lösung gesucht und aufgegeben, weil auch die CKEditor Event Seite war mir nicht genug. Heute hab ich es nochmal probiert und fand hier die Lösung:

var ckeditorInstance = CKEDITOR.replace("mytextarea");
 
ckeditorInstance.on("instanceReady", function()
{
	this.document.on("keyup", CKCHANGED);
	this.document.on("paste", CKCHANGED);
}
);
function CKCHANGED() { 
	formchanged = 1;
}

Gebraucht wird die Lösung um zu erkennen ob der User den Inhalt im CKEditor Textarea geändert hat und ihn beim verlassen der Seite zu warnen, dass er sein Code verändert hat ohne gespeichert zu haben. (Ich benutze es mit jQuery)

 
var formchanged = 0;
var submitted = 0;
 
$(document).ready(function() {
	$('form').each(function(i,n){
		$('input', n).change(function(){formchanged = 1});
		$('textarea', n).change(function(){formchanged = 1});
		$('select', n).change(function(){formchanged = 1}); 
		$(n).submit(function(){submitted=1});
	});
});
 
window.onbeforeunload = confirmExit;
function confirmExit()
{
	if(formchanged == 1 && submitted == 0)
		return "Sie verlassen die Seite ohne gespeichern zu haben.";
	else 
		return;
}