Skip to content

Instantly share code, notes, and snippets.

@dannyradden
Last active April 12, 2017 15:53
Show Gist options
  • Save dannyradden/8d872266d82c4d1c9d3f4ad128b16f02 to your computer and use it in GitHub Desktop.
Save dannyradden/8d872266d82c4d1c9d3f4ad128b16f02 to your computer and use it in GitHub Desktop.
Asset Pipeline Scavenger Hunt

Asset Pipeline Scavenger Hunt

What does it mean to concatenate files? Find an image of an example concatenated file. Why would we want to concatenate files?

Concatenating files means combining a bunch of files' text into one file. This increases performance and reduces the amount of HTML requests necessary.

What does it mean to precompile files? What does this have to do with coffeescript and sass files?

Precompiling is used to convert files such as coffeescript and sass into a language that the browser can read.

What does it mean to minify files? Find an image of an example minified file. Why would we want to minify files?

Minifying files gets rid of all the unnecessary characters such as white space in the file. This makes the file load faster in the browser.

Start up the server for Catch ‘em All (rails s) and navigate to http://localhost:3000/assets/application.js. Then open up the code for application.js in your text editor. Why are these not the same?

They are not the same because the browser shows the js after it has been concatenated with the other required js files such as jquery and turbolinks.

What is a manifest (in terms of the asset pipeline)? Where can you find two manifests in Catch ‘em All?

Manifest files contain information that tell Sprockets which files to require in order to build a single CSS or JavaScript file. In catch em all they afe found in application.js and application.css

In regular HTML files, we bring in css files with . How is this done in a Rails project? Where do you see this line in Catch ‘em All?

This is done in the views/layouts/application.html.erb file. It uses a rails helper called 'stylesheet_link_tag' to link to the css.

How is a digest/fingerprint used on the assets for caching purposes?

A fingerprint is used on assets to quickly compare the served assets to the cached assets. If they are different then the new assets are used instead of the cached ones.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment