ansaurus

Question

Supplying non-minified CSS/javascript on demand

Answer 1

+4 A:

You could have some form of handler (e.g. a .NET handler) for .css files that serves up the minified version by default, but if a certain parameter was found in the querystring (e.g. debug=true) then serve up the non-minified version.

That way you can always reference the .css version, and if there is a minified version available, that can be used in preference.

djch 2009-12-18 14:50:50

And you could also have a web.config value that disables the "debug" option if necessary.

ctford 2009-12-18 14:55:21

Put another way: in asp.net, the script files are often minified at runtime rather than upfront. that makes it easy to just bypass the minifier. Personally, I'm holding out for a visual studio extension for the .less T4 transforms that will do it at compile time.

Joel Coehoorn 2009-12-18 15:00:56

Though you would still have to find a way to communicate the existence of the "debug" paramete.

ctford 2009-12-18 15:01:43

@Joel, yes, it'd work either way. I have a sub directory with optimised versions (minified, minified and gzipped) that is created at build time.When a request for a .css file comes in, the handler catches it, sees if we're debugging. If not it checks the optimised directory for a suitable file. If it finds on it serves it up. If not, it serves up the original file.

djch 2009-12-18 15:25:28

And the debug param can be passed in http://example.com/css/styles.css?debug=true (The request gets handled by the handler, which can parse the querystring)

djch 2009-12-18 15:26:21

Answer 2

+2 A:

Suggestion: Use Hypermedia. Benefit: Your choice of URIs doesn't matter as much.

If providing sources in a visible fashion to your end-user, in the course of their normal use of your web application:

<a target="_blank" href="http://www.example.com/css/styles.css"
    rel="sourcecode" title="The non-minified CSS source.">
    Click here for CSS source code. </a>

<a target="_blank" href="http://www.example.com/scripts/buttons.js"
    rel="sourcecode" title="The non-minified JavaScript source.">
    Click here for JavaScript source code. </a>

If providing sources to developer users, outside course of their normal use of the web application, it might make sense to reference them in a non-visible section of the source:

<link rel="sourcecode" type="text/css"
    href="http://www.example.com/css/styles.css"
    title="The non-minified CSS source." />

<link rel="sourcecode" type="text/javascript"
    href="http://www.example.com/scripts/buttons.js"
    title="The non-minified JavaScript source." />

These links will only be available to developers who view the source of the HTML, or folks who have really tricked-out user-agents.

Along the same lines, you could put the non-minified CSS (but not JS) source as an alternate stylesheet.

Note: rel="sourcecode" isn't a standard (I just made it up), but I'm pretty sure it doesn't violate spec; and along with the title it helps to communicate the purpose of the link.

system PAUSE 2009-12-18 15:47:37

Interesting. And if you were only interested in humans, you could put a link in a comment at the top of the minified file, which would be a kind of informal hypermedia.

ctford 2009-12-18 15:54:09

The first seems really ugly in production code; the second example is spot-on awesome.

Dean J 2009-12-18 15:55:04

Yeah, I don't expect that the `<a>` links are really useful... As noted, that case would only be for a site or app where obtaining the source code was a normal user task. Highly uncommon.

system PAUSE 2009-12-18 17:23:59

ansaurus

tags:

views:

answers:

Supplying non-minified CSS/javascript on demand

related questions