SlideShare a Scribd company logo
1 of 54
Download to read offline
Front End on Rails
A series of tips, tricks and a little magic
by Justin Halsall
Rails is sexy!
Rails is sexy!
If you know your stuff
HTML is sexy!
HTML is sexy!
If you know your stuff
Sexy!




Not Sexy!
Sexy!




Fronteers
fronteers.nl
<html>
<p>simple tips to minify hassle</p>
Doctype
be strict!
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
  quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
“near standards mode”
yuck!
different boxmodel
hell in a handbasket
inline/block level element
Block level elements
<div>
Your general-purpose box
<h1> ... <h6>
All headings
<p>
Paragraph
<ul>, <ol>, <dl>
Lists (unordered, ordered and definition)
<li>, <dt>, <dd>
List items, definition list terms, and definition list definitions
<table>
Tables
<blockquote>
Like an indented paragraph, meant for quoting passages of text
<pre>
Indicates a block of preformatted code
<form>
An input form
Inline elements
<span>
Your all-purpose inline element
<a>
Anchor, used for links (and also to mark specific targets on a page for direct
linking)
<strong>
Used to make your content strong, displayed as bold in most browsers, replaces
the narrower <b> (bold) tag
<em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text,
and replaces the old <i> (italic) tag
<img />
Image
<br>
The line-break is an odd case, as it's an inline element that forces a new line.
However, as the text carries on on the next line, it's not a block-level element.
<input>
Form input fields like text fields and buttons
<abbr>
Indicates an abbr. (hover to see how it works)
<acronym>
Working much like the abbreviation, but used for things like this TLA.
block nested in inline element


<strong><div></div></strong>
block nested in inline element


<strong><div></div></strong>
                          o it
                      ’t d
                   o n
                  D
http://flickr.com/photos/jelles/2656101758/
<h1>Headers</h1>


The first step towards semantic enlightenment
don’t use more that one <h1> on a page
headers should be used as a tree structure
<h1>Ruby</h1>




      <h2>Articles</h2>                      <h2>Documentation</h2>




<h3>RubyConf
  2010</h3>
                                      <h3>Books</h3>              <h3>Online</h3>
      <h3>Ruby 2.0.1
       relaesed</h3>




                                                       <h4>Pragmatic
                          <h4>O'Reily</h4>
                                                     programmers</h4>
IDs & Classes

IDs need to be unique
Class should be re-used
IDs define the elements identity
Classes define the elements type
<h1>List of companies that use Ruby</h1>
<ul>
  <li id='company_1' class='ruby_agency'>
     <h2>Ye olde webshoppe</h2>
     <p>Hero for hire</p>
  </li>
  <li id='company_2' class='startup'>
     <h2>Wakoopa</h2>
     <p>Cool dutch startup</p>
  </li>
  <li id='company_3' class='startup'>
     <h2>Soocial</h2>
     <p>Another cool dutch startup</p>
  </li>
</ul>
<h1>List of companies that use Ruby</h1>
<ul>
  <li id='company_1' class='ruby_agency'>
     <h2>Ye olde webshoppe</h2>
     <p>Hero for hire</p>
  </li>
  <li id='company_2' class='startup'>
     <h2>Wakoopa</h2>
     <p>Cool dutch startup</p>
  </li>
  <li id='company_3' class='startup'>
     <h2>Soocial</h2>
     <p>Another cool dutch startup</p>
  </li>
</ul>
<h1>List of companies that use Ruby</h1>
<ul>
  <li id='company_1' class='ruby_agency'>
     <h2>Ye olde webshoppe</h2>
     <p>Hero for hire</p>
  </li>
  <li id='company_2' class='startup'>
     <h2>Wakoopa</h2>
     <p>Cool dutch startup</p>
  </li>
  <li id='company_3' class='startup'>
     <h2>Soocial</h2>
     <p>Another cool dutch startup</p>
  </li>
</ul>
Specificity
#justin {
  color: yellow;
}
.webdeveloper {
  color: blue;
}

<p id='justin' class='webdeveloper'>
  Justin Halsall
</p>
Specificity
#justin {
  color: yellow;
}
.webdeveloper {
  color: blue;
}

<p id='justin' class='webdeveloper'>
  Justin Halsall
</p>


Justin Halsall
More info on Specificity
http://www.stuffandnonsense.co.uk/archives/
css_specificity_wars.html
Sass (Syntactically Awesome StyleSheets)

 Nicer syntax: no more {curly brackets}
 Nested rules: saves lots of repetition
 Variables
 Automatic minifying in production
Sass syntax
#main p
  :color #00ff00
  :width 97%

  .redbox
    :background-color #ff0000
    :color #000000
