toscho.design» Trickkiste

Apache: Fehlerseiten testen

Thomas Scholz — Mon, 20 Dec 2010 08:00:59 +0000

Mit der Direktive ErrorDocument können wir dem Apachen sagen, welche Datei oder Nachricht er bei welchem Statuscode ausgeben soll.

ErrorDocument 403 /403.php
ErrorDocument 401 /401.php
ErrorDocument 410 "Wech! Pech!
"

Aber wie testen wir die? Den Status 404 können wir einfach durch eine falsche Adresse auslösen; 401 kommt aber erst, wenn wir an einer Authentifizierung gescheitert sind. Ganz bestimmt wollen wir nicht für jeden Fehler einen separaten Test bauen, das dauert viel zu lange.

Die Antwort: mit mod_rewrite.

RewriteCond %{QUERY_STRING} ^status=401$
RewriteRule ^ - [L,R=401]
RewriteCond %{QUERY_STRING} ^status=403$
RewriteRule ^ - [L,R=403]
RewriteCond %{QUERY_STRING} ^status=404$
RewriteRule ^ - [L,R=404]
RewriteCond %{QUERY_STRING} ^status=410$
RewriteRule ^ - [L,R=410]
RewriteCond %{QUERY_STRING} ^status=500$
RewriteRule ^ - [L,R=500]

Rufen wir jetzt eine beliebige Adresse auf und hängen den gewünschten Statuscode an, so liefert der Server brav unsere Fehlerseite.

example.com/?status=403 gibt uns also die 403.php,
example.com/?status=410 den Text Wech! Pech! und
example.com/?status=500 den Serverfehler.

Mit zwei kleinen Bookmarklets, die wir als Lesezeichen speichern, können wir jetzt fröhlich unsere Testcodes abklettern:

Letzte Ziffer + 1 · Letzte Ziffer - 1

Wenn alles so aussieht wie gewünscht, sollten wir die Regeln natürlich wieder entfernen. Es genügt völlig, wenn nur wir testen.

Weitere Lektüre

WordPress: Internet Explorer ohne CSS-Hacks ansprechen

Thomas Scholz — Tue, 28 Sep 2010 07:43:50 +0000

Den Internet Explorer betrachten die meisten Webentwickler zu Recht als chronische Krankheit. Neben anderen Browsern sieht auch die kommende Version 9 eher bedrückend aus. Ehe wir diesem Browser keine Extrawurst mehr braten müssen, wird noch viel Zeit vergehen.

Um den IE im Stylesheet gesondert anzusprechen, brauchen wir weder Hacks im CSS noch eine zusätzliche Datei oder gar (pfui!) eine serverseitige Browserweiche. Wir müssen nur das Element über Conditional Comments anpassen. Diese Idee hatte Paul Irish schon 2008.

Ich habe das neulich in einem WordPress-Theme eingesetzt und mag es so sehr, daß ich künftig all meine Themes damit ausrüsten werde.
Ein wenig umständlich: Die Sprachattribute werden in WordPress mit der Funktion language_attributes() erzeugt – und die hat ein fest eingebautes echo, das man nicht abschalten kann. Ich will nun nicht drei Meter Code in der header.php stehen haben, deshalb habe ich mir zwei kleine Funktionen gebaut. Die Funktion get_language_attributes() ist obendrein etwas schlanker als das Original, und sie gibt das Attribut dir nur aus, wenn der Text von rechts nach links läuft. Andernfalls ist es an dieser Stelle überflüssig.

Doch zum Code, er gehört in die functions.php:

/**
 * html5 start tag + language attribute + conditional tags for IE Win
 * @link   http://paulirish.com/?p=88
 * @param  bool $print
 * @return void|string
 */
