<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" version="2.0">

<channel>
	<title>The Lucid</title>
	
	<link>http://thelucid.com</link>
	<description>Lightweight ramblings</description>
	<lastBuildDate>Sun, 14 Feb 2010 18:08:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/thelucid" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="thelucid" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Nokogiri for Cucumber steps that need to compare HTML attributes</title>
		<link>http://thelucid.com/2010/02/14/nokogiri-for-cucumber-steps-that-need-to-compare-html-attributes/</link>
		<comments>http://thelucid.com/2010/02/14/nokogiri-for-cucumber-steps-that-need-to-compare-html-attributes/#comments</comments>
		<pubDate>Sun, 14 Feb 2010 18:07:07 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[cucumber]]></category>
		<category><![CDATA[rails cucumber nokogiri ruby]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=564</guid>
		<description><![CDATA[I have found on numerous occasions that I need to look at HTML attributes when diffing tables etc. in Cucumber. My current need for this arrises as I have a gallery of thumbnails that all have alt tags who&#8217;s values I need to compare as there is not a text equivalent.
A feature statement like this:

Then [...]]]></description>
			<content:encoded><![CDATA[<p>I have found on numerous occasions that I need to look at HTML attributes when diffing tables etc. in Cucumber. My current need for this arrises as I have a gallery of thumbnails that all have alt tags who&#8217;s values I need to compare as there is not a text equivalent.</p>
<p>A feature statement like this:</p>
<pre>
Then I should see the following thumbnails
  | Mona Lisa  |
  | Sunflowers |
</pre>
<p>Could be achieved with the following step:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">Then</span> <span style="color:#006600; font-weight:bold;">/</span>^I should see the following thumbnails$<span style="color:#006600; font-weight:bold;">/</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>table<span style="color:#006600; font-weight:bold;">|</span>
  nodes = <span style="color:#6666ff; font-weight:bold;">Nokogiri::HTML</span><span style="color:#006600; font-weight:bold;">&#40;</span>response.<span style="color:#9900CC;">body</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">css</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'ul#gallery li img'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  table.<span style="color:#9900CC;">diff</span>!<span style="color:#006600; font-weight:bold;">&#40;</span>nodes.<span style="color:#9900CC;">map</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#006600; font-weight:bold;">|</span>img<span style="color:#006600; font-weight:bold;">|</span> <span style="color:#006600; font-weight:bold;">&#91;</span>img.<span style="color:#9900CC;">attributes</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'alt'</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_s</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/02/14/nokogiri-for-cucumber-steps-that-need-to-compare-html-attributes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Why I stopped using Pickle with Cucumber</title>
		<link>http://thelucid.com/2010/02/07/why-i-stopped-using-pickle-with-cucumber/</link>
		<comments>http://thelucid.com/2010/02/07/why-i-stopped-using-pickle-with-cucumber/#comments</comments>
		<pubDate>Sun, 07 Feb 2010 02:12:48 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[cucumber]]></category>
		<category><![CDATA[pickle]]></category>
		<category><![CDATA[testing]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=558</guid>
		<description><![CDATA[&#8230;no, not because it leaves a bitter aftertaste, I&#8217;m talking about the Pickle step definitions for Cucumber.
I have lately been using Pickle when writing Cucumber features, however I have come to the conclusion that this is a bad idea. The reason being that when using Pickle, you create entries directly, whereas the whole point of [...]]]></description>
			<content:encoded><![CDATA[<p>&#8230;no, not because it leaves a bitter aftertaste, I&#8217;m talking about the <a href="http://github.com/ianwhite/pickle">Pickle</a> step definitions for <a href="http://github.com/aslakhellesoy/cucumber/">Cucumber</a>.</p>
<p>I have lately been using <a href="http://github.com/ianwhite/pickle">Pickle</a> when writing <a href="http://github.com/aslakhellesoy/cucumber/">Cucumber</a> features, however I have come to the conclusion that this is a bad idea. The reason being that when using Pickle, you create entries directly, whereas the whole point of Cucumber is that it is for high level integration testing.</p>
<p>What I do now, is to create any entries by filling out and submitting the relevant forms with a step definition, for example I may have the following:</p>
<pre>
Given an admin has created the following products
  | Name    | Variants                                  | Featured |
  | T-Shirt | Small: 10.99, Medium: 12.99, Large: 14.99 | Yes      |
  | Keyring | Default: 2.99                             | Yes      |
</pre>
<p>I would then write a step definition for this that would log in as the admin user, break this table appart and fill in the relevant forms.</p>
<p>I would go so far as to say that using factories at all in features is a bad idea and instead everything should happen via the user interface for better coverage. For any data that is known to exist when the app is deployed via &#8216;rake db:seed&#8217;, this can be loaded in the &#8216;env.rb&#8217; file e.g.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#CC0066; font-weight:bold;">load</span> <span style="color:#996600;">'seeds.rb'</span></pre></div></div>

<p><strong>Update 11/2/2010:</strong> Sometimes this is simply not practical due to slowdown which is a shame, as noted by Amos in the comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/02/07/why-i-stopped-using-pickle-with-cucumber/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Devise Rails Authentication Gem Rocks!</title>
		<link>http://thelucid.com/2010/02/06/devise-rails-authentication-gem-rocks/</link>
		<comments>http://thelucid.com/2010/02/06/devise-rails-authentication-gem-rocks/#comments</comments>
		<pubDate>Sat, 06 Feb 2010 21:36:28 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[authentication]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=555</guid>
		<description><![CDATA[I&#8217;ve had a set of rather bespoke requirements for authentication on a recent project and thought I&#8217;d give Devise a go.
Devise uses Warden, which is an authentication solution build on Rack making it extremely flexible and usable across multiple frameworks e.g. Rails/Sinatra. Also, Devise is extremely modular meaning to can easily write custom &#8220;strategies&#8221; for [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve had a set of rather bespoke requirements for authentication on a recent project and thought I&#8217;d give <a href="http://github.com/plataformatec/devise">Devise</a> a go.</p>
<p>Devise uses <a href="http://github.com/hassox/warden/">Warden</a>, which is an authentication solution build on <a href="http://github.com/rack/rack">Rack</a> making it extremely flexible and usable across multiple frameworks e.g. Rails/Sinatra. Also, Devise is extremely modular meaning to can easily write custom &#8220;strategies&#8221; for specific behaviour.</p>
<p>I have used <a href="http://github.com/thoughtbot/clearance/">Clearance</a> in the past which is great if you want an engine that will just work. Devise however is by far the most flexible and extensible solution that I have come across with the same ease of use as Clearance. The only thing that you don&#8217;t get with devise that you do with Clearance is the signup stage, however as this is normally custom on a per-app basis I can live with this.</p>
<p>One more thing to note is that Devise lets you have multiple auth systems in play e.g. one for users and one for admins.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/02/06/devise-rails-authentication-gem-rocks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Removing tags on remote Git repositories</title>
		<link>http://thelucid.com/2010/01/13/removing-tags-on-remote-git-repositories/</link>
		<comments>http://thelucid.com/2010/01/13/removing-tags-on-remote-git-repositories/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 09:52:59 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[git tag]]></category>

		<guid isPermaLink="false">http://thelucid.com/2010/01/13/removing-tags-on-remote-git-repositories/</guid>
		<description><![CDATA[A quick note on how to delete a tag from a remote git repository:

git push github :refs/tags/my_tag

]]></description>
			<content:encoded><![CDATA[<p>A quick note on how to delete a tag from a remote git repository:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">git push github :refs<span style="color: #000000; font-weight: bold;">/</span>tags<span style="color: #000000; font-weight: bold;">/</span>my_tag</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/01/13/removing-tags-on-remote-git-repositories/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Releasing the SonicIQ Gems</title>
		<link>http://thelucid.com/2010/01/13/releasing-the-soniciq-gems/</link>
		<comments>http://thelucid.com/2010/01/13/releasing-the-soniciq-gems/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 09:38:44 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[General]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=550</guid>
		<description><![CDATA[Just a quick post to say that I will be slowly releasing the ruby gems used at SonicIQ over the next few weeks/months. The first (more to test the workflow of Jewler/Gemcutter/Github than anything), is IQ::HTML.
IQ::HTML is a super simple gem with a few helpers for creating html markup much like you&#8217;ll see in ActionPack, [...]]]></description>
			<content:encoded><![CDATA[<p>Just a quick post to say that I will be slowly releasing the ruby gems used at SonicIQ over the next few weeks/months. The first (more to test the workflow of <a href="http://github.com/technicalpickles/jeweler/">Jewler</a>/<a href="http://gemcutter.org/">Gemcutter</a>/<a href="http://github.com/soniciq">Github</a> than anything), is <a href="http://github.com/soniciq/iq-html">IQ::HTML</a>.</p>
<p><a href="http://github.com/soniciq/iq-html">IQ::HTML</a> is a super simple gem with a few helpers for creating html markup much like you&#8217;ll see in <a href="http://github.com/rails/rails/tree/master/actionpack/">ActionPack</a>, however this is it&#8217;s only task and is therefore useful when you don&#8217;t want the extra weight of <a href="http://github.com/rails/rails/tree/master/actionpack/">ActionPack</a>.</p>
<p>Next up will be <a href="http://github.com/soniciq/iq-form">IQ::Form which currently exists on Github</a> but is undergoing significant changes so I would suggest waiting for the new release.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/01/13/releasing-the-soniciq-gems/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sexy Validation in Edge Rails (Rails 3)</title>
		<link>http://thelucid.com/2010/01/08/sexy-validation-in-edge-rails-rails-3/</link>
		<comments>http://thelucid.com/2010/01/08/sexy-validation-in-edge-rails-rails-3/#comments</comments>
		<pubDate>Fri, 08 Jan 2010 16:32:47 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[SonicIQ]]></category>
		<category><![CDATA[rails sexy-validations rails-3 ruby]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=533</guid>
		<description><![CDATA[I have just had my sexy validations patch excepted into Rails. Much thanks to José Valim for helping me get this applied.
The reason for the name &#8220;sexy validations&#8221; is that it gives a much more concise way of defining validation and reusing custom validator classes. Much like what sexy migrations did for defining your database [...]]]></description>
			<content:encoded><![CDATA[<p>I have just had my <a href="https://rails.lighthouseapp.com/projects/8994/tickets/3058-patch-sexy-validations">sexy validations patch excepted</a> into Rails. Much thanks to José Valim for helping me get this applied.</p>
<p>The reason for the name &#8220;sexy validations&#8221; is that it gives a much more concise way of defining validation and reusing custom validator classes. Much like what <a href="http://ryandaigle.com/articles/2007/5/6/what-s-new-in-edge-rails-bringin-sexy-back">sexy migrations</a> did for defining your database schema.</p>
<p>Simple example of using existing Rails validations, the &#8220;sexy&#8221; way:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> Film <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  validates <span style="color:#ff3333; font-weight:bold;">:title</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:uniqueness</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:length</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:maximum</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006666;">100</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  validates <span style="color:#ff3333; font-weight:bold;">:budget</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:length</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:within</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> 1..10000000 <span style="color:#006600; font-weight:bold;">&#125;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>The power of the &#8220;validates&#8221; method comes though, when using in conjunction with custom validators:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> IntenseFilmTitleValidator <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveModel::EachValidator</span>
  <span style="color:#9966CC; font-weight:bold;">def</span> validate_each<span style="color:#006600; font-weight:bold;">&#40;</span>record, attribute, value<span style="color:#006600; font-weight:bold;">&#41;</span>
    record.<span style="color:#9900CC;">errors</span><span style="color:#006600; font-weight:bold;">&#91;</span>attribute<span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> <span style="color:#996600;">&quot;must start with 'The'&quot;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> =~ <span style="color:#006600; font-weight:bold;">/</span>^The<span style="color:#006600; font-weight:bold;">/</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">class</span> SpendValidator <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveModel::EachValidator</span>
  <span style="color:#9966CC; font-weight:bold;">def</span> validate_each<span style="color:#006600; font-weight:bold;">&#40;</span>record, attribute, value<span style="color:#006600; font-weight:bold;">&#41;</span>
    spend = <span style="color:#9966CC; font-weight:bold;">case</span> options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:size</span><span style="color:#006600; font-weight:bold;">&#93;</span>
      <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:big</span> <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006666;">100000000</span>
      <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:small</span> <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006666;">100000</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
    record.<span style="color:#9900CC;">errors</span><span style="color:#006600; font-weight:bold;">&#91;</span>attribute<span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> <span style="color:#996600;">&quot;must not exceed #{spend}&quot;</span> <span style="color:#9966CC; font-weight:bold;">if</span> value <span style="color:#006600; font-weight:bold;">&gt;</span> spend
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">class</span> Film <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  validates <span style="color:#ff3333; font-weight:bold;">:title</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:intense_film_title</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>
  validates <span style="color:#ff3333; font-weight:bold;">:budget</span>, <span style="color:#ff3333; font-weight:bold;">:spend</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:size</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:big</span> <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#008000; font-style:italic;"># using custom options</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>All validations in Rails, along with other common model functionality have been extracted into ActiveModel, so you can also use validations and Validator classes without ActiveRecord e.g.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> EmailValidator <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveModel::EachValidator</span>
  <span style="color:#9966CC; font-weight:bold;">def</span> validate_each<span style="color:#006600; font-weight:bold;">&#40;</span>record, attribute, value<span style="color:#006600; font-weight:bold;">&#41;</span>
    record.<span style="color:#9900CC;">errors</span><span style="color:#006600; font-weight:bold;">&#91;</span>attribute<span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> <span style="color:#006600; font-weight:bold;">&#40;</span>options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:message</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">||</span> <span style="color:#996600;">&quot;is not an email&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#9966CC; font-weight:bold;">unless</span>
      value =~ <span style="color:#006600; font-weight:bold;">/</span>^<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#91;</span>^@\s<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>@<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#40;</span>?:<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">-</span>a<span style="color:#006600; font-weight:bold;">-</span>z0<span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">9</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span>\.<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#91;</span>a<span style="color:#006600; font-weight:bold;">-</span>z<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006666;">2</span>,<span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>$<span style="color:#006600; font-weight:bold;">/</span>i
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">class</span> Person
  <span style="color:#9966CC; font-weight:bold;">include</span> <span style="color:#6666ff; font-weight:bold;">ActiveModel::Validations</span>
  attr_accessor <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:email</span>
&nbsp;
  validates <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:length</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:maximum</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006666;">100</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  validates <span style="color:#ff3333; font-weight:bold;">:email</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:email</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Have fun!</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/01/08/sexy-validation-in-edge-rails-rails-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sarcasm from Google Feedburner</title>
		<link>http://thelucid.com/2010/01/08/sarcasm-from-google-feedburner/</link>
		<comments>http://thelucid.com/2010/01/08/sarcasm-from-google-feedburner/#comments</comments>
		<pubDate>Fri, 08 Jan 2010 15:08:44 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[Funny]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[funny google feedburner sarcasm]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=526</guid>
		<description><![CDATA[Was just transferring my Feedburner account for this blog and clicked the &#8220;Item Use&#8221; link under &#8220;Analyze&#8221;, got an interesting message:

I think more web apps should introduce sarcasm, it definitely brightened up my day.
]]></description>
			<content:encoded><![CDATA[<p>Was just transferring my Feedburner account for this blog and clicked the &#8220;Item Use&#8221; link under &#8220;Analyze&#8221;, got an interesting message:</p>
<p><a href="http://thelucid.com/files/sarky-feedburner.gif"><img src="http://thelucid.com/files/sarky-feedburner.gif" alt="Message from Feedburner stating: Item Use stats are pretty freakin’ sweet, but you gotta turn ‘em on." title="sarky-feedburner" width="470" height="281" class="alignnone size-full wp-image-528" /></a></p>
<p>I think more web apps should introduce sarcasm, it definitely brightened up my day.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2010/01/08/sarcasm-from-google-feedburner/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Colorbox within “overflow:hidden” container in Webkit</title>
		<link>http://thelucid.com/2009/12/29/jquery-colorbox-within-overflowhidden-container-in-webkit/</link>
		<comments>http://thelucid.com/2009/12/29/jquery-colorbox-within-overflowhidden-container-in-webkit/#comments</comments>
		<pubDate>Tue, 29 Dec 2009 19:35:06 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js jquery colorbox webkit fix bug]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=518</guid>
		<description><![CDATA[Wow, that&#8217;s a mouthful of a title.
Just run into an interesting bug in Webkit I believe. When using Colorbox on a link contained inside a div who&#8217;s overflow attribute was set to hidden, the div was being scrolled to the bottom when hitting the &#8220;close&#8221; link of the colorbox. This only seemed to happen in [...]]]></description>
			<content:encoded><![CDATA[<p>Wow, that&#8217;s a mouthful of a title.</p>
<p>Just run into an interesting bug in Webkit I believe. When using <a href="http://colorpowered.com/colorbox/">Colorbox</a> on a link contained inside a div who&#8217;s overflow attribute was set to hidden, the div was being scrolled to the bottom when hitting the &#8220;close&#8221; link of the colorbox. This only seemed to happen in Webkit browsers.</p>
<p>The solution was to watch for a scroll event on the div in question and scroll back to 0:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> viewer <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#viewer'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  viewer.<span style="color: #000066;">scroll</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> viewer.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Obviously, this is only a fix when you require your content to always be scrolled to the top, however this could serve as a starting point for other scenarios.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2009/12/29/jquery-colorbox-within-overflowhidden-container-in-webkit/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sexy Validations in Rails 3.0</title>
		<link>http://thelucid.com/2009/08/16/sexy-validations-in-rails-30/</link>
		<comments>http://thelucid.com/2009/08/16/sexy-validations-in-rails-30/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 00:54:25 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=513</guid>
		<description><![CDATA[Update: This patch has been applied but this information is out of date, please see: this new post.
Having had a patch accepted in Rails, I now have the bug (not a bug&#8230; the bug for writing patches&#8230; anyway).
I have just added this patch to allow for &#8220;sexy-migration-esque&#8221; validations using the new ActiveModel. Below explains the [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Update:</strong> This patch has been applied but this information is out of date, please see: <a href="http://thelucid.com/2010/01/08/sexy-validation-in-edge-rails-rails-3/">this new post</a>.</p>
<p>Having had <a href="https://rails.lighthouseapp.com/projects/8994/tickets/2936">a patch accepted</a> in Rails, I now have the bug (not a bug&#8230; the bug for writing patches&#8230; anyway).</p>
<p>I have just added <a href="https://rails.lighthouseapp.com/projects/8994-ruby-on-rails/tickets/3058-patch-sexy-validations#ticket-3058-2">this patch</a> to allow for &#8220;sexy-migration-esque&#8221; validations using the new ActiveModel. Below explains the gist of it:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">  <span style="color:#9966CC; font-weight:bold;">class</span> EmailValidator <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Validator</span>
    <span style="color:#9966CC; font-weight:bold;">def</span> validate
      field = options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:attr</span><span style="color:#006600; font-weight:bold;">&#93;</span>
      record.<span style="color:#9900CC;">errors</span><span style="color:#006600; font-weight:bold;">&#91;</span>field<span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> <span style="color:#996600;">&quot;is not valid&quot;</span>
        <span style="color:#9966CC; font-weight:bold;">unless</span> record.<span style="color:#9900CC;">send</span><span style="color:#006600; font-weight:bold;">&#40;</span>field<span style="color:#006600; font-weight:bold;">&#41;</span> =~ <span style="color:#006600; font-weight:bold;">/</span>^<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#91;</span>^@\s<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>@<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#40;</span>?:<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">-</span>a<span style="color:#006600; font-weight:bold;">-</span>z0<span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">9</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span>\.<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#91;</span>a<span style="color:#006600; font-weight:bold;">-</span>z<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006666;">2</span>,<span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>$<span style="color:#006600; font-weight:bold;">/</span>i
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
  <span style="color:#008000; font-style:italic;"># Register the custom validator in an initializer file.</span>
  <span style="color:#6666ff; font-weight:bold;">ActiveModel::Validations</span>.<span style="color:#9900CC;">register_validator</span> <span style="color:#ff3333; font-weight:bold;">:email</span>, EmailValidator
&nbsp;
  <span style="color:#9966CC; font-weight:bold;">class</span> Person <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveModel::Base</span>
    attr_accessor <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:email</span>
&nbsp;
    validates <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:uniqueness</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:length</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:maximum</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006666;">100</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
    validates <span style="color:#ff3333; font-weight:bold;">:email</span>, <span style="color:#ff3333; font-weight:bold;">:presence</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>, <span style="color:#ff3333; font-weight:bold;">:email</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">true</span>
  <span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>As with the previous patch I believe this adds even more flexibility which is what Rails 3 is all about. It also allows validators to be shared more easily.</p>
<p>Rails defaults can now also be overridden e.g.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">  <span style="color:#9966CC; font-weight:bold;">class</span> RequiredValidator <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Validator</span>
    <span style="color:#9966CC; font-weight:bold;">def</span> validate
      field = options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:attr</span><span style="color:#006600; font-weight:bold;">&#93;</span>
      record.<span style="color:#9900CC;">errors</span><span style="color:#006600; font-weight:bold;">&#91;</span>field<span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> <span style="color:#996600;">&quot;Required&quot;</span> <span style="color:#9966CC; font-weight:bold;">if</span> record.<span style="color:#9900CC;">send</span><span style="color:#006600; font-weight:bold;">&#40;</span>field<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">blank</span>?
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
  <span style="color:#6666ff; font-weight:bold;">ActiveModel::Validations</span>.<span style="color:#9900CC;">register_validator</span> <span style="color:#ff3333; font-weight:bold;">:email</span>, RequiredValidator</pre></div></div>

<p>I would appreciate a <a href="https://rails.lighthouseapp.com/projects/8994-ruby-on-rails/tickets/3058-patch-sexy-validations#ticket-3058-2">+1 on the ticket</a> from anyone who feels this should be in Rails 3.0.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2009/08/16/sexy-validations-in-rails-30/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>LucidGrid – a bookmarklet for working with grid based layouts</title>
		<link>http://thelucid.com/2009/02/07/lucidgrid-a-bookmarklet-for-working-with-grid-based-layouts/</link>
		<comments>http://thelucid.com/2009/02/07/lucidgrid-a-bookmarklet-for-working-with-grid-based-layouts/#comments</comments>
		<pubDate>Sat, 07 Feb 2009 20:10:50 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[General]]></category>

		<guid isPermaLink="false">http://thelucid.com/?p=508</guid>
		<description><![CDATA[I&#8217;m pleased to give you LucidGrid, a super useful &#8220;bookmarklet&#8221;:http://en.wikipedia.org/wiki/Bookmarklet for working with grid based layouts&#8230;
I have been working on a few grid based layouts of late and consistently find myself sitting with a calculator tapping out the various dimensions. I was surprised to find that there weren&#8217;t any simple bookmarklets for this so I [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m pleased to give you LucidGrid, a super useful &#8220;bookmarklet&#8221;:http://en.wikipedia.org/wiki/Bookmarklet for working with grid based layouts&#8230;</p>
<p>I have been working on a few grid based layouts of late and consistently find myself sitting with a calculator tapping out the various dimensions. I was surprised to find that there weren&#8217;t any simple bookmarklets for this so I wrote one.</p>
<p>LucidGrid allows you to supply a width, the number of columns you need and the gutter size and then overlays a grid on the current page. You may disable the grid by clicking the bookmarklet again or by clicking exit. If you choose to apply the grid, the preference dialog will minimise to the top right of the window.</p>
<p>Grid changes happen in realtime so it is easy to play with different settings.</p>
<p><img src="http://thelucid.com/files/lucid-grid-example-300x198.gif" alt="" width="300" height="198" /></p>
<p>Simply drag the link below to your bookmarks bar in your browser or click it to try it out first:</p>
<p><a href="javascript:(function(){void(theBody=document.getElementsByTagName('body')[0]);void(wrapper=document.getElementById('_lucid_wrapper'));if(wrapper!=null){void(theBody.removeChild(wrapper));}else{void(bodyFontSize=parseFloat((theBody.currentStyle||(window.getComputedStyle&#038;&#038;getComputedStyle(theBody,null))||theBody.style).fontSize));void(wrapper=document.createElement('div'));void(wrapper.id='_lucid_wrapper');void(wrapper.style.position='absolute');void(wrapper.style.top='0');void(wrapper.style.right=0);void(wrapper.style.bottom=0);void(wrapper.style.left=0);void(wrapper.style.background='rgba(0,0,0,0.5)');void(wrapper.style.zIndex='1097');void(modal=document.createElement('div'));void(modal.id='_lucid_grid_modal');void(modal.style.position='absolute');void(modal.style.width='384px');void(modal.style.left='50%');void(modal.style.top='40px');void(modal.style.marginLeft='-200px');void(modal.style.paddingTop='8px');void(modal.style.paddingRight='8px');void(modal.style.paddingBottom='8px');void(modal.style.paddingLeft='8px');void(modal.style.background='rgba(0,0,0,.45)');void(modal.style.zIndex='1099');void(fontStyle='font-family:%20Verdana,%20Arial,%20sans-serif;%20font-size:%2012px;%20font-weight:%20normal;');void(dtStyle=fontStyle+'float:left;%20clear:%20both;%20width:%20140px;%20margin:%200;%20padding:%206px%205px;%20text-align:%20right;');void(ddStyle=fontStyle+'float:right;%20width:%20200px;%20margin:%200;%20padding:%204px%205px;%20text-align:%20left;');void(labelStyle=fontStyle+'color:%20#333;');void(inputStyle=fontStyle+'width:%20100px;%20background:%20%23fff;%20margin:%200;%20padding:%202px;%20border:%201px%20solid%20%23c3c3c3;%20border-top-color:%20%237c7c7c;%20border-bottom-color:%20%23ddd;');void(annotationStyle=fontStyle+'color:%20rgba(255,255,255,.9);%20font-size:%209px;%20padding:%201px%206px;%20background:%20rgba(0,0,0,.6);%20border:%201px%20solid%20rgba(255,255,255,.9);%20-moz-border-radius:%201px;%20-webkit-border-radius:%201px;');void(modal.innerHTML='%3Cform%20style=%22float:left;%20margin:%200;%20padding:%200;%20width:%20384px;%20background:%20rgba(255,255,255,.85);%20border-bottom:%201px%20solid%20%23bbb;%22%3E'+'%3Ch1%20style=%22'+fontStyle+'font-weight:%20bold;%20background:%20%23bbb;%20border-top:%201px%20solid%20%23eee;%20border-bottom:%201px%20solid%20%23999;%20color:%20%23fff;%20margin:%200;%20padding:%2010px%2012px;%22%3ELucidGrid%20%3Cspan%20style=%22'+fontStyle+'color:%20%23333;%20font-size:%2010px;%20position:%20absolute;%20right:%2022px;%20top:%2020px;%22%3Eby%20%3Ca%20href=%22http://thelucid.com%22%20style=%22'+fontStyle+'color:%20%23369;%20font-size:%2010px;%22%3Ethelucid.com%3C/a%3E%20(v0.9)%3C/span%3E%3C/h1%3E'+'%3Cdl%20style=%22'+fontStyle+'float:left;%20width:%20360px;%20margin:%200;%20padding:%2012px;%20list-style:%20none;%20border-top:%201px%20solid%20%23fff;%22%3E'+'%3Cdt%20style=%22'+dtStyle+'%22%3E%3Clabel%20for=%22_lucid_grid_columns%22%20style=%22'+labelStyle+'%22%3EColumns:%3C/label%3E%3C/dt%3E'+'%3Cdd%20style=%22'+ddStyle+'%22%3E%3Cinput%20id=%22_lucid_grid_columns%22%20type=%22text%22%20value=%2212%22%20style=%22'+inputStyle+'%22%20maxlength=%222%22%20/%3E%3C/dd%3E'+'%3Cdt%20style=%22'+dtStyle+'%22%3E%3Clabel%20for=%22_lucid_grid_width%22%20style=%22'+labelStyle+'%22%3EWidth:%3C/label%3E%3C/dt%3E'+'%3Cdd%20style=%22'+ddStyle+'%22%3E%3Cinput%20id=%22_lucid_grid_width%22%20type=%22text%22%20value=%22960%22%20style=%22'+inputStyle+'%22%20maxlength=%224%22%20/%3E%20px%3C/dd%3E'+'%3Cdt%20style=%22'+dtStyle+'%22%3E%3Clabel%20for=%22_lucid_grid_gutter%22%20style=%22'+labelStyle+'%22%3EGutter:%3C/label%3E%3C/dt%3E'+'%3Cdd%20style=%22'+ddStyle+'%22%3E%3Cinput%20id=%22_lucid_grid_gutter%22%20type=%22text%22%20value=%2210%22%20style=%22'+inputStyle+'%22%20maxlength=%222%22%20/%3E%20px%3C/dd%3E'+'%3Cdt%20style=%22'+dtStyle+'%22%3E%3Clabel%20for=%22_lucid_grid_annotate%22%20style=%22'+labelStyle+'%22%3EAnnotate:%3C/label%3E%3C/dt%3E'+'%3Cdd%20style=%22'+ddStyle+'%22%3E%3Cinput%20id=%22_lucid_grid_annotate%22%20type=%22checkbox%22%20value=%220%22%20style=%22'+fontStyle+'%22%20/%3E%3C/dd%3E'+'%3C/dl%3E'+'%3Cp%20style=%22'+fontStyle+'text-align:%20center;%20font-size:%2011px;%20padding-bottom:%204px;%22%3E%3Cinput%20type=%22submit%22%20value=%22Apply%22%20id=%22_lucid_grid_apply%22%20style=%22'+fontStyle+'padding:%203px%206px;%20background:%20%23f5f5f5;%20border:%201px%20solid%20%23999;%20border-left-color:%20%23fff;%20border-top-color:%20%23fff;%22%20/%3E%20or%20%3Ca%20href=%22%23%22%20id=%22_lucid_grid_exit%22%20style=%22'+fontStyle+'color:%20%23369;%22%3Eexit%3C/a%3E%3C/p%3E'+'%3C/form%3E');void(grid=document.createElement('div'));void(grid.id='_lucid_grid');void(grid.style.position='relative');void(grid.style.marginLeft='auto');void(grid.style.marginRight='auto');void(grid.style.height='100%');void(grid.style.zIndex='1098');void(trigger=document.createElement('div'));void(trigger.innerHTML='%3Ca%20href=%22%23%22%20id=%22_lucid_grid_trigger%22%20style=%22'+fontStyle+'display:%20block;%20color:%20rgba(255,255,255,.9);%20font-size:%2011px;%20text-decoration:%20none;%20font-weight:%20normal;%20padding:%203px%2012px;%20background:%20rgba(0,0,0,.7);%20border:%202px%20solid%20rgba(255,255,255,.9);%20-moz-border-radius:%201px;%20-webkit-border-radius:%201px;%20-webkit-box-shadow:%200px%201px%202px%20rgba(0,0,0,0.6);%22%3ELucidGrid%3C/a%3E');void(trigger.style.position='absolute');void(trigger.style.right='12px');void(trigger.style.top='10px');void(trigger.style.display='none');void(trigger.style.zIndex='1099');void(wrapper.appendChild(grid));void(wrapper.appendChild(trigger));void(wrapper.appendChild(modal));void(theBody.appendChild(wrapper));void(columnInput=document.getElementById('_lucid_grid_columns'));void(widthInput=document.getElementById('_lucid_grid_width'));void(gutterInput=document.getElementById('_lucid_grid_gutter'));void(annotateInput=document.getElementById('_lucid_grid_annotate'));void(applyInput=document.getElementById('_lucid_grid_apply'));void(triggerLink=document.getElementById('_lucid_grid_trigger'));void(exitLink=document.getElementById('_lucid_grid_exit'));updateGrid=function(){while(grid.hasChildNodes()){void(grid.removeChild(grid.firstChild));};void(columns=columnInput.value);void(width=widthInput.value);void(gutter=gutterInput.value);void(annotate=annotateInput.checked);void(fullColumnWidth=width/columns);void(actualColumnWidth=fullColumnWidth-(gutter*2));void(columnWidth=parseInt(actualColumnWidth));void(widthEms=(width/bodyFontSize).toFixed(3));void(columnWidthEms=(columnWidth/bodyFontSize).toFixed(3));void(gutterEms=(gutter/bodyFontSize).toFixed(3));void(grid.style.width=(widthEms+'em'));for(i=0;i%3Ccolumns;i++){void(column=document.createElement('div'));void(column.style.width=(columnWidthEms+'em'));void(column.style.marginLeft=(gutterEms+'em'));void(column.style.marginRight=(gutterEms+'em'));void(column.style.height='100%');void(column.style.cssFloat='left');void(column.style.background='rgba(255,0,0,.4)');if(annotate){void(exampleWidth=(fullColumnWidth*(i+1))-(gutter*2));void(example=document.createElement('div'));void(example.innerHTML='%3Cdiv%20style=%22'+fontStyle+'text-align:%20center;%20padding:%2010px;%20border:%201px%20solid%20rgba(255,255,255,.8);%20background:%20rgba(0,0,0,.2);%20overflow:%20hidden;%22%3E%3Cspan%20style=%22'+annotationStyle+'%22%3E'+(((exampleWidth%1)==0)?exampleWidth:exampleWidth.toFixed(3))+'%3C/span%3E%3C/div%3E');void(exampleWidthEms=(exampleWidth/bodyFontSize).toFixed(3));void(example.style.position='absolute');void(example.style.width=(exampleWidthEms+'em'));if(i%3C(columns/2)){void(top=((50/bodyFontSize)*(i+1)));void(example.style.left=(gutterEms+'em'));}else{void(top=(((50/bodyFontSize)*columns)-(50/bodyFontSize)*(i+1)));void(example.style.right=(gutterEms+'em'));};void(example.style.top=((100/bodyFontSize)+top).toFixed(3)+'em');void(grid.appendChild(example));};void(grid.appendChild(column));};};void(columnInput.onkeyup=updateGrid);void(widthInput.onkeyup=updateGrid);void(gutterInput.onkeyup=updateGrid);void(annotateInput.onchange=updateGrid);void(applyInput.onclick=function(){modal.style.display='none';trigger.style.display='block';wrapper.style.background='rgba(0,0,0,0)';return%20false;});void(triggerLink.onclick=function(){modal.style.display='block';trigger.style.display='none';wrapper.style.background='rgba(0,0,0,0.5)';return%20false;});void(exitLink.onclick=function(){theBody.removeChild(wrapper);return%20false;});void(updateGrid());}})();">LucidGrid</a></p>
<p>Enjoy&#8230; (currently tested with Safari 3.2.1 and Firefox 3.0.5).</p>
<p>p.s. I will be adding cookie support soon so that the grid remains with the same settings between page views.</p>
]]></content:encoded>
			<wfw:commentRss>http://thelucid.com/2009/02/07/lucidgrid-a-bookmarklet-for-working-with-grid-based-layouts/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
