• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rails 3 Beginner to Builder 2011 Week 4
 

Rails 3 Beginner to Builder 2011 Week 4

on

  • 6,556 views

This is the 4th of 8 presentations given at University of Texas during my Beginner to Builder Rails 3 Class. For more info and the whole series including video presentations at my blog: ...

This is the 4th of 8 presentations given at University of Texas during my Beginner to Builder Rails 3 Class. For more info and the whole series including video presentations at my blog:


http://schneems.com/tagged/Rails-3-beginner-to-builder-2011

Statistics

Views

Total Views
6,556
Views on SlideShare
2,284
Embed Views
4,272

Actions

Likes
1
Downloads
104
Comments
0

12 Embeds 4,272

http://schneems.com 3207
http://ontwik.com 1005
url_unknown 13
http://teamco-anthill.blogspot.com 11
http://localhost 10
http://www.slideshare.net 8
http://www.helpified.com 8
http://teamco-anthill.blogspot.de 4
http://www.schneems.com 2
https://helpified.com 2
http://teamco-anthill.blogspot.co.uk 1
http://teamco-anthill.blogspot.jp 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

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 3 Beginner to Builder 2011 Week 4 Rails 3 Beginner to Builder 2011 Week 4 Presentation Transcript

    • Did your Homework? • Or promise you will • (Chapters 8 & 9) • Grab A Gowalla Tee Shirt!! • Sizes run a bit small@SchneemsThursday, June 30, 2011
    • Beginner to Builder Week 4 Richard Schneeman @schneemsJune, 2011Thursday, June 30, 2011
    • Rails Hotline • Call them and ask rails questions • (877)- 817- 4190 • Free@SchneemsThursday, June 30, 2011
    • Rails - Week4 • Html, Javascript and CSS • Error Handling • begin - rescue - end • Ajax - “Web 2.0” • What is it? • Partials • Considerations@SchneemsThursday, June 30, 2011
    • HTML • Hyper Text Markup Language • Used to create Webpages@SchneemsThursday, June 30, 2011
    • HTML <div id="content" class="clearfix"> <h1>Keep up with your friends, share the places you go,<br /> and discover the extraordinary in the world around you.</h1> <div id="content"> <div id="leather" class="clearfix"> <!-- tour --> <div id="tour"> <div id="tour_inner" style="left: 0px; -webkit-transform: translate3d(0px, 0px, 0);"> <div id="homepage" style="background: transparent url(/images/tour/home-2.png) top left no-repeat;"> <div class="feature friends"> <div class="feature-icon"></div> <p><strong>Keep up with friends on your phone.</strong> Connect with friends from Facebook and Twitter to share where youre going.</p> </div> <div class="feature discover"> <div class="feature-icon"></div> <p><strong>Discover new places and hotspots</strong> when you go out, then share your photos, recommendations and trips with friends!</p> </div> <div class="feature rewards"> <div class="feature-icon"></div> <p><strong>Find inspiration to explore</strong> the world around you while picking up rewards from local eateries, venues and retail stores.</p> </div> </div>@SchneemsThursday, June 30, 2011
    • HTML@SchneemsThursday, June 30, 2011
    • HTML elements • Most elements have start and end tags • can have optional attributes <p>This is an element</p> <br /><!-- so is this --> <h1 class=”foo”> This is an element with an attribute </h1>@SchneemsThursday, June 30, 2011
    • .html.erb • ERB • Embedded Ruby • Ruby code that generates HTML <h1>People</h1> <h1>People</h1> <ul> <ul> => <% @people.each do |person| %> <li>Bob</li> <li><%= person.first_name %></li> <li>Joe</li> <% end -%> <li>Mary</li> </ul> </ul>@SchneemsThursday, June 30, 2011
    • .html.erb <%= "This is an ERB Display Tag " %> <% foo = "Embedded expression does not render" %> <% 3.times do |i| %> <%= "Hello #{i}" %> <% end %>@SchneemsThursday, June 30, 2011
    • .html.haml • ERB alternative • Meaningful whitespace • no “end” keyword %h1 <h1>People</h1> People <ul> %ul - @people.each do |person| => <li>Bob</li> <li>Joe</li> %li=person.first_name <li>Mary</li> </ul>@SchneemsThursday, June 30, 2011
    • CSS • Cascading Style Sheets • Rules Based Style • Casscade • What happens if more than one rule is applied?@SchneemsThursday, June 30, 2011
    • CSS • ( # ) id • ( . ) class • element // id selector #main { background-color: orange;} // class selector .sidebar { color: black; } // element selector span { font-size: 24px;} // mixed span.sidebar { color: #C5C5C5; }@SchneemsThursday, June 30, 2011
    • CSS • Inline styles • Embedded style • External style@SchneemsThursday, June 30, 2011
    • CSS <!-- inline --> <p style="color:black">tag</p> <!-- Embedded --> <style type="text/css"> p {color:black} </style> <!-- External --> <link rel="stylesheet" type="text/css" href="mystyle.css" />@SchneemsThursday, June 30, 2011
    • CSS • Inheritance • specificity • location@SchneemsThursday, June 30, 2011
    • CSS • Inheritence p { color: blue; } <p> <span>Hello There</span> </p>@SchneemsThursday, June 30, 2011
    • CSS • Specificity * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */@SchneemsThursday, June 30, 2011
    • CSS • Location • Later rules are more important p { color: blue; } p { color: red; } paragraph will be red@SchneemsThursday, June 30, 2011
    • Browser Wars • Different browsers • same content • Different Results • IE • Safari • Chrome • FireFox • etc.@SchneemsThursday, June 30, 2011
    • JavaScript • Client Side Scripting Language • (The web browser is the client) • Make your websited more dynamic var name = prompt("What is your name?"); alert("Welcome " + name); Java is to JavaScript as Car is to Carpet@SchneemsThursday, June 30, 2011
    • Javascript • Can manipulate the DOM • DOM • Document Object Model@SchneemsThursday, June 30, 2011
    • DOM@Schneems Document Object ModelThursday, June 30, 2011
    • JavaScript Libraries • Written in JavaScript • Makes writing JavaScript easier • jQuery (rails >= 3.1) • Prototype (rails < 3.1)@SchneemsThursday, June 30, 2011
    • jQuery • The pre-packaged JavaScript library with rails 3.1 // Javascript window.document.body.style.display = none; // jQuery $(body).hide()@SchneemsThursday, June 30, 2011
    • jQuery in Rails 3 • Use jQuery gem gem install "jquery-rails" rails generate jquery:install@SchneemsThursday, June 30, 2011
    • JavaScript Debugging • Firefox #=> FireBug • Safari #=> Inspect Element • Chrome #=> Inspect Element • IE #=> Don’t ever use IE@SchneemsThursday, June 30, 2011
    • CSS Debugging • Firefox #=> FireBug • Safari #=> Inspect Element • Chrome #=> Inspect Element • IE #=> Don’t ever use IE@SchneemsThursday, June 30, 2011
    • Error Handling • What is an Exception? • How can we handle Exceptions • Rails’ errors attributes@SchneemsThursday, June 30, 2011
    • Error Handling • What is an Exception? • A standard ruby object Create with raise raise “you entered an invalid attribute” Optionally provide type of exception raise ArgumentError, "Argument is not numeric" rubylearning.org@SchneemsThursday, June 30, 2011
    • Raise • Code confident • raise errors in truly exceptional situations • error will be logged • user will endis handled a 500 error unless error up seeing raise "bad stuff happened"@SchneemsThursday, June 30, 2011
    • Error Handling • Begin-Rescue-End (Ruby) • Like Try - Catch • Begin attempts to run code • If exception, then rescue catches the error begin dept = Department.find(thisdept) rescue "No Department" end@SchneemsThursday, June 30, 2011
    • Error Handling • Begin-Rescue-End (Ruby) • Ensure - Runs regardless of errors begin file = open("/tmp/some_file", "w") # ... write to the file ... rescue # ... handle the exceptions ... ensure file.close # ... and this always happens. end@SchneemsThursday, June 30, 2011
    • Error Handling • Begin-Rescue-End (Ruby) rescue defaults to StandardError rescue rescue can handle different types of exceptions rescue SyntaxError rescue Exception will rescue any exception rescue Exception@SchneemsThursday, June 30, 2011
    • Error Handling • Logger • Rails logs activity • {production, development, test}.log • Useful to see where errors occured • Use tail to view current activity $: tail -f logs/production.log (much better than trying to load a +200mb log file into a text editor)@SchneemsThursday, June 30, 2011
    • Error Handling • Logger • Specify different levels of logging details config/environments/production.rb config.log_level = :debug • Filter out sensitive info from log config/environment.rb config.filter_parameters += [:password] Now, no passwords will show up in any log file Keeps hackers in the dark, and SysAdmins honest@SchneemsThursday, June 30, 2011
    • Error Handling • Logger • Different log levels filtered by logger Example: Levels config/environments/production.rb config.log_level = :debug@SchneemsThursday, June 30, 2011
    • Error Handling • Logger • How do I write something to the log? • Errors and exceptions added • call logger directly logger.error "Something Bad Happened" Puts info in log without raising error@SchneemsThursday, June 30, 2011
    • Errors in Rails • Errors in rails • Attached to objects • Access through errors method • @dog.errors <% @dog.errors.full_messages.each do |msg| %> <li><%=raw msg %></li> <% end %>@SchneemsThursday, June 30, 2011
    • Errors in Rails • How do we add Errors to objects? • Pre-Built Validations validates :name, :presence => true, :uniqueness => true • Custom Validations validate :speed_must_be_divisible_by_three private def speed_must_be_divisible_by_three errors.add(:speed, "Speed is not divisible by three") unless speed%3 == 0 end@SchneemsThursday, June 30, 2011
    • Ajax • What is Ajax • Asynchronous Javascript • Doesnt require page reload Maps.google.com Gowalla.com@SchneemsThursday, June 30, 2011
    • Ajax • Example: 1. Send form data to Controller via JS 2. Controller parses form data 3. Controller returns info to browser 4. browser renders info 5. user sees no page reload 6. magic!!@SchneemsThursday, June 30, 2011
    • Ajax • Considerations • User Expectations • Loading... • Don’t break the back button • No Javascript? • Principle of least surprise@SchneemsThursday, June 30, 2011
    • Ajax • Loading • Usually Gif Files • Doesnt require page reload • Lets user know “something” is happening Loading...@SchneemsThursday, June 30, 2011
    • Ajax • Loading • Usually Gif Files • Doesnt require page reload • Lets user know “something” is happening Loading...@SchneemsThursday, June 30, 2011
    • Ajax • Don’t break the back button • Don’t do it • Don’t break user copied urls • Don’t do it • If you’re doing it • Don’t (and find a fix)@SchneemsThursday, June 30, 2011
    • Ajax • What if I’m using IE 5? • Unobtrusive Javascript • No reduced Functionality • Rails 3 Does it@SchneemsThursday, June 30, 2011
    • Ajax - In Rails • Unobtrusive Javascript <% form_tag search_path, :id => "search-form", :remote => true do %> <span>Username: </span> <%= text_field_tag username %> <%= submit_tag Submit%> <% end %> If no Javascript We Still use Normal Http Request <form action="/spot/show" data-remote="true" id="search-form" method="post"> <div> <input name="authenticity_token" type="hidden" value="7+2/AAuZF1X55xdRW0dHtx/ 7NL6aq8stuhqeQFeaSfI=" /> Code Here </div> <span>Username: </span> <input id="username" name="username" type="text" /> <input name="commit" type="submit" value="Submit" /> </form> </div>@SchneemsThursday, June 30, 2011
    • Ajax - In Rails • Okay, so I asynchronously submit stuff, what do I do when I get a response? • Handle No response case (404,500, etc.) • Render a format • Controller responds to different formats respond_to do |format| format.html { redirect_to(person_list_url) } format.json format.xml { render :xml => @person.to_xml(:include => @company) } end@SchneemsThursday, June 30, 2011
    • Ajax - In Rails • Different formats • Render Different results render :xml render :json render :text => “hey there” render :js => “alert(‘hello’);” render :template => “dogs/show” render :partial => “form” Partials?@SchneemsThursday, June 30, 2011
    • Ajax - In Rails • Partials • Reusable html.erb templates app/views/dogs/_form.html.erb <%= form_for(@dog) do |f| %> <% if @dog.errors.any? %> ... <% end %> <% end %> <div class="field"> <%= f.label :name %><br /> <%= f.text_field :name %> </div> ... <div class="actions"> Code Here <%= f.submit %> </div> <% end %>@SchneemsThursday, June 30, 2011
    • Ajax - In Rails • Partials - Stay DRY • Put partials into your code app/views/dogs/new.html.erb <h1>New dog</h1> <%= render form %> <%= link_to Back, dogs_path %> • Render partial from controller app/controllers/dogs.rb def new @dog = Dog.new respond_to do |format| format.html # new.html.erb format.js {render :partial => "form"} format.xml { render :xml => @dog } end end@SchneemsThursday, June 30, 2011
    • Ajax • Don’t go overboard • Does it truly add to the functionality of the website? • Does it take away anything from the website? • What can we assume about the user? • When in doubt, don’t use it@SchneemsThursday, June 30, 2011
    • Questions? Assignment for Next Week: Chapters 10, 11 http://guides.rubyonrails.org http://stackoverflow.com@SchneemsThursday, June 30, 2011