function htmlstart($print = TRUE)
{
    $out  = '';
    $lang = get_language_attributes();
    $ies  = array (
        6 => 'lte6 lte7 lte8'
    ,   7 => 'lte7 lte8'
    ,   8 => 'lte8'
    ,   9 => ''
    );

    foreach ( $ies as $n => $class )
    {
        $out .= "";
    }

    $out .= "$lang>";

    if ( ! $print )
    {
        return $out;
    }

    print $out;
}

if ( ! function_exists('get_language_attributes') )
{
    /**
     * Returns the language attributes.
     *
     * Unobstrusive copy from the core.
     * Requires WP 3.0+
     *
     * @param string $doctype The type of html document (xhtml|html).
     */
    function get_language_attributes($doctype = 'html') {
        $output = is_rtl() ? 'dir="rtl"' : '';

        if ( $lang = get_bloginfo('language') )
        {
            $output .= ( ( get_option('html_type') != 'text/html'
                || $doctype == 'xhtml' )
                ? ' xml:' : '') . 'lang="' . $lang . '"';
        }

        return apply_filters('language_attributes', $output);
    }
}

Im Theme rufen wir die Funktion dort auf, wo früher die Doctype-Deklaration und das Start-Tag standen.
Die Ausgabe sieht (hier aufgehübscht) etwa so aus:







    "de-DE">

Nein, das ist kein sehr schönes Markup mehr. Aber so richtig schlimmes auch nicht. Obendrein validiert es.

Im Stylesheet können wir den Internet Explorer jetzt ganz einfach mit der passenden Klasse ansprechen:

.ie8
{
    top:        10px;
}
.lte7
{
    top:        15px;
}

Das kann ich mir viel besser merken als Kommentarhacks oder Spielereien mit ungültigen Selektoren und Eigenschaften.

Mehrere Internet Explorer auf einem Windows kann man sich mit der Utilo IE Collection einrichten. Zum Testen der Conditional Comments habe ich im Labor eine kleine Seite eingerichtet: CC-Test.

jQuery: Interne Sprungziele anbieten

Thomas Scholz — Mon, 12 Apr 2010 00:24:58 +0000

Meine Leidenschaft gilt dem Subtilen, dem unaufdringlichen Detail. Deshalb fange ich leere Suchanfragen ab, oder ich vergrößere die Eingabefelder im Kommentarformular, sobald sie fokussiert werden.

Heute habe noch so ein Detail nachgerüstet. Wenn ich einen Artikel mittels Überschriften in mehrere Abschnitte eingeteilt habe, dann lasse ich per Plugin ein Inhaltsverzeichnis erstellen. Dabei werden alle Überschriften mit einer id versehen, die dann als Sprungziel dient. Bis hierhin nichts Neues; so verfahre ich schon lange. Heute aber habe ich den Nutzwert der id-Attribute erhöht.

CSS pur – nur für Auserwählte

In meinem Userstylesheet lasse ich mir interne Anker gerne zeigen:

h1[id]:hover:after,
h2[id]:hover:after,
h3[id]:hover:after,
h4[id]:hover:after,
h5[id]:hover:after,
h6[id]:hover:after
    { /* Findet interne Links, falls ich mal auf
       einen Abschnitt in einer Seite linken will. */
        content:            " #" attr(id);
        font:               bold 14px/1 Consolas;
    }

Das könnte ich hier auch einbauen. Leider hat aber Mozilla an dieser Stelle einen unangenehmen Bug, der erst zehneinhalb Jahre alt ist und deshalb noch nicht repariert wurde: Generated Content kann nicht kopiert werden. Ihr sähet also einen Text, den ihr nicht erreichen könnt. So etwas biete ich nicht an.

Javascript macht’s möglich

Zu den vielen Vorteilen eines Javascript-Frameworks gehört, daß ich mich um die Bugs und Besonderheiten der einzelnen Browser kaum noch kümmern muß. Seit dem letzten kleinen Redesign setze ich hier jQuery ein, und damit läßt sich das Problem sehr elegant lösen.

