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):

 

 

 

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:

 

 

 

 

 

 

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.

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

Some HTML, CSS, and Javascript DSL Examples

In this post, I want to show you how I:

• added some CSS-DSL to make the checkbox and label look more pleasing by aligning vertically the checkbox
• Fixed the HTML-DSL to embed links in the label’s text
• Wrote the supporting Javascript in the DSL

First, we start with a basic DSL implementation:

This renders as:

which bothers me because the checkbox seems elevated above the text.  So let’s fix that first.  I’m going to specify a style called “checkbox-valign” using the CSS DSL:

which has a very simple definition:

 

 

resulting in a more pleasing alignment of the checkbox:

Next, I want to use the DSL to embed some HTML into the label’s text so that “Privacy Policy” and “Terms and Conditions” become clickable links.  I’ll write it with a couple helper functions (instead of embedding the function directly in the string) to make it clearer:

The helper functions call return the HTML generated by passing an expression to the DSL’s inline function:

In the HtmlDsl class, the inline function is implemented as follows:

Finally, we need some Javascript (in DSL of course) to deal with clicking on the links and showing the correct text and activating the correct link in the sidebar,
leveraging some functions we’ve already written in the DSL as well.

 

 

 

 

 

 

Now, when we click on the links in the “I acknowledge…” label, we get taken to the appropriate text.

Note that the notable “problem” with this is, since these are not separate pages, pressing “Back” on the browser doesn’t take you back to the registration page.

Try it live here.  Click on the “Register” menu item in the menu bar, then click on the links “Privacy Policy” and “Terms and Conditions” in the text next to the right of the checkbox.

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

At this point I have a few things working in my quest to never write HTML, Javascript, or CSS again.  The working name for my DSL engines is “Airity”.  I’ve set up a Git repository here: https://github.com/cliftonm/airity

and decided to try out Digital Ocean’s hosting service.  So far, very impressed.  It’s wicked fast!

So, I’m going to be blogging about my work on creating the DSL’s (Ruby on Rails at the moment) to support my lofty goal.  You’ll be able to review the code updates on GitHub and actually play with the pages on the hosted site here: http://107.170.20.40:3000/#

Background TODO list:

1. Figure out how why the menu bar is split until the page completely loads.
2. Item #1 is probably related to this: Why do I have to specify

   = javascript_include_tag "application"

   twice in the views\layouts\application.html.slim file?

3. Need to send to the server the current visible text area so that a page refresh re-shows that div (hiding the other text areas) and also “activates” the correct menu / sidebar.

Active TODO list:

Item #1:

At the moment, I have this code for generating the “I acknowledge…” checkbox in the Register section:

fz_dsl.row do
  fz_dsl.columns(16) do
    html_dsl.checkbox('ack', '  I acknowledge that I have read the Privacy Policy and Terms and Conditions')
  end
end

and what I need to do is create clickable areas for “Privacy Policy” and “Terms and Conditions” that then shows those relevant text areas.  Keep in mind that these sections are all part of the home page, shown/hidden as determined by the menu clicks or programmatically in the generated JavaScript.

Item #2:

Wire up some functionality, which will start to deal with the back-end model automation, another goal of this process.  The registration and sign in screens are a great place to start.