Einen Verzeichnisschutz mit .htaccess und .htpasswd einfach mittels Shell generieren

Eine der seltenen aber lästigen Aufgaben ist das Anlegen eines Verzeichnisschutzes auf dem Server. Für Apache-Server kann dies mit der Shell schnell erledigt werden. Dies hilft zum einen, wenn man SSH Zugriff auf den entsprechenden Server hat oder die Dateien erst lokal angelegt und dann auf den Server kopiert wird. Im Folgenden erkläre ich, wie dies schnell und einfach mit der Shell geht.

Google Material Design Button Effekt

Jemals gefragt, wie das mit den Button von Google Material Design funktioniert, dass abhängig von der Position des Klicks die Animation ausgeführt wird? Im Grunde gar nicht so kniffelig. Man nehme ein Button-Element, füge ein Element als Container und ein weiteres für die Animation selbst hinzu, dann noch CSS3 und ein wenig Javascript und schon ist die der Button reaktiv:

Weiches Scrollen bei overflow: auto auf iOS Geräten

Unter iOS haben Container mit einem overflow: auto; per default ein sehr hartes direktes Scrollen, welches sich lediglich synchron zum Wischen bewegt. Dieses Verhalten kann mittels
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
optimiert werden. Dieses Verhalten wird auch 'Momentum Scrolling' genannt. Hiermit wird das Weiterlaufen bei einem Wischen (swipe) bis zum langsamen Auslaufen aktiviert und wirkt wesentlich weicher.

Pure CSS Off-Canvas Navigation

Mit Hilfe des CSS3 Selektor :target lässt sich eine Off-Canvas Navigation mit reinem CSS, komplett ohne Javascript realisieren. Einziges Manko: Funktional wird es zwar ab dem Internet Explorer 9, die Animationen jedoch erst ab Internet Explorer 10 unterstützt.

Beschreibung

Im Grundzustand wird die Navigation mit dem negativen Wert der eigenen Breite aus dem Sichtbereich des Browsers geschoben.

Fira Font als System Font Alternative zu Helvetica Neue in OS X Yosemite (10.10)

Wer die Helvetica Neue als System Font in OS X Yosemite (10.10 ) nicht mag, kann diese auf verschiedene Weise gegen einen anderen Font austauschen. Unter https://github.com/jenskutilek/FiraSystemFontReplacement kann der präparierte Font Fira Sans von Erik Spiekermann und Ralph du Carrois heruntergeladen werden. Die Installation ist gänzlich einfach. Die 4 Dateien müssen lediglich in den Ordner Library/Fonts kopiert werden. Spätestens nach einer Neuanmeldung ist der neue Font aktiv.

CSS3: Selector :target

Der CSS3 Selector :target hat ein paar interessante use cases. Einer ist, dass man Ankerziele hervorhebt. (http://labs.jooon.de/css/selectors/target/) Das :target macht nichts anderes als zu checken, ob die URL ein Hashwert enthält und dazu ein passende ID existiert. mit dem :target wird dann das entsprechende Element angesprochen. :target dient also als eine Art "dynamischer" Selector für IDs. Neben dem Hervorheben von Anchorlinks gibt es noch weitere spannende Anwendungsmöglichkeiten. So ist es beispielsweise möglich Elemente rein durch CSS und HTML ein und auszublenden, ohne dass sie direkt verbunden sind.

Favicon und iOS Apple Launcher icons ganz einfach generieren lassen

iconifier ist ein wunderbares online Tool um automatisch alle notwendigen Apple Launcher icons für iOS und das Favicon einfach aus einer Datei generieren zu lassen. Die generierten Dateien inklusive Snippet für den Head werden als ZIP zum Download angeboten. Bislang ist keine Registrierung oder ähnliches notwendig. Ein überaus praktisches Tool für jedes Webprojekt: iconifier.net

Seiten