Man kann in jQuery meistens ganz normale CSS-Selektoren benutzen, um Elemente auszuwählen. Beispielsweise füllt jQuery('h2[id], h3[id]') einen Array mit allen Überschriften zweiter und dritter Ordnung, die ein Attribut id besitzen.

Mit each() schlendert man dann gemütlich jeden Treffer ab und löscht, ersetzt oder bearbeitet ihn, bis die Finger bluten. Und das mache ich jetzt auch:

Jetzt haben also alle anspringbaren Überschriften einen Link, mit dem jeder etwas anfangen kann.

CSS zur Feinarbeit

.hpoint:link,
.hpoint:visited
    {
        color:              #ccc;
        text-decoration:    none;
    }
.haslink:hover .hpoint,
.haslink:focus .hpoint,
.haslink:target .hpoint
    {
        color:              #059;
    }

Das Script sollte irgendwo am Ende der Seite stehen oder ausgelagert werden. jQuery selbst muß natürlich vorher eingebunden werden.

Wie findet ihr das? Lästig, nützlich, oder verbesserungsbedürftig?

WordPress: Länge der Artikelliste im Backend anpassen

Thomas Scholz — Wed, 24 Feb 2010 18:02:39 +0000

Markus gab heute im WP-Forum mal wieder einen guten Tipp: Die Menge der Artikel pro Seite im Backend wird über den Meta-Key edit_per_page in der Tabelle wp_usermeta gesteuert.
Abgefragt wird sie in der Datei /wp-admin/includes/post.php mit:

$posts_per_page = (int) get_user_option( 'edit_per_page', 0, false );

Die Funktion get_user_option() wiederum bietet einen Filter an:

apply_filters("get_user_option_{$option}", $result, $option, $user);

Und daraus folgt dieser kleine Eintrag in der functions.php, mit dem ich künftig 100 Artikel sehe, ohne die Datenbank anzufassen:

add_filter('get_user_option_edit_per_page',
    create_function('','return 100;'));

Das kann man noch an eine Abfrage des Userlevels binden, wenn man möchte. Mir reicht es so.

Strenggenommen gehört so eine Modifikation natürlich nicht ins Theme, sondern in ein Plugin. Andererseits möchte ich dafür nicht extra ein zusätzliches Plugin laden. Kompromisse, wohin man sieht …

Und noch strenger gesehen ist diese Option bereits vorhanden: In den Optionen der Artikelansicht. Dort findet sie aber kaum jemand, deshalb setze ich sie global.

WordPress-Dashboard: ›Approved‹ nicht ›Genehmigt‹

Thomas Scholz — Tue, 09 Feb 2010 12:34:03 +0000

Dank einer kleinen Schlamperei seitens der WordPress-Entwickler kann das Approved im Dashboard derzeit nicht per Sprachdatei ins Deutsche übersetzt werden.

Mich stört es nicht, einige Kunden aber schon.

Bis das behoben ist, kann man sich mit einem kleinen Workaround in der functions.php des Themes aushelfen:

add_filter(
    'ngettext',
    create_function(
        '$t,$s,$p',
        'return "Approved"== $p?"Genehmigte":$t;'),
    10, 3);

Keine Schlamperei, sondern Absicht: Dashboard wird weiterhin nicht ins Deutsche übersetzt. Auch diesen Bug kann man leicht reparieren, ohne die Sprachdatei anzufassen, wie auch das Submitted on:

if ( ! function_exists('toscho_translations') )
{
    function toscho_translations($str)
    {
        // Diesen Array bei Bedarf um weitere Übersetzungen erweitern.
        $trans = array (
            'Dashboard'     => 'Übersicht',
            'Submitted on'  => 'Eingereicht am'
        );

        foreach ( $trans as $original => $translation )
        {
            $str = str_replace($original, $translation, $str);
        }

        return $str;
    }
    add_filter('gettext', 'toscho_translations');
}

Und so sieht das Ergebnis aus:

