Asset pipeline basics in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this asset pipeline manifest?

Given this application.js manifest file in a Rails app, what JavaScript files will be included in the compiled asset?

Ruby on Rails

//= require jquery
//= require_tree ./modules
//= require_self
console.log('App loaded');

A Includes only files in modules folder and application.js code, excludes jquery.js

B Includes only jquery.js and application.js code, ignores modules folder

C Includes jquery.js, all files in modules folder, then the code in application.js itself

D Includes jquery.js and application.js code, but modules folder files are loaded after application.js

💡 Hint

Remember that require_tree includes all files in the specified folder in alphabetical order.

The require jquery line includes jquery.js first. Then require_tree ./modules includes all JavaScript files inside the modules folder. Finally, require_self inserts the code inside application.js itself at that point.

📝 Syntax

intermediate

Which option correctly compiles SCSS with asset pipeline?

You want to import a partial SCSS file named _buttons.scss into application.scss. Which import statement is correct?

A @import 'buttons';

B @import 'buttons.scss';

C @import '_buttons.scss';

D @import '_buttons';

💡 Hint

Partial SCSS files start with underscore and are imported without underscore or extension.

In SCSS, partial files start with an underscore and are imported without the underscore or file extension. So @import 'buttons'; correctly imports _buttons.scss.

🔧 Debug

advanced

Why does this asset not load in production?

You have a JavaScript file custom.js included in your manifest, but it doesn't load in production. The manifest is:

//= require jquery
//= require custom
//= require_tree .

What is the most likely cause?

A The <code>jquery</code> file must be required after <code>custom</code> for it to load

B The <code>require_tree .</code> line overrides the <code>require custom</code> line, so custom.js is ignored

C The manifest file must end with <code>require_self</code> to include custom.js

D The file <code>custom.js</code> is missing from the assets precompile list in production config

💡 Hint

Check if the asset is included in the precompile list for production environment.

In production, Rails only precompiles assets listed in the precompile array or referenced by manifests. If custom.js is not included or referenced properly, it won't be compiled and served.

❓ state_output

advanced

What is the output of this ERB asset tag in production?

Given this ERB in a Rails view:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

What will be the rendered HTML output in production mode?

A <script src="/assets/application.js"></script>

B <script src="/assets/application-abc123.js" data-turbolinks-track="reload"></script>

C <script src="/javascripts/application.js" data-turbolinks-track="reload"></script>

D <script src="/assets/application.js" data-turbolinks-track="reload"></script>

💡 Hint

In production, Rails appends a digest hash to asset filenames for caching.

Rails appends a fingerprint hash to asset filenames in production for cache busting. The javascript_include_tag generates a script tag with the fingerprinted filename and includes the data attribute as given.

🧠 Conceptual

expert

How does the asset pipeline improve web app performance?

Which of the following best explains how the Rails asset pipeline helps improve performance for users?

A It combines, minifies, and fingerprints assets to reduce requests, file size, and enable caching

B It automatically converts all assets to WebP format for faster loading

C It loads assets asynchronously by default to prevent blocking page rendering

D It stores assets in the database to speed up retrieval

💡 Hint

Think about how fewer and smaller files help browsers load pages faster.

The asset pipeline combines multiple files into one, minifies them to reduce size, and adds fingerprint hashes to enable long-term caching. This reduces HTTP requests and speeds up page loads.

Practice

1. What is the main purpose of the Rails asset pipeline?

easy

A. To generate HTML templates dynamically

B. To handle database migrations automatically

C. To combine, compress, and manage CSS, JavaScript, and images for faster loading

D. To manage user authentication and sessions

Solution

1. Step 1: Understand asset pipeline role

   The asset pipeline organizes and prepares CSS, JavaScript, and images for the app.

2. Step 2: Identify its main benefits

   It combines and compresses assets to improve website speed and maintenance.

3. Final Answer:

   To combine, compress, and manage CSS, JavaScript, and images for faster loading -> Option C

