<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Wanderwort by Roman Ernst</title>
	<atom:link href="http://wanderwort.de/feed/" rel="self" type="application/rss+xml" />
	<link>http://wanderwort.de</link>
	<description>Interkulturelle Wortkolletionen in Ruby, PHP, XHTML, CSS nah am Strom der Gesellschaft</description>
	<lastBuildDate>Mon, 14 Mar 2011 15:10:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Der Mob &amp; direkte digitale Demokratie</title>
		<link>http://wanderwort.de/2011/01/21/der-mob-direkte-digitale-demokratie/</link>
		<comments>http://wanderwort.de/2011/01/21/der-mob-direkte-digitale-demokratie/#comments</comments>
		<pubDate>Fri, 21 Jan 2011 13:07:34 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gedachtes]]></category>
		<category><![CDATA[Demokratie]]></category>
		<category><![CDATA[Meinung]]></category>
		<category><![CDATA[Politik]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=332</guid>
		<description><![CDATA[Kameraüberwachung in Dresden (Bildquelle)Die politische Elite steht unter Druck, am Stammtisch und im digitalen Netzwerk radikalisieren sich die Meinungen. Zeitweise beherrschen Knüppel und Blut vielerorts deutsche Strassen. Seitdem 1992 Politikverdrossenheit zum Wort des Jahres erklärt wurde, passte das lange zu unserem allgemeinen Selbstverständnis als deutscher Michel. Politik: das wollten wir nicht, das konnten wir nicht, [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://wanderwort.de/?p=332"><img src="http://wanderwort.de/wp-content/uploads/2011/01/171865-300x200.jpg" alt="" title="Kameraüberwachung" width="300" height="200" class="alignleft size-medium wp-image-336" style="margin: 5px 15px 2px 0" /></a><a href="http://de.indymedia.org/2007/03/170402.shtml" class="alignleft" style="font-size: 60%; margin: 0 15px 5px 0; width: 296px; display: inline-block;">Kameraüberwachung in Dresden (Bildquelle)</a>Die politische Elite steht unter Druck, am Stammtisch und im digitalen Netzwerk radikalisieren sich die Meinungen. Zeitweise beherrschen Knüppel und Blut vielerorts deutsche Strassen.<br />
Seitdem 1992 <em>Politikverdrossenheit</em> zum Wort des Jahres erklärt wurde, passte das lange zu unserem allgemeinen Selbstverständnis als deutscher Michel. Politik: das wollten wir nicht, das konnten wir nicht, dafür war uns die Zeit zu schade. Facetten einer US-Amerikanern zugeschriebenen Eigenschaft blühten in deutschen Einfamilienhäusern. Im Land der unbegrenzten Möglichkeiten, wie nun hier, liege es zu allererstes in unserer eigenen, direkten Verantwortung wie wir leben und wie es uns geht. Repräsentanten des Volkes wurden offenbar einzig auf die Funktion ihrer internationalen und medialen Repräsentation degradiert.</p>
<p>Umso verhängnisvoller muss das Erlebnis einer zusammenbrechenden Finanzwelt in unsere Köpfe geprescht sein. <span id="more-332"></span>Die politische Elite, offenbar der gesamten westliche Welt, ist einer lethargischen laissez-faire Mentalität verfallen. Nach dem Motto &#8220;<em>Die lassen uns in Ruhe, lassen wir die also auch in Ruhe</em>&#8221; konnten sich Bürger und Politiker aufeinander verlassen. Solange dies auf beiden Seiten fair genutzt würde, mag dieses Konzept wohlmöglich eine gelungene Alternative zum in der Sekundarstufe vermittelten Demokratieverständnis darstellen. Jeder Mensch allerdings, der sich neben seiner selbst auch mit seiner Umwelt beschäftigt, muss festgestellt haben, dass Menschen nicht unentwegt gemeinnützig handeln. So konnte es kommen, dass “<em>Finanzexperten</em>” mit unserem Geld Wolkenberge versetzen und unsere hiesigen Politiker ungeachtet und auf Grundlage vielfältiger, medial vermittelter Terrorängste unsere Bürgerrechte einschränken.</p>
<p>Augenscheinlich mussten wir diesen Knall erleben, damit auch der letzte Industrielandbürger sich die Mütze aus dem Gesicht zieht. Und plötzlich fragen sich alle wie das passieren konnte. Dabei hat es uns “einfache” Bürger doppelt getroffen: Zum einen unterstehen wir der permanent möglichen Überwachung durch Staatsorgane, haben wegen steigender Steuerbelastungen weniger im Portemonnaie und müssen uns zu allem Übel auch noch damit abfinden, dass unsere Mitbürger und internationalen Partner unsere Altersrücklagen in Form von Aktien umverteilt haben. Umverteilt in dem Sinne, dass der, der viel hatte, jetzt noch mehr hat und umgekehrt.</p>
<p>Der deutsche Michel, nun auch noch der dumme August, kramt jetzt voller Wut die Mistgabel aus seinem Vollholz-Wohnzimmerschrank. Redner der Opposition laufen mit Fackeln vorweg. Seit Jahrzehnten geplante Projekte wie die Bahnofsmodernisierung in Stuttgart, der eigentlich permanent währende Castor-Transport nach Gorleben, das verzögerte Renteneintrittsalter, der Krieg den wir im nahen Osten führen, sehen sich plötzlich einem wütenden Mob gegenüber, der aufgewacht aus seinem Zweiten-Frühstücks-Mittagsschlaf, sich bei den Entscheidungen übergangen fühlt.</p>
<p>Die Politikverdrossenheit ist Vergangenheit. Jetzt wird nach Vergeltung gerufen und das Wort des Jahres 2010 sollte eigentlich “Politikhass” werden. Ein Großteil der Bevölkerung wähnt sich bei der Opposition bestätigt. Der andere Teil streut seine Brandreden am Stammtisch oder im digitalen Netzwerk. Das sich an unserem Politik- und Demokratieverständnis in den letzten 100 Jahren einiges geändert hat ist vielleicht nicht ganz so offensichtlich wie die Tatsache, dass Kommunikation, Meinungsbildung und politische Partizipation heute nicht mehr zu vergleichen sind mit Begebenheiten von vor 100 Jahren. Da ist es schwer zu verstehen, wieso beruhend auf diesen Erkenntnissen der aktuelle politische Diskurs immer noch von überholten Argumenten und einer abgehobenen Elite bestimmt wird.</p>
<p><a href="http://wanderwort.de/wp-content/uploads/2011/01/people-network.jpeg"><img src="http://wanderwort.de/wp-content/uploads/2011/01/people-network.jpeg" alt="" title="Partiziptation" width="300" height="300" class="alignright size-full wp-image-362" style="margin: 5px 0 4px 15px; -moz-box-shadow: inherit; -webkit-box-shadow: inherit;" /></a><a href="http://ozgekaraoglu.edublogs.org/2010/01/05/100-web-tools-to-enhance-collaboration-part-1" class="alignright" style="font-size: 60%; margin: 0 0 15px 15px; width: 296px; display: inline-block;">Partizipation durch digitale Netzwerke (Bildquelle)</a>Wenn unsere Kommunikation heute so massiv von digitalem Austausch bestimmt wird, wieso finden sich diese Modelle im politischen Diskurs höchsten in der Kritik? Diese Divergenz zwischen politischem und gesellschaftlichem Leben ist dann die wahrscheinlichste Begründung für das Unverständnis, das unsere demokratisierte Gesellschaft wieder droht zu spalten. Aus Angst und gefühlter Machtlosigkeit retten wir uns in radikale Phrasen.</p>
<p>Klingt es nicht sinnvoller, dass in Zeiten wie diesen, wir demokratische Grundsätze an die Kirchentür nageln sollten? Emanzipation und Partizipation des Individuums könnten uns aus der Krise retten. Politische Lager sind in einer multilateralen Welt mit mannigfaltig gebildeten und interessierten Bürgern ein veraltetes Prinzip bei dem es uns nicht wundern dürfte, dass sich niemand mehr mit einer Partei identifizieren mag. Der digitale Zugang zu einem nie da gewesenen Informationsschatz und die finanziellen Spielräume die wir genießen, schließen beinahe aus, dass sich ein junger Kosmopolit in ein nationales, politisches Parteikorsett zwängen würde.<br />
Wieso sollten wir Kompromiss in der Fraktion suchen, wenn wir doch auch mit unserer, vielleicht komplexen oder radikalen, Ansicht auch so Gehör finden? Unsere digitalen Netzwerke sind voller politischer Identität, voller Motivation. Dass diese neuen Wege der politischen Kommunikation nicht nur ignoriert, sondern bisweilen sogar bekämpft werden, grenzt an Verblendung. </p>
<p>Scheint es nicht naheliegend, dass eine institutionelle, parteienbestimmte politische Landschaft ein veraltetes Modell ist, das dem Demokratieanspruch junger Generationen und unserer schnelllebigen Welt nicht gerecht wird?<br />
Dass es noch nicht lange her ist, dass wir diese Organisations- und Polarisierungsorgane benötigten um nicht dem Chaos zu verfallen, ist zu begreifen. Nun müssen wir allerdings endlich anfangen die politische Verantwortung durch unsere digitale Vernetzung wieder näher an den Bürger zu bringen. Wäre dies geschafft, könnte auch niemand mehr fluchen, dass “die da Oben” gegen seinen Willen handeln.</p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2011/01/21/der-mob-direkte-digitale-demokratie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dynamic model based styles for Paperclip</title>
		<link>http://wanderwort.de/2010/10/29/dynamic-model-based-styles-for-paperclip-attachments/</link>
		<comments>http://wanderwort.de/2010/10/29/dynamic-model-based-styles-for-paperclip-attachments/#comments</comments>
		<pubDate>Fri, 29 Oct 2010 12:40:04 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=321</guid>
		<description><![CDATA[One might want to set up dynamic attachment dimensions (or other styles) when generating images with thoughtbot&#8217;s paperclip. Styles in paperclip are basically represented in the :styles hash of has_attached_file: class File has_attached_file&#40; :attachment, :styles =&#62; &#123; :thumb =&#62; &#34;100x100&#34; &#125; &#41; end Building a related size model in rails might look the following: class [...]]]></description>
			<content:encoded><![CDATA[<p>One might want to set up dynamic attachment dimensions (or other styles) when generating images with <a href="http://github.com/thoughtbot/paperclip">thoughtbot&#8217;s paperclip</a>. Styles in paperclip are basically represented in the <code>:styles</code> hash of <code>has_attached_file</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> <span style="color:#CC00FF; font-weight:bold;">File</span>
  has_attached_file<span style="color:#006600; font-weight:bold;">&#40;</span>
    <span style="color:#ff3333; font-weight:bold;">:attachment</span>,
    <span style="color:#ff3333; font-weight:bold;">:styles</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:thumb</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;100x100&quot;</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Building a related size model in rails might look the following:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> <span style="color:#CC00FF; font-weight:bold;">File</span> <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  has_many <span style="color:#ff3333; font-weight:bold;">:sizes</span>, <span style="color:#ff3333; font-weight:bold;">:class_name</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;FileSize&quot;</span>, <span style="color:#ff3333; font-weight:bold;">:dependent</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:destroy</span>
&nbsp;
  has_attached_file<span style="color:#006600; font-weight:bold;">&#40;</span>
    <span style="color:#ff3333; font-weight:bold;">:attachment</span>,
    <span style="color:#ff3333; font-weight:bold;">:styles</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#008000; font-style:italic;"># styles through FileSize model</span>
  <span style="color:#006600; font-weight:bold;">&#41;</span>
&nbsp;
  <span style="color:#9966CC; font-weight:bold;">def</span> styles
   <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">sizes</span>.<span style="color:#9900CC;">inject</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:thumb</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;100x100&quot;</span> <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>sizes, size<span style="color:#006600; font-weight:bold;">|</span>
      sizes<span style="color:#006600; font-weight:bold;">&#91;</span>:<span style="color:#996600;">&quot;#{size.id}&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#996600;">&quot;#{size.width}x#{size.height}&quot;</span>; sizes
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">class</span> FileSize <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  belongs_to <span style="color:#ff3333; font-weight:bold;">:file</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Using a <strong>Proc</strong> we can fetch sizes from our <code>FileSize</code> model:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">  has_attached_file<span style="color:#006600; font-weight:bold;">&#40;</span>
    <span style="color:#ff3333; font-weight:bold;">:attachment</span>,
    <span style="color:#ff3333; font-weight:bold;">:styles</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#CC0066; font-weight:bold;">Proc</span>.<span style="color:#9900CC;">new</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#006600; font-weight:bold;">|</span>clip<span style="color:#006600; font-weight:bold;">|</span> clip.<span style="color:#9900CC;">instance</span>.<span style="color:#9900CC;">styles</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

<p><code>Clip</code> is the Paperclip instance which holds an <code>instance</code>-method to get back to the calling Class.</p>
<p>As a last issue one might want to reprocess / regenerated images after creating or destroying sizes:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> FileSize <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  belongs_to <span style="color:#ff3333; font-weight:bold;">:file</span>
&nbsp;
  after_create  <span style="color:#ff3333; font-weight:bold;">:reprocess</span>
  after_destroy <span style="color:#ff3333; font-weight:bold;">:reprocess</span>
&nbsp;
  private
&nbsp;
  <span style="color:#9966CC; font-weight:bold;">def</span> reprocess
    <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">file</span>.<span style="color:#9900CC;">attachment</span>.<span style="color:#9900CC;">reprocess</span>!
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/10/29/dynamic-model-based-styles-for-paperclip-attachments/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Iterate over Associative Arrays in Bash</title>
		<link>http://wanderwort.de/2010/06/24/iterate-over-assoziative-arrays-in-bash/</link>
		<comments>http://wanderwort.de/2010/06/24/iterate-over-assoziative-arrays-in-bash/#comments</comments>
		<pubDate>Thu, 24 Jun 2010 19:59:23 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Bash]]></category>
		<category><![CDATA[Mac OS]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=299</guid>
		<description><![CDATA[Probably because many people think Bash is outdated it&#8217;s that hard to find proper resources digging into this Shell. Now we&#8217;ll have a look at an associative array and use each key to rename a file defined in value one got via wget. Beware: Take a look at the OS X issues at the end [...]]]></description>
			<content:encoded><![CDATA[<p>Probably because many people think Bash is outdated it&#8217;s that hard to find proper resources digging into this Shell. Now we&#8217;ll have a look at an <a href="http://en.wikipedia.org/wiki/Associative_array">associative array</a> and use each <em>key</em> to rename a file defined in <em>value</em> one got via <a href="http://en.wikipedia.org/wiki/Wget">wget</a>.</p>
<p><b style="color: red">Beware</b>: Take a look at the OS X issues at the end of this article if working on a Mac!</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#!/bin/bash</span>
<span style="color: #7a0874; font-weight: bold;">unset</span> array; <span style="color: #7a0874; font-weight: bold;">declare</span> <span style="color: #660033;">-A</span> array <span style="color: #666666; font-style: italic;"># the -A attributes stands for associative</span>
&nbsp;
array<span style="color: #7a0874; font-weight: bold;">&#91;</span>foo<span style="color: #7a0874; font-weight: bold;">&#93;</span>=bar
array<span style="color: #7a0874; font-weight: bold;">&#91;</span><span style="color: #ff0000;">&quot;spaced string&quot;</span><span style="color: #7a0874; font-weight: bold;">&#93;</span>=<span style="color: #ff0000;">&quot;foo bar&quot;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">for</span> i <span style="color: #000000; font-weight: bold;">in</span> <span style="color: #800000;">${!array[@]}</span>
<span style="color: #000000; font-weight: bold;">do</span>
  <span style="color: #666666; font-style: italic;"># do something</span>
<span style="color: #000000; font-weight: bold;">done</span></pre></div></div>

<p>This is how an iteration could look like. Have a look at <a href="http://wiki.bash-hackers.org/syntax/arrays">bash-hackers.org</a> to get more information. Thanks to <a href="http://blog.denniswilliamson.us/">Dennis Williamson</a> solving <a href="http://stackoverflow.com/questions/3112687/how-to-iterate-over-assoziative-array-in-bash">this topic</a>.</p>
<p>To get a file from the given URL perform the following command in the loop:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">wget</span> <span style="color: #ff0000;">&quot;<span style="color: #007800;">${array[$i]}</span>&quot;</span> <span style="color: #660033;">-O</span> <span style="color: #ff0000;">&quot;<span style="color: #007800;">${i}</span>.jpg&quot;</span></pre></div></div>

<p>The attribute <em>-O</em> renames the file.</p>
<p>Using variables outside Strings obviate the need for curly brackets so that $i would work as well.<br />
<b>Go on reading if you&#8217;re using a Mac:</b><br />
<span id="more-299"></span><br />
<b>Mac OS X Issues</b><br />
The given example and associative arrays in bash require a Bash version greater than 4.0. OS X (Leopard) gets shipped with version 3.2.48(1). So we either have to install a newer Bash Version manually <a href="http://concisionandconcinnity.blogspot.com/2009/03/upgrade-bash-to-40-in-mac-os-x.html">as described by Ian McCracken</a> or use a package installer like <a href="http://www.finkproject.org/">Fink</a>, <a href="http://www.macports.org/">MacPorts</a> or <a href="http://mxcl.github.com/homebrew/">Homebrew</a>. As I am a Homebrew fanboy, here&#8217;s how to brew it:</p>
<p><b>Installing Bash > 4.0 with Homebrew</b></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">$ brew <span style="color: #c20cb9; font-weight: bold;">install</span> <span style="color: #c20cb9; font-weight: bold;">bash</span> <span style="color: #666666; font-style: italic;"># definitely gets a newer version than 4.0:</span>
$ <span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">bash</span> <span style="color: #660033;">-c</span> <span style="color: #ff0000;">&quot;echo /usr/local/Cellar/bash/%INSTALLED_VERSION%/bin/bash &gt;&gt; /private/etc/shells&quot;</span> <span style="color: #666666; font-style: italic;"># register the new Bash as a valid Shell</span>
$ <span style="color: #c20cb9; font-weight: bold;">chsh</span> <span style="color: #666666; font-style: italic;"># use the new Shell for your user</span></pre></div></div>

<p>In the chsh file you simply enter the path you&#8217;ve installed and registered the shell to.</p>
<p>You might also have to install wget because Mac OS comes without this handy tool as well:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">$ brew <span style="color: #c20cb9; font-weight: bold;">install</span> <span style="color: #c20cb9; font-weight: bold;">wget</span></pre></div></div>

<p><b style="color: red">IMPORTANT:</b><br />
In your scripts you also have to define the new path of Bash! E.g:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#!/usr/local/Cellar/bash/%INSTALLED_VERSION%/bin/bash</span>
&nbsp;
some_bash_code</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/06/24/iterate-over-assoziative-arrays-in-bash/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cross-Domain with Sinatra / Rack and JSONP</title>
		<link>http://wanderwort.de/2010/03/25/sinatra-rack-with-jsonp/</link>
		<comments>http://wanderwort.de/2010/03/25/sinatra-rack-with-jsonp/#comments</comments>
		<pubDate>Thu, 25 Mar 2010 00:45:35 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Rack]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[Sinatra]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=284</guid>
		<description><![CDATA[There are several situations one might want to do cross-domain (/cross-site) AJAX-requests. Probably you experience the security borders of modern browsers very fast. JSONP is a hack for JSON that provides a great workaround. It means sending a callback with the URL (eg. ?callback=sampleFunction). Server-sided we setup our application to respond with a JSON body [...]]]></description>
			<content:encoded><![CDATA[<p>There are several situations one might want to do cross-domain (/cross-site) <a href="http://de.wikipedia.org/wiki/Ajax_(Programmierung)">AJAX</a>-requests. Probably you experience the security borders of modern browsers very fast.<br />
<a href="http://en.wikipedia.org/wiki/JSONP#JSONP">JSONP</a> is a hack for <a href="http://www.json.org/">JSON</a> that provides a great workaround. It means sending a callback with the URL (eg. ?callback=sampleFunction). Server-sided we setup our application to respond with a JSON body wrapped in a function named like our callback function. In this case</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">sampleFunction<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #3366CC;">&quot;ourData&quot;</span><span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #3366CC;">&quot;title&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;is an array&quot;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">&quot;title&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;...&quot;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span>   
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<h3>What we have to do (Sample)</h3>
<p><b>Frontend</b><br />
JS-Frameworks like <a href="http://jquery.com/">jQuery</a> are smart enough to send such requests with ease. Lets write a simple function with jQuery:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'get'</span><span style="color: #339933;">,</span>
  url<span style="color: #339933;">:</span> <span style="color: #3366CC;">'file.json'</span><span style="color: #339933;">,</span>
  dataType<span style="color: #339933;">:</span> <span style="color: #3366CC;">'jsonp'</span><span style="color: #339933;">,</span>
  success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    doSomethingWith<span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p><b>Let&#8217;s see how to setup the server:</b><br />
Using <a href="http://www.ruby-lang.org/en/">Ruby</a> and <a href="http://rack.rubyforge.org/">Rack</a> it becomes very simple to beautifully provide regular JSON for non-JSONP clients and JSONP for jQuery &#038; Co.<br />
Simply use the rack middleware <a href="http://github.com/rack/rack-contrib/">rack-contrib by Ryan Tomayko</a></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">gem <span style="color: #c20cb9; font-weight: bold;">install</span> rack-rack-contrib <span style="color: #660033;">--source</span>=http:<span style="color: #000000; font-weight: bold;">//</span>gems.github.com<span style="color: #000000; font-weight: bold;">/</span></pre></div></div>

<p>If you&#8217;re using pure rack, put this in your config.ru</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#CC0066; font-weight:bold;">require</span> <span style="color:#996600;">'rack/contrib/jsonp'</span>
use <span style="color:#6666ff; font-weight:bold;">Rack::JSONP</span></pre></div></div>

<p>Using <a href="http://www.sinatrarb.com/">Sinatra</a>, I&#8217;d put it somewhere with my config files.<br />
Let&#8217;s see how a sample <a href="http://www.sinatrarb.com/">Sinatra</a> application could look like:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#CC0066; font-weight:bold;">require</span> <span style="color:#996600;">'sinatra'</span>
<span style="color:#CC0066; font-weight:bold;">require</span> <span style="color:#996600;">'json'</span>
<span style="color:#CC0066; font-weight:bold;">require</span> <span style="color:#996600;">'rack/contrib/jsonp'</span>
&nbsp;
use <span style="color:#6666ff; font-weight:bold;">Rack::JSONP</span>
&nbsp;
before <span style="color:#9966CC; font-weight:bold;">do</span>
  content_type <span style="color:#ff3333; font-weight:bold;">:json</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
get <span style="color:#996600;">'/posts'</span> <span style="color:#9966CC; font-weight:bold;">do</span>
  Posts.<span style="color:#9900CC;">find</span>.<span style="color:#9900CC;">to_a</span>.<span style="color:#9900CC;">to_json</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>That simple, this powerful.</p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/03/25/sinatra-rack-with-jsonp/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>InDesign: Sprache für ganzes Dokument ändern</title>
		<link>http://wanderwort.de/2010/03/08/indesign-sprache-fur-ganzes-dokument-andern/</link>
		<comments>http://wanderwort.de/2010/03/08/indesign-sprache-fur-ganzes-dokument-andern/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 14:37:57 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Arbeit]]></category>
		<category><![CDATA[InDesign]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=262</guid>
		<description><![CDATA[Es gibt zwei Möglichkeiten die Sprache für das Text- und Absatzformat in InDesign zu ändern. Wenn wir allerdings nicht für jedes Textfeld die Sprache ändern wollen, müssen wir uns eines Workarounds bedienen. Schließlich gibt es kein &#8220;Sprache für Dokument ändern&#8221;. Dann wollen wir mal: Wir gehen in unser Menü: Bearbeiten -> Suchen/Ersetzen (bzw. MacOS: ⌘+F, [...]]]></description>
			<content:encoded><![CDATA[<p><a href="/2010/03/08/indesign-sprache-fur-ganzes-dokument-andern/"><img src="http://www.adobe.com/accessibility/products/indesign/images/indesign_cs4_150x150.jpg" alt="InDesign" style="float: left;margin: 0 10px 10px 0"/></a> Es gibt zwei Möglichkeiten die Sprache für das Text- und Absatzformat in InDesign zu ändern. Wenn wir allerdings nicht für jedes Textfeld die Sprache ändern wollen, müssen wir uns eines Workarounds bedienen. Schließlich gibt es kein &#8220;Sprache für Dokument ändern&#8221;. Dann wollen wir mal:<br />
<span id="more-262"></span>Wir gehen in unser Menü: Bearbeiten -> Suchen/Ersetzen<br />
(bzw. MacOS: ⌘+F, Windows: CTRL+F)</p>
<p><img src="http://wanderwort.de/wp-content/uploads/2010/03/4erweiterte-optionen.png" alt="" title="4erweiterte-optionen" width="569" height="448" class="alignnone size-full wp-image-263" /></p>
<p>Man bediene sich der erweiterten Suchoptionen und kommt so zur nächsten Ansicht:</p>
<p><img src="http://wanderwort.de/wp-content/uploads/2010/03/5sprache-auswaehlen2.png" alt="" title="5sprache-auswaehlen" width="600" height="343" class="alignnone size-full wp-image-271" /></p>
<p>Nun wählen wir für die Suchoption unsere zu ersetzende Sprache aus, die im Dokument geführt wird. Die Auswahl wird mit OK bestätigt und im nächsten Schritt geben wir für das Ersetzen die Zielsprache auf die gleiche Weise ein. Wenn alles richtig lief, sieht das Suchen/Ersetzen-Fenster nun so aus:</p>
<p><img src="http://wanderwort.de/wp-content/uploads/2010/03/6optionen-ausgefuellt.png" alt="" title="6optionen-ausgefuellt" width="569" height="448" class="alignnone size-full wp-image-265" /></p>
<p>Wunderbar. Um das ganze Dokument zu ändern, muss bei &#8220;Durchsuchen&#8221; auch &#8220;Dokument&#8221; eingestellt sein!<br />
Mit &#8220;Alle ändern&#8221; stellen wir nun unser Dokument auf die neue Sprache um. </p>
<p>In allen Textfelder sollte nun, wenn wir das Textwerkzeug (T) benutzen, in den Optionen die neue Sprache erscheinen:</p>
<p><img src="http://wanderwort.de/wp-content/uploads/2010/03/2sprachauswahl.png" alt="" title="2sprachauswahl" width="600" height="45" class="alignnone size-full wp-image-275" /></p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/03/08/indesign-sprache-fur-ganzes-dokument-andern/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Erfolg im Leben</title>
		<link>http://wanderwort.de/2010/02/09/erfolg-im-leben/</link>
		<comments>http://wanderwort.de/2010/02/09/erfolg-im-leben/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 20:50:54 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemischtes]]></category>
		<category><![CDATA[Absurd]]></category>
		<category><![CDATA[Hamburg]]></category>
		<category><![CDATA[Verrückt]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=248</guid>
		<description><![CDATA[Es kann so einfach sein.. Werbung von Morgen. Aufgenommen: Bf Hamburg Altona (neben Mc Donalds) &#8211; &#8220;Werbekasten&#8221; Update via @MrRaffnix &#8211; so macht man&#8217;s richtig:]]></description>
			<content:encoded><![CDATA[<p>Es kann so einfach sein.. Werbung von Morgen.</p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/02/erfolg_small.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/02/erfolg_small.jpg" alt="Erfolg im Leben" title="erfolg_small" width="600" height="474" class="alignnone size-full wp-image-249" /></a></p>
<div style="text-align: right">Aufgenommen: Bf Hamburg Altona (neben Mc Donalds) &#8211; &#8220;Werbekasten&#8221;</div>
<p><ins datetime="2010-02-11T16:10:30+00:00"><br />
Update via <a href="http://twitter.com/MrRaffnix">@MrRaffnix</a> &#8211; so macht man&#8217;s richtig:</p>
<p></ins><span id="more-248"></span><ins datetime="2010-02-11T16:10:30+00:00"><img src="http://wanderwort.de/wp-content/uploads/2010/02/guerilla-marketing-hochsicherheitsglas.jpeg" alt="" title="guerilla-marketing-hochsicherheitsglas" width="475" height="592" class="alignnone size-full wp-image-259" /><br />
</ins></p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/02/09/erfolg-im-leben/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Brief an einen Freund</title>
		<link>http://wanderwort.de/2010/02/08/brief-an-einen-freund/</link>
		<comments>http://wanderwort.de/2010/02/08/brief-an-einen-freund/#comments</comments>
		<pubDate>Mon, 08 Feb 2010 13:18:56 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gedachtes]]></category>
		<category><![CDATA[Freunde]]></category>
		<category><![CDATA[Menschen]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=233</guid>
		<description><![CDATA[Um herauszufinden, was du willst, musst du bewusster leben &#8211; nicht danach suchen. Denn erst Erlebtes lässt sich reflektieren. Leben ist permanent in Bewegung zu bleiben. Studien haben ergeben, dass sportliche Menschen, denen man mehrere Wochen lang Faulenzen verordnet hat, schon nach kürzester Zeit schwere physische Mängelerscheinungen aufwiesen. Ich bin mir trotz fehlenden Studien sicher, [...]]]></description>
			<content:encoded><![CDATA[<p>Um herauszufinden, was du willst, musst du bewusster leben &#8211; nicht danach suchen. Denn erst Erlebtes lässt sich reflektieren. Leben ist permanent in Bewegung zu bleiben.<br />
Studien haben ergeben, dass sportliche Menschen, denen man mehrere Wochen lang Faulenzen verordnet hat, schon nach kürzester Zeit schwere physische Mängelerscheinungen aufwiesen. Ich bin mir trotz fehlenden Studien sicher, dass genau dies auch mit deiner Psyche passiert wenn du deinen Geist zu Bette trägst. Am ehesten passiert dies, wenn du dich auf Erreichtem ausruhst. Was dein Körper dir mit schwammigen Polstern verbucht, endet für dein Wesen in einer erträglichen, unbewussten Einfalt. Die Seligkeit scheint omnipräsent &#8211; ist aber zerbrechlich wie Porzellan. Es ist einfacher.</p>
<p>Reflektierst du diese Hypothese auf deine Beziehungen, wirst du ganz ähnliche Zusammenhänge erkennen. Insbesondere partnerschaftliche Beziehungen können unter der enormen Last der Unbedarftheit bersten. Die Schlichtheit einer Beziehung ist bester Nährboden für Glückseligkeit. Wenn sich Lebensbedingungen und Beziehungen ändern kann es aber sein, dass dieser Boden nicht mehr trägt. Was man also bis hierher aufgebaut hat, kann sich geradewegs entrüsten. Du bist entmutigt und enttäuscht von dir selbst. An dieser Stelle bist du gerade. Du musst nun beantworten ob du dir zutraust mit den gleichen Steinen, mit der Annahme die Architektur besser zu verstehen, das Fundament neu zu verlegen. Wenn, denke daran, dass du entweder die Ruinen des alten Baus &#8211; so weit möglich &#8211; wegräumst, oder ein, in seiner Stabilität gefährdetes, Neues darauf setzt. Oder du sogar neue Gründe erforscht und auf neuem Raum mit neuem Material baust.<br />
In jedem Fall ist es maßgebend, dass du die ständige Anpassung und Auseinandersetzung wahrst. Lass dies dein oberster Grundsatz sein.</p>
<p>Viel Erfolg und Glück!</p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/02/08/brief-an-einen-freund/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cheatsheet: moving data from one server to another</title>
		<link>http://wanderwort.de/2010/01/20/moving-data-from-one-server-to-another/</link>
		<comments>http://wanderwort.de/2010/01/20/moving-data-from-one-server-to-another/#comments</comments>
		<pubDate>Wed, 20 Jan 2010 06:00:11 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Arbeit]]></category>
		<category><![CDATA[Server]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=217</guid>
		<description><![CDATA[This article is about moving a running web-environment along with it&#8217;s MySQL database from one server to another via SSH. Compress files Let&#8217;s compress the directory we&#8217;re going to move using gzip: tar cfvz backup.tar.gz /path/ Dump MySQL database content mysqldump -uUser -p -hlocalhost database_name &#62; dump.sql You can also dump several databases with mysqldump [...]]]></description>
			<content:encoded><![CDATA[<p>This article is about moving a running web-environment along with it&#8217;s <a href="http://en.wikipedia.org/wiki/MySQL">MySQL</a> database from one server to another via <a href="http://en.wikipedia.org/wiki/Secure_Shell">SSH</a>.</p>
<h3>Compress files</h3>
<p>Let&#8217;s compress the directory we&#8217;re going to move using <a href="http://en.wikipedia.org/wiki/Gzip">gzip</a>:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">tar</span> cfvz backup.tar.gz <span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span></pre></div></div>

</p>
<h3>Dump MySQL database content</h3>
<p>
<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">mysqldump <span style="color: #660033;">-uUser</span> <span style="color: #660033;">-p</span> <span style="color: #660033;">-hlocalhost</span> database_name <span style="color: #000000; font-weight: bold;">&gt;</span> dump.sql</pre></div></div>

<p>You can also dump several databases with <a href="http://dev.mysql.com/doc/refman/5.1/en/mysqldump.html">mysqldump</a> by addind the <code>--databases</code> or <code>--all-databases</code> parameter.</p>
<h3>Moving files</h3>
<p>Now we use <a href="http://en.wikipedia.org/wiki/Secure_Copy">SCP</a> to move files to our new machine. The following example copies from the old machine:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">scp</span> user<span style="color: #000000; font-weight: bold;">@</span>host:<span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>backup.tar.gz .</pre></div></div>

<p>The other way round, copying the file to the new machine from the old one would look like this:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">scp</span> backup.tar.gz user<span style="color: #000000; font-weight: bold;">@</span>host:<span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>backup.tar.gz</pre></div></div>

<p>Do the same with your database dump.
</p>
<h3>Uncompress files</h3>
<p>Simply type:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">tar</span> xfvz backup.tar.gz</pre></div></div>

<p>Now we should have the same directory structure we had on our old machine.</p>
<h3>Import MySQL database</h3>
<p>
<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">mysql <span style="color: #660033;">-uUser</span> <span style="color: #660033;">--default-character-set</span>=utf8 <span style="color: #660033;">-hlocalhost</span> <span style="color: #660033;">-p</span> database_name <span style="color: #000000; font-weight: bold;">&lt;</span> dump.sql</pre></div></div>

<p>If you have international content and an utf-8 environment running don&#8217;t forget to pass the charset-parameter!</p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/01/20/moving-data-from-one-server-to-another/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Hamburger Hafen im Winter</title>
		<link>http://wanderwort.de/2010/01/12/204/</link>
		<comments>http://wanderwort.de/2010/01/12/204/#comments</comments>
		<pubDate>Tue, 12 Jan 2010 16:42:36 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Hafen]]></category>
		<category><![CDATA[Hamburg]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=204</guid>
		<description><![CDATA[Passend zum Schneechaos in Norddeutschland ein paar Eindrücke aus dem Hamburger Hafen im Winter. Ich habe noch nichts nachbearbeitet &#8211; also seht ihr Rohmaterial aus der Kamera.]]></description>
			<content:encoded><![CDATA[<p>Passend zum Schneechaos in Norddeutschland ein paar Eindrücke aus dem Hamburger Hafen im Winter. Ich habe noch nichts nachbearbeitet &#8211; also seht ihr Rohmaterial aus der Kamera.</p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0158.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0158-1024x680.jpg" alt="Eisbrecher Hamburg" title="Eisbrecher Hamburg" width="450" height="298" class="aligncenter size-large wp-image-200" /></a></p>
<p><span id="more-204"></span><br />
<a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0142.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0142-1024x680.jpg" alt="Eisbrecher Elbe" title="Eisbrecher Elbe" width="450" height="298" class="aligncenter size-large wp-image-199" /></a></p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0135.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0135-1024x680.jpg" alt="Eisbrecher Elbe" title="Eisbrecher Elbe" width="450" height="298" class="aligncenter size-large wp-image-198" /></a></p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0175.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0175-1024x680.jpg" alt="Eisbrecher Bugsier" title="Eisbrecher Bugsier" width="450" height="298" class="aligncenter size-large wp-image-201" /></a></p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0219.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0219-1024x680.jpg" alt="Hamburg Hafenfähre" title="Hamburg Hafenfähre" width="450" height="298" class="aligncenter size-large wp-image-203" /></a></p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0128.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0128-1024x680.jpg" alt="Hafen Hamburg" title="Hafen Hamburg" width="450" height="298" class="aligncenter size-large wp-image-197" /></a></p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0110.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0110-1024x680.jpg" alt="Wir sind geboren um frei zu sein" title="Wir sind geboren um frei zu sein" width="450" height="298" class=" aligncenter size-large wp-image-196" /></a></p>
<p><a href="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0186.jpg"><img src="http://wanderwort.de/wp-content/uploads/2010/01/DSC_0186-1024x680.jpg" alt="im Hafen" title="im Hafen" width="450" height="298" class="aligncenter size-large wp-image-202" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2010/01/12/204/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>select any HTML text in element with jQuery</title>
		<link>http://wanderwort.de/2009/11/19/select-any-html-text-in-element-with-jquery/</link>
		<comments>http://wanderwort.de/2009/11/19/select-any-html-text-in-element-with-jquery/#comments</comments>
		<pubDate>Thu, 19 Nov 2009 15:25:44 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Arbeit]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=170</guid>
		<description><![CDATA[The following script jQuery extension selects any text from a given jQuery selector. Tested with Firefox and Safari &#8211; should work in IE6+ as well. jQuery.fn.extend&#40;&#123; selectText: function&#40;&#41; &#123; var text = $&#40;this&#41;&#91;0&#93;; if &#40;$.browser.msie&#41; &#123; var range = document.body.createTextRange&#40;&#41;; range.moveToElementText&#40;text&#41;; range.select&#40;&#41;; &#125; else if &#40;$.browser.mozilla &#124;&#124; $.browser.opera&#41; &#123; var selection = window.getSelection&#40;&#41;; var range [...]]]></description>
			<content:encoded><![CDATA[<p>The following <del datetime="2009-11-19T15:26:12+00:00">script</del> <ins datetime="2009-11-19T15:26:37+00:00">jQuery extension</ins> selects any text from a given jQuery selector. Tested with Firefox and Safari &#8211; should work in IE6+ as well.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  selectText<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> text <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">msie</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> range <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">createTextRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      range.<span style="color: #660066;">moveToElementText</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      range.<span style="color: #660066;">select</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">mozilla</span> <span style="color: #339933;">||</span> $.<span style="color: #660066;">browser</span>.<span style="color: #660066;">opera</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> selection <span style="color: #339933;">=</span> window.<span style="color: #660066;">getSelection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #003366; font-weight: bold;">var</span> range <span style="color: #339933;">=</span> document.<span style="color: #660066;">createRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      range.<span style="color: #660066;">selectNodeContents</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      selection.<span style="color: #660066;">removeAllRanges</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      selection.<span style="color: #660066;">addRange</span><span style="color: #009900;">&#40;</span>range<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">safari</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> selection <span style="color: #339933;">=</span> window.<span style="color: #660066;">getSelection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      selection.<span style="color: #660066;">setBaseAndExtent</span><span style="color: #009900;">&#40;</span>text<span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> text<span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>To use it simly do:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> shortSelector <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">selectText</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> longSelector <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul#names li:contains(&quot;Hampel&quot;)'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">selectText</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>written on top of <a href="http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse">Source</a> and <a href="http://www.codingforums.com/archive/index.php/t-105808.html">Source</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2009/11/19/select-any-html-text-in-element-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

