SlideShare una empresa de Scribd logo
1 de 54
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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 a 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 a 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
 

Más de 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
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

Front End on Rails