Thomas Horster » coding

WordPress 3.0 steht zum Download bereit

Tom — Thu, 17 Jun 2010 18:00:54 +0000

JavaScript Miniframework

Tom — Fri, 04 Jun 2010 19:39:11 +0000

//implement missing function
document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
return retnode;
};

//framework functions
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ';'+style;}
function $$(class){ return document.getElementsByClassName(class); }

You can find a testrun here: http://jsfiddle.net/ZjsYB/

Based on a Thomas Fuchs article found here.

Keine verwandten Einträge.

Facebook secrets – what you where afraid to ask

Tom — Thu, 13 May 2010 22:55:31 +0000

[Source: Online PhD Programs for Mashable.com]

Habe ich Schweinegrippe?

Bilder aus StudiVZ- und MeinVZ-Alben herunterladen

Tom — Thu, 13 May 2010 15:42:40 +0000

Geht ganz einfach: JavaScript ausschalten und dann Bild über das Kontextmenü (Rechtsklick) speichern. Achtung: Nicht erst die Grafik alleine anzeigen und dann speichern, dann greift der Server ein und man hat nur ein Bild, auf dem StudiVZ “böse, böse” sagt…
Nicht sonderlich kreativ gesichert von den Leuten, aber genug Hindernis für viele Nutzer wie mir scheint…

Kleiner Test:

Keine verwandten Einträge.

Der beste PNG-Fix für den IE6

Tom — Tue, 06 Apr 2010 20:46:53 +0000

Für den Internet Explorer 6 kursieren einige PNG-Fixes. Angefangen bei Filtern in der CSS-Datei bis hin zu ausgeklügelteren Methoden. Besonders überzeugt hat mich der dd_belated PNG-Fix, der auch sich wiederholende Hintergründe erlaubt, was bei den anderen nicht möglich ist.

Außerdem lässt er sich einfach auch in eigenen Scripten zusätzlich verwenden, wenn Inhalte versteckt und dann angezeigt werden sollen. Der Vorteil bei dd_belated liegt an der Benutzung von VML anstatt des üblichen Alphafilters, was bessere Resultate ermöglicht. Was bleibt, ist natürlich eine kurze Verzögerung bis zum Ausführen des Scriptes und der damit kurz sichtbaren falsch angezeigten PNGs.

Recht häufig trat bei der Verwendung des Fixes ein Problem mit der Positionierung des Elementes selber im Elternelement auf. Ein einfaches “position:relative” für das umgebende Elternelement reichte dann aber meist aus.

Über 20 Tipps zum Internet Explorer 6 – Meinem besten Freund

Tom — Fri, 12 Mar 2010 20:46:20 +0000

Mach es gut, mein Alter Freund

Nachdem sich google nun bei youtube und facebook selbst langsam vom Internet Explorer 6 verschabschieden und allgemein schon zur Beerdigung des Internet Explorer 6 aufgerufen wird, wollte ich mal kurz ein paar sinnvolle Links hier verbreiten, die sich im Laufe der Zeit bei mir angesammelt haben (Lebt er noch?):

HTML5 tags auch mit dem IE6
Fake CSS3 mit dem IE6
Image replacement mit text-indent auch bei Buttons
Cheat sheet und Übersicht der unterstützten CSS-Elemente aller IEs
25 Tipps für das IE6 Bugfixing
Warum ist der IE6 doof? Anti-IE6-Seiten
Machen wir doch nen besseren Browser daraus: google chrome fram e
fixed width in Internet Explorer 6
Du kommst hier nicht rein
Wie soll ichs richtig angehen? Ein kleiner Denkanstoß für IE6 Verweigerer
CSS – Was der IE6 nicht kann und man ihm nur mit Tricks beibringt
Universelle CSS nur für den IE6
Tipps zum JavaScript-Debugging im IE6
Update Hinweis für die eigene Seite, ebenso hier
das Alles (und noch viel mehr) können wir machen, wenn der IE6 tot ist
ie6fixer – Hilfe bei der Erstellung von Stylesheets
Grundsätzliche CSS-Probleme des IE6 beheben, ebenso hier
Laufzeitbeschränkte Virtual PC Images mit den diversen Internetexplorern
der beste PNG-Fix für Transparenzen in pngs (meiner Meinung nach)
Wie verhindere ich zusätzliche requests im IE6 bei mehrfach verwendeten Bildern?
den IE6 zum IE7 oder IE8 machen (na ja, in etwa …)

Ja, mein alter Freund, was werden wir ohne Dich machen, wenn wir Dich nicht mehr zum ultimativen Feind ernennen können? Das wird ganz schön langweilig werden…

Keine Herausforderung mehr, alles wird totaler Standard, keine Bugs mehr zu beheben, die uns den Verstand kosten. Frontend- und Backendleuten wird dann der Konsens fehlen, kein Hass auf Dich mehr, der sie zusammenschweißt…

Ich glaube, ich werde mich dann wieder mehr mit dem Wetter auseinandersetzen müssen. Ganz schön kalt draußen, oder?

