Welcome Guest, Not a member yet? Register   Sign In
Numerous CSS and Scripts Loading in Every View
#34

[eluser]Lou K[/eluser]
Hey folks,

(FYI: In response to the debate about where to place CSS/JS includes within a page: according to YSlow, which is the greatest tool ever for improving real and perceived site performance, CSS should go in the <head> block and JS should go just before the end of the document. CSS can then be used to progressively render the page, whereas JS, which can sometimes halt rendering, isn't loaded until the page is already rendered. Good rule of thumb. See http://developer.yahoo.com/performance/r...ml#css_top)

I came up with a way to handle js/css includes on a view-by-view basis that has worked pretty well for me on a recent project... I wouldn't want to build a CI app without it!

Basically, I have css and js helpers that provide the methods require_css() and require_js(), which take a single argument--the location of a JS/CSS file relative to the JS/CSS base directory.

These helpers just provide quick, global access to methods in the Static_content_support library, which does the heavy lifting of managing static content. I use a display_override hook to wrap views with a header and footer, and this hook gives Static_content_support a chance to insert the actual JS/CSS includes into the page's HTML before pushing it to the user.

So, the Static_content_support library builds an array of required js/css files throughout the controller's execution, and then inserts them into the final page, along with global CSS/JS files that it includes itself. This approach is nice for a couple of reasons:

-It lets you dynamically change the location of static content. Static_content_support can have logic to point to S3 for production, for example.
-It lets you merge core CSS/JS into a single, minified file, which can speed up page loading for production. If a core CSS/JS file is requested by a view, the Static_content_support library recognizes that the file doesn't need to be loaded individually.
-It allows the developer to break CSS and JS into many files, for the sake of organization, knowing that they will be combined into a single file on production.
-It allows special cases, such as HTTPS, to be handled in a single place, by the library.

I've combined this Static_content_support code with a publishing script that combines core files together and minifies them before publishing them to S3. Additionally, image URLs within CSS files are updated to their production equivalents when publishing. This means, basically, that I never have to think about Static content, and everything works the way it should, which is pretty sweet.

You can checkout the Static_content_support library here: http://pastie.org/493948. Within my views, the code looks like:

<?php require_js('plugins/jquery.validate') ?>
<?php require_js('plugins/jquery.alphanumeric') ?>
<?php require_js('user/change_information') ?>
<?php require_css('user/my_account') ?>

(extensions are added automatically, if necessary).


Messages In This Thread
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-18-2009, 10:51 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-18-2009, 10:57 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-18-2009, 11:33 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-18-2009, 11:44 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-18-2009, 11:55 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 01:39 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:13 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:35 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 03:13 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 06:46 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 08:08 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 08:13 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 08:19 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 08:29 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 08:50 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:01 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:07 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:23 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:28 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:34 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:37 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:40 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 09:43 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 10:49 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:06 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:21 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:26 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:29 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:33 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:40 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 02:41 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-19-2009, 11:10 PM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-20-2009, 04:30 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-29-2009, 08:07 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-29-2009, 08:47 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-29-2009, 09:26 AM
Numerous CSS and Scripts Loading in Every View - by El Forum - 05-30-2009, 11:22 AM



Theme © iAndrew 2016 - Forum software by © MyBB