Chapter 5

Question 1

how can we test if links on a page work correctly?

Answer 1

write a integration test to check it

Question 2

bootstrap

Answer 2

open-source web design framework from twitter.

Question 3

wireframes

Answer 3

rough sketches of what the eventual application will look like

Question 4

git checkout master

Answer 4

go to master branch

Question 5

git checkout -b filling-in-layout

Answer 5

create new branch and move to it

Question 6

HTML5 shim(or shiv)

Answer 6

some old browsers dont support HTML5 so we include some javascript code known as HTML shim or shiv to work around the issue

Question 7

header class=”navbar navbar-fixed-top navbar-inverse”

Answer 7

indicates elements that should go at the top of the page. given tag three CSS classes separated by spaces.

Question 8

html classes and ids

Answer 8

merely labels, and are useful for styling with CSS. classes can be used multiple times on a page, but ids can be used only once.

Question 9

<div></div>

Answer 9

div tag is a generic division. it doesnt do anything apart from divide the documents into distict parts. in this case, the div has a css class ‘container’. as with headers tag classes, this class has special meaning to bootstrap.

Question 10

<li>
</li>

Answer 10

rails helper link_to to create links. link_to is the link text, while the second is the url, we will fill in the url with named routes, but for now we use the stub url ‘#’.

Question 11

ul tag

Answer 11

unordered list

Question 12

tag

Answer 12

used to more clearly communicate the purpose of the navigation links.

Question 13

<ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Log in</a></li>
  </ul>

Answer 13

after evaluating embedded ruby, the html code looks like this.

Question 14

<div>

</div>

Answer 14

container has special meaning to bootstrap. yield method inserts the contents of each page into the site layout

Question 15

convert to html

Answer 15

<a>Sign up now!</a> stub link

Question 16

<div></div>

Answer 16

the jumbotron css class has special meaning to bootstrap

Question 17

embedded ruby:
link_to image_tag(“rails.png”, alt: “Rails logo”),
‘http://rubyonrails.org/’

Answer 17

shows off the image_tag helper, which takes arguments the path to an image and an optional options hash, alt attribute of the image tag using symbols. for this to work, there needs to be an image called rails.png

Question 18

use curl to move png image to rails app:

Answer 18

curl -0 http://rubyonrails.org/images/rails.png

mv rails.png app/assets/images/

Question 19

<img></img>

Answer 19

9308b8f92fea4c19a3a0d8385b494526is added to rails to ensure that the filename is unique, whcih causes browsers to load images properly when they have been updated. src doesnt include images in the path, instead using assets directory common to all assets. on the server rails associates images in the assets directory with the proper directory.

Question 20

alt

Answer 20

display text if image cannot be displayed

Question 21

benefit of bootstrap

Answer 21

makes our applications design responsive, ensuring that it looks sensible across a wide range of devices

Question 22

gem for adding bootstrap to rails

Answer 22

bootstrap-sass gem

Question 23

rails support sass language by defaul tf

Answer 23

true

Question 24

create custom css file

Answer 24

touch app/assets/stylesheets/custom.css.scss

Question 25

custom.css.scss

Answer 25

.css extension which indicates a css file and the .scss extension which indicates sassy css and arranges for the asset pipeline to process the file using Sass

Question 26

@import “bootstrap-sprockets”;

@import “bootstrap”;

Answer 26

import function to include bootstrap with sprockets utility. includes the entire bootstrap css framework

Question 27

body {
padding-top: 60px;
}

Answer 27

puts 60 pixels of padding at the top of the page. because of the navbar-tixed-top class in the header tag, bootstrap fixes the navigation bar to the top of the page, so the padding served to separate the main text from the navigation.

Question 28

.center {
text-align: center;
}

Answer 28

associates the center class with the text-align: center property. any element inside any tag with class center will be centered on the page

Question 29

navbar-inverse class

Answer 29

bootstrap makes it dark instead of light for the navigation bar

Question 30

color: #fff for logo

Answer 30

changes color of the logo to white. html colors can be coded with three pairs of base-16 hexadecimal numbers

Question 31

partials

Answer 31

facility in rails used to package units in one place

Question 32

embedded ruby:

render ‘layouts/shim’

Answer 32

The effect of this line is to look for a file called app/views/layouts/shim.html.erb and evaluate its contents, and inserts the results into the view. the ‘’ is universal convention for naming partials

Question 33

asset pipelines

Answer 33

improves the production and management of static assets such as css, javascript, and images

Question 34

app/assets

Answer 34

assets specific to the present application

Question 35

lib/assets

Answer 35

assets for libraries written by your dev team

Question 36

vendor/assets

Answer 36

assets from third-party vendors

Question 37

manifest files

Answer 37

tells rails via the sprocjets gem how to combine them to form a single file. this applies to css and javascript but not to images

Question 38

*= require_tree .

Answer 38

ensures all css files in the app/assets/stylesheets directory are included into the application css

Question 39

*= require_self

Answer 39

specifies where in the loading sequence the css in application.css itself gets included

Question 40

preprocessor engines

Answer 40

assembled assets run through several preprocessing engines and using the manifest file to combine them for delivery to the browser

Question 41

foobar.js.erb.coffee preprocessor

Answer 41

gets run through the coffescript and erb

Question 42

benefit of asset pipeline

Answer 42

automatically optimizes assets to be efficient in a production application

Question 43

what does the asset pipeline does with all css and javascript files in production

Answer 43

combines them all into application.css and application.js and then minifies them to remove unnecessary spacing and indentation that bloats file size.

Question 44

home named route path

Answer 44

root_path

Question 45

route and url mapping for site links

Answer 45

signup_path, login_path, help_path ect.

Question 46

adding route for contact page

Answer 46

get ‘static_pages/contact’

Question 47

how to define named routes for help, about, and contact pages

Answer 47

make changes to the get rules.
get ‘contact’ => ‘static_pages#contact’
. routes a get request for the URL/contact to the contact action in the static pages controller

Question 48

integration test

Answer 48

end-to-end test of our applications behavior

Question 49

create an integration test called site_layout

Answer 49

rails generate integration_test site_layout

Question 50

assert_select “a[href=?]”, about_path

Answer 50

rails automatically inserts the value of about_path in place of the question mark, thereby checking for an HTML tag of the form: <a>…</a>

Question 51

assert_select “a[href=?]”, root_path, count: 2

Answer 51

verifies that there are two such links. this ensures that both links to the home page are present

Question 52

rake command to test integration test:

Answer 52

bundle exec rake test:integration

Question 53

run all rake test

Answer 53

bundle exec rake test