Rails Asset Pipeline

Question

I have 2 questions.

• In my Rails app that I'm practicing with I have my file tree like below:

Learning from Michael Hartl's tutorials I learned to add the "custom.css.scss" file to take care of CSS. My question is WHY don't the CSS stuff go into "kalendar.css.scss" which picks it's name from my "Kalendar" controller or why doesn't the CSS go into "application.css"?

• With javascript, would I need to create a "custom.js.coffee" file? If not, how would I want to add a text effect on a text that will be shown in the view. Meaning how can I add an extra javascript plugin which I download?

But I know in the view i can do something like:

<%= javascript_tag "alert('hey you!')" %>

EDIT:

Now in my "vendor/assets/javascripts/textEffect.js" I have this code which is a plugin I download online.

(function($) {

    function shuffle(a) {
        var i = a.length, j;
        while (i) {
            var j = Math.floor((i--) * Math.random());
            var t = a[i];
            a[i] = a[j];
            a[j] = t;
        }
    }

    function randomAlphaNum() {
        var rnd = Math.floor(Math.random() * 62);
        if (rnd >= 52) return String.fromCharCode(rnd - 4);
        else if (rnd >= 26) return String.fromCharCode(rnd + 71);
        else return String.fromCharCode(rnd + 65);
    }

    $.fn.rot13 = function() {
        this.each(function() {
            $(this).text($(this).text().replace(/[a-z0-9]/ig, function(chr) {
                var cc = chr.charCodeAt(0);
                if (cc >= 65 && cc <= 90) cc = 65 + ((cc - 52) % 26);
                else if (cc >= 97 && cc <= 122) cc = 97 + ((cc - 84) % 26);
                else if (cc >= 48 && cc <= 57) cc = 48 + ((cc - 43) % 10);
                return String.fromCharCode(cc);
            }));
        });
        return this;
    };

    $.fn.scrambledWriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0, replace = /[^\s]/g,
                random = randomAlphaNum, inc = 3;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress) + str.substring(progress, str.length).replace(replace, random));
                progress += inc
                if (progress >= str.length + inc) clearInterval(timer);
            }, 100);
        });
        return this;
    };

    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                if (progress >= str.length) clearInterval(timer);
            }, 100);
        });
        return this;
    };

    $.fn.unscramble = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), replace = /[^\s]/,
                state = [], choose = [], reveal = 25, random = randomAlphaNum;

            for (var i = 0; i < str.length; i++) {
                if (str[i].match(replace)) {
                    state.push(random());
                    choose.push(i);
                } else {
                    state.push(str[i]);
                }
            }

            shuffle(choose);
            $ele.text(state.join(''));

            var timer = setInterval(function() {
                var i, r = reveal;
                while (r-- && choose.length) {
                    i = choose.pop();
                    state[i] = str[i];
                }
                for (i = 0; i < choose.length; i++) state[choose[i]] = random();
                $ele.text(state.join(''));
                if (choose.length == 0) clearInterval(timer);
            }, 100);
        });
        return this;
    };

})(jQuery);

And in my "View" I have a file with content:

<p class="my-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

in my "application.js" I have:

//= require textEffect

and in "app/assets/javascripts/custom.js.coffee" I have

$(document).ready() -> 
$("#my-container").unscramble();

Unless, of course I'm wrong, I'm presuming on page load, I should see the text effect start up. But Nothing happens. Is there something I missed or doing wrong?

Answer 1

Apparently michael is just using this custom.css.scss file as an example. You can use whatever file name is best for organizing your project.

For example I like to put layout related items in layout.css.scss, and I put Kalendar related css in kalendar.css.scss. The only reason why I wouldn't use application.css for your custom styles, is because application.css is a manifest file.

A manifest file is a file that tells rails which assets to include using the comma syntax. For example, in css manifest

/* Manifest File
 *= require_tree .
*/

This tells rails to include the whole directory of stylesheets. You could manually include files with

*= require layout
*= require my_file_name

The point of this system is to render all of the assets into one file, this makes the page load faster, and in production you should only need one css/js file. To include a manifest file you just write

= stylesheet_link_tag 'manifest_file_name'

File names are purely for organization.