<?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>Conroyp.com</title>
	<atom:link href="http://www.conroyp.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.conroyp.com</link>
	<description>Technically speaking</description>
	<lastBuildDate>Sun, 29 Jan 2012 20:20:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Will valid markup now help your Google ranking?</title>
		<link>http://www.conroyp.com/2012/01/29/will-valid-markup-now-help-your-google-ranking/</link>
		<comments>http://www.conroyp.com/2012/01/29/will-valid-markup-now-help-your-google-ranking/#comments</comments>
		<pubDate>Sun, 29 Jan 2012 20:20:24 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tech]]></category>
		<category><![CDATA[classified]]></category>
		<category><![CDATA[daft.ie]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[markup]]></category>
		<category><![CDATA[rich snippet]]></category>
		<category><![CDATA[search]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=630</guid>
		<description><![CDATA[Google recently published a list of 30 updates made to search over the tail end of 2011. Tucked away in the middle of the list is mention of improved support for rich snippets. The snippet types listed are shopping, recipes and reviews. Amongst the other information on rich snippets is listed a point that a [...]]]></description>
			<content:encoded><![CDATA[<p>Google recently published a list of <a href="http://insidesearch.blogspot.com/2012/01/30-search-quality-highlights-with.html">30 updates made to search</a> over the tail end of 2011. Tucked away in the middle of the list is mention of improved support for rich snippets. The snippet types listed are shopping, recipes and reviews. Amongst the other information on rich snippets is listed a point that a snippet can only be given for a page with a single item upon it, ruling out snippets for things like searches for ipods on amazon.</p>
<p>However it looks like google has also been testing out ways of extracting structured data from pages which have no defined snippet <b>and</b> contain multiple items - starting with real estate classifieds. What's equally interesting here is that it seems having clear and valid markup may have an extra impact on your site's appearance in the Google results and number of visitors clicking through!</p>
<p><span id="more-630"></span></p>
<h3>What's a rich snippet?</h3>
<p>Traditionally "snippets" were the information Google would display about a page when it showed up for a given search term. This would include the page title, a link and some short text from the page.<br />
"<a href="http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html">Rich Snippets</a>" were introduced first by Google in 2009. These were small bits of additional markup which a webmaster can place on their site in order to give search engines a more structured view of what information is on the page. This in turn allows the search engine to show more relevant information in the "snippets" a user sees when searching.<br />
Google regularly uses <a href="http://googlewebmastercentral.blogspot.com/2011/02/introducing-recipe-view-based-on-rich.html">recipes</a> as an example of how best rich snippets can be used.</p>
<p>There is along and detailed list of item types which have rich snippet support at <a href="http://schema.org/docs/gs.html#schemaorg_types">schema.org</a>.</p>
<h3>What about sites which don't have a relevant rich snippet?</h3>
<p>The vast majority of sites on the net either don't have content which fits in to the supported rich snippet categories, or haven't implemented support for them. So, whilst data defined using rich snippets is helpful to Google, they need a way to get similarly structured data from sites without rich snippets defined.</p>
<p>In my <a href="http://www.distilledmedia.ie/">day job</a>, I noticed that searches on which our classified sites <a href="http://www.daft.ie">daft.ie</a>, <a href="http://www.rent.ie/">rent.ie</a> and <a href="http://www.let.ie/">let.ie</a> typically perform well were starting to show the snippets formatted in a slightly-changed format, despite no changes being made to the markup on site. Trying a handful of slightly different searches also showed significant changes in the snippet being shown - again, with no markup change - which seems to suggest that Google are actively working on their algorithms in this area.</p>
<h3>Compare and contrast</h3>
<div id="attachment_647" class="wp-caption aligncenter" style="width: 429px"><a href="http://www.google.ie/search?q=mallow+rental"><img src="http://www.conroyp.com/wp-content/uploads/2012/01/daft_mallow.png" alt="Rental Property search for Mallow, Co. Cork" title="daft_mallow" width="419" height="88" class="size-full wp-image-647" /></a><p class="wp-caption-text">Rental Property search for Mallow, Co. Cork</p></div>
<p>Starting with a search for <a href="http://www.google.ie/search?q=mallow+rental">Mallow rental</a>, the result from daft.ie shows the search result page for <a href="http://www.daft.ie/cork/houses_to_rent/mallow/">rental properties in Mallow, Co. Cork</a>. So far, so what? </p>
<p>What's interesting here is that Google has broken the markup out in to the address/type and price sections, making it very clear how much the top properties are for any user performing the same search. This is without any changes being made to the markup on the daft site.</p>
<p>On the same set of search results, the results from let.ie are similarly displayed. Yet property.ie, which has very similar markup, is not broken out. So it looks like the googlebot is slowly working it's way through various sites. However, further queries on daft reveal that the algorithm has been tweaked since the Mallow results above.</p>
<div id="attachment_651" class="wp-caption aligncenter" style="width: 474px"><a href="http://www.google.ie/search?q=cobh+rental"><img src="http://www.conroyp.com/wp-content/uploads/2012/01/daft_cobh1.png" alt="Cobh, Co. Cork rental search" title="daft_cobh" width="464" height="216" class="size-full wp-image-651" /></a><p class="wp-caption-text">Cobh, Co. Cork rental search</p></div>
<p>In the daft.ie result above, the property type now appears to have been broken out in to a separate section on each line (red lines added are mine). Again, no changes to markup have been made, but the googlebot appears to realise that the "-" between the address and "House to let" is a logical break between two important, connected data points which refer to separate elements of the same property.</p>
<h3>So what exactly is happening here?</h3>
<p>In summary, it looks like google has been aggressively testing ways to derive structured data from nominally free-form webpages. This type of behaviour has been <a href="http://www.seroundtable.com/google-real-estate-snippets-13928.html">spotted in the past</a>, when Google snippets showed a list of results from a page which itself was a formatted list. However, to the best of my knowledge this automated breaking out of key data is a new tweak. </p>
<p>It would also seem to suggest that having well-structured, clear markup is going to be increasingly-important in future. Google has historically downplayed the importance of having markup which validates, saying that it has no significant impact in a site's ranking. However, the sites listed above which have seen these new type of results are ones which are XHTML1 strict compatible. There's no way of knowing exactly what's going on inside the googlebot, but it stands to reason that having clear markup which is simple to parse consistently makes life easier for this sort of information (relative importance of data) to be extracted. </p>
<p>Google has regularly espoused the benefit on click-through rates of having rich snippets enabled, so if this sort of pseudo-rich snippet has a similar effect, having clear and consistent markup on your site may have a direct impact on visitor numbers.</p>
<p>If you've any other examples of this type of intelligent formatting or theories on what's goign on above, please share them in the comments below!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2012/01/29/will-valid-markup-now-help-your-google-ranking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A 3 minute phone call, a €300 saving!</title>
		<link>http://www.conroyp.com/2011/09/21/a-3-minute-phone-call-a-e300-saving/</link>
		<comments>http://www.conroyp.com/2011/09/21/a-3-minute-phone-call-a-e300-saving/#comments</comments>
		<pubDate>Wed, 21 Sep 2011 21:58:01 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Miscellantry]]></category>
		<category><![CDATA[insurance]]></category>
		<category><![CDATA[non-tech]]></category>
		<category><![CDATA[quinn]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=501</guid>
		<description><![CDATA[A brief departure from the usual tech-orientated posts around here... Recently my car insurance came up for renewal. As my insurance last year was with Quinn Direct, I received a renewal quote from them automatically in the post. In 2010 I paid a little over €600 for a year's cover. The renewal quote came through [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.conroyp.com/wp-content/uploads/2011/09/4792018730_4a4a7bac98_m-150x150.jpg" alt="Money, money, money" title="Money, money, money" width="150" height="150" class="alignright size-thumbnail wp-image-612" />A brief departure from the usual tech-orientated posts around here... Recently my car insurance came up for renewal. As my insurance last year was with <a href="http://www.quinn-direct.com/ireland/">Quinn Direct</a>, I received a renewal quote from them automatically in the post.</p>
<p>In 2010 I paid a little over €600 for a year's cover. The renewal quote came through - the same policy for 2011 would cost me €950. Bit of a difference! The jump in the price was enough for me to look a little bit closer at what other quotes were available - in the end a 3 minute phone call ended up saving me over €300!</p>
<p><span id="more-501"></span></p>
<h3>Money, money, money</h3>
<p>A common practice with insurance companies in Ireland is to issue a renewal quote, and state that unless the quote is explicitly refused it's assumed that you will accept it by the date of renewal. There's generally a 2/3 period between receiving the quote in the post and this date.</p>
<p>Consumer affairs watchdogs are forever telling us to "shop around" - for insurance quotes, energy providers, groceries - anything and everything that will cost us a few euro. For some reason, Irish people have historically been quite reluctant to do this, with a <a href="http://www.examiner.ie/ireland/one-in-3-still-not-shopping-around-for-best-deal-149581.html">recent survey showing</a> that as many as 1 in 3 admitting to "rarely or never" shopping around for a better price.<br />
This laissez-faire attitude combined with the auto-renewal of insurance quotes mentioned above means that a significant number of Irish consumers don't even seek a new quote once the renewal notice has arrived, instead waiting for the notice period to elapse and automatically agreeing to pay the new rate. A rise in the quote of nearly 50% was enough to shake me out of my inertia and start checking prices.</p>
<h3>Comparing the meerk.. er. market</h3>
<p>Going through various price comparison websites, I found that there were several companies which would quote me around €650 for the same policy as the one which I had with Quinn. Before picking the cheapest of these, I devided on a whim to check Quinn's site and see what my policy would cost were I a new customer, rather than a renewal. Surprisingly, as a new customer on the Quinn website I was quoted €580- the lowest price in the market, and also <b>over one third lower</b> than my renewal quote, with the exact same details! Many companies offer discounts to new customers on initial sign-up, but the scale of the difference really surprised me.</p>
<p>I gave Quinn a quick call to see if they could shed any light on the reasons for the difference. I spoke to a couple of very helpful representatives, all of whom were equally baffled by the scale of the difference. Quinn offer a discount for online signup, as well as a "new customer" bonus, but everyone I spoke to agreed that it should never have caused that level of difference. </p>
<p>As the quote I got was the cheapest, I'd decided to go with it. One of the Quinn representatives suggested that the easiest thing to do would be to have my existing Quinn account "price match" the "new" account I'd set up to get the cheaper quote. Quinn have an internal process for authorising these matches, so I was told I'd be called back once the appropriate people internally had signed off on it. So far, so good.</p>
<h3>The Big Match</h3>
<p>I got a call back the next day telling me that their "quote match" department couldn't authorise a price match on such a significant difference, and that the best match they could offer me was €780. This was particularly baffling, as the price they were attempting to match was one issued by their own company! I asked the Quinn rep a bit more about what exactly could have caused such a difference, after we'd eliminated online discount and new customer discount. Apparently insurance companies are continually reviewing their rates and charges, so the same person can get pretty big differences in quotes given even within 1 calendar month.</p>
<p>The recommendation I was given by the Quinn rep was to cancel my existing Quinn account, and to accept the quote as a "new" customer. I was a tad apprehensive about doing this, having previously been through the messy paperwork and admin required when moving insurers (returning discs, certs of insurance, old company sending new company "no claims" cert, etc). With so many bits of paper floating around (from Quinn to Quinn in this case!) I could easily see a snafu which ended up with me insurance-less.</p>
<p>Nevertheless, a saving of nearly €300 was enough to convince me, so I went ahead and signed up as a "new" Quinn customer. Apparently it's not uncommon for people to do this, so the rep was able to tell me which departments to email to notify them of my cancellation and my move to being a "new" Quinn customer. In the end, it all went very smoothly, and I got my notice of cancellation and new disc in the post within a few days.</p>
<p><img src="http://www.conroyp.com/wp-content/uploads/2011/06/better-than-expected.png" alt="Everything went better than expected" title="better-than-expected" width="255" height="193" class="alignright size-full wp-image-513" /></p>
<h3>Lesson learned</h3>
<p>Despite being continually told to "shop around", I've never been particularly good at doing so. It was only the size of the price increase in the quote that shook me in to checking around, and led me to save nearly €300!</p>
<p>What was also refreshing about this experience was how easy the staff in Quinn were to deal with. Everyone I spoke to whilst trying to clear up the price discrpeancy was helpful, friendly and did their best to help me understand how my quote had jumped by so much versus a new signup. In the past I've heard some very mixed things about Quinn staff, but I found them great to deal with, so tops mark there.</p>
<p>So, hackeneyed and clichéd as it may sound, it can really pay to shop around!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2011/09/21/a-3-minute-phone-call-a-e300-saving/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Geeks on the run</title>
		<link>http://www.conroyp.com/2011/08/21/geeks-on-the-run/</link>
		<comments>http://www.conroyp.com/2011/08/21/geeks-on-the-run/#comments</comments>
		<pubDate>Sun, 21 Aug 2011 09:45:19 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Miscellantry]]></category>
		<category><![CDATA[charity]]></category>
		<category><![CDATA[non-tech]]></category>
		<category><![CDATA[soliciting]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=589</guid>
		<description><![CDATA[A slight change of pace from the usual tech-based posts around here, but it's for a pretty worthy cause. Ciaran, Diego and I work in the tech side of Distilled Media, helping make sites like daft.ie, boards.ie and adverts.ie tick. Recently the three of us had a collective fit of madness - we decided to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://bit.ly/o0BQJm"><img src="http://www.conroyp.com/wp-content/uploads/2011/08/Running-150x150.jpg" alt="Geeks on the run" title="Running" width="150" height="150" class="alignright size-thumbnail wp-image-592" /></a><br />
A slight change of pace from the usual tech-based posts around here, but it's for a pretty worthy cause. </p>
<p><a href="http://twitter.com/ciaranmaher">Ciaran</a>, <a href="http://twitter.com/diegosol">Diego</a> and I work in the tech side of <a href="http://www.distilledmedia.ie/">Distilled Media</a>, helping make sites like daft.ie, boards.ie and adverts.ie tick.<br />
Recently the three of us had a collective fit of madness - we decided to get out from behind our computer screens, leave our sedentary lives behind and enroll to run the <a href="http://dublinmarathon.ie/race_series.php">Dublin Half Marathon</a>.</p>
<p>We've decided that in running the half marathon that we'd like to try and raise money for the Mark Pollock Trust, which is where you hopefully come in...<br />
<span id="more-589"></span><br />
<a href="http://www.markpollock.com">Mark Pollock</a> is a friend and colleague of ours who is also an adventure athlete, entrepreneur, motivational speaker and author. He has run marathons at the North Pole, the Himalayas and in the Gobi Desert, as well as competing in the Round Ireland Yacht race and winning medals for rowing at the Commonwealth Games. What's most remarkable about all of this is that Mark has done this in total darkness, having lost his sight a little over 10 years ago. I can't do his remarkable story justice, so please have a look at <a href="http://www.markpollock.com/">http://www.markpollock.com/</a> which does a far better job of explaining it than I could hope to.</p>
<p>Recently Mark had a <a href="http://www.bbc.co.uk/news/uk-northern-ireland-12414576">tragic accident</a> which left him paralysed from the waist down. True to form, Mark is refusing to allow this dictate how he lives so is undergoing intensive sessions of physiotherapy and attending specialised rehabilitation centres with the aim of leading a full and independent life. The Mark Pollock Trust has been set up by his friends and family to help with the costs involved in his rehabilitation.</p>
<p>Mark is genuinely one of the most inspirational and humble guys that you could hope to meet, so we want to help him out in whatever way we can. The <a href="http://bit.ly/o0BQJm">MyCharity.ie</a> site makes it very simple to donate with your credit or debit card, so we'd greatly appreciate any donation, big or small.</p>
<p>Given the list of Mark's achievements above, just running a half marathon does tend to pale somewhat in comparison. Though on the other hand there are three of us, each of us desk jockeys who spend far too long sitting on our backsides playing with computers, so you could look at it as us running a full marathon and a half in world record time (assuming you record our times based on when the first of us starts to when the last of us finishes, which is how I presume those records work).</p>
<p>But I digress. I'm here to humbly request that if you have some spare change rattling around in your digital wallet, that you consider throwing it towards <a href="http://bit.ly/o0BQJm">our donations page</a>. MyCharity accept all credit/debit/laser cards, and it's a pretty painless process to donate. Also, you get the warm fuzzy feeling of having done an exceptionally good deed, helping out your fellow man, without the blistered feet and later-life knee problems caused by actually training for and running the race, so it's really a win-win for you!</p>
<p><b>tl;dr</b>: we want your money. Please send whatever you can to <a href="http://bit.ly/o0BQJm">our donations page</a>. Every little helps, as they say!</p>
<p><img src="http://www.neilcremins.me/taxes.gif" alt="He's making the money sign" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2011/08/21/geeks-on-the-run/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Malkovich Malkovich Malkovich</title>
		<link>http://www.conroyp.com/2011/06/19/malkovich-malkovich-malkovich/</link>
		<comments>http://www.conroyp.com/2011/06/19/malkovich-malkovich-malkovich/#comments</comments>
		<pubDate>Sun, 19 Jun 2011 21:33:10 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Tech]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[completely-useless]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=519</guid>
		<description><![CDATA[In the film Being John Malkovich, John Cusack plays a puppeteer who finds a portal to inside John Malkovich's head. Eventually John Malkovich himself goes through this portal, and the ensuing paradox means that every word he hears is "Malkovich", and every face he sees is his own. Re-watching this film lately gave me an [...]]]></description>
			<content:encoded><![CDATA[<div class="clear"></div>
<p><img src="http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich1.jpg" alt="Malkovich Malkovich Malkovich" title="" width="440" height="192" class="aligncenter size-full wp-image-528" /><br />
In the film <a href="http://www.imdb.com/title/tt0120601/">Being John Malkovich</a>, John Cusack plays a puppeteer who finds a portal to inside John Malkovich's head. Eventually John Malkovich himself goes through this portal, and the ensuing paradox means that every word he hears is "Malkovich", and every face he sees is his own.</p>
<p>Re-watching this film lately gave me an idea for the latest trivial entry in my <a href="http://www.conroyp.com/tags/bookmarklet/">ongoing bookmarklets collection</a>, where every image on a website is changed to show the same one. So read below the jump to find out how to <a href="javascript: var newImg = 'http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-head.jpg';for(i=0; i<document.getElementsByTagName('img').length; i++){var swapH = document.getElementsByTagName('img')[i].height; var swapW = document.getElementsByTagName('img')[i].width; document.getElementsByTagName('img')[i].src=newImg;document.getElementsByTagName('img')[i].height = swapH; document.getElementsByTagName('img')[i].width = swapW;};void(0);">Malkovich a website</a> - or customise the effect to use an image of your choosing!</p>
<p><span id="more-519"></span></p>
<h3>How it works</h3>
<p>Being a very simple and silly bookmarklet, the idea behind it is pretty simple:<br />
- loop through each image on a website<br />
- change the image on the site to a new image (John Malkovich, in this case)<br />
- ensure the new image has the same height and width of the previous image, to keep the page layout the same</p>
<p><b>Step 1: Pick an image</b></p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> newImg <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-head.jpg'</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
</p>
<p><b>Step 2: Loop through each image on the page</b></p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#123;</span></div></td></tr></tbody></table></div>
</p>
<p><b>Step 3: Get the height and width of the existing image</b><br />
We need to get the current height and width of the current image on the page. We do this as if the image dimensions haven't been explicitly specified in the target's site html and differ from our "Malkovich" image, the target site's layout can get quite borked.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> swapH <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">height</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> swapW <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">width</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
</p>
<p><b>Step 4: Enter Malkovich</b></p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&nbsp; &nbsp;document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">src</span><span style="color: #339933;">=</span>newImg<span style="color: #339933;">;</span><br />
&nbsp; &nbsp;<span style="color: #006600; font-style: italic;">// Ensure height &amp; width kept consistent</span><br />
&nbsp; &nbsp;document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">height</span> <span style="color: #339933;">=</span> swapH<span style="color: #339933;">;</span> <br />
&nbsp; &nbsp;document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">width</span> <span style="color: #339933;">=</span> swapW<span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
</p>
<p><b>Step 5: Wrap it all up in a bookmarklet</b><br />
A void(0) is required at the end of the bookmarklet to stop the browser from trying to open a new page.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">javascript<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">var</span> newImg <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-head.jpg'</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #003366; font-weight: bold;">var</span> swapH <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">height</span><span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> swapW <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">width</span><span style="color: #339933;">;</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">src</span><span style="color: #339933;">=</span>newImg<span style="color: #339933;">;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">height</span> <span style="color: #339933;">=</span> swapH<span style="color: #339933;">;</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">width</span> <span style="color: #339933;">=</span> swapW<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">void</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>You can also drag the <a href="javascript: var newImg = 'http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-head.jpg';for(i=0; i<document.getElementsByTagName('img').length; i++){var swapH = document.getElementsByTagName('img')[i].height; var swapW = document.getElementsByTagName('img')[i].width; document.getElementsByTagName('img')[i].src=newImg;document.getElementsByTagName('img')[i].height = swapH; document.getElementsByTagName('img')[i].width = swapW;};void(0);">Malkovich Malkovich Malkovich</a> bookmarklet to your browser's bookmarks bar, click it on any website, and behold the Malkovication of that site.</p>
<p>&nbsp;</p>
<h3>Make your own</h3>
<p>The novelty of seeing John Malkovich all over the place is nice, but it would be better if you could customise the effect a little more.</p>
<p><script type="text/javascript">
var imgUrl;
jQuery(document).ready(function(){
    // Catch default values..
    imgUrl = jQuery('#imageUrl').val().trim().split("\n");
    updateBookmarklet();
    var jInput = jQuery( "#imageUrl" );
    jQuery( "#imageUrl" ).keyup(
        function(){
            updateBookmarklet();
        }
    );
});
var bkmrkFirst = "javascript: var newImg = '";
var bkmrkLast = "';for(i=0; i<document.getElementsByTagName('img').length; i++){var swapH = document.getElementsByTagName('img')[i].height; var swapW = document.getElementsByTagName('img')[i].width; document.getElementsByTagName('img')[i].src=newImg;document.getElementsByTagName('img')[i].height = swapH; document.getElementsByTagName('img')[i].width = swapW;};void(0);";
function updateBookmarklet()
{
    var htmlin = bkmrkFirst+jQuery('#imageUrl').val()+bkmrkLast;
    jQuery('#quickLink').attr('href', htmlin);    
}
</script></p>
<input type="text" id="imageUrl" size="80" value="http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-head.jpg" />
<p>Enter the address of any image you wish in the box above. Then drag your very own custom <a id="quickLink">Malkovich bookmarklet</a> to your bookmarks bar, and you're done! The bookmarklet updates in real time as you type in the box above.</p>
<p>&nbsp;</p>
<div id="attachment_556" class="wp-caption alignright" style="width: 210px"><a href="http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-paul.jpg"><img src="http://www.conroyp.com/wp-content/uploads/2011/06/Malkovich-paul-300x175.jpg" alt="" title="A Daft idea" width="200" class="size-medium wp-image-556" /></a><p class="wp-caption-text">A Daft idea</p></div>
<h3>But why...</h3>
<p>- <i>Why not just use jQuery?</i><br />
JQuery isn't loaded on all websites by default. Loading jQuery is possible in a bookmarklet, but adds far more overhead than using the more-verbose JS above.</p>
<p>- <i>Why didn't all images on the site I tried change?</i><br />
This bookmarklet works only on images loaded in an img tag. If an image is a background image on a div, then the bookmarklet won't catch it.</p>
<p>- <i>Wait, a bookmarklet? What is that?</i><br />
A bookmarklet is a small chunk of javascript that allows us to extend the functionality of a given page. See <a href="http://www.conroyp.com/2010/04/04/bookmarklets-a-quick-explanation/">this explanation</a> for a bit more detail.</p>
<p>- <i>This is ridiculous. What's the point?</i><br />
There is absolutely no point or useful function to this whatsoever. Any potential amusement you may derive from using it is linked directly to your imagination when selecting an image and website.</p>
<p>And that's it. If you've any thoughts on improving the implementation above, or have an hilarious screenshot resulting from use of the bookmarklet, let me know in the comments below!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2011/06/19/malkovich-malkovich-malkovich/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Saved by mystery anti-virus! Wait, what..</title>
		<link>http://www.conroyp.com/2011/01/13/saved-by-mystery-anti-virus-wait-what/</link>
		<comments>http://www.conroyp.com/2011/01/13/saved-by-mystery-anti-virus-wait-what/#comments</comments>
		<pubDate>Thu, 13 Jan 2011 21:31:12 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Miscellantry]]></category>
		<category><![CDATA[anti-virus]]></category>
		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=459</guid>
		<description><![CDATA[Browsing the web recently the above screen popped up. It appeared that my c: and d: drives were riddled with trojans and security issues. Luckily for me, Windows Defender was springing to my rescue! The eagle-eyed amongst you will already have spotted why Windows Defender was unlikely to be all that useful in this case.. [...]]]></description>
			<content:encoded><![CDATA[<div class="clear"></div>
<p><a href="http://www.conroyp.com/wp-content/uploads/2011/01/Security.png"><img class="aligncenter size-medium wp-image-460" title="Security" src="http://www.conroyp.com/wp-content/uploads/2011/01/Security.png" alt="" width="400" height="300" /></a></p>
<p>Browsing the web recently the above screen popped up.<br />
<span id="more-459"></span></p>
<p>It appeared that my c: and d: drives were riddled with trojans and security issues. Luckily for me, Windows Defender was springing to my rescue! The eagle-eyed amongst you will already have spotted why Windows Defender was unlikely to be all that useful in this case..</p>
<p><i>(aside from the fact that the site is a scam aimed at installing a <a href="http://forums.techguy.org/virus-other-malware-removal/870829-windows-defender-fake-trojan-back.html">particularly nasty trojan</a>, I was running Linux at the time..)</i></p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2011/01/13/saved-by-mystery-anti-virus-wait-what/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Programmatically Detecting AdBlock Plus</title>
		<link>http://www.conroyp.com/2010/12/13/programmatically-detecting-adblock-plus/</link>
		<comments>http://www.conroyp.com/2010/12/13/programmatically-detecting-adblock-plus/#comments</comments>
		<pubDate>Mon, 13 Dec 2010 22:55:34 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Tech]]></category>
		<category><![CDATA[adblock]]></category>
		<category><![CDATA[adverts.ie]]></category>
		<category><![CDATA[daft.ie]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[ymmv]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=415</guid>
		<description><![CDATA[One issue that comes up time and again when working on classified sites such as Daft.ie and Adverts.ie is the inadvertent blocking of site functionality by the AdBlock Plus extension. As so many parts of classified sites will logically have phrases like "ad" in the url, legitimate site content and features can be blocked inadvertently [...]]]></description>
			<content:encoded><![CDATA[<p>One issue that comes up time and again when working on classified sites such as <a href="http://www.daft.ie/">Daft.ie</a> and <a href="http://www.adverts.ie/">Adverts.ie</a> is the inadvertent blocking of site functionality by the <a href="http://adblockplus.org/">AdBlock Plus</a> extension. As so many parts of classified sites will logically have phrases like "ad" in the url, legitimate site content and features can be blocked inadvertently under the mistaken assumption that they're banner ads or the like.</p>
<p>So is there a way to detect whether a user has AdBlock Plus installed and change the output accordingly?</p>
<p><span id="more-415"></span><br />
The answer is "Yes. Well, sort of".<br />
<script>var abp = true;</script><script src="http://dev.conroyp.com/abp/jsLoader.js?adType=foo"></script><script>if(abp){   document.write('<d'+'iv class="warning" style=\'background:red;color:white;font-weight:bold;text-align:center;padding:5px;width:95%;margin-bottom:10px;\'>WARNING!<br />It looks like you have AdBlock Plus enabled. This may interfere with site functionality!</'+'div>');}</script></p>
<h3>Wait, what's an ad block?</h3>
<p>For those of you unfamiliar with what <a href="http://adblockplus.org/en/getting_started">AdBlock Plus (ABP) does</a>, it is a Firefox or Chrome extension which has:</p>
<blockquote><p>
the primary goal of removing advertisements. For that, it will look at all requests made by web pages and block the request if the address the request should go to matches a filter in Adblock Plus.</p></blockquote>
<p>In plain English, this should mean that flashing banner and pop-up ads should be removed from the internet for any users with this plugin installed. So far, so good.</p>
<h3>So what's the problem?</h3>
<p>ABP works by blocking content loaded from urls which match some predefined filters. For example, urls like http://www.example.com/ads/serveAds.php?adType=annoying+flashing+ad ABP is likely to load an ad which a user may not wish to see. ABP blocks this content from ever reaching the user. </p>
<p>However, on classified sites legitimate site content may be loaded from similar urls. On Adverts.ie for example, the url http://www.adverts.ie/ajax/getCategories.php?adType=1 loads up a list of categories used in one of the site's menus. When ABP sees this url, it matches a filter for the term "adType" and blocks the script from loading. This results in one of the site menus not loading, despite it being a primary part of the site, and not another banner ad.</p>
<h3>Uh oh. So what now?</h3>
<p>There are two options realistically open:</p>
<ol>
<li>Rename all site urls and parameters to avoid mentioning "ad" or similar keywords</li>
<li>Get users to add the classifieds site to their ABP whitelist</li>
</ol>
<p>The first option above has the benefit of not requiring any user action. However the downside is that the code behind the site becomes gradually trickier to follow, as words like "adType" are appropriate variable names, likely to be re-used by developers at some point.</p>
<p>The attraction of the second option is that it only requires action by the minority of site users with ABP enabled. The downside is pretty significant though. As ABP becomes increasingly mainstream, its' users are becoming less and less technical. Having to wait for users to contact the site owner with a complaint, then be instructed on using the ABP whitelist, can be a time-consuming process. </p>
<p>A compromise would be attempting to detect whether ABP is installed, and if so display a warning with instructions on how to use the whitelist to allow the site to function correctly.</p>
<h3>Technical nuts and bolts</h3>
<p>One way to approach this is to use javascript to set a basic flag which assumes that ABP is enabled.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> abp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>After that, attempt to load a javascript file from a url which ABP will find objectionable:</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;/scripts/loader.js?adType=banner&amp;blantantlyAnAdUrl=1&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></div></td></tr></tbody></table></div>
<p>This file should do nothing other than reset the flag, which shows that ABP is non-functional.</p>
<p>This load is followed by another script block, which will print a message to the user if the ABP flag is still set.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>abp<span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// Flag didn't get unset, assume ABP is active</span><br />
&nbsp; &nbsp; document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div class=&quot;warning&quot;&gt;WARNING!&lt;br /&gt;...&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>If all has gone to plan, then any users with ABP enabled should see a warning like that shown in the image below.<br />
<img src="http://www.conroyp.com/wp-content/uploads/2010/12/abp_warning.png" alt="AdBlock Plus detected" title="" width="535" height="40" class="aligncenter size-full wp-image-440" /><br />
If you have ABP enabled, you should already have seen something very similar towards the top of the page!</p>
<h3>Is this guaranteed to work?</h3>
<p>This method does work, but it depends heavily on the keywords being used. Obviously ABP don't want sites to detect whether their plugin is active and work around it, rendering the extension useless. There have been similar tricks like this in the past which the extension developers have subsequently worked around. </p>
<p>The key is ensuring that the js file which will unset the ABP file matches as many ABP filters as possible. This should ensure that it gets treated like a regular ad url, so is a reliable indicator as to whether ABP is running or not.<br />
Happily at this moment in time, the above method does the job just fine! </p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2010/12/13/programmatically-detecting-adblock-plus/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Extending Twitter &#8211; adding Imgur previews</title>
		<link>http://www.conroyp.com/2010/11/30/extending-twitter-web-interface-adding-imgur-previews/</link>
		<comments>http://www.conroyp.com/2010/11/30/extending-twitter-web-interface-adding-imgur-previews/#comments</comments>
		<pubDate>Tue, 30 Nov 2010 09:22:46 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Tech]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[imgur]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=329</guid>
		<description><![CDATA[Update 08/12/2010 - There's now a Firefox Extension in the Add-Ons sandbox available for adding this media preview to Twitter, as well as previews for Daft.ie and Adverts.ie ads. With their recent site redesign, Twitter added a number of interesting new features. One of the more useful of these is the media preview. From the [...]]]></description>
			<content:encoded><![CDATA[<div class="clear"></div>
<div id="attachment_335" class="wp-caption aligncenter" style="width: 460px"><a href="http://www.conroyp.com/wp-content/uploads/2010/11/imgur1.jpg"><img src="http://www.conroyp.com/wp-content/uploads/2010/11/imgur1-1024x275.jpg" alt="Imgur Preview" title="Imgur Preview" width="450" class="size-large wp-image-335" /></a><p class="wp-caption-text">Enabling Imgur preview in Twitter</p></div>
<p><b>Update 08/12/2010 - There's now a <a href="https://addons.mozilla.org/en-US/firefox/addon/261946/">Firefox Extension</a> in the Add-Ons sandbox available for adding this media preview to Twitter, as well as previews for Daft.ie and Adverts.ie ads.</b></p>
<p>With their recent site redesign, Twitter added a number of interesting new features. One of the more useful of these is the media preview. From the <a href="http://blog.twitter.com/2010/09/better-twitter.html">Twitter blog</a>:</p>
<blockquote><p><b>Media</b>. Now, it’s easy to see embedded photos and videos directly on Twitter, thanks to partnerships with DailyBooth, deviantART, Etsy, Flickr, Justin.TV, Kickstarter, Kiva, Photozou, Plixi, Twitgoo, TwitPic, TwitVid, USTREAM, Vimeo, yfrog, and YouTube.
</p></blockquote>
<p>This is definitely one of the more useful features of the new Twitter web interface, and covers most of the more mainstream media sources that I'd notice showing up in my timeline. That said, there are some notable omissions..<br />
<span id="more-329"></span></p>
<h3>Imgur.com</h3>
<p>Anyone who has spent any time on <a href="http://reddit.com">reddit</a> will be familiar with the image hosting service <a href="http://imgur.com">imgur.com</a>. Run by redditor <a href="http://www.reddit.com/user/MrGrim">MrGrim</a>, a quick browse through any of the more popular sub-reddits show how ubiquituous it has become for media sharing on reddit. It would be very handy if tweets mentioning imgur had the same preview functionality as those mentioning twitpic, yfrog, etc. I've recently been digging through the new Twitter javascript whilst working on a <a href="http://www.conroyp.com/2010/03/11/declutter/">Declutter</a> followup, so decided to take a break from that and see how hard it would be to bolt on imgur previewing to the web interface. </p>
<p>Luckily, it turned out to be very straight-forward indeed, and can be done with one simple bookmarklet!</p>
<p>If you're not interested in the technical nuts and bolts behind it, you can skip ahead to <a href="#get">get the bookmarklet now</a>. Otherwise, read on for a bit more technical explanation on the ins and outs of adding a custom media type to Twitter.</p>
<h3>Ur Img, My Img, Everybody's Img..</h3>
<p>The recent rewrite of <a href="http://twitter.com/">Twitter.com</a> pushed a huge additional amount of their logic in to javascript on the client side. My thinking was that the imgur preview functionality should work the same as the twitpic previewing. Taking a look through the <a href="http://a4.twimg.com/a/1290538325/javascripts/phoenix.bundle.js">main application logic</a> for twitpic, we can see the declaration of</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">twttr.<span style="color: #660066;">media</span>.<span style="color: #660066;">types</span></div></td></tr></tbody></table></div>
<p>Below is how we clone the twitpic media type, then tweak for imgur:</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:300px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">twttr.<span style="color: #660066;">mediaType</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;twttr.media.types.Imgur&quot;</span><br />
&nbsp; &nbsp; <span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span>icon<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;photo&quot;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #339933;">,</span>domain<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;http://imgur.com&quot;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #339933;">,</span>matchers<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>media<span style="color: #339933;">:/</span>imgur.<span style="color: #660066;">com</span>\<span style="color: #339933;">/</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>a<span style="color: #339933;">-</span>zA<span style="color: #339933;">-</span>Z0<span style="color: #339933;">-</span><span style="color: #CC0000;">9</span>\.<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span>g<span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #339933;">,</span>process<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>A<span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #006600; font-style: italic;">// If link is http://imgur.com, ext usually missing</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slug</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slug</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slug</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'.jpg'</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">src</span><span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slug</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">constructor</span>._name<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;A<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #339933;">,</span>render<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>B<span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> A<span style="color: #339933;">=</span><span style="color: #3366CC;">'&lt;div class=&quot;twitpic&quot;&gt;&lt;a class=&quot;inline-media-image&quot; data-inline-type=&quot;{name}&quot; href=&quot;http://i.imgur.com/{src}&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://i.imgur.com/{src}&quot; /&gt;&lt;/a&gt;'</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span style="color: #009900;">&#40;</span>B<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>twttr.<span style="color: #660066;">supplant</span><span style="color: #009900;">&#40;</span>A<span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #000066; font-weight: bold;">void</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>The two key bits of code above are "matchers" and "render". Matchers specifies a regex which Twitter uses to detect whether there are any imgur links within a given tweet. The pattern of imgur urls are generally http://[OPTIONAL_DOMAIN].imgur.com/abcDEF819.jpg, although they're also accessible via http://imgur.com/abcDEF819 (note lack of extension!). The regex we use is:</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #339933;">,</span>matchers<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>media<span style="color: #339933;">:/</span>imgur.<span style="color: #660066;">com</span>\<span style="color: #339933;">/</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>a<span style="color: #339933;">-</span>zA<span style="color: #339933;">-</span>Z0<span style="color: #339933;">-</span><span style="color: #CC0000;">9</span>\.<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span>g<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>Whatever is matched by the ([a-zA-Z0-9\.]+) part of the regex above gets saved in this.slug. We don't care what the optional domain is or if it even exists - we'll ultimately be using i.imgur.com as the host, as it gives direct access to an image. If no file extension is found, we'll stick on a ".jpg". Not ideal, but works in the vast majority of cases. In the process function, this slug is assigned to data.src for convenience during rendering.</p>
<p>Next up is the rendering of the matched data. We're piggy-backing on the twitpic version of this function here as we're essentially trying to achieve the same end goal. The basic html structure of the media preview is div -> href -> img. The twitpic structure is replicated in a var here, which then gets injected in to the expanded tweet pane to give the media preview.</p>
<h3 id="get">Get the bookmarklet!</h3>
<p>All of the above gives us a Twitter bookmarklet for <a href="javascript:twttr.mediaType('twttr.media.types.Imgur',{icon:'photo',domain:'http://imgur.com',matchers:{media:/imgur.com\/([a-zA-Z0-9\.]+)/g},process:function(A){ if(this.slug.indexOf('.') < 0) this.slug = this.slug + '.jpg';this.data.src=this.slug; this.data.name=this.constructor._name; A() } ,render:function(B) { var A='
<div class=\'twitpic\'><img src=\'http://i.imgur.com/{src}\' /'+'/>'; $(B).append(twttr.supplant(A,this.data))}});void(0);">Imgur previews</a>.</p>
<div id="attachment_354" class="wp-caption alignright" style="width: 246px"><a href="http://www.conroyp.com/wp-content/uploads/2010/11/preview_added.png"><img src="http://www.conroyp.com/wp-content/uploads/2010/11/preview_added.png" alt="" title="Preview Added" width="236" height="75" class="size-full wp-image-354" /></a><p class="wp-caption-text">Preview added successfully</p></div>
<p>Simply drag the above link to your browser's bookmark bar, click it when next on Twitter.com and any future tweets with imgur.com should now have a media preview enabled!</p>
<p>The quickest way to check that it's working right is to do a twitter search for "imgur.com", and the media icons should then be shown against the resulting tweets.</p>
<h3>FAQ</h3>
<p><em>- I've applied the bookmarklet, but the imgur links in my timeline still aren't showing a preview</em><br />
This bookmarklet works for any new imgur links which show up after you apply it. Not ideal, but it's a start. The next version should apply itself retrospectively to any previously-loaded tweets.</p>
<p><em>- Wait, a bookmarklet? What is that?</em><br />
A bookmarklet is a small chunk of javascript that allows us to extend the functionality of a given page. See <a href="http://www.conroyp.com/2010/04/04/bookmarklets-a-quick-explanation/">this explanation</a> for a bit more detail.</p>
<p><em>- Bookmarklets are a pain to use, having to re-apply them is annoying</em><br />
True and true. This was more an exercise in seeing how readily extensible the twitter javascript was. Ultimately the plan is to roll this bookmarklet and the various Declutter ones up in to a chrome/firefox extension that is automatically applied on page load.<br />
<b>Update 08/12/2010 - basic Firefox extension to enable this media preview is now available in the <a href="https://addons.mozilla.org/en-US/firefox/addon/261946/">Add-Ons sandbox</a>. This extension also previews Daft.ie and Adverts.ie content</b>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2010/11/30/extending-twitter-web-interface-adding-imgur-previews/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>But how will the markets react?</title>
		<link>http://www.conroyp.com/2010/11/28/but-how-will-the-markets-react/</link>
		<comments>http://www.conroyp.com/2010/11/28/but-how-will-the-markets-react/#comments</comments>
		<pubDate>Sun, 28 Nov 2010 22:34:53 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Miscellantry]]></category>
		<category><![CDATA[Tech]]></category>
		<category><![CDATA[markets]]></category>
		<category><![CDATA[prediction]]></category>
		<category><![CDATA[single-serving]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=304</guid>
		<description><![CDATA[Over the last few weeks, as Ireland has continued a head-long dive in to a financial abyss, it seems that every policy proposal, every political criticism and even every newspaper editorial has met the default response of "how will the markets react?" The main problem experienced here in Ireland is that much of the reaction-provoking [...]]]></description>
			<content:encoded><![CDATA[<div class="clear"></div>
<p><a href="http://www.howwillthemarketsreact.com/?q=bailout"><img src="http://www.conroyp.com/wp-content/uploads/2010/11/reaction2-300x57.gif" alt="Market Reaction" title="Market Reaction" width="300" height="57" class="aligncenter size-medium wp-image-311" /></a></p>
<p>Over the last few weeks, as Ireland has continued a head-long dive in to a financial abyss, it seems that every policy proposal, every political criticism and even every newspaper editorial has met the default response of "how will the markets react?"</p>
<p><span id="more-304"></span><br />
The main problem experienced here in Ireland is that much of the reaction-provoking incidents tend to happen in the evening, after the traders have gone home for the evening. This means an anxious wait of several hours before the markets open again, whilst we wait on tenter-hooks trying to anticipate their collective reaction to the latest scandal/discovery of government "mistruths".</p>
<p>The "international markets" can seem to the casual observer to behave with all the consistency and logic of a stroppy teenager in the middle of a mood swing. Predicting their reaction to any kind of news is usually as much luck as anything else, like predicting the toss of a coin.</p>
<p>However, after many careful hours spent studying historical charts, graphs and market trends, a pattern has been found!</p>
<p>No longer shall governments spend sleepless nights tossing and turning about the anticipated market reaction to a <a href="http://www.howwillthemarketsreact.com/?q=government+bailout">government bailout</a>. </p>
<p>Politicians on certain peripheral European islands don't need to constantly check their blackberry to see what the market would make of a - whisper it now - <a href="http://www.howwillthemarketsreact.com/?q=default">default</a>.</p>
<p>With the release of <a href="http://www.howwillthemarketsreact.com/">HowWillTheMarketsReact.com</a>, all of the guesswork and nervous waiting can be removed from economic decision making. Now the next problem will be filling those hours of tv &#038; radio airtime currently spent speculating on market reactions.. </p>
<p><a href="http://www.howwillthemarketsreact.com/">HowWillTheMarketsReact.com</a> - tomorrow's markets, today!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2010/11/28/but-how-will-the-markets-react/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Analytics eccentricities</title>
		<link>http://www.conroyp.com/2010/06/22/analytics-eccentricities/</link>
		<comments>http://www.conroyp.com/2010/06/22/analytics-eccentricities/#comments</comments>
		<pubDate>Tue, 22 Jun 2010 17:10:54 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[analytics]]></category>
		<category><![CDATA[bugfix]]></category>
		<category><![CDATA[google]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=209</guid>
		<description><![CDATA[Back around the start of March, I noticed that pretty much every time I logged in to Google Analytics I was running in to problems with the summary views. The dashboard would typically load up my list of sites, then freeze without actually fetching any data. Refreshing the page would usually sort this out, before [...]]]></description>
			<content:encoded><![CDATA[<p>Back around the start of March, I noticed that pretty much every time I logged in to Google Analytics I was running in to problems with the summary views.</p>
<p>The dashboard would typically load up my list of sites, then freeze without actually fetching any data. Refreshing the page would usually sort this out, before the same thing happened again when I click in to a site's individual profile.</p>
<div id="attachment_242" class="wp-caption aligncenter" style="width: 535px"><a href="http://www.conroyp.com/wp-content/uploads/2010/06/dashboard.png"><img src="http://www.conroyp.com/wp-content/uploads/2010/06/dashboard.png" alt="" title="Dashboard Hanging" width="525" height="196" class="size-full wp-image-242" /></a><p class="wp-caption-text">Still loading..</p></div><br />
<span id="more-209"></span></p>
<p>
Occasionally, rather than the page just hanging, there would also be an error message to the effect of "This page has encountered an error which may prevent it from working correctly" which would appear in red at the top of the page. Again, refreshing the page would cause both of these to go away and normal service to resume.</p>
<p><div id="attachment_230" class="wp-caption aligncenter" style="width: 535px"><a href="http://www.conroyp.com/wp-content/uploads/2010/05/Analytics-Bug.png"><img src="http://www.conroyp.com/wp-content/uploads/2010/05/Analytics-Bug.png" alt="Analytics quirk" title="Analytics quirk" width="525" height="64" class="size-full wp-image-230" /></a><p class="wp-caption-text">We have a(n intermittent) problem</p></div>
<p>
<br />
As a refresh would sort these issues out after a brief wait, they were minor annoyances, but never annoying enough to justify time and energy spent hunting the web for a cure - more an itchy finger than a bad foot cramp.
</p>
<p>But eventually, that itch has to be scratched, so I looked in to it a little bit more. I eventually came across the following tid-bit on the <a href="http://www.google.com/support/forum/p/Google+Analytics/thread?tid=07ce7e97a706fee8&#038;hl=en">analytics support forum</a>:</p>
<blockquote><p>mobpage: try to set your date an time of computer ..it will work after that </p></blockquote>
<p>My local clock was running a bit fast, so I set it back by 10 minutes or so, and the errors magically disappeared! </p>
<h4>So what's happening here?</h4>
<p>Good question. As with all issues relating to google javascript, it's quite difficult to find out exactly what's at the root of this. The javascript is compressed and minified, so reverse-engineering it would require substantially more time than would be worth it!<br />
My suspicion is that at some point in the javascript analytics attempts to evaluate the difference between the local clock and the remote server one. This difference can be handy to have when working with date-sensitive info stored remotely, such as the raw analytics data. </p>
<p>My suspicion is that somewhere along the line a bug snuck in, whereby this code allows for there to be 0 difference, or for the server to be ahead of the local machine, but forget the check for the local machine to be ahead of the server.<br />
As such, when the local time is too far ahead, the code gets confused by the difference, hangs, and blocks the subsequent code from loading. </p>
<h4>Why does it work fine when you refresh the page?</h4>
<p>I'm guessing that this issue doesn't affect a page reload due to the combination of browser caching and black magic that appears when a js-heavy page is refreshed, namely that the initial checks are mostly cached and thus not capable of blocking the subsequent page load code which was previously prevented from running. As such, the rest of the page can be rendered without issue.</p>
<p>Again, most of the above is pure speculation on my part without any real assessment of the underlying code. However, the important point here is that I no longer get page freezes/red error bars in analytics, and the response time is noticeably faster, all from one clock change!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2010/06/22/analytics-eccentricities/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Grab Bag of Bookmarklets</title>
		<link>http://www.conroyp.com/2010/04/18/a-grab-bag-of-bookmarklets/</link>
		<comments>http://www.conroyp.com/2010/04/18/a-grab-bag-of-bookmarklets/#comments</comments>
		<pubDate>Sun, 18 Apr 2010 15:46:21 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[whois]]></category>

		<guid isPermaLink="false">http://www.conroyp.com/?p=179</guid>
		<description><![CDATA[A (semi-) frequently updated list of simple bookmarklets I've found somewhat useful. Some of the more complex ones for use on twitter.com (Custom filtering of the timeline and Hovercard removal) are discussed in more detail elsewhere on the site. The below are a collection of short and sweet bookmarklets that do a simple but effective [...]]]></description>
			<content:encoded><![CDATA[<p>A (semi-) frequently updated list of simple bookmarklets I've found somewhat useful. Some of the more complex ones for use on twitter.com (<a href="http://www.conroyp.com/2010/03/11/declutter/">Custom filtering of the timeline</a> and <a href="http://www.conroyp.com/2010/03/20/decluttering-twitter-part-deux/">Hovercard removal</a>) are discussed in more detail elsewhere on the site. The below are a collection of short and sweet bookmarklets that do a simple but effective job.</p>
<p><span id="more-179"></span><br />
<b>Quick Links</b></p>
<ul>
<li><a href='#whois'>WHOIS Lookup</a></li>
<li><a href='#dual_site'>Dual Site Toggle</a></li>
<li><a href='#dfeojm'>Down for everyone, or just me?</a></li>
</ul>
<p></p>
<h3 id='whois'>WHOIS Lookup</h3>
<p><a href="http://en.wikipedia.org/wiki/WHOIS">WHOIS</a> is a protocol for finding out the contact details of the owner of a domain. Traditionally this information is accessed via the command line, however a number of websites now exist as wrappers for this information. </p>
<p>Sites such as <a href="http://who.is/">Who.is</a> allow accessing of domain ownership and contact info via a web browser. What's particularly nice about the who.is site is that you can query any site by placing the domain name you wish to query at the end of the who.is url, i.e. http://who.is/daft.ie will give WHOIS info for Daft.ie.</p>
<p>This simple <a href="javascript:window.location = 'http://who.is/whois/'+window.location.host;">WHOIS bookmarklet</a> automates this process. Clicking this bookmarklet will query the WHOIS info for the site you're currently on, via the who.is site. Copy the code below in to a new bookmarklet, or drag the WHOIS bookmarklet link above to your browser's bookmarks bar.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">window.<span style="color: #660066;">location</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://who.is/whois/'</span><span style="color: #339933;">+</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">host</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p></p>
<h3 id='dual_site'>Dual Site Toggle</h3>
<p>This bookmarklet when you want compare the same page on two different sites which both use the same url structure, e.g. a local development environment (localhost) and the same page on the live server (example.com).<br />
For this example, we'll compare property result pages on <a href="http://www.daft.ie">Daft.ie</a> with the same ones on the mobile version of the site, <a href="http://m.daft.ie">m.daft.ie</a>.</p>
<p>First, we decide on the two sites between which we want to toggle.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> siteA <span style="color: #339933;">=</span> <span style="color: #3366CC;">'www.daft.ie'</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> siteB <span style="color: #339933;">=</span> <span style="color: #3366CC;">'m.daft.ie'</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>
Next we need to grab the filename of the current page, as well as any query string arguments. This value will stay the same between both sites.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #006600; font-style: italic;">// Store the filename and query string, where applicable</span><br />
<span style="color: #003366; font-weight: bold;">var</span> sstr <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span><br />
<span style="color: #006600; font-style: italic;">// Query string exists?</span><br />
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">search</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">&gt;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; sstr <span style="color: #339933;">=</span> window.<span style="color: #660066;">location</span>.<span style="color: #660066;">pathname</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'?'</span><span style="color: #339933;">+</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">search</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><br />
<span style="color: #000066; font-weight: bold;">else</span><br />
<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; sstr <span style="color: #339933;">=</span> window.<span style="color: #660066;">location</span>.<span style="color: #660066;">pathname</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>
Finally, we need to figure out which host we're on, and then switch to the other one!</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">host</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>siteA<span style="color: #009900;">&#41;</span><span style="color: #339933;">==-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; window.<span style="color: #660066;">location</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'http://'</span><span style="color: #339933;">+</span>siteA<span style="color: #339933;">+</span>sstr<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><br />
<span style="color: #000066; font-weight: bold;">else</span><br />
<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; window.<span style="color: #660066;">location</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://'</span><span style="color: #339933;">+</span>siteB<span style="color: #339933;">+</span>sstr<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>As it's a bookmarklet, we need to compress it all down to one line.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">javascript<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">var</span> siteA <span style="color: #339933;">=</span> <span style="color: #3366CC;">'www.daft.ie'</span><span style="color: #339933;">;</span><span style="color: #003366; font-weight: bold;">var</span> siteB <span style="color: #339933;">=</span> <span style="color: #3366CC;">'m.daft.ie'</span><span style="color: #339933;">;</span><span style="color: #003366; font-weight: bold;">var</span> sstr <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">search</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">&gt;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>sstr <span style="color: #339933;">=</span> window.<span style="color: #660066;">location</span>.<span style="color: #660066;">pathname</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'?'</span><span style="color: #339933;">+</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">search</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</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;">else</span><span style="color: #009900;">&#123;</span>sstr <span style="color: #339933;">=</span> window.<span style="color: #660066;">location</span>.<span style="color: #660066;">pathname</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">host</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>siteA<span style="color: #009900;">&#41;</span><span style="color: #339933;">==-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>window.<span style="color: #660066;">location</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'http://'</span><span style="color: #339933;">+</span>siteA<span style="color: #339933;">+</span>sstr<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>window.<span style="color: #660066;">location</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://'</span><span style="color: #339933;">+</span>siteB<span style="color: #339933;">+</span>sstr<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>To use this toggle, you can either copy the above code to a new bookmarklet, or drag this <a href="javascript:var siteA = 'www.daft.ie';var siteB = 'm.daft.ie';var sstr = '';if(window.location.search.substring(1).length>1){sstr = window.location.pathname+'?'+window.location.search.substring(1);}else{sstr = window.location.pathname;};if(window.location.host.indexOf(siteA)==-1){window.location='http://'+siteA+sstr;}else{window.location = 'http://'+siteB+sstr;};">Site toggle</a> link to your bookmarks bar.<br />
<br />To see it in action, we can pick <a href="http://www.daft.ie/searchsale.daft?id=428175">a random house on Daft.ie</a> (in this case, the house used by TV3's The Apprentice), then click the bookmarklet to toggle between the mobile and web versions of the same page.</p>
<p>Updating this for any other pair of sites is as simple as editing the siteA and siteB variables in the bookmarklet.</p>
<p></p>
<h3 id='dfeojm'>Down for everyone, or just me?</h3>
<p><a href="http://www.downforeveryoneorjustme.com">Downforeveryoneorjustme.com</a> is a site that comes in handy when trying to check whether a site being inaccessible is a problem with the site itself, or your local network. It will basically ping the server from a location different to your own, and see if it's still available from there.</p>
<p>We're basically doing the same thing here as we did for the WHOIS bookmarklet above, so:</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">window.<span style="color: #660066;">location</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://www.downforeveryoneorjustme.com/'</span><span style="color: #339933;">+</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">host</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>
Dragging this <a href="javascript:window.location = 'http://www.downforeveryoneorjustme.com/'+window.location.host;">DFEOJM bookmarklet</a> to your browser's bookmarks bar will let you check the next time you get a "server inaccessible" error message whether the problem is on your network or with the site itself.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.conroyp.com/2010/04/18/a-grab-bag-of-bookmarklets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