shttp://www.onderhond.com/blog/work/ie6-core-bug-fixing

Online-Editor für JavaScript, HTML und CSS

Tom — Sat, 27 Feb 2010 12:53:16 +0000

Einen schnellen und flexiblen Online-Editor für kleinere HTML und JavaScript Experimente findet man unter http://jsfiddle.net/. Es ist erstaunlich, was mit diesem kleinen Editor jetzt schon möglich ist. So kann man unter anderem Mootools, jQuery oder Prototype als gewünschtes Framework bestimmen, den Doctype auswählen oder sogar externe CSS-Dateien einbinden.

JSfiddle zeigt dabei immer nur das notwendigste, beispielsweise bei der HTML-Datei nur den Inhalt des body-tags ohne den Rest des Dokumentes. Damit ist es ein leichtes, mal eben einen kleinen Testlauf eines JavaScript Schnippsels zu starten oder den Einfluss auf die Elemente zu testen. Hier mal ein simples Beispiel mit Prototype und Scriptaculous.

Wie man inline styles in CSS überschreiben kann

Tom — Sun, 10 May 2009 10:33:52 +0000

Wenn man inline Styles überschreiben, macht man das mit !important, will man aber nur inline gestylte Tags in CSS im Webdesign überschreiben, gibt es keine andere Möglichkeit, als diese styles direkt anzupassen? Falsch!
Eine weitere Möglichkeit ist mit Hilfe des [style] Keywords innerhalb eines Scriptblockes oder einer externen CSS nur diese Tags mit inline Styles anzusprechen.

Ein Beispiel :


Hello World - wird gestyled


Hello World - wird nicht gestyled

.showMe span[style]{font-weight: normal !important;color: #0000ff !important;}

Wie das immer so ist und wie man sich wahrscheinlich aufgrund des [style] im Selektor denken konnte, funktioniert dies nicht im IE6, aber im IE7 & IE8 sowie allen modernen Browsern.
Natürlich bleibt die Frage, wann man so etwas sinnvoll anwenden kann, da man inline styles generell vermeiden
sollte, aber es kann mit Sicherheit nicht schaden, so etwas zu wissen.

Seeing is believing, daher gibt es hier ein kleines Showcase.

[gefunden bei SOTAHNAKA]

Stylen von input=”file” Formularfeldern im Webdesign

Tom — Wed, 06 May 2009 18:18:54 +0000

Heute habe ich mich mal kurz ärgern müssen, da ich nach einer Möglichkeit gesucht habe, diese netten upload Formularfelder mit CSS zu stylen. Ich wusste schon vorher, dass das nicht ohne Probleme geht, aber ich hatte es zuvor nicht benötigt.

Für diejenigen, die nicht wissen, was ich meine:

Nachdem ich selber über einer Möglichkeit gegrübelt habe, das mit ein wenig Prototype gewürzt hinzubekommen, habe ich bei anderen Webdesignern/Frontend-Entwicklern dies hier gefunden. An und für sich nicht besonders überragend, aber durchaus zweckmäßig.

Kurze Zeit später fand ich dann eine fast identische Lösung mit Prototype, musste also nicht selber noch einmal ran. Wer sich die Lösungen anschaut, wird feststellen, dass im Grunde nur ein Button über das Feld gelegt, das Feld an sich per Opacity versteckt und dann die Position der Maus auf dem Button mit dem darunter liegenden Feld gematcht wird.

Klingt kompliziert? Ist es aber nicht.

Top 10 search engine optimizations (SEO) links for beginners

Tom — Sun, 26 Apr 2009 12:38:51 +0000

What is search engine optimization?

Wikipedia describes it as

the process of improving the volume or quality of traffic to a web site from search engines via “natural” (“organic” or “algorithmic”) search results.

I’d like to demistify the “seo” term a bit, so I came up with a list of links to help you understand what search engine optimization really is and what you or your webdesigner can do about it.

Rumour has it, that you’ll have to register your site with the search engines, which is not true. At least if we are not talking about submitting your sitemap.xml.

So, here’s the list:

seomoz (search engine optimization blog)
seo cheat sheet (small pdf with short seo tips)
seobrowser (see your site like a search engine would do)
collected seo tipps (from gabriel weinberg)
how google really wants you to optimize your site (interview with a google evangelist)
use google analytics, here’s the missing manual (missing manual for google analytics)
use 404 pages for alternative content (google widget for 404 sites)
search engine optimization starter guide (from google)
tipps on content from a google engineer (interview with Matt Cutts)
see how others do it (collection of over 13 tools for website analysis on noupe.com)

What else can I do?

Some webdesigners start doing it the wrong way. They build their HTML, do some CSS styling and then put search engine optimization at the end.

Do it the other way round, build your HTML based on a good structure with hierarchical headlines, incorporate some of the search engine tips mentioned in the articles and create a valid document.

What can I do, if my site already exists?

Use common sense: Turn of the stylesheets of your site with webdeveloper toolbar or use seobrowser and see if it looks like a hierarchically formatted document to you.

If not, change.

All else that matters is very good and unique content, content, content with the right keywords.