<?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>Stuart Jones &#187; url</title>
	<atom:link href="http://gingerbbm.com/tag/url/feed/" rel="self" type="application/rss+xml" />
	<link>http://gingerbbm.com</link>
	<description>User Experience Design &#38; Software Development</description>
	<lastBuildDate>Mon, 05 Dec 2011 23:13:03 +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>URL Editor</title>
		<link>http://gingerbbm.com/2009/09/url-editor/</link>
		<comments>http://gingerbbm.com/2009/09/url-editor/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 22:21:29 +0000</pubDate>
		<dc:creator>Stuart</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[http get]]></category>
		<category><![CDATA[long url]]></category>
		<category><![CDATA[querystring]]></category>
		<category><![CDATA[url]]></category>
		<category><![CDATA[url editor]]></category>

		<guid isPermaLink="false">http://gingerbbm.com/?p=207</guid>
		<description><![CDATA[On a few occasions recently I&#8217;ve had to deal with long URLs, or more accurately, URLs with long querystrings. Each time it was a chore: strings that are a few hundred characters in length are unwieldy, hard to read and &#8230; <a href="http://gingerbbm.com/2009/09/url-editor/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>On a few occasions recently I&#8217;ve had to deal with long URLs, or more accurately, URLs with long <a href="http://en.wikipedia.org/wiki/Query_string" target="_blank">querystrings</a>. Each time it was a chore: strings that are a few hundred characters in length are unwieldy, hard to read and tricky to edit. So I decided to make my life easier and build a tool. <span id="more-207"></span></p>
<p>This URL is the kind of thing one encounters when working with Web Map Services:</p>
<div style="margin-left:30px;margin-right:30px;margin-bottom:20px;font-family:courier new,courier;color:blue;border:1px solid #9C9A9C;background-color:#F7F3EF;padding:10px">http://terraservice.net/ogcmap.ashx?SERVICE=WMS&amp;REQUEST=GetMap&amp;VERSION=1.1.1&amp;LAYERS=DRG&amp;FORMAT=image/gif&amp;SRS=EPSG:4326&amp;BBOX=-124.1,41.2,-123.9,41.4&amp;WIDTH=300&amp;HEIGHT=300</div>
<p>It returns a geographic map image based upon the name/value pairs passed in the querystring. <a href="http://code.google.com/apis/chart/" target="_blank">Google Charts</a> work in a similar way:</p>
<div style="margin-left:30px;margin-right:30px;margin-bottom:20px;font-family:courier new,courier;color:blue;border:1px solid #9C9A9C;background-color:#F7F3EF;padding:10px">http://chart.apis.google.com/chart?cht=lc&amp;chd=s:cEAELFJHHHKUju9uuXUc&amp;chco=76A4FB&amp;chls=2.0,0.0,0.0&amp;chs=200&#215;125&amp;chg=20,50,3,3,10,20&amp;chxt=x,y&amp;chxl= 0:|0|1|2|3|4|5|1:|0|50|100</div>
<p>To tackle such long URLs I&#8217;ve developed the boringly-named <strong>URL Editor</strong>.</p>
<p>Find it here: <a href="http://gingerbbm.com/urleditor" target="_blank">http://gingerbbm.com/urleditor</a></p>
<p>It&#8217;s a pretty simple JavaScript application (using Prototype and Scriptaculous) whose main purpose is to split the long querystring of a URL into its constituent name/value pairs in order to dramatically improve legibility. Paste a URL into the main box, click <em>Split</em>, and the name/value pairs appear below:</p>
<p><a href="http://gingerbbm.com/wordpress/wp-content/uploads/2009/09/urleditor01.png"><img class="alignnone size-full wp-image-243" title="urleditor01" src="http://gingerbbm.com/wordpress/wp-content/uploads/2009/09/urleditor01.png" alt="urleditor01" width="500" /></a></p>
<p>Once a URL has been split, any edits to the individual values are immediately applied to the main URL, and vice versa.</p>
<p>The <em>Encode</em> and <em>Decode</em> buttons attempt to <em>encode/decode</em> any relevant values that exist.</p>
<p><a href="http://gingerbbm.com/wordpress/wp-content/uploads/2009/09/urleditor02.png"><img class="alignnone size-full wp-image-244" title="urleditor02" src="http://gingerbbm.com/wordpress/wp-content/uploads/2009/09/urleditor02.png" alt="urleditor02" width="500" /></a></p>
<p>Click <em>Open</em> to open the URL in its current state in a new window/tab. And <em>Reset</em> resets the whole page.</p>
<p>Reordering of name/value pairs is achieved by dragging them, and you can add and delete them by clicking the relevant buttons.</p>
<h2>Bugs</h2>
<p>It wouldn&#8217;t be hard to trip the application up. The key to it all is the question mark character that denotes the start of a querystring. If you&#8217;re not interested in ever <em>opening</em> the URL you can simply start typing into the main box, e.g. &#8220;?a=1&#8243;, and the name/value pairs will appear.</p>
<h2>Names</h2>
<p>So, &#8220;URL Editor&#8221; is a fairly sober moniker, but it was the best of a bad bunch, and being a pretty good description of what it does I decided to go with it.</p>
<ul>
<li>U.R.[NOT HEL]L.</li>
<li>URL Manager</li>
<li>URL Splitter</li>
<li>Querystring Dechunker</li>
<li>Any ideas?</li>
</ul>
<h2>And Finally</h2>
<p>I&#8217;ve tried it out in FF3, IE8, Safari 3 and Opera 9 on XP and it&#8217;s all good. It also appears to work in FF3 and Safari 3 on the Mac. Not tried it on Chrome yet, but I don&#8217;t expect any surprises. For me it&#8217;s been fairly robust, and a useful tool in my arsenal. I hope others find it useful.</p>
<p> <img src='http://gingerbbm.com/wordpress/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://gingerbbm.com/2009/09/url-editor/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

