Chapter 5 Flashcards

1
Q

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

A

write a integration test to check it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

bootstrap

A

open-source web design framework from twitter.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

wireframes

A

rough sketches of what the eventual application will look like

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

git checkout master

A

go to master branch

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

git checkout -b filling-in-layout

A

create new branch and move to it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

HTML5 shim(or shiv)

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

html classes and ids

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

<div></div>

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

<li>
</li>

A

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 ‘#’.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

ul tag

A

unordered list

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

tag

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q
<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>
A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

<div>

</div>

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

convert to html

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

<div></div>

A

the jumbotron css class has special meaning to bootstrap

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

use curl to move png image to rails app:

A

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

mv rails.png app/assets/images/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

<img></img>

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

alt

A

display text if image cannot be displayed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

benefit of bootstrap

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

gem for adding bootstrap to rails

A

bootstrap-sass gem

23
Q

rails support sass language by defaul tf

24
Q

create custom css file

A

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

25
custom.css.scss
.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
26
@import "bootstrap-sprockets"; | @import "bootstrap";
import function to include bootstrap with sprockets utility. includes the entire bootstrap css framework
27
body { padding-top: 60px; }
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.
28
.center { text-align: center; }
associates the center class with the text-align: center property. any element inside any tag with class center will be centered on the page
29
navbar-inverse class
bootstrap makes it dark instead of light for the navigation bar
30
color: #fff for logo
changes color of the logo to white. html colors can be coded with three pairs of base-16 hexadecimal numbers
31
partials
facility in rails used to package units in one place
32
embedded ruby: | render 'layouts/shim'
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
33
asset pipelines
improves the production and management of static assets such as css, javascript, and images
34
app/assets
assets specific to the present application
35
lib/assets
assets for libraries written by your dev team
36
vendor/assets
assets from third-party vendors
37
manifest files
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
38
*= require_tree .
ensures all css files in the app/assets/stylesheets directory are included into the application css
39
*= require_self
specifies where in the loading sequence the css in application.css itself gets included
40
preprocessor engines
assembled assets run through several preprocessing engines and using the manifest file to combine them for delivery to the browser
41
foobar.js.erb.coffee preprocessor
gets run through the coffescript and erb
42
benefit of asset pipeline
automatically optimizes assets to be efficient in a production application
43
what does the asset pipeline does with all css and javascript files in production
combines them all into application.css and application.js and then minifies them to remove unnecessary spacing and indentation that bloats file size.
44
home named route path
root_path
45
route and url mapping for site links
signup_path, login_path, help_path ect.
46
adding route for contact page
get 'static_pages/contact'
47
how to define named routes for help, about, and contact pages
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
48
integration test
end-to-end test of our applications behavior
49
create an integration test called site_layout
rails generate integration_test site_layout
50
assert_select "a[href=?]", about_path
rails automatically inserts the value of about_path in place of the question mark, thereby checking for an HTML tag of the form: ...
51
assert_select "a[href=?]", root_path, count: 2
verifies that there are two such links. this ensures that both links to the home page are present
52
rake command to test integration test:
bundle exec rake test:integration
53
run all rake test
bundle exec rake test