Sass syntax
                        #main p
                          :color #00ff00
                          :width 97%

                          .redbox
#main p {                   :background-color #ff0000
                            :color #000000
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }
Sass syntax
                        #main p
                          :color #00ff00
                          :width 97%

                          .redbox
#main p {                   :background-color #ff0000
                            :color #000000
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }
Scaffold anyone?
http://flickr.com/photos/mag3737/1419671737/
Xtreme_scaffold
http://github.com/Juice10/xtreme_scaffold/
http://flickr.com/photos/lorna87/283420918/
label


<%= label :post, :title %>
<label for=quot;post_titlequot;>Title</label>
Link_to :method
<%= link_to 'Destroy', post, :confirm => 'Are you
sure?', :method => :delete %>

<a href=quot;#quot; onclick=quot;if (confirm('are you sure?')) { new
Ajax.Request('/posts/1', {asynchronous:true, evalScripts:true,
method:'delete', parameters:'authenticity_token=' +
encodeURIComponent('cc2f94f376dda7d1092ad74b8ed78fc66140cc34')})
; }; return false;quot;>Destroy</a>
Rails




HTML
routes.rb


map.resources :posts
routes.rb


map.resources :posts, :member => {:delete => :get}
posts_controller.rb

# GET /posts/1/delete
def delete
  @post = Post.find(params[:id])
end
delete.html.erb

<h1>Destroy post</h1>
<p>Are you sure?</p>
<% form_for @post,
            :html => {:method => :delete} do |f| %>
  <%= f.submit 'Destroy' %>
<% end %>
index.html.erb
<%= link_to 'Destroy', post, :confirm => 'Are you
sure?', :method => :delete
index.html.erb
<%= link_to 'Destroy', post, :confirm => 'Are you
sure?', :method => :delete, :href => delete_post_path(post) %>
index.html.erb
<%= link_to 'Destroy', post, :confirm => 'Are you
sure?', :method => :delete, :href => delete_post_path(post) %>


<a href=quot;#quot; onclick=quot;if (confirm('are you sure?')) { new
Ajax.Request('/posts/1', {asynchronous:true,
evalScripts:true, method:'delete',
parameters:'authenticity_token=' +
encodeURIComponent('cc2f94f376dda7d1092ad74b8ed78fc66140cc34'
)}); }; return false;quot; href=quot;/posts/1/deletequot;>Destroy</a>
index.html.erb
<%= link_to 'Destroy', post, :confirm => 'Are you
sure?', :method => :delete, :href => delete_post_path(post) %>


<a href=quot;#quot; onclick=quot;if (confirm('are you sure?')) { new
Ajax.Request('/posts/1', {asynchronous:true,



                                                            ly
evalScripts:true, method:'delete',



                                                           g
parameters:'authenticity_token=' +



                                                         u
encodeURIComponent('cc2f94f376dda7d1092ad74b8ed78fc66140cc34'



                                                    ll
)}); }; return false;quot; href=quot;/posts/1/deletequot;>Destroy</a>




                                             s  t i
