Never write HTML, Javascript, or CSS again — Part 3 of n

As you’ll notice in the my website which I’m using as a test case  for The Great DSL Experiment, there’s a reCAPTCHA block on the new user registration page (http://needsandgifts.herokuapp.com/new_user).  Let’s have some fun getting that working in my Ruby DSL:

In the original website, the markup was:

<%= recaptcha_tags %>

which is just a function call that generates some HTML.

We first need to add the required gem:

gem 'recaptcha', :require => 'recaptcha/rails'

and then run “bundle install”

We also need to set up the API keys, for which instructions are here: https://github.com/ambethia/recaptcha/blob/master/README.rdoc

Since I don’t want to share my keys, the .gitignore file gets updated with:

config/initializers/recaptcha.rb

We also need to:

include Recaptcha::ClientHelper

in the Ruby code to be able to explicitly call recaptcha_tags in Ruby rather than from the ERB view (Rails obviously is doing some magic here.)

Now we can obtain the markup that needs to be embedded:

recaptcha_html = recaptcha_tags()

I want the recaptcha block on its own row, centered, which I’ll specify like this (remember I’m using Foundation Zurb):

airity1

 

 

 

and lastly, I’ll need to implement the “inject” function.  For this, I’ll also update clifton_lib (https://github.com/cliftonm/clifton_lib) to implement an HtmlFragment (derived from XmlNode and not to be found in the .NET equivalent of the XmlDocument and supporting classes) which is going to have a special case handler in XmlDocument#write_nodes.

Now, I’m not very thrilled with how this looks when you start reducing the width of the window — I did all my testing in full-screen width.  Something to explore and also to figure out why Foundation’s small-centered isn’t doing anything.

The result is:

airity2

 

 

 

 

 

 

As usual, you can view this live here.

And as usual, besides the centering bothering me, the bottom of the reCAPTCHA block looks really bad as well.  The number of small details is growing!  Probably a good time to address them next.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s