Mustergültige Installation von Rails unter OS X

Dan Benjamin erklärt (einmal mehr), wie es geht.

Veröffentlicht am 02.02.2007 um 18:13 Uhr
1 Kommentar

Verschwundener iCal Wecker nach Quicktime Update

Nach dem Update auf Quicktime 7.1.3 (und iTunes 7) verschwindet auf wundersame Weise der kleine klingelnde Wecker in den iCal Erinnerungen.

iCal Errinnerung ohne Wecker

Nach kurzem Stöbern im Apple Diskussionsforum hab ich die Lösung des Problems gefunden: Zur Darstellung des Weckers wird Quicktime verwendet und seit dem letzten Update ist das Darstellen von Flash-Spuren standardmäßig deaktiviert. Einfach in den Quicktime Systemeinstellungen wieder aktivieren und der Wecker ist (nach einem iCal Neustart) wieder da!

Quicktime Systemeinstellungen mit Flash Option aktiviert

Veröffentlicht am 25.09.2006 um 08:19 Uhr
1 Kommentar

Negative Margin-Werte

oder

Lessons learnt from rebooting, Part 2:

Über den Einsatz von negativen Margin-Werten kann man streiten. Ich finde es jedenalls nicht verwerflich sondern sogar sehr praktisch, wenn man z.B. einzelne Elemente aus der umschließenden Layoutbox herausragen lassen möchte. Auf meiner neuen Seite habe ich an diversen Stellen negative Margin-Angaben benutzt, z.B. für die Bilder der Arbeitsproben. Die grauen Ränder sollten aus dem Satzspiegel herausragen, so dass die eigentliche Bildkante bündig am Text ausgerichtet ist. Kein Problem: Einfach den Bildern links einen negativen Margin-Wert von der Stärke des Rands zuweisen, fertig.

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
}

Safari rendert richtig

In Safari sieht das auch ganz prima aus. Leider aber nicht in unserem Lieblingsbrowser, dem Internet Explorer. Dort wird alles, was nach links übersteht, einfach abgeschnitten:

Der IE rendert falsch

Erster Lösungsansatz bei einem solchen Problem: Man muss dem überstehenden Element “Layout” geben. In diesem speziellen Fall ist dies allerdings bereits der Fall, da es sich um ein img Element handelt. Will man zum Beispiel einem div oder einem h1 Element “Layout” geben, ist die einfachste Lösung, eine Breitenangabe (width) für das Element festzulegen. (Weitere Möglichkeiten findet ihr hier). Damit das ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position:relative nötig. In meinem Fall also:

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
    position: relative;
}

Für ein Element, dass nicht von Hause aus “Layout” hat:

#herausragend {
    margin-left: -10px;
    width: 100px;
    position: relative;
}

Zum Weiterlesen:

Veröffentlicht am 09.05.2006 um 07:30 Uhr
2 Kommentare

Bilder als Aufzählungspunkte

oder auch

Lessons learnt from rebooting, Part 1:

Einen kleinen CSS-Trick möchte ich gerne an euch weitergeben. Bei meinem Relaunch habe ich Bilder als Bullet-Points benutzt, was man ja sehr schön per CSS machen kann:

ul {
    list-style-image: url(bullet-galore.gif);
}

Leider hatte ich bei dieser Lösung das Problem, dass a) das Bild in manchen Browsern vertikal zum Text stets etwas nach oben versetzt dargestellt wurde und b) die Höhe des Bildes die Höhe der Listenpunkte beeinflusst hat.

Verrutschte Aufzählungszeichen

Zu einer schicken Lösung bin ich dank Dan Cederholms Buch Web Standards Solutions gekommen, der für Bilder als Bullet-Points einfach das background-Attribut benutzt. So kann man das Bild genau ausrichten und hat keines der beiden oben beschriebenen Probleme:

ul {
    list-style: none;
}

li {
    background: url(bullet-galore.gif) 0 50% no-repeat;
    padding-left: 15px;
}

Richtig positionierte Aufzählungszeichen

Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.

Veröffentlicht am 02.05.2006 um 21:36 Uhr
Keine Kommentare

Fixing the Fox

Removing Dotted Links.

via: Stylegala

Veröffentlicht am 13.01.2006 um 07:11 Uhr
Keine Kommentare

Codevervollständigung mit BBEdit

Seit kurzem bin ich wieder passionierter BBEdit User. BBEdit ist ein toller Editor und läßt wirklich kaum Features vermissen, außer vielleicht eine Autocomplete Funktion, wie sie Editoren wie Dreamweaver, GoLive oder SKEdit schon seit langem unterstützen. In BBEdit gibt es leider keine klassische Variante davon mit automatisch ausklappendem Auswahlfeld, das kontextsensitiv die möglichen Vervollständigungen anzeigt. Es gibt allerdings eine nette kleine Funktion, mit der man sich eine eigene Codevervollständigung bauen kann: Auto-Complete Glossary.

Auto Complete Glossary Menu

Dabei geht man wie folgt vor:

1. Glossary Sets anlegen

Man kann innerhalb des Glossarys (Window > Palettes > Glossary) mehrere Sets anlegen. Zu diesem Zweck erstellt man im Ordner ~/Library/Application Support/BBEdit/Glossary/ einfach Unterordner, die die Endung der jeweiligen Sprache haben, für die sie verwendet werden sollen. Also XHTML.html für HTML Dateien und CSS.css für Stylesheets und so weiter. BBEdit wählt abhängig von der gerade geöffneten Datei dann automatisch das richtige Set aus. Glossary Items, die global verfügbar sein sollen kann man direkt im Glossary Ordner ablegen.

