VLC Player: Recent History und Verlauf löschen in OSX

Der VLC Player zeigt unter dem Menüpunkt „File / Open Recent“ zuletzt gesehene Videos an. Das ist praktisch, jedoch nicht wenn es sich um den Firmen-Rechner handelt und man gerne unbemerkt ein paar Folgen von Big Bag Theory während der Arbeit sehen mag. Folgende Einstellung müssen zur Deaktivierung der History getätigt werden:


VLC Player: Recent History und Verlauf löschen OSX
VLC: Verlauf löschen
  • Die Einstellungen von VLC öffnen oder „CMD + ,“ drücken
  • Im geöffneten Dialog links unten auf Show All klicken
  • Danach zum Menüpunkt Interface -> Main interfaces -> macosx navigieren
  • Die Option unter „Behavior“ mit dem Namen Keep Recent items deaktivieren

Ab jetzt werde keine zuletzt gesehene Videos mehr gespeichert. Bisher bereits gelistete Videos kann man direkt unter „File / Open Recent / Clear menu“ löschen.

Font Awesome in Photoshop nutzen

Icon-Fonts sind eine tolle Sache. Keine lästigen PNG-Files mehr aus Photoshop exportieren, keine Sprite-Positionen im CSS notieren und keine Probleme mehr, wenn sich die Farbe der Icons später ändern soll. „Font Awesome“ ist eine der beliebtesten Icon-Fonts und ebenfalls kompatibel für Bootstrap. Wie man die Schrift auf seiner Website einbindet, wird auf vielen Seiten gut beschrieben, wie aber kann man sie auch für das nächste Screendesign in Photoshop nutzen?


Font Awesome in Photoshop verwenden

Font Awesome Photoshop Palette
Icon kopieren, Schrift auswählen, fertig.
  • Das ganze Paket via fortawesome.github.io/Font-Awesome downloaden und entpacken
  • Im Ordner „font“ findet ihr eine .otf-Datei, diese installiert ihr bzw. fügt sie zu eurem Schriftverwaltungsprogramm hinzu. Die Schrift sollte nun einsatzbereit sein
  • Damit ihr sie auch in eurem nächsten Design nutzen könnt, muss das gewünschte Icon zuerst von diesem Cheatsheet kopiert werden.
  • Achtet darauf, dass nicht der Unicode, sondern wirklich nur das Icon selbst kopiert wird.
  • Nun müsst ihr in Photoshop eine neue Textebene anlegen, das Icon von der Zwischenablage einfügen und die Schrift „Font Awesome“ wählen
  • Das Icon sollte nun sichtbar sein

Nun könnt ihr das Icon beliebig groß darstellen, die Farbe ändern, Ebeneneffekte darauf anwenden und viel mehr. Wie in CSS3 eben auch. Viel Spaß!

SVG-Bilder im Web: Farben ändern und animieren mit CSS

SVG-Bilder sind eine tolle Sache – besonders wenn man sie auf Webseiten einbindet: Die Speichergröße ist gering, die Images sind ohne Qualitätsverlust skalierbar und sogar der Internet Explorer 9 kann damit etwas anfangen. Im Gegensatz zu herkömmlichen Bildformaten, haben sie aber noch einen Vorteil: Mit CSS kann ihre Farbe verändert und auf Wunsch sogar animiert werden.

Das Markup

[html]<img src="logo.svg" class="svg" id="logo" />[/html]

Vorbereitung mit JavaScript

Zuerst muss via jQuery der Inhalt der .svg-Bilddatei in den Image-Tag eingefügt werden. Dies kann natürlich auch direkt im Markup erledigt werden. Beide Methoden haben Vor- und Nachteile.
[js]
$(‚img.svg‘).each(function(){
var $img = $(this),
imgID = $img.attr(‚id‘),
imgClass = $img.attr(‚class‘),
imgURL = $img.attr(‚src‘);

$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find(‚svg‘);

// Add replaced image’s ID to the new SVG
if(typeof imgID !== ‚undefined‘) {
$svg = $svg.attr(‚id‘, imgID);
}
// Add replaced image’s classes to the new SVG
if(typeof imgClass !== ‚undefined‘) {
$svg = $svg.attr(‚class‘, imgClass+‘ replaced-svg‘);
}

// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr(‚xmlns:a‘);

// Replace image with new SVG
$img.replaceWith($svg);
});

});
[/js]
Quelle: stackoverflow.com

