I'm trying to import a bootstrap/angular (made for node)/less theme my company purchased into a ASP.net MVC project from scratch.
The theme uses less, so doing some google searches, I installed "dotless" and "dotless adapter for System.Web.Optimization".
So I'm copying and pasting the references and it errors here:
<!-- prochtml:remove:dist -->
<script type="text/javascript">less = { env: 'development' };</script>
<script type="text/javascript" src="~/assets/plugins/misc/less.js"></script> <-- Errors Here
<!-- /prochtml -->
It says "LessCssHttpHandler.cs not found". "You need to find LessCssHttpHandler.cs to view the source for the current call stack frame."
I was looking into what "less.js" does.. and i couldn't find a clear cut description but it seems like it makes it so that you're able to use the LESS environment because CSS isn't a current standard like CSS is.
If i'm right in my assumption, do I not need to include "less.js" into my project? Thanks
No. Once the processing is done server-side (using dotLess), no need to include Less.js in the client-side (as data is already received as regular CSS).
Also, if you're using Visual Studio, you can set WebEssentials to automatically compile your Less files upon saving (SomeStyleSheet.less -> SomeStyleSheet.css), then on the client-side you're simply loading regular CSS. That will spare you from both server and client side compilation needs.
Related
I have been looking at a HTML 5 boilerplate template (from http://html5boilerplate.com/) and noticed the use of "?v=1" in URLs when referring to CSS and JavaScript files.
What does appending "?v=1" to CSS and JavaScript URLs in link and script tags do?
Not all JavaScript URLs have the "?v=1" (example from the sample below: js/modernizr-1.5.min.js). Is there a reason why this is the case?
Sample from their index.html:
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">
<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>
<!------ Some lines removed ------>
<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>
<!--[if lt IE 7 ]>
<script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->
<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->
These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:
/Resources/Combined.css?v=x.x.x.buildnumber
Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:
<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes.
Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.
This makes sure you are getting the latest version from of the css or js file from the server.
And later you can append "?v=2" if you have a newer version and "?v=3", "?v=4" and so on.
Note that you can use any querystring, 'v' is not a must for example:
"?blah=1" will work as well.
And
"?xyz=1002" will work.
And this is a common technique because browsers are now caching js and css files better and longer.
The hash solution is nice but not really human readable when you want to know what version of file is sitting in your local web folder. The solution is to date/time stamp your version so you can easily compare it against your server file.
For example, if your .js or .css file is dated 2011-02-08 15:55:30 (last modification) then the version should equal to .js?v=20110208155530
Should be easy to read properties of any file in any language. In ASP.Net it's really easy...
".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");
Of coz get it nicely refactored into properties/functions first and off you go. No more excuses.
Good luck, Art.
In order to answer you questions;
"?v=1" this is written only beacuse to download a fresh copy of the css and js files instead of using from the cache of the browser.
If you mention this query string parameter at the end of your stylesheet or the js file then it forces the browser to download a new file, Due to which the recent changes in the .css and .js files are made effetive in your browser.
If you dont use this versioning then you may need to clear the cache of refresh the page in order to view the recent changes in those files.
Here is an article that explains this thing How and Why to make versioning of CSS and JS files
Javascript files are often cached by the browser for a lot longer than you might expect.
This can often result in unexpected behaviour when you release a new version of your JS file.
Therefore, it is common practice to add a QueryString parameter to the URL for the javascript file. That way, the browser caches the Javascript file with v=1. When you release a new version of your javascript file you change the url's to v=2 and the browser will be forced to download a new copy.
During development / testing of new releases, the cache can be a problem because the browser, the server and even sometimes the 3G telco (if you do mobile deployment) will cache the static content (e.g. JS, CSS, HTML, img). You can overcome this by appending version number, random number or timestamp to the URL e.g: JSP: <script src="js/excel.js?time=<%=new java.util.Date()%>"></script>
In case you're running pure HTML (instead of server pages JSP, ASP, PHP) the server won't help you. In browser, links are loaded before the JS runs, therefore you have to remove the links and load them with JS.
// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];
for (i=0; i < cacheBust.length; i++){
var el = document.createElement('script');
el.src = cacheBust[i]+"?v=" + Math.random();
document.getElementsByTagName('head')[0].appendChild(el);
}
As you can read before, the ?v=1 ensures that your browser gets the version 1 of the file. When you have a new version, you just have to append a different version number and the browser will forget about the old version and loads the new one.
There is a gulp plugin which takes care of version your files during the build phase, so you don't have to do it manually. It's handy and you can easily integrate it in you build process. Here's the link: gulp-annotate
As mentioned by others, this is used for front end cache busting. To implement this, I have personally find grunt-cache-bust npm package useful.
I'm trying to simply load google closure modules in my browser at development time, so I don't need any crazy advanced compilation.
my index.js contains:
goog.module("Widgets.index");
var Widgets$app = goog.require("Widgets.app");
/* rest of the code */
my index.html contains the following :
<script src="closure/base.js"></script>
<script src="index.js"></script>
I get the following in my console:
Module Widgets.index has been loaded incorrectly.
Note, modules cannot be loaded as normal scripts.
They require some kind of pre-processing step
How do I pre-process the index.js?
I just want to load some simple google modules in my browser, this is development time. No need for any crazy (slow?) optimizations..
Your entry point is included on the page as a script but defines itself as a module. That's what the error message is telling you. Instead:
index.js
goog.provide("Widgets.index");
var Widgets$app = goog.require("Widgets.app");
/* rest of the code */
I have a Plone product for integration of MathJax; because the usual way of reading everything from the cdn network doesn't work well for me, I forked https://github.com/collective/collective.mathjax to use the packaged MathJax. (I also don't like to have a script reference with a query string on every page, while most of them not even contain formulas).
However, according to MathJax documentation: Using in-line configuration options, I should better have a configuration script with a text/x-mathjax-config mime type. From the looking at it, adjusting the mime type seems not to be possible in the Javascript registry.
So, how can I register a resource with a customized mime type? Or do I need to build the script element manually?
You can store MathJax configuration blocks in regular JavaScript elements.
This is documented on the docs page you linked to (just a little further down).
To quote:
Starting with MathJax version 2.3, it is possible to set window.MathJax to a configuration object in any Javascript code before MathJax’s startup. MathJax will then use that object for its initial configuration. For instance the previous example becomes:
<script type="text/javascript">
window.MathJax = {
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
};
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js?config=TeX-AMS_HTML">
You can put this kind of configuration into a separate file as well; just make sure you load the configuration before MathJax. If you want to load it via the query string on MathJax.js, then make sure to follow http://docs.mathjax.org/en/latest/configuration.html#using-a-local-configuration-file-with-the-cdn
I have set up a simple test using ASP.NET's bundling and minification feature. I have two very simple js files:
~/JS/Site.js
(function echo1() {
alert("this is site.js");
})();
~/JS/test.js
(function echo2(value) {
alert("and this is test.js");
})();
I've created a bundle as follows:
bundles.Add(new ScriptBundle("~/bundles/scripts/site-globals").Include(
"~/JS/Site.js",
"~/JS/test.js"));
and referenced the bundle on the page using #Scripts.Render("~/bundles/scripts/site-globals")
When I run the site under debug (<compilation debug="true" targetFramework="4.5" /> in web.config) I get the expected result - two alert boxes show one after the other.
However, when I run change to release (<compilation debug="false" targetFramework="4.5" />) - I only see the first alert box, and the combined JS file that gets sent to the browser has completely ignored the content of test.js.
The "combined and minified" output is as below, and wrongly only includes the code from Site.js:
(function(){alert("this is site.js")})()
Any ideas on why this is happening would be much appreciated! Thanks
I've found out what was causing this problem. If any of the javascript files have a comment as the last line, they will be combined together without a newline, causing the first line of the next file to be commented out.
Here's a link to another question on stack overflow which demonstrates this: https://stackoverflow.com/a/14223945/11459631
In my case, I was using the Web Essentials Visual Studio plugin to minify my javascript files. It was creating a .js.map file for each JS file, and at the end of each .min.js file was a commented line like this, which turned out to be causing the problem:
//# sourceMappingURL=somefile.min.js.map
Since I didn't need the mapping files, I turned this feature off using Options -> Web Essentials -> Javascript -> Set Generate source maps (.map) to false
Hope this helps anyone who finds this problem!
Matt, your bundling code looks correct, do you receive any js errors in the browser console when running in Release mode? Also as a side note, are you aware that you can simply define the folder path to your JS files and they will all be included?
I'm trying to implement a TinyMCE plugin with ExtJs, with a demo as example, found here: link.
This fails because I receive an "Ext is not defined" error in Firebug. I basically copied the example, I only used a newer version of Ext. First of all the css and scripts are included:
<link href="scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="scripts/extjs/ext-all.js" type="text/javascript"></script>
<script src="scripts/miframe/miframe-min.js" type="text/javascript"></script>
<script src="scripts/tinymce/jscripts/tiny_mce/tiny_mce_src.js" type="text/javascript"></script>
<script src="scripts/ux/Ext.ux.TinyMCE.js" type="text/javascript"></script>
Firebug does not complain, all the scripts are found on the specified paths and are included.
Next I call the Ext function in the head of my aspx document,
<script type="text/javascript">
console.log("Ready...");
Ext.onReady(function() {
console.log("set...");
Ext.get("cmdOpen").on("click", function() {
console.log("GO");
var dlg = new Ext.Window({
//etc
</script>
The console.log("Ready...") shows up in the console, then the code breaks. There are four references to "Ext is not defined", in ext-all.js(), miframe-min.js(), Ext.ux.TinyMCE.js() and in the code in the .aspx file. (Default.aspx)
I did not alter any aspect of the included files, they are official releases.
Am I perhaps missing a statement somewhere? Or do I have to include other things still? I have honestly no clue.
Even when including ext-all(-debug).js, you still need to include the ext-base.js file before that, otherwise you will get the "Ext is not defined error". Not sure by your last comment if you are already past this or not, but I thought I would point it out. Please see this page for complete details on how your includes should be set up:
http://www.extjs.com/learn/Tutorial:HTML_Page_Setup
there is a firefox extension called "jsview", it allows you to see what scripts and css files are included on a page.
When navigating to the link you include at the top of your post and opening the ExtJs file, you'll notice that the example provided is using version 2.1 of the code.
The Ext.ux.TinyMCE v0.6 has a corresponding blog post here. You will notice that it specifically requires:
Firefox 2+, Opera 9+, MSIE 7
ExtJS 2.1
TinyMCE 3.1.0.1
Ext.ux.ManagedIframePanel
Be aware that when plugging in a newer versions of the TinyMCE or ExtJs libraries, there might (read will) be breaking changes that you will then have to resolve. You could try scrape the files directly from the example to ensure you have a working version.
If you choose to use ExtJs v3+, get the latest components:
1) ux.ManagedIframe has been maintained more recently and even upgraded for ExtJS 3.x here
2) Read through the ux.TinyMce thread and download the latest version. I think it's 0.7b. If you're still having problems, that's probably the best place to find answers.
copy the lib folder in your eclipse workspace`s exjts project folder and just give the relative paths, is should than work
Go to ExtJs website and make sure you download and included all the necessary files and IN ORDER,also using a newer version might break the code.
try it with simpler examples and only reference the ext stuff and see if it loads