WordPress: Grundeinstellungen per Plugin setzen

Thomas Scholz — Fri, 29 Jan 2010 19:23:06 +0000

Wer öfter mal ein WordPress-Blog installiert, weiß die vielen Einstellungsseiten nicht unbedingt zu goutieren. Ich habe mir dafür ein kleines Plugin geschrieben, das die wichtigsten Optionen auf einen Schlag setzt, die Blogroll (Linkliste) leert und die Dummytexte löscht:

Download Toschos Basic Settings.

/*
Plugin Name: Toscho's basic settings
Plugin URI: http://toscho.de/2010/wordpress-grundeinstellungen-per-plugin-setzen/
Description: Some useful default configuration settings. See 'wp-admin/options.php' for more options.
Version: 0.3
Author: Thomas Scholz
Author URI: http://toscho.de
*/

function set_toscho_defaults()
{
    global $wpdb;
    $o = array(
        'avatar_default'            => 'blank',
        'avatar_rating'             => 'G',
        'category_base'             => '/thema',
        'comment_max_links'         => 0,
        'comments_per_page'         => 0,
        'date_format'               => 'd.m.Y',
        'default_ping_status'       => 'closed',
        'default_post_edit_rows'    => 30,
        'links_updated_date_format' => 'j. F Y, H:i',
        'permalink_structure'       => '/%year%/%postname%/',
        'rss_language'              => 'de',
        'timezone_string'           => 'Etc/GMT-1',
        'use_smilies'               => 0,
        'start_of_week'             => 1
    );

    foreach ( $o as $k => $v )
    {
        update_option($k, $v);
    }

    // Delete dummy post and comment.
    wp_delete_post(1, TRUE);
    wp_delete_comment(1);

    // empty blogroll
    $wpdb->query("DELETE FROM $wpdb->links WHERE link_id != ''");

    return;
}
register_activation_hook(__FILE__, 'set_toscho_defaults');

Dieses Plugin aktivieren, deaktivieren und löschen. Fertig.

Nachtrag: Dieses kleine Plugin hat jetzt auch seine eigene GitHub-Adresse: http://github.com/toscho/WordPress-Basic-Settings.

Opera: Wie man sich selbst aus der eigenen Statistik heraushält

Thomas Scholz — Thu, 07 Jan 2010 20:04:32 +0000

Zu den wenigen Daten, die ich nicht in Piwik sehen möchte, gehören meine eigenen Aufrufe.

Zum Glück – und weil ich auf bequeme Technik abfahre – benutze ich Opera. Und WordPress. Also habe ich in den Einstellungen unter opera:config#ISP|Id ein paar Zeichen in die User-Agent-Kennung eingetragen, mit denen ich mich im PHP-Skript wiedererkenne.

Diese Zeichenkette benutze ich in meinem Theme und auch im Labor, wo man den eigenen User-Agent-String ansehen kann, um den Piwik-Code auszublenden.

Angenommen, die Zeichen wären ABC123DEF, dann sähe der Code so aus:

function piwik_code()
{
    // Das bin ich!
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'ABC123DEF' ) )
    {
        return;
    }

    $url = 'http' . (empty($_SERVER['HTTPS']) ? '' : 's') . '://p.toscho.de/';
    ?>




Die Funktion piwik_code() rufe ich dann in der footer.php an passender Stelle auf. Und schon bin ich weg.
Nachtrag: Einen anderen Weg zeigt der Folgeartikel: Per Cookie aus der Statistik.

WordPress: Administrator mit PHP herausfinden

Thomas Scholz — Fri, 14 Aug 2009 01:26:37 +0000

Will man bestimmte Inhalte – etwa bei der Fehlersuche – nur dem Administrator ausgeben, so möchte man zunächst nach der Funktion is_admin() greifen, die WordPress schon mitbringt. Die liefert aber nur dann TRUE zurück, wenn man eine Seite des Backends aufruft und hätte besser is_backend() geheißen …

