Code Academy Week 9 Notes

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

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

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. 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: – good thing to know – knowing JQuery is a good way to get ahead
RailsCasts 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
Local docs

Google better:
exclude with –
“quoted search”
fuzzy search ~
site:specific search
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,


Build stuff
colloborate wiht CA students
participate in startup weekend
look for volunteer opportunities:,,

master your info
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

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
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
function(name) {
    alert("Hello " + name);

HTML support:

<script type="text/javascript">
    // code goes here

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

How to call the function:

function saySomething() {
    //  jasldf

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()”>


function speak(f) {
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
You put a CSS selector in the call
This will return 0 or more elements that match the CSS criteria
This will grab the whole document, and call the ready method, supply a callback function
Or you could just do


$(function() {


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() {

To get jQuery to work:

<script src="">

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
We will put this in our app somewhere:

    $(function() {
        $( "#datepicker" ).datepicker();

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

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

<tr id="entry_<%= %>">

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

$("#entry_<%=  %>").hide()

We have @entry in the destroy action

We could refactor

$("#entry_<%=  %>").hide();

In the index page, change tr to use dom_id:

<tr id="<%= dom_id(entry) %>">
$("#<%= dom_id(@entry) %>").hide();


$("#<%= dom_id(@entry) %>").fadeOut();

For the create.js.erb


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

<% @entries.each do |entry| %>
  <%= render 'entry_row', :entry => entry %>
<% end %>

in the partial


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.