Problems with Javascript & CSS on dropbox (mime types)

Question

I thought I would share this answer for others, since it took me some time to figure out:

I am using jsbin and jsfiddle for testing web pages. I have many javascript and CSS files (as well as images referenced from the CSS files). I am using DropBox to store the folders and files with Javascript and CSS. The issue is that Dropbox changed their policy recently with Public Folders. If you share a link to a CSS file from a non-public folder you will NOT get the CSS (text/css) mime type, but a nicely formated text/html. In JSBIn (firebug) you will see and error like:

The stylesheet https://www.dropbox.com/s/y9ms5jr6zqdans2/leaflet.css was not loaded because its MIME type, "text/html", is not "text/css".

Answer 1

If you change the url to https://dl.dropbox.com/... then you will get a direct link and will get the CSS type.

But my CSS files reference image files such as this:

.leaflet-control-layers a {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}

So in my case I have to use the DropBox PUBLIC folder. New accounts don't have this option (they don't have a folder called PUBLIC), so I suppose you will have to use GITHub or something like if you have a new DropBox account

An example of how to do this can be seen at: http://jsbin.com/idovub/5/edit