still ugly
http://flickr.com/photos/humandescent/318544728/
application.js
Event.observe(window, 'load', function(){
   // all delete links
   $$('a.delete').each(function(link) {
      Event.observe(link, 'click', function(evt){
         if (confirm('are you sure?')) {
            new Ajax.Request(link.href.gsub(//delete$/, ''),
                             {asynchronous:true,
                              evalScripts:true,
                              method:'delete'});
         };
         Event.stop(evt)
      })
   })
})
index.html.erb

<%= link_to 'Destroy',
delete_post_path(post), :class => 'delete' %>
index.html.erb

<%= link_to 'Destroy',
delete_post_path(post), :class => 'delete' %>


<a href=quot;/posts/2/deletequot; class=quot;deletequot;>
  Destroy
</a>
Sexy!
index.html.erb

<%= link_to 'Destroy',
delete_post_path(post), :class => 'delete' %>


<a href=quot;/posts/2/deletequot; class=quot;deletequot;>
  Destroy
</a>
Unobtrusive
JavaScript Route
JSON is your friend
The End


Twitter name: 	 juice10
Side Project: 	 http://tvnotify.com
Blog:	 	   	   	 http://juice10.com
The End


Twitter name: 	 juice10
Side Project: 	 http://tvnotify.com
Blog:	 	   	   	 http://juice10.com
The End


Twitter name: 	 juice10
Side Project: 	 http://tvnotify.com
Blog:	 	   	   	 http://juice10.com

More Related Content

What's hot

Lecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPLecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITP
yucefmerhi
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
wangjiaz
 
Microformats HTML to API
Microformats HTML to APIMicroformats HTML to API
Microformats HTML to API
elliando dias
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
Sugree Phatanapherom
 

What's hot (19)

YQL talk at OHD Jakarta
YQL talk at OHD JakartaYQL talk at OHD Jakarta
YQL talk at OHD Jakarta
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
Lecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPLecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITP
 
Spring 2.0
Spring 2.0Spring 2.0
Spring 2.0
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
 
Javascript Basic
Javascript BasicJavascript Basic
Javascript Basic
 
Preparing a WordPress Plugin for Translation
Preparing a WordPress Plugin for TranslationPreparing a WordPress Plugin for Translation
Preparing a WordPress Plugin for Translation
 
Try Web Components
Try Web ComponentsTry Web Components
Try Web Components
 
Facebook Development with Zend Framework
Facebook Development with Zend FrameworkFacebook Development with Zend Framework
Facebook Development with Zend Framework
 
Secure Coding With Wordpress (BarCamp Orlando 2009)
Secure Coding With Wordpress (BarCamp Orlando 2009)Secure Coding With Wordpress (BarCamp Orlando 2009)
Secure Coding With Wordpress (BarCamp Orlando 2009)
 
Microformats HTML to API
Microformats HTML to APIMicroformats HTML to API
Microformats HTML to API
 
Brian hogg word camp preparing a plugin for translation
Brian hogg   word camp preparing a plugin for translationBrian hogg   word camp preparing a plugin for translation
Brian hogg word camp preparing a plugin for translation
 
Rails e suas Gems
Rails e suas GemsRails e suas Gems
Rails e suas Gems
 
Distributed Identity via OpenID
Distributed Identity via OpenIDDistributed Identity via OpenID
Distributed Identity via OpenID
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
 
Finding things on the web with BOSS
Finding things on the web with BOSSFinding things on the web with BOSS
Finding things on the web with BOSS
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on Rails
 
Using Forms in Share
Using Forms in ShareUsing Forms in Share
Using Forms in Share
 
Illuminated Hacks -- Where 2.0 101 Tutorial
Illuminated Hacks -- Where 2.0 101 TutorialIlluminated Hacks -- Where 2.0 101 Tutorial
Illuminated Hacks -- Where 2.0 101 Tutorial
 

Similar to Front End on Rails

Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
Wen-Tien Chang
 
Rails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity PresentationRails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity Presentation
railsconf
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
tonvanbart
 
Jade & Javascript templating
Jade & Javascript templatingJade & Javascript templating
Jade & Javascript templating
wearefractal
 

Similar to Front End on Rails (20)

Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
Haml, Sass & Compass
Haml, Sass & CompassHaml, Sass & Compass
Haml, Sass & Compass
 
Rails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity PresentationRails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity Presentation
 
Page Caching Resurrected
Page Caching ResurrectedPage Caching Resurrected
Page Caching Resurrected
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
Widgets Tools Keynote
Widgets Tools KeynoteWidgets Tools Keynote
Widgets Tools Keynote
 
Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
 
JSP Custom Tags
JSP Custom TagsJSP Custom Tags
JSP Custom Tags
 
WordPress Standardized Loop API
WordPress Standardized Loop APIWordPress Standardized Loop API
WordPress Standardized Loop API
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
JQuery 101
JQuery 101JQuery 101
JQuery 101
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
HTML and CSS workshop
HTML and CSS workshopHTML and CSS workshop
HTML and CSS workshop
 
The Basics Of Page Creation
The Basics Of Page CreationThe Basics Of Page Creation
The Basics Of Page Creation
 
HTML5: 5 Quick Wins
HTML5:  5 Quick WinsHTML5:  5 Quick Wins
HTML5: 5 Quick Wins
 
Jade & Javascript templating
Jade & Javascript templatingJade & Javascript templating
Jade & Javascript templating
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 

More from Justin Halsall (6)

Principles, Backbone and Bottlenose
Principles, Backbone and BottlenosePrinciples, Backbone and Bottlenose
Principles, Backbone and Bottlenose
 
Vote Amsterdam For EuRuKo 2012
Vote Amsterdam For EuRuKo 2012Vote Amsterdam For EuRuKo 2012
Vote Amsterdam For EuRuKo 2012
 
Headless browser testing with ruby
Headless browser testing with rubyHeadless browser testing with ruby
Headless browser testing with ruby
 
HTML5 semantics
HTML5 semanticsHTML5 semantics
HTML5 semantics
 
HTML5 offline
HTML5 offlineHTML5 offline
HTML5 offline
 
DSLs for Front End Rails
DSLs for Front End RailsDSLs for Front End Rails
DSLs for Front End Rails
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 

Front End on Rails