2012-03-06_08.01.48
Shay Howe: design is not a veneer, it is very important
HTML: Markup (content, structure, meaning)
CSS: presentation language (style)
HTML: elements, attributes, tags
Elements: designators that build objects on a page
Attributes: provide more info to element
tags: elements and attributes together
elements can be block and inline
block: bigger, larger elements of the page, push everything else below them
inline: do not begin on a new line
head is metadata for browsers, servers, etc
body: what the user sees
CSS: selectors, properties and values
selector is an HTML element
property: style to be applied
value: behavior of property
id and class selectors in addition to element selectors
ID can be used once on a page
class can appear many times on a page
ID is with a pound, class with a decimal point
#logo – ID
li.tumblr – class
you can chain them
ul#social ul#social li ul#social li.mail
the box model
every element is a rectangle
has height, width, can have border, padding and margin
adding border, padding and margin will increase the size of the box
floats:
can float to the right or left
long-hand numbers for margin, padding: top, right, bottom, left: clockwise
You may have to clear stuff
.clear {
clear: both;
}
Back to Jeff:
@flights = @flights.joins(:departure_airport)
Until you call .all or .each you can keep chaining methods on the proxy
joins method: put in a symbol that is a has_many or belongs_to symbol
You cannot just pick anything you want
You can chain them
@flights = @flights.joins(:departure_airport => :restaurants)
Now: John McCaffrey, a mentor
@J_McCaffrey
What happens next?
don’t waste time doing stuff you’ve already done before
Capture what you know, from books, people, etc
Write it all down
Take lots of notes, make them searchable, reachable
Tools: Editor, Evernote, GoogleDocs
He gets pdf versions of all the tech books he buys/reads, puts them on Google docs, so he can search
Code = Executable notes
save and organize your projects
create tests to document what you know
follow interesting projects on github
Links and sites: Write them down, google history, delicious
User other people’s notes:
gem install cheat
it gives you other people’s notes
Local docs:
gem server: starts a local server, then go to
http://localhost:8808
gem install yard
Look into ri and rdoc to get local documentation
sdoc is good
Do what you can to capture what you know right now
When you find something useful, write it down
What about afterward:
Finish Hartl tutorial
He said many people die after chapter three. I personally have no idea why.
CodeSChool.com
railsforzombies.org has some ruby jobs – also a good tutorial
rubykoans are good, since a lot of Rails people hit a wall because they do not know a lot of Ruby
Javascript: ejohn.org/apps/learn – good thing to know – knowing JQuery is a good way to get ahead
RailsCasts
peepcode.com: pay site
Getting help:
20 minute rule: If I can’t figure it out after 20 minutes, start asking. Sometimes asking the question can help you figure the answer
Campfire/IM:
Local docs
Stackoverflow.com
Google better:
exclude with –
“quoted search”
fuzzy search ~
site:specific search
define:antidisestablishmentarianism
range ’28gb ssd $100..$230′
Time in New York
how to ask a tech question:
Do some background search
Document what you’ve tried
Find the right place to ask
Post your question with summary
Link to full details (gist)
be willing to back up a few steps
Post the resolution
Honing your skills:
can you build a report, parse a spreadsheet, keep builing apps – a lot of them
help the next batch of CA students
help out on Stack Overflow
Build your profile:
github, heroku, workingwithrails.com
Freelance:
elance.com, odesk.com, rentacoder.com, donanza.com, cloudspokes.com
Build stuff
colloborate wiht CA students
participate in startup weekend
look for volunteer opportunities: taprootfoundation.org, grassroots.org, overnightwebsitechallenge.com
techstars.org
killerstartups
startupsopensourced.com
master your info
collaborate
—–
Back to shay :
Take Eric Meyer’s reset CSS file
Puts it in app/assets/stylesheets/global
How to change the order of the stylesheets?
In application.css:
*= require global/reset *= require global/global
the aside tag: This will put stuff over to one side. I think.
He makes a stylesheet called mobile.css.scss. He wants to load it last, so he has to go into application.css and adds all the other ones, and puts mobile.css last
Put a media query in that style sheet. Everything that got a width somewhere else gets a width here
@media screen and (max-width: 640 px;) {
#container {
width: auto;
}
nav {
display: none;
}
aside, section {
border-width: 1px 0;
margin: 0;
width: 100%;
}
}
He is using a chrome plugin called window resizer
—-
Back to Jeff
Javascript:
A whole new language
Has nothing to do with Java
Same IPO pattern: input, process, output
Sort of object-oriented
more function-oriented
Define functions, pass function as a argument to another function
Runs inside the browser
Why Javascript?
1. To change HTML code in the browser
You can respond to user events
2. For asynchronous HTTP requests. More subtle, more powerful
This is how Google maps is done
Ruby vs Javascript
def say_hello(name) puts "Hello " + name end
function sayHello(name) {
alert("Hello " + name);
};
parentheses in javascript are required
semi-colon at the end of the line
Another semi-colon to close function
Functions without names:
do |name| puts "Hello " + name end
function(name) {
alert("Hello " + name);
};
HTML support:
<script type="text/javascript"> // code goes here </script>
In HTML5, javascript will be the default target, so you can just say
<script>
How to call the function:
function saySomething() {
// jasldf
};
saySomething();
Obtrusive Javascript: how it was done for a long time
To comment out: // stuff
Or /* jfjfjfj */
Like in C, C++
In the h1 tag:
<h1 oclick=”saySomething()”>
Header
</h1>
callbacks:
function speak(f) {
alert("");
f("Jeff");
};
speak(function(name) {
alert("Hello " + name);
});
JQuery in Rails:
Rails 3.1+ has built-in support for jQuery Core and jQuery UI
jQuery UI is not included by default
JQuery will usually start with dollar sign
<p>Hello</p>
$(“p”)
You put a CSS selector in the call
This will return 0 or more elements that match the CSS criteria
$(document).ready(f);
This will grab the whole document, and call the ready method, supply a callback function
Or you could just do
$(f);
$(function() {
});
Lab:
rails new jqueryapp rails g scaffold products title:string rm public/index.html
In routes:
root to: "products#index"
rake db:migrate rails s
In app/assets/javascripts/application.js
$(function() {
alert("hello");
});
2012-03-08_08.38.45
To get jQuery to work:
<script src="http://code.jquery.com/jquery.min.js"> </script>
in the head. For some reason you have to close the tag with another closing tag, instead of just the ” />”
How would we work this into a Rails app?
User story: I want to write an app that will maintain my personal Aha! list
get calendar from jqueryui.com
Datepicker: http://jqueryui.com/demos/datepicker/
We will put this in our app somewhere:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
add this to app/assets/javascripts/application.js
//= require jquery-ui
go to the form and make the date field a text field
Can we do a delete without a full request cycle?
Now, we want to change destroy
AJAX: Asynchronous Javascript And XML
Asynchronous: The user does not have to wait
XML: It could be JSON or HTML
3-step recipe
1. :remote => true
You can add this to any link or form. It then becomes an AJAX request, instead of a non-blocking request
2. Respond to JS: enhance your respond_to block to accept JS requests
3. Generate a JS response: instead of HTML.
Go to the index page
<%= link_to 'Destroy', entry, confirm: "are you sure", :method => :delete %>
Add another option
<%= link_to 'Destroy', entry, confirm: "are you sure", :method => :delete, :remote => true %>
Go to the controller action destroy
respond_to |format|
format.html { redirect_to entries_url }
format.json { head :no_content }
# add format.js
format.js
end
Then create app/views/entries/destroy.js.erb, so format.js has something to render
We can embed Ruby in this template. Jeff will write some JQuery that will execute
$("#...").hide()
How to get the CSS ID?
In the index table, put an id in the tr field
<tr id="entry_<%= entry.id %>">
Prepend entry_ in case we have multiple tables
That ID will be sent in the link_to for destroy
$("#entry_<%= @entry.id %>").hide()
We have @entry in the destroy action
We could refactor
$("#entry_<%= @entry.id %>").hide();
In the index page, change tr to use dom_id:
<tr id="<%= dom_id(entry) %>">
$("#<%= dom_id(@entry) %>").hide();
or
$("#<%= dom_id(@entry) %>").fadeOut();
For the create.js.erb
$("#tableid").append("<tr><td>");
create a partial
from table row in index.html.erb
<% @entries.each do |entry| %> <%= render 'entry_row', :entry => entry %> <% end %>
in the partial
<tr>
</tr>
So in JS:
$("#tableid").append("<%= render ('entry_row', :entry => @entry) %>");
You need another helper
Some of the markup will have quotes in it. That can mess up the Javascript
So do this:
$("#tableid").append("<%= escape_javascript(render( 'entry_row;, :entry => @entry)) %>");
Or just use the synonym “j”, but escape_javascript is clearer
Don’t forget the
form_for(@entry, remote: true)
Image from the “Prayers and liturgical pieces from Orient and Occident”, a 15th century manuscript housed at Burgerbibliothek of Berne; image from e-Codices. This image is assumed to be allowed under Fair Use.