Rails Frontend Tips You Should Know

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>    <body>  <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    <body>

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>    <body>  <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.ﬂickr.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>  <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

Rails Frontend Tips You Should Know

0 comments

Notes on slide 1

2 Favorites & 2 Groups