Code Academy Week 9 Notes

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

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

Back to Jeff:

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

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

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:

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

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

parentheses in javascript are required
semi-colon at the end of the line
Another semi-colon to close function

Functions without names:

HTML support:

In HTML5, javascript will be the default target, so you can just say
<script>

How to call the function:

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:

 

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

Lab:

In routes:

 

In app/assets/javascripts/application.js

2012-03-08_08.38.45
To get jQuery to work:

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:

add this to app/assets/javascripts/application.js

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

Add another option

Go to the controller action destroy

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

How to get the CSS ID?
In the index table, put an id in the tr field

Prepend entry_ in case we have multiple tables
That ID will be sent in the link_to for destroy

We have @entry in the destroy action

We could refactor

In the index page, change tr to use dom_id:

or

For the create.js.erb

create a partial
from table row in index.html.erb

in the partial
<tr>

</tr>

So in JS:

You need another helper
Some of the markup will have quotes in it. That can mess up the Javascript
So do this:

Or just use the synonym “j”, but escape_javascript is clearer

Don’t forget the