rails frontend tips you should know

16
你應該要知道的 Frontend Tips [email protected] http://iamhlb.com Wednesday, July 1, 2009

Upload: liang-bin-hsueh

Post on 19-Jan-2015

2.553 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Rails Frontend Tips You Should Know

你應該要知道的 Frontend [email protected]://iamhlb.com

Wednesday, July 1, 2009

Page 2: Rails Frontend Tips You Should Know

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

Wednesday, July 1, 2009

Page 3: Rails Frontend Tips You Should Know

Always close your html tags<foo></foo>

Wednesday, July 1, 2009

Page 4: Rails Frontend Tips You Should Know

valid HTML 4 + 5<!DOCTYPE html><html>

Wednesday, July 1, 2009

Page 5: Rails Frontend Tips You Should Know

<!--[if lt IE 7 ]><body class="ie6"><![endif]--><!--[if gte IE 7 ]><body class="ie"><![endif]--><!--[if !IE]>--><body><!--<![endif]-->

Conditional Comment

Wednesday, July 1, 2009

Page 6: Rails Frontend Tips You Should Know

Yahoo’sExceptional Performancehttp://developer.yahoo.com/performance/

Wednesday, July 1, 2009

Page 7: Rails Frontend Tips You Should Know

Yahoo’sExceptional Performance• Make Fewer HTTP Requests

• Put Stylesheets at the Top

• Put Scripts at the Bottom

Wednesday, July 1, 2009

Page 8: Rails Frontend Tips You Should Know

Yahoo’sExceptional 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>

Wednesday, July 1, 2009

Page 9: Rails Frontend Tips You Should Know

Yahoo’sExceptional 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>

Wednesday, July 1, 2009

Page 10: Rails Frontend Tips You Should Know

// 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 %>

Wednesday, July 1, 2009

Page 11: Rails Frontend Tips You Should Know

<%= 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 %>

Wednesday, July 1, 2009

Page 12: Rails Frontend Tips You Should Know

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

Wednesday, July 1, 2009

Page 13: Rails Frontend Tips You Should Know

http://www.flickr.com/photos/robotjohnny/3629069606/Wednesday, July 1, 2009

Page 14: Rails Frontend Tips You Should Know

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

Wednesday, July 1, 2009

Page 15: Rails Frontend Tips You Should Know

THE END

Wednesday, July 1, 2009

Page 16: Rails Frontend Tips You Should Know

創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣

這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。

Wednesday, July 1, 2009