Capture CSS route in MVC - asp.net-mvc-3

I'm using the Asp Sprite and Image Optimization Framework located here to handle any css sprites in my site. Depending on the brower the framework generates two different links pointing to these two files
/App_Sprites/highCompat.css - ie9, firefox, chrome
/App_Sprites/lowCompat.css - ie6, ie7
Unfortunately the css files are not minified and cannot be moved from their current location.
I have my own minification engine though wrapping around the Ajaxmin library where I use a handler to fling out compressed css on the fly.
This will capture a path like this.
/css.axd?path=reset.css|style.css|helpers.css
How could I with MVC capture the request and rewrite it so the css is served through my minifier?
Cheers!

Pretty easy, really: Put the CSS somewhere other than where the URI in your markup points.
IIS won't run route handlers if the physical file exists. So if your site has a physical ~/App_Sprites/highCompat.css file, your app won't be able to intercept it (though you could do this with a HttpModule). But if you put the file elsewhere and have a App_SpritesController then you can handle things as usual in MVC.
So either write an HttpModule (this would probably be my choice) or, if you must do it through MVC, relocate the file.

Related

404 Page Not Loading Images (File Source / Layers Problem)

I'm facing what could be a simple problem, but haven't been able to find any solutions yet.
I just recently built a simple 404 page on my website (nofound.html) which through a .htaccess redirection (ErrorDocument 404 /nofound.html) allows me to catch all URL errors and such. Basic.
The problem is that, since the 404 response can be called within different directories, say for example index, or /dir1, or /dir1/dir2, etc, the page is not loading its styles and images right, since the source paths do not link correctly (image.png links correctly from index/nofound.html, but should become ../image.png and so on when going into different directory layers).
I've managed to make the styles load correctly by loading the same stylesheet twice (styles.css AND ../styles.css), but for the images, I have not found any workaround yet (other than duplicating the image within layered directories, which is cumbersome and redundant).
Any thoughts? Thanks in advance!
Although it does not follow best practices, my final solution was to simply use absolute hyperlinks (such as https://website/img.png or something like that) rather than relative links within the website's anchors (../../img.png)
As such, every element on the page is loaded from its absolute -actual- directory, regardless of the relative relationship between the nofound.html result and the rest of the site architecture.

Server Side Include in JSF 2.2

I want to include external webpage into my JSF 2.2 application using Server Side Includes. I wrote following code inside ui:define but nothing seems to be happening.
<!--#include virtual="https://example.com/path/to/page.php"-->
does anyone know how can I do this?
What you are looking for is not Server Side Include, as you want to embed a remote HTML rendering into your page.
You may consider that this remote page will need resources (CSS, Images, etc), which may conflict with your own embedding page.
The best way to achieve that is to use JSoup in a Backing Bean and to display the result with h:outputText escape="false". But be careful with what you will display. You can offer a big security hole for your site or your users (XSS, CSRF, etc.). And you will still need to deal with remote resources ...
The real solution would be to use an iframe instead which will "solve" your problem pretty fast.

With phonegap is it faster loading local files via ajax call or read content file?

I'm writing a complex phonegap application. In this application some html files are downloaded from the web and put in device locale filesystem through phonegap file api http://docs.phonegap.com/en/2.2.0/cordova_file_file.md.html#File
I need to load those files on specific DOM parts and I started do it with ajax call to the resource. I tried also to read content file with FileReader api http://docs.phonegap.com/en/2.2.0/cordova_file_file.md.html#FileReader and load content directly in the related DOM part.
Either methods works well but I don't know if there are some possible performance issue with one method rather than other.
Someone knows if is it faster (or better) using ajax call or access to file with FileReader and put content in the DOM?
The difference isn't enough to matter, but the ajax call is probably slightly faster - it's a single XHR, and on iOS the plugin call involves an XHR followed by encoding the file into a URL.
The real reason to favor the custom ajax call is that it will work when run on a desktop browser, which can be very useful for debugging.
The main benefit of the file reader plugin call is that it will work across all platforms, including some cases where the file may not normally be accessible to the browser.

Considerations about optimizing singlepage mobile web apps by inlining all js and css

I am creating a mobile singlepage web app using jquery mobile. The webapp includes a number of javascript files and a number of css files. I have written a deploy script that concatenates and minifies js and css files, and now I am wondering whether I should inline the concatenated js and css directly in the HTML file - please note that I am talking about a singlepage app here (I know that this would be a bad idea in a traditional web 1.0 app with dynamically generated HTML). I am also using appcache/manifest file to cache the singlepage app so that subsequent access to the web app will be served from the cache, so it is the initial load time that is my primary concern.
When I inline everything (jquery, jquery mobile etc.), my 7kb HTML file increases to 350kb (100kb zipped) but now everything can be loaded in a single request.
But am I missing some other benefits such as parallel downloading of js files - and would it therefore be better to not inline the css and js, but instead just concatenate all js and css to a single js file and a single css file and then fetch each of them in separate requests?
Are there any limits regarding file size that I should be aware of? Maybe caching in network routers works better with smaller file sizes or whatever?
So my question boils down to whether it is a good idea to inline everything when making singlepage mobile web apps?
The answer to how much should be concatenated and how much should be inlined varies depending on a number of conditions. The final answer is you should do A/B testing and find what works best for you. From what you describe I recommend you definitely NOT inline 350K of CSS & JS. If you do this then any change to the HTML or JS or CSS requires downloading the entire payload. Instead, compartmentalize those changes and forced updates by keeping HTML, JS, & CSS as separate requests. You could do dynamic | inlining to make the first response fast but leverage (app or localStorage) cache for subsequent requests, but that's going to get complicated when coupled with app cache (because the HTML doc is saved to app cache). Otherwise, just keep them separate, save each resource to app cache, and update individual resources as needed.
I would not recommend inlining everything into the html if your webapp could be accessed from different urls with different querystring.
Example :
http://webapp.com/?fb_token=fdsf
http://webapp.com/?referer=bla
http://webapp.com/?tracker=toto
Each of those will add a master copy in the appcache (you can veryfy it by looking at chrome://appcache-internals/ in chrome). You then risk to reach the quota limit for appcache in term of cache. Furthermore on appcache update, the browser goes through its appcache entry list and ask a fresh copy of it.
A good compromise that i am following for mobile device & appcache , is to keep the html tiny and then have one big css (containing base 64 inlined images) and one js file.
FYI, there is currently a quota limit on the size on the sum of all your listed resources in appcache in the order from 5MB to 25MB (25 being the new iOS6 limit)
-seb

caching kills links (jquery mobile on iPad)

I am working on a webapplication that uses caching to make it available offline. Everything works fine when running it chrome (offline and online). But when I run it on iPad the links don't work anymore and I get failed to load page everywhere. Removing the caching makes the links work again so it obviously has something to do with the caching. Navigating directly to the seperate pages of the webapp also works fine in Safari, its the link that causes the error. By default all links are loaded with AJAX in jQuery Mobile. Changing this by adding rel="external" also fixes the problem, but obviously I don't want to do that.
To enable caching I added this code: and created a manifest file with ALL the files (scripts, css, images, html). Does anyone know what the problem could be?
I've experienced this as well while working with caching using manifests. What I discovered was that there Chrome has no limits. iPad and iPhone do. This appears to be pretty small, around 5mb. Try removing images as much as possible and using YUI Compressor on your scripts.
Ajax requests can be cached actually, the system doesn't care if the request is by AJAX or normal full request. All you have to do is put the URLs you wanted to retrieve by ajax into the manifest like the rest of the assets.
Hope this helps

Resources