Ich benutze einen Schnipsel, den ich aus dem WordPress-Forum gepult und in eine Funktion gegossen habe:

/**
 * Prüft, ob der Administrator die Seite ansieht.
 * @author »Kafkaesqui« <http://guff.szub.net/>
 * @see http://wordpress.org/support/topic/153260#post-681600
 * @return bool
 */
function is_boss()
{
    global $user_ID;

    if ( ! $user_ID or ! current_user_can('level_10') )
    {
        return FALSE;
    }
    return TRUE;
}

Level 10 hat nur der Adminstrator. Man kann diese Abfrage aber anpassen und auch die niederen Ränge mit speziellen Inhalten beglücken.
Lektüre: Roles and Capabilities.

Vereinfachte Mausgesten für Opera

Thomas Scholz — Mon, 10 Aug 2009 12:23:00 +0000

Seit Version 5.1 reagiert Opera auf bestimmte Mausbewegungen mit vordefinierten Aktionen. Hält man beispielsweise die rechte Maustaste gedrückt und ruckt kurz nach links, dann geht man im Verlauf eine Seite zurück. Ein Backbutton, den man nicht suchen muß.

Außerdem kann man noch FlipBack und FlipForward benutzen. FlipBack heißt: Man hält die rechte Maustaste gedrückt und klickt kurz auf die linke. FlipForward mag sich jetzt jeder selbst austüfteln …

Die Aktionen können noch mit Tastatureingaben kombiniert werden; sie bieten leidenschaftlichen Fummlern eine Menge Zeitvertreib.

Wie die kleinen Beispiele zeigen, bringt Opera hier einige Redundanz mit. Die Standardkonfiguration kennt zwei Aktionen für das Schließen eines Fensters, drei für das einfache Vor- und Zurückspringen innerhalb des Verlaufs (eine Seite), drei für das schnelle Zurückblättern (Einstiegsseite einer Domain) und sechs für das schnelle Vorwärtsblättern (automatisches Finden der nächsten Seite).

Wer soll sich das merken?

Mich stört vor allem die Möglichkeit, durch eine »verirrte« Geste versehentlich das Fenster zu schließen; außerdem brauche ich oft ganz andere Befehle. Deshalb habe ich eine sehr einfache Konfiguration erstellt, die ich in jede Neuinstallation importiere.

Download toscho.mouse.ini

Opera bietet eigenständig die Installation an. Das kann man jederzeit wieder aufheben; die Standardkonfiguration wird nicht überschrieben.

Die Mausgesten im Überblick

Mausgesten im Browserfenster
Geste	Aktion	Erklärung
GestureLeft	Refresh display	Neuaufbau eine Seite ohne Reload. Hebt alle Aktionen auf, die man beispielsweise per Javascript auf der Seite ausgeführt hat.
GestureRight	Reload	Lädt die Seite komplett neu.
GestureRight shift	Reload stylesheets	Lädt nur Stylesheets nach. Hilfreich, wenn man gerade ein Userstylesheet anpaßt.
GestureUp	Go to start \| Go to parent directory	Auf der Seite nach oben. Wenn man schon oben ist, springt man eine Verzeichnisebene höher. Funktioniert auch innerhalb einer Textarea.
GestureDown	Go to end	Zum Ende der Seite. Funktioniert auch innerhalb einer Textarea.
FlipBack	Back	Eine Seite zurück.
FlipBack shift	Rewind	Auf die erste Seite zurück, die man auf der aktuellen Domain angesehen hat.
FlipForward	Forward \| Fast forward	Eine Seite vor. Entweder die nächste (wenn man gerade zurückgegangen ist) oder eine automatisch ermittelte. Welche das ist, weiß Opera oft sehr genau, etwa die nächste Seite einer Google-Suche.
FlipForward shift	Fast forward	Ignoriert den eigenen Verlauf und springt zum nächsten »automatischen« Ergebnis.
Button6	Back	Zurückbutton der Maus, so sie einen hat.
Button7	Forward	Na?