Farbe des Bildes ändern

Nun kann direkt via CSS die Farbe des SVG-Bildes angepasst werden:
[css]#logo path {color: red}[/css]

Farbe animieren

Natürlich ist es jetzt auch möglich den gewünschten Farbwert via Animation zu verändern. Im folgenden Beispiel passiert das bei Mouse-Hover:
[css]#logo path {
-webkit-transition: all 1;
-moz-transition: all 1;
-ms-transition: all 1;
-o-transition: all 1;
transition: all 1;
}
#logo:hover path {color: green}
[/css]


Das ganze funktioniert in allen Browsern die mit SVG-Bildern und CSS3-Transitions etwas anfangen können.

OSX: Ordner schneller kopieren mit dem Terminal

Beim Sichern auf eine externe Festplatte passieren wundersame Dinge: Der Finder berechnet für das Kopieren von 35 GB eine Dauer von mehreren Stunden. Das ist eigenartig, da innerhalb der ersten 15 Sekunden fast 300 MB kopiert wurden, der Vorgang danach aber spürbar langsamer wird. Die Restzeit von Anfangs 20 Minuten steigt auf mehrere Stunden. Handelt es sich hier um einen Fehler?

Kopiert man den Ordner stattdessen über das Terminal ist man plötzlich viel schneller am Ziel.

Ordner kopieren via Terminal

[js]cp -r [Zu kopierender Ordner] [Ziel-Ordner]/[/js]

Auch hier stelle ich nach mehreren Minuten Schwankungen der Kopiergeschwindigkeit fest, allerdings nicht so stark wie beim Finder. Warum das allerdings so ist, entzieht sich meines Wissens. Mehrere Tests bestätigten aber meine Vermutung. Meine klare Empfehlung also: Wenn der Finder beim Kopieren in den Winterschlaf fällt, einfach den Vorgang via Terminal starten.

Animation von Farbwerten mit CSS3-Transition, ohne jQuery

Das Problem ist bekannt: Mit der animate()-Methode von jQuery können lediglich numerische Style-Variablen animiert werden. Was aber machen wenn eine Farbwert-Animation benötigt wird? Beispielsweise um bei Hover die Hintergrundfarbe eines Elementes gleichmäßig zu ändern.

CSS3
Quick-Animationen: CSS3 macht’s möglich

Entweder man bindet ein Plugin ein, verwendet gleich eine große Library oder aber man nutzt die Möglichkeiten die einen CSS3 schon heute bietet. Die Transition-Eigenschaft, welche in allen modernen Browsern gut funktioniert, ist in der Lage diese Anforderung in wenigen Zeilen umzusetzen.

Beispiel: Hintergrund-Animation bei Hover

Ja wirklich, dieser Code reicht aus, um unsere Hintergrund-Animation auf das Element #foo anzuwenden.
[css]#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {
background:yellow;
}[/css]
Die Transition-Eigenschaft (inkl. aller Browser-Prefixe) sorgt dafür, dass jegliche Änderung der background-Eigenschaft, mit einer 1-sekündigen-Animation durchgeführt werden. Das kann natürlich auch abgeändert werden, um zum Beispiel die Schriftfarbe (color) oder die Rahmen-Farbe (border-color) zu animieren. Natürlich bietet die Transition-Eigenschaft die Möglichkeit fast alle CSS-Werte animierend zu ändern. Ganze Animations-Abfolgen können via Keyframe-Animation realisiert werden.

Noch schneller geht es mit SCSS/SASS und Compass:
[css]#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}[/css]

Soll der Effekt erst ab einer bestimmten User-Interaktion starten, muss die gewünschte Zielfarbe einfach in einer Klasse gespeichert werden, welche man dem Element via JavaScript zuweist. Viel Spaß!