2. Glossary Einträge erstellen

Nehmen wir mal an, wir wollen einen Glossary Eintrag für das Attribut class erstellen. Dazu öffnen wir eine neue Textdatei und schreiben folgende Zeile

class=”#INSERTION#”

Der Platzhalter #INSERTION# markiert die Stelle, an der nach dem Einfügen der Cursor platziert wird. Jetzt speichert man die Datei im Ordner ~/Library/Application Support/BBEdit/Glossary/XHTML.html/ unter dem Namen “class” ab. Der Name der Datei bestimmt den Begriff, den man eintippen muss, um die Codevervollständigung ausführen zu können. Das kann also ein beliebiger Begriff sein. Damit es sich wie eine echte Codevervollständigung verhält halte ich es jedoch für sinnvoll, direkt die Namen der Attribute bzw. Tags zu verwenden. Bei Tags sollte man darauf achten, das < Zeichen am Anfang wegzulassen, da dieses von der Funktion Auto-Complete Glossary leider ignoriert wird (also z.B. „input“ statt „< input />”).

3. Funktion Auto-Complete Glossary

Im Menu Edit findet man die Funktion Auto-Complete Glossary. Diese kann dazu verwendet werden, Glossary Einträge anhand der zuletzt geschriebenen Zeichenfolge zu finden und einzufügen. Tippt man also ”cl” und führt dann Auto-Complete Glossary aus, findet BBEdit unseren zuvor angelegten Eintrag class und fügt ihn ein. Damit die Funktion auch wirklich sinnvoll nutzbar ist, sollte man ihr allerdings über Set Menu Keys ein Tastaturkürzel zuweisen (z.B. Apfel-Return).

4. Tastaturkürzel für Glossary Einträge

Auch sehr nützlich ist das Zuweisen von Tastaturkürzeln zu Glossary Einträgen. So kann man zum Beispiel sehr einfach Textbereiche von Tags umschließen lassen. Als Beispiel nehmen wir mal eine normale Headline. Der Glossary Eintrag sieht wie folgt aus:

<h1>#INSERTION##SELECT#</h1>

Bei diesem Eintrag ist nun zusätzlich zum #INSERTION# Platzhalter noch der #SELECT# Platzhalter hinzugekommen. Er macht es möglich, dass man einen beliebigen Textabschnitt auswählen kann und dann über einen vorher gesetztes Tastaturzkürzel (z.B. Apfel-alt-Shift 1) als Headline taggen kann. Der ausgewählte Text wird dann an Stelle des #SELECT# Platzhalters eingefügt.

Damit ihr jetzt nicht alle wie wild HTML Tags nachtippen müsst, hab ich mal meine aktuellen Glossary Sets für XHTML und CSS zum Download in ein Disk-Image gepackt. Einfach runterladen und in den Ordner ~/Library/Application Support/BBEdit/Glossary/ kopieren.

DMG Icon

Veröffentlicht am 22.10.2005 um 21:05 Uhr
4 Kommentare

Kleiner Exposé Tipp am Rande

Wenn man sich im Exposé-Modus befindet (F9 oder F10) kann man mit der Tab-Taste bequem durch die einzelnen Programme blättern. (Um in den Exposé-Modus zu gelangen, bitte vorher einen Mac kaufen).

Veröffentlicht am 14.07.2005 um 12:21 Uhr
1 Kommentar

I Love Automator

Otto

Heute kam ich zum ersten mal in die Verlegenheit, von der neuen OS X Applikation Automator Gebrauch zu machen. Ich fand den kleinen Kerl ja schon die ganze Zeit so süß und nett, konnte für ihn aber bisher keine Verwendung finden. Nun ja, heute standen wir vor dem Problem, dass meine Freundin Johanna gerade in Leipzig weilt, allerdings keinen Wecker vor Ort hat. Gestern hat sie es mit einem kleinen Freeware Tool probiert, dass heute morgen iTunes anwerfen sollte. Aber: Pustekuchen! Ich dachte als nächstes an das Starten einer Datei aus iCal heraus. Ist ja kein Problem. Einfach bei Erinnerung “Datei öffnen” anklicken, mp3 auswählen, fertig. Problem bei dieser Lösung war allerdings, dass 1 Lied vielleicht zu kurz sein könnte und man danach einfach weiterpennt. Gut, dann muss es eben ein AppleScript sein, dass eine Playlist startet. Andererseits, Moment mal … genau! Automator! Schwupps, in 1 Minute einen Workflow zusammengeklickt, als ausführbare Applikation gesichert, fertig. iCal startet Wecker.app, Wecker.app startet Playlist, Playlist weckt Johanna.

Hoffentlich.

Veröffentlicht am 17.05.2005 um 20:15 Uhr
Keine Kommentare

Dashboard-Widgets temporär auf dem Schreibtisch ablegen

Um ein Dashboard-Widget direkt auf dem Schreibtisch abzulegen, einfach nach dem herausziehen aus dem (Dashboard-)Dock F11 drücken. Voilá. Das Widget bleibt allerdings immer im Vordergrund und wandert beim nächsten Drücken von F12 wieder zurück ins Dashboard.

Veröffentlicht am 11.05.2005 um 09:57 Uhr
Keine Kommentare