Automatisches Selektieren eines Textsnippets

Dass es bald eine read-only API für QUOTE.fm geben wird ist ein offenes Geheimnis und daher baue ich gerade den Labs-Bereich in dem die API erklärt wird, man eigene Apps anlegen kann und später auch diverse Snippets für die eigene Webseite findet.

Wer zum Beispiel schon mal mit der Twitter API gearbeitet hat, weiß, dass man für jede App, die man anlegt diverse geheime Codes bekommt, die man dann kopieren und irgendwo in den eigenen Code einfügen muss. Teilweise beinhalten dieses Codes so seltsame Zeichen, dass ein schnelles Markieren per Doppelklick nicht möglich ist. Natürlich kann man den Text dann auch ganz normal markieren und kopieren. Oft nervt das aber und hält unnötig auf.

Es gibt eine – wahrscheinlich auch noch tausend andere – Möglichkeit, das schneller und einfacher zu machen. Deswegen wird man in der QUOTE.fm API einfach irgendwo in den Code klicken können und hat automatisch die komplette Zeile markiert und kann sie kopieren. Nur ein Detail, was die Arbeit aber etwas angenehmer macht, da man sowieso immer den kompletten Schlüssel braucht.

Die Lösung dafür ist ganz simpel. Statt irgendeines anderen Containers nehmen wir für den Code einfach ein input-Feld, setzen es auf readonly und stylen es als wäre es normaler Text.

<input class="key select" type="text" value="bYRlJaCBHJaksjdhaAS)(§Uk8o6IfbQMemhW7TOQ" readonly />

Das dazugehörige CSS:

.key {
    width: 100%;
    color: #3c3c3c;
    font-family: 'Monaco','Courier',monospace;
    font-size: 15px;
    line-height: 15px;
    border: 1px solid bold;
    font-style: italic;
}

Soweit sind wir optisch fertig. Jetzt brauchen wir nur noch einen jQuery Schnipsel und fertig sind wir. Und jQuery einbinden nicht vergessen.

$('.select').click(function(){
    $(this).select();
});

Wenn wir also irgendwo auf der Webseite einen Text automatisch ausgewählt haben wollen, können wir einfach die Klasse .select vergeben und brauchen uns nicht weiter um irgendwas kümmern.
In diesem Fall hätte ich mir eine der beiden Klassen sparen können, in einem größeren Projekt ergibt die Aufteilung aber durchaus Sinn. Viel Spaß damit!

Den Trick verwendet dribbble übrigens auch auf den Einzelseiten für die Permalink urls.

Update: Habe es auch mal kurz bei jsfiddle gebaut, damit ihr es testen könnt.

AnalogRev feat. Eric Kim with Leica M6 & M2

Es gibt nicht wirklich was zu lernen, ist aber sehr unterhaltsam Kaiman Wong und Eric Kim durch die Straßen Hong Kongs zu begleiten.

Zack Arias testet die Fuji X-Pro1

Zack Arias:

As always, I won’t be counting pixels or describing bayer patterns or burning villages because of menu layouts. I’ll let you know how it actually works in the real world instead of a testing facility with Macbeth color charts and thrift store knick knacks. Off to find some squirrels.

Zack Arias kündigt an, dass er eine Preproduction Fuji X-Pro 1 bekommen hat und sie in den nächsten drei Wochen ausgiebig testen wird. Ich freue mich sehr auf seine Meinung. Sein Bericht über die X100 hat nämlich damals deutlich zu meinem Kauf beigetragen.

Glashaus

Hamburg, 17. Dezember 2011, Leica M9

QUOTE.fm ist offen

Es kann sich jetzt jeder auf QUOTE.fm anmelden, lesenswerte Texte finden, selbige empfehlen und mit anderen darüber diskutieren.
Wir sind sehr glücklich mit diesem – relativ großen – Schritt und hoffen ihr nutzt die Plattform und ihre Möglichkeiten ausgiebig und habt ebenso viel Spaß dabei wie wir bei der Entwicklung haben.

Offscreen Mag No 1

Offscreen ist ein gerade in Ausgabe 1 erschienenes gedrucktes Magazin über die Menschen hinter Webseiten und Apps.
Der Druck ist super, das Layout schön und der Inhalt – soweit ich das beurteilen kann – sehr gut. In der ersten Ausgabe geht es unter anderem um Dan Cederholm, Benjamin de Cock und Soundcloud.

Ich bekam meine Ausgabe heute. Nicht zögern, bestellen: Offscreen

Neues 500px.com

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.

Real Life Superhero

Hamburg, 22. Februar 2012, iPhone 4S

Basecamp: Neuer Kalender

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:

Ergebnisse des Fotoprojekts “Stille Post” von Birgit Engelhardt online

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.