Mustergültige Installation von Rails unter OS X
Dan Benjamin erklärt (einmal mehr), wie es geht.
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.
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!
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;
}
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:
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:
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.
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;
}
Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.
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.
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.
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).
I Love Automator
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.
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.