Is the only way to use an external stylesheet with Elm to use Browser.element and do something like the following?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="spectre.min.css">
<script src="elm.js"></script>
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
What if I want to use a Browser.Document instead, or even a Browser.Application ?
When searching the internet for Elm and CSS, I only find libraries that write CSS using Elm, or that replace CSS with Elm code. But what if I already have a CSS stylesheet that I want to use. I'd like to use Spectre CSS. It's just a single CSS file "spectre.min.css". Can I use that with Elm in a simple way?
If you want to control the HTML document (i.e. the head section) where your app is running in then you have to switch from using elm-reactor to embedding the compiled Elm app like described in the Elm guide.
I have created a little boilerplate setup that allows me to control the "index.html" and have hot code reloading via a little script (no other dependencies).
Related
I am trying to add custom css to my razor view. The route is working as i can see the html that is in the file, but when i try to add custom css it does not work.
I already tried the following code inside my Overview.cshtml, which is a view of my custom feature in sitecore:
<head>
<meta name="viewport" content="width=device-width" />
<title>Overview Rules</title>
<link href="~/Style/ExternalProfiling.css" rel="stylesheet" />
#RenderAssetsService.Current.RenderStyles()
</head>
Both are options inside the habitat solution, but both seem not to work. My file structure is as following:
The actual result is that there is no stylesheet linked to the cshtml file because i think it is overridden. I would like to know where i should place my css or maybe sass to make styling on my custom created view in the feature model to work.
I have tried the following in my blade template:
#section('styles')
<link href="{{asset('assets/css/app.css')}}" />
#stop
In the master blade template I have included the following:
<link href=asset('/assets/template/css//invoiceTemplate.css')rel="stylesheet" type="text/css"/>
I you want to include a CSS / JS file for a specific blade use stacks (see here)
from the documentation:
#push('scripts')
<script src="/example.js"></script>
#endpush
You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the #stack directive:
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
you can also place them at the bottom of your blade (where a lot of people call thier JS files these days)
You need to add #yield('styles') to your master blade template.
Yes it is. Write this code to your master template
#yield('page-styles')
and add this also to the specific blade file where you want to add a specific CSS file.
#section('page-styles')
//Your specific css file
#stop
Make sure that the parameter inside the #section and #yield are the same.
In this case, I've used 'page-styles'.
I'm assuming I'm doing something wrong as when I attempt to use Bokeh's 'autoload_static' function and place the script tag in my html file the graph is still interactive? In addition to this, the output of my script tag (by autoload static) doesn't look exactly the same as tutorial despite it being the same code...
Would really appreciate the help. I'm trying to output it as static so I can correctly convert it to pdf with pdfkit - which unfortunately doesn't work with interactive graphs.
Thanks!
Html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Scatter Plots</title>
<!-- <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.7.min.css" type="text/css" /> -->
<!-- <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.7.min.js"></script> -->
</head>
<body>
<script
src="js-outputted-by-autoload_static"
id="f9632bd4-873b-4c08-a4ad-c8a997873430"
data-bokeh-model-id="bec3e18b-71d0-4d3d-9d6a-0079d8fc6082"
data-bokeh-doc-id="b39e1b50-1e37-4062-92a8-888cc4424328"
></script>
</html>
Bokeh:
from bokeh.resources import CDN
from bokeh.plotting import figure
from bokeh.embed import autoload_static
plot = figure()
plot.circle([1,2], [3,4])
js, tag = autoload_static(plot, CDN, "js-outputted-by-autoload_static")
autoload_static is not for generating images, it is for generating JavaScript files that can embed standard interactive Bokeh plots in web pages. The "static" part refers to the fact that these plots are not backed by a Bokeh server.
Since autoload_static still generates JavaScript to render onto an HTML canvas, I doubt it will be useful at all with pdfkit (which I assume cannot do anything with JS code).
If you want to create images (e.g. PNGs) of Bokeh plots, you should look at the Exporting Plots section of the User's Guide. With recent versions of Bokeh, you can do e.g.
from bokeh.io import export_png
export_png(plot, filename="plot.png")
to generate a PNG (which presumably is what pdfkit can handle). Some optional dependencies are required to be installed to use this functionality, the linked User's Guide has all the information.
I am very new and green so please forgive the basic question.
When I create a site using Bootstrap I believe that I include the link to the Bootstrap CDN file in the head section of each page and I also include a link to my own CSS style sheet. Is that correct? Or can I put the cdn file links in my style sheet and then just put a link to the style sheet in the HTML head section of every page?
Same question re JavaScript. Do I link to the cdn file on every page of my site?
It is always good to include the js and css cdn links in every page or u can download these and add it to your project and include as you include your stylesheet.
Don't add cdn link to your css.
It depends on what you want. Are you going for page-speed?
If you want to optimize your website for page-speed I recommend combining both the CSS and JavaScript files in to single files (there are tools to automate this process). Also if you really want to optimize your website for page-speed you can apply both the combined CSS and JavaScript dynamically, by putting the following snippet just before the closing body tag so that the HTML can be rendered before executing the Javascript:
<script type="text/javascript">
function (sources) {
for (var i = 0; i < sources.length; i++) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = sources[i];
head.appendChild(script);
}
})([
'//domain.com/combined.js'
]);
</script>
Note that the JavaScript files are not loaded in synchronized order, but using a single combined script it doesn't matter.
For the sheets I use the following algorithm:
Determine if it is the first page view of the session:
If so, inline the combined CSS in the head tag:
<html>
<head>
<style><? echo file_get_contens('./path_to_combined_style.css'); ?></style>
</head>
</html>
If not, just include the CSS link in the head tag:
<html>
<head>
<link rel="stylesheet" href="//domain.com/path-to-combined-style.css" type="text/css" />
</head>
</html>
Then you can force to cache to CSS style on the first load by executing a XMLHttpRequest, for simplicity I use jQuery here:
$(document).ready(function(){
var href = "//domain.com/path-to-combined-style.css";
$link = $("link[href='" + href + "']");
if ($link.size() === 0) {
$.get(href);
}
});
You can put this in the combined JavaScript.
Note that you won't be able to use the speed advantage of the CDN. To solve this you could publish your combined resources to your own CDN. You will loose the possibility that the user has already cached bootstrap though.
Ofcourse this whole process requires some knowledge and experience, so you might want to consider using a tool such as CloudFlare, which does a pretty good job optimizing your website.
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.