Mausgesten im Mailfenster und in Eingabefeldern
Geste	Aktion	Erklärung
FlipForward	Mark and select next unread	Markiert die aktuelle Mail als gelesen und springt zur nächsten ungelesenen.
FlipForward	Paste	Fügt den Inhalt der Zwischenablage in ein Eingabefeld ein.
FlipBack	Undo	Tja …

Das versehentliche Schließen ist hiermit nicht mehr möglich. Wer jetzt Lust auf eine eigene INI bekommen hat: Im Opera-Wiki wartet eine umfangreiche, kommentierte Liste aller verfügbaren Aktionen.

Blogdesign für Profis

Thomas Scholz — Sat, 08 Aug 2009 19:09:27 +0000

Deinem Blog fehlt der Pfeffer? Du willst ihm einen professionellen Anstrich geben, weißt aber nicht wie? Hier sind sie: die geheimen Tricks der Profis.

Mach die Schrift ganz, ganz klein. Dann hast du mehr Platz für Werbung.
Wer doch etwas lesen will, kann ja einfach ein bißchen näher heranrücken oder mit der Vergrößerungsfunktion seines Browsers herumfummeln. Macht jeder gerne.
Packe alles in den Titel, das irgendwie wichtig sein könnte: Kategorien, wichtige Suchworte und ein bißchen Werbung.
Wer ein Lesezeichen setzen will, kann ja selbst nacharbeiten, wenn ihm das nicht paßt. Oder darauf verzichten.
Du brauchst kein Druckstylesheet. Und wenn doch, dann zumindest keinen Umbruch vor den Kommentaren. Laß unbedingt die Werbung drin; die ist so schön bunt und lockert den schwarzen Hintergrund auf.
Verlinke einfach alles. Überall. Auf jeder Seite jede Kategorie, jedes Schlagwort, die 100 »beliebtesten« Artikel, die 100 am häufigsten kommentierten, 50 Werbepartner, deine Lieblingslinks und deine letzten 20 Tweets. Und die Seite, die der Leser gerade sieht. Dann findet er sie schneller wieder. Insgesamt wirkt deine deine Seite dann bestimmt sehr (wert)voll.
Links sind zwar eine tolle Sache, sehen aber doof aus. Kein Problem: Per CSS kannst du Links prima in den Rest des Textes eingliedern. Bau einfach die Unterstriche aus, und gib besuchten Links die gleiche Farbe wie unbesuchten: die des Textes. Und schon sieht die Linkwüste ein bißchen freundlicher aus.
Links auf fremde Seiten lassen sich übrigens sehr einfach mit dem Attribut target="_blank" vergolden. Wir wollen doch klarstellen, wer hier das Sagen hat, oder?
Warum nur einen Statistikdienst? Der könnte irgendwann verboten werden, da ist es sicherer, gleich zehn zu benutzen – die können ja nicht alle rechtswidrig sein. Und wer dein Blog besucht, verzichtet doch automatisch auf seine Privatsphäre, denn es ist ja öffentlich. Ladezeit? Ach was. Heute hat doch jeder DSL.
Du bist ein Genie, deine Artikel zeitlos gültig. Wozu also die Leser mit der Information verwirren, wann du einen Artikel geschrieben hast?
Wenn du doch ein Datum verrätst, dann verstecke es gut. Direkt neben oder unter der Überschrift ist ein sehr schlechter Platz, da lenkt man nur von der Werbung ab.
Teile deine Artikel in mehrere Seiten. Leser blättern gerne, denn das schafft so eine … literarische Atmosphäre. Außerdem verdienst du dann mehr Geld mit deiner Werbung.

Nächste Woche in dieser Sendung: Wie man seine Kommentatoren züchtigt.