When I make changes to CSS and JavaScript files, my users often have to reload a couple of times to get the changes (obviously to clear out the cache).
I was wondering if someone had a really good experience with a plugin to solve this issue.
I am currently using grails 1.3.7 and I use tomcat for my production environment.
Seems to me that this might be the best option for me.
As you say, the cached-resources plugin is a great option.
You need to install it alongside the resources plugin. Assuming the resources plugin is installed and configured correctly, you don't have to do anything with the cached-resources plugin in order to get it to work correctly. Hence the apparent lack of documentation for the cached-resources plugin. Everything you need to know is linked from the resources plugin.
Related
I'm theming Bootstrap with custom styles, by using a local copy of the source SASS files as described on the official documentation, and importing them in a custom.scss file.
I'm mainly willing to customize the appearance, non the functionality; so, in example: colors, typography and the so-called "Sass options".
In this kind of scenario, are there any downsides or possible problems in importing the JS part of Bootstrap (I'm referring in particular to bootstrap.bundle.min.js) in my project by using a CDN instead of providing it from local?
EDIT: Please note that I'm not asking how loading a resource from CDN is different from loading it from local, I'm just asking if loading a part of Boostrap from CDN and another from local could lead to problems or unexpected behavior.
This is probably a silly question, I'm reasonably sure that I can do this without incurring in any problem, but I'd like to have some feedback from someone more expert than me.
If you can, you should host the JS yourself.
Since bootstrap uses integrity parameters in their example "how to use" code, you don't really have to be scared about cross site scripting attacks if their CDN is compromised (unless you leave them out in your code). The files will simply not be loaded.
That is still however not something you want: If their CDN is compromised or their servers simply crash, you will not be able to load the JS anymore and parts of your app might become unusable.
You could, however, first attempt to serve from the cdn and if that's not possible give the user a local version. That way you can utilize the cache and be save when bootstrap servers go down. Here's a small excerpt taken from freecodecamp:
<script>
if (! $.fn.modal) {
document.write('<script src="YOUR JS LOCATION"></script>');
}
</script>
You should put this underneath the line where you include the bootstrap CDN.
The code simply checks if a function from bootstrap is available and if not loads it from your local server.
I recently started using js libs and have a question regarding them.
It's possible to include their source, but then there is a problem with versions, as there are two options: add version to file name, but then all includes will have version appended to file name, which will cause trouble when you will update version. If version isn't specified in file name it's not clear what version is, but it's not that big problem, as you can go inside js source and see it's version.
Another option is to link to libraries hosting url, but it'll add additional overhead to download them and when external host will be unreachable, your site won't be able to load that library.
There seem to be maven plugins for some js libraries, but they are usually 3rd party and frequently they refer to outdated versions.
The ideal solution will be something maven-like but with official support.
Also as a comment advises it's possible to use some sort of bundling, but bundling happens after building, so it's still a question how to keep those js libs before bungling.
Please advise.
For many projects it is not necessary to stay at the bleeding edge of 3rd party libraries. Like for jQuery, a new version can maybe break some of the plugins you use. So you have to check and test everything first before deploying a new version.
Having the version in the filename is considered good practice though, because it prevents caching issues and allows you to cache files for a very long time (since the browser will always download a file when the filename has changed).
Regarding the issue you pointed out with the libraries hosting url, they are true so far. But you also need to consider, that when those are widely used (which they are) the library may already be cached in your browser and therefore the browser won't need to download it again. You can check out https://developers.google.com/speed/libraries/devguide for a library hosting by Google, which you can expect to be pretty reliable I guess.
All that being said, it depends on the project. If you need 100% reliability you need to host the library by yourself. If you're fine with Google's reliability, go for library hosting.
As your edit pointed out bundling: https://github.com/bower/bower check this out. It is a package manager for installing dependencies etc. on frontend projects. Should be exactly what you're looking for.
I thought Magento came with this feature out of the box but it doesn't appear to be working at all. I'm not sure if I haven't set it up properly, but right now I'm resorting to using cat and altering the page.xml layout file to use the combined javascript and css files.
Can I make Magento do this instead or is there an extension that adds this feature?
Go to System>Configuration>Developer and alter the settings in the Javascript and CSS settings boxes. Ensure that you have correct Configuration Scope set in the top-left of the page for your website/store.
Make sure that you flush the cache after changing the setting.
P.S. The Fooman Speedster extension will also perform this task.
There is also mod_pagespeed which does this for all output from your server but doesn't hurt Magento while it does it.
There are extensions in Magento Connect like JS/CSS Compression minify or on the web like Compressor.
http://www.magentocommerce.com/magento-connect/catalog/product/view/id/10581
this extension works fine and has improved our site's performances to a considerably higher levels...
Think this might help someone...
install mod_pagespeed by google on server zero configuration for your magento.
This one should be easy, and I think I know the right answer, but here goes.
For compatibility reasons, should I leave the filename of jQuery as "jquery-1.3.2.min.js" or just rename it to jquery.js?
My guess is leave it as is to avoid conflicts in case another app uses a different version of jQuery. If they've renamed it to "jquery.js" and I do the same, I see potential version conflicts.
Am I wrong or way off base?
Jeff
It's a very good idea to have version-numbered JS (and CSS) files, because that lets you configure your web server to use a far-future Expires header on such files without running into caching problems. When the file gets updated, it gets a new version number, so the browser always fetches the new version, not the old cached one.
You should do this on your other JS and CSS files, too. You want this to be automated, not something you manage by hand. Your development work happens on unversioned files, and your versioning system creates versioned copies and works out the details of updating the references to the CSS and JS files in the HTML files to point to the versioned copies. This can be a bit of work, but well worth it when it comes to speeding up your site. It took me about a day to set my system up. The improvement wasn't subtle.
I would go with jquery-1.3.2.min.js because it's more specific and you can immediately tell if you're reviewing this site in months to come, as well as avoiding any filename confliction in the future.
You shouldn't have any issues with updating, if you're relying on something like an include/template file for the javascript.
In my opinion, its just a personal preference. If you have version in your file name, It helps you easily identify which one you are using with out actually opening the file. It also provides an indirect way of clients downloading the new version file (as it is never cached). If you don't use the ext, upgrading to newer version is easy in coding perspective, but takes the pain of force downloading the new file by all users.
Recommended way to use jQuery in app is using the google's hosting..
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
Why and how to use jQuery hosted on google
I prefer to leave the version in the file name because there are times when you are changing versions and this is very helpful. At a glance I can see which version I am using on any given webpage.
UPDATE: There are stupid questions, and this is one of them. I didn't realize that serving JavaScript via Django was so large a question. When I've answered it, I'll post the most useful resources for those who want to RTFM, unless the mods close this first. Until then, sorry for wasting your time.
How do I install and configure Tiny MCE, Apache2 and Django so Tiny MCE is available as a local application only? I think what I want to do is setup Apache so it serves only the local computer, and does so with Django to provide a Tiny MCE editor. Apache2 and Django are already installed but I don't know how to integrate Tiny MCE to achieve this result.
I'm a newbie to web development and frameworks, so I might be missing an obvious solution to this problem.
(Why am I doing this?
I want a WYSIWYG HTML editor that will let me edit a document's formatting and see how that affects the HTML, and edit the HTML and see how it affects the formatting, while using a CSS stylesheet.
I will want to serve this functionality to the web over a SSL connection but don't yet want to set that up just yet.
The web application will go through Django, so I want to get things working through that framework.
I'd like to see a JavaScript application in action.)
Thanks for your patience.
UPDATE: Is this better phrased as:
How do I serve a javascript application through Django?
How do I make that service available only to the local computer?
Question #2 seems to have been answered.
Bind Apache to the 127.0.0.1 interface only. The documentation can be found at http://httpd.apache.org/docs/2.0/bind.html
What you serve is irrelvent as far as this question is concerned, since you are just trying to control where you serve it too.
In response to q.1 - you don't, normally. Django does not serve static media like JS files, images, etc. Having said that, there is a tinymce app for django which eases the integration. http://code.google.com/p/django-tinymce/ works well for me.