Front End on Rails

7,968 views

Published on

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
7,968
On SlideShare
0
From Embeds
0
Number of Embeds
1,484
Actions
Shares
0
Downloads
82
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Front End on Rails

  1. Front End on Rails A series of tips, tricks and a little magic by Justin Halsall
  2. Rails is sexy!
  3. Rails is sexy! If you know your stuff
  4. HTML is sexy!
  5. HTML is sexy! If you know your stuff
  6. Sexy! Not Sexy!
  7. Sexy! Fronteers fronteers.nl
  8. <html> <p>simple tips to minify hassle</p>
  9. Doctype be strict!
  10. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;>
  11. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
  12. “near standards mode” yuck!
  13. different boxmodel hell in a handbasket
  14. inline/block level element
  15. 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
  16. 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.
  17. block nested in inline element <strong><div></div></strong>
  18. block nested in inline element <strong><div></div></strong> o it ’t d o n D
  19. http://flickr.com/photos/jelles/2656101758/
  20. <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
  21. <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>
  22. IDs & Classes IDs need to be unique Class should be re-used IDs define the elements identity Classes define the elements type
  23. <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>
  24. <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>
  25. <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>
  26. Specificity #justin { color: yellow; } .webdeveloper { color: blue; } <p id='justin' class='webdeveloper'> Justin Halsall </p>
  27. Specificity #justin { color: yellow; } .webdeveloper { color: blue; } <p id='justin' class='webdeveloper'> Justin Halsall </p> Justin Halsall
  28. More info on Specificity http://www.stuffandnonsense.co.uk/archives/ css_specificity_wars.html
  29. Sass (Syntactically Awesome StyleSheets) Nicer syntax: no more {curly brackets} Nested rules: saves lots of repetition Variables Automatic minifying in production
  30. Sass syntax #main p :color #00ff00 :width 97% .redbox :background-color #ff0000 :color #000000
  31. 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; }
  32. 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; }
  33. Scaffold anyone? http://flickr.com/photos/mag3737/1419671737/
  34. Xtreme_scaffold http://github.com/Juice10/xtreme_scaffold/ http://flickr.com/photos/lorna87/283420918/
  35. label <%= label :post, :title %> <label for=quot;post_titlequot;>Title</label>
  36. 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>
  37. Rails HTML
  38. routes.rb map.resources :posts
  39. routes.rb map.resources :posts, :member => {:delete => :get}
  40. posts_controller.rb # GET /posts/1/delete def delete @post = Post.find(params[:id]) end
  41. delete.html.erb <h1>Destroy post</h1> <p>Are you sure?</p> <% form_for @post, :html => {:method => :delete} do |f| %> <%= f.submit 'Destroy' %> <% end %>
  42. index.html.erb <%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete
  43. index.html.erb <%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete, :href => delete_post_path(post) %>
  44. 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>
  45. 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
  46. still ugly http://flickr.com/photos/humandescent/318544728/
  47. 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) }) }) })
  48. index.html.erb <%= link_to 'Destroy', delete_post_path(post), :class => 'delete' %>
  49. index.html.erb <%= link_to 'Destroy', delete_post_path(post), :class => 'delete' %> <a href=quot;/posts/2/deletequot; class=quot;deletequot;> Destroy </a>
  50. Sexy! index.html.erb <%= link_to 'Destroy', delete_post_path(post), :class => 'delete' %> <a href=quot;/posts/2/deletequot; class=quot;deletequot;> Destroy </a>
  51. Unobtrusive JavaScript Route JSON is your friend
  52. The End Twitter name: juice10 Side Project: http://tvnotify.com Blog: http://juice10.com
  53. The End Twitter name: juice10 Side Project: http://tvnotify.com Blog: http://juice10.com
  54. The End Twitter name: juice10 Side Project: http://tvnotify.com Blog: http://juice10.com

×