Chapter 5 Flashcards
how can we test if links on a page work correctly?
write a integration test to check it
bootstrap
open-source web design framework from twitter.
wireframes
rough sketches of what the eventual application will look like
git checkout master
go to master branch
git checkout -b filling-in-layout
create new branch and move to it
HTML5 shim(or shiv)
some old browsers dont support HTML5 so we include some javascript code known as HTML shim or shiv to work around the issue
header class=”navbar navbar-fixed-top navbar-inverse”
indicates elements that should go at the top of the page. given tag three CSS classes separated by spaces.
html classes and ids
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.
<div></div>
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.
<li>
</li>
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 ‘#’.
ul tag
unordered list
tag
used to more clearly communicate the purpose of the navigation links.
<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>after evaluating embedded ruby, the html code looks like this.
<div>
</div>
container has special meaning to bootstrap. yield method inserts the contents of each page into the site layout
convert to html
<a>Sign up now!</a> stub link
<div></div>
the jumbotron css class has special meaning to bootstrap
embedded ruby:
link_to image_tag(“rails.png”, alt: “Rails logo”),
‘http://rubyonrails.org/’
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
use curl to move png image to rails app:
curl -0 http://rubyonrails.org/images/rails.png
mv rails.png app/assets/images/
<img></img>
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.
alt
display text if image cannot be displayed
benefit of bootstrap
makes our applications design responsive, ensuring that it looks sensible across a wide range of devices
gem for adding bootstrap to rails
bootstrap-sass gem
rails support sass language by defaul tf
true
create custom css file
touch app/assets/stylesheets/custom.css.scss
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
@import “bootstrap-sprockets”;
@import “bootstrap”;
import function to include bootstrap with sprockets utility. includes the entire bootstrap css framework
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.
.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
navbar-inverse class
bootstrap makes it dark instead of light for the navigation bar
color: #fff for logo
changes color of the logo to white. html colors can be coded with three pairs of base-16 hexadecimal numbers
partials
facility in rails used to package units in one place
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
asset pipelines
improves the production and management of static assets such as css, javascript, and images
app/assets
assets specific to the present application
lib/assets
assets for libraries written by your dev team
vendor/assets
assets from third-party vendors
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
*= require_tree .
ensures all css files in the app/assets/stylesheets directory are included into the application css
*= require_self
specifies where in the loading sequence the css in application.css itself gets included
preprocessor engines
assembled assets run through several preprocessing engines and using the manifest file to combine them for delivery to the browser
foobar.js.erb.coffee preprocessor
gets run through the coffescript and erb
benefit of asset pipeline
automatically optimizes assets to be efficient in a production application
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.
home named route path
root_path
route and url mapping for site links
signup_path, login_path, help_path ect.
adding route for contact page
get ‘static_pages/contact’
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
integration test
end-to-end test of our applications behavior
create an integration test called site_layout
rails generate integration_test site_layout
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: <a>…</a>
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
rake command to test integration test:
bundle exec rake test:integration
run all rake test
bundle exec rake test
