AutoFileName: Projektroot in Sublime ändern

Autofilename Root angepasst

Ich könnte mir die Arbeit in Sublime ohne dem Plugin AutoFileName nicht mehr vorstellen. Bis vor Kurzem hat mich aber eine Sache gestört. Immer wenn ich einen Pfad mit / begonnen habe, wurde der Pfad relativ zum Root meines Computers vervollständigt, anstatt relativ zum Root meines Projekts. Zum Glück kann man den Projektroot in Sublime ändern.

Wie ich dieses Problem gelöst habe, erkläre ich gleich. Vorher möchte ich aber AutoFileName kurz vorstellen.

(mehr …)

Mehr lesen

Meine Top Picks der letzten Woche #1

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

Jank Free

http://jankfree.org/
Artikel, Videos und Slides zum Thema „Ruckelfreie Animation mit CSS (und Javascript)“.

Vienna

http://www.vienna-rss.org/
Open Source RSS Reader für OS X

How to Create Visually Effective Calls-To-Action

http://rafaltomal.com/visually-effective-cta/
Ein kurzer Artikel, der beschreibt was man für effektive Calls-To-Action beachten kann/soll.

About Those Lava Lamps

https://gist.github.com/marick/3ec112bc38b2af267e15
Ein nette Anekdote zur Mitarbeitermotivation

Mehr lesen

Toolbar in Chrome für Android einfärben

Toolbar in Chrome für Android einfärben

Es wird wahrscheinlich aufgefallen sein, dass manche Browserfenster auf Android seit einigen Monaten überraschend bunt sind. Das ist möglich seit Chrome 39 für Android, weil in dieser Version ein neuer Meta-Tag vorgestellt worden ist.

<meta name="theme-color" content="#123456">

Mit dem theme-color Meta-Tag kann man die Status- und Adressleiste einfärben, wie man in den Screenshots oben sehen kann.

Auf iOS funktioniert der Meta-Tag nicht, da kann man nur einstellen wie die Statusleiste im Fullscreen-Modus aussieht.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Damit man die Darstellung der Statusleiste in iOS ändern kann, muss die Website im Fullscreen-Modus sein, deswegen werden beide Meta-Tags benötigt. Eigene Farben kann man nicht angeben, man hat nur die Wahl zwischen default, black und black-translucent.

Mehr lesen

Wie funktioniert flex-grow?

Nachdem der Support für Flexbox mittlerweile schon mehr als brauchbar ist, habe ich vor einigen Wochen beschlossen, dass es endlich Zeit für mich ist, mich mit Flexbox zu beschäftigen und es in meinen Projekten zu verwenden.
Ich war sehr schnell sehr begeistert, weil Flexbox tatsächlich so abgefahren ist, wie alle sagen. Dementsprechend habe ich keine Gelegenheit ausgelassen und immer wieder von meinen neuesten Erkenntnissen erzählt. So war es auch wie ich meinem Kollegen Rob von der Eigenschaft flex-grow vorgeschwärmt habe. Ich habe ihm gezeigt wie sie funktioniert und auch eine einfache Demo erstellt.
Er war ähnlich begeistert und wollte flex-grow gleich auf einer Website testen, die er kürzlich gemacht hat. Also haben wir die Website geöffnet, DevTools gestartet, alle Floatings entfernt und display: flex und flex-grow angewendet. Dabei sind wir natürlich auch sichergegangen, dass keines der Elemente negative margins hatte oder eine position, die uns stören konnte. Trotzdem war das Layout kaputt. Egal was wir versucht haben, das Layout hat nicht ausgesehen und funktioniert wie in meiner Demo, obwohl wir die exakt gleichen Eigenschaften verwendet haben.

flex-grow: Funktionsweise und Anwendungsbeispiele

Wie sich herausgestellt hat, habe ich ganz einfach falsch verstanden wie flex-grow funktioniert. Deswegen habe ich mich in weiterer Folge intensiv mit der Eigenschaft auseinandergesetzt. Zufälligerweise bin ich zu dieser Zeit mit Chris Coyier von CSS-Tricks in Kontakt gekommen und somit konnte ich meine Erkenntnisse und einige praktische Beispiele in einem Artikel auf css-tricks.com zusammenfassen. Wenn also Interesse daran besteht genauer herauszufinden was genau hinter flex-grow steckt, dann kann ich diesen Artikel nur wärmstens empfehlen.
An dieser Stelle möchte ich ein großes Dankeschön an Eva Lettner fürs Lektorat richten.

Mehr lesen

Gulp Tasks auf mehrere Dateien aufteilen

