Categories
Retro Software

Streifzug durch die Computergeschichte

Schon einmal gewundert, wieso der Textmodus typischerweise 80 Zeichen pro Zeile hat? Oder wie es dazu kam, daß in VI die Cursorsteuerung auf den Tasten H, J, K und L liegt?

Doug Crockford erklärt in der ersten Folge seiner Vortragsreihe zu JavaScript ein wenig die Geschichte der Computer und wie sich manche Anachronismen bis heute halten konnten.

Ein aufschlußreicher Blick in die Vergangenheit.

Categories
Internet Programmierung

Zebra-Tables zum dritten

Zebra-Tabellen scheinen sowas wie ein Steckenpferd von mir zu sein. (s. hier und hier) CSS3 ist leider immer noch nicht weiter vorangekommen. Aber dafür habe ich in der Zwischenzeit Prototype für mich entdeckt. Prototype ist ein Framework für Javascript, was die Programmierung von Anwendungen in Javascript erheblich vereinfacht. Ich hatte ja schon mal hier angedeutet, daß sich mit ein wenig Javascript eine Zebra-Tabelle dynamisch — ohne extra Markup — erzeugen läßt. Das ganze endete mit ca. 20 Zeilen Javascript Code. Das gleiche mit Prototype sind weniger als 10 Zeilen. (und auch nur so lang, weil ich es lesbar machen wollte)

var ZebraTable = {
  load: function() {
    $$('table.zebra tbody > tr:nth-child(2n+1)').each(function(elt) {
      elt.addClassName('rowodd');
    })
  }
}

Event.observe(window, 'load', ZebraTable.load);

Ja, das ist alles. Wer sich den Code ein wenig genauer anschaut, wird dort einen CSS3-Seketor finden. Dieser Selektor ist jedoch komplett in Javascript innerhalb von Prototype implementiert und somit Browserunabhängig. Der Browser muß also kein CSS3 beherrschen.

Wer den Code ausprobieren möchte, muß einfach nur Prototype und den Code oben in sein HTML-Dokument einbinden. Und schon werden alle ungeraden Zeilen, die sich im Tabellenrumpf (<tbody>) einer jeder Tabelle mit der Klasse zebra befinden, mit der Klasse rowodd versehen. Nun ist es nur noch eine Sache von einfachstem CSS, diese Klasse mit einer anderen Hintergrundfarbe auszustatten.

Categories
Internet

Zebra-Tables mal wieder

Vor einiger Zeit hatte ich mal über einige Features von CSS3 geschrieben, und wie sie mir (und hoffentlich auch anderen Menschen) das Leben vereinfachen werden. Besonders die sogenannten Zebra-Tabellen sind immer ein beliebtes Thema. Eine Möglichkeit habe ich damals gar nicht in Betracht gezogen: JavaScript. Zu dem Zeitpunkt kannte ich JavaScript noch aus seiner 1.0er Inkarnation und war der Meinung, daß es nicht zu mehr als zu lästigen Pop-ups gut ist. Doch mit dem letzten AJAX-Hype habe ich mir JavaScript nochmal angeschaut und dabei festgestellt, daß es deutlich Mächtiger ist, als ich angenommen habe. JavaScript erlaubt es, sich im DOM-Tree eines HTML/XML-Dokuments zu bewegen und die Knoten dynamisch zu verändern.

Folgendes JavaScript wird alle Tabellenzeilen in einem Dokument mit even/odd-Klassen versehen (vorausgesetzt, die Tabelle trägt die Klasse zebra und die Zeilen befinden sich in einem <tbody>.

function doZebra() {
	var tables = document.getElementsByTagName("table");
	for (var x = 0; x < tables.length; x++) {
		var table = tables[x];
		if (table.className != "zebra") continue;
		var tbodies = table.getElementsByTagName("tbody");
		for (var y = 0; y < tbodies.length; y++) {
			var tbody = tbodies[y];
			var even = false;
			var trs = tbody.getElementsByTagName("tr");
			for (var z = 0; z < trs.length; z++) {
				tr = trs[z];
				tr.className += (even ? " even" : " odd");
				even = !even;
			}
		}
	}
}

window.onload = doZebra;

Das war’s schon. Ich werde mir JavaScript in nächster Zeit genauer anschauen. Und vor allem die Kommunikation über XML mit dem Server, wie sie bei AJAX benutzt wird.

Categories
Internet

Stylesheetumschalter für alle

Jetzt habe ich doch meine Faulheit überwunden, und eine Stylesheet-Auswahl für alle Browser eingebaut. Dank des Stylesheet switchers auf A List Apart war das schnell erledigt. Jetzt können auch die armen Schweine, die noch den Internet Explorer benutzen, die alternativen Stylesheets in meinem Blog auswählen. Damit der ausgewählte Stylesheet auch für alle Unterseiten benutzt und beim nächsten Besuch auch benutzt wird, müssen Cookies und Javascript aktiviert sein. Javascript-Phobiker und Cookie-Nazis müssen sich mit dem Default-Style begnügen.

Übrigens findet sich die Stylesheetauswahl in der Seitenleiste direkt unter den Kategorien.