500px.com hat ein neues Design und auch eine neue Funktion, die sich „Flow“ nennt und offenbar recht präsent ist. Leider verstehe ich das noch nicht so ganz. Der Begriff taucht an zwei unterschiedlichen Stellen auf und erklärt wird es blöderweise auch nirgends so wirklich und einen Blogeintrag, der neue Funktionen und Design ankündigt, gibt es auch nicht.

Na immerhin ist es recht hübsch geworden, auch wenn mir hier und da die Einheitlichkeit fehlt und offenbar keine Sprites verwendet werden und dadurch einige Hoverstatus auf sich warten lassen.

Mir sieht das alles nach einem vielleicht aufgrund der Flickr-Ankündigung zu schnell veröffentlichten Update aus, das an der ein oder anderen Stelle nicht 100% zu Ende gedacht und/oder gemacht wurde.

Hamburg, 22. Februar 2012, iPhone 4S

Das neue Basecamp bekommt auch einen neuen, verbesserten Kalender. Und ich muss sagen, auch der sieht ziemlich vielversprechend aus. Endlich ein Kalender, durch den man statt um eine Monatsseite zu springen, einfach Woche für Woche nach unten scrollt. Außerdem zeigt er auf einen Blick sechs statt die üblichen vier Wochen. Ich bleibe dabei: Ich freue mich sehr auf das neue Basecamp. Veröffentlichung scheint nur noch ein paar Wochen entfernt zu sein.

Und hier könnt ihr den Kalender in Aktion sehen:

Christoph Boecken:

Birgit Engelhardt rief vor etwa einem halben Jahr zu einer kleinen Fotoaktion namens “Stille Post” auf. Sie fing mit einem Foto an, der nächste Teilnehmer pickte sich einen Aspekt aus dem Motiv heraus und machte damit ein neues Foto. Und so weiter und so fort.

Eine super gute Idee, die völlig an mir vorbei ging und ein wirklich tolles Ergebnis gebracht hat.

Nähe Kassel, 25. Dezember 2011, Leica M9

Im letzten Eintrag ging es um den Einsatz von HTML5 Placeholdern und eine jQuery Fallbackmöglichkeit. Heute will ich euch kurz und kann zeigen, wie ihr den Placeholdertext anders aussehen lassen könnt als den normalen Input-Text.

Soweit mir bekannt ist, gibt es die Möglichkeit nur für webkit-basierte Browser wie Chrome und Safari und für Firefox.

Die ersten beiden können ganz einfach über folgenden Selektor angesprochen werden.

input::-webkit-input-placeholder {
    color: #bbb;
}

Firefox hat einen ähnlichen Selektor, der wie folgt aussieht.

input:-moz-placeholder {
    color: #bbb;
}

Es ist noch wichtig zu sagen, dass ihr folgendes nicht machen dürft, da ein Browser aufhört den Code zu interpretieren, wenn er eine der beiden Anweisung nicht versteht, die ihr in eine Reihe schreibt.

input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #bbb;
}

Wusste ich auch nicht und suchte den Fehler irgendwann mal ewig, bis ich dann zu dieser Erkenntnis kam.

Hamburg, 17. Dezember 2011, Leica M9

Fotomarathon.de:

Ab Mitte April läuft die Anmeldung zum Marathon, Mitte Juni, genauer am 16. Juni 2012 ist dann Fotomarathon Tag und Mitte Juli werden alle Fotoserien in der Ausstellung präsentiert.

Der Fotomarathon Berlin geht in die zwölfte Runde. Ich habe ziemlich große Lust dieses Jahr daran teilzunehmen. Wie sieht’s bei euch aus?

Severin Koller:

I’ve been to Kigali (capital of Rwanda) and a few other places in the area, like eastern D.R.C and Uganda, for 8 weeks. From a photographic standpoint, I’ve learned a lot, being challenged in a completely different way than before. After shooting street in places like Paris, Los Angeles, New York, Berlin, Vienna, Las Vegas… shooting in a place where all eyes are on you, no matter what you do was definitely something else.

Severin Koller, den ich gerade noch im Interview hatte, haut mal wieder einen seiner langen Blogposts raus. Wie immer lohnt es sich etwas mehr Zeit zu investieren.

Ihr kennt alle den schönen Effekt, wenn man in ein Eingabefeld klickt und der Text darin verschwindet. Bei einem Anmeldeformular zum Beispiel steht in einem Feld Username, man klickt rein und der Platzhalter verschwindet. Gibt man nichts ein und klickt wieder außerhalb des Feldes, dann steht der ursprüngliche Text wieder drin.

Dieser Effekte musste immer per JavaScript erzeugt werden. Dank HTML5 und dem placeholder-Attribut geht das mittlerweile für aktuelle Browser (Chrome, Safari ab Version 4, Firefox ab Version 7, Opera ab Version 11.5) auch einfacher.

Mal angenommen wir haben ein einfaches Input-Feld mit einem vor definierten Inhalt.

<input type="text" value="Vorname" />

Wenn man jetzt in das Feld klickt passiert nichts. Man muss Vorname selbst rauslöschen um den eigenen Namen eingeben zu können. Das ist natürlich ziemlich blöd. Um das einfach und schnell zu lösen benutzen wir einfach statt value, placeholder.

<input type="text" placeholder="Vorname">

Die komplette restliche Arbeit nimmt uns HTML5 ab. Klick ins Feld und wir können unseren Namen eintragen und Vorname verschwindet. Tragen wir nichts ein und klicken außerhalb des Feldes steht weiterhin Vorname drin. Alles ganz ohne JavaScript.

Wer möchte, dass das ganze auch im Internet Explorer funktioniert, für den gibt es das jQuery Plugin Placeholder. Einfach jQuery, das Plugin sowie eine eigene scripts.js für unseren Code einbinden…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.placeholder.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

… und dann noch das Plugin in der scripts.js aufrufen. Fertig.

$(document).ready(function(){
    $('input, textarea').placeholder();
});

Das ersetzt dann in alten Browsern bei allen Inputfelder und Textareas den placeholder. Man könnte das natürlich auch nur auf einzelne Felder anwenden, z.B:

$(document).ready(function(){
    $('#search').placeholder();
});

Viel Spaß damit. Ich nutze es andauernd und es macht die ätzende Arbeit mit Formularen ein Stück angenehmer.