Dapper Dan aims to be a very simple block DSL in Ruby for writing HTML documents. Instead of using alien syntaxes or dealing with embedded HTML, Dapper Dan lets you do what you know: Ruby. HTML tags are Ruby methods, tag elements are passed Ruby Hashes, and children are in blocks. Dapper Dan also provides some useful substitutions for the regular tag names, and fun little features.
First the classic web page in HTML:
<!DOCTYPE html>
<html>
<head>
<title> My Web Page | Post #23 </title>
<meta name="author" content="Kurtis Rainbolt-Greene" >
<meta name="description" content="This is a standard web page in html" >
<meta name="keywords" content="standard, web, app, html page" >
<meta name="created" content="2010-10-10 12:20:34 PST" >
<link href="/assets/icons/favicon.png" rel="shortcut icon" type="image/png" >
<link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1> My Web Page | Post #23 </h1>
</header>
<nav>
<ul>
<li> <a href="/home"> Home </a> </li>
<li> <a href="/resume"> Resume </a> </li>
<li> <a href="/gallery"> Gallery </a> </li>
</ul>
</nav>
<article>
<section id="title">
<h2> This is my web page post! </h2>
</section>
<section id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<a href="http://twitter.com/krainboltgreene">Ut enim</a> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<strong>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</strong>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section id="notes">
<ol>
<li>Duis aute irure</li>
<li>qui officia deserunt mollit</li>
<li>Excepteur sint occaecat cupidatat</li>
</ol>
</section>
</article>
<footer>
<section class="copyright">
<p style="font-weight: bold;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</footer>
</body>
</html>That's pretty verbose, right? Lets look at it through the lense of a popular Ruby gem called HAML:
!!!
%html
%head
%title My Web Page | Post #23
%meta{:content => "Kurtis Rainbolt-Greene", :name => "author"}
%meta{:content => "This is a standard web page in html", :name => "description"}
%meta{:content => "standard, web, app, html page", :name => "keywords"}
%meta{:content => "2010-10-10 12:20:34 PST", :name => "created"}
%link{:href => "/assets/icons/favicon.png", :rel => "shortcut icon", :type => "image/png"}
%link{:href => "/assets/application.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
%body
%header
%h1 My Web Page | Post #23
%nav
%ul
%li
%a{:href => "/home"} Home
%li
%a{:href => "/resume"} Resume
%li
%a{:href => "/gallery"} Gallery
%article
%section#title
%h2 This is my web page post!
%section#content
%p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
%a{:href => "http://twitter.com/krainboltgreene"} Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
%strong Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
%section#notes
%ol
%li Duis aute irure
%li qui officia deserunt mollit
%li Excepteur sint occaecat cupidatat
%footer
%section.copyright
%p{:style => "font-weight: bold;"}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Wow! That really improved the amount of stuff we had to write. Sadly, though we had to do it in an alien syntax called "HAML". None of this is Ruby!
Lets try this in Dapper Dan:
html type: HTML5 do
head {
title "My Web Page | Post #23"
author "Kurtis Rainbolt-Greene"
description "This is a standard web page in Dapper Dan"
keywords ["standard", "web", "app", "html page"]
created "2010-10-10 12:20:34 PST"
favicon "/assets/icons/favicon.png"
stylesheet path: "/assets/application.css", media: :screen
}
body do
header { head("My Web Page | Post #23", 1) }
nav do
list do
item link "Home", "/home"
item link "Resume", "/resume"
item link "Gallery", "/gallery"
end
end
article do
section id: 'title' do
head "This is my web page post!", 2
end
section id: 'content' do
para do
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
#{link "Ut enim", "http://twitter.com/krainboltgreene" } ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. #{strong "Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur." } Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum."
end
end
section id: 'notes' do
list :order do
item "Duis aute irure"
item "qui officia deserunt mollit"
item "Excepteur sint occaecat cupidatat"
end
end
end
footer do
section class: 'copyright' do
para do
style "font-weight: bold;"
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
end
end
end
end
endInstalling this fun gem is as simple as installing any other gem:
gem install dapper-dan
or adding it to your Gemfile:
gem "dapper-dan", "~ 1.0.0"
To read more about Dapper Dan feel free to visit the Wiki, and please contribute if you can!
Having a problem with Dapper Dan? Or you think something should be added? Talk to us at the Issues page.
Copyright (c) 2011 Kurtis Rainbolt-Greene
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- Michael Richter, for keeping on me to learn more.
- Each of my students, for allowing me to learn by teaching.
- My best developer friends: zzak, steveklabnik, ashbb, and many more!