Normally I use
<base href="http://domain.com/" /><!--[if ie]></base><![endif]-->
I haven't tried much with RewriteBase, I normally get confused and keep changing it till it works. Which method would be best, I obviously find the best solution because the links stay the same so that no links are broken most of the time when attaching a css file, e.g.
http://domain.com/css/main.css
It just always stay the same when accessing to sub-directories. Although, when I don't use the tag, and I access to a sub directory, it breaks the css links when I use
<link href="css/main.css" rel="stylesheet" type="text/css" />
As my PHP documents would include the header,
<?php include("include/global_header.php"); ?>
If I do that without the I would have to use:
<link href="../css/main.css" rel="stylesheet" type="text/css" />
Which can break when accessing to a sub-directory.
So... does the RewriteBase work the same as the ?
Your thoughts.
Basehref works at the HTML level on rendering of the webpage
RewriteBase is in the .htaccess file which is processed by Apache before the HTML is rendered.
As a result they perform different functions and cannot be comapared
Actually, you just compared them. I still think it's an open question as to whether they perform the same function, despite the fact that they do it at different times in the page lifecycle. Voted up though, for pointing out the fundamental difference.
Related
In laravel you can do one of these:
<link rel="stylesheet" href="/css/app.css">
<img src="/storage/img/logo.svg">
<script src="/js/app.js"></script>
<!-- same as the following -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<img src="{{asset('storage/img/logo.svg')}}">
<script src="{{asset('js/app.js')}}"></script>
The first is a relative path (relative to the public dir) and the second generates an absolute path.
Besides that, is there any difference in the results? At least in Chrome, Opera, and Firefox I could not perceive any difference.
Is there any advantage of using one over another? Maybe in performance or compability? Does one loads faster than the other?
There are potentially major differences.
The asset helper is CDN-aware. Setting the app.asset_url config value causes asset() to append that URL to every link it generates, which is very useful if you're using a CDN.
In addition, it'll save you a lot of work if your app winds up hosted in a subdirectory - all you have to do is set app.url, and asset will spit out the right URLs to js/app.js (i.e. /a/sub/folder/js/app.js).
What is the best way to order a CSS file of a custom theme at the bottom of in Magento 2. By example, I would like place CSS after or before an other.
Thanks
Unfortunately there is no way to position your CSS files. You can however add the media attribute to the css element. This will add it to the end of all the included CSS in the head.
<head>
<css src="css/styles.css" media="all" />
</head>
I have a jsp with the following (relevant) setup:
<s:url value="/res" var="res_url" />
<link href="${res_url}/less/bootstrap.less" rel="stylesheet/less">
<link href="${res_url}/less/responsive.less" rel="stylesheet/less">
...
Ive noticed a problem with using this technique, in that on the first page load of a new session my res_url variable will have ";jsessionid=xxxxxxxxx" appended. In this case that means the id appears in the middle of my stylesheet URL and therefore the stylesheets are not loaded.
I realize that I'm probably not using the URL tag in the way its intended, and that you can include param tags inside the URL tag to get around this, but I don't like the idea of it and think the way i did it was much cleaner. Is it possible to somehow tell it to ignore the jsessionid? Or is there any other way of doing this?
I don't see the benefit of using Spring's URL tag over the standard JSTL tag. What about
<c:url value="/res/less/bootstrap.less" var="lessBootstrap" />
<link href="${lessBootstrap}" rel="stylesheet/less">
If you want to define the /res/less path in a variable instead of repeating it you may do this like this:
<c:set var="resDir" value="/res/less" scope="request" />
The right way to do it is
<link href="<s:url value="/res/less/bootstrap.less"/>" rel="stylesheet/less">
<link href="<s:url value="/res/less/responsive.less"/>" rel="stylesheet/less">
I don't see what any simpler way to do it.
I have never done anything in sinatra before and decided to try it out on a project. I am confused on how script loading works. It seems to be intermittently working. Sometimes 2 scripts/css files will have internal server errors, and sometime they will all have errors.
This is my layout.erb :
<!doctype html>
<html>
<head>
<title>An HTML5 box of sand</title>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/style.less">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!--loads jquery-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script><!--loads jquery ui-->
<script type="text/javascript" src="/assets/js/lib/handlebars.js"></script>
<script src="/assets/js/lib/less-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/js/script.js"></script><!--This is the place where you play!!!-->
</head>
<body>
<%= yield %>
</body>
</html>
I have the assets folder inside of the public folder /public/assets. It is weird because sometimes it will load the assets/js/script.js file, and not load the handlebars file. Other times it will load the handlebars and not the script.js file. I am not sure what is going on.
~~~~~~~~~~~~~~~~~UPDATE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Discovered the problem but don't know how to fix it.
So, it seems that because I am using data mapper the auto_migrate! method is somehow screwing with how the assets are being loaded. Is there something I can do about this. Here is what I have in my app.rb file:
require 'rubygems'
require 'sinatra'
require 'data_mapper'
# Include the models
require './models/User'
# Connect to mysql
DataMapper.setup(:default, "mysql://root#localhost/dev_landing")
#This line is what is messing everything up.
DataMapper.auto_migrate!
set :public_folder, 'public'
get '/' do
erb :home
end
I set up data mapper like this because I read in a tutorial that this is how you get it to automatically create the tables you specify in your models. Is there a better way to do this so that it is not messing up the loading of my scritps and css?
DataMapper.auto_migrate! deletes existing tables in case they exist and creates them again.
So calling this function means: you lose all your data. (That's why there is an exclamation mark at the end, meaning: watch out!) In case your schema is still under heavy development, I suggest you to replace DataMapper.auto_migrate! by DataMapper.auto_upgrade!. It does not wipe your old data, instead it tries to modify the underlying tables while trying to keep the data. The exclamation mark is still there because your data might still get slightly damaged because changing the schema without corrupting the data is not always possible.
Another thing, the order of calls must be changed. Currently it is:
Model definitions
DataMapper.Setup
DataMapper.auto_migrate!
Your route definitions etc.
But it should be instead:
DataMapper.Setup
Model definitions
DataMapper.auto_migrate! DataMapper.auto_upgrade!
DataMapper.finalize (you forgot that one)
Your route definitions etc.
When something is screwed up with datamapper, the error messages can be weird/misleading. By the way, make sure that there are no calls to the database from inside your views. These calls belong into the controller, without any exception in my opinion. This way your app naturally follows the MVC pattern. (After all Sinatra hardly enforces any other structure... ;))
Example CSS
#wrap{margin:20px}
Code prettify wraps the whole line in .com
<span class="com">#wrap{margin:20px}</span>
Somebody has a similar issue here.
Where someone answers "Are you loading lang-css.js?".
Here's what I'm loading in the footer.
<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>
I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.
All help is greatly appreciated :)
Thanks!
The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.
<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>
You will also need to ensure that you are linking the stylesheet in the head of your document.
<link rel="stylesheet" type="text/css" href="/css/prettify.css">
You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.
<pre class="prettyprint lang-css linenums">
Finally, make sure you call the "prettyPrint()" function on page load.
<body onload="prettyPrint()">