Wenn man viele seiner Entwicklungsschritte mit Gulp löst, wird das gulpfile, in dem sich üblicherweise sämtliche Tasks befinden, sehr schnell sehr lang und unübersichtlich.

Glücklicherweise gibt es ein node-Package namens require-dir mit dem man die Inhalte eines Ordners in einem Dokument einbinden kann. Und das wiederum macht es möglich, gulp Tasks in mehrere Dateien aufzuteilen.

Wie das geht zeige in einem kleinen Beispiel.

(mehr …)

Mehr lesen

Digitalvision 2015: Meine Notizen

DigitalVision 2015

Gestern hat die Digitalvision 2015 in Wien stattgefunden. Es gab 7 Talks zu den Themen UX und Frontend, reichlich zu Essen und zu Trinken, funktionierendes WLAN, und das alles in einer sehr schönen Location. Die Talks waren in Ordnung, aber unterm Strich nicht sonderlich überwältigend, weil nicht wirklich viel Neues dabei. Nichtsdestotrotz war der Tag insgesamt gut organisiert und es hat Spass gemacht den Sprechern zuzuhören. Ob es die knapp 100 Euro wert waren? Ich bin mir nicht ganz sicher. Aber die Liechteneckers gehören zu den wenigen in Österreich, die ein derartiges Event veranstalten und immerhin tut sich etwas in diese Richtung und das ist wichtig.

Ich habe meine Notizen zur Digitalvision 2015 hier kurz zusammengefasst.

(mehr …)

Mehr lesen

Webfont Performance, FOUT, FOIT und Usability

Webfonts Performancevergleich

Webfonts haben sich in den letzten knapp 6 Jahren zu einem mehr oder weniger fixen Bestandteil des modernen Webdesign entwickelt. Neben gestalterischen Fortschritten, hat sich auch sehr viel in der Art und Weise, wie wir Webfonts einbinden, getan. Die @font-face Syntax ist mehrere Entwicklungsschritte durchgegangen, es gibt einige Services, die Webfonts anbieten, und eine neue API ist im Anmarsch.

Inspiriert durch Bram Steins Talk auf der Smashing Conference 2015 in Freiburg habe ich mich die letzten Tage mit dem Laden von Webfonts und den damit verbundenen Aspekten hinsichtlich der Usability und Performance beschäftigt. Ich habe mir angesehen, wie sich Browser verhalten während Webfonts geladen werden und wie man darüber Kontrolle ergreifen kann, um ein möglichst konsistentes Verhalten in allen Browsern zu erreichen und dabei auch die Webfont Performance zu verbessern. Weiters habe ich unterschiedliche Optionen getestet Webfonts zu laden und die Ergebnisse zusammengefasst.

(mehr …)

Mehr lesen

Smashing Conference Freiburg 2015 Tag 1 – Meine Notizen

Smashing Conference 2015 Freiburg Tag1

Die Talks am ersten Tag der Smashing Conference 2015 in Freiburg waren wieder sehr interessant und lehrreich. Ich habe für euch, so wie auch letztes Jahr, die wichtigsten Links, Zitate, Notizen, Slides und Buch-Tipps zusammengestellt.

Die Notizen beinhalten unter anderem folgende Themen: Modulares Design, Touch und Pointer Events, Laden von Fonts, die WebAudio API, e-Commerce Usability Tipps und Papierprototyping.

(mehr …)

Mehr lesen

Elemente mit CSS vertikal zentrieren

Ich melde mich aus der Sommerpause mit einem kleinen Tipp und einer Bitte zurück. Ich musste gestern ein Bild innerhalb eines div mit fixer Höhe vertikal zentrieren. Mein erster Gedanke war irgendeine Lösung mit position: relative und absolute. Ich wollte aber noch checken, ob es andere, bessere Lösungen gibt. Dann ist mir aber eingefallen, dass ich gar nicht erst suchen muss, weil ich die beste Lösung schon kenne, Flexbox.

HTML

<div>
    <img src="dasbild.jpg" />
</div>

CSS

div {
    width: 200px;
    height: 200px;

    display: flex;
    align-items: center;
}

Man macht das Elternelement zu einem Flexbox-Element und zentriert das Kindelement mit align-items: center;. Fertig. Ein Beispiel, inklusive 3 weiterer Techniken ohne Flexbox, habe ich auf codepen gestellt.

Und damit komme ich auch schon zu meiner Bitte: Fangt an mit Flexbox zu arbeiten. Die Browserunterstützung ist super und es gibt viele Lern- und Nachschlageressourcen, wie beispielsweise der css-tricks.com Artikel oder flexboxin5.com.

Mehr lesen