I have creatd a solution in Visual Studio 2013 which comprises two web application projects Core.Web and App.Web. Core.Web uses the url web.core.dev. App.Web uses the url web.app.dev.
Core.Web contains several javascript and css files that can be shared between projects. App.Web references these javascript files. App.Web may have an html file like
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>App1.Web</title>
<!-- core javascript -->
<script src="//web.core.dev/Javascript/Common.js" type="text/javascript"></script>
<script src="//web.core.dev/Javascript/Ticker.js" type="text/javascript"></script>
<!-- local javascript -->
<script src="index.js" type="text/javascript"></script>
<!-- core css -->
<link href="//web.core.dev/Style/Reset.css" rel="stylesheet" type="text/css" />
<link href="//web.core.dev/Style/Global.css" rel="stylesheet" type="text/css" />
<!-- local css -->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
This works fine locally. But when I come to publish live these links will not work unless I change them manually (web.core.dev changed to core.mywebsite.com). I would like to be able to publish the project and not have to worry about changing the local hrefs to live hrefs.
Is there a standard strategy that allows the domains to be changed depending on where they are published? A strategy that works for both .aspx and .html files?
Related
I am observing a strange behaviour. I have some HTML/JS files. I am using SimpleServer as web server. I notice that the latest version of one particular file is not uploaded even after I change that file. When I inspect the file using browser's developer tools, I still see old code. What could be the reason?
The file in SpecHelper.js. It is included in index.html as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<p>test </p>
</body>
</html>
If I change index.html or app_spec.js, I can see the changes but if I change SpecHelper.js, I still see the old code! I am debugging SpecHelper.js and this is not helping!
In case of Google Chrome browser: did you try chrome's "empty cache and hard reload" option after right-clicking to the refresh button with opened dev tools window?
You should try to open the page in an incognito or private browser window too.
I came across the following index.html page in which i didn't find any custom assets, such as js and css files. The assets path is as follows
I am not able to find where we have included assets/css/custom/.css assets/js/custom/.js files.
Is there a way to hide these css and js file from html code?
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where passion meets potential</title>
</head>
<body>
<!-- start of loading jquery -->
<script src="assets/js/vendor/jquery/jquery.min.js"></script>
<script src="assets/js/vendor/lazyload/lazyload.js"></script>
<!-- Loading angular and angular route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<!-- Loading Angular Controller -->
<script src="controller.js"></script>
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
<!-- Main Content -->
<div id="main">
<!-- angular template injection-->
<div ng-view></div>
</div>
<!-- END Content -->
</body>
</html>
Just read the comments. A library called lazyload is used to load all dependencies, probably from the folders you named.
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
I don't know how it works exactly but I assume it will add the lazily loaded files somewhere to the DOM. The client will always be able to find those resources somehow (e.g. the network tab of chrome devtools).
The files in the code above will probably contain information about how it works for your project.
I was using an older version of less (1.2.1) by accident and when I updated the .js to the most recent version (1.3.3) it seems that Espresso, my html/css editor, now takes 40% cpu and up to 90% when in development/watch mode. I've tried other versions and it seems like it happens with 1.3.1+. I've tried different variations of the watch mode and even disabling it completely and it's still using 40-50% cpu. I basically can't work with it now.
edit: It seems like it's mostly being caused by watch mode, which I highly depend on :(
This is what my site head looks like. Any suggestions would be appreciated as I do not understand js at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Article Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style/default.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/tablet.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/mobile.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/wide-mobile.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="js/less-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I think it is better to precompile first and then make the site read the already-compiled .css instead.
You can use Koala app for precompiling the less file or you can use grunt too, and get rid of the less.js.
When I run the below page which is just HTML one with extjs files, after loading I inspect Firebug, so in in Firebug under "net" shows all requests which are a total of 5...but the problem is that ext-all-debug.js is loaded twice but the other JS and CSS are loaded once...I am just wondering as why it is loaded twice...pls check below code and advise me..
thanks in advance....
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="extjs/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
</head>
<body>
</body>
</html>
If you include bootstrap.js, it will automatically load the Ext-Libraries.
If you are local (that means, localhost, any IP-adress or file://
url) this is ext-all-debug.js.
ext-all.js otherwise.
Just use bootstrap.js or ext-all-debug.js exclusively.
This question may sound familiar but not quite the same as asked before.
I have a CSS that is sent to browsers with no javascript functionality (referenced by a link tag). I have another CSS which is used by the ajax version of the site and is injected to the page by JS. Each of these files are relatively big (gt 200K). I don't want the JS enabled clients to download both files.
I can do this easily using noscript tag. But that has the limitation in cases where the user is behind a proxy that filters script tags. So the browser ends up with no CSS altogether.
<html>
<head>
<noscript><link rel="stylesheet" type="text/css" href="nojs.css" /></noscript>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
</script>
</head>
<body></body>
</html>
My attempt to use HTML comments in a non-standard way worked in Chrome but failed in FF:
<html>
<head>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
document.write('<!----');
</script>
<link rel="stylesheet" type="text/css" href="nojs.css" /><!-- -->
</head>
<body></body>
</html>
Both browsers parse the HTML correctly (not sure if IE and Opera would too), but FF downloads the nojs.css in all cases (without actually applying it when JS is enabled).
Any ideas?
The prefetching mechanism of Firefox seems to ignore the comment and preloads the CSS file, but only if it's referenced as a link element.
Use a CSS import statement instead to suppress prefetching of the unused file:
<html>
<head>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
document.write('<!--');
</script>
<style>
#import url(nojs.css)
</style>
<!-- -->
</head>
<body>
...