4. Quick Check:

   Asset pipeline = combine and compress assets [OK]

Hint: Asset pipeline = faster loading by combining assets [OK]

Common Mistakes:

• Confusing asset pipeline with database tasks
• Thinking it generates HTML templates
• Mixing it up with user authentication

2. Which file is typically used to specify which JavaScript files to include in the Rails asset pipeline?

easy

A. application.js

B. routes.rb

C. database.yml

D. Gemfile

Solution

1. Step 1: Identify manifest files for assets

   Rails uses manifest files like application.js to list JavaScript files to include.

2. Step 2: Recognize unrelated files

   routes.rb manages URL routes, database.yml configures database, Gemfile manages gems.

3. Final Answer:

   application.js -> Option A

4. Quick Check:

   JavaScript manifest = application.js [OK]

Hint: JavaScript manifest file is application.js [OK]

Common Mistakes:

• Choosing routes.rb which is for routing
• Confusing Gemfile with asset files
• Picking database.yml which is unrelated

3. Given the following snippet in app/assets/javascripts/application.js:

//= require jquery
//= require_tree .

What will happen when the asset pipeline processes this file?

medium

A. It will cause a syntax error and fail to compile

B. It will only include jQuery and ignore other files

C. It will include files in reverse alphabetical order

D. It will include jQuery first, then all other JavaScript files in the directory

Solution

1. Step 1: Understand require directives

   "//= require jquery" includes jQuery first; "//= require_tree ." includes all files in the directory.

2. Step 2: Determine inclusion order

   jQuery is included first, then all other JavaScript files are included in alphabetical order.

3. Final Answer:

   It will include jQuery first, then all other JavaScript files in the directory -> Option D

4. Quick Check:

   require + require_tree = jQuery then all files [OK]

Hint: require_tree includes all files after listed requires [OK]

Common Mistakes:

• Thinking require_tree ignores previous requires
• Assuming syntax error from comments
• Believing files load in reverse order

4. You added a new CSS file custom.css to app/assets/stylesheets but it does not appear on your site. What is the most likely cause?

medium

A. You forgot to add *= require custom in application.css

B. The file name must be custom.scss to work

C. CSS files are not supported by the asset pipeline

D. You need to restart the Rails server to load new assets

Solution

1. Step 1: Check manifest file inclusion

   New CSS files must be included in application.css manifest using "*= require filename".

2. Step 2: Verify other options

   CSS files are supported; file extension .css is valid; server restart is not required for asset changes.

3. Final Answer:

   You forgot to add *= require custom in application.css -> Option A

4. Quick Check:

   Missing require in manifest = no CSS load [OK]

Hint: Add *= require line in application.css to include new CSS [OK]

Common Mistakes:

• Thinking .css files are unsupported
• Assuming server restart is needed
• Believing file extension must be .scss

5. You want to add a new image logo.png to your Rails app and use it in CSS. Which is the correct way to reference it in application.css using the asset pipeline?

hard

A. background-image: url('/assets/logo.png');

B. background-image: image-url('logo.png');

C. background-image: url('logo.png');

D. background-image: asset_path('logo.png');

Solution

1. Step 1: Understand asset pipeline helpers in CSS

   Rails asset pipeline uses helper functions like image-url() in CSS to reference images correctly with fingerprinting.

2. Step 2: Evaluate options

   background-image: url('/assets/logo.png'); uses a hardcoded path which may break with asset fingerprinting; background-image: url('logo.png'); lacks helper; background-image: asset_path('logo.png'); is invalid CSS syntax.

3. Final Answer:

   background-image: image-url('logo.png'); -> Option B

4. Quick Check:

   Use image-url() helper for images in CSS [OK]

Hint: Use image-url() helper to reference images in CSS [OK]

Common Mistakes:

• Hardcoding asset paths breaking fingerprinting
• Using url() without helper in asset pipeline
• Trying to use Ruby helpers directly in CSS