Rails Frontend Tips You Should Know
Upcoming SlideShare
Loading in...5
×
 

Rails Frontend Tips You Should Know

on

  • 4,181 views

 

Statistics

Views

Total Views
4,181
Views on SlideShare
4,171
Embed Views
10

Actions

Likes
4
Downloads
13
Comments
0

2 Embeds 10

http://www.slideshare.net 8
http://coderwall.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rails Frontend Tips You Should Know Rails Frontend Tips You Should Know Presentation Transcript

  • Frontend Tips hlb@handlino.com http://iamhlb.com
  • <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>something</title> <%= stylesheet_link_tag "reset", "application", :cache => 'all' %> </head> <!--[if lt IE 7 ]> <body class="ie6"><![endif]--> <!--[if gte IE 7 ]> <body class="ie"><![endif]--> <!--[if !IE]>--> <body> <!--<![endif]--> <div id="container"> <%= yield %> </div> <%= javascript_include_tag "jquery-1.3.2.min.js", "application", :cache => 'all' %> <%= yield(:page_specific_javascript) %> </body> </html>
  • Always close your html tags <foo></foo>
  • valid HTML 4 + 5 <!DOCTYPE html> <html>
  • Conditional Comment <!--[if lt IE 7 ]> <body class="ie6"><![endif]--> <!--[if gte IE 7 ]> <body class="ie"><![endif]--> <!--[if !IE]>--> <body> <!--<![endif]-->
  • Yahoo’s Exceptional Performance http://developer.yahoo.com/performance/
  • Yahoo’s Exceptional Performance • Make Fewer HTTP Requests • Put Stylesheets at the Top • Put Scripts at the Bottom
  • Yahoo’s Exceptional Performance • Make Fewer HTTP Requests • Put Stylesheets at the Top • Put Scripts at the Bottom <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>something</title> <%= stylesheet_link_tag "reset", "application", :cache => 'all' %> </head>
  • Yahoo’s Exceptional Performance • Make Fewer HTTP Requests • Put Stylesheets at the Top • Put Scripts at the Bottom <%= javascript_include_tag "jquery-1.3.2.min.js", "application", :cache => 'all' %> <%= yield(:page_specific_javascript) %> </body>
  • // html code... <% content_for :page_specific_javascript do %> <script type="text/javascript"> $(function() { var loader = new YAHOO.util.YUILoader({ base: SUDA._YUI_PATH, rollup: true, require: ['paginator','datasource','datatable'], onSuccess: function() { // logic here } }); loader.insert(); }); </script> <% end %>
  • <%= render :partial => "...", :locals => { ... } %> // html code... <% content_for :page_specific_javascript do %> <script type="text/javascript"> $(function() { // logic here }); </script> <% end %> // html code... <% content_for :page_specific_javascript do %> <script type="text/javascript"> $(function() { // logic here }); </script> <% end %>
  • <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>something</title> <%= stylesheet_link_tag "reset", "application", :cache => 'all' %> </head> <!--[if lt IE 7 ]> <body class="ie6"><![endif]--> <!--[if gte IE 7 ]> <body class="ie"><![endif]--> <!--[if !IE]>--> <body> <!--<![endif]--> <div id="container"> <%= yield %> </div> <%= javascript_include_tag "jquery-1.3.2.min.js", "application", :cache => 'all' %> <%= yield(:page_specific_javascript) %> </body> </html>
  • http://www.flickr.com/photos/robotjohnny/3629069606/
  • <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>something</title> <%= stylesheet_link_tag "reset", "application", :cache => 'all' %> </head> <body> <!--[if lt IE 7]> <h1> IE 7 Firefox, Safari, Opera </h1> <![endif]--> <div id="container"> <%= yield %> </div> <%= javascript_include_tag "jquery-1.3.2.min.js", "application", :cache => 'all' %> <%= yield(:page_specific_javascript) %> </body> </html>
  • THE END